@choice-ui/checkbox 0.0.4

package/README.md

@@ -0,0 +1,272 @@
+# Checkbox
+
+A flexible checkbox component with support for labels, mixed state, and multiple visual variants. It uses a compound component pattern for maximum composability.
+
+## Import
+
+```tsx
+import { Checkbox } from "@choice-ui/react"
+```
+
+## Features
+
+- Three visual variants (default, accent, outline) for different UI contexts
+- Support for indeterminate/mixed state
+- Compound component pattern with `Checkbox.Label`
+- Full keyboard navigation (Space/Enter to toggle)
+- Proper ARIA attributes for accessibility
+- Focus state management
+- Disabled state styling
+- Auto-wrapping of string children as labels
+- Context-based communication between sub-components
+
+## Usage
+
+### Basic
+
+```tsx
+<Checkbox
+  value={checked}
+  onChange={setChecked}
+>
+  Accept terms and conditions
+</Checkbox>
+```
+
+### With separate label
+
+```tsx
+<Checkbox
+  value={checked}
+  onChange={setChecked}
+>
+  <Checkbox.Label>Enable notifications</Checkbox.Label>
+</Checkbox>
+```
+
+### Variants
+
+```tsx
+<Checkbox variant="default" value={checked} onChange={setChecked}>
+  Default style
+</Checkbox>
+
+<Checkbox variant="accent" value={checked} onChange={setChecked}>
+  Accent style
+</Checkbox>
+
+<Checkbox variant="outline" value={checked} onChange={setChecked}>
+  Outline style
+</Checkbox>
+```
+
+### Mixed/Indeterminate state
+
+```tsx
+<Checkbox
+  value={isPartiallySelected}
+  mixed={true}
+  onChange={handleSelectAll}
+>
+  Select all
+</Checkbox>
+```
+
+### Disabled state
+
+```tsx
+<Checkbox
+  disabled
+  value={checked}
+  onChange={setChecked}
+>
+  This option is disabled
+</Checkbox>
+```
+
+### With custom label styling
+
+```tsx
+<Checkbox
+  value={checked}
+  onChange={setChecked}
+>
+  <Checkbox.Label className="text-body-small-strong">Custom styled label</Checkbox.Label>
+</Checkbox>
+```
+
+### Controlled with focus
+
+```tsx
+<Checkbox
+  value={checked}
+  onChange={setChecked}
+  focused={isFocused}
+>
+  Controlled focus state
+</Checkbox>
+```
+
+## Props
+
+### Checkbox
+
+```ts
+interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
+  /** Child elements (strings auto-wrapped in Checkbox.Label) */
+  children?: ReactNode
+
+  /** Additional CSS class names */
+  className?: string
+
+  /** Whether the checkbox appears focused */
+  focused?: boolean
+
+  /** Whether to show mixed/indeterminate state */
+  mixed?: boolean
+
+  /** Callback when checked state changes */
+  onChange?: (value: boolean) => void
+
+  /** Whether the checkbox is checked */
+  value?: boolean
+
+  /** Visual style variant */
+  variant?: "default" | "accent" | "outline"
+}
+```
+
+### Checkbox.Label
+
+```ts
+interface CheckboxLabelProps extends Omit<
+  HTMLProps<HTMLLabelElement>,
+  "htmlFor" | "id" | "disabled"
+> {
+  /** Label content */
+  children: ReactNode
+}
+```
+
+- Defaults:
+  - `variant`: "default"
+  - `value`: `false`
+  - `mixed`: `false`
+  - `focused`: `false`
+
+- Accessibility:
+  - Proper `aria-checked` attribute (including "mixed" state)
+  - Automatic label association via context
+  - Keyboard support for Space and Enter keys
+  - Screen reader announcements
+
+## Styling
+
+- Uses Tailwind CSS via `tailwind-variants` with slot-based styling
+- Slots available: `root`, `box`, `input`, `label`
+- Each variant has distinct visual treatments
+- Focus states include border color changes and shadow effects
+- Disabled state applies to both checkbox and label
+
+## Best practices
+
+- Always provide a label for accessibility (either as children or via aria-label)
+- Use the accent variant for primary actions
+- Use mixed state for "select all" scenarios with partial selection
+- Keep labels concise and action-oriented
+- Group related checkboxes together visually
+- Consider using Checkbox with forms and validation
+
+## Examples
+
+### Select all with mixed state
+
+```tsx
+function SelectAllExample() {
+  const [items, setItems] = useState([
+    { id: 1, checked: false },
+    { id: 2, checked: true },
+    { id: 3, checked: false },
+  ])
+
+  const checkedCount = items.filter((item) => item.checked).length
+  const allChecked = checkedCount === items.length
+  const someChecked = checkedCount > 0 && checkedCount < items.length
+
+  const handleSelectAll = (checked: boolean) => {
+    setItems(items.map((item) => ({ ...item, checked })))
+  }
+
+  return (
+    <Checkbox
+      value={allChecked}
+      mixed={someChecked}
+      onChange={handleSelectAll}
+    >
+      Select all ({checkedCount}/{items.length})
+    </Checkbox>
+  )
+}
+```
+
+### Form with validation
+
+```tsx
+<form onSubmit={handleSubmit}>
+  <Checkbox
+    value={agreedToTerms}
+    onChange={setAgreedToTerms}
+    variant="accent"
+    required
+  >
+    I agree to the{" "}
+    <a
+      href="/terms"
+      className="underline"
+    >
+      terms and conditions
+    </a>
+  </Checkbox>
+
+  <Button
+    type="submit"
+    disabled={!agreedToTerms}
+  >
+    Continue
+  </Button>
+</form>
+```
+
+### Settings panel
+
+```tsx
+<div className="space-y-2">
+  <Checkbox
+    value={emailNotifications}
+    onChange={setEmailNotifications}
+  >
+    <Checkbox.Label>
+      <div>Email notifications</div>
+      <div className="text-secondary-foreground text-body-small">
+        Receive updates about your account
+      </div>
+    </Checkbox.Label>
+  </Checkbox>
+
+  <Checkbox
+    value={marketingEmails}
+    onChange={setMarketingEmails}
+    disabled={!emailNotifications}
+  >
+    Marketing emails
+  </Checkbox>
+</div>
+```
+
+## Notes
+
+- The component uses a context provider for communication between Checkbox and Label
+- String children are automatically wrapped in `Checkbox.Label` for convenience
+- The mixed state displays an indeterminate icon instead of a checkmark
+- Focus management can be controlled externally via the `focused` prop
+- The component is fully controlled - you must manage the `value` state

