{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-full-bleed-rows",
  "title": "Features — Full-Bleed Rows",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/feature-full-bleed-rows/feature-full-bleed-rows.component.ts",
      "content": "// Alternating full-bleed feature bands on contrasting surfaces: each row pairs a headline and\n// supporting detail with an edge-to-edge card that runs past the container edge. Bands alternate\n// surface as well as side, so the eye has two cues that a new section started. Port of the React\n// block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } 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'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface FullBleedRowDetail {\n  label: string\n  value: string\n}\n\nexport interface FullBleedRow {\n  eyebrow: string\n  title: string\n  body: string\n  detail: FullBleedRowDetail[]\n  reverse: boolean\n}\n\nexport const FULL_BLEED_ROWS: FullBleedRow[] = [\n  {\n    eyebrow: 'Modelling',\n    title: 'The definition is the product',\n    body: 'Dashboards are an output. What your company argues about is the formula behind the number, so that is the thing that gets an owner, a review, and a history.',\n    detail: [\n      { label: 'Authored in', value: 'Your repository' },\n      { label: 'Reviewed by', value: 'The named owner' },\n      { label: 'Reverted in', value: 'One click' },\n    ],\n    reverse: false,\n  },\n  {\n    eyebrow: 'Governance',\n    title: 'Permissions that survive a share',\n    body: 'Scope resolves per query from your identity provider, so forwarding a dashboard link never widens what the recipient can see. Every evaluation is logged.',\n    detail: [\n      { label: 'Resolved at', value: 'Query time' },\n      { label: 'Sourced from', value: 'SCIM groups' },\n      { label: 'Retained for', value: '7 years' },\n    ],\n    reverse: true,\n  },\n  {\n    eyebrow: 'Operations',\n    title: 'Cost you can see before the invoice',\n    body: 'Query budgets are enforced by the planner before execution, and each dashboard reports what it costs to open. Spend stops being a monthly surprise.',\n    detail: [\n      { label: 'Enforced at', value: 'Plan time' },\n      { label: 'Scoped per', value: 'Team' },\n      { label: 'Reported per', value: 'Dashboard' },\n    ],\n    reverse: false,\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-feature-full-bleed-rows, [ui-feature-full-bleed-rows]',\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: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"feature-full-bleed-rows\" [class]=\"rootClass\">\n      <!-- Bands alternate surface as well as side, so the eye has two cues that a\n           new section started rather than relying on whitespace alone. -->\n      @for (row of rows; track row.title; let index = $index) {\n        <div class=\"border-border border-b\" [class]=\"index % 2 === 1 ? 'bg-muted/40' : 'bg-background'\">\n          <div class=\"mx-auto grid max-w-6xl items-center gap-10 px-6 py-16 lg:grid-cols-2 lg:gap-16 lg:py-20\">\n            <div [class]=\"row.reverse ? 'lg:order-2' : ''\">\n              <span ui-badge variant=\"secondary\">{{ row.eyebrow }}</span>\n              <h2 class=\"mt-4 text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">{{ row.title }}</h2>\n              <p class=\"text-muted-foreground mt-3 max-w-prose leading-relaxed\">{{ row.body }}</p>\n              <button ui-button variant=\"link\" class=\"mt-4 h-auto p-0\">\n                Read the detail\n                <lucide-icon [img]=\"ArrowRight\" class=\"ml-1.5 size-3.5\" />\n              </button>\n            </div>\n\n            <div\n              ui-card\n              [class]=\"\n                row.reverse\n                  ? 'lg:order-1 lg:-ml-[calc((100vw-100%)/2)] lg:rounded-l-none lg:border-l-0'\n                  : 'lg:-mr-[calc((100vw-100%)/2)] lg:rounded-r-none lg:border-r-0'\n              \"\n            >\n              <div ui-card-content class=\"p-0\">\n                <div class=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                  {{ row.eyebrow.toLowerCase() }}\n                </div>\n                <dl>\n                  @for (entry of row.detail; track entry.label; let entryIndex = $index) {\n                    <div class=\"flex items-center justify-between gap-4 px-4 py-3\">\n                      <dt class=\"text-muted-foreground text-sm\">{{ entry.label }}</dt>\n                      <dd class=\"text-sm font-medium\">{{ entry.value }}</dd>\n                    </div>\n                    @if (entryIndex < row.detail.length - 1) {\n                      <ui-separator />\n                    }\n                  }\n                </dl>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </section>\n  `,\n})\nexport class UiFeatureFullBleedRowsComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly rows = FULL_BLEED_ROWS\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/feature-full-bleed-rows/feature-full-bleed-rows.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/feature-full-bleed-rows/index.ts",
      "content": "export {\n  UiFeatureFullBleedRowsComponent,\n  FULL_BLEED_ROWS,\n  type FullBleedRow,\n  type FullBleedRowDetail,\n} from './feature-full-bleed-rows.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-full-bleed-rows/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",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Alternating full-bleed feature bands on contrasting surfaces, each pairing a headline and supporting detail with an edge-to-edge visual that runs past the container.",
  "categories": [
    "marketing"
  ]
}