@yamada-ui/radio 1.2.16-next-20241126134247 → 1.3.0-next-20241126142838

package/dist/index.js

@@ -22,6 +22,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Radio: () => Radio,
+  RadioCard: () => RadioCard,
+  RadioCardAddon: () => RadioCardAddon,
+  RadioCardDescription: () => RadioCardDescription,
+  RadioCardGroup: () => RadioCardGroup,
+  RadioCardLabel: () => RadioCardLabel,
   RadioGroup: () => RadioGroup,
   useRadio: () => useRadio,
   useRadioGroup: () => useRadioGroup
@@ -30,10 +35,9 @@ module.exports = __toCommonJS(src_exports);
 
 // 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_utils2 = require("@yamada-ui/utils");
-var import_react = require("react");
+var import_form_control2 = require("@yamada-ui/form-control");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
 
 // src/radio-context.ts
 var import_utils = require("@yamada-ui/utils");
@@ -41,9 +45,20 @@ var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils.createContext)
   name: "RadioGroupContext",
   strict: false
 });
+var [RadioCardGroupProvider, useRadioCardGroupContext] = (0, import_utils.createContext)({
+  name: "RadioCardGroupContext",
+  strict: false
+});
+var [RadioCardProvider, useRadioCardContext] = (0, import_utils.createContext)({
+  name: "RadioCardContext",
+  errorMessage: `useRadioCardContext returned is 'undefined'. Seems you forgot to wrap the components in "<RadioCard />"`
+});
 
-// src/radio.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/use-radio.ts
+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_react = require("react");
 var useRadio = ({
   id,
   ...props
@@ -115,9 +130,11 @@ var useRadio = ({
       ...formControlProps,
       ...props2,
       ref,
-      "data-checked": (0, import_utils2.dataAttr)(resolvedChecked)
+      "data-checked": (0, import_utils2.dataAttr)(resolvedChecked),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible)
     }),
-    [resolvedChecked, formControlProps]
+    [resolvedChecked, formControlProps, focused, focusVisible]
   );
   const getIconProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
@@ -214,12 +231,15 @@ var useRadio = ({
     getLabelProps
   };
 };
