chore: cleanup

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) => (