checkbox.tsx (969B)
1 "use client" 2 3 import { Root, Indicator } from "@radix-ui/react-checkbox" 4 import { Check } from "lucide-react" 5 6 import { cn } from "@/lib/utils" 7 import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react" 8 9 const Checkbox = forwardRef< 10 ComponentRef<typeof Root>, 11 ComponentPropsWithoutRef<typeof Root> 12 >(({ className, ...props }, ref) => ( 13 <Root 14 ref={ref} 15 className={cn( 16 "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background 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", 17 className 18 )} 19 {...props} 20 > 21 <Indicator 22 className={cn("flex items-center justify-center text-current")} 23 > 24 <Check className="h-4 w-4" /> 25 </Indicator> 26 </Root> 27 )) 28 Checkbox.displayName = Root.displayName 29 30 export { Checkbox }