{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "The box pops as it fills and the check draws itself.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/checkbox.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/checkbox`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport {\n  Checkbox as CheckboxPart,\n  CheckboxIndicator as CheckboxIndicatorPart,\n} from \"@ui-sdk/react/checkbox\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/checkbox\"\n\n/* UI SDK accepts a class name or a function of state; keep both working. */\nfunction withClass<S>(base: string, className: string | ((state: S) => string | undefined) | undefined) {\n  return typeof className === \"function\" ? (state: S) => cn(base, className(state)) : cn(base, className)\n}\n\n/* Press: the box gives under the finger and springs back on release. */\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPart>) {\n  return (\n    <CheckboxPart\n      className={withClass(\n        cn(\n          \"transition-[scale] duration-[calc(200ms*var(--kf-speed,1))] ease-pop motion-reduce:transition-none!\",\n          \"not-data-disabled:not-data-readonly:active:scale-[0.86]\",\n        ),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The indicator pops in from 0.6 with an overshoot and shrinks away on the way out.\n   Any stroke inside it draws itself once it appears, a beat after the pop: with your own\n   icon (24px strokes) nothing else is needed; for paths with pathLength={1}, set\n   `[--kf-dash:1]` on the indicator. */\nfunction CheckboxIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxIndicatorPart>) {\n  return (\n    <CheckboxIndicatorPart\n      className={withClass(\n        cn(\n          \"transition-[scale,opacity] duration-[calc(480ms*var(--kf-speed,1))] ease-pop\",\n          \"data-starting-style:scale-[0.5] data-starting-style:opacity-0\",\n          \"data-ending-style:scale-[0.6] data-ending-style:opacity-0 data-ending-style:duration-[calc(150ms*var(--kf-speed,1))] data-ending-style:ease-house\",\n          \"[&_:is(path,line,polyline)]:[stroke-dasharray:var(--kf-dash,30)] [&_:is(path,line,polyline)]:[stroke-dashoffset:0]\",\n          \"[&_:is(path,line,polyline)]:starting:[stroke-dashoffset:var(--kf-dash,30)]\",\n          \"[&_:is(path,line,polyline)]:[transition:stroke-dashoffset_calc(260ms*var(--kf-speed,1))_var(--ease-house)_calc(70ms*var(--kf-speed,1))]\",\n          \"motion-reduce:transition-none! motion-reduce:[&_:is(path,line,polyline)]:[transition:none]\",\n        ),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Checkbox, CheckboxIndicator }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/checkbox.tsx"
    },
    {
      "path": "registry/components/keyframery/checkbox.tsx",
      "content": "\"use client\"\n\n/* Styled checkbox: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Checkbox as CheckboxPrimitive,\n  CheckboxGroup as CheckboxGroupPrimitive,\n  CheckboxIndicator as CheckboxIndicatorPrimitive,\n} from \"@/components/keyframery/primitives/checkbox\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive>) {\n  return (\n    <CheckboxPrimitive\n      className={cn(\n        \"relative inline-grid size-[18px] shrink-0 cursor-pointer place-items-center rounded-[5px] outline-none select-none\",\n        /* Unchecked: a small field. The primary key is the indicator, which pops in on top. */\n        \"bg-background shadow-[0_0_0_1px_rgb(0_0_0/0.14),0_1px_2px_rgb(0_0_0/0.05)]\",\n        \"dark:bg-accent/40 dark:shadow-[0_0_0_1px_rgb(255_255_255/0.14)]\",\n        \"not-data-disabled:not-data-readonly:hover:shadow-[0_0_0_1px_rgb(0_0_0/0.24),0_1px_2px_rgb(0_0_0/0.06)]\",\n        \"dark:not-data-disabled:not-data-readonly:hover:shadow-[0_0_0_1px_rgb(255_255_255/0.24)]\",\n        \"transition-[box-shadow,scale] motion-reduce:transition-none!\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default\",\n        className as string,\n      )}\n      {...props}\n    >\n      {children ?? <CheckboxIndicator />}\n    </CheckboxPrimitive>\n  )\n}\n\n/* The primary key with a check, or a dash while mixed. A new mark mounts each time the state\n   changes, so going from mixed to checked draws the check too. */\nfunction CheckboxIndicator({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CheckboxIndicatorPrimitive>) {\n  return (\n    <CheckboxIndicatorPrimitive\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 grid place-items-center rounded-[inherit] [--kf-dash:1] [&_svg]:size-3\",\n        \"bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.25)]\",\n        \"dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.7),0_1px_2px_rgb(0_0_0/0.5)]\",\n        \"[[data-slot=checkbox]:not([data-disabled]):not([data-readonly]):hover>&]:bg-[color-mix(in_oklab,var(--primary),var(--background)_10%)]\",\n        className as string,\n      )}\n      {...props}\n    >\n      {children ??\n        ((state: { indeterminate: boolean }) => (\n          <svg\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.75\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            {state.indeterminate ? (\n              <path key=\"dash\" d=\"M3 6h6\" pathLength={1} />\n            ) : (\n              <path key=\"check\" d=\"M2.75 6.25 5 8.5l4.25-5\" pathLength={1} />\n            )}\n          </svg>\n        ))}\n    </CheckboxIndicatorPrimitive>\n  )\n}\n\nfunction CheckboxGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxGroupPrimitive>) {\n  return <CheckboxGroupPrimitive className={cn(\"flex flex-col gap-2.5\", className as string)} {...props} />\n}\n\nexport { Checkbox, CheckboxGroup, CheckboxIndicator }\n",
      "type": "registry:component",
      "target": "components/keyframery/checkbox.tsx"
    }
  ],
  "type": "registry:component"
}