From b4e7ba1c616d331b9654bd09b9af3877fd594c29 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Fri, 27 Oct 2023 13:55:51 -0500
Subject: [PATCH 1/4] feat(RadioGroup): configurable label size

---
 src/runtime/components/forms/RadioGroup.vue | 12 ++++++++++--
 src/runtime/ui.config.ts                    |  6 +++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index 6473ea547c..bcee1c1c4f 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -13,6 +13,7 @@
         :model-value="modelValue"
         :value="option.value"
         :disabled="disabled"
+        :ui="radioUI"
         @change="onUpdate(option.value)"
       >
         <template #label>
@@ -33,10 +34,11 @@ import { mergeConfig, get } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
-import { radioGroup } from '#ui/ui.config'
+import { radioGroup, radio } from '#ui/ui.config'
 import colors from '#ui-colors'
 
-const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.select, radioGroup)
+const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup)
+const configRadio = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
 
 export default defineComponent({
   components: {
@@ -86,11 +88,16 @@ export default defineComponent({
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
+    },
+    uiRadio: {
+      type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
+    const { ui: radioUI } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
 
     const { emitFormChange, color, name } = useFormGroup(props, config)
     provide('radio-group', { color, name })
@@ -131,6 +138,7 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      radioUI,
       attrs,
       normalizedOptions,
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index b5edf6753d..b6fb47eb5f 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -685,9 +685,9 @@ export const radio = {
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
-  label: 'font-medium text-gray-700 dark:text-gray-200',
-  required: 'text-red-500 dark:text-red-400',
-  help: 'text-gray-500 dark:text-gray-400',
+  label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
+  required: 'text-sm text-red-500 dark:text-red-400',
+  help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }

From ff2df522074dca4f97cf980feb58131def1d3821 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Fri, 27 Oct 2023 14:04:45 -0500
Subject: [PATCH 2/4] docs(RadioGroup): adding callout about using uiRadio prop

---
 docs/content/3.forms/6.radio-group.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/content/3.forms/6.radio-group.md b/docs/content/3.forms/6.radio-group.md
index adca095316..e0260b984c 100644
--- a/docs/content/3.forms/6.radio-group.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -19,6 +19,10 @@ Alternatively, you can use individual Radio components:
 
 :component-example{component="radio-example"}
 
+::callout{icon="i-heroicons-light-bulb"}
+If using the RadioGroup component, you can customize the Radio options by using the `uiRadio` prop.
+::
+
 ### Legend
 
 Use the `legend` prop to add a legend to the RadioGroup.

From f83cb8d45b8e38bc1c53f472e66b613bf27ebf76 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Fri, 27 Oct 2023 15:23:43 -0500
Subject: [PATCH 3/4] chore: renaming to uiRadio

---
 src/runtime/components/forms/RadioGroup.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index bcee1c1c4f..1b44d86778 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -13,7 +13,7 @@
         :model-value="modelValue"
         :value="option.value"
         :disabled="disabled"
-        :ui="radioUI"
+        :ui="uiRadio"
         @change="onUpdate(option.value)"
       >
         <template #label>
@@ -97,7 +97,7 @@ export default defineComponent({
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
-    const { ui: radioUI } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
+    const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
 
     const { emitFormChange, color, name } = useFormGroup(props, config)
     provide('radio-group', { color, name })
@@ -138,7 +138,8 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      radioUI,
+      // eslint-disable-next-line vue/no-dupe-keys
+      uiRadio,
       attrs,
       normalizedOptions,
       // eslint-disable-next-line vue/no-dupe-keys

From 4cb943c17f92f8d6bc6df78ffbbf6e7e547ee0c2 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Fri, 27 Oct 2023 15:24:13 -0500
Subject: [PATCH 4/4] fix: removing text class and center aligning

---
 src/runtime/components/forms/Radio.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 71767e2b91..fa12929673 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -14,7 +14,7 @@
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
+    <div v-if="label || $slots.label" class="ms-3 inline-flex items-center">
       <label :for="id" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>