Checkbox

1'use client';
2 
3import { Indicator, Root } from '@radix-ui/react-checkbox';
4import { CheckIcon } from 'lucide-react';
5import { cn } from '@/lib/classnames';
6import type * as React from 'react';
7 
8const Checkbox = ({
9  className,
10  ...props
11}: React.ComponentProps<typeof Root>) => {
12  return (
13    <Root
14      className={cn(
15        'peer size-4 shrink-0 rounded-lg border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40',
16        className,
17      )}
18      data-slot='checkbox'
19      {...props}
20    >
21      <Indicator
22        className='grid place-content-center text-current transition-none'
23        data-slot='checkbox-indicator'
24      >
25        <CheckIcon className='size-3.5' />
26      </Indicator>
27    </Root>
28  );
29};
30 
31export { Checkbox };