{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-search-command",
  "title": "Header — Inline Search",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/header-search-command/header-search-command.component.ts",
      "content": "// Navbar with an inline search trigger that opens a command palette on click or ⌘K,\n// listing grouped results with keyboard hints alongside nav links and CTA.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n  BarChart3,\n  BookOpen,\n  Compass,\n  FileText,\n  History,\n  LucideAngularModule,\n  Menu,\n  Search,\n  Users,\n  type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCommandDialogComponent,\n  UiCommandEmptyComponent,\n  UiCommandGroupComponent,\n  UiCommandInputComponent,\n  UiCommandItemComponent,\n  UiCommandListComponent,\n} from '@/ui/command/command.component'\nimport { UiKbdComponent } from '@/ui/kbd/kbd.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiSheetComponent,\n  UiSheetContentComponent,\n  UiSheetHeaderComponent,\n  UiSheetTitleComponent,\n  UiSheetTriggerComponent,\n} from '@/ui/sheet/sheet.component'\n\ninterface HeaderSearchLink {\n  label: string\n  href: string\n}\n\ninterface HeaderSearchItem {\n  icon: LucideIconData\n  label: string\n}\n\ninterface HeaderSearchGroup {\n  heading: string\n  items: HeaderSearchItem[]\n}\n\nconst links: HeaderSearchLink[] = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n]\n\nconst groups: HeaderSearchGroup[] = [\n  {\n    heading: 'Documentation',\n    items: [\n      { icon: BookOpen, label: 'Connect a warehouse' },\n      { icon: FileText, label: 'Define your first metric' },\n      { icon: BarChart3, label: 'Publish a dashboard' },\n    ],\n  },\n  {\n    heading: 'Company',\n    items: [\n      { icon: Users, label: 'Customer stories' },\n      { icon: History, label: 'Changelog' },\n    ],\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-header-search-command, [ui-header-search-command]',\n  standalone: true,\n  // React renders the root <header> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"', '(window:keydown)': 'onKeydown($event)' },\n  imports: [\n    LucideAngularModule,\n    UiButtonComponent,\n    UiCommandDialogComponent,\n    UiCommandEmptyComponent,\n    UiCommandGroupComponent,\n    UiCommandInputComponent,\n    UiCommandItemComponent,\n    UiCommandListComponent,\n    UiKbdComponent,\n    UiSeparatorComponent,\n    UiSheetComponent,\n    UiSheetContentComponent,\n    UiSheetHeaderComponent,\n    UiSheetTitleComponent,\n    UiSheetTriggerComponent,\n  ],\n  template: `\n    <header data-slot=\"header-search-command\" [class]=\"rootClass\">\n      <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-4 px-6\">\n        <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <lucide-icon [img]=\"Compass\" class=\"text-primary size-5\" />\n          Halden\n        </a>\n\n        <nav class=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n          @for (link of navLinks; track link.href) {\n            <a\n              [href]=\"link.href\"\n              class=\"text-muted-foreground hover:text-foreground hover:bg-muted 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              {{ link.label }}\n            </a>\n          }\n        </nav>\n\n        <!-- Trigger is a button, not an input: the real field lives in the dialog,\n             so focus lands there and the shortcut hint stays visible until then. -->\n        <button\n          type=\"button\"\n          class=\"border-border bg-muted/40 text-muted-foreground hover:bg-muted focus-visible:ring-ring ml-auto flex h-9 w-full max-w-64 items-center gap-2 rounded-md border px-3 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          (click)=\"open.set(true)\"\n        >\n          <lucide-icon [img]=\"Search\" class=\"size-4 shrink-0\" />\n          <span class=\"truncate\">Search docs…</span>\n          <span ui-kbd class=\"ml-auto hidden sm:inline-flex\">⌘K</span>\n        </button>\n\n        <ui-separator orientation=\"vertical\" class=\"hidden h-5 md:block\" />\n        <button ui-button size=\"sm\" class=\"hidden shrink-0 sm:inline-flex\">Start free</button>\n\n        <div ui-sheet [open]=\"menuOpen()\" (openChange)=\"menuOpen.set($event)\">\n          <button\n            ui-button\n            ui-sheet-trigger\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n            aria-label=\"Open navigation menu\"\n          >\n            <lucide-icon [img]=\"Menu\" class=\"size-5\" />\n          </button>\n          <div ui-sheet-content side=\"right\" 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 navLinks; 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)=\"menuOpen.set(false)\"\n                >\n                  {{ link.label }}\n                </a>\n              }\n            </nav>\n            <ui-separator class=\"my-5\" />\n            <div class=\"grid gap-2\">\n              <button ui-button variant=\"outline\">Sign in</button>\n              <button ui-button>Start free</button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <ui-command-dialog\n        [open]=\"open()\"\n        (openChange)=\"open.set($event)\"\n        title=\"Search documentation\"\n        description=\"Search documentation, guides, and stories\"\n      >\n        <ui-command-input placeholder=\"Search documentation, guides, and stories…\" />\n        <ui-command-list>\n          <ui-command-empty>No results.</ui-command-empty>\n          @for (group of searchGroups; track group.heading) {\n            <ui-command-group [heading]=\"group.heading\">\n              @for (item of group.items; track item.label) {\n                <ui-command-item [value]=\"item.label\" (select)=\"open.set(false)\">\n                  <lucide-icon [img]=\"item.icon\" class=\"text-muted-foreground mr-2 size-4\" />\n                  {{ item.label }}\n                </ui-command-item>\n              }\n            </ui-command-group>\n          }\n        </ui-command-list>\n      </ui-command-dialog>\n    </header>\n  `,\n})\nexport class UiHeaderSearchCommandComponent {\n  protected readonly Compass = Compass\n  protected readonly Menu = Menu\n  protected readonly Search = Search\n\n  protected readonly navLinks = links\n  protected readonly searchGroups = groups\n\n  @Input('class') className?: string\n\n  readonly open = signal(false)\n  readonly menuOpen = signal(false)\n\n  get rootClass(): string {\n    return cn('border-border bg-background/90 border-b backdrop-blur', this.className)\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return\n    event.preventDefault()\n    this.open.update((v) => !v)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-search-command/header-search-command.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/header-search-command/index.ts",
      "content": "export { UiHeaderSearchCommandComponent } from './header-search-command.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-search-command/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/command.json",
    "https://uipkge.dev/r/angular/kbd.json",
    "https://uipkge.dev/r/angular/separator.json",
    "https://uipkge.dev/r/angular/sheet.json"
  ],
  "description": "Navbar with an inline search trigger that opens a command palette on click or ⌘K, listing grouped results with keyboard hints alongside the usual nav links and CTA.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}