@yamada-ui/checkbox 0.1.12 → 0.2.0

package/dist/checkbox-group.d.ts

@@ -6,9 +6,25 @@ import { FlexProps } from '@yamada-ui/layouts';
 import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
 
 type UseCheckboxGroupProps<Y extends string | number = string> = {
+    /**
+     * The value of the checkbox group.
+     */
     value?: Y[];
+    /**
+     * The initial value of the checkbox group.
+     */
     defaultValue?: Y[];
+    /**
+     * The callback fired when any children checkbox is checked or unchecked.
+     */
     onChange?: (value: Y[]) => void;
+    /**
+     * If `true`, input elements will receive `checked` attribute instead of `isChecked`.
+     *
+     * This assumes, you're using native radio inputs.
+     *
+     * @default false
+     */
     isNative?: boolean;
 };
 declare const useCheckboxGroup: <Y extends string | number = string>({ isNative, ...props }: UseCheckboxGroupProps<Y>) => {
@@ -28,6 +44,7 @@ declare const useCheckboxGroup: <Y extends string | number = string>({ isNative,
         onChange: (ev: Y | ChangeEvent<HTMLInputElement>) => void;
     }>;
 };
+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 & {
     value: (string | number)[];
@@ -39,4 +56,4 @@ declare const CheckboxGroup: (<Y extends string | number = string>(props: ThemeP
     ref?: Ref<HTMLDivElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
 
-export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, useCheckboxGroup, useCheckboxGroupContext };
+export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };

package/dist/checkbox.d.ts

@@ -5,15 +5,51 @@ import { PropGetter } from '@yamada-ui/utils';
 import { ChangeEventHandler, FocusEventHandler, Ref, FC, ReactElement, InputHTMLAttributes } from 'react';
 
 type UseCheckboxProps<Y extends string | number = string> = FormControlOptions & {
+    /**
+     * id assigned to input.
+     */
     id?: string;
+    /**
+     * The HTML `name` attribute used for forms.
+     */
     name?: string;
+    /**
+     * The value to be used in the checkbox input.
+     */
     value?: Y;
+    /**
+     * If `true`, the checkbox will be initially checked.
+     *
+     * @default false
+     */
     defaultChecked?: boolean;
+    /**
+     * If `true`, the checkbox will be checked.
+     *
+     * @default false
+     */
     isChecked?: boolean;
+    /**
+     * If `true`, the checkbox will be indeterminate.
+     *
+     * @default false
+     */
     isIndeterminate?: boolean;
+    /**
+     * The callback invoked when the checked state changes.
+     */
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The callback invoked when the checkbox is focused.
+     */
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * The callback invoked when the checkbox is blurred.
+     */
     onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * The tab-index property of the underlying input element.
+     */
     tabIndex?: number;
 };
 declare const useCheckbox: <Y extends string | number = string>(props: UseCheckboxProps<Y>) => {
@@ -28,32 +64,88 @@ declare const useCheckbox: <Y extends string | number = string>(props: UseCheckb
     getInputProps: PropGetter;
     getLabelProps: PropGetter;
 };
+type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
 type CheckboxOptions = {
+    /**
+     * Props for icon component.
+     */
     iconProps?: Omit<HTMLUIProps<'span'>, 'children'> & {
         children: ReactElement;
     };
+    /**
+     * Props for input element.
+     */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Props for label element.
+     */
     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">, "defaultChecked" | "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | keyof FormControlOptions | "name" | "value" | "isChecked" | "isIndeterminate" | "checked"> & ThemeProps<"Checkbox"> & FormControlOptions & {
+declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "id" | "onFocus" | "onBlur" | keyof FormControlOptions | "name" | "value" | "defaultChecked" | "tabIndex" | "isIndeterminate" | "isChecked" | "onChange" | "checked"> & ThemeProps<"Checkbox"> & FormControlOptions & {
+    /**
+     * id assigned to input.
+     */
     id?: string | undefined;
+    /**
+     * The HTML `name` attribute used for forms.
+     */
     name?: string | undefined;
+    /**
+     * The value to be used in the checkbox input.
+     */
     value?: Y | undefined;
+    /**
+     * If `true`, the checkbox will be initially checked.
+     *
+     * @default false
+     */
     defaultChecked?: boolean | undefined;
+    /**
+     * If `true`, the checkbox will be checked.
+     *
+     * @default false
+     */
     isChecked?: boolean | undefined;
+    /**
+     * If `true`, the checkbox will be indeterminate.
+     *
+     * @default false
+     */
     isIndeterminate?: boolean | undefined;
+    /**
+     * The callback invoked when the checked state changes.
+     */
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * The callback invoked when the checkbox is focused.
+     */
     onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
+    /**
+     * The callback invoked when the checkbox is blurred.
+     */
     onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+    /**
+     * The tab-index property of the underlying input element.
+     */
     tabIndex?: number | undefined;
 } & CheckboxOptions & {
     ref?: Ref<HTMLInputElement> | undefined;
 }) => JSX.Element) & ComponentArgs;
 type CheckboxIconProps = HTMLUIProps<'svg'> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
+    /**
+     * If `true`, the icon will be indeterminate.
+     *
+     * @default false
+     */
     isIndeterminate?: boolean;
+    /**
+     * If `true`, the icon will be checked.
+     *
+     * @default false
+     */
     isChecked?: boolean;
 };
 declare const CheckboxIcon: FC<CheckboxIconProps>;
 
-export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, useCheckbox };
+export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox };

