feat(BaseRadio): use generic component definition

.playground/pages/tests/form/radio.vue

@@ -5,14 +5,25 @@ definePageMeta({
   description: 'SVG icons',
   section: 'form',
 })
+
+const check = ref('primary')
 </script>
 
 <template>
   <div
     class="flex flex-col gap-12 [&>*]:p-8 [&>:nth-child(odd)]:bg-muted-100 dark:[&>:nth-child(odd)]:bg-muted-900 pb-32"
   >
     <div>
-      <BaseHeading size="xl" weight="medium" class="mb-10">Radio</BaseHeading>
+      <BaseHeading size="xl" weight="medium" class="mb-10">
+        Radio: {{ check }}
+      </BaseHeading>
+    </div>
+    <div class="grid grid-cols-5 gap-4">
+      <BaseRadio v-model="check" name="radio_1" value="info" disabled />
+      <BaseRadio v-model="check" name="radio_1" value="muted" />
+      <BaseRadio v-model="check" name="radio_1" value="primary" />
+      <BaseRadio v-model="check" name="radio_1" value="success" />
+      <BaseRadio v-model="check" name="radio_1" value="warning" />
     </div>
   </div>
 </template>

components/form/BaseRadio.vue

@@ -1,10 +1,14 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends any = boolean">
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(
   defineProps<{
+    // Temporary fix to allow attributes inheritance with generic components
+    // @see https://github.com/vuejs/core/issues/8372
+    [attrs: string]: any
+
     /**
      * The form input identifier.
      */
@@ -13,12 +17,12 @@ const props = withDefaults(
     /**
      * The value of the radio input.
      */
-    value?: any
+    value?: T
 
     /**
      * The model value of the radio input.
      */
-    modelValue?: any
+    modelValue?: T
 
     /**
      * The label for the radio input.
@@ -78,7 +82,7 @@ const props = withDefaults(
   }
 )
 const emits = defineEmits<{
-  (e: 'update:modelValue', value: any): void
+  (e: 'update:modelValue', value: T): void
 }>()
 const inputRef = ref<HTMLInputElement>()
 const value = useVModel(props, 'modelValue', emits, {