{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "step-progress",
  "type": "registry:ui",
  "title": "Step progress",
  "description": "Step progress bar made of segments that fill in accent for completed and current steps, with small labels under each. Fits checkout and onboarding flows.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/step-progress.tsx",
      "type": "registry:ui",
      "target": "components/ui/step-progress.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A row of labelled segments that fill as a multi-step flow advances, for onboarding and checkout. */\ntype StepProgressProps = {\n  /** Step labels in order. Defaults to Lumen's workspace setup. */\n  steps?: string[]\n  /** Zero-based index of the active step; earlier steps count as done. */\n  current?: number\n  className?: string\n}\n\nconst SAMPLE_STEPS = [\"Account\", \"Company\", \"Bank details\", \"Invite team\", \"Review\"]\n\nfunction StepProgress({ steps = SAMPLE_STEPS, current = 2, className }: StepProgressProps) {\n  return (\n    <ol data-slot=\"step-progress\" className={cn(\"flex w-full max-w-lg 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 flex-1 flex-col gap-1\" aria-current={active ? \"step\" : undefined}>\n            <div className={cn(\"h-1 rounded-full\", done || active ? \"bg-accent\" : \"bg-sunken\")} />\n            <span className={cn(\"text-[11px]\", active ? \"font-medium text-fg\" : \"text-fg-muted\")}>{s}</span>\n          </li>\n        )\n      })}\n    </ol>\n  )\n}\nexport { StepProgress }\nexport type { StepProgressProps }\n"
    }
  ]
}