{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bobbing-dots",
  "dependencies": ["motion"],
  "files": [
    {
      "path": "registry/components/loading-ui/bobbing-dots.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction BobbingDots({\n  className,\n  dots = 3,\n  duration = 1,\n  ...props\n}: React.ComponentProps<\"span\"> & { dots?: number; duration?: number }) {\n  const transition = (index: number) => ({\n    duration,\n    repeat: Infinity,\n    repeatType: \"loop\" as const,\n    delay: index * 0.2,\n    ease: \"easeInOut\" as const,\n  });\n\n  return (\n    <span\n      role=\"status\"\n      className={cn(\"inline-flex items-center gap-[12%]\", className)}\n      {...props}\n    >\n      {Array.from({ length: dots }, (_, index) => (\n        <motion.span\n          key={index}\n          aria-hidden=\"true\"\n          initial={{ y: 0 }}\n          animate={{ y: [0, \"0.625em\", 0] }}\n          transition={transition(index)}\n          className=\"inline-block aspect-square grow rounded-full bg-current shadow-sm\"\n        />\n      ))}\n      <span className=\"sr-only\">Loading</span>\n    </span>\n  );\n}\n\nexport { BobbingDots };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}