{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "doc-stepper",
  "type": "registry:ui",
  "title": "DocStepper",
  "description": "Connected numbered step walkthrough for tutorials, runbooks, and installation guides.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/doc-stepper.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DocStepItem {\n  title: string;\n  description?: string;\n  status?: \"completed\" | \"active\" | \"pending\";\n  content?: React.ReactNode;\n}\n\nexport interface DocStepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  steps: DocStepItem[];\n  activeStep?: number;\n}\n\nexport function DocStepper({\n  steps,\n  activeStep,\n  className,\n  ...props\n}: DocStepperProps) {\n  return (\n    <div className={cn(\"space-y-6 my-6\", className)} {...props}>\n      {steps.map((step, idx) => {\n        let resolvedStatus = step.status || \"pending\";\n        if (typeof activeStep === \"number\") {\n          if (idx < activeStep) resolvedStatus = \"completed\";\n          else if (idx === activeStep) resolvedStatus = \"active\";\n          else resolvedStatus = \"pending\";\n        }\n\n        const isCompleted = resolvedStatus === \"completed\";\n        const isActive = resolvedStatus === \"active\";\n\n        return (\n          <div key={idx} className=\"flex gap-4 relative\">\n            {idx < steps.length - 1 && (\n              <div\n                className={cn(\n                  \"absolute left-[13px] top-[26px] bottom-[-24px] w-0.5 transition-colors\",\n                  isCompleted ? \"bg-emerald-500\" : \"bg-border\"\n                )}\n              />\n            )}\n\n            <div className=\"flex flex-col items-center flex-shrink-0 z-10\">\n              <div\n                className={cn(\n                  \"w-7 h-7 rounded-full flex items-center justify-center font-mono text-xs font-medium border transition-colors\",\n                  isCompleted && \"bg-card border-emerald-500 text-emerald-500\",\n                  isActive && \"bg-primary border-primary text-primary-foreground shadow-xs ring-4 ring-primary/20\",\n                  !isCompleted && !isActive && \"bg-card border-border text-muted-foreground\"\n                )}\n              >\n                {isCompleted ? \"✓\" : idx + 1}\n              </div>\n            </div>\n\n            <div className=\"flex-1 min-w-0\">\n              <h4 className=\"font-heading font-semibold text-foreground text-base leading-[28px] m-0 p-0\">\n                {step.title}\n              </h4>\n              {step.description && (\n                <p className=\"text-sm text-muted-foreground mt-1 mb-0 leading-relaxed\">\n                  {step.description}\n                </p>\n              )}\n              {step.content && <div className=\"mt-3\">{step.content}</div>}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}