{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "description": "A single-element loading ring drawn with a conic-gradient mask, with a polite status role.",
  "files": [
    {
      "path": "registry/tealmac/spinner.tsx",
      "content": "import { type CSSProperties, type HTMLAttributes } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Diameter in pixels. */\n  size?: number\n  /** Ring thickness in pixels. */\n  thickness?: number\n  /** Ring color. Defaults to the primary token. */\n  color?: string\n  /** Accessible status text. */\n  label?: string\n}\n\n/**\n * Spinner is a loading indicator: a rotating ring with a fading tail, drawn as\n * a conic-gradient mask so there's a single element and no SVG. It exposes a\n * polite status via role=\"status\"; the spin pauses under reduced motion.\n */\nexport function Spinner({\n  size = 24,\n  thickness = 3,\n  color = \"var(--primary)\",\n  label = \"Loading\",\n  className,\n  style,\n  ...props\n}: SpinnerProps) {\n  return (\n    <span\n      role=\"status\"\n      aria-label={label}\n      className={cn(\n        \"inline-block animate-spin rounded-full motion-reduce:animate-none\",\n        className\n      )}\n      style={\n        {\n          width: size,\n          height: size,\n          background: `conic-gradient(from 0deg, transparent 0%, ${color} 90%)`,\n          WebkitMask: `radial-gradient(farthest-side, transparent calc(100% - ${thickness}px), #000 calc(100% - ${thickness}px))`,\n          mask: `radial-gradient(farthest-side, transparent calc(100% - ${thickness}px), #000 calc(100% - ${thickness}px))`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n\nexport default Spinner\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}