{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "steps-1",
  "title": "Horizontal Numbered Stepper",
  "description": "Horizontal progress stepper with numbered nodes, connectors, and labels across completed, current, and upcoming states for checkout or onboarding.",
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/steps/1/steps-block.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Status = \"done\" | \"current\" | \"upcoming\"\n\nconst steps: { label: string; status: Status }[] = [\n  { label: \"Cart\", status: \"done\" },\n  { label: \"Details\", status: \"done\" },\n  { label: \"Payment\", status: \"current\" },\n  { label: \"Review\", status: \"upcoming\" },\n]\n\nexport default function StepsBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-xl\">\n        <ol className=\"flex\">\n          {steps.map((step, i) => (\n            <li\n              key={step.label}\n              aria-current={step.status === \"current\" ? \"step\" : undefined}\n              className=\"relative flex flex-1 flex-col items-center\"\n            >\n              {i < steps.length - 1 && (\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(\n                    \"absolute top-4 left-1/2 h-0.5 w-full -translate-y-1/2\",\n                    step.status === \"done\" ? \"bg-primary\" : \"bg-border\"\n                  )}\n                />\n              )}\n              <span\n                className={cn(\n                  \"relative z-10 flex size-8 items-center justify-center rounded-lg text-sm font-medium tabular-nums\",\n                  step.status === \"done\" &&\n                    \"bg-primary text-primary-foreground\",\n                  step.status === \"current\" &&\n                    \"border-2 border-primary bg-background text-primary\",\n                  step.status === \"upcoming\" &&\n                    \"border border-border bg-background text-muted-foreground\"\n                )}\n              >\n                {step.status === \"done\" ? (\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"size-4\"\n                    aria-hidden=\"true\"\n                  />\n                ) : (\n                  i + 1\n                )}\n              </span>\n              <span\n                className={cn(\n                  \"mt-2 text-xs\",\n                  step.status === \"upcoming\"\n                    ? \"text-muted-foreground\"\n                    : \"font-medium text-foreground\"\n                )}\n              >\n                {step.label}\n              </span>\n            </li>\n          ))}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/steps-1.tsx"
    }
  ],
  "meta": {
    "height": "192px",
    "tier": "free"
  },
  "categories": [
    "steps"
  ],
  "type": "registry:block"
}