{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport {\n  CalculatorIcon,\n  CalendarIcon,\n  CreditCardIcon,\n  SearchIcon,\n  SettingsIcon,\n  SmileIcon,\n  UserIcon,\n} from \"lucide-react\";\n\nimport { useEffect, useState } from \"react\";\nimport { Autocomplete } from \"~/registry/ui/autocomplete\";\nimport { Dialog } from \"~/registry/ui/dialog\";\nimport { InputGroup } from \"~/registry/ui/input-group\";\nimport { Keyboard } from \"~/registry/ui/keyboard\";\nimport { Menu } from \"~/registry/ui/menu\";\nimport { SearchField } from \"~/registry/ui/search-field\";\n\nexport function AutocompleteDialogDemo() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    document.addEventListener(\n      \"keydown\",\n      (e) => {\n        if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n          e.preventDefault();\n          setIsOpen((isOpen) => !isOpen);\n        }\n      },\n      {\n        signal: controller.signal,\n      }\n    );\n\n    return () => controller.abort();\n  }, []);\n\n  return (\n    <Dialog.Root isOpen={isOpen} onOpenChange={setIsOpen}>\n      <p className=\"text-muted-foreground text-sm\">\n        Press{\" \"}\n        <Keyboard>\n          <span className=\"text-xs\">⌘</span>J\n        </Keyboard>\n      </p>\n\n      <Dialog.Overlay>\n        <Dialog.Modal className=\"bg-popover p-0 text-popover-foreground\">\n          <Dialog.Content className=\"gap-0\">\n            <Autocomplete>\n              <InputGroup.Root\n                render={\n                  <SearchField.Root\n                    aria-label=\"Search\"\n                    autoFocus\n                    className=\"h-12\"\n                  />\n                }\n              >\n                <InputGroup.Addon>\n                  <SearchIcon />\n                </InputGroup.Addon>\n                <InputGroup.Input placeholder=\"Type a command or search...\" />\n                <InputGroup.Addon align=\"inline-end\">\n                  <SearchField.Button />\n                </InputGroup.Addon>\n              </InputGroup.Root>\n\n              <Menu.Content\n                renderEmptyState={() => (\n                  <Menu.Empty>No results found.</Menu.Empty>\n                )}\n                variant=\"command\"\n              >\n                <Menu.Group>\n                  <Menu.Label>Suggestions</Menu.Label>\n\n                  <Menu.Item textValue=\"Calendar\">\n                    <CalendarIcon />\n                    <span>Calendar</span>\n                  </Menu.Item>\n                  <Menu.Item textValue=\"Search Emoji\">\n                    <SmileIcon />\n                    <span>Search Emoji</span>\n                  </Menu.Item>\n                  <Menu.Item textValue=\"Calculator\">\n                    <CalculatorIcon />\n                    <span>Calculator</span>\n                  </Menu.Item>\n                </Menu.Group>\n                <Menu.Separator />\n                <Menu.Group>\n                  <Menu.Label>Settings</Menu.Label>\n\n                  <Menu.Item textValue=\"Profile\">\n                    <UserIcon />\n                    <span>Profile</span>\n                    <Keyboard variant=\"menu\">⌘P</Keyboard>\n                  </Menu.Item>\n                  <Menu.Item textValue=\"Billing\">\n                    <CreditCardIcon />\n                    <span>Billing</span>\n                    <Keyboard variant=\"menu\">⌘B</Keyboard>\n                  </Menu.Item>\n                  <Menu.Item textValue=\"Settings\">\n                    <SettingsIcon />\n                    <span>Settings</span>\n                    <Keyboard variant=\"menu\">⌘S</Keyboard>\n                  </Menu.Item>\n                </Menu.Group>\n              </Menu.Content>\n            </Autocomplete>\n          </Dialog.Content>\n        </Dialog.Modal>\n      </Dialog.Overlay>\n    </Dialog.Root>\n  );\n}\n",
      "path": "src/registry/examples/autocomplete/autocomplete-dialog-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "autocomplete-dialog-demo",
  "registryDependencies": [
    "@kanpeki/autocomplete",
    "@kanpeki/dialog",
    "@kanpeki/keyboard",
    "@kanpeki/menu",
    "@kanpeki/search-field"
  ],
  "type": "registry:example"
}