@seed-design/react-checkbox 0.0.2 → 0.0.3

package/lib/Checkbox-12s-BeV5Lkaw.js

@@ -0,0 +1,184 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { elementProps, dataAttr, inputProps, labelProps, visuallyHidden, mergeProps } from '@seed-design/dom-utils';
+import { Primitive } from '@seed-design/react-primitive';
+import { useState, useRef, useEffect, createContext, useContext, forwardRef } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+
+function useCheckboxState(props) {
+    const [isChecked = false, setIsChecked] = useControllableState({
+        prop: props.checked,
+        defaultProp: props.defaultChecked,
+        onChange: props.onCheckedChange
+    });
+    const [isHovered, setIsHovered] = 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(()=>{
+        const form = inputRef.current?.form;
+        if (form) {
+            const reset = ()=>setIsChecked(initialCheckedRef.current);
+            form.addEventListener("reset", reset);
+            return ()=>form.removeEventListener("reset", reset);
+        }
+    }, [
+        setIsChecked
+    ]);
+    useEffect(()=>{
+        if (!inputRef.current) return;
+        inputRef.current.indeterminate = props.indeterminate ?? false;
+    }, [
+        props.indeterminate
+    ]);
+    return {
+        refs: {
+            input: inputRef
+        },
+        isIndeterminate: props.indeterminate ?? false,
+        isChecked,
+        setIsChecked,
+        isHovered,
+        setIsHovered,
+        isActive,
+        setIsActive,
+        isFocused,
+        setIsFocused,
+        isFocusVisible,
+        setIsFocusVisible
+    };
+}
+function useCheckbox(props) {
+    const { refs, isIndeterminate, setIsChecked, isChecked, setIsHovered, isHovered, setIsActive, isActive, setIsFocused, isFocused, setIsFocusVisible, isFocusVisible } = useCheckboxState(props);
+    const stateProps = elementProps({
+        "data-checked": dataAttr(isChecked),
+        "data-indeterminate": dataAttr(isIndeterminate),
+        "data-hover": dataAttr(isHovered),
+        "data-active": dataAttr(isActive),
+        "data-focus": dataAttr(isFocused),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-disabled": dataAttr(props.disabled),
+        "data-invalid": dataAttr(props.invalid),
+        "data-required": dataAttr(props.required)
+    });
+    const isControlled = props.checked != null;
+    return {
+        indeterminate: isIndeterminate,
+        checked: isChecked,
+        setChecked: setIsChecked,
+        focused: isFocused,
+        setFocused: setIsFocused,
+        focusVisible: isFocusVisible,
+        setFocusVisible: setIsFocusVisible,
+        refs,
+        stateProps,
+        rootProps: labelProps({
+            ...stateProps,
+            onPointerMove () {
+                setIsHovered(true);
+            },
+            onPointerDown () {
+                setIsActive(true);
+            },
+            onPointerUp () {
+                setIsActive(false);
+            },
+            onPointerLeave () {
+                setIsHovered(false);
+                setIsActive(false);
+            }
+        }),
+        controlProps: elementProps({
+            ...stateProps,
+            "aria-hidden": true
+        }),
+        hiddenInputProps: inputProps({
+            type: "checkbox",
+            role: "checkbox",
+            checked: isControlled ? isChecked : undefined,
+            defaultChecked: !isControlled ? isChecked : undefined,
+            disabled: props.disabled,
+            required: props.required,
+            "aria-invalid": props.invalid,
+            style: visuallyHidden,
+            ...stateProps,
+            onChange (event) {
+                setIsChecked(event.currentTarget.checked);
+                setIsFocusVisible(event.target.matches(":focus-visible"));
+            },
+            onFocus (event) {
+                setIsFocused(true);
+                setIsFocusVisible(event.target.matches(":focus-visible"));
+            },
+            onBlur () {
+                setIsFocused(false);
+                setIsFocusVisible(false);
+            },
+            onKeyDown (event) {
+                if (event.key === " ") {
+                    setIsActive(true);
+                }
+            },
+            onKeyUp (event) {
+                if (event.key === " ") {
+                    setIsActive(false);
+                }
+            }
+        })
+    };
+}
+
+const CheckboxContext = /*#__PURE__*/ createContext(null);
+const 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;
+}
+
+const CheckboxRoot = /*#__PURE__*/ 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: ref,
+            ...mergedProps
+        })
+    });
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+const CheckboxControl = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { controlProps } = useCheckboxContext();
+    const mergedProps = mergeProps(controlProps, props);
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+CheckboxControl.displayName = "CheckboxControl";
+const CheckboxHiddenInput = /*#__PURE__*/ 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";
+
+export { CheckboxControl as C, CheckboxHiddenInput as a, CheckboxRoot as b, useCheckboxContext as u };

package/lib/Checkbox-12s-Y3jZEb8V.cjs

@@ -0,0 +1,187 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var domUtils = require('@seed-design/dom-utils');
+var reactPrimitive = require('@seed-design/react-primitive');
+var react = require('react');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+
+function useCheckboxState(props) {
+    const [isChecked = false, setIsChecked] = reactUseControllableState.useControllableState({
+        prop: props.checked,
+        defaultProp: props.defaultChecked,
+        onChange: props.onCheckedChange
+    });
+    const [isHovered, setIsHovered] = react.useState(false);
+    const [isActive, setIsActive] = react.useState(false);
+    const [isFocused, setIsFocused] = react.useState(false);
+    const [isFocusVisible, setIsFocusVisible] = react.useState(false);
+    const inputRef = react.useRef(null);
+    const initialCheckedRef = react.useRef(isChecked);
+    react.useEffect(()=>{
+        const form = inputRef.current?.form;
+        if (form) {
+            const reset = ()=>setIsChecked(initialCheckedRef.current);
+            form.addEventListener("reset", reset);
+            return ()=>form.removeEventListener("reset", reset);
+        }
+    }, [
+        setIsChecked
+    ]);
+    react.useEffect(()=>{
+        if (!inputRef.current) return;
+        inputRef.current.indeterminate = props.indeterminate ?? false;
+    }, [
+        props.indeterminate
+    ]);
+    return {
+        refs: {
+            input: inputRef
+        },
+        isIndeterminate: props.indeterminate ?? false,
+        isChecked,
+        setIsChecked,
+        isHovered,
+        setIsHovered,
+        isActive,
+        setIsActive,
+        isFocused,
+        setIsFocused,
+        isFocusVisible,
+        setIsFocusVisible
+    };
+}
+function useCheckbox(props) {
+    const { refs, isIndeterminate, setIsChecked, isChecked, setIsHovered, isHovered, setIsActive, isActive, setIsFocused, isFocused, setIsFocusVisible, isFocusVisible } = useCheckboxState(props);
+    const stateProps = domUtils.elementProps({
+        "data-checked": domUtils.dataAttr(isChecked),
+        "data-indeterminate": domUtils.dataAttr(isIndeterminate),
+        "data-hover": domUtils.dataAttr(isHovered),
+        "data-active": domUtils.dataAttr(isActive),
+        "data-focus": domUtils.dataAttr(isFocused),
+        "data-focus-visible": domUtils.dataAttr(isFocusVisible),
+        "data-disabled": domUtils.dataAttr(props.disabled),
+        "data-invalid": domUtils.dataAttr(props.invalid),
+        "data-required": domUtils.dataAttr(props.required)
+    });
+    const isControlled = props.checked != null;
+    return {
+        indeterminate: isIndeterminate,
+        checked: isChecked,
+        setChecked: setIsChecked,
+        focused: isFocused,
+        setFocused: setIsFocused,
+        focusVisible: isFocusVisible,
+        setFocusVisible: setIsFocusVisible,
+        refs,
+        stateProps,
+        rootProps: domUtils.labelProps({
+            ...stateProps,
+            onPointerMove () {
+                setIsHovered(true);
+            },
+            onPointerDown () {
+                setIsActive(true);
+            },
+            onPointerUp () {
+                setIsActive(false);
+            },
+            onPointerLeave () {
+                setIsHovered(false);
+                setIsActive(false);
+            }
+        }),
+        controlProps: domUtils.elementProps({
+            ...stateProps,
+            "aria-hidden": true
+        }),
+        hiddenInputProps: domUtils.inputProps({
+            type: "checkbox",
+            role: "checkbox",
+            checked: isControlled ? isChecked : undefined,
+            defaultChecked: !isControlled ? isChecked : undefined,
+            disabled: props.disabled,
+            required: props.required,
+            "aria-invalid": props.invalid,
+            style: domUtils.visuallyHidden,
+            ...stateProps,
+            onChange (event) {
+                setIsChecked(event.currentTarget.checked);
+                setIsFocusVisible(event.target.matches(":focus-visible"));
+            },
+            onFocus (event) {
+                setIsFocused(true);
+                setIsFocusVisible(event.target.matches(":focus-visible"));
+            },
+            onBlur () {
+                setIsFocused(false);
+                setIsFocusVisible(false);
+            },
+            onKeyDown (event) {
+                if (event.key === " ") {
+                    setIsActive(true);
+                }
+            },
+            onKeyUp (event) {
+                if (event.key === " ") {
+                    setIsActive(false);
+                }
+            }
+        })
+    };
+}
+
+const CheckboxContext = /*#__PURE__*/ react.createContext(null);
+const CheckboxProvider = CheckboxContext.Provider;
+function useCheckboxContext({ strict = true } = {}) {
+    const context = react.useContext(CheckboxContext);
+    if (!context && strict) {
+        throw new Error("useCheckboxContext must be used within a Checkbox");
+    }
+    return context;
+}
+
+const CheckboxRoot = /*#__PURE__*/ react.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 = domUtils.mergeProps(api.rootProps, otherProps);
+    return /*#__PURE__*/ jsxRuntime.jsx(CheckboxProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.label, {
+            ref: ref,
+            ...mergedProps
+        })
+    });
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+const CheckboxControl = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { controlProps } = useCheckboxContext();
+    const mergedProps = domUtils.mergeProps(controlProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+CheckboxControl.displayName = "CheckboxControl";
+const CheckboxHiddenInput = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { refs, hiddenInputProps } = useCheckboxContext();
+    const mergedProps = domUtils.mergeProps(hiddenInputProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.input, {
+        ref: reactComposeRefs.composeRefs(refs.input, ref),
+        ...mergedProps
+    });
+});
+CheckboxHiddenInput.displayName = "CheckboxHiddenInput";
+
+exports.CheckboxControl = CheckboxControl;
+exports.CheckboxHiddenInput = CheckboxHiddenInput;
+exports.CheckboxRoot = CheckboxRoot;
+exports.useCheckboxContext = useCheckboxContext;

package/lib/index.cjs

@@ -1,194 +1,14 @@
-var jsxRuntime = require('react/jsx-runtime');
-var domUtils = require('@seed-design/dom-utils');
-var reactPrimitive = require('@seed-design/react-primitive');
-var react = require('react');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
-var reactComposeRefs = require('@radix-ui/react-compose-refs');
-
-function useCheckboxState(props) {
-    const [isChecked = false, setIsChecked] = reactUseControllableState.useControllableState({
-        prop: props.checked,
-        defaultProp: props.defaultChecked,
-        onChange: props.onCheckedChange
-    });
-    const [isHovered, setIsHovered] = react.useState(false);
-    const [isActive, setIsActive] = react.useState(false);
-    const [isFocused, setIsFocused] = react.useState(false);
-    const [isFocusVisible, setIsFocusVisible] = react.useState(false);
-    const inputRef = react.useRef(null);
-    const initialCheckedRef = react.useRef(isChecked);
-    react.useEffect(()=>{
-        const form = inputRef.current?.form;
-        if (form) {
-            const reset = ()=>setIsChecked(initialCheckedRef.current);
-            form.addEventListener("reset", reset);
-            return ()=>form.removeEventListener("reset", reset);
-        }
-    }, [
-        setIsChecked
-    ]);
-    react.useEffect(()=>{
-        if (!inputRef.current) return;
-        inputRef.current.indeterminate = props.indeterminate ?? false;
-    }, [
-        props.indeterminate
-    ]);
-    return {
-        refs: {
-            input: inputRef
-        },
-        isIndeterminate: props.indeterminate ?? false,
-        isChecked,
-        setIsChecked,
-        isHovered,
-        setIsHovered,
-        isActive,
-        setIsActive,
-        isFocused,
-        setIsFocused,
-        isFocusVisible,
-        setIsFocusVisible
-    };
-}
-function useCheckbox(props) {
-    const { refs, isIndeterminate, setIsChecked, isChecked, setIsHovered, isHovered, setIsActive, isActive, setIsFocused, isFocused, setIsFocusVisible, isFocusVisible } = useCheckboxState(props);
-    const stateProps = domUtils.elementProps({
-        "data-checked": domUtils.dataAttr(isChecked),
-        "data-indeterminate": domUtils.dataAttr(isIndeterminate),
-        "data-hover": domUtils.dataAttr(isHovered),
-        "data-active": domUtils.dataAttr(isActive),
-        "data-focus": domUtils.dataAttr(isFocused),
-        "data-focus-visible": domUtils.dataAttr(isFocusVisible),
-        "data-disabled": domUtils.dataAttr(props.disabled),
-        "data-invalid": domUtils.dataAttr(props.invalid),
-        "data-required": domUtils.dataAttr(props.required)
-    });
-    const isControlled = props.checked != null;
-    return {
-        indeterminate: isIndeterminate,
-        checked: isChecked,
-        setChecked: setIsChecked,
-        focused: isFocused,
-        setFocused: setIsFocused,
-        focusVisible: isFocusVisible,
-        setFocusVisible: setIsFocusVisible,
-        refs,
-        stateProps,
-        rootProps: domUtils.labelProps({
-            ...stateProps,
-            onPointerMove () {
-                setIsHovered(true);
-            },
-            onPointerDown () {
-                setIsActive(true);
-            },
-            onPointerUp () {
-                setIsActive(false);
-            },
-            onPointerLeave () {
-                setIsHovered(false);
-                setIsActive(false);
-            }
-        }),
-        controlProps: domUtils.elementProps({
-            ...stateProps,
-            "aria-hidden": true
-        }),
-        hiddenInputProps: domUtils.inputProps({
-            type: "checkbox",
-            role: "checkbox",
-            checked: isControlled ? isChecked : undefined,
-            defaultChecked: !isControlled ? isChecked : undefined,
-            disabled: props.disabled,
-            required: props.required,
-            "aria-invalid": props.invalid,
-            style: domUtils.visuallyHidden,
-            ...stateProps,
-            onChange (event) {
-                setIsChecked(event.currentTarget.checked);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
-            },
-            onFocus (event) {
-                setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
-            },
-            onBlur () {
-                setIsFocused(false);
-                setIsFocusVisible(false);
-            },
-            onKeyDown (event) {
-                if (event.key === " ") {
-                    setIsActive(true);
-                }
-            },
-            onKeyUp (event) {
-                if (event.key === " ") {
-                    setIsActive(false);
-                }
-            }
-        })
-    };
-}
-
-const CheckboxContext = /*#__PURE__*/ react.createContext(null);
-const CheckboxProvider = CheckboxContext.Provider;
-function useCheckboxContext({ strict = true } = {}) {
-    const context = react.useContext(CheckboxContext);
-    if (!context && strict) {
-        throw new Error("useCheckboxContext must be used within a Checkbox");
-    }
-    return context;
-}
-
-const CheckboxRoot = /*#__PURE__*/ react.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 = domUtils.mergeProps(api.rootProps, otherProps);
-    return /*#__PURE__*/ jsxRuntime.jsx(CheckboxProvider, {
-        value: api,
-        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.label, {
-            ref: ref,
-            ...mergedProps
-        })
-    });
-});
-CheckboxRoot.displayName = "CheckboxRoot";
-const CheckboxControl = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { controlProps } = useCheckboxContext();
-    const mergedProps = domUtils.mergeProps(controlProps, props);
-    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
-        ref: ref,
-        ...mergedProps
-    });
-});
-CheckboxControl.displayName = "CheckboxControl";
-const CheckboxHiddenInput = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { refs, hiddenInputProps } = useCheckboxContext();
-    const mergedProps = domUtils.mergeProps(hiddenInputProps, props);
-    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.input, {
-        ref: reactComposeRefs.composeRefs(refs.input, ref),
-        ...mergedProps
-    });
-});
-CheckboxHiddenInput.displayName = "CheckboxHiddenInput";
+var Checkbox12s = require('./Checkbox-12s-Y3jZEb8V.cjs');
 
 var Checkbox_namespace = {
   __proto__: null,
-  Control: CheckboxControl,
-  HiddenInput: CheckboxHiddenInput,
-  Root: CheckboxRoot
+  Control: Checkbox12s.CheckboxControl,
+  HiddenInput: Checkbox12s.CheckboxHiddenInput,
+  Root: Checkbox12s.CheckboxRoot
 };
 
+exports.CheckboxControl = Checkbox12s.CheckboxControl;
+exports.CheckboxHiddenInput = Checkbox12s.CheckboxHiddenInput;
+exports.CheckboxRoot = Checkbox12s.CheckboxRoot;
+exports.useCheckboxContext = Checkbox12s.useCheckboxContext;
 exports.Checkbox = Checkbox_namespace;
-exports.CheckboxControl = CheckboxControl;
-exports.CheckboxHiddenInput = CheckboxHiddenInput;
-exports.CheckboxRoot = CheckboxRoot;
-exports.useCheckboxContext = useCheckboxContext;

package/lib/index.js

@@ -1,184 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { elementProps, dataAttr, inputProps, labelProps, visuallyHidden, mergeProps } from '@seed-design/dom-utils';
-import { Primitive } from '@seed-design/react-primitive';
-import { useState, useRef, useEffect, createContext, useContext, forwardRef } from 'react';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { composeRefs } from '@radix-ui/react-compose-refs';
-
-function useCheckboxState(props) {
-    const [isChecked = false, setIsChecked] = useControllableState({
-        prop: props.checked,
-        defaultProp: props.defaultChecked,
-        onChange: props.onCheckedChange
-    });
-    const [isHovered, setIsHovered] = 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(()=>{
-        const form = inputRef.current?.form;
-        if (form) {
-            const reset = ()=>setIsChecked(initialCheckedRef.current);
-            form.addEventListener("reset", reset);
-            return ()=>form.removeEventListener("reset", reset);
-        }
-    }, [
-        setIsChecked
-    ]);
-    useEffect(()=>{
-        if (!inputRef.current) return;
-        inputRef.current.indeterminate = props.indeterminate ?? false;
-    }, [
-        props.indeterminate
-    ]);
-    return {
-        refs: {
-            input: inputRef
-        },
-        isIndeterminate: props.indeterminate ?? false,
-        isChecked,
-        setIsChecked,
-        isHovered,
-        setIsHovered,
-        isActive,
-        setIsActive,
-        isFocused,
-        setIsFocused,
-        isFocusVisible,
-        setIsFocusVisible
-    };
-}
-function useCheckbox(props) {
-    const { refs, isIndeterminate, setIsChecked, isChecked, setIsHovered, isHovered, setIsActive, isActive, setIsFocused, isFocused, setIsFocusVisible, isFocusVisible } = useCheckboxState(props);
-    const stateProps = elementProps({
-        "data-checked": dataAttr(isChecked),
-        "data-indeterminate": dataAttr(isIndeterminate),
-        "data-hover": dataAttr(isHovered),
-        "data-active": dataAttr(isActive),
-        "data-focus": dataAttr(isFocused),
-        "data-focus-visible": dataAttr(isFocusVisible),
-        "data-disabled": dataAttr(props.disabled),
-        "data-invalid": dataAttr(props.invalid),
-        "data-required": dataAttr(props.required)
-    });
-    const isControlled = props.checked != null;
-    return {
-        indeterminate: isIndeterminate,
-        checked: isChecked,
-        setChecked: setIsChecked,
-        focused: isFocused,
-        setFocused: setIsFocused,
-        focusVisible: isFocusVisible,
-        setFocusVisible: setIsFocusVisible,
-        refs,
-        stateProps,
-        rootProps: labelProps({
-            ...stateProps,
-            onPointerMove () {
-                setIsHovered(true);
-            },
-            onPointerDown () {
-                setIsActive(true);
-            },
-            onPointerUp () {
-                setIsActive(false);
-            },
-            onPointerLeave () {
-                setIsHovered(false);
-                setIsActive(false);
-            }
-        }),
-        controlProps: elementProps({
-            ...stateProps,
-            "aria-hidden": true
-        }),
-        hiddenInputProps: inputProps({
-            type: "checkbox",
-            role: "checkbox",
-            checked: isControlled ? isChecked : undefined,
-            defaultChecked: !isControlled ? isChecked : undefined,
-            disabled: props.disabled,
-            required: props.required,
-            "aria-invalid": props.invalid,
-            style: visuallyHidden,
-            ...stateProps,
-            onChange (event) {
-                setIsChecked(event.currentTarget.checked);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
-            },
-            onFocus (event) {
-                setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
-            },
-            onBlur () {
-                setIsFocused(false);
-                setIsFocusVisible(false);
-            },
-            onKeyDown (event) {
-                if (event.key === " ") {
-                    setIsActive(true);
-                }
-            },
-            onKeyUp (event) {
-                if (event.key === " ") {
-                    setIsActive(false);
-                }
-            }
-        })
-    };
-}
-
-const CheckboxContext = /*#__PURE__*/ createContext(null);
-const 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;
-}
-
-const CheckboxRoot = /*#__PURE__*/ 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: ref,
-            ...mergedProps
-        })
-    });
-});
-CheckboxRoot.displayName = "CheckboxRoot";
-const CheckboxControl = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { controlProps } = useCheckboxContext();
-    const mergedProps = mergeProps(controlProps, props);
-    return /*#__PURE__*/ jsx(Primitive.div, {
-        ref: ref,
-        ...mergedProps
-    });
-});
-CheckboxControl.displayName = "CheckboxControl";
-const CheckboxHiddenInput = /*#__PURE__*/ 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";
+import { C as CheckboxControl, a as CheckboxHiddenInput, b as CheckboxRoot } from './Checkbox-12s-BeV5Lkaw.js';
+export { u as useCheckboxContext } from './Checkbox-12s-BeV5Lkaw.js';
 
 var Checkbox_namespace = {
   __proto__: null,
@@ -187,4 +8,4 @@ var Checkbox_namespace = {
   Root: CheckboxRoot
 };
 
-export { Checkbox_namespace as Checkbox, CheckboxControl, CheckboxHiddenInput, CheckboxRoot, useCheckboxContext };
+export { Checkbox_namespace as Checkbox, CheckboxControl, CheckboxHiddenInput, CheckboxRoot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-checkbox",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/Checkbox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";