Command

1
"use client";
2

3
import { Command as CommandPrimitive } from "cmdk";
4

5
import {
6
  Dialog,
7
  DialogContent,
8
  DialogDescription,
9
  DialogHeader,
10
  DialogTitle,
11
} from "@/components/ui/pxl/dialog";
12
import { InputGroup, InputGroupAddon } from "@/components/ui/pxl/input-group";
13
import { cn } from "@/lib/utils";
14

15
function Command({
16
  className,
17
  ...props
18
}: React.ComponentProps<typeof CommandPrimitive>) {
19
  return (
20
    <CommandPrimitive
21
      data-slot="command"
22
      className={cn(
23
        "flex size-full flex-col overflow-hidden pixel-rounded pixel-border pixel-size-[5px] pixel-color-[color-mix(in_oklab,var(--foreground)_10%,transparent)] in-data-[slot=dialog-content]:pixel-color-[transparent] bg-popover p-1 py-2 text-popover-foreground",
24
        className,
25
      )}
26
      {...props}
27
    />
28
  );
29
}
30

31
function CommandDialog({
32
  title = "Command Palette",
33
  description = "Search for a command to run...",
34
  children,
35
  className,
36
  showCloseButton = false,
37
  ...props
38
}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
39
  title?: string;
40
  description?: string;
41
  className?: string;
42
  showCloseButton?: boolean;
43
  children: React.ReactNode;
44
}) {
45
  return (
46
    <Dialog {...props}>
47
      <DialogHeader className="sr-only">
48
        <DialogTitle>{title}</DialogTitle>
49
        <DialogDescription>{description}</DialogDescription>
50
      </DialogHeader>
51
      <DialogContent
52
        className={cn(
53
          "top-1/3 translate-y-0 overflow-hidden pixel-rounded pixel-size-[5px] p-0",
54
          className,
55
        )}
56
        showCloseButton={showCloseButton}
57
      >
58
        {children}
59
      </DialogContent>
60
    </Dialog>
61
  );
62
}
63

64
function CommandInput({
65
  className,
66
  ...props
67
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
68
  return (
69
    <div data-slot="command-input-wrapper" className="p-1 pb-0">
70
      <InputGroup className="h-8! pixel-rounded pixel-size-[3px] border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
71
        <CommandPrimitive.Input
72
          data-slot="command-input"
73
          className={cn(
74
            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
75
            className,
76
          )}
77
          {...props}
78
        />
79
        <InputGroupAddon>
80
          <svg
81
            className="size-4 shrink-0 opacity-50"
82
            xmlns="http://www.w3.org/2000/svg"
83
            fill="currentColor"
84
            viewBox="0 0 24 24"
85
          >
86
            <path d="M22 22h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm-6-2H6v-2h8v2Zm4 0h-2v-2h2v2ZM6 16H4v-2h2v2Zm10 0h-2v-2h2v2ZM4 14H2V6h2v8Zm14 0h-2V6h2v8ZM6 6H4V4h2v2Zm10 0h-2V4h2v2Zm-2-2H6V2h8v2Z" />
87
          </svg>
88
        </InputGroupAddon>
89
      </InputGroup>
90
    </div>
91
  );
92
}
93

94
function CommandList({
95
  className,
96
  ...props
97
}: React.ComponentProps<typeof CommandPrimitive.List>) {
98
  return (
99
    <CommandPrimitive.List
100
      data-slot="command-list"
101
      className={cn(
102
        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
103
        className,
104
      )}
105
      {...props}
106
    />
107
  );
108
}
109

110
function CommandEmpty({
111
  className,
112
  ...props
113
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
114
  return (
115
    <CommandPrimitive.Empty
116
      data-slot="command-empty"
117
      className={cn("py-6 text-center text-sm", className)}
118
      {...props}
119
    />
120
  );
121
}
122

123
function CommandGroup({
124
  className,
125
  ...props
126
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
127
  return (
128
    <CommandPrimitive.Group
129
      data-slot="command-group"
130
      className={cn(
131
        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-heading **:[[cmdk-group-heading]]:text-muted-foreground",
132
        className,
133
      )}
134
      {...props}
135
    />
136
  );
137
}
138

139
function CommandSeparator({
140
  className,
141
  ...props
142
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
143
  return (
144
    <CommandPrimitive.Separator
145
      data-slot="command-separator"
146
      className={cn("-mx-1 h-px w-auto bg-border", className)}
147
      {...props}
148
    />
149
  );
150
}
151

152
function CommandItem({
153
  className,
154
  children,
155
  ...props
156
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
157
  return (
158
    <CommandPrimitive.Item
159
      data-slot="command-item"
160
      className={cn(
161
        "group/command-item relative flex cursor-default items-center gap-2 pixel-rounded pixel-size-[3px] px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:pixel-rounded! in-data-[slot=dialog-content]:pixel-size-[5px] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground",
162
        className,
163
      )}
164
      {...props}
165
    >
166
      {children}
167
      <svg
168
        className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
169
        xmlns="http://www.w3.org/2000/svg"
170
        fill="currentColor"
171
        viewBox="0 0 24 24"
172
      >
173
        <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z" />
174
      </svg>
175
    </CommandPrimitive.Item>
176
  );
177
}
178

179
function CommandShortcut({
180
  className,
181
  ...props
182
}: React.ComponentProps<"span">) {
183
  return (
184
    <span
185
      data-slot="command-shortcut"
186
      className={cn(
187
        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
188
        className,
189
      )}
190
      {...props}
191
    />
192
  );
193
}
194

195
export {
196
  Command,
197
  CommandDialog,
198
  CommandEmpty,
199
  CommandGroup,
200
  CommandInput,
201
  CommandItem,
202
  CommandList,
203
  CommandSeparator,
204
  CommandShortcut,
205
};