@yamada-ui/radio 1.2.7 → 1.2.8-dev-20240917033401

package/dist/radio.d.mts

@@ -1,10 +1,11 @@
-import * as react from 'react';
-import { ChangeEventHandler, Ref, InputHTMLAttributes } from 'react';
-import { UIPropGetter, HTMLUIProps, ThemeProps, ComponentArgs } from '@yamada-ui/core';
+import * as _yamada_ui_form_control from '@yamada-ui/form-control';
 import { FormControlOptions } from '@yamada-ui/form-control';
-import { Dict, PropGetter } from '@yamada-ui/utils';
+import * as react from 'react';
+import { ChangeEventHandler, RefAttributes, InputHTMLAttributes } from 'react';
+import { PropGetter, HTMLUIProps, ThemeProps, ComponentArgs } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
 
-type UseRadioProps<Y extends string | number = string> = FormControlOptions & {
+interface UseRadioProps<Y extends string | number = string> extends FormControlOptions {
     /**
      * id assigned to input.
      */
@@ -33,8 +34,8 @@ type UseRadioProps<Y extends string | number = string> = FormControlOptions & {
      * The callback invoked when the checked state changes.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
-};
-declare const useRadio: <Y extends string | number = string, M extends Dict = Dict>({ id, ...props }: UseRadioProps<Y> & M) => {
+}
+declare const useRadio: <Y extends string | number = string, M extends Dict = Dict<any>>({ id, ...props }: UseRadioProps<Y> & M) => {
     props: Omit<Omit<{
         _hover?: {} | undefined;
         _active?: {} | undefined;
@@ -49,74 +50,37 @@ declare const useRadio: <Y extends string | number = string, M extends Dict = Di
         "aria-readonly": boolean | undefined;
         "aria-required": boolean | undefined;
         "aria-invalid": boolean | undefined;
-        "data-readonly": boolean | "true" | "false";
+        "data-readonly": boolean | "false" | "true";
         onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
         onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
-    } & Omit<FormControlOptions & {
-        id?: string;
-        onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
-        onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
-        disabled?: boolean;
-        readOnly?: boolean;
-        required?: boolean;
-    } & {
+    } & Omit<_yamada_ui_form_control.UseFormControlProps<HTMLElement> & {
         id: string;
-    } & Omit<FormControlOptions & {
-        /**
-         * id assigned to input.
-         */
-        id?: string;
-        /**
-         * The name of the input field in a radio.
-         */
-        name?: string;
-        /**
-         * The value to be used in the radio button.
-         */
-        value?: Y | undefined;
-        /**
-         * If `true`, the radio will be initially checked.
-         *
-         * @default false
-         */
-        defaultIsChecked?: boolean;
-        /**
-         * If `true`, the radio will be checked.
-         *
-         * @default false
-         */
-        isChecked?: boolean;
-        /**
-         * The callback invoked when the checked state changes.
-         */
-        onChange?: ChangeEventHandler<HTMLInputElement>;
-    } & M, "id">, "disabled" | "isDisabled" | "id" | "onFocus" | "onBlur" | "readOnly" | "required" | "isRequired" | "isInvalid" | "isReadOnly">, "value" | "name" | "id" | "onChange" | "defaultIsChecked" | "isChecked">, "disabled" | "aria-disabled" | "_invalid" | "_hover" | "_active" | "_focus" | "_focusVisible" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "readOnly" | "required" | "data-readonly">;
+    } & Omit<UseRadioProps<Y> & M, "id">, "disabled" | "isDisabled" | "id" | "onFocus" | "onBlur" | "readOnly" | "required" | "isRequired" | "isInvalid" | "isReadOnly">, "value" | "name" | "id" | "onChange" | "defaultIsChecked" | "isChecked">, "disabled" | "aria-disabled" | "_invalid" | "_hover" | "_active" | "_focus" | "_focusVisible" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "readOnly" | "required" | "data-readonly">;
     isFocusVisible: boolean;
     isFocused: boolean;
     isHovered: boolean;
     isActive: boolean;
     isChecked: boolean;
-    getContainerProps: UIPropGetter<"label">;
-    getInputProps: PropGetter;
-    getIconProps: UIPropGetter<"span">;
-    getLabelProps: PropGetter;
+    getContainerProps: PropGetter<"label", undefined>;
+    getInputProps: PropGetter<"input", undefined>;
+    getIconProps: PropGetter<"span", undefined>;
+    getLabelProps: PropGetter<"span", undefined>;
 };
 type UseRadioReturn = ReturnType<typeof useRadio>;
-type RadioOptions = {
+interface RadioOptions {
     iconProps?: HTMLUIProps<"span">;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     labelProps?: HTMLUIProps<"span">;
-};
-type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<"label">, keyof UseRadioProps> & ThemeProps<"Radio"> & UseRadioProps<Y> & RadioOptions;
+}
+interface RadioProps<Y extends string | number = string> extends Omit<HTMLUIProps<"label">, keyof UseRadioProps>, ThemeProps<"Radio">, UseRadioProps<Y>, RadioOptions {
+}
 /**
  * `Radio` is a component used for allowing users to select one option from multiple choices.
  *
  * @see Docs https://yamada-ui.com/components/forms/radio
  */
 declare const Radio: {
-    <Y extends string | number = string>(props: RadioProps<Y> & {
-        ref?: Ref<HTMLInputElement>;
-    }): JSX.Element;
+    <Y extends string | number = string>(props: RadioProps<Y> & RefAttributes<HTMLInputElement>): JSX.Element;
 } & ComponentArgs;
 
 export { Radio, type RadioProps, type UseRadioProps, type UseRadioReturn, useRadio };

package/dist/radio.d.ts

@@ -1,10 +1,11 @@
-import * as react from 'react';
-import { ChangeEventHandler, Ref, InputHTMLAttributes } from 'react';
-import { UIPropGetter, HTMLUIProps, ThemeProps, ComponentArgs } from '@yamada-ui/core';
+import * as _yamada_ui_form_control from '@yamada-ui/form-control';
 import { FormControlOptions } from '@yamada-ui/form-control';
-import { Dict, PropGetter } from '@yamada-ui/utils';
+import * as react from 'react';
+import { ChangeEventHandler, RefAttributes, InputHTMLAttributes } from 'react';
+import { PropGetter, HTMLUIProps, ThemeProps, ComponentArgs } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
 
-type UseRadioProps<Y extends string | number = string> = FormControlOptions & {
+interface UseRadioProps<Y extends string | number = string> extends FormControlOptions {
     /**
      * id assigned to input.
      */
@@ -33,8 +34,8 @@ type UseRadioProps<Y extends string | number = string> = FormControlOptions & {
      * The callback invoked when the checked state changes.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
-};
-declare const useRadio: <Y extends string | number = string, M extends Dict = Dict>({ id, ...props }: UseRadioProps<Y> & M) => {
+}
+declare const useRadio: <Y extends string | number = string, M extends Dict = Dict<any>>({ id, ...props }: UseRadioProps<Y> & M) => {
     props: Omit<Omit<{
         _hover?: {} | undefined;
         _active?: {} | undefined;
@@ -49,74 +50,37 @@ declare const useRadio: <Y extends string | number = string, M extends Dict = Di
         "aria-readonly": boolean | undefined;
         "aria-required": boolean | undefined;
         "aria-invalid": boolean | undefined;
-        "data-readonly": boolean | "true" | "false";
+        "data-readonly": boolean | "false" | "true";
         onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
         onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
-    } & Omit<FormControlOptions & {
-        id?: string;
-        onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
-        onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
-        disabled?: boolean;
-        readOnly?: boolean;
-        required?: boolean;
-    } & {
+    } & Omit<_yamada_ui_form_control.UseFormControlProps<HTMLElement> & {
         id: string;
-    } & Omit<FormControlOptions & {
-        /**
-         * id assigned to input.
-         */
-        id?: string;
-        /**
-         * The name of the input field in a radio.
-         */
-        name?: string;
-        /**
-         * The value to be used in the radio button.
-         */
-        value?: Y | undefined;
-        /**
-         * If `true`, the radio will be initially checked.
-         *
-         * @default false
-         */
-        defaultIsChecked?: boolean;
-        /**
-         * If `true`, the radio will be checked.
-         *
-         * @default false
-         */
-        isChecked?: boolean;
-        /**
-         * The callback invoked when the checked state changes.
-         */
-        onChange?: ChangeEventHandler<HTMLInputElement>;
-    } & M, "id">, "disabled" | "isDisabled" | "id" | "onFocus" | "onBlur" | "readOnly" | "required" | "isRequired" | "isInvalid" | "isReadOnly">, "value" | "name" | "id" | "onChange" | "defaultIsChecked" | "isChecked">, "disabled" | "aria-disabled" | "_invalid" | "_hover" | "_active" | "_focus" | "_focusVisible" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "readOnly" | "required" | "data-readonly">;
+    } & Omit<UseRadioProps<Y> & M, "id">, "disabled" | "isDisabled" | "id" | "onFocus" | "onBlur" | "readOnly" | "required" | "isRequired" | "isInvalid" | "isReadOnly">, "value" | "name" | "id" | "onChange" | "defaultIsChecked" | "isChecked">, "disabled" | "aria-disabled" | "_invalid" | "_hover" | "_active" | "_focus" | "_focusVisible" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "readOnly" | "required" | "data-readonly">;
     isFocusVisible: boolean;
     isFocused: boolean;
     isHovered: boolean;
     isActive: boolean;
     isChecked: boolean;
-    getContainerProps: UIPropGetter<"label">;
-    getInputProps: PropGetter;
-    getIconProps: UIPropGetter<"span">;
-    getLabelProps: PropGetter;
+    getContainerProps: PropGetter<"label", undefined>;
+    getInputProps: PropGetter<"input", undefined>;
+    getIconProps: PropGetter<"span", undefined>;
+    getLabelProps: PropGetter<"span", undefined>;
 };
 type UseRadioReturn = ReturnType<typeof useRadio>;
-type RadioOptions = {
+interface RadioOptions {
     iconProps?: HTMLUIProps<"span">;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     labelProps?: HTMLUIProps<"span">;
-};
-type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<"label">, keyof UseRadioProps> & ThemeProps<"Radio"> & UseRadioProps<Y> & RadioOptions;
+}
+interface RadioProps<Y extends string | number = string> extends Omit<HTMLUIProps<"label">, keyof UseRadioProps>, ThemeProps<"Radio">, UseRadioProps<Y>, RadioOptions {
+}
 /**
  * `Radio` is a component used for allowing users to select one option from multiple choices.
  *
  * @see Docs https://yamada-ui.com/components/forms/radio
  */
 declare const Radio: {
-    <Y extends string | number = string>(props: RadioProps<Y> & {
-        ref?: Ref<HTMLInputElement>;
-    }): JSX.Element;
+    <Y extends string | number = string>(props: RadioProps<Y> & RefAttributes<HTMLInputElement>): JSX.Element;
 } & ComponentArgs;
 
 export { Radio, type RadioProps, type UseRadioProps, type UseRadioReturn, useRadio };

package/dist/radio.js

@@ -26,175 +26,25 @@ __export(radio_exports, {
 });
 module.exports = __toCommonJS(radio_exports);
 var import_core = require("@yamada-ui/core");
-var import_form_control2 = require("@yamada-ui/form-control");
+var import_form_control = require("@yamada-ui/form-control");
 var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
 var import_utils2 = require("@yamada-ui/utils");
-var import_react2 = require("react");
+var import_react = require("react");
 
-// src/radio-group.tsx
-var import_form_control = require("@yamada-ui/form-control");
-var import_layouts = require("@yamada-ui/layouts");
-var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+// src/radio-context.ts
 var import_utils = require("@yamada-ui/utils");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var isEvent = (value) => value && (0, import_utils.isObject)(value) && (0, import_utils.isObject)(value.target);
-var useRadioGroup = ({
-  id,
-  name,
-  isNative,
-  value: valueProp,
-  defaultValue,
-  onChange: onChangeProp,
-  ...props
-}) => {
-  id != null ? id : id = (0, import_react.useId)();
-  name != null ? name : name = `radio-${id}`;
-  const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeRef
-  });
-  const containerRef = (0, import_react.useRef)(null);
-  const onFocus = (0, import_react.useCallback)(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    let query = `input:not(:disabled):checked`;
-    let firstInput = container.querySelector(query);
-    if (firstInput) {
-      firstInput.focus();
-    } else {
-      query = `input:not(:disabled)`;
-      firstInput = container.querySelector(query);
-      firstInput == null ? void 0 : firstInput.focus();
-    }
-  }, []);
-  const onChange = (0, import_react.useCallback)(
-    (evOrValue) => {
-      const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
-      setValue(nextValue);
-    },
-    [setValue]
-  );
-  const getContainerProps = (0, import_react.useCallback)(
-    (props2 = {}, ref = null) => ({
-      role: "radiogroup",
-      ...props2,
-      ref: (0, import_utils.mergeRefs)(ref, containerRef)
-    }),
-    []
-  );
-  const getRadioProps = (0, import_react.useCallback)(
-    (props2 = {}, ref = null) => {
-      const isChecked = props2.value === value;
-      return {
-        ...props2,
-        ref,
-        name,
-        [isNative ? "checked" : "isChecked"]: value != null ? isChecked : void 0,
-        "aria-checked": isChecked,
-        onChange
-      };
-    },
-    [name, value, onChange, isNative]
-  );
-  return {
-    props,
-    id,
-    name,
-    value,
-    setValue,
-    onChange,
-    onFocus,
-    getContainerProps,
-    getRadioProps
-  };
-};
 var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils.createContext)({
   strict: false,
   name: "RadioGroupContext"
 });
