{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spool-demo",
  "type": "registry:example",
  "title": "Spool Demo",
  "description": "A pill that changes shape to fit three different states, and can be interrupted part way.",
  "registryDependencies": [
    "@loomui/spool"
  ],
  "files": [
    {
      "path": "registry/example/spool-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Spool, SpoolItem } from \"@/registry/loomui/spool\"\n\nconst STATES = [\"idle\", \"playing\", \"saved\"]\nconst DWELL = 2600\n\n/** Five bars on five clocks, so the meter never pulses as one block. */\nfunction Meter() {\n  return (\n    <span aria-hidden=\"true\" className=\"flex items-end gap-[3px]\">\n      {[0.9, 1.4, 0.7, 1.2, 1].map((rate, index) => (\n        <span\n          key={index}\n          className=\"bg-accent animate-spool-meter h-3.5 w-[3px] rounded-full\"\n          style={{\n            animationDuration: `${rate}s`,\n            animationDelay: `${index * -0.31}s`,\n          }}\n        />\n      ))}\n    </span>\n  )\n}\n\nexport default function SpoolDemo() {\n  const [index, setIndex] = React.useState(0)\n  const value = STATES[index]\n\n  const advance = React.useCallback(\n    () => setIndex((current) => (current + 1) % STATES.length),\n    []\n  )\n\n  React.useEffect(() => {\n    const timer = window.setInterval(advance, DWELL)\n    return () => window.clearInterval(timer)\n  }, [advance])\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <Spool\n        value={value}\n        role=\"button\"\n        tabIndex={0}\n        aria-label=\"Next state\"\n        onClick={advance}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault()\n            advance()\n          }\n        }}\n        className=\"focus-visible:ring-ring/60 cursor-pointer focus-visible:ring-2 focus-visible:outline-none\"\n      >\n        <SpoolItem value=\"idle\">\n          <span className=\"bg-muted-foreground/40 size-2 rounded-full\" />\n          <span className=\"text-sm font-medium\">Idle, and smug about it</span>\n        </SpoolItem>\n\n        <SpoolItem value=\"playing\" className=\"gap-3 pr-5\">\n          <span className=\"bg-accent/15 text-accent grid size-6 place-items-center rounded-full\">\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n              className=\"size-2.5\"\n            >\n              <path d=\"M8 5v14l11-7z\" />\n            </svg>\n          </span>\n          <span className=\"font-mono text-sm\">shuttle.mp3</span>\n          <Meter />\n        </SpoolItem>\n\n        <SpoolItem value=\"saved\">\n          <span className=\"bg-accent/15 text-accent grid size-5 place-items-center rounded-full\">\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n              className=\"size-2.5\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span className=\"text-sm font-medium\">Saved</span>\n        </SpoolItem>\n      </Spool>\n\n      <p className=\"text-muted-foreground text-xs\">\n        Impatient? Click it mid-morph.\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}