{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "A compact horizontal or vertical stepper for install, publish, and form flows.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/corr/components/stepper.tsx",
      "content": "import type { CSSProperties } from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type StepperItem = {\n  id: string\n  title: string\n  description?: string\n}\n\nexport function Stepper({\n  steps,\n  currentStep,\n  orientation = \"horizontal\",\n  className,\n}: {\n  steps: StepperItem[]\n  currentStep: number\n  orientation?: \"horizontal\" | \"vertical\"\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        orientation === \"vertical\"\n          ? \"grid gap-4\"\n          : \"grid gap-4 sm:grid-cols-[repeat(var(--step-count),minmax(0,1fr))]\",\n        className\n      )}\n      style={{ \"--step-count\": steps.length } as CSSProperties}\n    >\n      {steps.map((step, index) => {\n        const complete = index < currentStep\n        const active = index === currentStep\n\n        return (\n          <div\n            key={step.id}\n            className={cn(\n              \"relative flex gap-3\",\n              orientation === \"horizontal\" && \"sm:flex-col\"\n            )}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div\n                className={cn(\n                  \"flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium transition-colors\",\n                  complete &&\n                    \"border-primary bg-primary text-primary-foreground\",\n                  active && \"border-primary text-primary\",\n                  !complete && !active && \"border-border text-muted-foreground\"\n                )}\n              >\n                {complete ? <Check className=\"size-3.5\" /> : index + 1}\n              </div>\n              {index < steps.length - 1 ? (\n                <div\n                  className={cn(\n                    \"bg-border\",\n                    orientation === \"vertical\"\n                      ? \"absolute top-8 bottom-[-1rem] left-3.5 w-px\"\n                      : \"hidden h-px flex-1 sm:block\",\n                    complete && \"bg-primary\"\n                  )}\n                />\n              ) : null}\n            </div>\n            <div className=\"min-w-0\">\n              <div className=\"text-sm font-medium\">{step.title}</div>\n              {step.description ? (\n                <div className=\"mt-1 text-xs leading-5 text-muted-foreground\">\n                  {step.description}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}