{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-menu",
  "title": "Command Menu",
  "description": "A mobile-friendly command palette for search and quick actions.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/arrow-svg",
    "@lumi-ui/input",
    "@lumi-ui/dialog",
    "@lumi-ui/scroll-area",
    "@lumi-ui/autocomplete"
  ],
  "files": [
    {
      "path": "registry/ui/command-menu.tsx",
      "content": "import type {\n  AutocompleteCollectionProps,\n  AutocompleteEmptyProps,\n  AutocompleteGroupLabelProps,\n  AutocompleteGroupProps,\n  AutocompleteItemProps,\n  AutocompleteListProps,\n  DialogPopupProps,\n  DialogRootProps,\n  DialogTriggerProps,\n  SeparatorProps,\n} from \"@base-ui/react\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInputGroupContent,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/ui/autocomplete\";\nimport {\n  Dialog,\n  DialogBackdrop,\n  DialogClose,\n  DialogPopup,\n  DialogPortal,\n  DialogTrigger,\n  DialogViewport,\n} from \"@/registry/ui/dialog\";\nimport type { inputBaseVariants } from \"@/registry/ui/input\";\nimport { ScrollArea } from \"@/registry/ui/scroll-area\";\n\nfunction CommandMenu(props: DialogRootProps) {\n  return <Dialog {...props} data-slot=\"command-menu\" />;\n}\n\nfunction CommandMenuTrigger(props: DialogTriggerProps) {\n  return <DialogTrigger data-slot=\"command-menu-trigger\" {...props} />;\n}\n\nfunction CommandMenuContent({\n  children,\n  className,\n  ...props\n}: DialogPopupProps) {\n  return (\n    <DialogPortal>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          \"flex flex-col items-center\",\n          // add top padding to move the popup down\n          \"pt-[10dvh]\",\n        )}\n      >\n        <DialogPopup\n          className={cn(\n            \"relative flex flex-col overflow-hidden bg-background rounded-md shadow-md dark:shadow-xs\",\n            \"w-[min(40rem,calc(100vw-2rem))]\",\n            \"overlay-outline animate-fade-zoom\",\n            className,\n          )}\n          data-slot=\"command-menu-content\"\n          {...props}\n        >\n          <DialogClose className=\"sr-only\">Close command palette</DialogClose>\n          {children}\n        </DialogPopup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nfunction CommandMenuFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex justify-between items-center gap-2 text-xs text-muted-foreground h-10 px-4 border-t\",\n        className,\n      )}\n      data-slot=\"command-menu-footer\"\n      {...props}\n    />\n  );\n}\n\nconst Command = (({\n  autoHighlight = \"always\",\n  inline = true,\n  keepHighlight = true,\n  open = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>) => {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      data-slot=\"command\"\n      inline={inline}\n      keepHighlight={keepHighlight}\n      open={open}\n      {...props}\n    />\n  );\n}) as typeof Autocomplete;\n\nfunction CommandInput({\n  className,\n  inputSize = \"lg\",\n  addonIcon = <Search />,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInputGroupContent> & {\n  inputSize?: VariantProps<typeof inputBaseVariants>[\"inputSize\"];\n}) {\n  return (\n    <AutocompleteInputGroupContent\n      addonIcon={addonIcon}\n      className={cn(\"shrink-0 border-b rounded-none\", className)}\n      data-slot=\"command-input\"\n      embedded\n      inputSize={inputSize}\n      variant=\"ghost\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: AutocompleteEmptyProps) {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"p-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandScrollArea({\n  className,\n  ...props\n}: React.ComponentProps<typeof ScrollArea>) {\n  return (\n    <ScrollArea\n      className={cn(\n        \"h-auto max-h-64 sm:max-h-96\",\n        \"focus-within:outline-1 focus-within:-outline-offset-1 focus-within:outline-primary\",\n        className,\n      )}\n      data-slot=\"command-scroll-area\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandList({ className, ...props }: AutocompleteListProps) {\n  return (\n    <AutocompleteList\n      className={className}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: AutocompleteItemProps & {\n  className?: string;\n}) {\n  return (\n    <AutocompleteItem\n      className={cn(\n        \"group/command-item font-medium flex items-center py-2 px-4 data-[highlighted]:before:inset-x-1.5\",\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandCollection({ ...props }: AutocompleteCollectionProps) {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nfunction CommandGroup({ ...props }: AutocompleteGroupProps) {\n  return <AutocompleteGroup data-slot=\"command-group\" {...props} />;\n}\n\nfunction CommandGroupLabel({\n  className,\n  ...props\n}: AutocompleteGroupLabelProps) {\n  return (\n    <AutocompleteGroupLabel\n      className={cn(\"font-medium pl-4\", className)}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground group-data-highlighted/command-item:text-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({ className, ...props }: SeparatorProps) {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"last:hidden\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  CommandMenu,\n  CommandMenuContent,\n  CommandMenuTrigger,\n  Command,\n  CommandScrollArea,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandCollection,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n  CommandMenuFooter,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}