package/dist/index.cjs

@@ -0,0 +1,255 @@
+'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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,39 @@
+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/dist/index.d.ts

@@ -0,0 +1,39 @@
+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/dist/index.js

@@ -0,0 +1,252 @@
+import { tcv, tcx } from '@choice-ui/shared';
+import { Indeterminate, Check } from '@choiceform/icons-react';
+import { createContext, memo, forwardRef, useId, useContext } from 'react';
+import { useEventCallback } from 'usehooks-ts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/checkbox.tsx
+var CheckboxContext = createContext(null);
+function useCheckboxContext() {
+  const context = useContext(CheckboxContext);
+  if (!context) {
+    throw new Error("Checkbox components must be used within a Checkbox component");
+  }
+  return context;
+}
+var 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
+  }
+});
+var CheckboxLabel = memo(
+  forwardRef(function CheckboxLabel2(props, ref) {
+    const { children, className, ...rest } = props;
+    const { id, descriptionId, disabled } = useCheckboxContext();
+    const styles = checkboxTv({ disabled });
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        id: descriptionId,
+        htmlFor: id,
+        className: tcx(styles.label(), className),
+        ...rest,
+        children
+      }
+    );
+  })
+);
+CheckboxLabel.displayName = "Checkbox.Label";
+var CheckboxBase = 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 = useId();
+  const descriptionId = useId();
+  const styles = checkboxTv({
+    type: "checkbox",
+    variant,
+    disabled,
+    checked: value,
+    focused
+  });
+  const handleChange = useEventCallback((e) => {
+    if (readOnly) return;
+    onChange?.(e.target.checked);
+  });
+  const handleKeyDown = 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__ */ jsx(CheckboxLabel, { children });
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsx(
+    CheckboxContext.Provider,
+    {
+      value: {
+        value,
+        onChange: (val) => onChange?.(val),
+        disabled,
+        id: id || internalId,
+        descriptionId,
+        variant,
+        mixed
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
+          /* @__PURE__ */ 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__ */ jsx("div", { className: styles.box(), children: value && (mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : /* @__PURE__ */ jsx(Check, {})) })
+        ] }),
+        renderChildren()
+      ] })
+    }
+  );
+});
+var MemoizedCheckbox = memo(CheckboxBase);
+var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Label = CheckboxLabel;
+Checkbox2.displayName = "Checkbox";
+
+export { Checkbox2 as Checkbox, useCheckboxContext };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@choice-ui/checkbox",
+  "version": "0.0.4",
+  "description": "Checkbox component for Choiceform Design System",
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@choiceform/icons-react": "^1.3.8",
+    "usehooks-ts": "^3.1.0",
+    "@choice-ui/shared": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.5.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "clean": "rimraf dist"
+  }
+}

package/src/checkbox-label.tsx

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,128 @@
+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,
+  },
+})