chore: cleanup

packages/app/src/components/prompt-input.tsx

@@ -1352,7 +1352,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       <span class="sr-only">{mode === "shell" ? language.t("prompt.mode.shell") : mode}</span>
                     </div>
                   )}
-                  class="w-[68px] [&_[data-slot=radio-group-wrapper]]:h-7 [&_[data-slot=radio-group-wrapper]]:w-full [&_[data-slot=radio-group-wrapper]]:rounded-[4px] [&_[data-slot=radio-group-wrapper]]:border-[0.5px] [&_[data-slot=radio-group-wrapper]]:border-border-weak-base [&_[data-slot=radio-group-wrapper]]:bg-surface-inset-base [&_[data-slot=radio-group-wrapper]]:p-0 [&_[data-slot=radio-group-wrapper]]:shadow-none [&_[data-slot=radio-group-wrapper]]:overflow-visible [&_[data-slot=radio-group-items]]:h-full [&_[data-slot=radio-group-items]]:gap-1 [&_[data-slot=radio-group-indicator]]:rounded-[4px] [&_[data-slot=radio-group-indicator]]:bg-surface-raised-stronger-non-alpha [&_[data-slot=radio-group-indicator]]:shadow-[var(--shadow-xs-border)] [&_[data-slot=radio-group-item]]:h-full [&_[data-slot=radio-group-item]]:flex-1 [&_[data-slot=radio-group-item]]:p-0.5 [&_[data-slot=radio-group-item-label]]:size-full [&_[data-slot=radio-group-item-label]]:rounded-[2px] [&_[data-slot=radio-group-item-label]]:p-0"
                 />
               </div>
             </div>

packages/ui/src/components/radio-group.css

@@ -152,3 +152,46 @@
     cursor: not-allowed;
   }
 }
+
+[data-component="prompt-mode-toggle"] [data-component="radio-group"] {
+  width: 68px;
+
+  --radio-group-padding: 0;
+  --radio-group-gap: 4px;
+  --radio-group-radius: 4px;
+
+  [data-slot="radio-group-wrapper"] {
+    height: 28px;
+    width: 100%;
+    box-shadow: none;
+    overflow: visible;
+  }
+
+  [data-slot="radio-group-items"] {
+    height: 100%;
+  }
+
+  [data-slot="radio-group-item"] {
+    display: flex;
+    flex: 1 1 0%;
+    height: 100%;
+    padding: 2px;
+  }
+
+  [data-slot="radio-group-item-label"] {
+    height: 100%;
+    min-height: 100%;
+    padding: 0;
+    border-radius: 2px;
+    width: 100%;
+  }
+
+  [data-slot="radio-group-indicator"] {
+    border-radius: 4px;
+  }
+
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+    + [data-slot="radio-group-item-label"]:hover {
+    background-color: var(--surface-inset-base);
+  }
+}

packages/ui/src/components/radio-group.tsx

@@ -58,10 +58,7 @@ export function RadioGroup<T>(props: RadioGroupProps<T>) {
       onChange={(v) => local.onSelect?.(findOption(v))}
     >
       <div role="presentation" data-slot="radio-group-wrapper">
-        <Kobalte.Indicator
-          data-slot="radio-group-indicator"
-          style={{ "transition-duration": "var(--radio-group-transition-duration, 200ms)" }}
-        />
+        <Kobalte.Indicator data-slot="radio-group-indicator" />
         <div role="presentation" data-slot="radio-group-items">
           <For each={local.options}>
             {(option) => (