checkbox

1'use client';
2 
3import * as React from 'react';
4import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
5import { CheckIcon, MinusIcon } from '@phosphor-icons/react';
6import { cva, type VariantProps } from 'class-variance-authority';
7 
8import { cn } from '@/registry/lib/utils';
9import { CheckboxGroupContext } from './checkbox-group';
10 
11type CheckboxTheme = 'gray' | 'accent';
12 
13/**
14 * Slots: checkbox, checkbox-indicator
15 */
16const checkboxVariants = cva(
17  'group/checkbox relative flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors',
18  {
19    variants: {
20      variant: {
21        solid:
22          'border-line-ui bg-transparent text-ui-label data-checked:border-none data-checked:text-on-fill data-indeterminate:border-none data-indeterminate:text-on-fill',
23        surface:
24          'border-line-ui text-ui-label data-checked:text-secondary data-checked:data-[theme=gray]:text-primary data-indeterminate:text-secondary data-indeterminate:data-[theme="gray]:text-primary',
25      },
26      theme: {
27        gray: '',
28        accent: '',
29      },
30    },
31    defaultVariants: {
32      variant: 'solid',
33      theme: 'gray',
34    },
35  }
36);
37 
38function Checkbox({
39  className,
40  variant,
41  theme,
42  indeterminate,
43  ...props
44}: Omit<CheckboxPrimitive.Root.Props, 'color'> &
45  VariantProps<typeof checkboxVariants> & {
46    indeterminate?: boolean;
47  }) {
48  const ctx = React.useContext(CheckboxGroupContext);
49  const resolvedVariant = variant ?? ctx.variant ?? 'solid';
50  const resolvedTheme = (theme ?? ctx.theme ?? 'gray') as CheckboxTheme;
51 
52  return (
53    <CheckboxPrimitive.Root
54      data-slot="checkbox"
55      data-variant={resolvedVariant}
56      data-theme={resolvedTheme !== 'gray' ? resolvedTheme : undefined}
57      indeterminate={indeterminate}
58      className={cn(
59        checkboxVariants({ variant: resolvedVariant, theme: resolvedTheme }),
60        'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
61        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
62        resolvedVariant === 'solid' &&
63          'data-checked:focus-visible:outline-focus-fill data-indeterminate:focus-visible:outline-focus-fill',
64        className
65      )}
66      {...props}
67    >
68      <CheckboxPrimitive.Indicator
69        data-slot="checkbox-indicator"
70        className="flex items-center justify-center text-current [&_svg]:size-3"
71      >
72// … truncated