{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A searchable command menu for quick actions, navigation, and filtering.",
  "dependencies": [
    "cmdk",
    "lucide-react"
  ],
  "registryDependencies": [
    "modal",
    "input-group"
  ],
  "files": [
    {
      "path": "packages/ui/src/command.tsx",
      "content": "\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Check as CheckIcon, Search as SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { InputGroup, InputGroupAddon } from \"./input-group\";\nimport {\n  Modal,\n  ModalContent,\n  ModalDescription,\n  ModalHeader,\n  ModalTitle,\n} from \"./modal\";\nimport { cn, POPUP_ITEM_HEIGHT } from \"./utils\";\n\n// =============================================================================\n// Command (Root)\n// =============================================================================\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl bg-popover p-1 text-popover-foreground\",\n        className\n      )}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// CommandDialog\n// =============================================================================\nexport interface CommandDialogProps\n  extends Omit<React.ComponentProps<typeof Modal>, \"children\"> {\n  children: React.ReactNode;\n  className?: string;\n  description?: string;\n  showCloseButton?: boolean;\n  title?: string;\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Modal {...props}>\n      <ModalContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        scrollBehavior=\"inside\"\n        showCloseButton={showCloseButton}\n      >\n        <ModalHeader className=\"sr-only\">\n          <ModalTitle>{title}</ModalTitle>\n          <ModalDescription>{description}</ModalDescription>\n        </ModalHeader>\n        {children}\n      </ModalContent>\n    </Modal>\n  );\n}\n\n// =============================================================================\n// CommandInput\n// =============================================================================\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"p-1 pb-0\" data-slot=\"command-input-wrapper\">\n      <InputGroup>\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n        <CommandPrimitive.Input\n          className={cn(\n            \"flex h-10 flex-1 rounded-none border-0 bg-transparent px-3 py-1 text-sm shadow-none outline-hidden dark:bg-transparent\",\n            \"placeholder:text-muted-foreground/70\",\n            \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          data-slot=\"input-group-control\"\n          {...props}\n        />\n      </InputGroup>\n    </div>\n  );\n}\n\n// =============================================================================\n// CommandList\n// =============================================================================\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-y-auto overflow-x-hidden outline-none\",\n        className\n      )}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// CommandEmpty\n// =============================================================================\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className={cn(\"py-6 text-center text-sm\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// CommandGroup\n// =============================================================================\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-1.5 **:[[cmdk-group-heading]]:py-1 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group-heading]]:text-xs\",\n        className\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// CommandSeparator\n// =============================================================================\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border-muted\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// CommandItem\n// =============================================================================\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\",\n        \"not-data-[variant=destructive]:data-[selected=true]:**:text-accent-foreground\",\n        `group/command-item relative flex ${POPUP_ITEM_HEIGHT} cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 text-sm outline-hidden`,\n        \"data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    >\n      {children}\n      <CheckIcon className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\" />\n    </CommandPrimitive.Item>\n  );\n}\n\n// =============================================================================\n// CommandShortcut\n// =============================================================================\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-muted-foreground text-xs tracking-widest group-data-[selected=true]/command-item:text-accent-foreground\",\n        className\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}