{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "how-it-works-arrow-flow",
  "title": "How It Works — Arrow Flow",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/how-it-works-arrow-flow/how-it-works-arrow-flow.component.ts",
      "content": "// Four-stage horizontal flow joined by arrows, each stage carrying an icon tile,\n// a label and the artefact it produces; wraps to a vertical rail on narrow\n// screens. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n  ArrowRight,\n  Boxes,\n  FileCheck,\n  GitPullRequest,\n  LucideAngularModule,\n  Send,\n  type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\ninterface HowItWorksStage {\n  icon: LucideIconData\n  label: string\n  body: string\n  artefact: string\n}\n\nconst stages: HowItWorksStage[] = [\n  { icon: Boxes, label: 'Connect', body: 'Read-only credentials to the warehouse.', artefact: 'Schema mirror' },\n  { icon: GitPullRequest, label: 'Define', body: 'Metrics authored as reviewable files.', artefact: 'Merged PR' },\n  { icon: FileCheck, label: 'Certify', body: 'Reconciled against the prior quarters.', artefact: 'Sign-off' },\n  { icon: Send, label: 'Publish', body: 'Rolled out to every consumer at once.', artefact: 'Live metric' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-how-it-works-arrow-flow, [ui-how-it-works-arrow-flow]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n  template: `\n    <section data-slot=\"how-it-works-arrow-flow\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">The flow</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Four stages, one artefact each</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            Every stage ends in something you can point at, so progress is never a status update.\n          </p>\n        </div>\n\n        <!-- Arrows sit between cells rather than inside cards, so they stay put\n             when a card's copy runs longer. Below md the row becomes a rail. -->\n        <div class=\"mt-12 grid gap-4 md:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] md:items-stretch md:gap-0\">\n          @for (stage of stageList; track stage.label; let index = $index) {\n            <div class=\"flex items-center gap-4 md:contents\">\n              <div ui-card class=\"flex-1 md:h-full\">\n                <div ui-card-content class=\"p-5\">\n                  <span\n                    class=\"border-border text-muted-foreground flex size-9 items-center justify-center rounded-lg border\"\n                    aria-hidden=\"true\"\n                  >\n                    <lucide-icon [img]=\"stage.icon\" class=\"size-4\" />\n                  </span>\n                  <p class=\"mt-4 text-sm font-semibold\">{{ stage.label }}</p>\n                  <p class=\"text-muted-foreground mt-1.5 text-xs leading-relaxed\">{{ stage.body }}</p>\n                  <p class=\"text-muted-foreground/80 mt-3 font-mono text-xs tracking-wide uppercase\">\n                    → {{ stage.artefact }}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            @if (index < stageList.length - 1) {\n              <div class=\"text-muted-foreground/50 hidden items-center justify-center px-2 md:flex\" aria-hidden=\"true\">\n                <lucide-icon [img]=\"ArrowRight\" class=\"size-4\" />\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"mt-10\">\n          <button ui-button variant=\"outline\">\n            Walk through a real rollout\n            <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiHowItWorksArrowFlowComponent {\n  protected readonly ArrowRight = ArrowRight\n\n  protected readonly stageList = stages\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/how-it-works-arrow-flow/how-it-works-arrow-flow.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/how-it-works-arrow-flow/index.ts",
      "content": "export { UiHowItWorksArrowFlowComponent } from './how-it-works-arrow-flow.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/how-it-works-arrow-flow/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Four-stage horizontal flow joined by drawn SVG arrows, each stage carrying an icon tile, a short label, and the artefact it produces, wrapping to a vertical rail on narrow screens.",
  "categories": [
    "marketing"
  ]
}