{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "plan",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/plan.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport type StepState = \"pending\" | \"active\" | \"done\" | \"error\";\n\nexport type PlanStep = { id: string; title: string; state: StepState; detail?: string };\n\nfunction StepIcon({ state }: { state: StepState }) {\n  const base = \"flex size-5 shrink-0 items-center justify-center rounded-sm border text-[10px]\";\n  if (state === \"done\")\n    return (\n      <span aria-hidden className={cn(base, \"border-transparent bg-foreground text-background\")}>\n        <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"size-3\"><path d=\"m3.5 8.5 3 3 6-6.5\" /></svg>\n      </span>\n    );\n  if (state === \"active\")\n    return <span aria-hidden className={cn(base, \"border-primary\")}><span className=\"size-2 animate-pulse motion-reduce:animate-none rounded-[1px] bg-primary\" /></span>;\n  if (state === \"error\")\n    return <span aria-hidden className={cn(base, \"border-red-500 text-red-500\")}>!</span>;\n  return <span aria-hidden className={cn(base, \"border-border\")} />;\n}\n\nconst stateText: Record<StepState, string> = {\n  done: \"Completed\",\n  active: \"In progress\",\n  pending: \"Not started\",\n  error: \"Failed\",\n};\n\nexport function Plan({ steps, className }: { steps: PlanStep[]; className?: string }) {\n  return (\n    <ol className={cn(\"space-y-0\", className)} aria-label=\"Plan\">\n      {steps.map((step, i) => (\n        <li\n          key={step.id}\n          aria-current={step.state === \"active\" ? \"step\" : undefined}\n          className=\"relative flex gap-3 pb-4 last:pb-0\"\n        >\n          {i < steps.length - 1 && (\n            <span aria-hidden className={cn(\"absolute left-[9.5px] top-6 bottom-1 w-px\", step.state === \"done\" ? \"bg-foreground/50\" : \"bg-border\")} />\n          )}\n          <StepIcon state={step.state} />\n          <div className=\"min-w-0 -mt-px\">\n            <div className={cn(\"text-sm\", step.state === \"active\" && \"font-medium\", step.state === \"pending\" && \"text-muted-foreground\", step.state === \"done\" && \"text-muted-foreground line-through decoration-border\")}>\n              <span className=\"sr-only\">{stateText[step.state]}: </span>\n              {step.title}\n            </div>\n            {step.detail && <div className=\"mt-0.5 text-xs text-muted-foreground\">{step.detail}</div>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}