@choice-ui/checkbox 0.0.5 → 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,9 +28,10 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }
 declare const Checkbox: CheckboxType;
 
-export { Checkbox, type CheckboxProps };
+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,6 +139,38 @@ 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;
@@ -197,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,
     {
@@ -236,7 +276,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -245,6 +285,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
 });
 var MemoizedCheckbox = memo(CheckboxBase);
 var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Icon = CheckboxIcon;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 

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 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 { 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 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  // Automatically wrap string-type children into 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(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          <div className={tv.box()}>{mixed ? <Indeterminate /> : value ? <Check /> : null}</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":"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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 { 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,6 +1,6 @@
 {
   "name": "@choice-ui/checkbox",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A checkbox component for binary selection with support for checked, unchecked, and indeterminate states",
   "sideEffects": false,
   "type": "module",