{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/spinner/Spinner.tsx",
      "content": "import * as React from 'react'\nimport { Loader2 } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { spinnerVariants, type SpinnerVariants } from './spinner.variants'\n\n// Omit Lucide's own `size` (number|string) so the cva variant `size` wins.\nexport interface SpinnerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Loader2>, 'ref' | 'size'>,\n    SpinnerVariants {}\n\nconst Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(({ className, size = 'default', ...props }, ref) => (\n  <Loader2\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"spinner\"\n    className={cn(spinnerVariants({ size }), className)}\n    aria-label=\"Loading\"\n    role=\"status\"\n    {...props}\n  />\n))\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\n",
      "type": "registry:ui",
      "target": "~/components/ui/spinner/Spinner.tsx"
    },
    {
      "path": "packages/registry-react/components/spinner/spinner.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const spinnerVariants = cva('animate-spin text-muted-foreground', {\n  variants: {\n    size: {\n      default: 'size-6',\n      sm: 'size-4',\n      lg: 'size-8',\n      icon: 'size-4',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport type SpinnerVariants = VariantProps<typeof spinnerVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/spinner/spinner.variants.ts"
    },
    {
      "path": "packages/registry-react/components/spinner/index.ts",
      "content": "export { Spinner, type SpinnerProps } from './Spinner'\nexport { spinnerVariants, type SpinnerVariants } from './spinner.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/spinner/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.",
  "categories": [
    "feedback"
  ]
}