{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slash-command-menu",
  "type": "registry:ui",
  "title": "Slash command menu",
  "description": "React slash command menu that filters commands by the typed query, shows each as /name with an optional hint, and falls back to a No commands message.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/slash-command-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/slash-command-menu.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A floating list of slash commands filtered by what the user has typed after the slash. */\ntype Item = { id: string; label: string; hint?: string }\n\ntype SlashCommandMenuProps = {\n  /** Commands to offer. Defaults to Lumen's composer commands. */\n  items?: Item[]\n  /** The text typed after the slash; filters the list. */\n  query?: string\n  onSelect?: (item: Item) => void\n  className?: string\n}\n\nconst SAMPLE_ITEMS: Item[] = [\n  { id: \"invoice\", label: \"invoice\", hint: \"Create an invoice\" },\n  { id: \"customer\", label: \"customer\", hint: \"Add a customer\" },\n  { id: \"remind\", label: \"remind\", hint: \"Send a payment reminder\" },\n  { id: \"note\", label: \"note\", hint: \"Attach an internal note\" },\n  { id: \"deploy\", label: \"deploy\", hint: \"Trigger a deploy\" },\n  { id: \"status\", label: \"status\", hint: \"Check system status\" },\n]\n\nfunction SlashCommandMenu({\n  items = SAMPLE_ITEMS,\n  query = \"\",\n  onSelect,\n  className,\n}: SlashCommandMenuProps) {\n  const filtered = items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase()))\n  return (\n    <div\n      data-slot=\"slash-command-menu\"\n      role=\"listbox\"\n      aria-label=\"Slash commands\"\n      className={cn(\n        \"w-72 overflow-hidden rounded-xl border border-border bg-raised p-1\",\n        \"shadow-lg\",\n        className\n      )}\n    >\n      {filtered.length === 0 ? (\n        <p className=\"px-2.5 py-2 text-xs text-fg-muted\">No commands</p>\n      ) : (\n        filtered.map((item) => (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={false}\n            className=\"flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-sm hover:bg-sunken outline-none focus-visible:ring-2 focus-visible:ring-accent\"\n            onClick={() => onSelect?.(item)}\n          >\n            <span className=\"font-medium text-fg\">/{item.label}</span>\n            {item.hint ? <span className=\"text-xs text-fg-muted\">{item.hint}</span> : null}\n          </button>\n        ))\n      )}\n    </div>\n  )\n}\nexport { SlashCommandMenu }\nexport type { SlashCommandMenuProps }\n"
    }
  ]
}