@yamada-ui/radio 0.3.19 → 0.4.1

package/dist/{chunk-FHZRCWV7.mjs → chunk-UX7EGSYQ.mjs}

@@ -1,7 +1,24 @@
 "use client"
+
+// src/radio-group.tsx
+import { useFormControl as useFormControl2 } from "@yamada-ui/form-control";
+import { Flex } from "@yamada-ui/layouts";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import {
+  createContext,
+  cx as cx2,
+  isObject,
+  mergeRefs,
+  useCallbackRef as useCallbackRef2,
+  omitObject as omitObject2,
+  getValidChildren
+} from "@yamada-ui/utils";
 import {
-  useRadioGroupContenxt
-} from "./chunk-577WYHY3.mjs";
+  useCallback as useCallback2,
+  useId,
+  useRef,
+  forwardRef as forwardRef2
+} from "react";
 
 // src/radio.tsx
 import {
@@ -234,14 +251,14 @@ var Radio = forwardRef(
           /* @__PURE__ */ jsx(
             ui.input,
             {
-              className: "ui-radio-input",
+              className: "ui-radio__input",
               ...getInputProps(inputProps, ref)
             }
           ),
           /* @__PURE__ */ jsx(
             ui.span,
             {
-              className: "ui-radio-icon",
+              className: "ui-radio__icon",
               ...getIconProps(iconProps),
               __css: {
                 position: "relative",
@@ -254,7 +271,7 @@ var Radio = forwardRef(
           /* @__PURE__ */ jsx(
             ui.span,
             {
-              className: "ui-radio-label",
+              className: "ui-radio__label",
               ...getLabelProps(labelProps),
               __css: { ...styles.label },
               children
@@ -267,7 +284,140 @@ var Radio = forwardRef(
 );
 Radio.displayName = "Radio";
 
+// src/radio-group.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var isEvent = (value) => value && isObject(value) && isObject(value.target);
+var useRadioGroup = ({
+  id,
+  name,
+  isNative,
+  ...props
+}) => {
+  id = id != null ? id : useId();
+  name = name != null ? name : `radio-${id}`;
+  props.onChange = useCallbackRef2(props.onChange);
+  const [value, setValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onChange
+  });
+  const containerRef = useRef(null);
+  const onFocus = useCallback2(() => {
+    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 = useCallback2(
+    (evOrValue) => {
+      const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
+      setValue(nextValue);
+    },
+    [setValue]
+  );
+  const getContainerProps = useCallback2(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ref: mergeRefs(ref, containerRef),
+      role: "group"
+    }),
+    []
+  );
+  const getRadioProps = useCallback2(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ref,
+      name,
+      [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
+      onChange
+    }),
+    [name, value, onChange, isNative]
+  );
+  return {
+    name,
+    value,
+    setValue,
+    onChange,
+    onFocus,
+    getContainerProps,
+    getRadioProps
+  };
+};
+var [RadioGroupProvider, useRadioGroupContenxt] = createContext({
+  strict: false,
+  name: "RadioGroupContext"
+});
+var RadioGroup = forwardRef2(
+  ({
+    className,
+    size,
+    variant,
+    colorScheme,
+    children,
+    items = [],
+    direction = "column",
+    gap,
+    ...props
+  }, ref) => {
+    const { name, value, onChange, getContainerProps } = useRadioGroup(props);
+    const { isRequired, isReadOnly, isDisabled, isInvalid } = useFormControl2(props);
+    const validChildren = getValidChildren(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length) {
+      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ jsx2(Radio, { value: value2, ...props2, children: label }, i));
+    }
+    return /* @__PURE__ */ jsx2(
+      RadioGroupProvider,
+      {
+        value: {
+          size,
+          variant,
+          colorScheme,
+          isRequired,
+          isReadOnly,
+          isDisabled,
+          isInvalid,
+          name,
+          value,
+          onChange
+        },
+        children: /* @__PURE__ */ jsx2(
+          Flex,
+          {
+            ref,
+            className: cx2("ui-radio-group", className),
+            direction,
+            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
+            ...getContainerProps(
+              omitObject2(props, [
+                "onChange",
+                "isInvalid",
+                "isDisabled",
+                "isRequired",
+                "isReadOnly"
+              ])
+            ),
+            children: children != null ? children : computedChildren
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
 export {
+  useRadioGroup,
+  useRadioGroupContenxt,
+  RadioGroup,
   useRadio,
   Radio
 };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { Radio, RadioProps, UseRadioProps, UseRadioReturn, useRadio } from './radio.mjs';
-export { RadioGroup, RadioGroupProps, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './radio-group.mjs';
+export { RadioGroup, RadioGroupProps, RadioItem, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './radio-group.mjs';
 import '@yamada-ui/core';
 import '@yamada-ui/form-control';
 import '@yamada-ui/utils';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { Radio, RadioProps, UseRadioProps, UseRadioReturn, useRadio } from './radio.js';
-export { RadioGroup, RadioGroupProps, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './radio-group.js';
+export { RadioGroup, RadioGroupProps, RadioItem, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './radio-group.js';
 import '@yamada-ui/core';
 import '@yamada-ui/form-control';
 import '@yamada-ui/utils';

package/dist/index.js

@@ -118,12 +118,18 @@ var RadioGroup = (0, import_react.forwardRef)(
     variant,
     colorScheme,
     children,
+    items = [],
     direction = "column",
     gap,
     ...props
   }, ref) => {
     const { name, value, onChange, getContainerProps } = useRadioGroup(props);
     const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control.useFormControl)(props);
+    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,
       {
@@ -155,7 +161,7 @@ var RadioGroup = (0, import_react.forwardRef)(
                 "isReadOnly"
               ])
             ),
-            children
+            children: children != null ? children : computedChildren
           }
         )
       }
@@ -369,14 +375,14 @@ var Radio = (0, import_react2.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.input,
             {
-              className: "ui-radio-input",
+              className: "ui-radio__input",
               ...getInputProps(inputProps, ref)
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.span,
             {
-              className: "ui-radio-icon",
+              className: "ui-radio__icon",
               ...getIconProps(iconProps),
               __css: {
                 position: "relative",
@@ -389,7 +395,7 @@ var Radio = (0, import_react2.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.span,
             {
-              className: "ui-radio-label",
+              className: "ui-radio__label",
               ...getLabelProps(labelProps),
               __css: { ...styles.label },
               children

package/dist/index.mjs

@@ -1,12 +1,10 @@
 "use client"
 import {
   Radio,
-  useRadio
-} from "./chunk-FHZRCWV7.mjs";
-import {
   RadioGroup,
+  useRadio,
   useRadioGroup
-} from "./chunk-577WYHY3.mjs";
+} from "./chunk-UX7EGSYQ.mjs";
 export {
   Radio,
   RadioGroup,

package/dist/radio-group.d.mts

@@ -1,3 +1,4 @@
+import { RadioProps } from './radio.mjs';
 import * as react from 'react';
 import { ChangeEvent, Ref } from 'react';
 import { ThemeProps, ComponentArgs } from '@yamada-ui/core';
@@ -5,6 +6,9 @@ import { FormControlOptions } from '@yamada-ui/form-control';
 import { FlexProps } from '@yamada-ui/layouts';
 import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
 
+type RadioItem<Y extends string | number = string> = RadioProps<Y> & {
+    label?: string;
+};
 type UseRadioGroupProps<Y extends string | number = string> = {
     /**
      * The top-level id string that will be applied to the radios.
@@ -57,8 +61,15 @@ declare const useRadioGroup: <Y extends string | number = string>({ id, name, is
     }>;
 };
 type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>;
-type RadioGroupProps<Y extends string | number = string> = ThemeProps<'Radio'> & Omit<FlexProps, 'onChange'> & UseRadioGroupProps<Y> & FormControlOptions;
-type RadioGroupContext = ThemeProps<'Radio'> & FormControlOptions & {
+type RadioGroupProps<Y extends string | number = string> = ThemeProps<"Radio"> & Omit<FlexProps, "onChange"> & UseRadioGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate radios based on items.
+     *
+     * @default '[]'
+     */
+    items?: RadioItem<Y>[];
+};
+type RadioGroupContext = ThemeProps<"Radio"> & FormControlOptions & {
     name: string;
     value: string | number;
     onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void;
@@ -66,7 +77,14 @@ type RadioGroupContext = ThemeProps<'Radio'> & FormControlOptions & {
 declare const useRadioGroupContenxt: () => RadioGroupContext | undefined;
 
 declare const RadioGroup: (<Y extends string | number = string>(props: ThemeProps<"Radio"> & Omit<FlexProps, "onChange"> & UseRadioGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate radios based on items.
+     *
+     * @default '[]'
+     */
+    items?: RadioItem<Y>[] | undefined;
+} & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
 
-export { RadioGroup, RadioGroupProps, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup, useRadioGroupContenxt };
+export { RadioGroup, RadioGroupProps, RadioItem, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup, useRadioGroupContenxt };

package/dist/radio-group.d.ts

@@ -1,3 +1,4 @@
+import { RadioProps } from './radio.js';
 import * as react from 'react';
 import { ChangeEvent, Ref } from 'react';
 import { ThemeProps, ComponentArgs } from '@yamada-ui/core';
@@ -5,6 +6,9 @@ import { FormControlOptions } from '@yamada-ui/form-control';
 import { FlexProps } from '@yamada-ui/layouts';
 import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
 
+type RadioItem<Y extends string | number = string> = RadioProps<Y> & {
+    label?: string;
+};
 type UseRadioGroupProps<Y extends string | number = string> = {
     /**
      * The top-level id string that will be applied to the radios.
@@ -57,8 +61,15 @@ declare const useRadioGroup: <Y extends string | number = string>({ id, name, is
     }>;
 };
 type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>;
-type RadioGroupProps<Y extends string | number = string> = ThemeProps<'Radio'> & Omit<FlexProps, 'onChange'> & UseRadioGroupProps<Y> & FormControlOptions;
-type RadioGroupContext = ThemeProps<'Radio'> & FormControlOptions & {
+type RadioGroupProps<Y extends string | number = string> = ThemeProps<"Radio"> & Omit<FlexProps, "onChange"> & UseRadioGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate radios based on items.
+     *
+     * @default '[]'
+     */
+    items?: RadioItem<Y>[];
+};
+type RadioGroupContext = ThemeProps<"Radio"> & FormControlOptions & {
     name: string;
     value: string | number;
     onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void;
@@ -66,7 +77,14 @@ type RadioGroupContext = ThemeProps<'Radio'> & FormControlOptions & {
 declare const useRadioGroupContenxt: () => RadioGroupContext | undefined;
 
 declare const RadioGroup: (<Y extends string | number = string>(props: ThemeProps<"Radio"> & Omit<FlexProps, "onChange"> & UseRadioGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate radios based on items.
+     *
+     * @default '[]'
+     */
+    items?: RadioItem<Y>[] | undefined;
+} & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
 
-export { RadioGroup, RadioGroupProps, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup, useRadioGroupContenxt };
+export { RadioGroup, RadioGroupProps, RadioItem, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup, useRadioGroupContenxt };

package/dist/radio-group.js

@@ -26,29 +26,274 @@ __export(radio_group_exports, {
   useRadioGroupContenxt: () => useRadioGroupContenxt
 });
 module.exports = __toCommonJS(radio_group_exports);
-var import_form_control = require("@yamada-ui/form-control");
+var import_form_control2 = require("@yamada-ui/form-control");
 var import_layouts = require("@yamada-ui/layouts");
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/radio.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
 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 useRadio = (props) => {
+  const { id, name, value, required, disabled, readOnly, ...rest } = (0, import_form_control.useFormControlProps)(props);
+  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)(!!props.defaultChecked);
+  const isControlled = props.isChecked !== void 0;
+  const checked = isControlled ? props.isChecked : isChecked;
+  (0, import_react.useEffect)(() => {
+    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+  }, []);
+  const onChange = (0, import_utils.useCallbackRef)(
+    (ev) => {
+      var _a;
+      if (readOnly || disabled) {
+        ev.preventDefault();
+        return;
+      }
+      if (!isControlled)
+        setIsChecked(ev.target.checked);
+      (_a = rest.onChange) == null ? void 0 : _a.call(rest, ev);
+    },
+    [readOnly, disabled, isControlled]
+  );
+  const onBlur = (0, import_utils.useCallbackRef)(rest.onBlur);
+  const onFocus = (0, import_utils.useCallbackRef)(rest.onFocus);
+  const onKeyDown = (0, import_react.useCallback)(
+    ({ key }) => {
+      if (key === " ")
+        setActive(true);
+    },
+    [setActive]
+  );
+  const onKeyUp = (0, import_react.useCallback)(
+    ({ key }) => {
+      if (key === " ")
+        setActive(false);
+    },
+    [setActive]
+  );
+  const getContainerProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref,
+      "data-checked": (0, import_utils.dataAttr)(checked)
+    }),
+    [checked, rest]
+  );
+  const getIconProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref,
+      "data-active": (0, import_utils.dataAttr)(isActive),
+      "data-hover": (0, import_utils.dataAttr)(isHovered),
+      "data-checked": (0, import_utils.dataAttr)(checked),
+      "data-focus": (0, import_utils.dataAttr)(isFocused),
+      "data-focus-visible": (0, import_utils.dataAttr)(isFocused && isFocusVisible),
+      "aria-hidden": true,
+      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, () => setActive(true)),
+      onMouseUp: (0, import_utils.handlerAll)(props2.onMouseUp, () => setActive(false)),
+      onMouseEnter: (0, import_utils.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
+      onMouseLeave: (0, import_utils.handlerAll)(props2.onMouseLeave, () => setHovered(false))
+    }),
+    [checked, isActive, isFocused, isFocusVisible, isHovered, rest]
+  );
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref,
+      id,
+      type: "radio",
+      name,
+      value,
+      required,
+      disabled,
+      readOnly,
+      checked,
+      style: {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      },
+      onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
+      onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
+      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
+      onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+      onKeyUp: (0, import_utils.handlerAll)(props2.onKeyUp, onKeyUp)
+    }),
+    [
+      rest,
+      id,
+      name,
+      value,
+      required,
+      disabled,
+      readOnly,
+      checked,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onKeyUp
+    ]
+  );
+  const getLabelProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      props: props2,
+      ref,
+      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }),
+      onTouchStart: (0, import_utils.handlerAll)(props2.onTouchStart, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }),
+      "data-checked": (0, import_utils.dataAttr)(checked)
+    }),
+    [checked, rest]
+  );
+  return {
+    isFocusVisible,
+    isFocused,
+    isHovered,
+    isActive,
+    isChecked: checked,
+    getContainerProps,
+    getInputProps,
+    getIconProps,
+    getLabelProps
+  };
+};
+var Radio = (0, import_react.forwardRef)(
+  (props, ref) => {
+    var _a, _b, _c, _d;
+    const group = useRadioGroupContenxt();
+    const control = (0, import_form_control.useFormControl)(props);
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Radio", {
+      ...group,
+      ...props
+    });
+    const {
+      className,
+      gap = "0.5rem",
+      isRequired = (_a = group == null ? void 0 : group.isRequired) != null ? _a : control.isRequired,
+      isReadOnly = (_b = group == null ? void 0 : group.isReadOnly) != null ? _b : control.isReadOnly,
+      isDisabled = (_c = group == null ? void 0 : group.isDisabled) != null ? _c : control.isDisabled,
+      isInvalid = (_d = group == null ? void 0 : group.isInvalid) != null ? _d : control.isInvalid,
+      iconProps,
+      inputProps,
+      labelProps,
+      children,
+      ...rest
+    } = (0, import_core.omitThemeProps)(mergedProps);
+    const { getContainerProps, getInputProps, getIconProps, getLabelProps } = useRadio({
+      ...rest,
+      isRequired,
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      isChecked: (group == null ? void 0 : group.value) && rest.value ? group.value === rest.value : rest.isChecked,
+      onChange: (group == null ? void 0 : group.onChange) && rest.value ? (0, import_utils.funcAll)(group.onChange, rest.onChange) : rest.onChange
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.ui.label,
+      {
+        className: (0, import_utils.cx)("ui-radio", className),
+        ...getContainerProps(),
+        ...(0, import_utils.omitObject)(rest, [
+          "id",
+          "name",
+          "value",
+          "defaultValue",
+          "defaultChecked",
+          "isChecked",
+          "onChange",
+          "onBlur",
+          "onFocus"
+        ]),
+        __css: {
+          cursor: "pointer",
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "top",
+          gap,
+          ...styles.container
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.input,
+            {
+              className: "ui-radio__input",
+              ...getInputProps(inputProps, ref)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.span,
+            {
+              className: "ui-radio__icon",
+              ...getIconProps(iconProps),
+              __css: {
+                position: "relative",
+                display: "inline-block",
+                userSelect: "none",
+                ...styles.icon
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.span,
+            {
+              className: "ui-radio__label",
+              ...getLabelProps(labelProps),
+              __css: { ...styles.label },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+// src/radio-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var isEvent = (value) => value && (0, import_utils2.isObject)(value) && (0, import_utils2.isObject)(value.target);
 var useRadioGroup = ({
   id,
   name,
   isNative,
   ...props
 }) => {
-  id = id != null ? id : (0, import_react.useId)();
+  id = id != null ? id : (0, import_react2.useId)();
   name = name != null ? name : `radio-${id}`;
-  props.onChange = (0, import_utils.useCallbackRef)(props.onChange);
+  props.onChange = (0, import_utils2.useCallbackRef)(props.onChange);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: props.value,
     defaultValue: props.defaultValue,
     onChange: props.onChange
   });
-  const containerRef = (0, import_react.useRef)(null);
-  const onFocus = (0, import_react.useCallback)(() => {
+  const containerRef = (0, import_react2.useRef)(null);
+  const onFocus = (0, import_react2.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -62,22 +307,22 @@ var useRadioGroup = ({
       firstInput == null ? void 0 : firstInput.focus();
     }
   }, []);
-  const onChange = (0, import_react.useCallback)(
+  const onChange = (0, import_react2.useCallback)(
     (evOrValue) => {
       const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
       setValue(nextValue);
     },
     [setValue]
   );
-  const getContainerProps = (0, import_react.useCallback)(
+  const getContainerProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
       ...props2,
-      ref: (0, import_utils.mergeRefs)(ref, containerRef),
+      ref: (0, import_utils2.mergeRefs)(ref, containerRef),
       role: "group"
     }),
     []
   );
-  const getRadioProps = (0, import_react.useCallback)(
+  const getRadioProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
       ...props2,
       ref,
@@ -97,24 +342,30 @@ var useRadioGroup = ({
     getRadioProps
   };
 };
-var [RadioGroupProvider, useRadioGroupContenxt] = (0, import_utils.createContext)({
+var [RadioGroupProvider, useRadioGroupContenxt] = (0, import_utils2.createContext)({
   strict: false,
   name: "RadioGroupContext"
 });
-var RadioGroup = (0, import_react.forwardRef)(
+var RadioGroup = (0, import_react2.forwardRef)(
   ({
     className,
     size,
     variant,
     colorScheme,
     children,
+    items = [],
     direction = "column",
     gap,
     ...props
   }, ref) => {
     const { name, value, onChange, getContainerProps } = useRadioGroup(props);
-    const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control.useFormControl)(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control2.useFormControl)(props);
+    const validChildren = (0, import_utils2.getValidChildren)(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length) {
+      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Radio, { value: value2, ...props2, children: label }, i));
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       RadioGroupProvider,
       {
         value: {
@@ -129,15 +380,15 @@ var RadioGroup = (0, import_react.forwardRef)(
           value,
           onChange
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_layouts.Flex,
           {
             ref,
-            className: (0, import_utils.cx)("ui-radio-group", className),
+            className: (0, import_utils2.cx)("ui-radio-group", className),
             direction,
             gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
             ...getContainerProps(
-              (0, import_utils.omitObject)(props, [
+              (0, import_utils2.omitObject)(props, [
                 "onChange",
                 "isInvalid",
                 "isDisabled",
@@ -145,7 +396,7 @@ var RadioGroup = (0, import_react.forwardRef)(
                 "isReadOnly"
               ])
             ),
-            children
+            children: children != null ? children : computedChildren
           }
         )
       }

package/dist/radio-group.mjs

@@ -3,7 +3,7 @@ import {
   RadioGroup,
   useRadioGroup,
   useRadioGroupContenxt
-} from "./chunk-577WYHY3.mjs";
+} from "./chunk-UX7EGSYQ.mjs";
 export {
   RadioGroup,
   useRadioGroup,

package/dist/radio.d.mts

@@ -46,11 +46,11 @@ declare const useRadio: <Y extends string | number = string>(props: UseRadioProp
 };
 type UseRadioReturn = ReturnType<typeof useRadio>;
 type RadioOptions = {
-    iconProps?: HTMLUIProps<'span'>;
+    iconProps?: HTMLUIProps<"span">;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    labelProps?: HTMLUIProps<'span'>;
+    labelProps?: HTMLUIProps<"span">;
 };
-type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<'label'>, keyof UseRadioProps> & ThemeProps<'Radio'> & UseRadioProps<Y> & RadioOptions;
+type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<"label">, keyof UseRadioProps> & ThemeProps<"Radio"> & UseRadioProps<Y> & RadioOptions;
 declare const Radio: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "value" | "name" | "id" | "onChange" | "defaultChecked" | keyof FormControlOptions | "isChecked"> & ThemeProps<"Radio"> & FormControlOptions & {
     /**
      * id assigned to input.

package/dist/radio.d.ts

@@ -46,11 +46,11 @@ declare const useRadio: <Y extends string | number = string>(props: UseRadioProp
 };
 type UseRadioReturn = ReturnType<typeof useRadio>;
 type RadioOptions = {
-    iconProps?: HTMLUIProps<'span'>;
+    iconProps?: HTMLUIProps<"span">;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    labelProps?: HTMLUIProps<'span'>;
+    labelProps?: HTMLUIProps<"span">;
 };
-type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<'label'>, keyof UseRadioProps> & ThemeProps<'Radio'> & UseRadioProps<Y> & RadioOptions;
+type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<"label">, keyof UseRadioProps> & ThemeProps<"Radio"> & UseRadioProps<Y> & RadioOptions;
 declare const Radio: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "value" | "name" | "id" | "onChange" | "defaultChecked" | keyof FormControlOptions | "isChecked"> & ThemeProps<"Radio"> & FormControlOptions & {
     /**
      * id assigned to input.

package/dist/radio.js

@@ -114,12 +114,18 @@ var RadioGroup = (0, import_react.forwardRef)(
     variant,
     colorScheme,
     children,
+    items = [],
     direction = "column",
     gap,
     ...props
   }, ref) => {
     const { name, value, onChange, getContainerProps } = useRadioGroup(props);
     const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control.useFormControl)(props);
+    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,
       {
@@ -151,7 +157,7 @@ var RadioGroup = (0, import_react.forwardRef)(
                 "isReadOnly"
               ])
             ),
-            children
+            children: children != null ? children : computedChildren
           }
         )
       }
@@ -365,14 +371,14 @@ var Radio = (0, import_react2.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.input,
             {
-              className: "ui-radio-input",
+              className: "ui-radio__input",
               ...getInputProps(inputProps, ref)
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.span,
             {
-              className: "ui-radio-icon",
+              className: "ui-radio__icon",
               ...getIconProps(iconProps),
               __css: {
                 position: "relative",
@@ -385,7 +391,7 @@ var Radio = (0, import_react2.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.span,
             {
-              className: "ui-radio-label",
+              className: "ui-radio__label",
               ...getLabelProps(labelProps),
               __css: { ...styles.label },
               children

package/dist/radio.mjs

@@ -2,8 +2,7 @@
 import {
   Radio,
   useRadio
-} from "./chunk-FHZRCWV7.mjs";
-import "./chunk-577WYHY3.mjs";
+} from "./chunk-UX7EGSYQ.mjs";
 export {
   Radio,
   useRadio

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/radio",
-  "version": "0.3.19",
+  "version": "0.4.1",
   "description": "Yamada UI radio component",
   "keywords": [
     "yamada",
@@ -35,10 +35,10 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.12.5",
+    "@yamada-ui/core": "0.12.6",
     "@yamada-ui/utils": "0.3.3",
-    "@yamada-ui/form-control": "0.3.18",
-    "@yamada-ui/layouts": "0.3.16",
+    "@yamada-ui/form-control": "0.3.19",
+    "@yamada-ui/layouts": "0.3.17",
     "@yamada-ui/use-controllable-state": "0.3.0",
     "@yamada-ui/use-focus-visible": "0.2.5"
   },

package/dist/chunk-577WYHY3.mjs

@@ -1,148 +0,0 @@
-"use client"
-
-// src/radio-group.tsx
-import { useFormControl } from "@yamada-ui/form-control";
-import { Flex } from "@yamada-ui/layouts";
-import { useControllableState } from "@yamada-ui/use-controllable-state";
-import {
-  createContext,
-  cx,
-  isObject,
-  mergeRefs,
-  useCallbackRef,
-  omitObject
-} from "@yamada-ui/utils";
-import {
-  useCallback,
-  useId,
-  useRef,
-  forwardRef
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var isEvent = (value) => value && isObject(value) && isObject(value.target);
-var useRadioGroup = ({
-  id,
-  name,
-  isNative,
-  ...props
-}) => {
-  id = id != null ? id : useId();
-  name = name != null ? name : `radio-${id}`;
-  props.onChange = useCallbackRef(props.onChange);
-  const [value, setValue] = useControllableState({
-    value: props.value,
-    defaultValue: props.defaultValue,
-    onChange: props.onChange
-  });
-  const containerRef = useRef(null);
-  const onFocus = 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 = useCallback(
-    (evOrValue) => {
-      const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
-      setValue(nextValue);
-    },
-    [setValue]
-  );
-  const getContainerProps = useCallback(
-    (props2 = {}, ref = null) => ({
-      ...props2,
-      ref: mergeRefs(ref, containerRef),
-      role: "group"
-    }),
-    []
-  );
-  const getRadioProps = useCallback(
-    (props2 = {}, ref = null) => ({
-      ...props2,
-      ref,
-      name,
-      [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
-      onChange
-    }),
-    [name, value, onChange, isNative]
-  );
-  return {
-    name,
-    value,
-    setValue,
-    onChange,
-    onFocus,
-    getContainerProps,
-    getRadioProps
-  };
-};
-var [RadioGroupProvider, useRadioGroupContenxt] = createContext({
-  strict: false,
-  name: "RadioGroupContext"
-});
-var RadioGroup = forwardRef(
-  ({
-    className,
-    size,
-    variant,
-    colorScheme,
-    children,
-    direction = "column",
-    gap,
-    ...props
-  }, ref) => {
-    const { name, value, onChange, getContainerProps } = useRadioGroup(props);
-    const { isRequired, isReadOnly, isDisabled, isInvalid } = useFormControl(props);
-    return /* @__PURE__ */ jsx(
-      RadioGroupProvider,
-      {
-        value: {
-          size,
-          variant,
-          colorScheme,
-          isRequired,
-          isReadOnly,
-          isDisabled,
-          isInvalid,
-          name,
-          value,
-          onChange
-        },
-        children: /* @__PURE__ */ jsx(
-          Flex,
-          {
-            ref,
-            className: cx("ui-radio-group", className),
-            direction,
-            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
-            ...getContainerProps(
-              omitObject(props, [
-                "onChange",
-                "isInvalid",
-                "isDisabled",
-                "isRequired",
-                "isReadOnly"
-              ])
-            ),
-            children
-          }
-        )
-      }
-    );
-  }
-);
-RadioGroup.displayName = "RadioGroup";
-
-export {
-  useRadioGroup,
-  useRadioGroupContenxt,
-  RadioGroup
-};