Checkbox

1'use client';
2 
3import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
4import * as React from 'react';
5 
6import { cn } from '@/lib/utils';
7 
8function CheckmarkIcon({ size }: { size: 'default' | 'lg' }) {
9  const isRegular = size === 'default';
10 
11  return (
12    <svg
13      xmlns="http://www.w3.org/2000/svg"
14      className={cn(
15        isRegular ? 'h-[7px] w-2' : 'h-[9px] w-[11px]',
16        'group-data-[state=indeterminate]:hidden',
17      )}
18      viewBox={isRegular ? '0 0 8 7' : '0 0 11 9'}
19      fill="none">
20      <path
21        fillRule="evenodd"
22        clipRule="evenodd"
23        d={
24          isRegular
25            ? 'M7.5 1.25L6.25 0L2.5 3.75L1.25 2.5L0 3.75L2.5 6.25L7.5 1.25Z'
26            : 'M10.5 1.25L9.25 0L3.5 5.75L1.25 3.5L0 4.75L3.5 8.25L10.5 1.25Z'
27        }
28        fill="currentColor"
29      />
30    </svg>
31  );
32}
33 
34/**
35 * Checkbox props with JSDoc for auto-generated documentation
36 */
37interface CheckboxProps extends React.ComponentProps<
38  typeof CheckboxPrimitive.Root
39> {
40  /**
41   * The size of the checkbox.
42   * - `default`: 16px visible box (20px bounding box)
43   * - `lg`: 20px visible box (24px bounding box)
44   * @default "default"
45   */
46  size?: 'default' | 'lg';
47  /**
48   * The controlled checked state. Can be true, false, or "indeterminate".
49   */
50  checked?: boolean | 'indeterminate';
51  /**
52   * The default checked state for uncontrolled usage.
53   */
54  defaultChecked?: boolean | 'indeterminate';
55}
56 
57/**
58 * Checkbox component for binary or tri-state selection.
59 *
60 * Supports checked, unchecked, and indeterminate states.
61 * Built on Radix UI Checkbox primitive for accessibility.
62 *
63 * @example
64 * ```tsx
65 * <Checkbox />
66 * <Checkbox checked={true} />
67 * <Checkbox checked="indeterminate" />
68 * <Checkbox size="lg" />
69 * ```
70 */
71function Checkbox({
72  className,
73  size = 'default',
74  checked,
75  defaultChecked,
76  ...props
77}: CheckboxProps) {
78  const isRegular = size === 'default';
79  const boundingBoxClass = isRegular ? 'size-5' : 'size-6';
80  const visibleBoxClass = isRegular ? 'size-4' : 'size-5';
81  const indicatorWidth = isRegular ? '8px' : '10px';
82 
83  return (
84    <CheckboxPrimitive.Root
85      data-slot="checkbox"
86      className={cn(
87        boundingBoxClass,
88        'group peer relative flex shrink-0 items-center justify-center outline-none',
89        'disabled:cursor-not-allowed',
90        className,
91      )}
92      checked={checked}
93      defaultChecked={defaultChecked}
94      {...props}>
95      <span
96        data-slot="checkbox-visual"
97// … truncated