{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-search-command",
  "title": "Header — Inline Search",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header-search-command/HeaderSearchCommand.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { BarChart3, BookOpen, Compass, FileText, History, Menu, Search, Users } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport { Kbd } from '@/components/ui/kbd'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n]\n\nconst groups = [\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\nexport function HeaderSearchCommand() {\n  const [open, setOpen] = useState(false)\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  useEffect(() => {\n    const onKeydown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return\n      event.preventDefault()\n      setOpen((value) => !value)\n    }\n    window.addEventListener('keydown', onKeydown)\n    return () => window.removeEventListener('keydown', onKeydown)\n  }, [])\n\n  return (\n    <header data-slot=\"header-search-command\" className=\"border-border bg-background/90 border-b backdrop-blur\">\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-4 px-6\">\n        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <Compass className=\"text-primary size-5\" aria-hidden=\"true\" />\n          Halden\n        </a>\n\n        <nav className=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n          {links.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"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          className=\"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          onClick={() => setOpen(true)}\n        >\n          <Search className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n          <span className=\"truncate\">Search docs…</span>\n          <Kbd className=\"ml-auto hidden sm:inline-flex\">⌘K</Kbd>\n        </button>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-5 md:block\" />\n        <Button size=\"sm\" className=\"hidden shrink-0 sm:inline-flex\">\n          Start free\n        </Button>\n\n        <Sheet open={menuOpen} onOpenChange={setMenuOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"shrink-0 md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {links.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setMenuOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n            <Separator className=\"my-5\" />\n            <div className=\"grid gap-2\">\n              <Button variant=\"outline\">Sign in</Button>\n              <Button>Start free</Button>\n            </div>\n          </SheetContent>\n        </Sheet>\n      </div>\n\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Search documentation, guides, and stories…\" />\n        <CommandList>\n          <CommandEmpty>No results.</CommandEmpty>\n          {groups.map((group) => (\n            <CommandGroup key={group.heading} heading={group.heading}>\n              {group.items.map((item) => (\n                <CommandItem key={item.label} value={item.label}>\n                  <item.icon className=\"text-muted-foreground mr-2 size-4\" aria-hidden=\"true\" />\n                  {item.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          ))}\n        </CommandList>\n      </CommandDialog>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeaderSearchCommand.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/command.json",
    "https://uipkge.dev/r/react/kbd.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/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"
}