{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"spinner","type":"registry:ui","title":"Spinner","description":"A small turning arc for work that runs right now – a faint ring in the text color, any size, inside a button or a status row, announced only when it has a label","dependencies":[],"files":[{"path":"registry/spinner/spinner.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ComponentPropsWithRef } from \"react\";\n\n/*\n * Spinner – a single self-contained file.\n * A small arc turning on a faint ring, drawn in the text color (currentColor), for something that works right now:\n * a run, a check, a connect. With `label` it is announced as a status; without it stays silent next to text that\n * already says what happens. Size it with `size`, color it with `color` on it or any parent.\n * The styles are injected below, so no extra files are needed.\n */\n\nexport type SpinnerProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\" | \"width\" | \"height\" | \"viewBox\"> & {\n  /** Width and height in px */\n  size?: number;\n  /** Announced to screen readers as a status – leave it out when text next to it already says what happens */\n  label?: string;\n};\n\nexport function Spinner({ size = 14, label, className, ...rest }: SpinnerProps) {\n  return (\n    <>\n      {/* React 19 hoists this into <head> once, no matter how many spinners render */}\n      <style href=\"ui-spinner\" precedence=\"default\">\n        {css}\n      </style>\n      <svg\n        {...rest}\n        className={[\"ui-spn\", className].filter(Boolean).join(\" \")}\n        viewBox=\"0 0 16 16\"\n        width={size}\n        height={size}\n        {...(label ? { role: \"status\", \"aria-label\": label } : { \"aria-hidden\": true })}\n      >\n        <circle cx=\"8\" cy=\"8\" r=\"6\" fill=\"none\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"2\" />\n        <path d=\"M8 2a6 6 0 0 1 6 6\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    </>\n  );\n}\n\nconst css = /* css */ `\n/* One turn every --ui-spn-speed – override it on .ui-spn (see Theming in the docs) */\n.ui-spn {\n  --ui-spn-speed: 750ms;\n  display: inline-block;\n  flex: none;\n  vertical-align: middle;\n  animation: ui-spn-turn var(--ui-spn-speed) linear infinite;\n}\n@keyframes ui-spn-turn { to { rotate: 360deg; } }\n\n/* Reduced motion: it still turns – it is the only sign that work goes on – but slowly */\n@media (prefers-reduced-motion: reduce) {\n  .ui-spn { --ui-spn-speed: 2400ms; }\n}\n`;\n"}]}