+ "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n Autocomplete,\n AutocompleteCollection,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n return (\n <CommandDialogPrimitive.Trigger\n data-slot=\"command-dialog-trigger\"\n {...props}\n />\n );\n}\n\nexport function CommandDialogBackdrop({\n className,\n ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n return (\n <CommandDialogPrimitive.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n className,\n )}\n data-slot=\"command-dialog-backdrop\"\n {...props}\n />\n );\n}\n\nexport function CommandDialogViewport({\n className,\n ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n return (\n <CommandDialogPrimitive.Viewport\n className={cn(\n \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n className,\n )}\n data-slot=\"command-dialog-viewport\"\n {...props}\n />\n );\n}\n\nexport function CommandDialogPopup({\n className,\n children,\n ...props\n}: CommandDialogPrimitive.Popup.Props): React.ReactElement {\n return (\n <CommandDialogPortal>\n <CommandDialogBackdrop />\n <CommandDialogViewport>\n <CommandDialogPrimitive.Popup\n className={cn(\n \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n className,\n )}\n data-slot=\"command-dialog-popup\"\n {...props}\n >\n {children}\n </CommandDialogPrimitive.Popup>\n </CommandDialogViewport>\n </CommandDialogPortal>\n );\n}\n\nexport function Command({\n autoHighlight = \"always\",\n keepHighlight = true,\n ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n return (\n <Autocomplete\n autoHighlight={autoHighlight}\n inline\n keepHighlight={keepHighlight}\n open\n {...props}\n />\n );\n}\n\nexport function CommandInput({\n className,\n placeholder = undefined,\n ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n return (\n <div className=\"px-2.5 py-1.5\">\n <AutocompleteInput\n autoFocus\n className={cn(\n \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n className,\n )}\n placeholder={placeholder}\n size=\"lg\"\n startAddon={<SearchIcon />}\n {...props}\n />\n </div>\n );\n}\n\nexport function CommandList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n return (\n <AutocompleteList\n className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n data-slot=\"command-list\"\n {...props}\n />\n );\n}\n\nexport function CommandEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n return (\n <AutocompleteEmpty\n className={cn(\"not-empty:py-6\", className)}\n data-slot=\"command-empty\"\n {...props}\n />\n );\n}\n\nexport function CommandPanel({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n <div\n className={cn(\n \"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function CommandGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n return (\n <AutocompleteGroup\n className={className}\n data-slot=\"command-group\"\n {...props}\n />\n );\n}\n\nexport function CommandGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n return (\n <AutocompleteGroupLabel\n className={className}\n data-slot=\"command-group-label\"\n {...props}\n />\n );\n}\n\nexport function CommandCollection({\n ...props\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\n return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nexport function CommandItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n return (\n <AutocompleteItem\n className={cn(\"py-1.5\", className)}\n data-slot=\"command-item\"\n {...props}\n />\n );\n}\n\nexport function CommandSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n return (\n <AutocompleteSeparator\n className={cn(\"my-2\", className)}\n data-slot=\"command-separator\"\n {...props}\n />\n );\n}\n\nexport function CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n return (\n <kbd\n className={cn(\n \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n className,\n )}\n data-slot=\"command-shortcut\"\n {...props}\n />\n );\n}\n\nexport function CommandFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n <div\n className={cn(\n \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n className,\n )}\n data-slot=\"command-footer\"\n {...props}\n />\n );\n}\n\nexport { CommandDialogPrimitive };\n",
0 commit comments