{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "Single checkbox control with checked and indeterminate states.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/choice-knobs.ts",
      "target": "@components/control-ui/knob-contracts/choice-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/choice.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const choiceKnobs = [\n  \"--cui-choice-radius\",\n  \"--cui-choice-border-color\",\n  \"--cui-choice-checked-background\",\n  \"--cui-choice-checked-border-color\",\n] as const;\nexport type ChoiceKnobStyle = Partial<Record<(typeof choiceKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/choice.css",
      "target": "@components/control-ui/styles/recipes/choice.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"]),\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"]) {\n    --cui-choice-radius: var(--radius-sm);\n    --cui-choice-border-color: var(--border);\n    --cui-choice-checked-background: var(--primary);\n    --cui-choice-checked-border-color: var(--primary);\n    --_choice-background: oklch(from var(--card) l c h / 0.72);\n    border-radius: var(--cui-choice-radius);\n    background: var(--_choice-background);\n    box-shadow:\n      inset 0 0 0 1px var(--cui-choice-border-color),\n      var(--shadow-sm);\n    color: currentColor;\n    outline: none;\n    transition-property: background-color, box-shadow, color;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"]) {\n    --cui-choice-radius: 9999px;\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"]:hover),\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"]:hover) {\n    --cui-choice-border-color: oklch(from var(--foreground) l c h / 0.25);\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"]:is([data-checked], [data-indeterminate])),\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"]:is([data-checked], [data-indeterminate])) {\n    --_choice-background: var(--cui-choice-checked-background);\n    --cui-choice-border-color: var(--cui-choice-checked-border-color);\n    color: var(--primary-foreground);\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"][data-disabled]),\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"][data-disabled]) {\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"][data-invalid]),\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"][data-invalid]) {\n    --cui-choice-border-color: var(--destructive);\n    box-shadow:\n      inset 0 0 0 1px var(--cui-choice-border-color),\n      var(--shadow-sm),\n      0 0 0 1px var(--destructive);\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"] [data-slot=\"indicator\"]),\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"][data-slot=\"item\"] [data-slot=\"indicator\"]) {\n    color: currentColor;\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"radio-group\"] [data-slot=\"indicator\"]) {\n    border-radius: 9999px;\n    background: var(--primary-foreground);\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"indicator\"]) {\n    color: currentcolor;\n  }\n\n  :where([data-control-family=\"choice\"][data-choice-kind=\"checkbox\"][data-slot=\"root\"]) {\n    outline-style: none;\n  }\n}\n\n@property --cui-choice-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-choice-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-choice-checked-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-choice-checked-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/checkbox.tsx",
      "target": "@components/control-ui/ui/checkbox.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport type { CSSProperties } from \"react\";\nimport type { ChoiceKnobStyle } from \"@/components/control-ui/knob-contracts/choice-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type CheckboxProps = Omit<\n  {\n    checked?: boolean;\n    defaultChecked?: boolean;\n    onCheckedChange?: (checked: boolean) => void;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    required?: boolean;\n    name?: string;\n    value?: string;\n    id?: string;\n    className?: string;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n  },\n  \"style\"\n> & { style?: CSSProperties & ChoiceKnobStyle };\n\n// tick and dash swap on Root's data-indeterminate in pure CSS.\nexport function Checkbox({\n  className,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate,\n  disabled,\n  readOnly,\n  required,\n  name,\n  value,\n  id,\n  ...props\n}: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-control-ui=\"checkbox\"\n      data-choice-kind=\"checkbox\"\n      data-control-family=\"choice\"\n      data-slot=\"root\"\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      indeterminate={indeterminate}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      name={name}\n      value={value}\n      id={id}\n      className={cn(\n        \"group/checkbox relative inline-flex size-4 shrink-0 cursor-pointer items-center justify-center\",\n        \"data-[disabled]:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-control-ui=\"checkbox\"\n        data-control-family=\"choice\"\n        data-choice-kind=\"checkbox\"\n        data-slot=\"indicator\"\n        className=\"flex items-center justify-center data-[unchecked]:hidden\"\n      >\n        {/* tick (default) and dash (indeterminate) both mount; Root's data-indeterminate toggles which shows */}\n        <svg viewBox=\"0 0 12 12\" className=\"size-3 group-data-[indeterminate]/checkbox:hidden\" aria-hidden=\"true\" fill=\"none\">\n          <path d=\"M2.5 6.5 5 9l4.5-5\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n        <svg viewBox=\"0 0 12 12\" className=\"hidden size-3 group-data-[indeterminate]/checkbox:block\" aria-hidden=\"true\" fill=\"none\">\n          <path d=\"M2.75 6h6.5\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n        </svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/choice.css\"": {}
  },
  "meta": {}
}