chore(app): use radio group in prompt input (#14025)

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

@@ -15,6 +15,8 @@ export type RadioGroupProps<T> = Omit<
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   size?: "small" | "medium"
+  fill?: boolean
+  pad?: "none" | "normal"
 }
 
 export function RadioGroup<T>(props: RadioGroupProps<T>) {
@@ -28,6 +30,8 @@ export function RadioGroup<T>(props: RadioGroupProps<T>) {
     "label",
     "onSelect",
     "size",
+    "fill",
+    "pad",
   ])
 
   const getValue = (item: T): string => {
@@ -49,6 +53,8 @@ export function RadioGroup<T>(props: RadioGroupProps<T>) {
       {...others}
       data-component="radio-group"
       data-size={local.size ?? "medium"}
+      data-fill={local.fill ? "" : undefined}
+      data-pad={local.pad ?? "normal"}
       classList={{
         ...(local.classList ?? {}),
         [local.class ?? ""]: !!local.class,
@@ -62,9 +68,11 @@ export function RadioGroup<T>(props: RadioGroupProps<T>) {
         <div role="presentation" data-slot="radio-group-items">
           <For each={local.options}>
             {(option) => (
-              <Kobalte.Item value={getValue(option)} data-slot="radio-group-item">
+              <Kobalte.Item value={getValue(option)} data-slot="radio-group-item" data-value={getValue(option)}>
                 <Kobalte.ItemInput data-slot="radio-group-item-input" />
-                <Kobalte.ItemLabel data-slot="radio-group-item-label">{getLabel(option)}</Kobalte.ItemLabel>
+                <Kobalte.ItemLabel data-slot="radio-group-item-label">
+                  <span data-slot="radio-group-item-control">{getLabel(option)}</span>
+                </Kobalte.ItemLabel>
               </Kobalte.Item>
             )}
           </For>