{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "build-pipeline",
  "type": "registry:ui",
  "title": "Build pipeline",
  "description": "CI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/build-pipeline.tsx",
      "type": "registry:ui",
      "target": "components/ui/build-pipeline.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { CheckIcon, LoaderCircleIcon, XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Stage = { name: string; status: \"success\" | \"running\" | \"failed\" | \"pending\" }\n\nfunction BuildPipeline({\n  stages = [\n    { name: \"Install\", status: \"success\" },\n    { name: \"Typecheck\", status: \"success\" },\n    { name: \"Audit\", status: \"running\" },\n    { name: \"Deploy\", status: \"pending\" },\n  ],\n  className,\n}: {\n  stages?: Stage[]\n  className?: string\n}) {\n  const icon = (s: Stage[\"status\"]) => {\n    if (s === \"success\") return <CheckIcon className=\"size-3.5 text-success\" aria-hidden />\n    if (s === \"failed\") return <XIcon className=\"size-3.5 text-danger\" aria-hidden />\n    if (s === \"running\") return <LoaderCircleIcon className=\"size-3.5 animate-spin text-accent\" aria-hidden />\n    return <span className=\"size-3.5 rounded-full border border-border\" aria-hidden />\n  }\n  return (\n    <ol data-slot=\"build-pipeline\" className={cn(\"flex flex-wrap items-center gap-2\", className)}>\n      {stages.map((s, i) => (\n        <li key={s.name} className=\"flex items-center gap-2\">\n          <div className=\"inline-flex h-8 items-center gap-2 rounded-lg border border-border bg-surface px-2.5 text-xs font-medium text-fg shadow-highlight\">\n            {icon(s.status)}\n            <span>{s.name}</span>\n            <span className=\"sr-only\">{s.status}</span>\n          </div>\n          {i < stages.length - 1 ? <span className=\"h-px w-4 bg-border\" aria-hidden /> : null}\n        </li>\n      ))}\n    </ol>\n  )\n}\nexport { BuildPipeline }\n"
    }
  ]
}