{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-demo",
  "title": "Command: Inline and ⌘J dialog",
  "description": "An inline palette and a dialog opened with ⌘J.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.cuelark.com/r/button.json",
    "https://ui.cuelark.com/r/command.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/examples/command-demo.tsx",
      "content": "import * as React from \"react\";\nimport { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/cuelark/ui/button\";\nimport { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from \"@/registry/cuelark/ui/command\";\n\nfunction Items() {\n  return (\n    <>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem><CalendarIcon /> Calendar</CommandItem>\n        <CommandItem><SmileIcon /> Search emoji</CommandItem>\n        <CommandItem><CalculatorIcon /> Calculator</CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem><UserIcon /> Profile <CommandShortcut>⌘P</CommandShortcut></CommandItem>\n        <CommandItem><CreditCardIcon /> Billing <CommandShortcut>⌘B</CommandShortcut></CommandItem>\n        <CommandItem><SettingsIcon /> Settings <CommandShortcut>⌘,</CommandShortcut></CommandItem>\n      </CommandGroup>\n    </>\n  );\n}\n\nexport default function CommandDemo() {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((o) => !o);\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, []);\n\n  return (\n    <div className=\"flex w-full max-w-md flex-col items-center gap-4\">\n      <Command className=\"rounded-xl border border-border shadow-raised\">\n        <CommandInput placeholder=\"Type a command or search…\" />\n        <CommandList className=\"max-h-56\">\n          <Items />\n        </CommandList>\n      </Command>\n      <Button variant=\"secondary\" size=\"sm\" kbd=\"⌘J\" onClick={() => setOpen(true)}>\n        Open palette\n      </Button>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search…\" />\n        <CommandList>\n          <Items />\n        </CommandList>\n      </CommandDialog>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "command",
    "example"
  ],
  "type": "registry:component"
}