{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "checkbox.tsx",
      "target": "components/ui/checkbox.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Checkbox as Base } from \"@base-ui/react/checkbox\";\nimport { Field } from \"@base-ui/react/field\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst rootVariants = cva(\n  \"relative flex shrink-0 items-center justify-center rounded-md border border-border bg-surface outline-none transition-control duration-base ease-soft before:absolute before:content-[''] data-[unchecked]:hover:border-border-strong data-[checked]:border-accent data-[checked]:bg-accent data-[checked]:bg-gradient-accent data-[checked]:glow-ring data-[indeterminate]:border-accent data-[indeterminate]:bg-accent data-[indeterminate]:bg-gradient-accent data-[indeterminate]:glow-ring active:scale-[0.98] motion-reduce:transition-none motion-reduce:transform-none focus-visible:border-transparent focus-visible:ring-focus aria-invalid:border-danger data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-4 before:-inset-3.5\",\n        md: \"h-5 w-5 before:-inset-3\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst indicatorVariants = cva(\"text-on-accent\", {\n  variants: {\n    size: {\n      sm: \"h-3 w-3\",\n      md: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nconst descriptionVariants = cva(\"text-xs text-muted\", {\n  variants: {\n    size: {\n      sm: \"pl-6\",\n      md: \"pl-7\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface CheckboxProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof Base.Root>,\n      \"render\" | \"className\"\n    >,\n    VariantProps<typeof rootVariants> {\n  className?: string;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  ({ className, size, label, description, id, disabled, ...props }, ref) => {\n    const generatedId = React.useId();\n    const checkboxId = id ?? generatedId;\n\n    return (\n      <Field.Root className=\"flex flex-col gap-1\" disabled={disabled}>\n        <div className=\"flex items-center gap-2\">\n          <Base.Root\n            ref={ref}\n            id={checkboxId}\n            disabled={disabled}\n            className={cn(\"group\", rootVariants({ size }), className)}\n            {...props}\n          >\n            <Base.Indicator\n              keepMounted\n              className={cn(\n                \"flex items-center justify-center transition-control duration-base ease-spring motion-reduce:transition-none motion-reduce:transform-none data-[unchecked]:scale-0 data-[checked]:scale-100 data-[indeterminate]:scale-100\",\n              )}\n            >\n              <CheckIcon\n                className={cn(\n                  indicatorVariants({ size }),\n                  \"group-data-[indeterminate]:hidden\",\n                )}\n              />\n              <MinusIcon\n                className={cn(\n                  indicatorVariants({ size }),\n                  \"hidden group-data-[indeterminate]:block\",\n                )}\n              />\n            </Base.Indicator>\n          </Base.Root>\n          {label ? (\n            <Field.Label\n              htmlFor={checkboxId}\n              className=\"text-sm text-ink select-none data-[disabled]:opacity-50\"\n            >\n              {label}\n            </Field.Label>\n          ) : null}\n        </div>\n        {description ? (\n          <Field.Description className={descriptionVariants({ size })}>\n            {description}\n          </Field.Description>\n        ) : null}\n      </Field.Root>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.5 6.5 5 9l4.5-5.5\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.5 6h7\" />\n    </svg>\n  );\n}\n"
    }
  ]
}