@seed-design/react-checkbox 0.0.0-alpha-20241030023710 → 0.0.1-rc.0

package/lib/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { type UseCheckboxProps } from "./useCheckbox";
+export interface CheckboxRootProps extends UseCheckboxProps, PrimitiveProps, React.HTMLAttributes<HTMLLabelElement> {
+}
+export declare const CheckboxRoot: React.ForwardRefExoticComponent<CheckboxRootProps & React.RefAttributes<HTMLLabelElement>>;
+export interface CheckboxControlProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckboxControl: React.ForwardRefExoticComponent<CheckboxControlProps & React.RefAttributes<HTMLDivElement>>;
+export interface CheckboxHiddenInputProps extends PrimitiveProps, React.InputHTMLAttributes<HTMLInputElement> {
+}
+export declare const CheckboxHiddenInput: React.ForwardRefExoticComponent<CheckboxHiddenInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Checkbox.namespace.d.ts

@@ -0,0 +1 @@
+export { CheckboxRoot as Root, CheckboxControl as Control, CheckboxHiddenInput as HiddenInput, type CheckboxRootProps as RootProps, type CheckboxControlProps as ControlProps, type CheckboxHiddenInputProps as HiddenInputProps, } from "./Checkbox";

package/lib/index.d.ts

@@ -1,46 +1,3 @@
-export interface UseCheckboxStateProps {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-}
-export declare function useCheckboxState(props: UseCheckboxStateProps): {
-    isChecked: boolean;
-    setIsChecked: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    isHovered: boolean;
-    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    isPressed: boolean;
-    setIsPressed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    isFocused: boolean;
-    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    isFocusVisible: boolean;
-    setIsFocusVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
-export interface UseCheckboxProps extends UseCheckboxStateProps {
-    disabled?: boolean;
-    invalid?: boolean;
-}
-export declare function useCheckbox(props: UseCheckboxProps): {
-    isChecked: boolean;
-    setIsChecked: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    isFocused: boolean;
-    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    setIsFocusVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    restProps: {};
-    stateProps: {
-        "data-checked": string;
-        "data-hover": string;
-        "data-active": string;
-        "data-focus": string;
-        "data-focus-visible": string;
-        "data-disabled": string;
-    };
-    rootProps: import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-        [x: `data-${string}`]: string;
-    };
-    controlProps: import("react").HTMLAttributes<HTMLElement> & {
-        [x: `data-${string}`]: string;
-    };
-    hiddenInputProps: import("react").InputHTMLAttributes<HTMLInputElement> & {
-        [x: `data-${string}`]: string;
-    };
-};
+export { CheckboxRoot, CheckboxControl, CheckboxHiddenInput, type CheckboxRootProps, type CheckboxControlProps, type CheckboxHiddenInputProps, } from "./Checkbox";
+export { useCheckboxContext, type UseCheckboxContext } from "./useCheckboxContext";
+export * as Checkbox from "./Checkbox.namespace";

package/lib/index.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,69 +18,103 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  useCheckbox: () => useCheckbox,
-  useCheckboxState: () => useCheckboxState
+var index_exports = {};
+__export(index_exports, {
+  Checkbox: () => Checkbox_namespace_exports,
+  CheckboxControl: () => CheckboxControl,
+  CheckboxHiddenInput: () => CheckboxHiddenInput,
+  CheckboxRoot: () => CheckboxRoot,
+  useCheckboxContext: () => useCheckboxContext
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
+
+// src/Checkbox.tsx
+var import_dom_utils2 = require("@seed-design/dom-utils");
+var import_react_primitive = require("@seed-design/react-primitive");
+var import_react3 = require("react");
+
+// src/useCheckbox.ts
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_react = require("react");
 var import_dom_utils = require("@seed-design/dom-utils");
 function useCheckboxState(props) {
-  const [isChecked, setIsChecked] = (0, import_react_use_controllable_state.useControllableState)({
+  var _a;
+  const [isChecked = false, setIsChecked] = (0, import_react_use_controllable_state.useControllableState)({
     prop: props.checked,
     defaultProp: props.defaultChecked,
     onChange: props.onCheckedChange
   });
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
-  const [isPressed, setIsPressed] = (0, import_react.useState)(false);
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react.useState)(false);
   const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const initialCheckedRef = (0, import_react.useRef)(isChecked);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    const form = (_a2 = inputRef.current) == null ? void 0 : _a2.form;
+    if (form) {
+      const reset = () => setIsChecked(initialCheckedRef.current);
+      form.addEventListener("reset", reset);
+      return () => form.removeEventListener("reset", reset);
+    }
+  }, [setIsChecked]);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = (_a2 = props.indeterminate) != null ? _a2 : false;
+  }, [props.indeterminate]);
   return {
+    refs: { input: inputRef },
+    isIndeterminate: (_a = props.indeterminate) != null ? _a : false,
     isChecked,
     setIsChecked,
     isHovered,
     setIsHovered,
-    isPressed,
-    setIsPressed,
+    isActive,
+    setIsActive,
     isFocused,
     setIsFocused,
     isFocusVisible,
     setIsFocusVisible
   };
 }