-var Radio = (0, import_react.forwardRef)(
+
+// src/radio.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Radio = (0, import_react2.forwardRef)(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
     const group = useRadioGroupContext();
     const { value: groupValue, ...groupProps } = { ...group };
-    const control = (0, import_form_control.useFormControl)(props);
+    const control = (0, import_form_control2.useFormControl)(props);
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Radio", {
       ...groupProps,
       ...props
@@ -232,6 +252,7 @@ var Radio = (0, import_react.forwardRef)(
       isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
       isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
       isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
+      label,
       iconProps,
       inputProps,
       labelProps,
@@ -239,7 +260,7 @@ var Radio = (0, import_react.forwardRef)(
     } = (0, import_core.omitThemeProps)(mergedProps);
     (_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
     const checkedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.checked;
-    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
+    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils3.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
     const {
       checked,
       props: rest,
@@ -260,7 +281,7 @@ var Radio = (0, import_react.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.label,
       {
-        className: (0, import_utils2.cx)("ui-radio", className),
+        className: (0, import_utils3.cx)("ui-radio", className),
         ...getContainerProps(rest),
         __css: {
           alignItems: "center",
@@ -304,7 +325,7 @@ var Radio = (0, import_react.forwardRef)(
               className: "ui-radio__label",
               ...getLabelProps(labelProps),
               __css: { ...styles.label },
-              children
+              children: children != null ? children : label
             }
           )
         ]
@@ -315,14 +336,205 @@ var Radio = (0, import_react.forwardRef)(
 Radio.displayName = "Radio";
 Radio.__ui__ = "Radio";
 
-// src/radio-group.tsx
-var import_form_control2 = require("@yamada-ui/form-control");
+// src/radio-card.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_form_control3 = require("@yamada-ui/form-control");
+var import_utils7 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+
+// src/radio-card-addon.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RadioCardAddon = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useRadioCardContext();
+    const css = { ...styles.addon };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-radio-card__addon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+RadioCardAddon.displayName = "RadioCardAddon";
+RadioCardAddon.__ui__ = "RadioCardAddon";
+
+// src/radio-card-description.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RadioCardDescription = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useRadioCardContext();
+  const css = { ...styles.description };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core5.ui.div,
+    {
+      ref,
+      className: (0, import_utils5.cx)("ui-radio-card__description", className),
+      __css: css,
+      ...rest
+    }
+  );
+});
+RadioCardDescription.displayName = "RadioCardDescription";
+RadioCardDescription.__ui__ = "RadioCardDescription";
+
+// src/radio-card-label.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_core7 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var RadioCardLabel = (0, import_core6.forwardRef)(
+  ({ className, children, withIcon, contentProps, iconProps, ...rest }, ref) => {
+    const {
+      styles,
+      withIcon: defaultWithIcon,
+      getIconProps,
+      iconProps: defaultIconProps
+    } = useRadioCardContext();
+    withIcon != null ? withIcon : withIcon = defaultWithIcon;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core7.ui.div,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-radio-card__label", className),
+        __css: { ...styles.label },
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core7.ui.span,
+            {
+              className: "ui-radio-card__label-content",
+              __css: { ...styles.labelContent },
+              ...contentProps,
+              children
+            }
+          ),
+          withIcon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core7.ui.div,
+            {
+              className: "ui-radio-card__icon",
+              __css: { ...styles.icon },
+              ...getIconProps({ ...defaultIconProps, ...iconProps })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+RadioCardLabel.displayName = "RadioCardLabel";
+RadioCardLabel.__ui__ = "RadioCardLabel";
+
+// src/radio-card.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var RadioCard = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const group = useRadioCardGroupContext();
+    const { value: groupValue, ...groupProps } = { ...group };
+    const control = (0, import_form_control3.useFormControl)(props);
+    const [styles, mergedProps] = (0, import_core8.useComponentMultiStyle)("RadioCard", {
+      ...groupProps,
+      ...props
+    });
+    const {
+      className,
+      addon,
+      children,
+      description,
+      isDisabled = (_a = groupProps.isDisabled) != null ? _a : control.isDisabled,
+      isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
+      isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
+      isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
+      label,
+      withIcon = true,
+      addonProps,
+      descriptionProps,
+      iconProps,
+      inputProps,
+      labelProps,
+      ...computedProps
+    } = (0, import_core8.omitThemeProps)(mergedProps);
+    (_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
+    const checkedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.checked;
+    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils7.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
+    const {
+      checked,
+      props: rest,
+      getContainerProps,
+      getIconProps,
+      getInputProps
+    } = useRadio({
+      ...computedProps,
+      checked: checkedProp,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      onChange
+    });
+    const tabIndex = !groupValue ? 0 : checked ? 0 : -1;
+    const validChildren = (0, import_utils7.getValidChildren)(children);
+    const customLabel = (0, import_utils7.findChild)(validChildren, RadioCardLabel);
+    const customDescription = (0, import_utils7.findChild)(validChildren, RadioCardDescription);
+    const customAddon = (0, import_utils7.findChild)(validChildren, RadioCardAddon);
+    const computedChildren = !(0, import_utils7.isEmpty)(validChildren) ? (0, import_utils7.omitChildren)(
+      validChildren,
+      RadioCardLabel,
+      RadioCardDescription,
+      RadioCardAddon
+    ) : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioCardProvider, { value: { styles, withIcon, getIconProps, iconProps }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_core8.ui.label,
+      {
+        className: (0, import_utils7.cx)("ui-radio-card", className),
+        ...getContainerProps(rest),
+        __css: { ...styles.container },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core8.ui.input,
+            {
+              className: "ui-radio-card__input",
+              ...getInputProps(
+                {
+                  ...inputProps,
+                  tabIndex
+                },
+                ref
+              )
+            }
+          ),
+          customLabel != null ? customLabel : label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioCardLabel, { ...labelProps, children: label }) : null,
+          customDescription != null ? customDescription : description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioCardDescription, { ...descriptionProps, children: description }) : null,
+          customAddon != null ? customAddon : addon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioCardAddon, { ...addonProps, children: addon }) : null,
+          computedChildren
+        ]
+      }
+    ) });
+  }
+);
+RadioCard.displayName = "RadioCard";
+RadioCard.__ui__ = "RadioCard";
+
+// src/radio-card-group.tsx
+var import_form_control4 = require("@yamada-ui/form-control");
 var import_layouts = require("@yamada-ui/layouts");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+
