Checkbox

1import * as React from 'react';
2 
3import {
4  Checkbox as CheckboxPrimitive,
5  CheckboxIndicator as CheckboxIndicatorPrimitive,
6  type CheckboxProps as CheckboxPrimitiveProps,
7} from '@/components/animate-ui/primitives/base/checkbox';
8import { cn } from '@/lib/utils';
9import { cva, type VariantProps } from 'class-variance-authority';
10 
11const checkboxVariants = cva(
12  'peer shrink-0 flex items-center justify-center outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-500 focus-visible:ring-offset-2 [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground',
13  {
14    variants: {
15      variant: {
16        default: 'bg-background border',
17        accent: 'bg-input',
18      },
19      size: {
20        default: 'size-5 rounded-sm',
21        sm: 'size-4.5 rounded-[5px]',
22        lg: 'size-6 rounded-[7px]',
23      },
24    },
25    defaultVariants: {
26      variant: 'default',
27      size: 'default',
28    },
29  },
30);
31 
32const checkboxIndicatorVariants = cva('', {
33  variants: {
34    size: {
35      default: 'size-3.5',
36      sm: 'size-3',
37      lg: 'size-4',
38    },
39  },
40  defaultVariants: {
41    size: 'default',
42  },
43});
44 
45type CheckboxProps = CheckboxPrimitiveProps &
46  VariantProps<typeof checkboxVariants> & {
47    children?: React.ReactNode;
48  };
49 
50function Checkbox({
51  className,
52  children,
53  variant,
54  size,
55  ...props
56}: CheckboxProps) {
57  return (
58    <CheckboxPrimitive
59      className={cn(checkboxVariants({ variant, size, className }))}
60      {...props}
61    >
62      {children}
63      <CheckboxIndicatorPrimitive
64        className={cn(checkboxIndicatorVariants({ size }))}
65      />
66    </CheckboxPrimitive>
67  );
68}
69 
70export { Checkbox, type CheckboxProps };