Checkbox

1import * as React from 'react'
2import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
3import { Check } from 'lucide-react'
4import { cn } from '@/lib/utils'
5 
6const Checkbox = React.forwardRef<
7  React.ElementRef<typeof CheckboxPrimitive.Root>,
8  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
9>(({ className, ...props }, ref) => (
10  <CheckboxPrimitive.Root
11    ref={ref}
12    className={cn(
13      'peer h-5 w-5 shrink-0 border-3 border-foreground bg-background shadow-[4px_4px_0px_hsl(var(--shadow-color))] transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
14      className
15    )}
16    {...props}
17  >
18    <CheckboxPrimitive.Indicator
19      className={cn('flex items-center justify-center text-current')}
20    >
21      <Check className="h-4 w-4 stroke-[3]" />
22    </CheckboxPrimitive.Indicator>
23  </CheckboxPrimitive.Root>
24))
25Checkbox.displayName = CheckboxPrimitive.Root.displayName
26 
27export { Checkbox }