{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loading-dots",
  "title": "LoadingDots",
  "description": "Three dots beside what is happening.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "loading-dots/LoadingDots.css",
      "content": ".cr-loading-dots {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-loading-dots[data-tone='muted'] {\n  color: var(--cr-color-text-muted);\n}\n\n.cr-loading-dots__dots {\n  display: inline-flex;\n  gap: 4px;\n}\n\n.cr-loading-dots__dots > span {\n  width: 7px;\n  height: 7px;\n  border-radius: var(--cr-radius-full);\n  background: currentColor;\n  animation: cr-dots 1.2s ease-in-out infinite;\n}\n\n.cr-loading-dots__dots > span:nth-child(2) { animation-delay: 0.15s; }\n.cr-loading-dots__dots > span:nth-child(3) { animation-delay: 0.3s; }\n\n@keyframes cr-dots {\n  0%, 60%, 100% { opacity: 0.25; }\n  30% { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cr-loading-dots__dots > span { animation: none; opacity: 0.6; }\n}\n",
      "type": "registry:file",
      "target": "@components/creance/loading-dots/LoadingDots.css"
    },
    {
      "path": "loading-dots/LoadingDots.tsx",
      "content": "import type { ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './LoadingDots.css';\n\nexport interface LoadingDotsProps {\n  /** What is happening, in words: \"Deploy Fixer is thinking\". Announced politely. */\n  children: ReactNode;\n  tone?: 'default' | 'muted';\n  className?: string;\n}\n\n/** Three dots that pulse in turn, beside what is happening. They hold still under reduced motion. */\nexport function LoadingDots({ children, tone = 'default', className }: LoadingDotsProps) {\n  return (\n    <span role=\"status\" className={cx('cr-loading-dots', className)} data-tone={tone}>\n      <span className=\"cr-loading-dots__dots\" aria-hidden=\"true\">\n        <span />\n        <span />\n        <span />\n      </span>\n      {children}\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/loading-dots/LoadingDots.tsx"
    }
  ],
  "categories": [
    "atom",
    "feedback"
  ],
  "type": "registry:ui"
}