{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dots-ring",
  "files": [
    {
      "path": "registry/components/loading-ui/dots-ring.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ntype DotsRingProps = React.ComponentProps<\"span\"> & {\n  dots?: number;\n  dotScale?: number;\n  radiusScale?: number;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction DotsRing({\n  className,\n  style,\n  dots = 8,\n  dotScale = 0.16,\n  radiusScale = 0.34,\n  ...props\n}: DotsRingProps) {\n  const dotCount = Math.max(4, Math.floor(dots));\n  const safeDotScale = clamp(dotScale, 0.2, 0.4);\n  const safeRadiusScale = clamp(radiusScale, 0, 0.5 - safeDotScale / 2);\n\n  return (\n    <>\n      <style>{`\n        @keyframes loading-ui-dots-ring-pulse {\n          0%,\n          100% {\n            opacity: 0.25;\n            transform: scale(0.65);\n          }\n\n          12.5% {\n            opacity: 1;\n            transform: scale(1);\n          }\n\n          25% {\n            opacity: 0.75;\n            transform: scale(0.85);\n          }\n\n          50% {\n            opacity: 0.35;\n            transform: scale(0.7);\n          }\n        }\n      `}</style>\n      <span\n        role=\"status\"\n        className={cn(\n          \"@container-[size] relative inline-flex aspect-square items-center justify-center\",\n          className,\n        )}\n        style={style}\n        {...props}\n      >\n        <span aria-hidden=\"true\" className=\"relative block size-full\">\n          {Array.from({ length: dotCount }, (_, index) => {\n            const angle = (index / dotCount) * Math.PI * 2;\n            const x = `${(Math.sin(angle) * safeRadiusScale * 100).toFixed(2)}cqmin`;\n            const y = `${(-Math.cos(angle) * safeRadiusScale * 100).toFixed(2)}cqmin`;\n\n            return (\n              <span\n                key={index}\n                className=\"absolute top-1/2 left-1/2\"\n                style={{\n                  width: `calc(${safeDotScale} * 100cqmin)`,\n                  height: `calc(${safeDotScale} * 100cqmin)`,\n                  transform: `translate(-50%, -50%) translate(${x}, ${y})`,\n                }}\n              >\n                <span\n                  className=\"block size-full rounded-full bg-current\"\n                  style={{\n                    animation:\n                      \"loading-ui-dots-ring-pulse var(--duration, 1s) linear infinite\",\n                    animationDelay: `calc(var(--duration, 1s) / ${dotCount} * ${index - dotCount})`,\n                  }}\n                />\n              </span>\n            );\n          })}\n        </span>\n        <span className=\"sr-only\">Loading</span>\n      </span>\n    </>\n  );\n}\n\nexport { DotsRing };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}