-var RadioGroup = (0, import_react.forwardRef)(
-  ({
-    id: idProp,
-    className,
-    size,
-    variant,
-    colorScheme,
-    children,
-    items = [],
-    direction = "column",
-    gap,
-    ...props
-  }, ref) => {
-    const {
-      labelId,
-      isRequired,
-      isReadOnly,
-      isDisabled,
-      isInvalid,
-      ...computedProps
-    } = (0, import_form_control.useFormControl)({
-      id: idProp,
-      ...props
-    });
-    const {
-      id,
-      name,
-      value,
-      onChange,
-      getContainerProps,
-      props: rest
-    } = useRadioGroup(computedProps);
-    const validChildren = (0, import_utils.getValidChildren)(children);
-    let computedChildren = [];
-    if (!validChildren.length && items.length) {
-      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Radio, { value: value2, ...props2, children: label }, i));
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      RadioGroupProvider,
-      {
-        value: {
-          size,
-          variant,
-          colorScheme,
-          isRequired,
-          isReadOnly,
-          isDisabled,
-          isInvalid,
-          name,
-          value,
-          onChange
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_layouts.Flex,
-          {
-            ref,
-            className: (0, import_utils.cx)("ui-radio-group", className),
-            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
-            ...getContainerProps({
-              id,
-              "aria-labelledby": labelId,
-              ...rest
-            }),
-            direction,
-            children: children != null ? children : computedChildren
-          }
-        )
-      }
-    );
-  }
-);
-RadioGroup.displayName = "RadioGroup";
 
 // src/radio.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var useRadio = ({
   id,
   ...props
 }) => {
-  id != null ? id : id = (0, import_react2.useId)();
+  id != null ? id : id = (0, import_react.useId)();
   const {
     id: _id,
     name,
@@ -203,7 +53,7 @@ var useRadio = ({
     defaultIsChecked,
     onChange: onChangeProp,
     ...computedProps
-  } = (0, import_form_control2.useFormControlProps)({ id, ...props });
+  } = (0, import_form_control.useFormControlProps)({ id, ...props });
   const [
     {
       "aria-readonly": _ariaReadonly,
@@ -215,15 +65,15 @@ var useRadio = ({
       ...formControlProps
     },
     rest
-  ] = (0, import_utils2.splitObject)(computedProps, import_form_control2.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react2.useState)(false);
-  const [isFocused, setFocused] = (0, import_react2.useState)(false);
-  const [isHovered, setHovered] = (0, import_react2.useState)(false);
-  const [isActive, setActive] = (0, import_react2.useState)(false);
-  const [isChecked, setIsChecked] = (0, import_react2.useState)(!!defaultIsChecked);
+  ] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
+  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
+  const [isFocused, setFocused] = (0, import_react.useState)(false);
+  const [isHovered, setHovered] = (0, import_react.useState)(false);
+  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultIsChecked);
   const isControlled = isCheckedProp !== void 0;
   const checked = isControlled ? isCheckedProp : isChecked;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
   }, []);
   const onChange = (0, import_utils2.useCallbackRef)(
@@ -239,19 +89,19 @@ var useRadio = ({
   );
   const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
   const onBlur = (0, import_utils2.useCallbackRef)(onBlurProp);
-  const onKeyDown = (0, import_react2.useCallback)(
+  const onKeyDown = (0, import_react.useCallback)(
     ({ key }) => {
       if (key === " ") setActive(true);
     },
     [setActive]
   );
-  const onKeyUp = (0, import_react2.useCallback)(
+  const onKeyUp = (0, import_react.useCallback)(
     ({ key }) => {
       if (key === " ") setActive(false);
     },
     [setActive]
   );
-  const getContainerProps = (0, import_react2.useCallback)(
+  const getContainerProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
       ...formControlProps,
       ...props2,
@@ -260,7 +110,7 @@ var useRadio = ({
     }),
     [checked, formControlProps]
   );
-  const getIconProps = (0, import_react2.useCallback)(
+  const getIconProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
       ...formControlProps,
       ...props2,
@@ -271,14 +121,14 @@ var useRadio = ({
       "data-focus": (0, import_utils2.dataAttr)(isFocused),
       "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
       "aria-hidden": true,
-      onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, () => setActive(true)),
-      onMouseUp: (0, import_utils2.handlerAll)(props2.onMouseUp, () => setActive(false)),
-      onMouseEnter: (0, import_utils2.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
-      onMouseLeave: (0, import_utils2.handlerAll)(props2.onMouseLeave, () => setHovered(false))
+      onMouseDown: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onMouseDown, () => setActive(true)),
+      onMouseUp: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onMouseUp, () => setActive(false)),
+      onMouseEnter: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onMouseEnter, () => setHovered(true)),
+      onMouseLeave: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onMouseLeave, () => setHovered(false))
     }),
     [checked, isActive, isFocused, isFocusVisible, isHovered, formControlProps]
   );
