{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "type": "registry:ui",
  "title": "Stepper",
  "description": "Numbered stepper for multi-step forms that shows each step as a bar and a label, highlighting completed and current steps. Semantic ordered list in React.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/stepper.tsx",
      "type": "registry:ui",
      "target": "components/ui/stepper.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Stepper({\n  steps = [\"Details\", \"Members\", \"Billing\"],\n  current = 0,\n  className,\n}: {\n  steps?: string[]\n  current?: number\n  className?: string\n}) {\n  return (\n    <ol data-slot=\"stepper\" className={cn(\"flex w-full items-center gap-2\", className)}>\n      {steps.map((s, i) => {\n        const done = i < current\n        const active = i === current\n        return (\n          <li key={s} className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <div\n              className={cn(\n                \"h-1 rounded-full\",\n                done || active ? \"bg-accent\" : \"bg-border\"\n              )}\n            />\n            <span className={cn(\"truncate text-xs\", active ? \"font-medium text-fg\" : \"text-fg-muted\")}>\n              {i + 1}. {s}\n            </span>\n          </li>\n        )\n      })}\n    </ol>\n  )\n}\nexport { Stepper }\n"
    }
  ]
}