{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "type": "registry:component",
  "title": "Spinner",
  "description": "Signals indeterminate progress. 16px ring with a 1px stroke; respects reduced motion.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/spinner.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  label?: string;\n}\n\nconst spin = stylex.keyframes({\n  to: { transform: \"rotate(360deg)\" },\n});\n\nconst styles = stylex.create({\n  spinner: {\n    display: \"inline-flex\",\n    width: \"1rem\",\n    height: \"1rem\",\n    color: vlak.ink,\n    verticalAlign: \"middle\",\n  },\n  ring: {\n    display: \"block\",\n    width: \"1rem\",\n    height: \"1rem\",\n    animationName: {\n      default: spin,\n      [mq.reduce]: \"none\",\n    },\n    animationDuration: \"0.7s\",\n    animationTimingFunction: \"linear\",\n    animationIterationCount: \"infinite\",\n  },\n});\n\n/** Hairline ring. Stops under prefers-reduced-motion. */\nexport const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { label = \"Loading\", className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-spinner\", className], styles.spinner);\n  const ring = rs([\"rs-spinner-ring\"], styles.ring);\n  return (\n    <span ref={ref} role=\"status\" aria-label={label} {...props} className={sx.className} style={{ ...sx.style, ...style }}>\n      <svg\n        viewBox=\"0 0 16 16\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={ring.className}\n        style={ring.style}\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeLinecap=\"butt\"\n          strokeLinejoin=\"miter\"\n          vectorEffect=\"non-scaling-stroke\"\n          strokeDasharray=\"28 13\"\n        />\n      </svg>\n    </span>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/spinner.tsx"
    },
    {
      "path": "vlak/styles/spinner.css",
      "content": "/* ── spinner: generated from packages/react/src/components/spinner.tsx ── */\n@keyframes rs-anim-spin{to{transform:rotate(360deg)}}\n.rs-spinner{display:inline-flex;width:1rem;height:1rem;color:var(--text);vertical-align:middle}\n.rs-spinner-ring{display:block;width:1rem;height:1rem;animation-name:rs-anim-spin;animation-duration:0.7s;animation-timing-function:linear;animation-iteration-count:infinite}\n@media (prefers-reduced-motion: reduce){.rs-spinner-ring{animation-name:none}}\n",
      "type": "registry:file",
      "target": "styles/vlak/spinner.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "feedback",
      "classes": [
        "rs-spinner",
        "rs-spinner-ring"
      ],
      "snippet": "<span class=\"rs-spinner\" role=\"status\" aria-label=\"Loading\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\"><circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-dasharray=\"28 13\" vector-effect=\"non-scaling-stroke\"/></svg></span>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Spinner",
        "Loader",
        "Loading indicator",
        "Activity indicator"
      ],
      "example": "import { Spinner } from \"@noorddev/vlak-react\";\n\n<Spinner label=\"Loading\" />",
      "usage": {
        "use": [
          "Short waits of unknown length inside a control or a row.",
          "label to say what is loading."
        ],
        "avoid": [
          "Known progress; use Progress.",
          "Whole-page waits; use Skeleton."
        ]
      },
      "a11y": [
        "Renders role=\"status\" with aria-label from label (\"Loading\" by default); the ring is aria-hidden.",
        "The animation stops under prefers-reduced-motion."
      ]
    }
  }
}