{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-centered-logo",
  "title": "Header — Centered Logo",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/header-centered-logo/header-centered-logo.component.ts",
      "content": "// Symmetrical navbar with the wordmark centred between two nav halves, a utility\n// cluster on the right, and a mobile layout collapsing the split into a single\n// sheet trigger. Port of the Vue/React block 1:1 — equal-basis flanks keep the\n// wordmark optically centred regardless of label length.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Compass, LucideAngularModule, Menu, ShoppingBag, User } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiSheetCloseComponent,\n  UiSheetComponent,\n  UiSheetContentComponent,\n  UiSheetHeaderComponent,\n  UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nexport interface CenteredLogoLink {\n  label: string\n  href: string\n}\n\nconst leftLinks: CenteredLogoLink[] = [\n  { label: 'Collections', href: '#collections' },\n  { label: 'New in', href: '#new' },\n  { label: 'Studio', href: '#studio' },\n]\n\nconst rightLinks: CenteredLogoLink[] = [\n  { label: 'Journal', href: '#journal' },\n  { label: 'Stockists', href: '#stockists' },\n  { label: 'Contact', href: '#contact' },\n]\n\nconst linkClass =\n  'text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-header-centered-logo, [ui-header-centered-logo]',\n  standalone: true,\n  // The block renders its own <header>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiButtonComponent,\n    UiSeparatorComponent,\n    UiSheetCloseComponent,\n    UiSheetComponent,\n    UiSheetContentComponent,\n    UiSheetHeaderComponent,\n    UiSheetTitleComponent,\n  ],\n  template: `\n    <header data-slot=\"header-centered-logo\" [class]=\"rootClass\">\n      <div class=\"mx-auto flex h-16 max-w-6xl items-center px-6\">\n        <!-- Equal-basis flanks keep the wordmark optically centred regardless of\n             how long the link labels are. -->\n        <nav class=\"hidden flex-1 basis-0 items-center gap-1 lg:flex\" aria-label=\"Primary left\">\n          @for (link of left; track link.href) {\n            <a [href]=\"link.href\" [class]=\"desktopLinkClass\">{{ link.label }}</a>\n          }\n        </nav>\n\n        <div ui-sheet [open]=\"mobileOpen()\" (openChange)=\"mobileOpen.set($event)\">\n          <button\n            ui-button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"lg:hidden\"\n            aria-label=\"Open navigation menu\"\n            (click)=\"mobileOpen.set(true)\"\n          >\n            <lucide-icon [img]=\"Menu\" class=\"size-5\" />\n          </button>\n          <div ui-sheet-content side=\"left\" class=\"w-72\">\n            <div ui-sheet-header>\n              <h2 ui-sheet-title>Menu</h2>\n            </div>\n            <nav class=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              @for (link of allLinks(); track link.href) {\n                <a\n                  [href]=\"link.href\"\n                  class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  (click)=\"mobileOpen.set(false)\"\n                >\n                  {{ link.label }}\n                </a>\n              }\n            </nav>\n            <div ui-separator class=\"my-5\"></div>\n            <button ui-button class=\"w-full\">Account</button>\n          </div>\n        </div>\n\n        <a\n          href=\"#top\"\n          class=\"mx-auto flex items-center gap-2 text-base font-semibold tracking-[0.18em] uppercase lg:mx-6\"\n        >\n          <lucide-icon [img]=\"Compass\" class=\"text-primary size-4\" />\n          Halden\n        </a>\n\n        <nav class=\"hidden flex-1 basis-0 items-center justify-end gap-1 lg:flex\" aria-label=\"Primary right\">\n          @for (link of right; track link.href) {\n            <a [href]=\"link.href\" [class]=\"desktopLinkClass\">{{ link.label }}</a>\n          }\n        </nav>\n\n        <div class=\"flex items-center gap-1 lg:ml-4\">\n          <button ui-button variant=\"ghost\" size=\"icon\" aria-label=\"Account\">\n            <lucide-icon [img]=\"User\" class=\"size-4\" />\n          </button>\n          <button ui-button variant=\"ghost\" size=\"icon\" aria-label=\"Bag\">\n            <lucide-icon [img]=\"ShoppingBag\" class=\"size-4\" />\n          </button>\n        </div>\n      </div>\n    </header>\n  `,\n})\nexport class UiHeaderCenteredLogoComponent {\n  protected readonly Compass = Compass\n  protected readonly Menu = Menu\n  protected readonly ShoppingBag = ShoppingBag\n  protected readonly User = User\n\n  protected readonly left = leftLinks\n  protected readonly right = rightLinks\n  protected readonly desktopLinkClass = linkClass\n\n  @Input('class') className?: string\n\n  readonly mobileOpen = signal(false)\n\n  allLinks(): CenteredLogoLink[] {\n    return [...this.left, ...this.right]\n  }\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-b', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-centered-logo/header-centered-logo.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/header-centered-logo/index.ts",
      "content": "export { UiHeaderCenteredLogoComponent, type CenteredLogoLink } from './header-centered-logo.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-centered-logo/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/separator.json",
    "https://uipkge.dev/r/angular/sheet.json"
  ],
  "description": "Symmetrical navbar with the wordmark centred between two nav halves, a utility cluster on the right, and a mobile layout that collapses the split into a single sheet trigger.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}