{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spiral",
  "dependencies": ["motion"],
  "files": [
    {
      "path": "registry/components/loading-ui/spiral.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Spiral({\n  dots = 8,\n  radius = 31.25,\n  className,\n  ...props\n}: React.ComponentProps<\"span\"> & { dots?: number; radius?: number }) {\n  return (\n    <span\n      role=\"status\"\n      className={cn(\"relative inline-block\", className)}\n      {...props}\n    >\n      {Array.from({ length: dots }, (_, index) => {\n        const angle = (index / dots) * (2 * Math.PI);\n        const x = `${50 + radius * Math.cos(angle)}%`;\n        const y = `${50 + radius * Math.sin(angle)}%`;\n\n        return (\n          <motion.span\n            key={index}\n            aria-hidden=\"true\"\n            className=\"absolute inline-block rounded-full bg-current\"\n            style={{\n              left: x,\n              top: y,\n              translate: \"-50% -50%\",\n              width: `${150 / dots}%`,\n              height: `${150 / dots}%`,\n            }}\n            animate={{\n              scale: [0, 1, 0],\n              opacity: [0, 1, 0],\n            }}\n            transition={{\n              duration: 1.5,\n              repeat: Infinity,\n              delay: (index / dots) * 1.5,\n              ease: \"easeInOut\",\n            }}\n          />\n        );\n      })}\n      <span className=\"sr-only\">Loading</span>\n    </span>\n  );\n}\n\nexport { Spiral };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}