package/dist/checkbox.mjs

@@ -2,7 +2,7 @@ import {
   Checkbox,
   CheckboxIcon,
   useCheckbox
-} from "./chunk-H7YAGSVR.mjs";
+} from "./chunk-EHSLGZE4.mjs";
 import "./chunk-VWDV5UM7.mjs";
 export {
   Checkbox,

package/dist/index.d.ts

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

package/dist/index.js

@@ -24,19 +24,119 @@ __export(src_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CheckboxIcon: () => CheckboxIcon,
   useCheckbox: () => useCheckbox,
-  useCheckboxGroup: () => useCheckboxGroup,
-  useCheckboxGroupContext: () => useCheckboxGroupContext
+  useCheckboxGroup: () => useCheckboxGroup
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/checkbox.tsx
 var import_core = require("@yamada-ui/core");
-var import_form_control = require("@yamada-ui/form-control");
+var import_form_control2 = 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_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/checkbox-group.tsx
+var import_form_control = require("@yamada-ui/form-control");
+var import_layouts = require("@yamada-ui/layouts");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
 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 useCheckboxGroup = ({
+  isNative,
+  ...props
+}) => {
+  props.onChange = (0, import_utils.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)(
+    (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 = (0, import_react.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] = (0, import_utils.createContext)(
+  {
+    strict: false,
+    name: "CheckboxGroupContext"
+  }
+);
+var CheckboxGroup = (0, import_react.forwardRef)(
+  ({
+    className,
+    size,
+    variant,
+    colorScheme,
+    children,
+    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)(
+      CheckboxGroupProvider,
+      {
+        value: {
+          size,
+          variant,
+          colorScheme,
+          isRequired,
+          isReadOnly,
+          isDisabled,
+          isInvalid,
+          value,
+          onChange
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_layouts.Flex,
+          {
+            ref,
+            className: (0, import_utils.cx)("ui-checkbox-group", className),
+            role: "group",
+            direction,
+            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
+            ...(0, import_utils.omitObject)(props, [
+              "value",
+              "defaultValue",
+              "onChange",
+              "isInvalid",
+              "isDisabled",
+              "isRequired",
+              "isReadOnly"
+            ]),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/checkbox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var useCheckbox = (props) => {
   const {
     id,
@@ -49,17 +149,17 @@ var useCheckbox = (props) => {
     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);
+  } = (0, import_form_control2.useFormControlProps)(props);
+  const [isFocusVisible, setIsFocusVisible] = (0, import_react2.useState)(false);
+  const [isFocused, setFocused] = (0, import_react2.useState)(false);
+  const [isHovered, setHovered] = (0, import_react2.useState)(false);
+  const [isActive, setActive] = (0, import_react2.useState)(false);
+  const inputRef = (0, import_react2.useRef)(null);
+  const [isLabel, setIsLabel] = (0, import_react2.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react2.useState)(!!defaultChecked);
   const isControlled = props.isChecked !== void 0;
   const checked = isControlled ? props.isChecked : isChecked;
-  const onChange = (0, import_utils.useCallbackRef)(
+  const onChange = (0, import_utils2.useCallbackRef)(
     (ev) => {
       var _a;
       if (readOnly || disabled) {
@@ -72,55 +172,55 @@ var useCheckbox = (props) => {
     },
     [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)(
+  const onBlur = (0, import_utils2.useCallbackRef)(rest.onBlur);
+  const onFocus = (0, import_utils2.useCallbackRef)(rest.onFocus);
+  const onKeyDown = (0, import_react2.useCallback)(
     ({ key }) => {
       if (key === " ")
         setActive(true);
     },
     [setActive]
   );
-  const onKeyUp = (0, import_react.useCallback)(
+  const onKeyUp = (0, import_react2.useCallback)(
     ({ key }) => {
       if (key === " ")
         setActive(false);
     },
     [setActive]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
   }, []);
-  (0, import_utils.useSafeLayoutEffect)(() => {
+  (0, import_utils2.useSafeLayoutEffect)(() => {
     if (inputRef.current)
       inputRef.current.indeterminate = Boolean(isIndeterminate);
   }, [isIndeterminate]);
-  (0, import_utils.useUpdateEffect)(() => {
+  (0, import_utils2.useUpdateEffect)(() => {
     if (disabled)
       setFocused(false);
   }, [disabled, setFocused]);
-  (0, import_utils.useSafeLayoutEffect)(() => {
+  (0, import_utils2.useSafeLayoutEffect)(() => {
     var _a;
     if (!((_a = inputRef.current) == null ? void 0 : _a.form))
       return;
     inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
-  (0, import_utils.useSafeLayoutEffect)(() => {
+  (0, import_utils2.useSafeLayoutEffect)(() => {
     if (!inputRef.current)
       return;
     if (inputRef.current.checked !== checked)
       setIsChecked(inputRef.current.checked);
   }, [inputRef.current]);
-  const getContainerProps = (0, import_react.useCallback)(
+  const getContainerProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
       ...props2,
-      ref: (0, import_utils.mergeRefs)(ref, (el) => {
+      ref: (0, import_utils2.mergeRefs)(ref, (el) => {
         if (el)
           setIsLabel(el.tagName === "LABEL");
       }),
-      "data-checked": (0, import_utils.dataAttr)(checked),
-      onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
+      "data-checked": (0, import_utils2.dataAttr)(checked),
+      onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
         var _a;
         if (isLabel)
           return;
@@ -133,34 +233,34 @@ var useCheckbox = (props) => {
     }),
     [checked, isLabel, rest]
   );
-  const getIconProps = (0, import_react.useCallback)(
+  const getIconProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.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),
+      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-hover": (0, import_utils2.dataAttr)(isHovered),
+      "data-checked": (0, import_utils2.dataAttr)(checked),
+      "data-focus": (0, import_utils2.dataAttr)(isFocused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "data-indeterminate": (0, import_utils2.dataAttr)(isIndeterminate),
       "aria-hidden": true,
-      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
+      onMouseDown: (0, import_utils2.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))
+      onMouseUp: (0, import_utils2.handlerAll)(props2.onMouseUp, () => setActive(false)),
+      onMouseEnter: (0, import_utils2.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
+      onMouseLeave: (0, import_utils2.handlerAll)(props2.onMouseLeave, () => setHovered(false))
     }),
     [isActive, checked, isFocused, isHovered, isFocusVisible, isIndeterminate, rest]
   );
-  const getInputProps = (0, import_react.useCallback)(
+  const getInputProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
       ...props2,
-      ref: (0, import_utils.mergeRefs)(inputRef, ref),
+      ref: (0, import_utils2.mergeRefs)(inputRef, ref),
       id,
       type: "checkbox",
       name,
@@ -181,11 +281,11 @@ var useCheckbox = (props) => {
         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)
+      onChange: (0, import_utils2.handlerAll)(props2.onChange, onChange),
+      onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
+      onFocus: (0, import_utils2.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
+      onKeyDown: (0, import_utils2.handlerAll)(props2.onKeyDown, onKeyDown),
+      onKeyUp: (0, import_utils2.handlerAll)(props2.onKeyUp, onKeyUp)
     }),
     [
       rest,
@@ -204,17 +304,17 @@ var useCheckbox = (props) => {
       onKeyUp
     ]
   );
-  const getLabelProps = (0, import_react.useCallback)(
+  const getLabelProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
       ...props2,
       ref,
-      "data-checked": (0, import_utils.dataAttr)(checked),
-      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
+      "data-checked": (0, import_utils2.dataAttr)(checked),
+      onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
       }),
-      onTouchStart: (0, import_utils.handlerAll)(props2.onTouchStart, (ev) => {
+      onTouchStart: (0, import_utils2.handlerAll)(props2.onTouchStart, (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
       })
@@ -234,13 +334,13 @@ var useCheckbox = (props) => {
     getLabelProps
   };
 };
-var Checkbox = (0, import_react.forwardRef)(
+var Checkbox = (0, import_react2.forwardRef)(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
     const group = useCheckboxGroupContext();
-    const control = (0, import_form_control.useFormControl)(props);
+    const control = (0, import_form_control2.useFormControl)(props);
     const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Checkbox", {
-      ...group ? (0, import_utils.omitObject)(group, ["value"]) : {},
+      ...group ? (0, import_utils2.omitObject)(group, ["value"]) : {},
       ...props
     });
     const {
@@ -270,9 +370,9 @@ var Checkbox = (0, import_react.forwardRef)(
       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
+      onChange: (group == null ? void 0 : group.onChange) && rest.value ? (0, import_utils2.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, {}), {
+    const cloneIcon = (0, import_react2.cloneElement)((_e = iconProps == null ? void 0 : iconProps.children) != null ? _e : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckboxIcon, {}), {
       __css: {
         opacity: isChecked || isIndeterminate ? 1 : 0,
         transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
@@ -286,10 +386,10 @@ var Checkbox = (0, import_react.forwardRef)(
       isDisabled,
       isInvalid
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_core.ui.label,
       {
-        className: (0, import_utils.cx)("ui-checkbox", className),
+        className: (0, import_utils2.cx)("ui-checkbox", className),
         ...getContainerProps(),
         __css: {
           cursor: "pointer",
@@ -300,7 +400,7 @@ var Checkbox = (0, import_react.forwardRef)(
           gap,
           ...styles.container
         },
-        ...(0, import_utils.omitObject)(rest, [
+        ...(0, import_utils2.omitObject)(rest, [
           "id",
           "name",
           "value",
@@ -314,8 +414,8 @@ var Checkbox = (0, import_react.forwardRef)(
           "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)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.ui.input, { className: "ui-checkbox-input", ...getInputProps(inputProps, ref) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.span,
             {
               className: "ui-checkbox-icon",
@@ -326,11 +426,11 @@ var Checkbox = (0, import_react.forwardRef)(
                 userSelect: "none",
                 ...styles.icon
               },
-              ...getIconProps((0, import_utils.omitObject)(iconProps != null ? iconProps : { children: void 0 }, ["children"])),
+              ...getIconProps((0, import_utils2.omitObject)(iconProps != null ? iconProps : { children: void 0 }, ["children"])),
               children: cloneIcon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core.ui.span,
             {
               className: "ui-checkbox-label",
@@ -354,7 +454,7 @@ var CheckboxIcon = ({
   isInvalid,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_core.ui.div,
     {
       __css: {
@@ -363,7 +463,7 @@ var CheckboxIcon = ({
         left: "50%",
         transform: "translate(-50%, -50%)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_core.ui.div,
         {
           as: import_motion.motion.div,
@@ -379,14 +479,14 @@ var CheckboxIcon = ({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { ...rest })
+          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, { ...rest })
         }
       )
     }
   ) : null });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_core.ui.svg,
     {
       as: import_motion.motion.svg,
@@ -410,12 +510,12 @@ var CheckIcon = (props) => {
         strokeDasharray: 16
       },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "1.5 6 4.5 9 10.5 1" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "1.5 6 4.5 9 10.5 1" })
     }
   );
 };
 var IndeterminateIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_core.ui.svg,
     {
       as: import_motion.motion.svg,
@@ -437,115 +537,15 @@ var IndeterminateIcon = (props) => {
       },
       style: { stroke: "currentColor", strokeWidth: 4 },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
     }
   );
 };
-
-// src/checkbox-group.tsx
-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");
-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_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_react2.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 = (0, import_react2.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] = (0, import_utils2.createContext)(
-  {
-    strict: false,
-    name: "CheckboxGroupContext"
-  }
-);
-var CheckboxGroup = (0, import_react2.forwardRef)(
-  ({
-    className,
-    size,
-    variant,
-    colorScheme,
-    children,
-    direction = "column",
-    gap,
-    ...props
-  }, ref) => {
-    const { value, onChange } = useCheckboxGroup(props);
-    const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control2.useFormControl)(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      CheckboxGroupProvider,
-      {
-        value: {
-          size,
-          variant,
-          colorScheme,
-          isRequired,
-          isReadOnly,
-          isDisabled,
-          isInvalid,
-          value,
-          onChange
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_layouts.Flex,
-          {
-            ref,
-            className: (0, import_utils2.cx)("ui-checkbox-group", className),
-            role: "group",
-            direction,
-            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
-            ...(0, import_utils2.omitObject)(props, [
-              "value",
-              "defaultValue",
-              "onChange",
-              "isInvalid",
-              "isDisabled",
-              "isRequired",
-              "isReadOnly"
-            ]),
-            children
-          }
-        )
-      }
-    );
-  }
-);
-CheckboxGroup.displayName = "CheckboxGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Checkbox,
   CheckboxGroup,
   CheckboxIcon,
   useCheckbox,
-  useCheckboxGroup,
-  useCheckboxGroupContext
+  useCheckboxGroup
 });

package/dist/index.mjs

@@ -2,17 +2,15 @@ import {
   Checkbox,
   CheckboxIcon,
   useCheckbox
-} from "./chunk-H7YAGSVR.mjs";
+} from "./chunk-EHSLGZE4.mjs";
 import {
   CheckboxGroup,
-  useCheckboxGroup,
-  useCheckboxGroupContext
+  useCheckboxGroup
 } from "./chunk-VWDV5UM7.mjs";
 export {
   Checkbox,
   CheckboxGroup,
   CheckboxIcon,
   useCheckbox,
-  useCheckboxGroup,
-  useCheckboxGroupContext
+  useCheckboxGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/checkbox",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "description": "Yamada UI checkbox component",
   "keywords": [
     "yamada",
@@ -35,11 +35,11 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.3.0",
+    "@yamada-ui/core": "0.3.1",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/layouts": "0.1.11",
-    "@yamada-ui/form-control": "0.1.11",
-    "@yamada-ui/motion": "0.1.11",
+    "@yamada-ui/layouts": "0.2.0",
+    "@yamada-ui/form-control": "0.2.0",
+    "@yamada-ui/motion": "0.2.0",
     "@yamada-ui/use-focus-visible": "0.1.1",
     "@yamada-ui/use-controllable-state": "0.1.2"
   },
@@ -75,6 +75,6 @@
     "build:fast": "tsup src",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
-    "gen:types": "tsx ../../../scripts/generate-types"
+    "gen:docs": "tsx ../../../scripts/generate-docs"
   }
 }