Checkbox

1"use client";
2 
3import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6import { CheckIcon } from "lucide-react";
7import { buttonVariants } from "@/registry/optics/button";
8 
9function Checkbox({
10	className = "",
11	variant = "black",
12	variantChecked = undefined,
13	variantUnchecked = undefined,
14	checked = undefined,
15	defaultChecked = false,
16	onCheckedChange = undefined,
17	...props
18}) {
19	const [isChecked, setIsChecked] = React.useState(
20		checked ?? defaultChecked ?? false,
21	);
22 
23	// Sincronizar con la prop checked si es controlado
24	React.useEffect(() => {
25		if (checked !== undefined) {
26			setIsChecked(checked);
27		}
28	}, [checked]);
29 
30	// Manejar cambios de estado
31	const handleCheckedChange = (newChecked) => {
32		setIsChecked(newChecked);
33		onCheckedChange?.(newChecked);
34	};
35	return (
36		<CheckboxPrimitive.Root
37			data-slot="checkbox"
38			className={cn(
39				buttonVariants({
40					variant: isChecked ? "default" : "outline",
41					size: "icon-sm",
42					className:
43						"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-all duration-200 ease-out group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed! disabled:opacity-50 data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-200 data-[state=unchecked]:animate-out data-[state=unchecked]:zoom-out-50 data-[state=unchecked]:duration-150",
44				}),
45				className,
46			)}
47			checked={checked ?? isChecked}
48			onCheckedChange={handleCheckedChange}
49			{...props}
50		>
51			<CheckboxPrimitive.Indicator
52				data-slot="checkbox-indicator"
53				className="[&>svg]:size-3.5 grid place-content-center text-current animate-in fade-in-0 zoom-in-50 duration-200"
54			>
55				<CheckIcon />
56			</CheckboxPrimitive.Indicator>
57		</CheckboxPrimitive.Root>
58	);
59}
60 
61Checkbox.displayName = "Checkbox";
62 
63export { Checkbox };