{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "A box ticked in pen, with an animated stroke.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/checkbox.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\n\n/** A box ticked in pen. */\nexport function Checkbox({ className = \"\", ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      className={`peer relative inline-flex size-[20px] shrink-0 cursor-pointer items-center justify-center border-[1.5px] border-(--ink-muted) bg-(--paper-raised) outline-none transition-colors hover:border-(--ink) focus-visible:ring-2 focus-visible:ring-(--pen) focus-visible:ring-offset-2 focus-visible:ring-offset-(--paper) disabled:cursor-not-allowed disabled:opacity-50 ${className}`}\n      style={{ borderRadius: \"3px 4px 2px 5px / 4px 2px 5px 3px\" }}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator forceMount className=\"pointer-events-none absolute -inset-[3px] data-[state=unchecked]:hidden\">\n        <svg viewBox=\"0 0 26 26\" className=\"h-full w-full overflow-visible text-(--pen)\" aria-hidden>\n          <path\n            d=\"M5 14 C 7 15.5, 9 18, 10.5 20.5 C 13 14, 17 8, 23 2.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.6\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeDasharray=\"30\"\n            data-paper-motion\n            style={{ animation: \"paper-tick .22s cubic-bezier(.3,.6,.4,1) both\", strokeDashoffset: 0 }}\n          />\n        </svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "radix-ui"
  ]
}