{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-command-1",
  "description": "Command palette with dialog",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/command",
    "@coss/kbd"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-command-1.tsx",
      "content": "\"use client\";\n\nimport { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\n\nexport interface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n}\n\nexport interface Group {\n  value: string;\n  items: Item[];\n}\n\nexport const suggestions: Item[] = [\n  { label: \"Linear\", shortcut: \"⌘L\", value: \"linear\" },\n  { label: \"Figma\", shortcut: \"⌘F\", value: \"figma\" },\n  { label: \"Slack\", shortcut: \"⌘S\", value: \"slack\" },\n  { label: \"YouTube\", shortcut: \"⌘Y\", value: \"youtube\" },\n  { label: \"Raycast\", shortcut: \"⌘R\", value: \"raycast\" },\n];\n\nexport const commands: Item[] = [\n  { label: \"Clipboard History\", shortcut: \"⌘⇧C\", value: \"clipboard-history\" },\n  { label: \"Import Extension\", shortcut: \"⌘I\", value: \"import-extension\" },\n  { label: \"Create Snippet\", shortcut: \"⌘N\", value: \"create-snippet\" },\n  { label: \"System Preferences\", shortcut: \"⌘,\", value: \"system-preferences\" },\n  { label: \"Window Management\", shortcut: \"⌘⇧W\", value: \"window-management\" },\n];\n\nexport const groupedItems: Group[] = [\n  { items: suggestions, value: \"Suggestions\" },\n  { items: commands, value: \"Commands\" },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n\n  function handleItemClick(_item: Item) {\n    setOpen(false);\n  }\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <CommandDialog onOpenChange={setOpen} open={open}>\n      <CommandDialogTrigger render={<Button variant=\"outline\" />}>\n        Open Command Palette\n        <KbdGroup>\n          <Kbd>⌘</Kbd>\n          <Kbd>J</Kbd>\n        </KbdGroup>\n      </CommandDialogTrigger>\n      <CommandDialogPopup>\n        <Command items={groupedItems}>\n          <CommandInput placeholder=\"Search for apps and commands...\" />\n          <CommandPanel>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandList>\n              {(group: Group, _index: number) => (\n                <Fragment key={group.value}>\n                  <CommandGroup items={group.items}>\n                    <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                    <CommandCollection>\n                      {(item: Item) => (\n                        <CommandItem\n                          key={item.value}\n                          onClick={() => handleItemClick(item)}\n                          value={item.value}\n                        >\n                          <span className=\"flex-1\">{item.label}</span>\n                          {item.shortcut && (\n                            <CommandShortcut>{item.shortcut}</CommandShortcut>\n                          )}\n                        </CommandItem>\n                      )}\n                    </CommandCollection>\n                  </CommandGroup>\n                  <CommandSeparator />\n                </Fragment>\n              )}\n            </CommandList>\n          </CommandPanel>\n          <CommandFooter>\n            <div className=\"flex items-center gap-4\">\n              <div className=\"flex items-center gap-2\">\n                <KbdGroup>\n                  <Kbd>\n                    <ArrowUpIcon />\n                  </Kbd>\n                  <Kbd>\n                    <ArrowDownIcon />\n                  </Kbd>\n                </KbdGroup>\n                <span>Navigate</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Kbd>\n                  <CornerDownLeftIcon />\n                </Kbd>\n                <span>Open</span>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Kbd>Esc</Kbd>\n              <span>Close</span>\n            </div>\n          </CommandFooter>\n        </Command>\n      </CommandDialogPopup>\n    </CommandDialog>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "command",
    "dialog"
  ],
  "type": "registry:block"
}