{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer",
  "title": "Footer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/footer/footer.component.ts",
      "content": "// Site footer collection: multi-column newsletter, oversized brand statement, dense\n// developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each\n// spelled out inline so copy lives in one place. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n  ArrowRight,\n  Boxes,\n  Check,\n  Github,\n  Globe,\n  Layers,\n  Linkedin,\n  LucideAngularModule,\n  Twitter,\n  Youtube,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n  UiSelectComponent,\n  UiSelectContentComponent,\n  UiSelectItemComponent,\n  UiSelectTriggerComponent,\n  UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\n// ---------------------------------------------------------------------------\n// Footer 01: brand + newsletter on the left, four link columns on the right.\n// ---------------------------------------------------------------------------\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-01, [ui-footer-01]',\n  standalone: true,\n  // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent, UiInputComponent, UiSeparatorComponent],\n  template: `\n    <footer data-slot=\"footer-01\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-16\">\n        <div class=\"grid gap-10 lg:grid-cols-12\">\n          <div class=\"space-y-4 lg:col-span-4\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n                <lucide-icon [img]=\"Boxes\" class=\"size-4\" />\n              </div>\n              <span class=\"text-base font-semibold\">Acme</span>\n            </div>\n            <p class=\"text-muted-foreground max-w-sm text-sm\">Built on shadcn-vue. Get product updates monthly.</p>\n            <form class=\"flex max-w-sm gap-2\" (submit)=\"subscribe($event)\">\n              <ui-input\n                [value]=\"newsletter()\"\n                (valueChange)=\"newsletter.set($event)\"\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                required\n                class=\"flex-1\"\n              />\n              <button ui-button type=\"submit\">Subscribe</button>\n            </form>\n            @if (subscribed()) {\n              <p class=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>\n            }\n          </div>\n\n          <div class=\"grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8\">\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Product</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Features</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Pricing</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >Changelog</a\n                  >\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Roadmap</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Company</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">About</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Blog</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Careers</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Contact</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Resources</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Documentation\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">API</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Help center\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Status</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Legal</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Terms</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Privacy</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Security</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">DPA</a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-wrap items-center justify-between gap-4\">\n          <p class=\"text-muted-foreground text-xs\">© 2026 Acme. All rights reserved.</p>\n          <div class=\"flex items-center gap-3\">\n            <a href=\"#\" aria-label=\"GitHub\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" />\n            </a>\n            <a href=\"#\" aria-label=\"Twitter\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <lucide-icon [img]=\"Twitter\" class=\"size-4\" />\n            </a>\n            <a href=\"#\" aria-label=\"LinkedIn\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" />\n            </a>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooter01Component {\n  protected readonly Boxes = Boxes\n  protected readonly Github = Github\n  protected readonly Linkedin = Linkedin\n  protected readonly Twitter = Twitter\n\n  @Input('class') className?: string\n\n  readonly newsletter = signal('')\n  readonly subscribed = signal(false)\n\n  get rootClass(): string {\n    return cn('bg-background border-t', this.className)\n  }\n\n  subscribe(event?: Event): void {\n    event?.preventDefault()\n    if (!this.newsletter()) return\n    this.subscribed.set(true)\n    this.newsletter.set('')\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Footer — Brand Statement: oversized statement, three columns, legal row.\n// ---------------------------------------------------------------------------\n\ninterface BrandStatementSection {\n  heading: string\n  links: string[]\n}\n\nconst brandStatementSections: BrandStatementSection[] = [\n  { heading: 'Platform', links: ['Metric layer', 'Governance', 'Alerting', 'Embedding'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n  { heading: 'Resources', links: ['Documentation', 'Guides', 'Benchmarks', 'Status'] },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-brand-statement, [ui-footer-brand-statement]',\n  standalone: true,\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    <footer data-slot=\"footer-brand-statement\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-16\">\n        <a href=\"#top\" class=\"flex w-fit items-center gap-2 font-semibold tracking-tight\">\n          <lucide-icon [img]=\"Layers\" class=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <!-- The statement is the only oversized type on the page. Keep it to one\n             sentence; at this size a second one stops being read. -->\n        <p class=\"mt-8 max-w-3xl text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl\">\n          Every number your company acts on should have one definition, one owner, and a history you can read.\n        </p>\n        <p class=\"text-muted-foreground mt-4 max-w-xl text-sm leading-relaxed\">\n          That is the whole product. Everything else here is detail.\n        </p>\n\n        <div ui-separator class=\"my-12\"></div>\n\n        <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\n          @for (section of sectionList; track section.heading) {\n            <div>\n              <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{{ section.heading }}</p>\n              <ul class=\"mt-3 space-y-2\">\n                @for (link of section.links; track link) {\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      {{ link }}\n                    </a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n            <span>© 2026 Northwind Data, Inc.</span>\n            <a href=\"#privacy\" class=\"hover:text-foreground transition-colors\">Privacy</a>\n            <a href=\"#terms\" class=\"hover:text-foreground transition-colors\">Terms</a>\n            <a href=\"mailto:hello@northwind.example\" class=\"hover:text-foreground transition-colors\">\n              hello&#64;northwind.example\n            </a>\n          </div>\n          <div class=\"flex items-center gap-2 sm:ml-auto\">\n            <span ui-badge variant=\"outline\">SOC 2 Type II</span>\n            <span ui-badge variant=\"outline\">GDPR</span>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterBrandStatementComponent {\n  protected readonly Github = Github\n  protected readonly Layers = Layers\n  protected readonly Linkedin = Linkedin\n\n  protected readonly sectionList = brandStatementSections\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-t', this.className)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Footer — Developer Dense Grid: categorized columns + telemetry status bar.\n// ---------------------------------------------------------------------------\n\nexport interface DeveloperFooterColumn {\n  title: string\n  links: { label: string; href: string; badge?: string }[]\n}\n\nconst developerColumns: DeveloperFooterColumn[] = [\n  {\n    title: 'UI Primitives',\n    links: [\n      { label: 'Button & Controls', href: '#' },\n      { label: 'Dialog & Overlays', href: '#' },\n      { label: 'Data Table & Virtual', href: '#' },\n      { label: 'Charts & Sparklines', href: '#' },\n      { label: 'Form Controls & Inputs', href: '#' },\n      { label: 'KpiGrid & Metric Tiles', href: '#' },\n    ],\n  },\n  {\n    title: 'Marketing Blocks',\n    links: [\n      { label: 'Hero Sandboxes', href: '#' },\n      { label: 'Feature Workbenches', href: '#' },\n      { label: 'Pricing Matrix & ROI', href: '#' },\n      { label: 'Social Proof Tickers', href: '#' },\n      { label: 'Testimonial Masonry', href: '#' },\n      { label: 'Interactive Demos', href: '#', badge: 'New' },\n    ],\n  },\n  {\n    title: 'Ecosystem Templates',\n    links: [\n      { label: 'HRMS Nuxt Template', href: '#' },\n      { label: 'HMS Clinical Dashboard', href: '#' },\n      { label: 'Shipment Tracking Live', href: '#' },\n      { label: 'Fintech Banking Portal', href: '#' },\n      { label: 'AI LLM Workspace', href: '#' },\n    ],\n  },\n  {\n    title: 'Developer DX',\n    links: [\n      { label: 'CLI Installation Guide', href: '#' },\n      { label: 'Tailwind CSS v4 Tokens', href: '#' },\n      { label: 'Dual-Framework Parity', href: '#' },\n      { label: 'Reka UI Primitives', href: '#' },\n      { label: 'Radix UI Primitives', href: '#' },\n      { label: 'Changelog Timeline', href: '#' },\n    ],\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-developer-dense-grid, [ui-footer-developer-dense-grid]',\n  standalone: true,\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent],\n  template: `\n    <footer data-slot=\"footer-developer-dense-grid\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 sm:py-16 lg:px-8\">\n        <!-- Top Grid: Brand & Categorized Columns -->\n        <div class=\"grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12\">\n          <!-- Brand Info (4 Cols) -->\n          <div class=\"col-span-2 space-y-4 md:col-span-6 lg:col-span-4\">\n            <div class=\"flex items-center gap-2 font-mono text-base font-bold tracking-tight\">\n              <span\n                class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs\"\n              >\n                U\n              </span>\n              <span>UIPKGE.DEV</span>\n            </div>\n\n            <p class=\"text-muted-foreground max-w-sm text-xs leading-relaxed\">\n              The open-source unbundled component registry where you own 100% of the source code. Calibrated tokens,\n              pure AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.\n            </p>\n\n            <!-- Social links -->\n            <div class=\"flex items-center gap-2 pt-2\">\n              <button ui-button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"GitHub\">\n                <lucide-icon [img]=\"Github\" class=\"size-3.5\" />\n              </button>\n              <button ui-button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Twitter\">\n                <lucide-icon [img]=\"Twitter\" class=\"size-3.5\" />\n              </button>\n              <button ui-button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Website\">\n                <lucide-icon [img]=\"Globe\" class=\"size-3.5\" />\n              </button>\n            </div>\n          </div>\n\n          <!-- 4 Links Columns (8 Cols total, 2 cols each) -->\n          @for (col of columnList; track col.title) {\n            <div class=\"col-span-1 space-y-3 md:col-span-3 lg:col-span-2\">\n              <h4 class=\"text-foreground font-mono text-xs font-bold tracking-wider uppercase\">\n                {{ col.title }}\n              </h4>\n              <ul class=\"text-muted-foreground space-y-2 font-mono text-xs\">\n                @for (link of col.links; track link.label) {\n                  <li>\n                    <a\n                      [href]=\"link.href\"\n                      class=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\"\n                    >\n                      <span>{{ link.label }}</span>\n                      @if (link.badge) {\n                        <span class=\"py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase\">\n                          {{ link.badge }}\n                        </span>\n                      }\n                    </a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n\n        <!-- Bottom Operational Status & Copyright Bar -->\n        <div\n          class=\"border-border/80 text-muted-foreground flex flex-col items-center justify-between gap-4 border-t pt-8 text-center font-mono text-xs sm:flex-row sm:text-left\"\n        >\n          <!-- Live System Telemetry Status -->\n          <div class=\"flex items-center gap-2.5\">\n            <span class=\"relative flex size-2\">\n              <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n              <span class=\"bg-success relative inline-flex size-2 rounded-full\"></span>\n            </span>\n            <span class=\"text-foreground font-medium\">All Global Edge Nodes Operational</span>\n            <span class=\"text-muted-foreground/60\">&bull; Latency: 14ms (P99)</span>\n          </div>\n\n          <!-- Right Copyright & MIT Notice -->\n          <div class=\"flex items-center gap-3\">\n            <span>MIT Licensed &bull; Unbundled Code</span>\n            <span>&copy; {{ currentYear }} UIPKGE</span>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterDeveloperDenseGridComponent {\n  protected readonly Github = Github\n  protected readonly Globe = Globe\n  protected readonly Twitter = Twitter\n\n  protected readonly columnList = developerColumns\n  protected readonly currentYear = new Date().getFullYear()\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('border-border bg-card text-foreground border-t', this.className)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Footer — Mega with Newsletter: signup + five link columns + social row.\n// ---------------------------------------------------------------------------\n\ninterface MegaSection {\n  heading: string\n  links: string[]\n}\n\nconst megaSections: MegaSection[] = [\n  { heading: 'Product', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'Changelog'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering'] },\n  { heading: 'Developers', links: ['Documentation', 'API reference', 'CLI', 'Status'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors'] },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-mega-newsletter, [ui-footer-mega-newsletter]',\n  standalone: true,\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiInputComponent, UiSeparatorComponent],\n  template: `\n    <footer data-slot=\"footer-mega-newsletter\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-14\">\n        <div class=\"grid gap-12 lg:grid-cols-[22rem_1fr] lg:gap-16\">\n          <div>\n            <a href=\"#top\" class=\"flex items-center gap-2 font-semibold tracking-tight\">\n              <lucide-icon [img]=\"Layers\" class=\"text-primary size-5\" aria-hidden=\"true\" />\n              Northwind\n            </a>\n            <p class=\"text-muted-foreground mt-3 max-w-sm text-sm leading-relaxed\">\n              One certified metric layer between your warehouse and everything downstream.\n            </p>\n\n            <form class=\"mt-6\" (submit)=\"subscribe($event)\">\n              <label for=\"footer-email\" class=\"text-sm font-medium\">Monthly engineering notes</label>\n              <div class=\"mt-2 flex gap-2\">\n                <ui-input\n                  id=\"footer-email\"\n                  [value]=\"email()\"\n                  (valueChange)=\"email.set($event)\"\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  autoComplete=\"email\"\n                  class=\"max-w-64\"\n                />\n                <button ui-button type=\"submit\">\n                  Subscribe\n                  <lucide-icon [img]=\"ArrowRight\" class=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <!-- Status line reserves its own row, so confirming does not shift the columns. -->\n              <p class=\"text-muted-foreground mt-2 min-h-5 text-xs\">\n                @if (submitted()) {\n                  <span class=\"text-success inline-flex items-center gap-1.5\">\n                    <lucide-icon [img]=\"Check\" class=\"size-3\" aria-hidden=\"true\" />\n                    Check your inbox to confirm.\n                  </span>\n                } @else {\n                  <span>One email a month. Unsubscribe in one click.</span>\n                }\n              </p>\n            </form>\n          </div>\n\n          <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5\">\n            @for (section of sectionList; track section.heading) {\n              <div>\n                <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">\n                  {{ section.heading }}\n                </p>\n                <ul class=\"mt-3 space-y-2\">\n                  @for (link of section.links; track link) {\n                    <li>\n                      <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                        {{ link }}\n                      </a>\n                    </li>\n                  }\n                </ul>\n              </div>\n            }\n          </div>\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n          <p class=\"text-muted-foreground text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n          <span ui-badge variant=\"outline\" class=\"w-fit\">SOC 2 Type II</span>\n          <div class=\"flex items-center gap-1 sm:ml-auto\">\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"YouTube\">\n              <lucide-icon [img]=\"Youtube\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterMegaNewsletterComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n  protected readonly Github = Github\n  protected readonly Layers = Layers\n  protected readonly Linkedin = Linkedin\n  protected readonly Youtube = Youtube\n\n  protected readonly sectionList = megaSections\n\n  @Input('class') className?: string\n\n  readonly email = signal('')\n  readonly submitted = signal(false)\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-t', this.className)\n  }\n\n  subscribe(event?: Event): void {\n    event?.preventDefault()\n    if (!this.email().trim()) return\n    this.submitted.set(true)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Footer — Minimal Row: wordmark, inline links, social icons, copyright.\n// ---------------------------------------------------------------------------\n\nconst minimalLinks = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n  { label: 'Privacy', href: '#privacy' },\n  { label: 'Terms', href: '#terms' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-minimal-row, [ui-footer-minimal-row]',\n  standalone: true,\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    <footer data-slot=\"footer-minimal-row\" [class]=\"rootClass\">\n      <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center\">\n        <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n          <lucide-icon [img]=\"Layers\" class=\"text-primary size-4\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <div ui-separator orientation=\"vertical\" class=\"hidden h-4 sm:block\"></div>\n\n        <nav class=\"flex flex-wrap items-center gap-x-5 gap-y-2\" aria-label=\"Footer\">\n          @for (link of linkList; track link.href) {\n            <a [href]=\"link.href\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n              {{ link.label }}\n            </a>\n          }\n        </nav>\n\n        <div class=\"flex items-center gap-1 sm:ml-auto\">\n          <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n            <lucide-icon [img]=\"Github\" class=\"size-4\" aria-hidden=\"true\" />\n          </button>\n          <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n            <lucide-icon [img]=\"Linkedin\" class=\"size-4\" aria-hidden=\"true\" />\n          </button>\n          <span class=\"text-muted-foreground ml-2 text-xs\">© 2026 Northwind</span>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterMinimalRowComponent {\n  protected readonly Github = Github\n  protected readonly Layers = Layers\n  protected readonly Linkedin = Linkedin\n\n  protected readonly linkList = minimalLinks\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-t', this.className)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Footer — Dense Sitemap: six columns, region/currency selects, status row.\n// ---------------------------------------------------------------------------\n\ninterface SitemapSection {\n  heading: string\n  links: string[]\n}\n\nconst sitemapSections: SitemapSection[] = [\n  { heading: 'Platform', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'API', 'CLI'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering', 'Healthcare', 'Retail'] },\n  {\n    heading: 'Developers',\n    links: ['Documentation', 'API reference', 'SDKs', 'Webhooks', 'Status', 'Changelog'],\n  },\n  { heading: 'Resources', links: ['Guides', 'Benchmarks', 'Customers', 'Blog', 'Webinars', 'Glossary'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Press kit', 'Partners', 'Contact', 'Security'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors', 'SLA', 'Accessibility'] },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-sitemap-dense, [ui-footer-sitemap-dense]',\n  standalone: true,\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiSelectComponent,\n    UiSelectContentComponent,\n    UiSelectItemComponent,\n    UiSelectTriggerComponent,\n    UiSelectValueComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <footer data-slot=\"footer-sitemap-dense\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-12\">\n        <div class=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6\">\n          @for (section of sectionList; track section.heading) {\n            <div>\n              <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">\n                {{ section.heading }}\n              </p>\n              <ul class=\"mt-3 space-y-1.5\">\n                @for (link of section.links; track link) {\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      {{ link }}\n                    </a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center\">\n          <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n            <lucide-icon [img]=\"Layers\" class=\"text-primary size-4\" aria-hidden=\"true\" />\n            Northwind\n          </a>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <ui-select [value]=\"region()\" (valueChange)=\"region.set($event)\">\n              <button ui-select-trigger class=\"h-8 w-40 text-xs\" aria-label=\"Data region\">\n                <ui-select-value />\n              </button>\n              <ui-select-content>\n                <ui-select-item value=\"eu\">EU (Frankfurt)</ui-select-item>\n                <ui-select-item value=\"us\">US (Virginia)</ui-select-item>\n                <ui-select-item value=\"au\">AU (Sydney)</ui-select-item>\n              </ui-select-content>\n            </ui-select>\n\n            <ui-select [value]=\"currency()\" (valueChange)=\"currency.set($event)\">\n              <button ui-select-trigger class=\"h-8 w-28 text-xs\" aria-label=\"Currency\">\n                <ui-select-value />\n              </button>\n              <ui-select-content>\n                <ui-select-item value=\"eur\">EUR €</ui-select-item>\n                <ui-select-item value=\"usd\">USD $</ui-select-item>\n                <ui-select-item value=\"gbp\">GBP £</ui-select-item>\n              </ui-select-content>\n            </ui-select>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-3 lg:ml-auto\">\n            <!-- Status dot is a live indicator, so it carries its own text for\n                 screen readers rather than relying on colour alone. -->\n            <a href=\"#status\" class=\"hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors\">\n              <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\"></span>\n              <span class=\"text-muted-foreground text-xs\">All systems operational</span>\n            </a>\n            <span ui-badge variant=\"outline\">SOC 2</span>\n            <span ui-badge variant=\"outline\">GDPR</span>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n\n        <p class=\"text-muted-foreground mt-6 text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterSitemapDenseComponent {\n  protected readonly Github = Github\n  protected readonly Layers = Layers\n  protected readonly Linkedin = Linkedin\n\n  protected readonly sectionList = sitemapSections\n\n  @Input('class') className?: string\n\n  readonly region = signal('eu')\n  readonly currency = signal('eur')\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-t', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer/footer.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/footer/index.ts",
      "content": "export {\n  UiFooter01Component,\n  UiFooterBrandStatementComponent,\n  UiFooterDeveloperDenseGridComponent,\n  UiFooterMegaNewsletterComponent,\n  UiFooterMinimalRowComponent,\n  UiFooterSitemapDenseComponent,\n  type DeveloperFooterColumn,\n} from './footer.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer/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/input.json",
    "https://uipkge.dev/r/angular/select.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.",
  "categories": [
    "marketing"
  ]
}