@yamada-ui/checkbox 0.3.19 → 0.4.0

package/dist/checkbox-group.d.mts

@@ -1,10 +1,15 @@
+import { CheckboxProps } from './checkbox.mjs';
 import * as react from 'react';
 import { ChangeEvent, Ref } from 'react';
 import { ThemeProps, ComponentArgs } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 import { FlexProps } from '@yamada-ui/layouts';
 import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
+import '@yamada-ui/motion';
 
+type CheckboxItem<Y extends string | number = string> = CheckboxProps<Y> & {
+    label?: string;
+};
 type UseCheckboxGroupProps<Y extends string | number = string> = {
     /**
      * The value of the checkbox group.
@@ -45,15 +50,29 @@ declare const useCheckboxGroup: <Y extends string | number = string>({ isNative,
     }>;
 };
 type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;
-type CheckboxGroupProps<Y extends string | number = string> = ThemeProps<'Checkbox'> & Omit<FlexProps, 'onChange'> & UseCheckboxGroupProps<Y> & FormControlOptions;
-type CheckboxContext = ThemeProps<'Checkbox'> & FormControlOptions & {
+type CheckboxGroupProps<Y extends string | number = string> = ThemeProps<"Checkbox"> & Omit<FlexProps, "onChange"> & UseCheckboxGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate checkboxes based on items.
+     *
+     * @default '[]'
+     */
+    items?: CheckboxItem<Y>[];
+};
+type CheckboxContext = ThemeProps<"Checkbox"> & FormControlOptions & {
     value: (string | number)[];
     onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void;
 };
 declare const useCheckboxGroupContext: () => CheckboxContext | undefined;
 
 declare const CheckboxGroup: (<Y extends string | number = string>(props: ThemeProps<"Checkbox"> & Omit<FlexProps, "onChange"> & UseCheckboxGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate checkboxes based on items.
+     *
+     * @default '[]'
+     */
+    items?: CheckboxItem<Y>[] | undefined;
+} & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
 
-export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };
+export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };

package/dist/checkbox-group.d.ts

@@ -1,10 +1,15 @@
+import { CheckboxProps } from './checkbox.js';
 import * as react from 'react';
 import { ChangeEvent, Ref } from 'react';
 import { ThemeProps, ComponentArgs } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 import { FlexProps } from '@yamada-ui/layouts';
 import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
+import '@yamada-ui/motion';
 
+type CheckboxItem<Y extends string | number = string> = CheckboxProps<Y> & {
+    label?: string;
+};
 type UseCheckboxGroupProps<Y extends string | number = string> = {
     /**
      * The value of the checkbox group.
@@ -45,15 +50,29 @@ declare const useCheckboxGroup: <Y extends string | number = string>({ isNative,
     }>;
 };
 type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;
-type CheckboxGroupProps<Y extends string | number = string> = ThemeProps<'Checkbox'> & Omit<FlexProps, 'onChange'> & UseCheckboxGroupProps<Y> & FormControlOptions;
-type CheckboxContext = ThemeProps<'Checkbox'> & FormControlOptions & {
+type CheckboxGroupProps<Y extends string | number = string> = ThemeProps<"Checkbox"> & Omit<FlexProps, "onChange"> & UseCheckboxGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate checkboxes based on items.
+     *
+     * @default '[]'
+     */
+    items?: CheckboxItem<Y>[];
+};
+type CheckboxContext = ThemeProps<"Checkbox"> & FormControlOptions & {
     value: (string | number)[];
     onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void;
 };
 declare const useCheckboxGroupContext: () => CheckboxContext | undefined;
 
 declare const CheckboxGroup: (<Y extends string | number = string>(props: ThemeProps<"Checkbox"> & Omit<FlexProps, "onChange"> & UseCheckboxGroupProps<Y> & FormControlOptions & {
+    /**
+     * If provided, generate checkboxes based on items.
+     *
+     * @default '[]'
+     */
+    items?: CheckboxItem<Y>[] | undefined;
+} & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
 
-export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };
+export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };

package/dist/checkbox-group.js

