{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json",
    "https://react-aria.adobe.com/registry/tailwind-field.json"
  ],
  "files": [
    {
      "path": "components/ui/Checkbox.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {Check, Minus} from 'lucide-react';\nimport React from 'react';\nimport {\n  CheckboxField,\n  CheckboxButton,\n  type CheckboxFieldProps,\n  type ValidationResult\n} from 'react-aria-components/Checkbox';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {tv} from 'tailwind-variants';\nimport {focusRing} from '@/registry/react-aria/lib/react-aria-utils';\nimport {Description, FieldError} from '@/registry/react-aria/ui/Field';\n\nconst checkboxStyles = tv({\n  base: 'flex gap-2 items-center group font-sans text-sm transition relative [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isDisabled: {\n      false: 'text-neutral-800 dark:text-neutral-200',\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nconst boxStyles = tv({\n  extend: focusRing,\n  base: 'w-4.5 h-4.5 box-border shrink-0 rounded-sm flex items-center justify-center border transition',\n  variants: {\n    isSelected: {\n      false:\n        'bg-white dark:bg-neutral-900 border-(--color) [--color:var(--color-neutral-400)] dark:[--color:var(--color-neutral-400)] group-pressed:[--color:var(--color-neutral-500)] dark:group-pressed:[--color:var(--color-neutral-300)]',\n      true: 'bg-(--color) border-(--color) [--color:var(--color-neutral-700)] group-pressed:[--color:var(--color-neutral-800)] dark:[--color:var(--color-neutral-300)] dark:group-pressed:[--color:var(--color-neutral-200)] forced-colors:[--color:Highlight]!'\n    },\n    isInvalid: {\n      true: '[--color:var(--color-red-700)] dark:[--color:var(--color-red-600)] forced-colors:[--color:Mark]! group-pressed:[--color:var(--color-red-800)] dark:group-pressed:[--color:var(--color-red-700)]'\n    },\n    isDisabled: {\n      true: '[--color:var(--color-neutral-200)] dark:[--color:var(--color-neutral-700)] forced-colors:[--color:GrayText]!'\n    }\n  }\n});\n\nconst iconStyles =\n  'w-3.5 h-3.5 text-white group-disabled:text-neutral-400 dark:text-neutral-900 dark:group-disabled:text-neutral-600 forced-colors:text-[HighlightText] pointer-events-none';\n\ninterface CheckboxProps extends CheckboxFieldProps {\n  children?: React.ReactNode;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  return (\n    <CheckboxField {...props} className=\"flex flex-col gap-1 group\">\n      <CheckboxButton\n        className={composeRenderProps(props.className, (className, renderProps) =>\n          checkboxStyles({...renderProps, className})\n        )}>\n        {composeRenderProps(\n          props.children,\n          (children, {isSelected, isIndeterminate, ...renderProps}) => (\n            <>\n              <div\n                className={boxStyles({isSelected: isSelected || isIndeterminate, ...renderProps})}>\n                {isIndeterminate ? (\n                  <Minus aria-hidden className={iconStyles} />\n                ) : isSelected ? (\n                  <Check aria-hidden className={iconStyles} />\n                ) : null}\n              </div>\n              {children}\n            </>\n          )\n        )}\n      </CheckboxButton>\n      {props.description && <Description className=\"ms-6.5\">{props.description}</Description>}\n      <FieldError className=\"ms-6.5\">{props.errorMessage}</FieldError>\n    </CheckboxField>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}