{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner-variants",
  "title": "Spinner Variants",
  "description": "Collection of loading spinners: ring, dots, pulse, and bars",
  "files": [
    {
      "path": "registry/pioneerui/spinner-variants.tsx",
      "content": "import React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface SpinnerProps extends React.SVGAttributes<SVGElement> {\n  size?: number\n  color?: string\n}\n\nexport function SpinnerRing({ size = 24, className, ...props }: SpinnerProps) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.5}\n      strokeLinecap=\"round\"\n      className={cn(\"animate-spin\", className)}\n      {...props}\n    >\n      <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n    </svg>\n  )\n}\n\nexport function SpinnerDots({ size = 40, className, ...props }: SpinnerProps) {\n  return (\n    <div\n      className={cn(\"flex items-center justify-center gap-1\", className)}\n      aria-label=\"Loading\"\n      style={{ width: size, height: size / 2 }}\n    >\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          className=\"rounded-full bg-current\"\n          style={{\n            width: size / 6,\n            height: size / 6,\n            animation: \"spinner-dots 1.2s infinite ease-in-out\",\n            animationDelay: `${i * 0.2}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes spinner-dots {\n          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }\n          40% { transform: scale(1); opacity: 1; }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport function SpinnerPulse({ size = 32, className, ...props }: SpinnerProps) {\n  return (\n    <span\n      className={cn(\"inline-block rounded-full bg-current\", className)}\n      style={{\n        width: size,\n        height: size,\n        animation: \"spinner-pulse 1.2s cubic-bezier(0, 0, 0.2, 1) infinite\",\n      }}\n      aria-label=\"Loading\"\n    >\n      <style>{`\n        @keyframes spinner-pulse {\n          0% { transform: scale(0.8); opacity: 0.8; }\n          50% { transform: scale(1); opacity: 1; }\n          100% { transform: scale(0.8); opacity: 0.8; }\n        }\n      `}</style>\n    </span>\n  )\n}\n\nexport function SpinnerBars({ size = 32, className }: SpinnerProps) {\n  return (\n    <div\n      className={cn(\"flex items-end justify-center gap-[3px]\", className)}\n      aria-label=\"Loading\"\n      style={{ width: size, height: size }}\n    >\n      {[0, 1, 2, 3].map((i) => (\n        <span\n          key={i}\n          className=\"w-[20%] rounded-sm bg-current\"\n          style={{\n            height: \"100%\",\n            animation: \"spinner-bars 1s ease-in-out infinite\",\n            animationDelay: `${i * 0.15}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes spinner-bars {\n          0%, 40%, 100% { transform: scaleY(0.4); opacity: 0.4; }\n          20% { transform: scaleY(1); opacity: 1; }\n        }\n      `}</style>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/spinner-variants.tsx"
    }
  ],
  "type": "registry:ui"
}