@@ -26,24 +26,457 @@ __export(checkbox_group_exports, {
   useCheckboxGroupContext: () => useCheckboxGroupContext
 });
 module.exports = __toCommonJS(checkbox_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/checkbox.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_motion = require("@yamada-ui/motion");
+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 useCheckbox = (props) => {
+  const {
+    id,
+    name,
+    value,
+    defaultChecked,
+    tabIndex,
+    required,
+    disabled,
+    readOnly,
+    isIndeterminate,
+    ...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 inputRef = (0, import_react.useRef)(null);
+  const [isLabel, setIsLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const isControlled = props.isChecked !== void 0;
+  const checked = isControlled ? props.isChecked : isChecked;
+  const onChange = (0, import_utils.useCallbackRef)(
+    (ev) => {
+      var _a;
+      if (readOnly || disabled) {
+        ev.preventDefault();
+        return;
+      }
+      if (!isControlled)
+        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      (_a = rest.onChange) == null ? void 0 : _a.call(rest, ev);
+    },
+    [readOnly, disabled, isControlled, checked, isIndeterminate]
+  );
+  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]
+  );
+  (0, import_react.useEffect)(() => {
+    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+  }, []);
+  (0, import_utils.useSafeLayoutEffect)(() => {
+    if (inputRef.current)
+      inputRef.current.indeterminate = Boolean(isIndeterminate);
+  }, [isIndeterminate]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (disabled)
+      setFocused(false);
+  }, [disabled, setFocused]);
+  (0, import_utils.useSafeLayoutEffect)(() => {
+    var _a;
+    if (!((_a = inputRef.current) == null ? void 0 : _a.form))
+      return;
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
+  }, []);
+  (0, import_utils.useSafeLayoutEffect)(() => {
+    if (!inputRef.current)
+      return;
+    if (inputRef.current.checked !== checked)
+      setIsChecked(inputRef.current.checked);
+  }, [inputRef.current]);
+  const getContainerProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, (el) => {
+        if (el)
+          setIsLabel(el.tagName === "LABEL");
+      }),
+      "data-checked": (0, import_utils.dataAttr)(checked),
+      onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
+        var _a;
+        if (isLabel)
+          return;
+        (_a = inputRef.current) == null ? void 0 : _a.click();
+        requestAnimationFrame(() => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        });
+      })
+    }),
+    [checked, isLabel, 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),
+      "data-indeterminate": (0, import_utils.dataAttr)(isIndeterminate),
+      "aria-hidden": true,
+      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
+        if (isFocused)
+          ev.preventDefault();
+        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))
+    }),
+    [
+      isActive,
+      checked,
+      isFocused,
+      isHovered,
+      isFocusVisible,
+      isIndeterminate,
+      rest
+    ]
+  );
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(inputRef, ref),
+      id,
+      type: "checkbox",
+      name,
+      value,
+      tabIndex,
+      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,
+      tabIndex,
+      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),
+      ...props2,
+      ref,
+      "data-checked": (0, import_utils.dataAttr)(checked),
+      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }),
+      onTouchStart: (0, import_utils.handlerAll)(props2.onTouchStart, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      })
+    }),
+    [checked, rest]
+  );
+  return {
+    isFocusVisible,
+    isFocused,
+    isHovered,
+    isActive,
+    isChecked: checked,
+    isIndeterminate,
+    getContainerProps,
+    getIconProps,
+    getInputProps,
+    getLabelProps
+  };
+};
+var Checkbox = (0, import_react.forwardRef)(
+  (props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const group = useCheckboxGroupContext();
+    const control = (0, import_form_control.useFormControl)(props);
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Checkbox", {
+      ...group ? (0, import_utils.omitObject)(group, ["value"]) : {},
+      ...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 {
+      isChecked,
+      isIndeterminate,
+      getContainerProps,
+      getInputProps,
+      getIconProps,
+      getLabelProps
+    } = useCheckbox({
+      ...rest,
+      isRequired,
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      isChecked: (group == null ? void 0 : group.value) && rest.value ? group.value.includes(rest.value) : rest.isChecked,
+      onChange: (group == null ? void 0 : group.onChange) && rest.value ? (0, import_utils.funcAll)(group.onChange, rest.onChange) : rest.onChange
+    });
+    const cloneIcon = (0, import_react.cloneElement)((_e = iconProps == null ? void 0 : iconProps.children) != null ? _e : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
+      __css: {
+        opacity: isChecked || isIndeterminate ? 1 : 0,
+        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        transitionProperty: "transform",
+        transitionDuration: "normal"
+      },
+      isIndeterminate,
+      isChecked,
+      isRequired,
+      isReadOnly,
+      isDisabled,
+      isInvalid
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.ui.label,
+      {
+        className: (0, import_utils.cx)("ui-checkbox", className),
+        ...getContainerProps(),
+        __css: {
+          cursor: "pointer",
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "top",
+          gap,
+          ...styles.container
+        },
+        ...(0, import_utils.omitObject)(rest, [
+          "id",
+          "name",
+          "value",
+          "defaultValue",
+          "defaultChecked",
+          "isChecked",
+          "isIndeterminate",
+          "onChange",
+          "onBlur",
+          "onFocus",
+          "tabIndex"
+        ]),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.input,
+            {
+              className: "ui-checkbox__input",
+              ...getInputProps(inputProps, ref)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.span,
+            {
+              className: "ui-checkbox__icon",
+              __css: {
+                pointerEvents: isReadOnly ? "none" : void 0,
+                position: "relative",
+                display: "inline-block",
+                userSelect: "none",
+                ...styles.icon
+              },
+              ...getIconProps(
+                (0, import_utils.omitObject)(iconProps != null ? iconProps : { children: void 0 }, ["children"])
+              ),
+              children: cloneIcon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.span,
+            {
+              className: "ui-checkbox__label",
+              __css: { ...styles.label },
+              ...getLabelProps(labelProps),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var CheckboxIcon = ({
+  isIndeterminate,
+  isChecked,
+  ...rest
+}) => {
+  const iconProps = (0, import_utils.omitObject)(rest, [
+    "isRequired",
+    "isReadOnly",
+    "isDisabled",
+    "isInvalid"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.div,
+    {
+      __css: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.ui.div,
+        {
+          as: import_motion.motion.div,
+          variants: {
+            unchecked: { scale: 0.5 },
+            checked: { scale: 1 }
+          },
+          initial: "unchecked",
+          animate: "checked",
+          exit: "unchecked",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndeterminateIcon, { ...iconProps }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { ...iconProps })
+        }
+      )
+    }
+  ) : null });
+};
+var CheckIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.svg,
+    {
+      as: import_motion.motion.svg,
+      width: "1.2em",
+      viewBox: "0 0 12 10",
+      variants: {
+        unchecked: {
+          opacity: 0,
+          strokeDashoffset: 16
+        },
+        checked: {
+          opacity: 1,
+          strokeDashoffset: 0,
+          transition: { duration: 0.2 }
+        }
+      },
+      style: {
+        fill: "none",
+        strokeWidth: 2,
+        stroke: "currentColor",
+        strokeDasharray: 16
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "1.5 6 4.5 9 10.5 1" })
+    }
+  );
+};
+var IndeterminateIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.svg,
+    {
+      as: import_motion.motion.svg,
+      width: "1.2em",
+      viewBox: "0 0 24 24",
+      variants: {
+        unchecked: {
+          scaleX: 0.65,
+          opacity: 0
+        },
+        checked: {
+          scaleX: 1,
+          opacity: 1,
+          transition: {
+            scaleX: { duration: 0 },
+            opacity: { duration: 0.02 }
+          }
+        }
+      },
+      style: { stroke: "currentColor", strokeWidth: 4 },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
+    }
+  );
+};
+
+// src/checkbox-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 useCheckboxGroup = ({
   isNative,
   ...props
 }) => {
-  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 onChange = (0, import_react.useCallback)(
+  const onChange = (0, import_react2.useCallback)(
     (evOrValue) => {
       const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
       const selectedValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
@@ -52,7 +485,7 @@ var useCheckboxGroup = ({
     },
     [value, setValue]
   );
-  const getCheckboxProps = (0, import_react.useCallback)(
+  const getCheckboxProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
       ...props2,
       ref,
@@ -65,24 +498,30 @@ var useCheckboxGroup = ({
   );
   return { value, setValue, onChange, getCheckboxProps };
 };
-var [CheckboxGroupProvider, useCheckboxGroupContext] = (0, import_utils.createContext)({
+var [CheckboxGroupProvider, useCheckboxGroupContext] = (0, import_utils2.createContext)({
   strict: false,
   name: "CheckboxGroupContext"
 });
-var CheckboxGroup = (0, import_react.forwardRef)(
+var CheckboxGroup = (0, import_react2.forwardRef)(
   ({
     className,
     size,
     variant,
     colorScheme,
     children,
+    items = [],
     direction = "column",
     gap,
     ...props
   }, ref) => {
     const { value, onChange } = useCheckboxGroup(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)(Checkbox, { value: value2, ...props2, children: label }, i));
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       CheckboxGroupProvider,
       {
         value: {
@@ -96,15 +535,15 @@ var CheckboxGroup = (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-checkbox-group", className),
+            className: (0, import_utils2.cx)("ui-checkbox-group", className),
             role: "group",
             direction,
             gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
-            ...(0, import_utils.omitObject)(props, [
+            ...(0, import_utils2.omitObject)(props, [
               "value",
               "defaultValue",
               "onChange",
@@ -113,7 +552,7 @@ var CheckboxGroup = (0, import_react.forwardRef)(
               "isRequired",
               "isReadOnly"
             ]),
-            children
+            children: children != null ? children : computedChildren
           }
         )
       }

package/dist/checkbox-group.mjs

@@ -3,7 +3,7 @@ import {
   CheckboxGroup,
   useCheckboxGroup,
   useCheckboxGroupContext
-} from "./chunk-SFCPW2O4.mjs";
+} from "./chunk-2TIBZ5OE.mjs";
 export {
   CheckboxGroup,
   useCheckboxGroup,

package/dist/checkbox.d.mts

@@ -69,7 +69,7 @@ type CheckboxOptions = {
     /**
      * Props for icon component.
      */
-    iconProps?: Omit<HTMLUIProps<'span'>, 'children'> & {
+    iconProps?: Omit<HTMLUIProps<"span">, "children"> & {
         children: ReactElement;
     };
     /**
@@ -79,10 +79,10 @@ type CheckboxOptions = {
     /**
      * Props for label element.
      */
-    labelProps?: HTMLUIProps<'span'>;
+    labelProps?: HTMLUIProps<"span">;
 };
-type CheckboxProps<Y extends string | number = string> = Omit<HTMLUIProps<'label'>, keyof UseCheckboxProps | 'checked'> & ThemeProps<'Checkbox'> & UseCheckboxProps<Y> & CheckboxOptions;
-declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "value" | "name" | "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "defaultChecked" | "checked" | keyof FormControlOptions | "isChecked" | "isIndeterminate"> & ThemeProps<"Checkbox"> & FormControlOptions & {
+type CheckboxProps<Y extends string | number = string> = Omit<HTMLUIProps<"label">, keyof UseCheckboxProps | "checked"> & ThemeProps<"Checkbox"> & UseCheckboxProps<Y> & CheckboxOptions;
+declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "defaultChecked" | "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | keyof FormControlOptions | "name" | "value" | "isChecked" | "isIndeterminate" | "checked"> & ThemeProps<"Checkbox"> & FormControlOptions & {
     /**
      * id assigned to input.
      */
@@ -132,7 +132,7 @@ declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUI
 } & CheckboxOptions & {
     ref?: Ref<HTMLInputElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
-type CheckboxIconProps = HTMLUIProps<'svg'> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
+type CheckboxIconProps = HTMLUIProps<"svg"> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
     /**
      * If `true`, the icon will be indeterminate.
      *

package/dist/checkbox.d.ts

@@ -69,7 +69,7 @@ type CheckboxOptions = {
     /**
      * Props for icon component.
      */
-    iconProps?: Omit<HTMLUIProps<'span'>, 'children'> & {
+    iconProps?: Omit<HTMLUIProps<"span">, "children"> & {
         children: ReactElement;
     };
     /**
@@ -79,10 +79,10 @@ type CheckboxOptions = {
     /**
      * Props for label element.
      */
-    labelProps?: HTMLUIProps<'span'>;
+    labelProps?: HTMLUIProps<"span">;
 };
-type CheckboxProps<Y extends string | number = string> = Omit<HTMLUIProps<'label'>, keyof UseCheckboxProps | 'checked'> & ThemeProps<'Checkbox'> & UseCheckboxProps<Y> & CheckboxOptions;
-declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "value" | "name" | "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "defaultChecked" | "checked" | keyof FormControlOptions | "isChecked" | "isIndeterminate"> & ThemeProps<"Checkbox"> & FormControlOptions & {
+type CheckboxProps<Y extends string | number = string> = Omit<HTMLUIProps<"label">, keyof UseCheckboxProps | "checked"> & ThemeProps<"Checkbox"> & UseCheckboxProps<Y> & CheckboxOptions;
+declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "defaultChecked" | "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | keyof FormControlOptions | "name" | "value" | "isChecked" | "isIndeterminate" | "checked"> & ThemeProps<"Checkbox"> & FormControlOptions & {
     /**
      * id assigned to input.
      */
@@ -132,7 +132,7 @@ declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUI
 } & CheckboxOptions & {
     ref?: Ref<HTMLInputElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
-type CheckboxIconProps = HTMLUIProps<'svg'> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
+type CheckboxIconProps = HTMLUIProps<"svg"> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
     /**
      * If `true`, the icon will be indeterminate.
      *

package/dist/checkbox.js

@@ -84,12 +84,18 @@ var CheckboxGroup = (0, import_react.forwardRef)(
     variant,
     colorScheme,
     children,
+    items = [],
     direction = "column",
     gap,
     ...props
   }, ref) => {
     const { value, onChange } = useCheckboxGroup(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)(Checkbox, { value: value2, ...props2, children: label }, i));
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CheckboxGroupProvider,
       {
@@ -121,7 +127,7 @@ var CheckboxGroup = (0, import_react.forwardRef)(
               "isRequired",
               "isReadOnly"
             ]),
-            children
+            children: children != null ? children : computedChildren
           }
         )
       }

package/dist/checkbox.mjs

@@ -3,8 +3,7 @@ import {
   Checkbox,
   CheckboxIcon,
   useCheckbox
-} from "./chunk-KZ5TSBSA.mjs";
-import "./chunk-SFCPW2O4.mjs";
+} from "./chunk-2TIBZ5OE.mjs";
 export {
   Checkbox,
   CheckboxIcon,

package/dist/{chunk-KZ5TSBSA.mjs → chunk-2TIBZ5OE.mjs}

@@ -1,7 +1,4 @@
 "use client"
-import {
-  useCheckboxGroupContext
-} from "./chunk-SFCPW2O4.mjs";
 
 // src/checkbox.tsx
 import {
@@ -10,17 +7,17 @@ import {
   omitThemeProps
 } from "@yamada-ui/core";
 import {
-  useFormControl,
+  useFormControl as useFormControl2,
   useFormControlProps,
   formControlProperties
 } from "@yamada-ui/form-control";
 import { AnimatePresence, motion } from "@yamada-ui/motion";
 import { trackFocusVisible } from "@yamada-ui/use-focus-visible";
 import {
-  cx,
-  omitObject,
+  cx as cx2,
+  omitObject as omitObject2,
   pickObject,
-  useCallbackRef,
+  useCallbackRef as useCallbackRef2,
   useSafeLayoutEffect,
   useUpdateEffect,
   handlerAll,
@@ -30,13 +27,128 @@ import {
 } from "@yamada-ui/utils";
 import {
   cloneElement,
-  useCallback,
+  useCallback as useCallback2,
   useEffect,
   useRef,
   useState,
-  forwardRef
+  forwardRef as forwardRef2
+} from "react";
+
+// src/checkbox-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,
+  omitObject,
+  useCallbackRef,
+  getValidChildren
+} from "@yamada-ui/utils";
+import {
+  forwardRef,
+  useCallback
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+var isEvent = (value) => value && isObject(value) && isObject(value.target);
+var useCheckboxGroup = ({
+  isNative,
+  ...props
+}) => {
+  props.onChange = useCallbackRef(props.onChange);
+  const [value, setValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue || [],
+    onChange: props.onChange
+  });
+  const onChange = useCallback(
+    (evOrValue) => {
+      const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
+      const selectedValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
+      const nextValue = isChecked ? [...value, selectedValue] : value.filter((v) => String(v) !== String(selectedValue));
+      setValue(nextValue);
+    },
+    [value, setValue]
+  );
+  const getCheckboxProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ref,
+      [isNative ? "checked" : "isChecked"]: value.some(
+        (val) => String(props2.value) === String(val)
+      ),
+      onChange
+    }),
+    [onChange, isNative, value]
+  );
+  return { value, setValue, onChange, getCheckboxProps };
+};
+var [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
+  strict: false,
+  name: "CheckboxGroupContext"
+});
+var CheckboxGroup = forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    colorScheme,
+    children,
+    items = [],
+    direction = "column",
+    gap,
+    ...props
+  }, ref) => {
+    const { value, onChange } = useCheckboxGroup(props);
+    const { isRequired, isReadOnly, isDisabled, isInvalid } = useFormControl(props);
+    const validChildren = getValidChildren(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length) {
+      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ jsx(Checkbox, { value: value2, ...props2, children: label }, i));
+    }
+    return /* @__PURE__ */ jsx(
+      CheckboxGroupProvider,
+      {
+        value: {
+          size,
+          variant,
+          colorScheme,
+          isRequired,
+          isReadOnly,
+          isDisabled,
+          isInvalid,
+          value,
+          onChange
+        },
+        children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            ref,
+            className: cx("ui-checkbox-group", className),
+            role: "group",
+            direction,
+            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
+            ...omitObject(props, [
+              "value",
+              "defaultValue",
+              "onChange",
+              "isInvalid",
+              "isDisabled",
+              "isRequired",
+              "isReadOnly"
+            ]),
+            children: children != null ? children : computedChildren
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/checkbox.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var useCheckbox = (props) => {
   const {
     id,
@@ -59,7 +171,7 @@ var useCheckbox = (props) => {
   const [isChecked, setIsChecked] = useState(!!defaultChecked);
   const isControlled = props.isChecked !== void 0;
   const checked = isControlled ? props.isChecked : isChecked;
-  const onChange = useCallbackRef(
+  const onChange = useCallbackRef2(
     (ev) => {
       var _a;
       if (readOnly || disabled) {
@@ -72,16 +184,16 @@ var useCheckbox = (props) => {
     },
     [readOnly, disabled, isControlled, checked, isIndeterminate]
   );
-  const onBlur = useCallbackRef(rest.onBlur);
-  const onFocus = useCallbackRef(rest.onFocus);
-  const onKeyDown = useCallback(
+  const onBlur = useCallbackRef2(rest.onBlur);
+  const onFocus = useCallbackRef2(rest.onFocus);
+  const onKeyDown = useCallback2(
     ({ key }) => {
       if (key === " ")
         setActive(true);
     },
     [setActive]
   );
-  const onKeyUp = useCallback(
+  const onKeyUp = useCallback2(
     ({ key }) => {
       if (key === " ")
         setActive(false);
@@ -111,7 +223,7 @@ var useCheckbox = (props) => {
     if (inputRef.current.checked !== checked)
       setIsChecked(inputRef.current.checked);
   }, [inputRef.current]);
-  const getContainerProps = useCallback(
+  const getContainerProps = useCallback2(
     (props2 = {}, ref = null) => ({
       ...pickObject(rest, formControlProperties),
       ...props2,
@@ -133,7 +245,7 @@ var useCheckbox = (props) => {
     }),
     [checked, isLabel, rest]
   );
-  const getIconProps = useCallback(
+  const getIconProps = useCallback2(
     (props2 = {}, ref = null) => ({
       ...pickObject(rest, formControlProperties),
       ...props2,
@@ -164,7 +276,7 @@ var useCheckbox = (props) => {
       rest
     ]
   );
-  const getInputProps = useCallback(
+  const getInputProps = useCallback2(
     (props2 = {}, ref = null) => ({
       ...pickObject(rest, formControlProperties),
       ...props2,
@@ -212,7 +324,7 @@ var useCheckbox = (props) => {
       onKeyUp
     ]
   );
-  const getLabelProps = useCallback(
+  const getLabelProps = useCallback2(
     (props2 = {}, ref = null) => ({
       ...pickObject(rest, formControlProperties),
       ...props2,
@@ -242,13 +354,13 @@ var useCheckbox = (props) => {
     getLabelProps
   };
 };
-var Checkbox = forwardRef(
+var Checkbox = forwardRef2(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
     const group = useCheckboxGroupContext();
-    const control = useFormControl(props);
+    const control = useFormControl2(props);
     const [styles, mergedProps] = useMultiComponentStyle("Checkbox", {
-      ...group ? omitObject(group, ["value"]) : {},
+      ...group ? omitObject2(group, ["value"]) : {},
       ...props
     });
     const {
@@ -280,7 +392,7 @@ var Checkbox = forwardRef(
       isChecked: (group == null ? void 0 : group.value) && rest.value ? group.value.includes(rest.value) : rest.isChecked,
       onChange: (group == null ? void 0 : group.onChange) && rest.value ? funcAll(group.onChange, rest.onChange) : rest.onChange
     });
-    const cloneIcon = cloneElement((_e = iconProps == null ? void 0 : iconProps.children) != null ? _e : /* @__PURE__ */ jsx(CheckboxIcon, {}), {
+    const cloneIcon = cloneElement((_e = iconProps == null ? void 0 : iconProps.children) != null ? _e : /* @__PURE__ */ jsx2(CheckboxIcon, {}), {
       __css: {
         opacity: isChecked || isIndeterminate ? 1 : 0,
         transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
@@ -297,7 +409,7 @@ var Checkbox = forwardRef(
     return /* @__PURE__ */ jsxs(
       ui.label,
       {
-        className: cx("ui-checkbox", className),
+        className: cx2("ui-checkbox", className),
         ...getContainerProps(),
         __css: {
           cursor: "pointer",
@@ -308,7 +420,7 @@ var Checkbox = forwardRef(
           gap,
           ...styles.container
         },
-        ...omitObject(rest, [
+        ...omitObject2(rest, [
           "id",
           "name",
           "value",
@@ -322,14 +434,14 @@ var Checkbox = forwardRef(
           "tabIndex"
         ]),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             ui.input,
             {
               className: "ui-checkbox__input",
               ...getInputProps(inputProps, ref)
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             ui.span,
             {
               className: "ui-checkbox__icon",
@@ -341,12 +453,12 @@ var Checkbox = forwardRef(
                 ...styles.icon
               },
               ...getIconProps(
-                omitObject(iconProps != null ? iconProps : { children: void 0 }, ["children"])
+                omitObject2(iconProps != null ? iconProps : { children: void 0 }, ["children"])
               ),
               children: cloneIcon
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             ui.span,
             {
               className: "ui-checkbox__label",
@@ -366,13 +478,13 @@ var CheckboxIcon = ({
   isChecked,
   ...rest
 }) => {
-  const iconProps = omitObject(rest, [
+  const iconProps = omitObject2(rest, [
     "isRequired",
     "isReadOnly",
     "isDisabled",
     "isInvalid"
   ]);
-  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ jsx2(
     ui.div,
     {
       __css: {
@@ -381,7 +493,7 @@ var CheckboxIcon = ({
         left: "50%",
         transform: "translate(-50%, -50%)"
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         ui.div,
         {
           as: motion.div,
@@ -397,14 +509,14 @@ var CheckboxIcon = ({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { ...iconProps }) : /* @__PURE__ */ jsx(CheckIcon, { ...iconProps })
+          children: isIndeterminate ? /* @__PURE__ */ jsx2(IndeterminateIcon, { ...iconProps }) : /* @__PURE__ */ jsx2(CheckIcon, { ...iconProps })
         }
       )
     }
   ) : null });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     ui.svg,
     {
       as: motion.svg,
@@ -428,12 +540,12 @@ var CheckIcon = (props) => {
         strokeDasharray: 16
       },
       ...props,
-      children: /* @__PURE__ */ jsx("polyline", { points: "1.5 6 4.5 9 10.5 1" })
+      children: /* @__PURE__ */ jsx2("polyline", { points: "1.5 6 4.5 9 10.5 1" })
     }
   );
 };
 var IndeterminateIcon = (props) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     ui.svg,
     {
       as: motion.svg,
@@ -455,7 +567,7 @@ var IndeterminateIcon = (props) => {
       },
       style: { stroke: "currentColor", strokeWidth: 4 },
       ...props,
-      children: /* @__PURE__ */ jsx("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
+      children: /* @__PURE__ */ jsx2("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
     }
   );
 };
@@ -463,5 +575,8 @@ var IndeterminateIcon = (props) => {
 export {
   useCheckbox,
   Checkbox,
-  CheckboxIcon
+  CheckboxIcon,
+  useCheckboxGroup,
+  useCheckboxGroupContext,
+  CheckboxGroup
 };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './checkbox.mjs';
-export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, useCheckboxGroup } from './checkbox-group.mjs';
+export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, useCheckboxGroup } from './checkbox-group.mjs';
 import '@yamada-ui/core';
 import '@yamada-ui/form-control';
 import '@yamada-ui/motion';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './checkbox.js';
-export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, useCheckboxGroup } from './checkbox-group.js';
+export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, useCheckboxGroup } from './checkbox-group.js';
 import '@yamada-ui/core';
 import '@yamada-ui/form-control';
 import '@yamada-ui/motion';

package/dist/index.js

@@ -88,12 +88,18 @@ var CheckboxGroup = (0, import_react.forwardRef)(
     variant,
     colorScheme,
     children,
+    items = [],
     direction = "column",
     gap,
     ...props
   }, ref) => {
     const { value, onChange } = useCheckboxGroup(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)(Checkbox, { value: value2, ...props2, children: label }, i));
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CheckboxGroupProvider,
       {
@@ -125,7 +131,7 @@ var CheckboxGroup = (0, import_react.forwardRef)(
               "isRequired",
               "isReadOnly"
             ]),
-            children
+            children: children != null ? children : computedChildren
           }
         )
       }

package/dist/index.mjs

@@ -1,13 +1,11 @@
 "use client"
 import {
   Checkbox,
-  CheckboxIcon,
-  useCheckbox
-} from "./chunk-KZ5TSBSA.mjs";
-import {
   CheckboxGroup,
+  CheckboxIcon,
+  useCheckbox,
   useCheckboxGroup
-} from "./chunk-SFCPW2O4.mjs";
+} from "./chunk-2TIBZ5OE.mjs";
 export {
   Checkbox,
   CheckboxGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/checkbox",
-  "version": "0.3.19",
+  "version": "0.4.0",
   "description": "Yamada UI checkbox component",
   "keywords": [
     "yamada",

package/dist/chunk-SFCPW2O4.mjs

@@ -1,110 +0,0 @@
-"use client"
-
-// src/checkbox-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,
-  omitObject,
-  useCallbackRef
-} from "@yamada-ui/utils";
-import { forwardRef, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-var isEvent = (value) => value && isObject(value) && isObject(value.target);
-var useCheckboxGroup = ({
-  isNative,
-  ...props
-}) => {
-  props.onChange = useCallbackRef(props.onChange);
-  const [value, setValue] = useControllableState({
-    value: props.value,
-    defaultValue: props.defaultValue || [],
-    onChange: props.onChange
-  });
-  const onChange = useCallback(
-    (evOrValue) => {
-      const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
-      const selectedValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
-      const nextValue = isChecked ? [...value, selectedValue] : value.filter((v) => String(v) !== String(selectedValue));
-      setValue(nextValue);
-    },
-    [value, setValue]
-  );
-  const getCheckboxProps = useCallback(
-    (props2 = {}, ref = null) => ({
-      ...props2,
-      ref,
-      [isNative ? "checked" : "isChecked"]: value.some(
-        (val) => String(props2.value) === String(val)
-      ),
-      onChange
-    }),
-    [onChange, isNative, value]
-  );
-  return { value, setValue, onChange, getCheckboxProps };
-};
-var [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
-  strict: false,
-  name: "CheckboxGroupContext"
-});
-var CheckboxGroup = forwardRef(
-  ({
-    className,
-    size,
-    variant,
-    colorScheme,
-    children,
-    direction = "column",
-    gap,
-    ...props
-  }, ref) => {
-    const { value, onChange } = useCheckboxGroup(props);
-    const { isRequired, isReadOnly, isDisabled, isInvalid } = useFormControl(props);
-    return /* @__PURE__ */ jsx(
-      CheckboxGroupProvider,
-      {
-        value: {
-          size,
-          variant,
-          colorScheme,
-          isRequired,
-          isReadOnly,
-          isDisabled,
-          isInvalid,
-          value,
-          onChange
-        },
-        children: /* @__PURE__ */ jsx(
-          Flex,
-          {
-            ref,
-            className: cx("ui-checkbox-group", className),
-            role: "group",
-            direction,
-            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
-            ...omitObject(props, [
-              "value",
-              "defaultValue",
-              "onChange",
-              "isInvalid",
-              "isDisabled",
-              "isRequired",
-              "isReadOnly"
-            ]),
-            children
-          }
-        )
-      }
-    );
-  }
-);
-CheckboxGroup.displayName = "CheckboxGroup";
-
-export {
-  useCheckboxGroup,
-  useCheckboxGroupContext,
-  CheckboxGroup
-};