{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "Where someone is in something with a beginning and an end.",
  "dependencies": [
    "lucide-react@^1.31.0"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/stepper/stepper.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type Step = {\n  id: string\n  label: string\n  description?: string\n}\n\nexport type StepperProps = Omit<\n  React.HTMLAttributes<HTMLElement>,\n  \"children\" | \"onSelect\"\n> & {\n  steps: readonly Step[]\n  /** Index of the step being worked on. */\n  current: number\n  orientation?: \"horizontal\" | \"vertical\"\n  /** Lets a finished step be revisited. */\n  onSelect?: (index: number, step: Step) => void\n  label?: string\n}\n\n/**\n * Where someone is in something with a beginning and an end. The position is\n * written out as well as drawn, so the progress does not live only in the\n * colour of a circle.\n */\nexport function Stepper({\n  steps,\n  current,\n  orientation = \"horizontal\",\n  onSelect,\n  label = \"Progress\",\n  className,\n  ...rootProps\n}: StepperProps) {\n  const horizontal = orientation === \"horizontal\"\n\n  return (\n    <nav aria-label={label} data-slot=\"stepper\" {...rootProps}>\n      <ol\n        className={cn(\n          \"flex\",\n          horizontal ? \"flex-row items-start\" : \"flex-col\",\n          className\n        )}\n      >\n        {steps.map((step, index) => {\n          const done = index < current\n          const active = index === current\n          const state = done ? \"done\" : active ? \"active\" : \"todo\"\n          const reachable = done && onSelect !== undefined\n\n          const marker = (\n            <span\n              className={cn(\n                \"inline-flex size-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors duration-200 motion-reduce:transition-none\",\n                done && \"bg-foreground text-background border-transparent\",\n                active && \"border-foreground text-foreground\",\n                !done && !active && \"border-border text-muted-foreground\"\n              )}\n            >\n              {done ? <Check aria-hidden=\"true\" size={14} /> : index + 1}\n            </span>\n          )\n\n          return (\n            <li\n              key={step.id}\n              data-slot=\"stepper-step\"\n              data-state={state}\n              aria-current={active ? \"step\" : undefined}\n              className={cn(\n                \"flex gap-3\",\n                horizontal ? \"flex-1 flex-col\" : \"pb-6 last:pb-0\"\n              )}\n            >\n              <div\n                className={cn(\n                  \"flex items-center gap-3\",\n                  horizontal ? \"w-full\" : \"flex-col\"\n                )}\n              >\n                {reachable ? (\n                  <button\n                    type=\"button\"\n                    className=\"focus-visible:ring-ring rounded-full focus-visible:ring-2 focus-visible:outline-none\"\n                    onClick={() => onSelect(index, step)}\n                  >\n                    <span className=\"sr-only\">Go back to {step.label}</span>\n                    {marker}\n                  </button>\n                ) : (\n                  marker\n                )}\n\n                {index < steps.length - 1 && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      \"bg-border\",\n                      horizontal ? \"h-px flex-1\" : \"w-px flex-1\",\n                      done && \"bg-foreground\"\n                    )}\n                  />\n                )}\n              </div>\n\n              <div className={cn(horizontal ? \"pr-4\" : \"pb-2\")}>\n                <p\n                  className={cn(\n                    \"text-sm font-semibold\",\n                    !done && !active && \"text-muted-foreground\"\n                  )}\n                >\n                  {step.label}\n                  <span className=\"sr-only\">\n                    {done\n                      ? \", finished\"\n                      : active\n                        ? \", in progress\"\n                        : \", not started\"}\n                  </span>\n                </p>\n\n                {step.description && (\n                  <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                    {step.description}\n                  </p>\n                )}\n              </div>\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation",
    "progress",
    "form",
    "wizard"
  ],
  "type": "registry:ui"
}