{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bars-spinner",
  "title": "Bars Spinner",
  "description": "A loading spinner with rotating bars animation.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/bars-spinner.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface BarsSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: number;\n  color?: string;\n}\n\nexport const BarsSpinner = React.forwardRef<HTMLDivElement, BarsSpinnerProps>(\n  ({ className, size = 20, color = \"currentColor\", ...props }, ref) => {\n    const bars = Array(12).fill(0);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"wrapper\", className)}\n        style={{\n          [\"--spinner-size\" as string]: `${size}px`,\n          [\"--spinner-color\" as string]: color,\n        }}\n        {...props}\n      >\n        <div className=\"spinner\">\n          {bars.map((_, i) => (\n            <div className=\"bar\" key={`spinner-bar-${i}`} />\n          ))}\n        </div>\n        <style jsx>{`\n          .wrapper {\n            height: var(--spinner-size, 20px);\n            width: var(--spinner-size, 20px);\n          }\n\n          .spinner {\n            position: relative;\n            top: 50%;\n            left: 50%;\n            height: var(--spinner-size, 20px);\n            width: var(--spinner-size, 20px);\n          }\n\n          .bar {\n            animation: spin 1.2s linear infinite;\n            background: var(--spinner-color);\n            border-radius: 6px;\n            height: 8%;\n            left: -10%;\n            position: absolute;\n            top: -3.9%;\n            width: 24%;\n          }\n\n          .bar:nth-child(1) {\n            animation-delay: -1.2s;\n            transform: rotate(0.0001deg) translate(146%);\n          }\n\n          .bar:nth-child(2) {\n            animation-delay: -1.1s;\n            transform: rotate(30deg) translate(146%);\n          }\n\n          .bar:nth-child(3) {\n            animation-delay: -1s;\n            transform: rotate(60deg) translate(146%);\n          }\n\n          .bar:nth-child(4) {\n            animation-delay: -0.9s;\n            transform: rotate(90deg) translate(146%);\n          }\n\n          .bar:nth-child(5) {\n            animation-delay: -0.8s;\n            transform: rotate(120deg) translate(146%);\n          }\n\n          .bar:nth-child(6) {\n            animation-delay: -0.7s;\n            transform: rotate(150deg) translate(146%);\n          }\n\n          .bar:nth-child(7) {\n            animation-delay: -0.6s;\n            transform: rotate(180deg) translate(146%);\n          }\n\n          .bar:nth-child(8) {\n            animation-delay: -0.5s;\n            transform: rotate(210deg) translate(146%);\n          }\n\n          .bar:nth-child(9) {\n            animation-delay: -0.4s;\n            transform: rotate(240deg) translate(146%);\n          }\n\n          .bar:nth-child(10) {\n            animation-delay: -0.3s;\n            transform: rotate(270deg) translate(146%);\n          }\n\n          .bar:nth-child(11) {\n            animation-delay: -0.2s;\n            transform: rotate(300deg) translate(146%);\n          }\n\n          .bar:nth-child(12) {\n            animation-delay: -0.1s;\n            transform: rotate(330deg) translate(146%);\n          }\n\n          @keyframes spin {\n            0% {\n              opacity: 1;\n            }\n            100% {\n              opacity: 0.15;\n            }\n          }\n        `}</style>\n      </div>\n    );\n  },\n);\n\nBarsSpinner.displayName = \"SpellUI.BarsSpinner\";\n\nexport type { BarsSpinnerProps };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}