{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "description": "themed loading indicator · announced as \"Loading\"",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/spinner.tsx",
      "content": "import { cn } from 'cn';\nimport { LoaderCircleIcon } from 'lucide-react';\n\ntype Props = {\n  /** `small` 20px (inside buttons and rows) · `large` 36px (loading a page or card). */\n  size?: 'small' | 'large';\n  /** `primary-foreground` is the one to use inside a filled Button. */\n  tone?: 'primary' | 'primary-foreground' | 'foreground' | 'muted';\n  /** What is loading. Default \"Loading\". */\n  'aria-label'?: string;\n  className?: string;\n};\n\nconst TONE = {\n  primary: 'text-primary',\n  'primary-foreground': 'text-primary-foreground',\n  foreground: 'text-foreground',\n  muted: 'text-muted-foreground',\n} as const;\n\n/** Themed loading indicator for buttons, cards and loading pages. Announced as \"Loading\"; say what is loading with `aria-label`. */\nexport function Spinner({ size = 'small', tone = 'primary', className, ...props }: Props) {\n  return (\n    <span role=\"status\" aria-label={props['aria-label'] ?? 'Loading'} className={cn('inline-flex', TONE[tone], className)}>\n      <LoaderCircleIcon className={cn('animate-spin motion-reduce:[animation-duration:1.5s]', size === 'large' ? 'size-9' : 'size-5')} aria-hidden />\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/spinner.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Spinner"
    ],
    "api": "<Spinner size=\"small|large\" tone=\"primary|primary-foreground|foreground|muted\" aria-label? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "feedback"
  ],
  "type": "registry:component"
}