| import * as React from "react"; | |
| import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; | |
| import { Check } from "lucide-react"; | |
| import { cn } from "@/lib/utils"; | |
| function Checkbox({ | |
| className, | |
| ...props | |
| }: React.ComponentProps<typeof CheckboxPrimitive.Root>) { | |
| return ( | |
| <CheckboxPrimitive.Root | |
| data-slot="checkbox" | |
| className={cn( | |
| "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30 size-4 shrink-0 rounded-[4px] border shadow-xs transition-[transform,background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.9] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100", | |
| className, | |
| )} | |
| {...props} | |
| > | |
| <CheckboxPrimitive.Indicator className="flex items-center justify-center transition-none"> | |
| <Check className="size-3.5 text-white" /> | |
| </CheckboxPrimitive.Indicator> | |
| </CheckboxPrimitive.Root> | |
| ); | |
| } | |
| export { Checkbox }; | |