@yamada-ui/checkbox - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1-dev-20241201043349

dist/checkbox-card-group.js

@@ -71,6 +71,9 @@ "use client"
   id != null ? id : id = uuid;
-  const {
+  let {
     id: _id,
     name,
+    checked: checkedProp,
+    defaultChecked,
     defaultIsChecked,
+    indeterminate,
     isChecked: isCheckedProp,
@@ -84,2 +87,5 @@ isIndeterminate,
   } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
   const [
@@ -97,11 +103,11 @@ {
   ] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const [isHovered, setHovered] = (0, import_react.useState)(false);
-  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [active, 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)(!!defaultIsChecked);
-  const isControlled = isCheckedProp !== void 0;
-  const checked = isControlled ? isCheckedProp : isChecked;
+  const [label, setLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const controlled = checkedProp !== void 0;
+  const checked = controlled ? checkedProp : isChecked;
   const onChange = (0, import_utils2.useCallbackRef)(
@@ -113,7 +119,7 @@ (ev) => {
       }
-      if (!isControlled)
-        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      if (!controlled)
+        setIsChecked(!checked || indeterminate ? true : ev.target.checked);
       onChangeProp == null ? void 0 : onChangeProp(ev);
     },
-    [readOnly, disabled, isControlled, checked, isIndeterminate]
+    [readOnly, disabled, controlled, checked, indeterminate]
   );
@@ -137,3 +143,3 @@ const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
   (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
   }, []);
@@ -150,3 +156,3 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
     if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
-    inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked);
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
@@ -163,10 +169,10 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
       ref: (0, import_utils2.mergeRefs)(ref, (el) => {
-        if (el) setIsLabel(el.tagName === "LABEL");
+        if (el) setLabel(el.tagName === "LABEL");
       }),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
         var _a;
-        if (isLabel) return;
+        if (label) return;
         (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -179,3 +185,3 @@ requestAnimationFrame(() => {
     }),
-    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
+    [checked, label, focused, focusVisible, formControlProps]
   );
@@ -188,10 +194,10 @@ const getIconProps = (0, import_react.useCallback)(
       "aria-hidden": true,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-active": (0, import_utils2.dataAttr)(active),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
-      "data-hover": (0, import_utils2.dataAttr)(isHovered),
-      "data-indeterminate": (0, import_utils2.dataAttr)(isIndeterminate),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
+      "data-hover": (0, import_utils2.dataAttr)(hovered),
+      "data-indeterminate": (0, import_utils2.dataAttr)(indeterminate),
       onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
-        if (isFocused) ev.preventDefault();
+        if (focused) ev.preventDefault();
         setActive(true);
@@ -204,8 +210,8 @@ }),
     [
-      isActive,
+      active,
       checked,
-      isFocused,
-      isHovered,
-      isFocusVisible,
-      isIndeterminate,
+      focused,
+      hovered,
+      focusVisible,
+      indeterminate,
       formControlProps
@@ -233,3 +239,3 @@ ]
       },
