{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A fast, composable command palette built on the Base UI Autocomplete primitive.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "cn@^0.5.2",
    "lucide-react@^1.41.0"
  ],
  "registryDependencies": [
    "https://sevenui.dev/r/dialog.json",
    "https://sevenui.dev/r/input-group.json",
    "https://sevenui.dev/r/sevenui-tokens.json"
  ],
  "files": [
    {
      "path": "registry/base/ui/command.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { cn } from \"cn\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base/ui/dialog\";\nimport { InputGroup, InputGroupAddon } from \"@/registry/base/ui/input-group\";\n\nfunction Command({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Root> & {\n  className?: string;\n}) {\n  return (\n    <AutocompletePrimitive.Root\n      inline\n      open\n      autoHighlight=\"always\"\n      keepHighlight\n      {...props}\n    >\n      <div\n        data-slot=\"command\"\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AutocompletePrimitive.Root>\n  );\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}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0 shadow-overlay\",\n          className,\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-[var(--control-h,2.125rem)]! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <AutocompletePrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full bg-transparent text-[length:var(--control-text,0.8125rem)] outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n  return (\n    <AutocompletePrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n  return (\n    <AutocompletePrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\n        \"not-empty:py-6 text-center text-[length:var(--control-text,0.8125rem)] text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof AutocompletePrimitive.Group>,\n  \"children\"\n> & {\n  heading?: React.ReactNode;\n  children: (item: any, index: number) => React.ReactNode;\n}) {\n  return (\n    <AutocompletePrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"overflow-hidden p-1 text-foreground\", className)}\n      {...props}\n    >\n      {heading != null && (\n        <AutocompletePrimitive.GroupLabel className=\"px-2 pt-2 pb-1 font-mono text-[11px] font-medium tracking-wide text-muted-foreground uppercase\">\n          {heading}\n        </AutocompletePrimitive.GroupLabel>\n      )}\n      <AutocompletePrimitive.Collection>\n        {children}\n      </AutocompletePrimitive.Collection>\n    </AutocompletePrimitive.Group>\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Separator>) {\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex min-h-[var(--item-h,2rem)] cursor-default items-center gap-[var(--control-gap,0.5rem)] rounded-md px-2 py-0.5 text-[length:var(--control-text,0.8125rem)] outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:data-highlighted:bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-highlighted:*:[svg]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto inline-flex h-5 min-w-5 items-center justify-center gap-0.5 rounded-sm px-1 font-mono text-[10.5px] leading-none font-medium text-muted-foreground group-data-highlighted/command-item:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\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"
    }
  ],
  "type": "registry:ui"
}