{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "command",
  "type": "registry:ui",
  "title": "Command",
  "description": "A keyboard-first command palette with filtering, groups, and shortcuts.",
  "dependencies": [
    "@tabler/icons-react",
    "cmdk"
  ],
  "registryDependencies": [
    "https://abackui.com/r/utils.json",
    "https://abackui.com/r/dialog.json"
  ],
  "categories": [
    "Overlays"
  ],
  "docs": "https://abackui.com/docs/components/command",
  "meta": {
    "status": "beta",
    "usedIn": [
      "aback-launch",
      "aback-group"
    ]
  },
  "files": [
    {
      "path": "components/ui/command.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { IconSearch } from \"@tabler/icons-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {\n  title?: string;\n  description?: string;\n  className?: string;\n  /** Show the dialog's close button. Defaults to `true`; a search surface usually sets it to `false`. */\n  showCloseButton?: boolean;\n}\n\nfunction CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a command to run.\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent showCloseButton={showCloseButton} className={cn(\"overflow-hidden p-0\", className)}>\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command label={title}>{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  wrapperClassName,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input> & {\n  wrapperClassName?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn(\"flex h-11 items-center gap-2 border-b border-border px-3\", wrapperClassName)}\n    >\n      <IconSearch 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-11 w-full bg-transparent py-3 text-sm text-foreground outline-none\",\n          \"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          \"focus-visible:outline-none\",\n          className,\n        )}\n        {...props}\n      />\n      {children}\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-80 overflow-y-auto overflow-x-hidden p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"px-3 py-8 text-center text-sm text-muted-foreground\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden text-foreground\",\n        \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5\",\n        \"[&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold\",\n        \"[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\n        \"[&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 text-sm outline-none\",\n        \"data-[selected=true]:bg-muted data-[selected=true]:text-foreground\",\n        \"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto font-mono text-xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/command.tsx"
    }
  ]
}