fix: pass down props from radio group to its children

src/components/forms/checkbox/Checkbox.vue

@@ -214,7 +214,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
     @apply flex-1 text-rui-text;
 
     &:not(:empty) {
-      @apply mt-[9px];
+      @apply mt-[9px] mb-1;
     }
   }
 

src/components/forms/radio-button/radio-group/RadioGroup.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import VRender from '@/components/VRender';
 import FormTextDetail from '@/components/helpers/FormTextDetail.vue';
+import { type ContextColorsType } from '@/consts/colors';
+import type { RadioProps } from '@/components/forms/radio-button/radio/Radio.vue';
 
 export interface Props {
   value?: string;
@@ -9,19 +11,25 @@ export interface Props {
   errorMessages?: string | string[];
   successMessages?: string | string[];
   hideDetails?: boolean;
+  disabled?: boolean;
+  color?: ContextColorsType;
+  size?: 'sm' | 'lg';
 }
 
 defineOptions({
   name: 'RuiRadioGroup',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   value: '',
   inline: false,
   hint: '',
   errorMessages: () => [],
   successMessages: () => [],
   hideDetails: false,
+  disabled: false,
+  color: undefined,
+  size: undefined,
 });
 
 const emit = defineEmits<{
@@ -31,7 +39,27 @@ const emit = defineEmits<{
 const radioGroupName = ref('');
 
 const slots = useSlots();
-const children = computed(() => slots.default?.() ?? []);
+
+const { disabled, color } = toRefs(props);
+
+const children = computed(() =>
+  (slots.default?.() ?? []).map((node) => {
+    const propsData = (node.componentOptions?.propsData ?? {}) as RadioProps;
+
+    // if group is disabled, disable child buttons
+    if (get(disabled)) {
+      propsData.disabled = true;
+    }
+
+    const rootColor = get(color);
+    // if given root color, use it
+    if (rootColor) {
+      propsData.color = rootColor;
+    }
+
+    return { node, props: propsData };
+  }),
+);
 
 onMounted(() => {
   slots.default?.();
@@ -47,7 +75,9 @@ const css = useCssModule();
       <VRender
         v-for="(child, i) in children"
         :key="i"
-        :v-node="child"
+        :v-node="child.node"
+        v-bind="child.props"
+        :size="size"
         :value="value"
         hide-details
         :name="radioGroupName"

src/components/forms/radio-button/radio/Radio.vue

@@ -4,7 +4,7 @@ import { type ContextColorsType } from '@/consts/colors';
 import Icon from '@/components/icons/Icon.vue';
 import FormTextDetail from '@/components/helpers/FormTextDetail.vue';
 
-export interface Props {
+export interface RadioProps {
   internalValue: string;
   value?: string;
   disabled?: boolean;
@@ -21,7 +21,7 @@ defineOptions({
   name: 'RuiRadio',
 });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<RadioProps>(), {
   value: '',
   disabled: false,
   color: undefined,
@@ -210,7 +210,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
     @apply flex-1 text-rui-text;
 
     &:not(:empty) {
-      @apply mt-[9px];
+      @apply mt-[9px] mb-1;
     }
   }
 

src/components/forms/text-field/TextField.vue

@@ -108,6 +108,15 @@ const clearIconClicked = () => {
 
 const input = ref();
 const { focused } = useFocus(input);
+const focusedDebounced = ref(false);
+
+watchDebounced(
+  focused,
+  (focused) => {
+    set(focusedDebounced, focused);
+  },
+  { debounce: 500 },
+);
 
 const showClearIcon = logicAnd(
   clearable,
@@ -167,13 +176,13 @@ const showClearIcon = logicAnd(
       <div class="flex items-center gap-1 shrink-0" :class="css.append">
         <RuiButton
           v-if="showClearIcon"
-          :class="{ hidden: !focused }"
+          :class="{ hidden: !focusedDebounced }"
           variant="text"
           type="button"
           icon
           class="!p-2"
           :color="color"
-          @click.stop="clearIconClicked()"
+          @click="clearIconClicked()"
         >
           <RuiIcon name="close-line" size="20" />
         </RuiButton>

src/components/index.ts

@@ -32,7 +32,7 @@ import {
   default as RuiRadioGroup,
 } from '@/components/forms/radio-button/radio-group/RadioGroup.vue';
 import {
-  type Props as RadioProps,
+  type RadioProps,
   default as RuiRadio,
 } from '@/components/forms/radio-button/radio/Radio.vue';
 import { default as RuiRevealableTextField } from '@/components/forms/revealable-text-field/RevealableTextField.vue';