{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-02",
  "title": "Command dialog",
  "description": "Spotlight-style ⌘K palette toggled by a button or keyboard shortcut.",
  "dependencies": [],
  "registryDependencies": [
    "command",
    "button",
    "dialog"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-02.tsx",
      "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/components/ui/command'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\nimport {\n  CalculatorIcon,\n  CalendarIcon,\n  CreditCardIcon,\n  SettingsIcon,\n  SmileIcon,\n  UserIcon,\n} from 'lucide-react'\nimport { useEffect, useState } from 'react'\n\nexport function Command02() {\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    const down = (event: KeyboardEvent) => {\n      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        setOpen((value) => !value)\n      }\n    }\n    document.addEventListener('keydown', down)\n    return () => document.removeEventListener('keydown', down)\n  }, [])\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            className=\"text-muted-foreground w-64 justify-between font-normal\"\n          >\n            Press to open...\n            <kbd className=\"bg-muted pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium\">\n              ⌘K\n            </kbd>\n          </Button>\n        }\n      />\n      <DialogContent showCloseButton={false} className=\"p-0\">\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>Command Palette</DialogTitle>\n          <DialogDescription>Search for a command to run.</DialogDescription>\n        </DialogHeader>\n        <Command>\n          <CommandInput placeholder=\"Type a command or search...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Suggestions\">\n              <CommandItem>\n                <CalendarIcon />\n                <span>Calendar</span>\n              </CommandItem>\n              <CommandItem>\n                <SmileIcon />\n                <span>Search Emoji</span>\n              </CommandItem>\n              <CommandItem>\n                <CalculatorIcon />\n                <span>Calculator</span>\n              </CommandItem>\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup heading=\"Settings\">\n              <CommandItem>\n                <UserIcon />\n                <span>Profile</span>\n                <CommandShortcut>⌘P</CommandShortcut>\n              </CommandItem>\n              <CommandItem>\n                <CreditCardIcon />\n                <span>Billing</span>\n                <CommandShortcut>⌘B</CommandShortcut>\n              </CommandItem>\n              <CommandItem>\n                <SettingsIcon />\n                <span>Settings</span>\n                <CommandShortcut>⌘S</CommandShortcut>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-02.tsx"
    }
  ],
  "type": "registry:block"
}