{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loading-dots",
  "title": "Loading Dots",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A compact loading status with staggered token-colored dots that stop for reduced motion.",
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/loading-dots.tsx",
      "content": "// Ballmac UI: Loading Dots. https://ui.ballmac.com/components/loading-dots\n\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype LoadingDotsProps = React.ComponentProps<\"span\"> & {\n  /** Status text available to screen readers. */\n  label?: string\n  /** Dot size. */\n  size?: \"sm\" | \"default\" | \"lg\"\n}\n\nfunction LoadingDots({\n  className,\n  label,\n  size = \"default\",\n  ...props\n}: LoadingDotsProps) {\n  const msg = useMessages()\n  label ??= msg(\"loading-dots.label\", \"Loading\")\n  return (\n    <span\n      data-slot=\"loading-dots\"\n      role=\"status\"\n      aria-label={label}\n      className={cn(\"text-primary inline-flex items-center gap-1\", className)}\n      {...props}\n    >\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          aria-hidden=\"true\"\n          className={cn(\n            \"rounded-full bg-current motion-safe:animate-bounce\",\n            size === \"sm\" && \"size-1\",\n            size === \"default\" && \"size-1.5\",\n            size === \"lg\" && \"size-2\",\n          )}\n          style={{ animationDelay: `${index * 120}ms` }}\n        />\n      ))}\n    </span>\n  )\n}\n\nexport { LoadingDots, type LoadingDotsProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/loading-dots.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "loading",
      "status",
      "animation"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A compact loading status with staggered token-colored dots that stop for reduced motion.",
      "whenToUse": [
        "Indicate short pending work",
        "Pair a compact loader with a button label"
      ],
      "whenNotToUse": [
        "Use skeleton for a full content placeholder"
      ],
      "composesWith": [
        "spinner",
        "button"
      ],
      "a11y": [
        {
          "keys": "None",
          "action": "Accessible status label"
        }
      ],
      "customization": [
        "size: sm | default | lg",
        "Status label"
      ]
    },
    "examples": [
      "loading-dots-demo",
      "loading-dots-states"
    ],
    "url": "https://ui.ballmac.com/components/loading-dots"
  },
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}