Checkbox

1import { CheckIcon } from "lucide-react";
2import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
3 
4import { cn } from "@/registry/lib/surface";
5 
6function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
7  return (
8    <CheckboxPrimitive.Root
9      data-slot="checkbox"
10      className={cn(
11        "peer relative flex size-4 shrink-0 items-center justify-center rounded-md border border-border bg-background outline-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] after:absolute after:-inset-x-3 after:-inset-y-2 hover:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring active:opacity-40 active:duration-[var(--d-snap)] active:ease-[var(--ease-snap)] data-disabled:pointer-events-none data-disabled:opacity-40 aria-invalid:border-destructive data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-disabled/field:opacity-40",
12        className,
13      )}
14      {...props}
15    >
16      <CheckboxPrimitive.Indicator
17        data-slot="checkbox-indicator"
18        className="grid place-content-center text-current [&>svg]:size-3.5"
19      >
20        <CheckIcon strokeWidth={1.5} />
21      </CheckboxPrimitive.Indicator>
22    </CheckboxPrimitive.Root>
23  );
24}
25 
26export { Checkbox };