Command

1"use client";
2 
3import { Autocomplete } from "@base-ui/react/autocomplete";
4import { Dialog } from "@base-ui/react/dialog";
5import type React from "react";
6import { cn } from "@/lib/utils";
7import styles from "./command.module.css";
8 
9function CommandDialog({ ...props }: Dialog.Root.Props) {
10  return <Dialog.Root {...props} />;
11}
12 
13function CommandDialogTrigger({ ...props }: Dialog.Trigger.Props) {
14  return <Dialog.Trigger data-slot="command-dialog-trigger" {...props} />;
15}
16 
17const CommandDialogPortal = Dialog.Portal;
18 
19function CommandDialogBackdrop({ className, ...props }: Dialog.Backdrop.Props) {
20  return <Dialog.Backdrop className={cn(styles.backdrop, className)} data-slot="command-dialog-backdrop" {...props} />;
21}
22 
23function CommandDialogPopup({
24  className,
25  backdropClassName,
26  children,
27  ...props
28}: Dialog.Popup.Props & { backdropClassName?: string; children?: React.ReactNode }) {
29  return (
30    <CommandDialogPortal>
31      <CommandDialogBackdrop className={backdropClassName} />
32      <Dialog.Popup className={cn(styles.dialogPopup, className)} data-slot="command-dialog-popup" {...props}>
33        {children}
34      </Dialog.Popup>
35    </CommandDialogPortal>
36  );
37}
38 
39function Command({
40  autoHighlight = "always",
41  keepHighlight = true,
42  className,
43  ...props
44}: React.ComponentProps<typeof Autocomplete.Root> & { className?: string }) {
45  return (
46    <div className={cn(styles.root, className)} data-slot="command">
47      <Autocomplete.Root
48        autoHighlight={autoHighlight}
49        filter={null}
50        inline
51        keepHighlight={keepHighlight}
52        open
53        {...props}
54      />
55    </div>
56  );
57}
58 
59function CommandInput({
60  className,
61  placeholder = "Search...",
62  ...props
63}: React.ComponentProps<typeof Autocomplete.Input>) {
64  return (
65    <div className={styles.inputWrapper} data-slot="command-input-wrapper">
66      <Autocomplete.Input
67        autoFocus
68        className={cn(styles.input, className)}
69        data-slot="command-input"
70        placeholder={placeholder}
71        {...props}
72      />
73    </div>
74  );
75}
76 
77function CommandList({ className, ...props }: React.ComponentProps<typeof Autocomplete.List>) {
78  return <Autocomplete.List className={cn(styles.list, className)} data-slot="command-list" {...props} />;
79}
80 
81function CommandEmpty({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Empty>) {
82  return (
83    <Autocomplete.Empty className={cn(styles.empty, className)} data-slot="command-empty" {...props}>
84// … truncated