{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "step-chips",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "step-chips.tsx",
      "target": "components/ui/step-chips.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface StepChipsProps\n  extends Omit<React.HTMLAttributes<HTMLOListElement>, \"children\"> {\n  steps: React.ReactNode[];\n}\n\n/**\n * A numbered sequence of chips, joined by arrows. The arrow lives inside its step\n * rather than between steps: an `ol` may only contain `li`, and sisu's sibling\n * fragments put the arrows outside the list entirely.\n */\nexport const StepChips = React.forwardRef<HTMLOListElement, StepChipsProps>(\n  ({ className, steps, ...props }, ref) => {\n    const last = steps.length - 1;\n    return (\n      <ol\n        ref={ref}\n        className={cn(\n          \"flex list-none flex-wrap items-center gap-1.5\",\n          className,\n        )}\n        {...props}\n      >\n        {steps.map((step, index) => (\n          <li\n            key={typeof step === \"string\" ? step : index}\n            className=\"inline-flex items-center gap-1.5\"\n          >\n            <span className=\"inline-flex items-center gap-1.5 rounded-lg border border-border bg-ink/[0.04] px-2.5 py-1.5 text-xs text-muted\">\n              <span\n                aria-hidden=\"true\"\n                className=\"grid size-[1.1rem] shrink-0 place-items-center rounded-full bg-accent-alt/15 text-[0.62rem] font-bold tabular-nums text-accent-alt\"\n              >\n                {index + 1}\n              </span>\n              {step}\n            </span>\n            {index < last && (\n              <span\n                data-step-separator=\"\"\n                aria-hidden=\"true\"\n                className=\"hidden text-muted sm:inline\"\n              >\n                &rarr;\n              </span>\n            )}\n          </li>\n        ))}\n      </ol>\n    );\n  },\n);\nStepChips.displayName = \"StepChips\";\n"
    }
  ]
}