{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "step-list",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "step-list.tsx",
      "target": "components/ui/step-list.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Step {\n  /** Optional icon; falls back to the mono step number. */\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  body?: React.ReactNode;\n  /** Stable key; defaults to the index. */\n  id?: string;\n}\n\nexport interface StepListProps\n  extends Omit<React.HTMLAttributes<HTMLOListElement>, \"children\"> {\n  steps: Step[];\n  /** Level of each step title. Pick it to fit the page outline. */\n  headingLevel?: \"h2\" | \"h3\" | \"h4\";\n}\n\nexport const StepList = React.forwardRef<HTMLOListElement, StepListProps>(\n  ({ className, steps, headingLevel: Heading = \"h4\", ...props }, ref) => {\n    const last = steps.length - 1;\n    return (\n      <ol ref={ref} className={cn(\"flex flex-col\", className)} {...props}>\n        {steps.map((step, i) => {\n          const key = step.id ?? `step-${i}`;\n          const ordinal = (i + 1).toString().padStart(2, \"0\");\n          return (\n            <li key={key} className=\"flex gap-4\">\n              <div className=\"flex flex-col items-center\">\n                <span className=\"grid size-11 shrink-0 place-items-center rounded-xl border border-border bg-surface-2 font-mono text-sm tabular-nums text-accent-alt [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]\">\n                  {step.icon ?? ordinal}\n                </span>\n                {i < last && (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"mt-1 min-h-8 w-px flex-1 bg-border\"\n                  />\n                )}\n              </div>\n              <div\n                className={cn(\n                  \"min-w-0\",\n                  step.body == null && \"flex min-h-11 flex-col justify-center\",\n                  i < last ? \"pb-8\" : \"pb-0\",\n                )}\n              >\n                {step.icon != null && (\n                  <p className=\"mb-1 font-mono text-[0.7rem] tabular-nums tracking-[0.16em] text-muted\">\n                    {ordinal}\n                  </p>\n                )}\n                <Heading\n                  className={cn(\n                    \"text-base font-semibold tracking-[-0.01em] text-ink\",\n                    step.body != null && \"mb-1\",\n                  )}\n                >\n                  {step.title}\n                </Heading>\n                {step.body != null && (\n                  <p className=\"text-sm leading-relaxed text-muted\">\n                    {step.body}\n                  </p>\n                )}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    );\n  },\n);\nStepList.displayName = \"StepList\";\n"
    }
  ]
}