{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-checkbox",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/checkbox/checkbox.tsx",
      "content": "import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./checkbox.css\"\n\nconst checkboxVariants = cva(\n  \"checkbox-indicator inline-flex items-center justify-center shrink-0\",\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--layout-size-xs)] w-[var(--layout-size-xs)] rounded-[var(--layout-radius-sm)]\",\n        md: \"h-[var(--layout-size-sm)] w-[var(--layout-size-sm)] rounded-[var(--layout-radius-md)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"sm\",\n    },\n  }\n)\n\nfunction Checkbox({\n  className,\n  size = \"sm\",\n  label,\n  description,\n  disabled,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root> &\n  VariantProps<typeof checkboxVariants> & {\n    label?: string\n    description?: string\n  }) {\n  const id = React.useId()\n\n  return (\n    <div\n      data-slot=\"checkbox\"\n      data-disabled={disabled || undefined}\n      className={cn(\"flex items-start gap-[var(--layout-gap-md)]\", className)}\n    >\n      <div className=\"flex items-center py-[var(--layout-padding-2xs)]\">\n        <CheckboxPrimitive.Root\n          id={id}\n          className={cn(checkboxVariants({ size }))}\n          disabled={disabled}\n          {...props}\n        >\n          <CheckboxPrimitive.Indicator className=\"checkbox-icon flex items-center justify-center\">\n            <Check\n              className={cn(\n                \"checkbox-check\",\n                size === \"sm\" ? \"size-3\" : \"size-3.5\"\n              )}\n              strokeWidth={3}\n            />\n            <Minus\n              className={cn(\n                \"checkbox-minus\",\n                size === \"sm\" ? \"size-3\" : \"size-3.5\"\n              )}\n              strokeWidth={3}\n            />\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </div>\n      {label && (\n        <label\n          htmlFor={id}\n          className={cn(\n            \"flex flex-col\",\n            disabled ? \"cursor-default\" : \"cursor-pointer\"\n          )}\n        >\n          <span\n            className={cn(\n              \"font-accent checkbox-label\",\n              size === \"sm\" ? \"text-content-note\" : \"text-content-body\"\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-content-note checkbox-description\">\n              {description}\n            </span>\n          )}\n        </label>\n      )}\n    </div>\n  )\n}\n\nexport { Checkbox, checkboxVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/checkbox/checkbox.css",
      "content": "/* ================================================================\n * CHECKBOX — Indicator & State Styles\n * Structure (flex, size, gap, radius) lives in checkbox.tsx via cva.\n * Theming (colors, borders, states) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Indicator — base\n * -------------------------------- */\n.checkbox-indicator {\n  border: var(--layout-border-thin) solid var(--border-default);\n  overflow: hidden;\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .checkbox-indicator {\n    transition:\n      background 150ms ease,\n      border-color 150ms ease;\n  }\n}\n\n/* --------------------------------\n * Indicator — unchecked states\n * -------------------------------- */\n.checkbox-indicator[data-state=\"unchecked\"] {\n  background: var(--background-neutral-faint-default);\n}\n.checkbox-indicator[data-state=\"unchecked\"]:hover {\n  background: var(--background-neutral-faint-hover);\n}\n.checkbox-indicator[data-state=\"unchecked\"]:active {\n  background: var(--background-neutral-faint-pressed);\n}\n\n/* --------------------------------\n * Indicator — checked states\n * -------------------------------- */\n.checkbox-indicator[data-state=\"checked\"] {\n  background: var(--background-brand-strong-default);\n}\n.checkbox-indicator[data-state=\"checked\"]:hover {\n  background: var(--background-brand-strong-hover);\n}\n.checkbox-indicator[data-state=\"checked\"]:active {\n  background: var(--background-brand-strong-pressed);\n}\n\n/* --------------------------------\n * Indicator — indeterminate states\n * -------------------------------- */\n.checkbox-indicator[data-state=\"indeterminate\"] {\n  background: var(--background-brand-strong-default);\n}\n.checkbox-indicator[data-state=\"indeterminate\"]:hover {\n  background: var(--background-brand-strong-hover);\n}\n.checkbox-indicator[data-state=\"indeterminate\"]:active {\n  background: var(--background-brand-strong-pressed);\n}\n\n/* --------------------------------\n * Indicator — disabled\n * -------------------------------- */\n.checkbox-indicator[data-disabled] {\n  background: var(--background-disabled);\n  border-color: var(--border-disabled);\n  pointer-events: none;\n  cursor: default;\n}\n\n/* --------------------------------\n * Focus ring (matches Radio/Button pattern)\n * -------------------------------- */\n.checkbox-indicator:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--border-selected);\n}\n\n/* --------------------------------\n * Icon visibility — show check or minus based on state\n * -------------------------------- */\n.checkbox-icon {\n  color: var(--text-fixed);\n}\n\n.checkbox-indicator[data-disabled] .checkbox-icon {\n  color: var(--text-disabled);\n}\n\n/* Default: hide both icons */\n.checkbox-check,\n.checkbox-minus {\n  display: none;\n}\n\n/* Show check when checked */\n.checkbox-indicator[data-state=\"checked\"] .checkbox-check {\n  display: block;\n}\n\n/* Show minus when indeterminate */\n.checkbox-indicator[data-state=\"indeterminate\"] .checkbox-minus {\n  display: block;\n}\n\n/* --------------------------------\n * Text — label & description\n * -------------------------------- */\n.checkbox-label {\n  color: var(--text-base-strong);\n}\n.checkbox-description {\n  color: var(--text-base-medium);\n}\n\n/* --------------------------------\n * Text — disabled\n * -------------------------------- */\n[data-slot=\"checkbox\"][data-disabled] .checkbox-label,\n[data-slot=\"checkbox\"][data-disabled] .checkbox-description {\n  color: var(--text-disabled);\n}\n[data-slot=\"checkbox\"][data-disabled] label {\n  cursor: default;\n}\n",
      "type": "registry:ui"
    }
  ]
}