{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "type": "registry:ui",
  "title": "Command",
  "description": "cmdk command list and the command palette dialog with a Cmd+K hook.",
  "dependencies": [
    "cmdk",
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils",
    "@wibo/dialog"
  ],
  "files": [
    {
      "path": "src/components/command.tsx",
      "type": "registry:ui",
      "content": "import { useEffect, type ComponentProps } from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\n/** Searchable list of commands (cmdk). Use inside `CommandDialog` for the palette. */\nfunction Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CommandDialogProps extends ComponentProps<typeof Dialog> {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n}\n\n/** The command palette: a dialog with a `Command` inside. Open it with `useCommandShortcut`. */\nfunction CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a page, a record or a command.\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        className={cn(\"top-[20%] translate-y-0 overflow-hidden p-0 sm:max-w-xl\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command className=\"[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-11 items-center gap-2 border-b border-border px-3\">\n      <Search aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex min-h-7.5 cursor-default items-center gap-2 rounded-lg px-3 py-1 text-label outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-foreground/4 data-[selected=true]:text-foreground\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard shortcut hint at the end of an item. */\nfunction CommandShortcut({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto font-mono text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Call `onTrigger` on Cmd+key (macOS) or Ctrl+key (elsewhere). Defaults to K,\n * the command palette shortcut.\n */\nfunction useCommandShortcut(onTrigger: () => void, key = \"k\") {\n  useEffect(() => {\n    const handler = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        onTrigger();\n      }\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [onTrigger, key]);\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  useCommandShortcut,\n};\nexport type { CommandDialogProps };\n"
    }
  ]
}