{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "thinking",
  "title": "Thinking",
  "description": "A bar waveform with a rotating step label, for long-running work.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json",
    "https://spotcheckui.com/r/use-reduced-motion.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/thinking.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useReducedMotion } from \"@/registry/spotcheck/hooks/use-reduced-motion\"\n\nconst INTERVAL_MS = 1600\nconst BARS = 14\nconst BAR_DELAY_MS = 70\n\ntype ThinkingProps = {\n  /** The labels to rotate through. */\n  steps: string[]\n  /** Time on each label, in milliseconds. */\n  interval?: number\n  className?: string\n}\n\nexport function Thinking({ steps, interval = INTERVAL_MS, className }: ThinkingProps) {\n  const [index, setIndex] = React.useState(0)\n  const reduced = useReducedMotion()\n\n  React.useEffect(() => {\n    if (reduced || steps.length < 2) return\n    const timer = setInterval(() => setIndex((current) => (current + 1) % steps.length), interval)\n    return () => clearInterval(timer)\n  }, [interval, reduced, steps.length])\n\n  return (\n    <div className={cn(\"flex flex-wrap items-end gap-4 font-(family-name:--f-body)\", className)}>\n      <div aria-hidden className=\"flex h-14 items-end gap-[3px]\">\n        {Array.from({ length: BARS }, (_, bar) => (\n          <i\n            key={bar}\n            className=\"bg-ink h-1/2 w-1.5 nth-[3n]:bg-(--accent-ink) motion-safe:[animation:spotcheck-wave_1.1s_ease-in-out_infinite]\"\n            style={{ animationDelay: `${bar * BAR_DELAY_MS}ms` }}\n          />\n        ))}\n      </div>\n      <div>\n        <div className=\"spotcheck-label\">\n          Working · {index + 1}/{steps.length}\n        </div>\n        <div role=\"status\" className=\"spotcheck-display text-3xl leading-none\">\n          {steps[index]}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}