Command (Tailwind)

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";
7 
8function CommandDialog({ ...props }: Dialog.Root.Props) {
9  return <Dialog.Root {...props} />;
10}
11 
12function CommandDialogTrigger({ ...props }: Dialog.Trigger.Props) {
13  return <Dialog.Trigger data-slot="command-dialog-trigger" {...props} />;
14}
15 
16const CommandDialogPortal = Dialog.Portal;
17 
18function CommandDialogBackdrop({ className, ...props }: Dialog.Backdrop.Props) {
19  return (
20    <Dialog.Backdrop
21      className={cn(
22        "fixed inset-0 z-[var(--dialog-z)] bg-[var(--dialog-overlay)] transition-opacity duration-150",
23        "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
24        className
25      )}
26      data-slot="command-dialog-backdrop"
27      {...props}
28    />
29  );
30}
31 
32function CommandDialogPopup({ className, children, ...props }: Dialog.Popup.Props & { children?: React.ReactNode }) {
33  return (
34    <CommandDialogPortal>
35      <CommandDialogBackdrop />
36      <Dialog.Popup
37        className={cn(
38          "-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-[101]",
39          "w-[calc(100%-2rem)] max-w-[560px] rounded-[var(--radius)]",
40          "border-none bg-[var(--background)]",
41          "shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.5),var(--shadow-lg)]",
42          "transition-all duration-150",
43          "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
44          "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
45          "max-sm:w-[calc(100%-2rem)] max-sm:max-w-none",
46          className
47        )}
48        data-slot="command-dialog-popup"
49        {...props}
50      >
51        {children}
52      </Dialog.Popup>
53    </CommandDialogPortal>
54  );
55}
56 
57function Command({
58  autoHighlight = "always",
59  keepHighlight = true,
60  className,
61  ...props
62}: React.ComponentProps<typeof Autocomplete.Root> & { className?: string }) {
63  return (
64    <div className={cn("flex w-full flex-col overflow-hidden text-[var(--foreground)]", className)} data-slot="command">
65      <Autocomplete.Root
66        autoHighlight={autoHighlight}
67        filter={null}
68        inline
69        keepHighlight={keepHighlight}
70        open
71        {...props}
72      />
73    </div>
74  );
75}
76 
77function CommandInput({
78  className,
79  placeholder = "Search...",
80  ...props
81}: React.ComponentProps<typeof Autocomplete.Input>) {
82  return (
83    <div
84// … truncated