{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "A binary choice with a precise, legible state.",
  "categories": [
    "inputs"
  ],
  "dependencies": [
    "@radix-ui/react-checkbox",
    "motion"
  ],
  "registryDependencies": [
    "https://irisui.dev/r/foundation.json",
    "https://irisui.dev/r/utils.json",
    "https://irisui.dev/r/motion-tokens.json"
  ],
  "files": [
    {
      "path": "src/registry/components/checkbox/checkbox.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { Transition } from \"motion/react\";\nimport { cn } from \"../lib/utils\";\nimport { motionTokens } from \"../lib/motion-tokens\";\n\nexport interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  label?: string;\n  description?: string;\n}\n\n/** Both marks share three points, so the check morphs into the dash and back instead of swapping. */\nconst checkPath = \"M4.25 9.25 L7.25 12.25 L13.75 5.75\";\nconst dashPath = \"M4.75 9 L9 9 L13.25 9\";\n\nconst visual = cn(\n  \"relative block size-[18px] rounded-[5px] border border-line-strong bg-surface [transition:border-color_var(--duration-fast)_var(--ease-standard),transform_var(--duration-spring)_var(--ease-spring)]\",\n  \"group-data-[state=checked]/checkbox:border-control-on group-data-[state=indeterminate]/checkbox:border-control-on group-hover/checkbox:group-enabled/checkbox:group-data-[state=unchecked]/checkbox:border-ink-3\",\n  \"group-active/checkbox:group-enabled/checkbox:[transform:scale(.95)] group-active/checkbox:group-enabled/checkbox:[transition:border-color_var(--duration-fast)_var(--ease-standard),transform_var(--duration-instant)_var(--ease-standard)]\",\n  \"motion-reduce:transform-none motion-reduce:transition-none motion-reduce:group-active/checkbox:group-enabled/checkbox:transform-none motion-reduce:group-active/checkbox:group-enabled/checkbox:transition-none\",\n);\n\nexport const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(function Checkbox(\n  { label, description, id, className, checked, defaultChecked, onCheckedChange, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const controlId = id ?? generatedId;\n  const reduced = useReducedMotion();\n  const [internal, setInternal] = useState<CheckboxPrimitive.CheckedState>(defaultChecked ?? false);\n  const state = checked ?? internal;\n  const on = state !== false;\n  const change = (next: CheckboxPrimitive.CheckedState) => {\n    if (checked === undefined) setInternal(next);\n    onCheckedChange?.(next);\n  };\n  const fade: Transition = {\n    duration: on ? motionTokens.duration.instant : motionTokens.duration.fast,\n    ease: [...motionTokens.ease.standard],\n  };\n  return (\n    <div className=\"inline-flex min-w-0 items-start gap-0\">\n      <CheckboxPrimitive.Root\n        {...props}\n        id={controlId}\n        ref={ref}\n        checked={state}\n        onCheckedChange={change}\n        className={cn(\n          \"group/checkbox relative grid size-control-md flex-none cursor-pointer place-items-center rounded-control border-0 bg-transparent p-0 text-control-glyph [-webkit-tap-highlight-color:transparent] disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        aria-describedby={description ? `${controlId}-description` : undefined}\n        aria-label={props[\"aria-label\"] ?? (label ? undefined : \"Checkbox\")}\n      >\n        {/* The square is the only part that reacts to a press, so the hit area and label never move. */}\n        <span className={visual} aria-hidden=\"true\">\n          <motion.span\n            className=\"absolute -inset-px rounded-[inherit] bg-control-on\"\n            initial={false}\n            animate={{ opacity: on ? 1 : 0, scale: on ? 1 : 0.6 }}\n            transition={reduced ? { duration: 0 } : { scale: motionTokens.spring.snappy, opacity: fade }}\n          />\n          <svg\n            className=\"absolute -inset-px size-[18px] overflow-visible\"\n            viewBox=\"0 0 18 18\"\n            fill=\"none\"\n            focusable=\"false\"\n          >\n            <motion.path\n              initial={false}\n              animate={{\n                d: state === \"indeterminate\" ? dashPath : checkPath,\n                pathLength: on ? 1 : 0,\n                opacity: on ? 1 : 0,\n              }}\n              transition={\n                reduced\n                  ? { duration: 0 }\n                  : { d: motionTokens.spring.morph, pathLength: motionTokens.spring.snappy, opacity: fade }\n              }\n              stroke=\"currentColor\"\n              strokeWidth={1.75}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </CheckboxPrimitive.Root>\n      {/* The label's first line centers on the square: (36px box - 19.6px line) / 2. */}\n      {label || description ? (\n        <div className=\"ml-px grid min-w-0 gap-0.5 pt-[calc((var(--control-height-md)_-_var(--text-sm)_*_1.4)_/_2)]\">\n          {label ? (\n            <label className=\"cursor-pointer text-sm leading-body font-medium text-ink\" htmlFor={controlId}>\n              {label}\n            </label>\n          ) : null}\n          {description ? (\n            <span className=\"text-xs leading-body text-ink-3\" id={`${controlId}-description`}>\n              {description}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nCheckbox.displayName = \"Checkbox\";\n",
      "type": "registry:component",
      "target": "@components/iris/checkbox/checkbox.tsx"
    }
  ],
  "docs": "Docs and live preview: https://irisui.dev/components/checkbox",
  "meta": {
    "kind": "component",
    "group": "Inputs",
    "export": "Checkbox",
    "tags": [
      "field",
      "form"
    ],
    "docs": "https://irisui.dev/components/checkbox"
  }
}