{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "A control that allows the user to toggle between checked and unchecked states.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json",
    "https://optics.agusmayol.com.ar/r/button.json"
  ],
  "files": [
    {
      "path": "registry/optics/checkbox.jsx",
      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\nimport { buttonVariants } from \"@/registry/optics/button\";\n\nfunction Checkbox({\n\tclassName = \"\",\n\tvariant = \"black\",\n\tvariantChecked = undefined,\n\tvariantUnchecked = undefined,\n\tchecked = undefined,\n\tdefaultChecked = false,\n\tonCheckedChange = undefined,\n\t...props\n}) {\n\tconst [isChecked, setIsChecked] = React.useState(\n\t\tchecked ?? defaultChecked ?? false,\n\t);\n\n\t// Sincronizar con la prop checked si es controlado\n\tReact.useEffect(() => {\n\t\tif (checked !== undefined) {\n\t\t\tsetIsChecked(checked);\n\t\t}\n\t}, [checked]);\n\n\t// Manejar cambios de estado\n\tconst handleCheckedChange = (newChecked) => {\n\t\tsetIsChecked(newChecked);\n\t\tonCheckedChange?.(newChecked);\n\t};\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tdata-slot=\"checkbox\"\n\t\t\tclassName={cn(\n\t\t\t\tbuttonVariants({\n\t\t\t\t\tvariant: isChecked ? \"default\" : \"outline\",\n\t\t\t\t\tsize: \"icon-sm\",\n\t\t\t\t\tclassName:\n\t\t\t\t\t\t\"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\",\n\t\t\t\t}),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked ?? isChecked}\n\t\t\tonCheckedChange={handleCheckedChange}\n\t\t\t{...props}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator\n\t\t\t\tdata-slot=\"checkbox-indicator\"\n\t\t\t\tclassName=\"[&>svg]:size-3.5 grid place-content-center text-current animate-in fade-in-0 zoom-in-50 duration-200\"\n\t\t\t>\n\t\t\t\t<CheckIcon />\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n}\n\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n",
      "type": "registry:component",
      "target": "components/optics/checkbox.jsx"
    }
  ],
  "type": "registry:component"
}