-      "aria-checked": isIndeterminate ? "mixed" : checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       checked,
@@ -248,3 +254,3 @@ disabled,
     [
-      isIndeterminate,
+      indeterminate,
       formControlProps,
@@ -284,7 +290,31 @@ id,
   return {
-    isActive,
+    active,
+    checked,
+    focused,
+    focusVisible,
+    hovered,
+    indeterminate,
+    /**
+     * @deprecated Use `active` instead.
+     */
+    isActive: active,
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: checked,
-    isFocused,
-    isFocusVisible,
-    isHovered,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
+    isFocusVisible: focusVisible,
+    /**
+     * @deprecated Use `hovered` instead.
+     */
+    isHovered: hovered,
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate,
@@ -328,4 +358,4 @@ props: rest,
     const {
-      isChecked,
-      isIndeterminate,
+      checked,
+      indeterminate,
       props: rest,
@@ -347,5 +377,5 @@ getContainerProps,
     const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
-      isChecked,
+      checked,
+      indeterminate,
       isDisabled,
-      isIndeterminate,
       isInvalid,
@@ -355,4 +385,4 @@ isReadOnly,
       __css: {
-        opacity: isChecked || isIndeterminate ? 1 : 0,
-        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        opacity: checked || indeterminate ? 1 : 0,
+        transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
         transitionDuration: "normal",
@@ -416,2 +446,4 @@ transitionProperty: "transform"
 var CheckboxIcon = ({
+  checked,
+  indeterminate,
   isChecked,
@@ -425,3 +457,5 @@ isDisabled: _isDisabled,
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  checked != null ? checked : checked = isChecked;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.div,
@@ -450,3 +484,3 @@ {
           },
-          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
+          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
         }
@@ -453,0 +487,0 @@ )

dist/checkbox-card.js

@@ -65,6 +65,9 @@ "use client"
   id != null ? id : id = uuid;
-  const {
+  let {
     id: _id,
     name,
+    checked: checkedProp,
+    defaultChecked,
     defaultIsChecked,
+    indeterminate,
     isChecked: isCheckedProp,
@@ -78,2 +81,5 @@ isIndeterminate,
   } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
   const [
@@ -91,11 +97,11 @@ {
   ] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const [isHovered, setHovered] = (0, import_react.useState)(false);
-  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [active, 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)(!!defaultIsChecked);
-  const isControlled = isCheckedProp !== void 0;
-  const checked = isControlled ? isCheckedProp : isChecked;
+  const [label, setLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const controlled = checkedProp !== void 0;
+  const checked = controlled ? checkedProp : isChecked;
   const onChange = (0, import_utils2.useCallbackRef)(
@@ -107,7 +113,7 @@ (ev) => {
       }
-      if (!isControlled)
-        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      if (!controlled)
+        setIsChecked(!checked || indeterminate ? true : ev.target.checked);
       onChangeProp == null ? void 0 : onChangeProp(ev);
     },
-    [readOnly, disabled, isControlled, checked, isIndeterminate]
+    [readOnly, disabled, controlled, checked, indeterminate]
   );
@@ -131,3 +137,3 @@ const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
   (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
   }, []);
@@ -144,3 +150,3 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
     if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
-    inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked);
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
@@ -157,10 +163,10 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
       ref: (0, import_utils2.mergeRefs)(ref, (el) => {
-        if (el) setIsLabel(el.tagName === "LABEL");
+        if (el) setLabel(el.tagName === "LABEL");
       }),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
         var _a;
-        if (isLabel) return;
+        if (label) return;
         (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -173,3 +179,3 @@ requestAnimationFrame(() => {
     }),
-    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
+    [checked, label, focused, focusVisible, formControlProps]
   );
@@ -182,10 +188,10 @@ const getIconProps = (0, import_react.useCallback)(
       "aria-hidden": true,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-active": (0, import_utils2.dataAttr)(active),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
-      "data-hover": (0, import_utils2.dataAttr)(isHovered),
-      "data-indeterminate": (0, import_utils2.dataAttr)(isIndeterminate),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
+      "data-hover": (0, import_utils2.dataAttr)(hovered),
+      "data-indeterminate": (0, import_utils2.dataAttr)(indeterminate),
       onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
-        if (isFocused) ev.preventDefault();
+        if (focused) ev.preventDefault();
         setActive(true);
@@ -198,8 +204,8 @@ }),
     [
-      isActive,
+      active,
       checked,
-      isFocused,
-      isHovered,
-      isFocusVisible,
-      isIndeterminate,
+      focused,
+      hovered,
+      focusVisible,
+      indeterminate,
       formControlProps
@@ -227,3 +233,3 @@ ]
       },
-      "aria-checked": isIndeterminate ? "mixed" : checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       checked,
@@ -242,3 +248,3 @@ disabled,
     [
-      isIndeterminate,
+      indeterminate,
       formControlProps,
@@ -278,7 +284,31 @@ id,
   return {
-    isActive,
+    active,
+    checked,
+    focused,
+    focusVisible,
+    hovered,
+    indeterminate,
+    /**
+     * @deprecated Use `active` instead.
+     */
+    isActive: active,
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: checked,
-    isFocused,
-    isFocusVisible,
-    isHovered,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
+    isFocusVisible: focusVisible,
+    /**
+     * @deprecated Use `hovered` instead.
+     */
+    isHovered: hovered,
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate,
@@ -322,4 +352,4 @@ props: rest,
     const {
-      isChecked,
-      isIndeterminate,
+      checked,
+      indeterminate,
       props: rest,
@@ -341,5 +371,5 @@ getContainerProps,
     const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
-      isChecked,
+      checked,
+      indeterminate,
       isDisabled,
-      isIndeterminate,
       isInvalid,
@@ -349,4 +379,4 @@ isReadOnly,
       __css: {
-        opacity: isChecked || isIndeterminate ? 1 : 0,
-        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        opacity: checked || indeterminate ? 1 : 0,
+        transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
         transitionDuration: "normal",
@@ -410,2 +440,4 @@ transitionProperty: "transform"
 var CheckboxIcon = ({
+  checked,
+  indeterminate,
   isChecked,
@@ -419,3 +451,5 @@ isDisabled: _isDisabled,
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  checked != null ? checked : checked = isChecked;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.div,
@@ -444,3 +478,3 @@ {
           },
-          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
+          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
         }
@@ -447,0 +481,0 @@ )

dist/checkbox-group.js

@@ -65,6 +65,9 @@ "use client"
   id != null ? id : id = uuid;
-  const {
+  let {
     id: _id,
     name,
+    checked: checkedProp,
+    defaultChecked,
     defaultIsChecked,
+    indeterminate,
     isChecked: isCheckedProp,
@@ -78,2 +81,5 @@ isIndeterminate,
   } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
   const [
@@ -91,11 +97,11 @@ {
   ] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const [isHovered, setHovered] = (0, import_react.useState)(false);
-  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [active, 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)(!!defaultIsChecked);
-  const isControlled = isCheckedProp !== void 0;
-  const checked = isControlled ? isCheckedProp : isChecked;
+  const [label, setLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const controlled = checkedProp !== void 0;
+  const checked = controlled ? checkedProp : isChecked;
   const onChange = (0, import_utils2.useCallbackRef)(
@@ -107,7 +113,7 @@ (ev) => {
       }
-      if (!isControlled)
-        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      if (!controlled)
+        setIsChecked(!checked || indeterminate ? true : ev.target.checked);
       onChangeProp == null ? void 0 : onChangeProp(ev);
     },
-    [readOnly, disabled, isControlled, checked, isIndeterminate]
+    [readOnly, disabled, controlled, checked, indeterminate]
   );
@@ -131,3 +137,3 @@ const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
   (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
   }, []);
@@ -144,3 +150,3 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
     if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
-    inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked);
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
@@ -157,10 +163,10 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
       ref: (0, import_utils2.mergeRefs)(ref, (el) => {
-        if (el) setIsLabel(el.tagName === "LABEL");
+        if (el) setLabel(el.tagName === "LABEL");
       }),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
         var _a;
-        if (isLabel) return;
+        if (label) return;
         (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -173,3 +179,3 @@ requestAnimationFrame(() => {
     }),
-    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
+    [checked, label, focused, focusVisible, formControlProps]
   );
@@ -182,10 +188,10 @@ const getIconProps = (0, import_react.useCallback)(
       "aria-hidden": true,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-active": (0, import_utils2.dataAttr)(active),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
-      "data-hover": (0, import_utils2.dataAttr)(isHovered),
-      "data-indeterminate": (0, import_utils2.dataAttr)(isIndeterminate),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
+      "data-hover": (0, import_utils2.dataAttr)(hovered),
+      "data-indeterminate": (0, import_utils2.dataAttr)(indeterminate),
       onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
-        if (isFocused) ev.preventDefault();
+        if (focused) ev.preventDefault();
         setActive(true);
@@ -198,8 +204,8 @@ }),
     [
-      isActive,
+      active,
       checked,
-      isFocused,
-      isHovered,
-      isFocusVisible,
-      isIndeterminate,
+      focused,
+      hovered,
+      focusVisible,
+      indeterminate,
       formControlProps
@@ -227,3 +233,3 @@ ]
       },
-      "aria-checked": isIndeterminate ? "mixed" : checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       checked,
@@ -242,3 +248,3 @@ disabled,
     [
-      isIndeterminate,
+      indeterminate,
       formControlProps,
@@ -278,7 +284,31 @@ id,
   return {
-    isActive,
+    active,
+    checked,
+    focused,
+    focusVisible,
+    hovered,
+    indeterminate,
+    /**
+     * @deprecated Use `active` instead.
+     */
+    isActive: active,
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: checked,
-    isFocused,
-    isFocusVisible,
-    isHovered,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
+    isFocusVisible: focusVisible,
+    /**
+     * @deprecated Use `hovered` instead.
+     */
+    isHovered: hovered,
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate,
@@ -322,4 +352,4 @@ props: rest,
     const {
-      isChecked,
-      isIndeterminate,
+      checked,
+      indeterminate,
       props: rest,
@@ -341,5 +371,5 @@ getContainerProps,
     const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
-      isChecked,
+      checked,
+      indeterminate,
       isDisabled,
-      isIndeterminate,
       isInvalid,
@@ -349,4 +379,4 @@ isReadOnly,
       __css: {
-        opacity: isChecked || isIndeterminate ? 1 : 0,
-        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        opacity: checked || indeterminate ? 1 : 0,
+        transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
         transitionDuration: "normal",
@@ -410,2 +440,4 @@ transitionProperty: "transform"
 var CheckboxIcon = ({
+  checked,
+  indeterminate,
   isChecked,
@@ -419,3 +451,5 @@ isDisabled: _isDisabled,
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  checked != null ? checked : checked = isChecked;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.div,
@@ -444,3 +478,3 @@ {
           },
-          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
+          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
         }
@@ -447,0 +481,0 @@ )

dist/checkbox.d.ts

@@ -46,2 +46,16 @@ import { HTMLUIProps, ThemeProps, ComponentArgs, FC } from '@yamada-ui/core';
      */
+    checked?: boolean;
+    /**
+     * If `true`, the icon will be indeterminate.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * If `true`, the icon will be checked.
+     *
+     * @default false
+     *
+     * @deprecated Use `checked` instead.
+     */
     isChecked?: boolean;
@@ -52,2 +66,4 @@ /**
      * @default false
+     *
+     * @deprecated Use `indeterminate` instead.
      */
@@ -54,0 +70,0 @@ isIndeterminate?: boolean;

dist/checkbox.js

@@ -60,6 +60,9 @@ "use client"
   id != null ? id : id = uuid;
-  const {
+  let {
     id: _id,
     name,
+    checked: checkedProp,
+    defaultChecked,
     defaultIsChecked,
+    indeterminate,
     isChecked: isCheckedProp,
@@ -73,2 +76,5 @@ isIndeterminate,
   } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
   const [
@@ -86,11 +92,11 @@ {
   ] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const [isHovered, setHovered] = (0, import_react.useState)(false);
-  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [active, 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)(!!defaultIsChecked);
-  const isControlled = isCheckedProp !== void 0;
-  const checked = isControlled ? isCheckedProp : isChecked;
+  const [label, setLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const controlled = checkedProp !== void 0;
+  const checked = controlled ? checkedProp : isChecked;
   const onChange = (0, import_utils2.useCallbackRef)(
@@ -102,7 +108,7 @@ (ev) => {
       }
-      if (!isControlled)
-        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      if (!controlled)
+        setIsChecked(!checked || indeterminate ? true : ev.target.checked);
       onChangeProp == null ? void 0 : onChangeProp(ev);
     },
-    [readOnly, disabled, isControlled, checked, isIndeterminate]
+    [readOnly, disabled, controlled, checked, indeterminate]
   );
@@ -126,3 +132,3 @@ const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
   (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
   }, []);
@@ -139,3 +145,3 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
     if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
-    inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked);
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
@@ -152,10 +158,10 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
       ref: (0, import_utils2.mergeRefs)(ref, (el) => {
-        if (el) setIsLabel(el.tagName === "LABEL");
+        if (el) setLabel(el.tagName === "LABEL");
       }),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
         var _a;
-        if (isLabel) return;
+        if (label) return;
         (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -168,3 +174,3 @@ requestAnimationFrame(() => {
     }),
-    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
+    [checked, label, focused, focusVisible, formControlProps]
   );
@@ -177,10 +183,10 @@ const getIconProps = (0, import_react.useCallback)(
       "aria-hidden": true,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-active": (0, import_utils2.dataAttr)(active),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
-      "data-hover": (0, import_utils2.dataAttr)(isHovered),
-      "data-indeterminate": (0, import_utils2.dataAttr)(isIndeterminate),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
+      "data-hover": (0, import_utils2.dataAttr)(hovered),
+      "data-indeterminate": (0, import_utils2.dataAttr)(indeterminate),
       onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
-        if (isFocused) ev.preventDefault();
+        if (focused) ev.preventDefault();
         setActive(true);
@@ -193,8 +199,8 @@ }),
     [
-      isActive,
+      active,
       checked,
-      isFocused,
-      isHovered,
-      isFocusVisible,
-      isIndeterminate,
+      focused,
+      hovered,
+      focusVisible,
+      indeterminate,
       formControlProps
@@ -222,3 +228,3 @@ ]
       },
-      "aria-checked": isIndeterminate ? "mixed" : checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       checked,
@@ -237,3 +243,3 @@ disabled,
     [
-      isIndeterminate,
+      indeterminate,
       formControlProps,
@@ -273,7 +279,31 @@ id,
   return {
-    isActive,
+    active,
+    checked,
+    focused,
+    focusVisible,
+    hovered,
+    indeterminate,
+    /**
+     * @deprecated Use `active` instead.
+     */
+    isActive: active,
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: checked,
-    isFocused,
-    isFocusVisible,
-    isHovered,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
+    isFocusVisible: focusVisible,
+    /**
+     * @deprecated Use `hovered` instead.
+     */
+    isHovered: hovered,
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate,
@@ -317,4 +347,4 @@ props: rest,
     const {
-      isChecked,
-      isIndeterminate,
+      checked,
+      indeterminate,
       props: rest,
@@ -336,5 +366,5 @@ getContainerProps,
     const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
-      isChecked,
+      checked,
+      indeterminate,
       isDisabled,
-      isIndeterminate,
       isInvalid,
@@ -344,4 +374,4 @@ isReadOnly,
       __css: {
-        opacity: isChecked || isIndeterminate ? 1 : 0,
-        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        opacity: checked || indeterminate ? 1 : 0,
+        transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
         transitionDuration: "normal",
@@ -405,2 +435,4 @@ transitionProperty: "transform"
 var CheckboxIcon = ({
+  checked,
+  indeterminate,
   isChecked,
@@ -414,3 +446,5 @@ isDisabled: _isDisabled,
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  checked != null ? checked : checked = isChecked;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.div,
@@ -439,3 +473,3 @@ {
           },
-          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
+          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
         }
@@ -442,0 +476,0 @@ )

dist/index.js

@@ -70,6 +70,9 @@ "use client"
   id != null ? id : id = uuid;
-  const {
+  let {
     id: _id,
     name,
+    checked: checkedProp,
+    defaultChecked,
     defaultIsChecked,
+    indeterminate,
     isChecked: isCheckedProp,
@@ -83,2 +86,5 @@ isIndeterminate,
   } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
   const [
@@ -96,11 +102,11 @@ {
   ] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const [isHovered, setHovered] = (0, import_react.useState)(false);
-  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [active, 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)(!!defaultIsChecked);
-  const isControlled = isCheckedProp !== void 0;
-  const checked = isControlled ? isCheckedProp : isChecked;
+  const [label, setLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const controlled = checkedProp !== void 0;
+  const checked = controlled ? checkedProp : isChecked;
   const onChange = (0, import_utils2.useCallbackRef)(
@@ -112,7 +118,7 @@ (ev) => {
       }
-      if (!isControlled)
-        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      if (!controlled)
+        setIsChecked(!checked || indeterminate ? true : ev.target.checked);
       onChangeProp == null ? void 0 : onChangeProp(ev);
     },
-    [readOnly, disabled, isControlled, checked, isIndeterminate]
+    [readOnly, disabled, controlled, checked, indeterminate]
   );
@@ -136,3 +142,3 @@ const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
   (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
   }, []);
@@ -149,3 +155,3 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
     if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
-    inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked);
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
@@ -162,10 +168,10 @@ (0, import_utils2.useSafeLayoutEffect)(() => {
       ref: (0, import_utils2.mergeRefs)(ref, (el) => {
-        if (el) setIsLabel(el.tagName === "LABEL");
+        if (el) setLabel(el.tagName === "LABEL");
       }),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
         var _a;
-        if (isLabel) return;
+        if (label) return;
         (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -178,3 +184,3 @@ requestAnimationFrame(() => {
     }),
-    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
+    [checked, label, focused, focusVisible, formControlProps]
   );
@@ -187,10 +193,10 @@ const getIconProps = (0, import_react.useCallback)(
       "aria-hidden": true,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-active": (0, import_utils2.dataAttr)(active),
       "data-checked": (0, import_utils2.dataAttr)(checked),
-      "data-focus": (0, import_utils2.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
-      "data-hover": (0, import_utils2.dataAttr)(isHovered),
-      "data-indeterminate": (0, import_utils2.dataAttr)(isIndeterminate),
+      "data-focus": (0, import_utils2.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
+      "data-hover": (0, import_utils2.dataAttr)(hovered),
+      "data-indeterminate": (0, import_utils2.dataAttr)(indeterminate),
       onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
-        if (isFocused) ev.preventDefault();
+        if (focused) ev.preventDefault();
         setActive(true);
@@ -203,8 +209,8 @@ }),
     [
-      isActive,
+      active,
       checked,
-      isFocused,
-      isHovered,
-      isFocusVisible,
-      isIndeterminate,
+      focused,
+      hovered,
+      focusVisible,
+      indeterminate,
       formControlProps
@@ -232,3 +238,3 @@ ]
       },
-      "aria-checked": isIndeterminate ? "mixed" : checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       checked,
@@ -247,3 +253,3 @@ disabled,
     [
-      isIndeterminate,
+      indeterminate,
       formControlProps,
@@ -283,7 +289,31 @@ id,
   return {
-    isActive,
+    active,
+    checked,
+    focused,
+    focusVisible,
+    hovered,
+    indeterminate,
+    /**
+     * @deprecated Use `active` instead.
+     */
+    isActive: active,
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: checked,
-    isFocused,
-    isFocusVisible,
-    isHovered,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
+    isFocusVisible: focusVisible,
+    /**
+     * @deprecated Use `hovered` instead.
+     */
+    isHovered: hovered,
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate,
@@ -327,4 +357,4 @@ props: rest,
     const {
-      isChecked,
-      isIndeterminate,
+      checked,
+      indeterminate,
       props: rest,
@@ -346,5 +376,5 @@ getContainerProps,
     const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
-      isChecked,
+      checked,
+      indeterminate,
       isDisabled,
-      isIndeterminate,
       isInvalid,
@@ -354,4 +384,4 @@ isReadOnly,
       __css: {
-        opacity: isChecked || isIndeterminate ? 1 : 0,
-        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        opacity: checked || indeterminate ? 1 : 0,
+        transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
         transitionDuration: "normal",
@@ -415,2 +445,4 @@ transitionProperty: "transform"
 var CheckboxIcon = ({
+  checked,
+  indeterminate,
   isChecked,
@@ -424,3 +456,5 @@ isDisabled: _isDisabled,
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  checked != null ? checked : checked = isChecked;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.div,
@@ -449,3 +483,3 @@ {
           },
-          children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
+          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
         }
@@ -452,0 +486,0 @@ )

dist/use-checkbox-group.d.ts

@@ -24,2 +24,4 @@ import * as react from 'react';
      * @default false
+     *
+     * @deprecated It will be deprecated in version 2.0.
      */
@@ -26,0 +28,0 @@ isNative?: boolean;

dist/use-checkbox.d.ts

@@ -18,2 +18,8 @@ import * as react from 'react';
     /**
+     * If `true`, the checkbox will be checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
      * If `true`, the checkbox will be initially checked.
@@ -23,7 +29,23 @@ *
      */
+    defaultChecked?: boolean;
+    /**
+     * If `true`, the checkbox will be initially checked.
+     *
+     * @default false
+     *
+     * @deprecated Use `defaultChecked` instead.
+     */
     defaultIsChecked?: boolean;
     /**
+     * If `true`, the checkbox will be indeterminate.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
      * If `true`, the checkbox will be checked.
      *
      * @default false
+     *
+     * @deprecated Use `checked` instead.
      */
@@ -35,2 +57,4 @@ isChecked?: boolean;
      * @default false
+     *
+     * @deprecated Use `indeterminate` instead.
      */
@@ -66,7 +90,33 @@ isIndeterminate?: boolean;
 declare const useCheckbox: <Y extends number | string = string, M extends Dict = Dict<any>>({ id, ...props }: M & UseCheckboxProps<Y>) => {
+    active: boolean;
+    checked: boolean;
+    focused: boolean;
+    focusVisible: boolean;
+    hovered: boolean;
+    indeterminate: ({
+        id: string;
+    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>)["indeterminate"] | undefined;
+    /**
+     * @deprecated Use `active` instead.
+     */
     isActive: boolean;
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: boolean;
+    /**
+     * @deprecated Use `focused` instead.
+     */
     isFocused: boolean;
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
     isFocusVisible: boolean;
+    /**
+     * @deprecated Use `hovered` instead.
+     */
     isHovered: boolean;
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate: ({
@@ -94,3 +144,3 @@ id: string;
         id: string;
-    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "isInvalid" | "isReadOnly" | "isRequired">, "id" | "tabIndex" | "onChange" | "value" | "name" | "defaultIsChecked" | "isChecked" | "isIndeterminate" | "selectOnEnter">, "_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "disabled" | "readOnly" | "required" | "data-readonly">;
+    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "isInvalid" | "isReadOnly" | "isRequired">, "defaultChecked" | "id" | "tabIndex" | "onChange" | "value" | "name" | "checked" | "defaultIsChecked" | "indeterminate" | "isChecked" | "isIndeterminate" | "selectOnEnter">, "_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "disabled" | "readOnly" | "required" | "data-readonly">;
     getContainerProps: PropGetter<"label", undefined>;
@@ -97,0 +147,0 @@ getIconProps: PropGetter<"div", undefined>;

dist/use-checkbox.js

@@ -37,6 +37,9 @@ "use client"
   id != null ? id : id = uuid;
-  const {
+  let {
     id: _id,
     name,
+    checked: checkedProp,
+    defaultChecked,
     defaultIsChecked,
+    indeterminate,
     isChecked: isCheckedProp,
@@ -50,2 +53,5 @@ isIndeterminate,
   } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
   const [
@@ -63,11 +69,11 @@ {
   ] = (0, import_utils.splitObject)(computedProps, import_form_control.formControlProperties);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const [isHovered, setHovered] = (0, import_react.useState)(false);
-  const [isActive, setActive] = (0, import_react.useState)(false);
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [active, 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)(!!defaultIsChecked);
-  const isControlled = isCheckedProp !== void 0;
-  const checked = isControlled ? isCheckedProp : isChecked;
+  const [label, setLabel] = (0, import_react.useState)(true);
+  const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
+  const controlled = checkedProp !== void 0;
+  const checked = controlled ? checkedProp : isChecked;
   const onChange = (0, import_utils.useCallbackRef)(
@@ -79,7 +85,7 @@ (ev) => {
       }
-      if (!isControlled)
-        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      if (!controlled)
+        setIsChecked(!checked || indeterminate ? true : ev.target.checked);
       onChangeProp == null ? void 0 : onChangeProp(ev);
     },
-    [readOnly, disabled, isControlled, checked, isIndeterminate]
+    [readOnly, disabled, controlled, checked, indeterminate]
   );
@@ -103,3 +109,3 @@ const onFocus = (0, import_utils.useCallbackRef)(onFocusProp);
   (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
   }, []);
@@ -116,3 +122,3 @@ (0, import_utils.useSafeLayoutEffect)(() => {
     if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
-    inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked);
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
   }, []);
@@ -129,10 +135,10 @@ (0, import_utils.useSafeLayoutEffect)(() => {
       ref: (0, import_utils.mergeRefs)(ref, (el) => {
-        if (el) setIsLabel(el.tagName === "LABEL");
+        if (el) setLabel(el.tagName === "LABEL");
       }),
       "data-checked": (0, import_utils.dataAttr)(checked),
-      "data-focus": (0, import_utils.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils.dataAttr)(isFocused && isFocusVisible),
+      "data-focus": (0, import_utils.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils.dataAttr)(focused && focusVisible),
       onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
         var _a;
-        if (isLabel) return;
+        if (label) return;
         (_a = inputRef.current) == null ? void 0 : _a.click();
@@ -145,3 +151,3 @@ requestAnimationFrame(() => {
     }),
-    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
+    [checked, label, focused, focusVisible, formControlProps]
   );
@@ -154,10 +160,10 @@ const getIconProps = (0, import_react.useCallback)(
       "aria-hidden": true,
-      "data-active": (0, import_utils.dataAttr)(isActive),
+      "data-active": (0, import_utils.dataAttr)(active),
       "data-checked": (0, import_utils.dataAttr)(checked),
-      "data-focus": (0, import_utils.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_utils.dataAttr)(isFocused && isFocusVisible),
-      "data-hover": (0, import_utils.dataAttr)(isHovered),
-      "data-indeterminate": (0, import_utils.dataAttr)(isIndeterminate),
+      "data-focus": (0, import_utils.dataAttr)(focused),
+      "data-focus-visible": (0, import_utils.dataAttr)(focused && focusVisible),
+      "data-hover": (0, import_utils.dataAttr)(hovered),
+      "data-indeterminate": (0, import_utils.dataAttr)(indeterminate),
       onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
-        if (isFocused) ev.preventDefault();
+        if (focused) ev.preventDefault();
         setActive(true);
@@ -170,8 +176,8 @@ }),
     [
-      isActive,
+      active,
       checked,
-      isFocused,
-      isHovered,
-      isFocusVisible,
-      isIndeterminate,
+      focused,
+      hovered,
+      focusVisible,
+      indeterminate,
       formControlProps
@@ -199,3 +205,3 @@ ]
       },
-      "aria-checked": isIndeterminate ? "mixed" : checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       checked,
@@ -214,3 +220,3 @@ disabled,
     [
-      isIndeterminate,
+      indeterminate,
       formControlProps,
@@ -250,7 +256,31 @@ id,
   return {
-    isActive,
+    active,
+    checked,
+    focused,
+    focusVisible,
+    hovered,
+    indeterminate,
+    /**
+     * @deprecated Use `active` instead.
+     */
+    isActive: active,
+    /**
+     * @deprecated Use `checked` instead.
+     */
     isChecked: checked,
-    isFocused,
-    isFocusVisible,
-    isHovered,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `focusVisible` instead.
+     */
+    isFocusVisible: focusVisible,
+    /**
+     * @deprecated Use `hovered` instead.
+     */
+    isHovered: hovered,
+    /**
+     * @deprecated Use `indeterminate` instead.
+     */
     isIndeterminate,
@@ -257,0 +287,0 @@ props: rest,

package.json

 {
   "name": "@yamada-ui/checkbox",
-  "version": "1.3.0",
+  "version": "1.3.1-dev-20241201043349",
   "description": "Yamada UI checkbox component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

527895

increased by4.21%

Lines of code

5962

increased by5.35%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes