@choice-ui/checkbox 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,6 +1,14 @@
 import * as react from 'react';
 import { HTMLProps, ReactNode } from 'react';
 
+interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+declare const CheckboxIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -20,20 +28,10 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }
 declare const Checkbox: CheckboxType;
 
-interface CheckboxContextValue {
-    descriptionId?: string;
-    disabled?: boolean;
-    id: string;
-    mixed?: boolean;
-    onChange: (value: boolean) => void;
-    value?: boolean;
-    variant?: "default" | "accent" | "outline";
-}
-declare function useCheckboxContext(): CheckboxContextValue;
-
-export { Checkbox, type CheckboxContextValue, type CheckboxLabelProps, type CheckboxProps, useCheckboxContext };
+export { Checkbox, type CheckboxIconProps, type CheckboxLabelProps, type CheckboxProps };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { tcv, tcx } from '@choice-ui/shared';
 import { Indeterminate, Check } from '@choiceform/icons-react';
-import { createContext, memo, forwardRef, useId, useContext } from 'react';
+import { createContext, memo, forwardRef, useId, Children, isValidElement, useContext } from 'react';
 import { useEventCallback } from 'usehooks-ts';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -139,18 +139,50 @@ var checkboxTv = tcv({
     focused: false
   }
 });
+var CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
 var CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
     const { id, descriptionId, disabled } = useCheckboxContext();
-    const styles = checkboxTv({ disabled });
+    const tv = checkboxTv({ disabled });
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
         id: descriptionId,
         htmlFor: id,
-        className: tcx(styles.label(), className),
+        className: tcx(tv.label(), className),
         ...rest,
         children
       }
@@ -177,11 +209,12 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
   } = props;
   const internalId = useId();
   const descriptionId = useId();
-  const styles = checkboxTv({
+  const tv = checkboxTv({
     type: "checkbox",
     variant,
     disabled,
-    checked: value,
+    checked: value || mixed,
+    // mixed state should have same style as checked
     focused
   });
   const handleChange = useEventCallback((e) => {
@@ -196,12 +229,20 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
     }
     onKeyDown?.(e);
   });
+  const isIconElement = (child) => isValidElement(child) && (child.type === CheckboxIcon || child.type?.displayName === "Checkbox.Icon");
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find(isIconElement);
+  const otherChildren = childArray.filter((child) => !isIconElement(child));
   const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsx(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -214,13 +255,13 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
         variant,
         mixed
       },
-      children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
         /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               ref,
-              className: styles.input(),
+              className: tv.input(),
               type: "checkbox",
               id: id || internalId,
               checked: value,
@@ -235,7 +276,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles.box(), children: value && (mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : /* @__PURE__ */ jsx(Check, {})) })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -244,9 +285,10 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
 });
 var MemoizedCheckbox = memo(CheckboxBase);
 var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Icon = CheckboxIcon;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 
-export { Checkbox2 as Checkbox, useCheckboxContext };
+export { Checkbox2 as Checkbox };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/context.ts","../src/tv.ts","../src/checkbox-label.tsx","../src/checkbox.tsx"],"names":["CheckboxLabel","forwardRef","jsx","tcx","memo","Checkbox"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext, useContext } from \"react\"\n\nexport interface CheckboxContextValue {\n  descriptionId?: string\n  disabled?: boolean\n  id: string\n  mixed?: boolean\n  onChange: (value: boolean) => void\n  value?: boolean\n  variant?: \"default\" | \"accent\" | \"outline\"\n}\n\nexport const CheckboxContext = createContext<CheckboxContextValue | null>(null)\n\nexport function useCheckboxContext() {\n  const context = useContext(CheckboxContext)\n  if (!context) {\n    throw new Error(\"Checkbox components must be used within a Checkbox component\")\n  }\n  return context\n}\n","import { tcv } from \"@choice-ui/shared\"\n\nexport const checkboxTv = tcv({\n  slots: {\n    root: \"flex items-center select-none\",\n    box: [\"relative flex size-4 items-center justify-center\", \"border border-solid\"],\n    input: \"peer pointer-events-auto absolute inset-0 appearance-none opacity-0\",\n    label: \"pl-2\",\n  },\n  variants: {\n    type: {\n      checkbox: {\n        box: \"rounded-md\",\n      },\n      radio: {\n        box: \"rounded-full\",\n      },\n    },\n    variant: {\n      default: {},\n      accent: {},\n      outline: {},\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    disabled: {\n      true: {},\n      false: {},\n    },\n    focused: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // 未选中状态\n    {\n      variant: [\"default\", \"accent\"],\n      checked: false,\n      disabled: false,\n      focused: false,\n      class: {\n        box: \"bg-secondary-background border-default-boundary\",\n      },\n    },\n    {\n      variant: \"outline\",\n      checked: false,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\"border-default-foreground\", \"peer-focus-visible:border-selected-boundary\"],\n      },\n    },\n    // 选中状态 - default\n    {\n      variant: \"default\",\n      checked: true,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\n          \"bg-secondary-background border-default-boundary\",\n          \"peer-focus-visible:border-selected-strong-boundary\",\n        ],\n      },\n    },\n    // 选中状态 - accent & outline\n    {\n      variant: [\"accent\", \"outline\"],\n      checked: true,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\n          \"bg-accent-background border-selected-strong-boundary text-on-accent-foreground\",\n          \"peer-focus-visible:border-selected-strong-boundary\",\n          \"peer-focus-visible:text-on-accent-foreground\",\n          \"peer-focus-visible:shadow-checked-focused\",\n        ],\n      },\n    },\n    {\n      variant: [\"default\", \"accent\", \"outline\"],\n      checked: false,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"border-selected-boundary\",\n      },\n    },\n    {\n      variant: \"default\",\n      checked: true,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"border-selected-strong-boundary\",\n      },\n    },\n    {\n      variant: [\"accent\", \"outline\"],\n      checked: true,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused\",\n      },\n    },\n    {\n      variant: [\"accent\", \"outline\", \"default\"],\n      disabled: true,\n      class: {\n        root: \"text-default-background\",\n        box: \"border-disabled-background bg-disabled-background\",\n        label: \"text-disabled-foreground\",\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    checked: false,\n    disabled: false,\n    focused: false,\n  },\n})\n","import { tcx } from \"@choice-ui/shared\"\nimport { forwardRef, HTMLProps, memo, ReactNode } from \"react\"\nimport { useCheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxLabelProps extends Omit<\n  HTMLProps<HTMLLabelElement>,\n  \"htmlFor\" | \"id\" | \"disabled\"\n> {\n  children: ReactNode\n}\n\nexport const CheckboxLabel = memo(\n  forwardRef<HTMLLabelElement, CheckboxLabelProps>(function CheckboxLabel(props, ref) {\n    const { children, className, ...rest } = props\n    const { id, descriptionId, disabled } = useCheckboxContext()\n    const styles = checkboxTv({ disabled })\n\n    return (\n      <label\n        ref={ref}\n        id={descriptionId}\n        htmlFor={id}\n        className={tcx(styles.label(), className)}\n        {...rest}\n      >\n        {children}\n      </label>\n    )\n  }),\n)\n\nCheckboxLabel.displayName = \"Checkbox.Label\"\n","import { tcx } from \"@choice-ui/shared\"\nimport { Check, Indeterminate } from \"@choiceform/icons-react\"\nimport { forwardRef, HTMLProps, memo, ReactNode, useId } from \"react\"\nimport { useEventCallback } from \"usehooks-ts\"\nimport { CheckboxLabel } from \"./checkbox-label\"\nimport { CheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, \"value\" | \"onChange\"> {\n  children?: ReactNode\n  className?: string\n  focused?: boolean\n  mixed?: boolean\n  onChange?: (value: boolean) => void\n  readOnly?: boolean\n  value?: boolean\n  variant?: \"default\" | \"accent\" | \"outline\"\n}\n\nconst CheckboxBase = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  const {\n    value,\n    onChange,\n    disabled,\n    readOnly = false,\n    variant = \"default\",\n    className,\n    focused,\n    mixed,\n    children,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": ariaDescribedby,\n    onKeyDown,\n    ...rest\n  } = props\n  const internalId = useId()\n  const descriptionId = useId()\n\n  const styles = checkboxTv({\n    type: \"checkbox\",\n    variant,\n    disabled,\n    checked: value,\n    focused: focused,\n  })\n\n  const handleChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) return\n    onChange?.(e.target.checked)\n  })\n\n  const handleKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (readOnly) return\n    if (e.key === \" \" || e.key === \"Enter\") {\n      e.preventDefault()\n      onChange?.(!value)\n    }\n    onKeyDown?.(e)\n  })\n\n  // 自动将字符串类型的 children 包装成 CheckboxLabel\n  const renderChildren = () => {\n    if (typeof children === \"string\" || typeof children === \"number\") {\n      return <CheckboxLabel>{children}</CheckboxLabel>\n    }\n    return children\n  }\n\n  return (\n    <CheckboxContext.Provider\n      value={{\n        value,\n        onChange: (val) => onChange?.(val),\n        disabled,\n        id: id || internalId,\n        descriptionId,\n        variant,\n        mixed,\n      }}\n    >\n      <div className={tcx(styles.root(), className)}>\n        <div className=\"pointer-events-none relative\">\n          <input\n            ref={ref}\n            className={styles.input()}\n            type=\"checkbox\"\n            id={id || internalId}\n            checked={value}\n            disabled={disabled || readOnly}\n            onChange={handleChange}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby || descriptionId}\n            aria-checked={mixed ? \"mixed\" : value}\n            aria-disabled={disabled || readOnly}\n            role=\"checkbox\"\n            onKeyDown={handleKeyDown}\n            {...rest}\n          />\n\n          <div className={styles.box()}>{value && (mixed ? <Indeterminate /> : <Check />)}</div>\n        </div>\n\n        {renderChildren()}\n      </div>\n    </CheckboxContext.Provider>\n  )\n})\n\nconst MemoizedCheckbox = memo(CheckboxBase) as unknown as CheckboxType\n\ninterface CheckboxType {\n  (props: CheckboxProps & { ref?: React.Ref<HTMLInputElement> }): JSX.Element\n  Label: typeof CheckboxLabel\n  displayName?: string\n}\n\nexport const Checkbox = MemoizedCheckbox as CheckboxType\nCheckbox.Label = CheckboxLabel\nCheckbox.displayName = \"Checkbox\"\n"]}
+{"version":3,"sources":["../src/context.ts","../src/tv.ts","../src/checkbox-icon.tsx","../src/checkbox-label.tsx","../src/checkbox.tsx"],"names":["CheckboxIcon","memo","forwardRef","CheckboxLabel","jsx","tcx","Indeterminate","Check","Checkbox"],"mappings":";;;;;;;AAYO,IAAM,eAAA,GAAkB,cAA2C,IAAI,CAAA;AAEvE,SAAS,kBAAA,GAAqB;AACnC,EAAA,MAAM,OAAA,GAAU,WAAW,eAAe,CAAA;AAC1C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,8DAA8D,CAAA;AAAA,EAChF;AACA,EAAA,OAAO,OAAA;AACT;AClBO,IAAM,aAAa,GAAA,CAAI;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,+BAAA;AAAA,IACN,GAAA,EAAK,CAAC,kDAAA,EAAoD,qBAAqB,CAAA;AAAA,IAC/E,KAAA,EAAO,qEAAA;AAAA,IACP,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU;AAAA,QACR,GAAA,EAAK;AAAA,OACP;AAAA,MACA,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,SAAS,EAAC;AAAA,MACV,QAAQ,EAAC;AAAA,MACT,SAAS;AAAC,KACZ;AAAA,IACA,OAAA,EAAS;AAAA,MACP,MAAM,EAAC;AAAA,MACP,OAAO;AAAC,KACV;AAAA,IACA,QAAA,EAAU;AAAA,MACR,MAAM,EAAC;AAAA,MACP,OAAO;AAAC,KACV;AAAA,IACA,OAAA,EAAS;AAAA,MACP,MAAM,EAAC;AAAA,MACP,OAAO;AAAC;AACV,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,CAAC,SAAA,EAAW,QAAQ,CAAA;AAAA,MAC7B,OAAA,EAAS,KAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,KAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,KAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,KAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK,CAAC,2BAAA,EAA6B,6CAA6C;AAAA;AAClF,KACF;AAAA;AAAA,IAEA;AAAA,MACE,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,KAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA,UACH,iDAAA;AAAA,UACA;AAAA;AACF;AACF,KACF;AAAA;AAAA,IAEA;AAAA,MACE,OAAA,EAAS,CAAC,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7B,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,KAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA,UACH,gFAAA;AAAA,UACA,oDAAA;AAAA,UACA,8CAAA;AAAA,UACA;AAAA;AACF;AACF,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,MACxC,OAAA,EAAS,KAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,CAAC,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7B,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,CAAC,QAAA,EAAU,SAAA,EAAW,SAAS,CAAA;AAAA,MACxC,QAAA,EAAU,IAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,yBAAA;AAAA,QACN,GAAA,EAAK,mDAAA;AAAA,QACL,KAAA,EAAO;AAAA;AACT;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,KAAA;AAAA,IACT,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;ACrHM,IAAM,YAAA,GAAe,IAAA;AAAA,EAC1B,UAAA,CAA8C,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAC9E,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,QAAA,EAAU,OAAA,KAAY,kBAAA,EAAmB;AAC/D,IAAA,MAAM,KAAK,UAAA,CAAW;AAAA,MACpB,IAAA,EAAM,UAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAS,KAAA,IAAS;AAAA,KACnB,CAAA;AAED,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,IAAI,OAAO,aAAa,UAAA,EAAY;AAClC,QAAA,OAAO,QAAA,CAAS,EAAE,KAAA,EAAO,KAAA,EAAO,CAAA;AAAA,MAClC;AACA,MAAA,IAAI,aAAa,MAAA,EAAW;AAC1B,QAAA,OAAO,QAAA;AAAA,MACT;AACA,MAAA,OAAO,wBAAQ,GAAA,CAAC,aAAA,EAAA,EAAc,IAAK,KAAA,mBAAQ,GAAA,CAAC,SAAM,CAAA,GAAK,IAAA;AAAA,IACzD,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,GAAA,CAAI,EAAA,CAAG,GAAA,IAAO,SAAS,CAAA;AAAA,QAClC,aAAA,EAAa,KAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,UAAA;AAAW;AAAA,KACd;AAAA,EAEJ,CAAC;AACH,CAAA;AAEA,YAAA,CAAa,WAAA,GAAc,eAAA;AChCpB,IAAM,aAAA,GAAgBC,IAAAA;AAAA,EAC3BC,UAAAA,CAAiD,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AAClF,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,EAAA,EAAI,aAAA,EAAe,QAAA,KAAa,kBAAA,EAAmB;AAC3D,IAAA,MAAM,EAAA,GAAK,UAAA,CAAW,EAAE,QAAA,EAAU,CAAA;AAElC,IAAA,uBACEC,GAAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,aAAA;AAAA,QACJ,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAWC,GAAAA,CAAI,EAAA,CAAG,KAAA,IAAS,SAAS,CAAA;AAAA,QACnC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ,CAAC;AACH,CAAA;AAEA,aAAA,CAAc,WAAA,GAAc,gBAAA;ACZ5B,IAAM,YAAA,GAAeH,UAAAA,CAA4C,SAAS,QAAA,CAAS,OAAO,GAAA,EAAK;AAC7F,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,OAAA,GAAU,SAAA;AAAA,IACV,SAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,kBAAA,EAAoB,eAAA;AAAA,IACpB,SAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,aAAa,KAAA,EAAM;AACzB,EAAA,MAAM,gBAAgB,KAAA,EAAM;AAE5B,EAAA,MAAM,KAAK,UAAA,CAAW;AAAA,IACpB,IAAA,EAAM,UAAA;AAAA,IACN,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAS,KAAA,IAAS,KAAA;AAAA;AAAA,IAClB;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,CAAC,CAAA,KAA2C;AAChF,IAAA,IAAI,QAAA,EAAU;AACd,IAAA,QAAA,GAAW,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,EAC7B,CAAC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,gBAAA,CAAiB,CAAC,CAAA,KAA6C;AACnF,IAAA,IAAI,QAAA,EAAU;AACd,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,GAAA,IAAO,CAAA,CAAE,QAAQ,OAAA,EAAS;AACtC,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,QAAA,GAAW,CAAC,KAAK,CAAA;AAAA,IACnB;AACA,IAAA,SAAA,GAAY,CAAC,CAAA;AAAA,EACf,CAAC,CAAA;AAGD,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KACrB,cAAA,CAAe,KAAK,CAAA,KACnB,KAAA,CAAM,IAAA,KAAS,YAAA,IACb,KAAA,CAAM,IAAA,EAAmC,WAAA,KAAgB,eAAA,CAAA;AAE9D,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AAC5C,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,IAAA,CAAK,aAAa,CAAA;AAC/C,EAAA,MAAM,aAAA,GAAgB,WAAW,MAAA,CAAO,CAAC,UAAU,CAAC,aAAA,CAAc,KAAK,CAAC,CAAA;AAGxE,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,IAAI,aAAA,CAAc,WAAW,CAAA,EAAG;AAC9B,MAAA,MAAM,KAAA,GAAQ,cAAc,CAAC,CAAA;AAC7B,MAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,UAAU,QAAA,EAAU;AAC1D,QAAA,uBAAOE,GAAAA,CAAC,aAAA,EAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC/B;AAAA,IACF;AACA,IAAA,OAAO,aAAA;AAAA,EACT,CAAA;AAGA,EAAA,MAAM,iBAAA,GAAoB,sBACxBA,GAAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,KAAI,EAAI,QAAA,EAAA,KAAA,mBAAQA,GAAAA,CAACE,aAAAA,EAAA,EAAc,CAAA,GAAK,KAAA,mBAAQF,GAAAA,CAACG,KAAAA,EAAA,EAAM,CAAA,GAAK,IAAA,EAAK,CAAA;AAGlF,EAAA,uBACEH,GAAAA;AAAA,IAAC,eAAA,CAAgB,QAAA;AAAA,IAAhB;AAAA,MACC,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAC,GAAA,KAAQ,QAAA,GAAW,GAAG,CAAA;AAAA,QACjC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,UAAA;AAAA,QACV,aAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAWC,GAAAA,CAAI,GAAG,IAAA,EAAK,EAAG,SAAS,CAAA,EACtC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8BAAA,EACb,QAAA,EAAA;AAAA,0BAAAD,GAAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,cACpB,IAAA,EAAK,UAAA;AAAA,cACL,IAAI,EAAA,IAAM,UAAA;AAAA,cACV,OAAA,EAAS,KAAA;AAAA,cACT,UAAU,QAAA,IAAY,QAAA;AAAA,cACtB,QAAA,EAAU,YAAA;AAAA,cACV,YAAA,EAAY,SAAA;AAAA,cACZ,oBAAkB,eAAA,IAAmB,aAAA;AAAA,cACrC,cAAA,EAAc,QAAQ,OAAA,GAAU,KAAA;AAAA,cAChC,iBAAe,QAAA,IAAY,QAAA;AAAA,cAC3B,IAAA,EAAK,UAAA;AAAA,cACL,SAAA,EAAW,aAAA;AAAA,cACV,GAAG;AAAA;AAAA,WACN;AAAA,UAEC,aAAa,iBAAA;AAAkB,SAAA,EAClC,CAAA;AAAA,QAEC,cAAA;AAAe,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC,CAAA;AAED,IAAM,gBAAA,GAAmBH,KAAK,YAAY,CAAA;AASnC,IAAMO,SAAAA,GAAW;AACxBA,SAAAA,CAAS,IAAA,GAAO,YAAA;AAChBA,SAAAA,CAAS,KAAA,GAAQ,aAAA;AACjBA,SAAAA,CAAS,WAAA,GAAc,UAAA","file":"index.js","sourcesContent":["import { createContext, useContext } from \"react\"\n\nexport interface CheckboxContextValue {\n  descriptionId?: string\n  disabled?: boolean\n  id: string\n  mixed?: boolean\n  onChange: (value: boolean) => void\n  value?: boolean\n  variant?: \"default\" | \"accent\" | \"outline\"\n}\n\nexport const CheckboxContext = createContext<CheckboxContextValue | null>(null)\n\nexport function useCheckboxContext() {\n  const context = useContext(CheckboxContext)\n  if (!context) {\n    throw new Error(\"Checkbox components must be used within a Checkbox component\")\n  }\n  return context\n}\n","import { tcv } from \"@choice-ui/shared\"\n\nexport const checkboxTv = tcv({\n  slots: {\n    root: \"flex items-center select-none\",\n    box: [\"relative flex size-4 items-center justify-center\", \"border border-solid\"],\n    input: \"peer pointer-events-auto absolute inset-0 appearance-none opacity-0\",\n    label: \"pl-2\",\n  },\n  variants: {\n    type: {\n      checkbox: {\n        box: \"rounded-md\",\n      },\n      radio: {\n        box: \"rounded-full\",\n      },\n    },\n    variant: {\n      default: {},\n      accent: {},\n      outline: {},\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    disabled: {\n      true: {},\n      false: {},\n    },\n    focused: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // 未选中状态\n    {\n      variant: [\"default\", \"accent\"],\n      checked: false,\n      disabled: false,\n      focused: false,\n      class: {\n        box: \"bg-secondary-background border-default-boundary\",\n      },\n    },\n    {\n      variant: \"outline\",\n      checked: false,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\"border-default-foreground\", \"peer-focus-visible:border-selected-boundary\"],\n      },\n    },\n    // 选中状态 - default\n    {\n      variant: \"default\",\n      checked: true,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\n          \"bg-secondary-background border-default-boundary\",\n          \"peer-focus-visible:border-selected-strong-boundary\",\n        ],\n      },\n    },\n    // 选中状态 - accent & outline\n    {\n      variant: [\"accent\", \"outline\"],\n      checked: true,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\n          \"bg-accent-background border-selected-strong-boundary text-on-accent-foreground\",\n          \"peer-focus-visible:border-selected-strong-boundary\",\n          \"peer-focus-visible:text-on-accent-foreground\",\n          \"peer-focus-visible:shadow-checked-focused\",\n        ],\n      },\n    },\n    {\n      variant: [\"default\", \"accent\", \"outline\"],\n      checked: false,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"border-selected-boundary\",\n      },\n    },\n    {\n      variant: \"default\",\n      checked: true,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"border-selected-strong-boundary\",\n      },\n    },\n    {\n      variant: [\"accent\", \"outline\"],\n      checked: true,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused\",\n      },\n    },\n    {\n      variant: [\"accent\", \"outline\", \"default\"],\n      disabled: true,\n      class: {\n        root: \"text-default-background\",\n        box: \"border-disabled-background bg-disabled-background\",\n        label: \"text-disabled-foreground\",\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    checked: false,\n    disabled: false,\n    focused: false,\n  },\n})\n","import { tcx } from \"@choice-ui/shared\"\nimport { Check, Indeterminate } from \"@choiceform/icons-react\"\nimport { forwardRef, HTMLProps, memo, ReactNode } from \"react\"\nimport { useCheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, \"children\"> {\n  children?: ReactNode | ((props: { value?: boolean; mixed?: boolean }) => ReactNode)\n}\n\nexport const CheckboxIcon = memo(\n  forwardRef<HTMLDivElement, CheckboxIconProps>(function CheckboxIcon(props, ref) {\n    const { className, children, ...rest } = props\n    const { value, mixed, disabled, variant } = useCheckboxContext()\n    const tv = checkboxTv({\n      type: \"checkbox\",\n      variant,\n      disabled,\n      checked: value || mixed,\n    })\n\n    const renderIcon = () => {\n      if (typeof children === \"function\") {\n        return children({ value, mixed })\n      }\n      if (children !== undefined) {\n        return children\n      }\n      return mixed ? <Indeterminate /> : value ? <Check /> : null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={tcx(tv.box(), className)}\n        data-active={value}\n        {...rest}\n      >\n        {renderIcon()}\n      </div>\n    )\n  }),\n)\n\nCheckboxIcon.displayName = \"Checkbox.Icon\"\n","import { tcx } from \"@choice-ui/shared\"\nimport { forwardRef, HTMLProps, memo, ReactNode } from \"react\"\nimport { useCheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxLabelProps extends Omit<\n  HTMLProps<HTMLLabelElement>,\n  \"htmlFor\" | \"id\" | \"disabled\"\n> {\n  children: ReactNode\n}\n\nexport const CheckboxLabel = memo(\n  forwardRef<HTMLLabelElement, CheckboxLabelProps>(function CheckboxLabel(props, ref) {\n    const { children, className, ...rest } = props\n    const { id, descriptionId, disabled } = useCheckboxContext()\n    const tv = checkboxTv({ disabled })\n\n    return (\n      <label\n        ref={ref}\n        id={descriptionId}\n        htmlFor={id}\n        className={tcx(tv.label(), className)}\n        {...rest}\n      >\n        {children}\n      </label>\n    )\n  }),\n)\n\nCheckboxLabel.displayName = \"Checkbox.Label\"\n","import { tcx } from \"@choice-ui/shared\"\nimport { Check, Indeterminate } from \"@choiceform/icons-react\"\nimport { Children, forwardRef, HTMLProps, isValidElement, memo, ReactNode, useId } from \"react\"\nimport { useEventCallback } from \"usehooks-ts\"\nimport { CheckboxIcon } from \"./checkbox-icon\"\nimport { CheckboxLabel } from \"./checkbox-label\"\nimport { CheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, \"value\" | \"onChange\"> {\n  children?: ReactNode\n  className?: string\n  focused?: boolean\n  mixed?: boolean\n  onChange?: (value: boolean) => void\n  readOnly?: boolean\n  value?: boolean\n  variant?: \"default\" | \"accent\" | \"outline\"\n}\n\nconst CheckboxBase = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  const {\n    value,\n    onChange,\n    disabled,\n    readOnly = false,\n    variant = \"default\",\n    className,\n    focused,\n    mixed,\n    children,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": ariaDescribedby,\n    onKeyDown,\n    ...rest\n  } = props\n  const internalId = useId()\n  const descriptionId = useId()\n\n  const tv = checkboxTv({\n    type: \"checkbox\",\n    variant,\n    disabled,\n    checked: value || mixed, // mixed state should have same style as checked\n    focused: focused,\n  })\n\n  const handleChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) return\n    onChange?.(e.target.checked)\n  })\n\n  const handleKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (readOnly) return\n    if (e.key === \" \" || e.key === \"Enter\") {\n      e.preventDefault()\n      onChange?.(!value)\n    }\n    onKeyDown?.(e)\n  })\n\n  // Separate Icon from other children\n  const isIconElement = (child: unknown): child is React.ReactElement =>\n    isValidElement(child) &&\n    (child.type === CheckboxIcon ||\n      (child.type as { displayName?: string })?.displayName === \"Checkbox.Icon\")\n\n  const childArray = Children.toArray(children)\n  const iconChild = childArray.find(isIconElement)\n  const otherChildren = childArray.filter((child) => !isIconElement(child))\n\n  // Automatically wrap string-type children into CheckboxLabel\n  const renderChildren = () => {\n    if (otherChildren.length === 1) {\n      const child = otherChildren[0]\n      if (typeof child === \"string\" || typeof child === \"number\") {\n        return <CheckboxLabel>{child}</CheckboxLabel>\n      }\n    }\n    return otherChildren\n  }\n\n  // Render default icon (used when no custom Checkbox.Icon is provided)\n  const renderDefaultIcon = () => (\n    <div className={tv.box()}>{mixed ? <Indeterminate /> : value ? <Check /> : null}</div>\n  )\n\n  return (\n    <CheckboxContext.Provider\n      value={{\n        value,\n        onChange: (val) => onChange?.(val),\n        disabled,\n        id: id || internalId,\n        descriptionId,\n        variant,\n        mixed,\n      }}\n    >\n      <div className={tcx(tv.root(), className)}>\n        <div className=\"pointer-events-none relative\">\n          <input\n            ref={ref}\n            className={tv.input()}\n            type=\"checkbox\"\n            id={id || internalId}\n            checked={value}\n            disabled={disabled || readOnly}\n            onChange={handleChange}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby || descriptionId}\n            aria-checked={mixed ? \"mixed\" : value}\n            aria-disabled={disabled || readOnly}\n            role=\"checkbox\"\n            onKeyDown={handleKeyDown}\n            {...rest}\n          />\n\n          {iconChild ?? renderDefaultIcon()}\n        </div>\n\n        {renderChildren()}\n      </div>\n    </CheckboxContext.Provider>\n  )\n})\n\nconst MemoizedCheckbox = memo(CheckboxBase) as unknown as CheckboxType\n\ninterface CheckboxType {\n  (props: CheckboxProps & { ref?: React.Ref<HTMLInputElement> }): JSX.Element\n  Icon: typeof CheckboxIcon\n  Label: typeof CheckboxLabel\n  displayName?: string\n}\n\nexport const Checkbox = MemoizedCheckbox as CheckboxType\nCheckbox.Icon = CheckboxIcon\nCheckbox.Label = CheckboxLabel\nCheckbox.displayName = \"Checkbox\"\n"]}

package/package.json

@@ -1,30 +1,27 @@
 {
   "name": "@choice-ui/checkbox",
-  "version": "0.0.4",
-  "description": "Checkbox component for Choiceform Design System",
+  "version": "0.0.6",
+  "description": "A checkbox component for binary selection with support for checked, unchecked, and indeterminate states",
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@choice-ui/shared": "^0.0.1",
     "@choiceform/icons-react": "^1.3.8",
-    "usehooks-ts": "^3.1.0",
-    "@choice-ui/shared": "0.0.1"
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
@@ -39,6 +36,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "source": "./src/index.ts",
   "scripts": {
     "build": "tsup",
     "build:watch": "tsup --watch",

package/dist/index.cjs

@@ -1,255 +0,0 @@
-'use strict';
-
-var shared = require('@choice-ui/shared');
-var iconsReact = require('@choiceform/icons-react');
-var react = require('react');
-var usehooksTs = require('usehooks-ts');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/checkbox.tsx
-var CheckboxContext = react.createContext(null);
-function useCheckboxContext() {
-  const context = react.useContext(CheckboxContext);
-  if (!context) {
-    throw new Error("Checkbox components must be used within a Checkbox component");
-  }
-  return context;
-}
-var checkboxTv = shared.tcv({
-  slots: {
-    root: "flex items-center select-none",
-    box: ["relative flex size-4 items-center justify-center", "border border-solid"],
-    input: "peer pointer-events-auto absolute inset-0 appearance-none opacity-0",
-    label: "pl-2"
-  },
-  variants: {
-    type: {
-      checkbox: {
-        box: "rounded-md"
-      },
-      radio: {
-        box: "rounded-full"
-      }
-    },
-    variant: {
-      default: {},
-      accent: {},
-      outline: {}
-    },
-    checked: {
-      true: {},
-      false: {}
-    },
-    disabled: {
-      true: {},
-      false: {}
-    },
-    focused: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    // 未选中状态
-    {
-      variant: ["default", "accent"],
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: "bg-secondary-background border-default-boundary"
-      }
-    },
-    {
-      variant: "outline",
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: ["border-default-foreground", "peer-focus-visible:border-selected-boundary"]
-      }
-    },
-    // 选中状态 - default
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-secondary-background border-default-boundary",
-          "peer-focus-visible:border-selected-strong-boundary"
-        ]
-      }
-    },
-    // 选中状态 - accent & outline
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-accent-background border-selected-strong-boundary text-on-accent-foreground",
-          "peer-focus-visible:border-selected-strong-boundary",
-          "peer-focus-visible:text-on-accent-foreground",
-          "peer-focus-visible:shadow-checked-focused"
-        ]
-      }
-    },
-    {
-      variant: ["default", "accent", "outline"],
-      checked: false,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-boundary"
-      }
-    },
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-strong-boundary"
-      }
-    },
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused"
-      }
-    },
-    {
-      variant: ["accent", "outline", "default"],
-      disabled: true,
-      class: {
-        root: "text-default-background",
-        box: "border-disabled-background bg-disabled-background",
-        label: "text-disabled-foreground"
-      }
-    }
-  ],
-  defaultVariants: {
-    variant: "default",
-    checked: false,
-    disabled: false,
-    focused: false
-  }
-});
-var CheckboxLabel = react.memo(
-  react.forwardRef(function CheckboxLabel2(props, ref) {
-    const { children, className, ...rest } = props;
-    const { id, descriptionId, disabled } = useCheckboxContext();
-    const styles = checkboxTv({ disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        ref,
-        id: descriptionId,
-        htmlFor: id,
-        className: shared.tcx(styles.label(), className),
-        ...rest,
-        children
-      }
-    );
-  })
-);
-CheckboxLabel.displayName = "Checkbox.Label";
-var CheckboxBase = react.forwardRef(function Checkbox(props, ref) {
-  const {
-    value,
-    onChange,
-    disabled,
-    readOnly = false,
-    variant = "default",
-    className,
-    focused,
-    mixed,
-    children,
-    id,
-    "aria-label": ariaLabel,
-    "aria-describedby": ariaDescribedby,
-    onKeyDown,
-    ...rest
-  } = props;
-  const internalId = react.useId();
-  const descriptionId = react.useId();
-  const styles = checkboxTv({
-    type: "checkbox",
-    variant,
-    disabled,
-    checked: value,
-    focused
-  });
-  const handleChange = usehooksTs.useEventCallback((e) => {
-    if (readOnly) return;
-    onChange?.(e.target.checked);
-  });
-  const handleKeyDown = usehooksTs.useEventCallback((e) => {
-    if (readOnly) return;
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      onChange?.(!value);
-    }
-    onKeyDown?.(e);
-  });
-  const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsxRuntime.jsx(CheckboxLabel, { children });
-    }
-    return children;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CheckboxContext.Provider,
-    {
-      value: {
-        value,
-        onChange: (val) => onChange?.(val),
-        disabled,
-        id: id || internalId,
-        descriptionId,
-        variant,
-        mixed
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shared.tcx(styles.root(), className), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref,
-              className: styles.input(),
-              type: "checkbox",
-              id: id || internalId,
-              checked: value,
-              disabled: disabled || readOnly,
-              onChange: handleChange,
-              "aria-label": ariaLabel,
-              "aria-describedby": ariaDescribedby || descriptionId,
-              "aria-checked": mixed ? "mixed" : value,
-              "aria-disabled": disabled || readOnly,
-              role: "checkbox",
-              onKeyDown: handleKeyDown,
-              ...rest
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.box(), children: value && (mixed ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.Indeterminate, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.Check, {})) })
-        ] }),
-        renderChildren()
-      ] })
-    }
-  );
-});
-var MemoizedCheckbox = react.memo(CheckboxBase);
-var Checkbox2 = MemoizedCheckbox;
-Checkbox2.Label = CheckboxLabel;
-Checkbox2.displayName = "Checkbox";
-
-exports.Checkbox = Checkbox2;
-exports.useCheckboxContext = useCheckboxContext;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/context.ts","../src/tv.ts","../src/checkbox-label.tsx","../src/checkbox.tsx"],"names":["createContext","useContext","tcv","memo","forwardRef","CheckboxLabel","jsx","tcx","useId","useEventCallback","jsxs","Indeterminate","Check","Checkbox"],"mappings":"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","file":"index.cjs","sourcesContent":["import { createContext, useContext } from \"react\"\n\nexport interface CheckboxContextValue {\n  descriptionId?: string\n  disabled?: boolean\n  id: string\n  mixed?: boolean\n  onChange: (value: boolean) => void\n  value?: boolean\n  variant?: \"default\" | \"accent\" | \"outline\"\n}\n\nexport const CheckboxContext = createContext<CheckboxContextValue | null>(null)\n\nexport function useCheckboxContext() {\n  const context = useContext(CheckboxContext)\n  if (!context) {\n    throw new Error(\"Checkbox components must be used within a Checkbox component\")\n  }\n  return context\n}\n","import { tcv } from \"@choice-ui/shared\"\n\nexport const checkboxTv = tcv({\n  slots: {\n    root: \"flex items-center select-none\",\n    box: [\"relative flex size-4 items-center justify-center\", \"border border-solid\"],\n    input: \"peer pointer-events-auto absolute inset-0 appearance-none opacity-0\",\n    label: \"pl-2\",\n  },\n  variants: {\n    type: {\n      checkbox: {\n        box: \"rounded-md\",\n      },\n      radio: {\n        box: \"rounded-full\",\n      },\n    },\n    variant: {\n      default: {},\n      accent: {},\n      outline: {},\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    disabled: {\n      true: {},\n      false: {},\n    },\n    focused: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // 未选中状态\n    {\n      variant: [\"default\", \"accent\"],\n      checked: false,\n      disabled: false,\n      focused: false,\n      class: {\n        box: \"bg-secondary-background border-default-boundary\",\n      },\n    },\n    {\n      variant: \"outline\",\n      checked: false,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\"border-default-foreground\", \"peer-focus-visible:border-selected-boundary\"],\n      },\n    },\n    // 选中状态 - default\n    {\n      variant: \"default\",\n      checked: true,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\n          \"bg-secondary-background border-default-boundary\",\n          \"peer-focus-visible:border-selected-strong-boundary\",\n        ],\n      },\n    },\n    // 选中状态 - accent & outline\n    {\n      variant: [\"accent\", \"outline\"],\n      checked: true,\n      disabled: false,\n      focused: false,\n      class: {\n        box: [\n          \"bg-accent-background border-selected-strong-boundary text-on-accent-foreground\",\n          \"peer-focus-visible:border-selected-strong-boundary\",\n          \"peer-focus-visible:text-on-accent-foreground\",\n          \"peer-focus-visible:shadow-checked-focused\",\n        ],\n      },\n    },\n    {\n      variant: [\"default\", \"accent\", \"outline\"],\n      checked: false,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"border-selected-boundary\",\n      },\n    },\n    {\n      variant: \"default\",\n      checked: true,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"border-selected-strong-boundary\",\n      },\n    },\n    {\n      variant: [\"accent\", \"outline\"],\n      checked: true,\n      disabled: false,\n      focused: true,\n      class: {\n        box: \"text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused\",\n      },\n    },\n    {\n      variant: [\"accent\", \"outline\", \"default\"],\n      disabled: true,\n      class: {\n        root: \"text-default-background\",\n        box: \"border-disabled-background bg-disabled-background\",\n        label: \"text-disabled-foreground\",\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    checked: false,\n    disabled: false,\n    focused: false,\n  },\n})\n","import { tcx } from \"@choice-ui/shared\"\nimport { forwardRef, HTMLProps, memo, ReactNode } from \"react\"\nimport { useCheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxLabelProps extends Omit<\n  HTMLProps<HTMLLabelElement>,\n  \"htmlFor\" | \"id\" | \"disabled\"\n> {\n  children: ReactNode\n}\n\nexport const CheckboxLabel = memo(\n  forwardRef<HTMLLabelElement, CheckboxLabelProps>(function CheckboxLabel(props, ref) {\n    const { children, className, ...rest } = props\n    const { id, descriptionId, disabled } = useCheckboxContext()\n    const styles = checkboxTv({ disabled })\n\n    return (\n      <label\n        ref={ref}\n        id={descriptionId}\n        htmlFor={id}\n        className={tcx(styles.label(), className)}\n        {...rest}\n      >\n        {children}\n      </label>\n    )\n  }),\n)\n\nCheckboxLabel.displayName = \"Checkbox.Label\"\n","import { tcx } from \"@choice-ui/shared\"\nimport { Check, Indeterminate } from \"@choiceform/icons-react\"\nimport { forwardRef, HTMLProps, memo, ReactNode, useId } from \"react\"\nimport { useEventCallback } from \"usehooks-ts\"\nimport { CheckboxLabel } from \"./checkbox-label\"\nimport { CheckboxContext } from \"./context\"\nimport { checkboxTv } from \"./tv\"\n\nexport interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, \"value\" | \"onChange\"> {\n  children?: ReactNode\n  className?: string\n  focused?: boolean\n  mixed?: boolean\n  onChange?: (value: boolean) => void\n  readOnly?: boolean\n  value?: boolean\n  variant?: \"default\" | \"accent\" | \"outline\"\n}\n\nconst CheckboxBase = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  const {\n    value,\n    onChange,\n    disabled,\n    readOnly = false,\n    variant = \"default\",\n    className,\n    focused,\n    mixed,\n    children,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": ariaDescribedby,\n    onKeyDown,\n    ...rest\n  } = props\n  const internalId = useId()\n  const descriptionId = useId()\n\n  const styles = checkboxTv({\n    type: \"checkbox\",\n    variant,\n    disabled,\n    checked: value,\n    focused: focused,\n  })\n\n  const handleChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) return\n    onChange?.(e.target.checked)\n  })\n\n  const handleKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (readOnly) return\n    if (e.key === \" \" || e.key === \"Enter\") {\n      e.preventDefault()\n      onChange?.(!value)\n    }\n    onKeyDown?.(e)\n  })\n\n  // 自动将字符串类型的 children 包装成 CheckboxLabel\n  const renderChildren = () => {\n    if (typeof children === \"string\" || typeof children === \"number\") {\n      return <CheckboxLabel>{children}</CheckboxLabel>\n    }\n    return children\n  }\n\n  return (\n    <CheckboxContext.Provider\n      value={{\n        value,\n        onChange: (val) => onChange?.(val),\n        disabled,\n        id: id || internalId,\n        descriptionId,\n        variant,\n        mixed,\n      }}\n    >\n      <div className={tcx(styles.root(), className)}>\n        <div className=\"pointer-events-none relative\">\n          <input\n            ref={ref}\n            className={styles.input()}\n            type=\"checkbox\"\n            id={id || internalId}\n            checked={value}\n            disabled={disabled || readOnly}\n            onChange={handleChange}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby || descriptionId}\n            aria-checked={mixed ? \"mixed\" : value}\n            aria-disabled={disabled || readOnly}\n            role=\"checkbox\"\n            onKeyDown={handleKeyDown}\n            {...rest}\n          />\n\n          <div className={styles.box()}>{value && (mixed ? <Indeterminate /> : <Check />)}</div>\n        </div>\n\n        {renderChildren()}\n      </div>\n    </CheckboxContext.Provider>\n  )\n})\n\nconst MemoizedCheckbox = memo(CheckboxBase) as unknown as CheckboxType\n\ninterface CheckboxType {\n  (props: CheckboxProps & { ref?: React.Ref<HTMLInputElement> }): JSX.Element\n  Label: typeof CheckboxLabel\n  displayName?: string\n}\n\nexport const Checkbox = MemoizedCheckbox as CheckboxType\nCheckbox.Label = CheckboxLabel\nCheckbox.displayName = \"Checkbox\"\n"]}

package/dist/index.d.cts

@@ -1,39 +0,0 @@
-import * as react from 'react';
-import { HTMLProps, ReactNode } from 'react';
-
-interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
-    children: ReactNode;
-}
-declare const CheckboxLabel: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxLabelProps, "ref"> & react.RefAttributes<HTMLLabelElement>>>;
-
-interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
-    children?: ReactNode;
-    className?: string;
-    focused?: boolean;
-    mixed?: boolean;
-    onChange?: (value: boolean) => void;
-    readOnly?: boolean;
-    value?: boolean;
-    variant?: "default" | "accent" | "outline";
-}
-interface CheckboxType {
-    (props: CheckboxProps & {
-        ref?: React.Ref<HTMLInputElement>;
-    }): JSX.Element;
-    Label: typeof CheckboxLabel;
-    displayName?: string;
-}
-declare const Checkbox: CheckboxType;
-
-interface CheckboxContextValue {
-    descriptionId?: string;
-    disabled?: boolean;
-    id: string;
-    mixed?: boolean;
-    onChange: (value: boolean) => void;
-    value?: boolean;
-    variant?: "default" | "accent" | "outline";
-}
-declare function useCheckboxContext(): CheckboxContextValue;
-
-export { Checkbox, type CheckboxContextValue, type CheckboxLabelProps, type CheckboxProps, useCheckboxContext };

package/src/checkbox-label.tsx

@@ -1,33 +0,0 @@
-import { tcx } from "@choice-ui/shared"
-import { forwardRef, HTMLProps, memo, ReactNode } from "react"
-import { useCheckboxContext } from "./context"
-import { checkboxTv } from "./tv"
-
-export interface CheckboxLabelProps extends Omit<
-  HTMLProps<HTMLLabelElement>,
-  "htmlFor" | "id" | "disabled"
-> {
-  children: ReactNode
-}
-
-export const CheckboxLabel = memo(
-  forwardRef<HTMLLabelElement, CheckboxLabelProps>(function CheckboxLabel(props, ref) {
-    const { children, className, ...rest } = props
-    const { id, descriptionId, disabled } = useCheckboxContext()
-    const styles = checkboxTv({ disabled })
-
-    return (
-      <label
-        ref={ref}
-        id={descriptionId}
-        htmlFor={id}
-        className={tcx(styles.label(), className)}
-        {...rest}
-      >
-        {children}
-      </label>
-    )
-  }),
-)
-
-CheckboxLabel.displayName = "Checkbox.Label"

package/src/checkbox.tsx

@@ -1,120 +0,0 @@
-import { tcx } from "@choice-ui/shared"
-import { Check, Indeterminate } from "@choiceform/icons-react"
-import { forwardRef, HTMLProps, memo, ReactNode, useId } from "react"
-import { useEventCallback } from "usehooks-ts"
-import { CheckboxLabel } from "./checkbox-label"
-import { CheckboxContext } from "./context"
-import { checkboxTv } from "./tv"
-
-export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
-  children?: ReactNode
-  className?: string
-  focused?: boolean
-  mixed?: boolean
-  onChange?: (value: boolean) => void
-  readOnly?: boolean
-  value?: boolean
-  variant?: "default" | "accent" | "outline"
-}
-
-const CheckboxBase = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
-  const {
-    value,
-    onChange,
-    disabled,
-    readOnly = false,
-    variant = "default",
-    className,
-    focused,
-    mixed,
-    children,
-    id,
-    "aria-label": ariaLabel,
-    "aria-describedby": ariaDescribedby,
-    onKeyDown,
-    ...rest
-  } = props
-  const internalId = useId()
-  const descriptionId = useId()
-
-  const styles = checkboxTv({
-    type: "checkbox",
-    variant,
-    disabled,
-    checked: value,
-    focused: focused,
-  })
-
-  const handleChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (readOnly) return
-    onChange?.(e.target.checked)
-  })
-
-  const handleKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (readOnly) return
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault()
-      onChange?.(!value)
-    }
-    onKeyDown?.(e)
-  })
-
-  // 自动将字符串类型的 children 包装成 CheckboxLabel
-  const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return <CheckboxLabel>{children}</CheckboxLabel>
-    }
-    return children
-  }
-
-  return (
-    <CheckboxContext.Provider
-      value={{
-        value,
-        onChange: (val) => onChange?.(val),
-        disabled,
-        id: id || internalId,
-        descriptionId,
-        variant,
-        mixed,
-      }}
-    >
-      <div className={tcx(styles.root(), className)}>
-        <div className="pointer-events-none relative">
-          <input
-            ref={ref}
-            className={styles.input()}
-            type="checkbox"
-            id={id || internalId}
-            checked={value}
-            disabled={disabled || readOnly}
-            onChange={handleChange}
-            aria-label={ariaLabel}
-            aria-describedby={ariaDescribedby || descriptionId}
-            aria-checked={mixed ? "mixed" : value}
-            aria-disabled={disabled || readOnly}
-            role="checkbox"
-            onKeyDown={handleKeyDown}
-            {...rest}
-          />
-
-          <div className={styles.box()}>{value && (mixed ? <Indeterminate /> : <Check />)}</div>
-        </div>
-
-        {renderChildren()}
-      </div>
-    </CheckboxContext.Provider>
-  )
-})
-
-const MemoizedCheckbox = memo(CheckboxBase) as unknown as CheckboxType
-
-interface CheckboxType {
-  (props: CheckboxProps & { ref?: React.Ref<HTMLInputElement> }): JSX.Element
-  Label: typeof CheckboxLabel
-  displayName?: string
-}
-
-export const Checkbox = MemoizedCheckbox as CheckboxType
-Checkbox.Label = CheckboxLabel
-Checkbox.displayName = "Checkbox"

package/src/context.ts

@@ -1,21 +0,0 @@
-import { createContext, useContext } from "react"
-
-export interface CheckboxContextValue {
-  descriptionId?: string
-  disabled?: boolean
-  id: string
-  mixed?: boolean
-  onChange: (value: boolean) => void
-  value?: boolean
-  variant?: "default" | "accent" | "outline"
-}
-
-export const CheckboxContext = createContext<CheckboxContextValue | null>(null)
-
-export function useCheckboxContext() {
-  const context = useContext(CheckboxContext)
-  if (!context) {
-    throw new Error("Checkbox components must be used within a Checkbox component")
-  }
-  return context
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-export { Checkbox } from "./checkbox"
-export type { CheckboxProps } from "./checkbox"
-export type { CheckboxLabelProps } from "./checkbox-label"
-export { useCheckboxContext } from "./context"
-export type { CheckboxContextValue } from "./context"

package/src/tv.ts

@@ -1,128 +0,0 @@
-import { tcv } from "@choice-ui/shared"
-
-export const checkboxTv = tcv({
-  slots: {
-    root: "flex items-center select-none",
-    box: ["relative flex size-4 items-center justify-center", "border border-solid"],
-    input: "peer pointer-events-auto absolute inset-0 appearance-none opacity-0",
-    label: "pl-2",
-  },
-  variants: {
-    type: {
-      checkbox: {
-        box: "rounded-md",
-      },
-      radio: {
-        box: "rounded-full",
-      },
-    },
-    variant: {
-      default: {},
-      accent: {},
-      outline: {},
-    },
-    checked: {
-      true: {},
-      false: {},
-    },
-    disabled: {
-      true: {},
-      false: {},
-    },
-    focused: {
-      true: {},
-      false: {},
-    },
-  },
-  compoundVariants: [
-    // 未选中状态
-    {
-      variant: ["default", "accent"],
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: "bg-secondary-background border-default-boundary",
-      },
-    },
-    {
-      variant: "outline",
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: ["border-default-foreground", "peer-focus-visible:border-selected-boundary"],
-      },
-    },
-    // 选中状态 - default
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-secondary-background border-default-boundary",
-          "peer-focus-visible:border-selected-strong-boundary",
-        ],
-      },
-    },
-    // 选中状态 - accent & outline
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-accent-background border-selected-strong-boundary text-on-accent-foreground",
-          "peer-focus-visible:border-selected-strong-boundary",
-          "peer-focus-visible:text-on-accent-foreground",
-          "peer-focus-visible:shadow-checked-focused",
-        ],
-      },
-    },
-    {
-      variant: ["default", "accent", "outline"],
-      checked: false,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-boundary",
-      },
-    },
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-strong-boundary",
-      },
-    },
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused",
-      },
-    },
-    {
-      variant: ["accent", "outline", "default"],
-      disabled: true,
-      class: {
-        root: "text-default-background",
-        box: "border-disabled-background bg-disabled-background",
-        label: "text-disabled-foreground",
-      },
-    },
-  ],
-  defaultVariants: {
-    variant: "default",
-    checked: false,
-    disabled: false,
-    focused: false,
-  },
-})