{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-command",
  "type": "registry:ui",
  "title": "Search Command Dialog",
  "description": "A responsive search command dialog with input and list of suggestions - drawer on mobile, modal on desktop.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://revola.sameerjs.com/r/responsive-command.json"
  ],
  "files": [
    {
      "path": "registry/cmdk/examples/search-command.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { ArrowUpRightIcon, CircleFadingPlusIcon, FileInputIcon, FolderPlusIcon, SearchIcon } from \"lucide-react\";\r\n\r\nimport {\r\n  ResponsiveCommandDialog,\r\n  ResponsiveCommandEmpty,\r\n  ResponsiveCommandGroup,\r\n  ResponsiveCommandInput,\r\n  ResponsiveCommandItem,\r\n  ResponsiveCommandList,\r\n  ResponsiveCommandSeparator,\r\n  ResponsiveCommandShortcut,\r\n} from \"@/components/ui/responsive-command\";\r\n\r\nexport default function SearchCommandExample() {\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    const down = (e: KeyboardEvent) => {\r\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\r\n        e.preventDefault();\r\n        setOpen((open) => !open);\r\n      }\r\n    };\r\n\r\n    document.addEventListener(\"keydown\", down);\r\n    return () => document.removeEventListener(\"keydown\", down);\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      <button\r\n        className=\"shadow-xs inline-flex h-9 w-fit rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\r\n        onClick={() => setOpen(true)}\r\n      >\r\n        <span className=\"flex grow items-center\">\r\n          <SearchIcon className=\"-ms-1 me-3 text-muted-foreground/80\" size={16} aria-hidden=\"true\" />\r\n          <span className=\"font-normal text-muted-foreground/70\">Search</span>\r\n        </span>\r\n        <kbd className=\"not-prose -me-1 ms-12 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\r\n          ⌘K\r\n        </kbd>\r\n      </button>\r\n      <ResponsiveCommandDialog open={open} onOpenChange={setOpen}>\r\n        <ResponsiveCommandInput placeholder=\"Type a command or search...\" />\r\n        <ResponsiveCommandList>\r\n          <ResponsiveCommandEmpty>No results found.</ResponsiveCommandEmpty>\r\n          <ResponsiveCommandGroup heading=\"Quick start\">\r\n            <ResponsiveCommandItem>\r\n              <FolderPlusIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\r\n              <span>New folder</span>\r\n              <ResponsiveCommandShortcut className=\"justify-center\">⌘N</ResponsiveCommandShortcut>\r\n            </ResponsiveCommandItem>\r\n            <ResponsiveCommandItem>\r\n              <FileInputIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\r\n              <span>Import document</span>\r\n              <ResponsiveCommandShortcut className=\"justify-center\">⌘I</ResponsiveCommandShortcut>\r\n            </ResponsiveCommandItem>\r\n            <ResponsiveCommandItem>\r\n              <CircleFadingPlusIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\r\n              <span>Add block</span>\r\n              <ResponsiveCommandShortcut className=\"justify-center\">⌘B</ResponsiveCommandShortcut>\r\n            </ResponsiveCommandItem>\r\n          </ResponsiveCommandGroup>\r\n          <ResponsiveCommandSeparator />\r\n          <ResponsiveCommandGroup heading=\"Navigation\">\r\n            <ResponsiveCommandItem>\r\n              <ArrowUpRightIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\r\n              <span>Go to dashboard</span>\r\n            </ResponsiveCommandItem>\r\n            <ResponsiveCommandItem>\r\n              <ArrowUpRightIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\r\n              <span>Go to apps</span>\r\n            </ResponsiveCommandItem>\r\n            <ResponsiveCommandItem>\r\n              <ArrowUpRightIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\r\n              <span>Go to connections</span>\r\n            </ResponsiveCommandItem>\r\n          </ResponsiveCommandGroup>\r\n        </ResponsiveCommandList>\r\n      </ResponsiveCommandDialog>\r\n    </>\r\n  );\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}