{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "breadcrumb-stepper",
  "type": "registry:ui",
  "title": "Breadcrumb Stepper",
  "description": "Modern breadcrumb and multi-step progression bar with completed checkmarks and active glowing nodes.",
  "category": "navigation",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/navigation/breadcrumb-stepper/breadcrumb-stepper.tsx",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb-stepper.tsx",
      "content": "import React, { useState } from 'react';\nimport { Check, CaretRight } from '@phosphor-icons/react';\n\nconst STEPS = ['Design Tokens', 'Component Spec', 'Formal Proof', 'Deploy'];\n\nexport const BreadcrumbStepper: React.FC = () => {\n  const [activeStep, setActiveStep] = useState(2);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 w-full max-w-lg mx-auto\">\n      <div className=\"flex items-center gap-2 overflow-x-auto p-2 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/70 shadow-sm font-mono text-xs\">\n        {STEPS.map((step, idx) => {\n          const isDone = idx < activeStep;\n          const isCurrent = idx === activeStep;\n\n          return (\n            <React.Fragment key={step}>\n              <button\n                onClick={() => setActiveStep(idx)}\n                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-xl transition-colors cursor-pointer select-none ${\n                  isCurrent\n                    ? 'bg-indigo-600 text-white font-bold shadow-xs'\n                    : isDone\n                    ? 'text-emerald-500 font-semibold'\n                    : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300'\n                }`}\n              >\n                <span\n                  className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${\n                    isDone ? 'bg-emerald-500/20 text-emerald-500 font-bold' : isCurrent ? 'bg-white/20' : 'bg-zinc-200 dark:bg-zinc-800'\n                  }`}\n                >\n                  {isDone ? <Check size={10} weight=\"bold\" /> : idx + 1}\n                </span>\n                <span>{step}</span>\n              </button>\n              {idx < STEPS.length - 1 && (\n                <CaretRight size={12} className=\"text-zinc-400 shrink-0\" />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}