{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "description": "A loading spinner component with customizable size and color.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/spinner.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype SizeVariant = \"sm\" | \"default\" | \"md\" | \"lg\";\ntype SpeedVariant = \"slow\" | \"normal\" | \"fast\";\n\nconst SpinnerPrimitive = React.forwardRef<\n  React.ElementRef<\"svg\">,\n  React.SVGProps<SVGSVGElement>\n>(\n  ({ ...props }, ref) => {\n    const id = React.useId();\n\n    return (\n      <svg ref={ref} data-slot-icon viewBox=\"0 0 24 24\" {...props}>\n        <defs>\n          <linearGradient\n            id={`gradient-1-${id}`}\n            x1=\"50%\"\n            x2=\"50%\"\n            y1=\"5.271%\"\n            y2=\"91.793%\"\n          >\n            <stop offset=\"0%\" stopColor=\"currentColor\" />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity={0.55} />\n          </linearGradient>\n          <linearGradient\n            id={`gradient-2-${id}`}\n            x1=\"50%\"\n            x2=\"50%\"\n            y1=\"15.24%\"\n            y2=\"87.15%\"\n          >\n            <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity={0} />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity={0.55} />\n          </linearGradient>\n        </defs>\n        <g fill=\"none\">\n          <path\n            d=\"M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021\"\n            fill={`url(#gradient-1-${id})`}\n            transform=\"translate(1.5 1.625)\"\n          />\n          <path\n            d=\"M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118\"\n            fill={`url(#gradient-2-${id})`}\n            transform=\"translate(1.5 1.625)\"\n          />\n        </g>\n      </svg>\n    );\n  },\n);\n\nSpinnerPrimitive.displayName = \"SpellUI.SpinnerPrimitive\";\n\nconst sizeClasses: Record<SizeVariant, string> = {\n  sm: \"h-4 w-4\",\n  default: \"h-5 w-5\",\n  md: \"h-6 w-6\",\n  lg: \"h-8 w-8\",\n};\n\nconst speedClasses: Record<SpeedVariant, string> = {\n  slow: \"animate-[spin_2s_linear_infinite]\",\n  normal: \"animate-spin\",\n  fast: \"animate-[spin_0.5s_linear_infinite]\",\n};\n\ninterface SpinnerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"svg\">, \"display\" | \"opacity\"> {\n  size?: SizeVariant;\n  speed?: SpeedVariant;\n  className?: string;\n}\n\nexport const Spinner = React.forwardRef<\n  React.ComponentRef<typeof SpinnerPrimitive>,\n  SpinnerProps\n>(\n  ({ className, size = \"md\", speed = \"normal\", ...props }, ref) => {\n    return (\n      <span\n        data-spinner\n        className={cn(\n          \"inline-block\",\n          speedClasses[speed],\n          sizeClasses[size],\n          className,\n        )}\n      >\n        <SpinnerPrimitive\n          ref={ref}\n          aria-hidden\n          aria-label=\"Loading\"\n          role=\"presentation\"\n          className=\"h-full w-full\"\n          {...props}\n        />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = \"SpellUI.Spinner\";\n\nexport type { SpinnerProps };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}