{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dots",
  "files": [
    {
      "path": "registry/components/loading-ui/dots.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nfunction Dots({\n  className,\n  dots = 3,\n  ...props\n}: React.ComponentProps<\"span\"> & { dots?: number }) {\n  return (\n    <>\n      <style>{`\n        @keyframes loading-ui-dots-blink {\n          0%,\n          100% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n        }\n      `}</style>\n      <span\n        role=\"status\"\n        className={cn(\n          \"inline-flex items-center justify-center gap-[12%]\",\n          className,\n        )}\n        {...props}\n      >\n        {Array.from({ length: dots }, (_, index) => (\n          <span\n            key={index}\n            data-slot=\"dot\"\n            aria-hidden=\"true\"\n            style={{\n              animation:\n                \"loading-ui-dots-blink var(--duration, 1.4s) infinite both\",\n              animationDelay: `calc(var(--delay, 0.2s) * ${index})`,\n            }}\n            className=\"aspect-square grow rounded-full bg-current\"\n          />\n        ))}\n        <span className=\"sr-only\">Loading</span>\n      </span>\n    </>\n  );\n}\n\nexport { Dots };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}