-__name(useCheckboxState, "useCheckboxState");
 function useCheckbox(props) {
-  const { checked, defaultChecked, disabled, invalid, onCheckedChange, ...restProps } = props;
   const {
+    refs,
+    isIndeterminate,
     setIsChecked,
     isChecked,
     setIsHovered,
     isHovered,
-    setIsPressed,
-    isPressed,
+    setIsActive,
+    isActive,
     setIsFocused,
     isFocused,
     setIsFocusVisible,
     isFocusVisible
   } = useCheckboxState(props);
-  const stateProps = {
+  const stateProps = (0, import_dom_utils.elementProps)({
     "data-checked": (0, import_dom_utils.dataAttr)(isChecked),
+    "data-indeterminate": (0, import_dom_utils.dataAttr)(isIndeterminate),
     "data-hover": (0, import_dom_utils.dataAttr)(isHovered),
-    "data-active": (0, import_dom_utils.dataAttr)(isPressed),
+    "data-active": (0, import_dom_utils.dataAttr)(isActive),
     "data-focus": (0, import_dom_utils.dataAttr)(isFocused),
     "data-focus-visible": (0, import_dom_utils.dataAttr)(isFocusVisible),
-    "data-disabled": (0, import_dom_utils.dataAttr)(props.disabled)
-  };
-  const isControlled = checked != null;
+    "data-disabled": (0, import_dom_utils.dataAttr)(props.disabled),
+    "data-invalid": (0, import_dom_utils.dataAttr)(props.invalid),
+    "data-required": (0, import_dom_utils.dataAttr)(props.required)
+  });
+  const isControlled = props.checked != null;
   return {
-    isChecked,
-    setIsChecked,
-    isFocused,
-    setIsFocused,
-    setIsFocusVisible,
-    restProps,
+    indeterminate: isIndeterminate,
+    checked: isChecked,
+    setChecked: setIsChecked,
+    focused: isFocused,
+    setFocused: setIsFocused,
+    focusVisible: isFocusVisible,
+    setFocusVisible: setIsFocusVisible,
+    refs,
     stateProps,
     rootProps: (0, import_dom_utils.labelProps)({
       ...stateProps,
@@ -88,14 +122,14 @@ function useCheckbox(props) {
         setIsHovered(true);
       },
       onPointerDown() {
-        setIsPressed(true);
+        setIsActive(true);
       },
       onPointerUp() {
-        setIsPressed(false);
+        setIsActive(false);
       },
       onPointerLeave() {
         setIsHovered(false);
-        setIsPressed(false);
+        setIsActive(false);
       }
     }),
     controlProps: (0, import_dom_utils.elementProps)({
@@ -104,9 +138,13 @@ function useCheckbox(props) {
     }),
     hiddenInputProps: (0, import_dom_utils.inputProps)({
       type: "checkbox",
-      defaultChecked,
+      role: "checkbox",
       checked: isControlled ? isChecked : void 0,
-      "aria-invalid": invalid,
+      defaultChecked: !isControlled ? isChecked : void 0,
+      disabled: props.disabled,
+      required: props.required,
+      "aria-invalid": props.invalid,
+      style: import_dom_utils.visuallyHidden,
       ...stateProps,
       onChange(event) {
         setIsChecked(event.currentTarget.checked);
@@ -122,17 +160,79 @@ function useCheckbox(props) {
       },
       onKeyDown(event) {
         if (event.key === " ") {
-          setIsPressed(true);
+          setIsActive(true);
         }
       },
       onKeyUp(event) {
         if (event.key === " ") {
-          setIsPressed(false);
+          setIsActive(false);
         }
       }
     })
   };
 }
-__name(useCheckbox, "useCheckbox");
-/*! For license information please see index.js.LEGAL.txt */
+
+// src/useCheckboxContext.tsx
+var import_react2 = require("react");
+var CheckboxContext = (0, import_react2.createContext)(null);
+var CheckboxProvider = CheckboxContext.Provider;
+function useCheckboxContext({
+  strict = true
+} = {}) {
+  const context = (0, import_react2.useContext)(CheckboxContext);
+  if (!context && strict) {
+    throw new Error("useCheckboxContext must be used within a Checkbox");
+  }
+  return context;
+}
+
+// src/Checkbox.tsx
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CheckboxRoot = (0, import_react3.forwardRef)((props, ref) => {
+  const {
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    indeterminate,
+    disabled,
+    invalid,
+    required,
+    ...otherProps
+  } = props;
+  const api = useCheckbox({
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    indeterminate,
+    disabled,
+    invalid,
+    required
+  });
+  const mergedProps = (0, import_dom_utils2.mergeProps)(api.rootProps, otherProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxProvider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.label, { ref, ...mergedProps }) });
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+var CheckboxControl = (0, import_react3.forwardRef)((props, ref) => {
+  const { controlProps } = useCheckboxContext();
+  const mergedProps = (0, import_dom_utils2.mergeProps)(controlProps, props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ref, ...mergedProps });
+});
+CheckboxControl.displayName = "CheckboxControl";
+var CheckboxHiddenInput = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    const { refs, hiddenInputProps } = useCheckboxContext();
+    const mergedProps = (0, import_dom_utils2.mergeProps)(hiddenInputProps, props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.input, { ref: (0, import_react_compose_refs.composeRefs)(refs.input, ref), ...mergedProps });
+  }
+);
+CheckboxHiddenInput.displayName = "CheckboxHiddenInput";
+
+// src/Checkbox.namespace.ts
+var Checkbox_namespace_exports = {};
+__export(Checkbox_namespace_exports, {
+  Control: () => CheckboxControl,
+  HiddenInput: () => CheckboxHiddenInput,
+  Root: () => CheckboxRoot
+});
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { useState } from \"react\";\n\nimport { dataAttr, elementProps, inputProps, labelProps } from \"@seed-design/dom-utils\";\n\nexport interface UseCheckboxStateProps {\n  checked?: boolean;\n\n  defaultChecked?: boolean;\n\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nexport function useCheckboxState(props: UseCheckboxStateProps) {\n  const [isChecked, setIsChecked] = useControllableState({\n    prop: props.checked,\n    defaultProp: props.defaultChecked,\n    onChange: props.onCheckedChange,\n  });\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPressed, setIsPressed] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n\n  return {\n    isChecked,\n    setIsChecked,\n    isHovered,\n    setIsHovered,\n    isPressed,\n    setIsPressed,\n    isFocused,\n    setIsFocused,\n    isFocusVisible,\n    setIsFocusVisible,\n  };\n}\n\nexport interface UseCheckboxProps extends UseCheckboxStateProps {\n  disabled?: boolean;\n\n  invalid?: boolean;\n}\n\nexport function useCheckbox(props: UseCheckboxProps) {\n  const { checked, defaultChecked, disabled, invalid, onCheckedChange, ...restProps } = props;\n\n  const {\n    setIsChecked,\n    isChecked,\n    setIsHovered,\n    isHovered,\n    setIsPressed,\n    isPressed,\n    setIsFocused,\n    isFocused,\n    setIsFocusVisible,\n    isFocusVisible,\n  } = useCheckboxState(props);\n\n  const stateProps = {\n    \"data-checked\": dataAttr(isChecked),\n    \"data-hover\": dataAttr(isHovered),\n    \"data-active\": dataAttr(isPressed),\n    \"data-focus\": dataAttr(isFocused),\n    \"data-focus-visible\": dataAttr(isFocusVisible),\n    \"data-disabled\": dataAttr(props.disabled),\n  };\n\n  const isControlled = checked != null;\n\n  return {\n    isChecked,\n    setIsChecked,\n    isFocused,\n    setIsFocused,\n    setIsFocusVisible,\n\n    restProps,\n    stateProps,\n    rootProps: labelProps({\n      ...stateProps,\n      onPointerMove() {\n        setIsHovered(true);\n      },\n      onPointerDown() {\n        setIsPressed(true);\n      },\n      onPointerUp() {\n        setIsPressed(false);\n      },\n      onPointerLeave() {\n        setIsHovered(false);\n        setIsPressed(false);\n      },\n    }),\n\n    controlProps: elementProps({\n      ...stateProps,\n      \"aria-hidden\": true,\n    }),\n\n    hiddenInputProps: inputProps({\n      type: \"checkbox\",\n      defaultChecked,\n      checked: isControlled ? isChecked : undefined,\n      \"aria-invalid\": invalid,\n      ...stateProps,\n      onChange(event) {\n        setIsChecked(event.currentTarget.checked);\n        setIsFocusVisible(event.target.matches(\":focus-visible\"));\n      },\n      onFocus(event) {\n        setIsFocused(true);\n        setIsFocusVisible(event.target.matches(\":focus-visible\"));\n      },\n      onBlur() {\n        setIsFocused(false);\n        setIsFocusVisible(false);\n      },\n      onKeyDown(event) {\n        if (event.key === \" \") {\n          setIsPressed(true);\n        }\n      },\n      onKeyUp(event) {\n        if (event.key === \" \") {\n          setIsPressed(false);\n        }\n      },\n    }),\n  };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAAqC;AACrC,mBAAyB;AAEzB,uBAA+D;AAUxD,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,CAAC,WAAW,YAAY,QAAI,0DAAqB;AAAA,IACrD,MAAM,MAAM;AAAA,IACZ,aAAa,MAAM;AAAA,IACnB,UAAU,MAAM;AAAA,EAClB,CAAC;AACD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAvBgB;AA+BT,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,SAAS,gBAAgB,UAAU,SAAS,iBAAiB,GAAG,UAAU,IAAI;AAEtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB,KAAK;AAE1B,QAAM,aAAa;AAAA,IACjB,oBAAgB,2BAAS,SAAS;AAAA,IAClC,kBAAc,2BAAS,SAAS;AAAA,IAChC,mBAAe,2BAAS,SAAS;AAAA,IACjC,kBAAc,2BAAS,SAAS;AAAA,IAChC,0BAAsB,2BAAS,cAAc;AAAA,IAC7C,qBAAiB,2BAAS,MAAM,QAAQ;AAAA,EAC1C;AAEA,QAAM,eAAe,WAAW;AAEhC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA,eAAW,6BAAW;AAAA,MACpB,GAAG;AAAA,MACH,gBAAgB;AACd,qBAAa,IAAI;AAAA,MACnB;AAAA,MACA,gBAAgB;AACd,qBAAa,IAAI;AAAA,MACnB;AAAA,MACA,cAAc;AACZ,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,iBAAiB;AACf,qBAAa,KAAK;AAClB,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,CAAC;AAAA,IAED,kBAAc,+BAAa;AAAA,MACzB,GAAG;AAAA,MACH,eAAe;AAAA,IACjB,CAAC;AAAA,IAED,sBAAkB,6BAAW;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA,SAAS,eAAe,YAAY;AAAA,MACpC,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,SAAS,OAAO;AACd,qBAAa,MAAM,cAAc,OAAO;AACxC,0BAAkB,MAAM,OAAO,QAAQ,gBAAgB,CAAC;AAAA,MAC1D;AAAA,MACA,QAAQ,OAAO;AACb,qBAAa,IAAI;AACjB,0BAAkB,MAAM,OAAO,QAAQ,gBAAgB,CAAC;AAAA,MAC1D;AAAA,MACA,SAAS;AACP,qBAAa,KAAK;AAClB,0BAAkB,KAAK;AAAA,MACzB;AAAA,MACA,UAAU,OAAO;AACf,YAAI,MAAM,QAAQ,KAAK;AACrB,uBAAa,IAAI;AAAA,QACnB;AAAA,MACF;AAAA,MACA,QAAQ,OAAO;AACb,YAAI,MAAM,QAAQ,KAAK;AACrB,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAxFgB;",
-  "names": []
+  "sources": ["../src/index.ts", "../src/Checkbox.tsx", "../src/useCheckbox.ts", "../src/useCheckboxContext.tsx", "../src/Checkbox.namespace.ts"],
+  "sourcesContent": ["export {\n  CheckboxRoot,\n  CheckboxControl,\n  CheckboxHiddenInput,\n  type CheckboxRootProps,\n  type CheckboxControlProps,\n  type CheckboxHiddenInputProps,\n} from \"./Checkbox\";\n\nexport { useCheckboxContext, type UseCheckboxContext } from \"./useCheckboxContext\";\n\nexport * as Checkbox from \"./Checkbox.namespace\";\n", "import { mergeProps } from \"@seed-design/dom-utils\";\nimport { Primitive, type PrimitiveProps } from \"@seed-design/react-primitive\";\nimport type * as React from \"react\";\nimport { forwardRef } from \"react\";\nimport { useCheckbox, type UseCheckboxProps } from \"./useCheckbox\";\nimport { CheckboxProvider, useCheckboxContext } from \"./useCheckboxContext\";\nimport { composeRefs } from \"@radix-ui/react-compose-refs\";\n\nexport interface CheckboxRootProps\n  extends UseCheckboxProps,\n    PrimitiveProps,\n    React.HTMLAttributes<HTMLLabelElement> {}\n\nexport const CheckboxRoot = forwardRef<HTMLLabelElement, CheckboxRootProps>((props, ref) => {\n  const {\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    indeterminate,\n    disabled,\n    invalid,\n    required,\n    ...otherProps\n  } = props;\n\n  const api = useCheckbox({\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    indeterminate,\n    disabled,\n    invalid,\n    required,\n  });\n  const mergedProps = mergeProps(api.rootProps, otherProps);\n\n  return (\n    <CheckboxProvider value={api}>\n      <Primitive.label ref={ref} {...mergedProps} />\n    </CheckboxProvider>\n  );\n});\nCheckboxRoot.displayName = \"CheckboxRoot\";\n\nexport interface CheckboxControlProps\n  extends PrimitiveProps,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport const CheckboxControl = forwardRef<HTMLDivElement, CheckboxControlProps>((props, ref) => {\n  const { controlProps } = useCheckboxContext();\n  const mergedProps = mergeProps(controlProps, props);\n  return <Primitive.div ref={ref} {...mergedProps} />;\n});\nCheckboxControl.displayName = \"CheckboxControl\";\n\nexport interface CheckboxHiddenInputProps\n  extends PrimitiveProps,\n    React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const CheckboxHiddenInput = forwardRef<HTMLInputElement, CheckboxHiddenInputProps>(\n  (props, ref) => {\n    const { refs, hiddenInputProps } = useCheckboxContext();\n    const mergedProps = mergeProps(hiddenInputProps, props);\n    return <Primitive.input ref={composeRefs(refs.input, ref)} {...mergedProps} />;\n  },\n);\nCheckboxHiddenInput.displayName = \"CheckboxHiddenInput\";\n", "import { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n  dataAttr,\n  elementProps,\n  inputProps,\n  labelProps,\n  visuallyHidden,\n} from \"@seed-design/dom-utils\";\n\ninterface UseCheckboxStateProps {\n  checked?: boolean;\n\n  defaultChecked?: boolean;\n\n  onCheckedChange?: (checked: boolean) => void;\n\n  indeterminate?: boolean;\n}\n\nfunction useCheckboxState(props: UseCheckboxStateProps) {\n  const [isChecked = false, setIsChecked] = useControllableState({\n    prop: props.checked,\n    defaultProp: props.defaultChecked,\n    onChange: props.onCheckedChange,\n  });\n  const [isHovered, setIsHovered] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const initialCheckedRef = useRef(isChecked);\n\n  useEffect(() => {\n    const form = inputRef.current?.form;\n    if (form) {\n      const reset = () => setIsChecked(initialCheckedRef.current);\n      form.addEventListener(\"reset\", reset);\n      return () => form.removeEventListener(\"reset\", reset);\n    }\n  }, [setIsChecked]);\n\n  useEffect(() => {\n    if (!inputRef.current) return;\n    inputRef.current.indeterminate = props.indeterminate ?? false;\n  }, [props.indeterminate]);\n\n  return {\n    refs: { input: inputRef },\n    isIndeterminate: props.indeterminate ?? false,\n    isChecked,\n    setIsChecked,\n    isHovered,\n    setIsHovered,\n    isActive,\n    setIsActive,\n    isFocused,\n    setIsFocused,\n    isFocusVisible,\n    setIsFocusVisible,\n  };\n}\n\nexport interface UseCheckboxProps extends UseCheckboxStateProps {\n  disabled?: boolean;\n\n  invalid?: boolean;\n\n  required?: boolean;\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>;\n\nexport function useCheckbox(props: UseCheckboxProps) {\n  const {\n    refs,\n    isIndeterminate,\n    setIsChecked,\n    isChecked,\n    setIsHovered,\n    isHovered,\n    setIsActive,\n    isActive,\n    setIsFocused,\n    isFocused,\n    setIsFocusVisible,\n    isFocusVisible,\n  } = useCheckboxState(props);\n\n  const stateProps = elementProps({\n    \"data-checked\": dataAttr(isChecked),\n    \"data-indeterminate\": dataAttr(isIndeterminate),\n    \"data-hover\": dataAttr(isHovered),\n    \"data-active\": dataAttr(isActive),\n    \"data-focus\": dataAttr(isFocused),\n    \"data-focus-visible\": dataAttr(isFocusVisible),\n    \"data-disabled\": dataAttr(props.disabled),\n    \"data-invalid\": dataAttr(props.invalid),\n    \"data-required\": dataAttr(props.required),\n  });\n\n  const isControlled = props.checked != null;\n\n  return {\n    indeterminate: isIndeterminate,\n    checked: isChecked,\n    setChecked: setIsChecked,\n    focused: isFocused,\n    setFocused: setIsFocused,\n    focusVisible: isFocusVisible,\n    setFocusVisible: setIsFocusVisible,\n\n    refs,\n    stateProps,\n    rootProps: labelProps({\n      ...stateProps,\n      onPointerMove() {\n        setIsHovered(true);\n      },\n      onPointerDown() {\n        setIsActive(true);\n      },\n      onPointerUp() {\n        setIsActive(false);\n      },\n      onPointerLeave() {\n        setIsHovered(false);\n        setIsActive(false);\n      },\n    }),\n\n    controlProps: elementProps({\n      ...stateProps,\n      \"aria-hidden\": true,\n    }),\n\n    hiddenInputProps: inputProps({\n      type: \"checkbox\",\n      role: \"checkbox\",\n      checked: isControlled ? isChecked : undefined,\n      defaultChecked: !isControlled ? isChecked : undefined,\n      disabled: props.disabled,\n      required: props.required,\n      \"aria-invalid\": props.invalid,\n      style: visuallyHidden,\n      ...stateProps,\n      onChange(event) {\n        setIsChecked(event.currentTarget.checked);\n        setIsFocusVisible(event.target.matches(\":focus-visible\"));\n      },\n      onFocus(event) {\n        setIsFocused(true);\n        setIsFocusVisible(event.target.matches(\":focus-visible\"));\n      },\n      onBlur() {\n        setIsFocused(false);\n        setIsFocusVisible(false);\n      },\n      onKeyDown(event) {\n        if (event.key === \" \") {\n          setIsActive(true);\n        }\n      },\n      onKeyUp(event) {\n        if (event.key === \" \") {\n          setIsActive(false);\n        }\n      },\n    }),\n  };\n}\n", "import { createContext, useContext } from \"react\";\nimport type { UseCheckboxReturn } from \"./useCheckbox\";\n\nexport interface UseCheckboxContext extends UseCheckboxReturn {}\n\nconst CheckboxContext = createContext<UseCheckboxContext | null>(null);\n\nexport const CheckboxProvider = CheckboxContext.Provider;\n\nexport function useCheckboxContext<T extends boolean | undefined = true>({\n  strict = true,\n}: { strict?: T } = {}): T extends false ? UseCheckboxContext | null : UseCheckboxContext {\n  const context = useContext(CheckboxContext);\n  if (!context && strict) {\n    throw new Error(\"useCheckboxContext must be used within a Checkbox\");\n  }\n\n  return context as UseCheckboxContext;\n}\n", "export {\n  CheckboxRoot as Root,\n  CheckboxControl as Control,\n  CheckboxHiddenInput as HiddenInput,\n  type CheckboxRootProps as RootProps,\n  type CheckboxControlProps as ControlProps,\n  type CheckboxHiddenInputProps as HiddenInputProps,\n} from \"./Checkbox\";\n"],
+  "mappings": "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",
+  "names": ["import_dom_utils", "import_react", "_a", "import_react"]
 }