-  const getInputProps = (0, import_react2.useCallback)(
+  const getInputProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
       ...formControlProps,
       ...props2,
@@ -303,11 +153,11 @@ var useRadio = ({
         whiteSpace: "nowrap",
         position: "absolute"
       },
-      onChange: (0, import_utils2.handlerAll)(props2.onChange, onChange),
-      onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
-      onFocus: (0, import_utils2.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
-      onKeyDown: (0, import_utils2.handlerAll)(props2.onKeyDown, onKeyDown),
-      onKeyUp: (0, import_utils2.handlerAll)(props2.onKeyUp, onKeyUp)
+      onChange: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onChange, onChange),
+      onBlur: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onBlur, onBlur, () => setFocused(false)),
+      onFocus: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onFocus, onFocus, () => setFocused(true)),
+      onKeyDown: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onKeyDown, onKeyDown),
+      onKeyUp: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onKeyUp, onKeyUp)
     }),
     [
       formControlProps,
@@ -325,16 +175,16 @@ var useRadio = ({
       onKeyUp
     ]
   );
-  const getLabelProps = (0, import_react2.useCallback)(
+  const getLabelProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
       ...formControlProps,
       ...props2,
       ref,
-      onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
+      onMouseDown: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onMouseDown, (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
       }),
-      onTouchStart: (0, import_utils2.handlerAll)(props2.onTouchStart, (ev) => {
+      onTouchStart: (0, import_utils2.handlerAll)(props2 == null ? void 0 : props2.onTouchStart, (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
       }),
@@ -355,13 +205,13 @@ var useRadio = ({
     getLabelProps
   };
 };
-var Radio = (0, import_react2.forwardRef)(
+var Radio = (0, import_react.forwardRef)(
   (props, ref) => {
     var _a, _b, _c, _d;
     const group = useRadioGroupContext();
     const { value: groupValue, ...groupProps } = { ...group };
-    const control = (0, import_form_control2.useFormControl)(props);
-    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Radio", {
+    const control = (0, import_form_control.useFormControl)(props);
+    const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Radio", {
       ...groupProps,
       ...props
     });
@@ -397,7 +247,7 @@ var Radio = (0, import_react2.forwardRef)(
       onChange
     });
     const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.label,
       {
         className: (0, import_utils2.cx)("ui-radio", className),
@@ -412,7 +262,7 @@ var Radio = (0, import_react2.forwardRef)(
           ...styles.container
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_core.ui.input,
             {
               className: "ui-radio__input",
@@ -425,7 +275,7 @@ var Radio = (0, import_react2.forwardRef)(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_core.ui.span,
             {
               className: "ui-radio__icon",
@@ -438,7 +288,7 @@ var Radio = (0, import_react2.forwardRef)(
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_core.ui.span,
             {
               className: "ui-radio__label",