+// src/use-radio-group.ts
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
-var import_utils3 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var isEvent = (value) => value && (0, import_utils3.isObject)(value) && (0, import_utils3.isObject)(value.target);
+var import_utils8 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var isEvent = (value) => value && (0, import_utils8.isObject)(value) && (0, import_utils8.isObject)(value.target);
 var useRadioGroup = ({
   id,
   name,
@@ -332,17 +544,17 @@ var useRadioGroup = ({
   onChange: onChangeProp,
   ...props
 }) => {
-  const uuid = (0, import_react2.useId)();
+  const uuid = (0, import_react4.useId)();
   id != null ? id : id = uuid;
   name != null ? name : name = `radio-${id}`;
-  const onChangeRef = (0, import_utils3.useCallbackRef)(onChangeProp);
+  const onChangeRef = (0, import_utils8.useCallbackRef)(onChangeProp);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     defaultValue,
     value: valueProp,
     onChange: onChangeRef
   });
-  const containerRef = (0, import_react2.useRef)(null);
-  const onFocus = (0, import_react2.useCallback)(() => {
+  const containerRef = (0, import_react4.useRef)(null);
+  const onFocus = (0, import_react4.useCallback)(() => {
     const container = containerRef.current;
     if (!container) return;
     let query = `input:not(:disabled):checked`;
@@ -355,22 +567,22 @@ var useRadioGroup = ({
       firstInput == null ? void 0 : firstInput.focus();
     }
   }, []);
-  const onChange = (0, import_react2.useCallback)(
+  const onChange = (0, import_react4.useCallback)(
     (evOrValue) => {
       const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
       setValue(nextValue);
     },
     [setValue]
   );
-  const getContainerProps = (0, import_react2.useCallback)(
+  const getContainerProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
       role: "radiogroup",
       ...props2,
-      ref: (0, import_utils3.mergeRefs)(ref, containerRef)
+      ref: (0, import_utils8.mergeRefs)(ref, containerRef)
     }),
     []
   );
-  const getRadioProps = (0, import_react2.useCallback)(
+  const getRadioProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => {
       const checked = props2.value === value;
       return {
@@ -399,7 +611,98 @@ var useRadioGroup = ({
     onFocus
   };
 };
-var RadioGroup = (0, import_react2.forwardRef)(
+
+// src/radio-card-group.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var RadioCardGroup = (0, import_react5.forwardRef)(
+  ({
+    id: idProp,
+    className,
+    colorScheme,
+    size,
+    variant,
+    children,
+    direction = "row",
+    gap = "0.5rem",
+    items = [],
+    withIcon = true,
+    addonProps,
+    descriptionProps,
+    labelProps,
+    ...props
+  }, ref) => {
+    const {
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      labelId,
+      ...computedProps
+    } = (0, import_form_control4.useFormControl)({
+      id: idProp,
+      ...props
+    });
+    const {
+      id,
+      name,
+      props: rest,
+      value,
+      getContainerProps,
+      onChange
+    } = useRadioGroup(computedProps);
+    const validChildren = (0, import_utils9.getValidChildren)(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length)
+      computedChildren = items.map((props2, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioCard, { ...props2 }, i));
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      RadioCardGroupProvider,
+      {
+        value: {
+          name,
+          colorScheme,
+          size,
+          variant,
+          isDisabled,
+          isInvalid,
+          isReadOnly,
+          isRequired,
+          value,
+          withIcon,
+          addonProps,
+          descriptionProps,
+          labelProps,
+          onChange
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_layouts.Flex,
+          {
+            ref,
+            className: (0, import_utils9.cx)("ui-radio-card-group", className),
+            gap,
+            w: "100%",
+            ...getContainerProps({
+              id,
+              "aria-labelledby": labelId,
+              ...rest
+            }),
+            direction,
+            children: children != null ? children : computedChildren
+          }
+        )
+      }
+    );
+  }
+);
+RadioCardGroup.displayName = "RadioCardGroup";
+RadioCardGroup.__ui__ = "RadioCardGroup";
+
+// src/radio-group.tsx
+var import_form_control5 = require("@yamada-ui/form-control");
+var import_layouts2 = require("@yamada-ui/layouts");
+var import_utils10 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react6.forwardRef)(
   ({
     id: idProp,
     className,
@@ -419,7 +722,7 @@ var RadioGroup = (0, import_react2.forwardRef)(
       isRequired,
       labelId,
       ...computedProps
-    } = (0, import_form_control2.useFormControl)({
+    } = (0, import_form_control5.useFormControl)({
       id: idProp,
       ...props
     });
@@ -431,12 +734,11 @@ var RadioGroup = (0, import_react2.forwardRef)(
       getContainerProps,
       onChange
     } = useRadioGroup(computedProps);
-    const validChildren = (0, import_utils3.getValidChildren)(children);
+    const validChildren = (0, import_utils10.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)(
+    if (!validChildren.length && items.length)
+      computedChildren = items.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Radio, { ...props2 }, index));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       RadioGroupProvider,
       {
         value: {
@@ -451,11 +753,11 @@ var RadioGroup = (0, import_react2.forwardRef)(
           value,
           onChange
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_layouts.Flex,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_layouts2.Flex,
           {
             ref,
-            className: (0, import_utils3.cx)("ui-radio-group", className),
+            className: (0, import_utils10.cx)("ui-radio-group", className),
             gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
             ...getContainerProps({
               id,
@@ -475,6 +777,11 @@ RadioGroup.__ui__ = "RadioGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Radio,
+  RadioCard,
+  RadioCardAddon,
+  RadioCardDescription,
+  RadioCardGroup,
+  RadioCardLabel,
   RadioGroup,
   useRadio,
   useRadioGroup