package/lib/index.mjs

@@ -1,64 +1,102 @@
 var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/Checkbox.tsx
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
 
-// src/index.ts
+// src/useCheckbox.ts
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useState } from "react";
-import { dataAttr, elementProps, inputProps, labelProps } from "@seed-design/dom-utils";
+import { useEffect, useRef, useState } from "react";
+import {
+  dataAttr,
+  elementProps,
+  inputProps,
+  labelProps,
+  visuallyHidden
+} from "@seed-design/dom-utils";
 function useCheckboxState(props) {
-  const [isChecked, setIsChecked] = useControllableState({
+  var _a;
+  const [isChecked = false, setIsChecked] = useControllableState({
     prop: props.checked,
     defaultProp: props.defaultChecked,
     onChange: props.onCheckedChange
   });
   const [isHovered, setIsHovered] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
+  const [isActive, setIsActive] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [isFocusVisible, setIsFocusVisible] = useState(false);
+  const inputRef = useRef(null);
+  const initialCheckedRef = useRef(isChecked);
+  useEffect(() => {
+    var _a2;
+    const form = (_a2 = inputRef.current) == null ? void 0 : _a2.form;
+    if (form) {
+      const reset = () => setIsChecked(initialCheckedRef.current);
+      form.addEventListener("reset", reset);
+      return () => form.removeEventListener("reset", reset);
+    }
+  }, [setIsChecked]);
+  useEffect(() => {
+    var _a2;
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = (_a2 = props.indeterminate) != null ? _a2 : false;
+  }, [props.indeterminate]);
   return {
+    refs: { input: inputRef },
+    isIndeterminate: (_a = props.indeterminate) != null ? _a : false,
     isChecked,
     setIsChecked,
     isHovered,
     setIsHovered,
-    isPressed,
-    setIsPressed,
+    isActive,
+    setIsActive,
     isFocused,
     setIsFocused,
     isFocusVisible,
     setIsFocusVisible
   };
 }
-__name(useCheckboxState, "useCheckboxState");
 function useCheckbox(props) {
-  const { checked, defaultChecked, disabled, invalid, onCheckedChange, ...restProps } = props;
   const {
+    refs,
+    isIndeterminate,
     setIsChecked,
     isChecked,
     setIsHovered,
     isHovered,
-    setIsPressed,
-    isPressed,
+    setIsActive,
+    isActive,
     setIsFocused,
     isFocused,
     setIsFocusVisible,
     isFocusVisible
   } = useCheckboxState(props);
-  const stateProps = {
+  const stateProps = elementProps({
     "data-checked": dataAttr(isChecked),
+    "data-indeterminate": dataAttr(isIndeterminate),
     "data-hover": dataAttr(isHovered),
-    "data-active": dataAttr(isPressed),
+    "data-active": dataAttr(isActive),
     "data-focus": dataAttr(isFocused),
     "data-focus-visible": dataAttr(isFocusVisible),
-    "data-disabled": dataAttr(props.disabled)
-  };
-  const isControlled = checked != null;
+    "data-disabled": dataAttr(props.disabled),
+    "data-invalid": dataAttr(props.invalid),
+    "data-required": dataAttr(props.required)
+  });
+  const isControlled = props.checked != null;
   return {
-    isChecked,
-    setIsChecked,
-    isFocused,
-    setIsFocused,
-    setIsFocusVisible,
-    restProps,
+    indeterminate: isIndeterminate,
+    checked: isChecked,
+    setChecked: setIsChecked,
+    focused: isFocused,
+    setFocused: setIsFocused,
+    focusVisible: isFocusVisible,
+    setFocusVisible: setIsFocusVisible,
+    refs,
     stateProps,
     rootProps: labelProps({
       ...stateProps,
@@ -66,14 +104,14 @@ function useCheckbox(props) {
         setIsHovered(true);
       },
       onPointerDown() {
-        setIsPressed(true);
+        setIsActive(true);
       },
       onPointerUp() {
-        setIsPressed(false);
+        setIsActive(false);
       },
       onPointerLeave() {
         setIsHovered(false);
-        setIsPressed(false);
+        setIsActive(false);
       }
     }),
     controlProps: elementProps({
@@ -82,9 +120,13 @@ function useCheckbox(props) {
     }),
     hiddenInputProps: inputProps({
       type: "checkbox",
-      defaultChecked,
+      role: "checkbox",
       checked: isControlled ? isChecked : void 0,
-      "aria-invalid": invalid,
+      defaultChecked: !isControlled ? isChecked : void 0,
+      disabled: props.disabled,
+      required: props.required,
+      "aria-invalid": props.invalid,
+      style: visuallyHidden,
       ...stateProps,
       onChange(event) {
         setIsChecked(event.currentTarget.checked);
@@ -100,21 +142,86 @@ function useCheckbox(props) {
       },
       onKeyDown(event) {
         if (event.key === " ") {
-          setIsPressed(true);
+          setIsActive(true);
         }
       },
       onKeyUp(event) {
         if (event.key === " ") {
-          setIsPressed(false);
+          setIsActive(false);
         }
       }
     })
   };
 }
-__name(useCheckbox, "useCheckbox");
+
+// src/useCheckboxContext.tsx
+import { createContext, useContext } from "react";
+var CheckboxContext = createContext(null);
+var CheckboxProvider = CheckboxContext.Provider;
+function useCheckboxContext({
+  strict = true
+} = {}) {
+  const context = useContext(CheckboxContext);
+  if (!context && strict) {
+    throw new Error("useCheckboxContext must be used within a Checkbox");
+  }
+  return context;
+}
+
+// src/Checkbox.tsx
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { jsx } from "react/jsx-runtime";
+var CheckboxRoot = forwardRef((props, ref) => {
+  const {
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    indeterminate,
+    disabled,
+    invalid,
+    required,
+    ...otherProps
+  } = props;
+  const api = useCheckbox({
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    indeterminate,
+    disabled,
+    invalid,
+    required
+  });
+  const mergedProps = mergeProps(api.rootProps, otherProps);
+  return /* @__PURE__ */ jsx(CheckboxProvider, { value: api, children: /* @__PURE__ */ jsx(Primitive.label, { ref, ...mergedProps }) });
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+var CheckboxControl = forwardRef((props, ref) => {
+  const { controlProps } = useCheckboxContext();
+  const mergedProps = mergeProps(controlProps, props);
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergedProps });
+});
+CheckboxControl.displayName = "CheckboxControl";
+var CheckboxHiddenInput = forwardRef(
+  (props, ref) => {
+    const { refs, hiddenInputProps } = useCheckboxContext();
+    const mergedProps = mergeProps(hiddenInputProps, props);
+    return /* @__PURE__ */ jsx(Primitive.input, { ref: composeRefs(refs.input, ref), ...mergedProps });
+  }
+);
+CheckboxHiddenInput.displayName = "CheckboxHiddenInput";
+
+// src/Checkbox.namespace.ts
+var Checkbox_namespace_exports = {};
+__export(Checkbox_namespace_exports, {
+  Control: () => CheckboxControl,
+  HiddenInput: () => CheckboxHiddenInput,
+  Root: () => CheckboxRoot
+});
 export {
-  useCheckbox,
-  useCheckboxState
+  Checkbox_namespace_exports as Checkbox,
+  CheckboxControl,
+  CheckboxHiddenInput,
+  CheckboxRoot,
+  useCheckboxContext
 };
-/*! For license information please see index.mjs.LEGAL.txt */
 //# sourceMappingURL=index.mjs.map