{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "author": "Matthew Blode",
  "description": "A command palette for fast, keyboard-driven searching and navigation.",
  "dependencies": ["cmdk"],
  "registryDependencies": ["dialog"],
  "files": [
    {
      "path": "ui/command.tsx",
      "content": "\"use client\";\n\nimport { SearchIcon } from \"blode-icons-react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\n\nconst Command = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) => (\n  <CommandPrimitive\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className,\n    )}\n    data-slot=\"command\"\n    {...props}\n  />\n);\n\nconst CommandDialog = ({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n  className?: string;\n  showCloseButton?: boolean;\n}) => (\n  <Dialog {...props}>\n    <DialogHeader className=\"sr-only\">\n      <DialogTitle>{title}</DialogTitle>\n      <DialogDescription>{description}</DialogDescription>\n    </DialogHeader>\n    <DialogContent\n      className={cn(\"overflow-hidden p-0\", className)}\n      showCloseButton={showCloseButton}\n    >\n      <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        {children}\n      </Command>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) => (\n  <div className=\"flex h-9 items-center gap-2 border-b px-3\" data-slot=\"command-input-wrapper\">\n    <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"command-input\"\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) => (\n  <CommandPrimitive.List\n    className={cn(\n      \"scroll-fade max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\",\n      className,\n    )}\n    data-slot=\"command-list\"\n    {...props}\n  />\n);\n\nconst CommandEmpty = ({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => (\n  <CommandPrimitive.Empty\n    className=\"py-6 text-center text-sm\"\n    data-slot=\"command-empty\"\n    {...props}\n  />\n);\n\nconst CommandGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) => (\n  <CommandPrimitive.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]]: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\nconst CommandSeparator = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) => (\n  <CommandPrimitive.Separator\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    data-slot=\"command-separator\"\n    {...props}\n  />\n);\n\nconst CommandItem = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) => (\n  <CommandPrimitive.Item\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-slot=\"command-item\"\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({ className, ...props }: React.ComponentProps<\"span\">) => (\n  <span\n    className={cn(\"ml-auto text-muted-foreground text-xs tracking-widest\", className)}\n    data-slot=\"command-shortcut\"\n    {...props}\n  />\n);\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}