Command

1import { Command as CommandPrimitive } from "cmdk";
2import { CheckIcon, SearchIcon } from "lucide-react";
3import type * as React from "react";
4import { cn } from "@/registry/lib/surface";
5import {
6  Dialog,
7  DialogContent,
8  DialogDescription,
9  DialogHeader,
10  DialogTitle,
11} from "@/registry/ui/dialog";
12import {
13  InputGroup,
14  InputGroupAddon,
15} from "@/registry/ui/input-group";
16 
17function Command({
18  className,
19  ...props
20}: React.ComponentProps<typeof CommandPrimitive>) {
21  return (
22    <CommandPrimitive
23      data-slot="command"
24      className={cn(
25        "flex size-full flex-col overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-none",
26        className,
27      )}
28      {...props}
29    />
30  );
31}
32 
33function CommandDialog({
34  title = "command palette",
35  description = "search for a command.",
36  children,
37  className,
38  showCloseButton = false,
39  ...props
40}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
41  title?: string;
42  description?: string;
43  className?: string;
44  showCloseButton?: boolean;
45  children?: React.ReactNode;
46}) {
47  return (
48    <Dialog {...props}>
49      <DialogHeader className="sr-only">
50        <DialogTitle>{title}</DialogTitle>
51        <DialogDescription>{description}</DialogDescription>
52      </DialogHeader>
53      <DialogContent
54        className={cn(
55          "overflow-hidden p-0 shadow-none duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:[--tw-enter-scale:1] data-closed:[--tw-exit-scale:1]",
56          className,
57        )}
58        showCloseButton={showCloseButton}
59      >
60        {children}
61      </DialogContent>
62    </Dialog>
63  );
64}
65 
66function CommandInput({
67  className,
68  ...props
69}: React.ComponentProps<typeof CommandPrimitive.Input>) {
70  return (
71    <div data-slot="command-input-wrapper" className="border-b border-border p-2">
72      <InputGroup className="h-8 border border-border bg-background shadow-none">
73        <CommandPrimitive.Input
74          data-slot="command-input"
75          className={cn(
76            "w-full bg-transparent font-sans text-sm outline-none disabled:cursor-not-allowed disabled:opacity-40",
77            className,
78          )}
79          {...props}
80        />
81        <InputGroupAddon>
82          <SearchIcon className="size-4 shrink-0 opacity-60" strokeWidth={1.5} />
83        </InputGroupAddon>
84      </InputGroup>
85    </div>
86  );
87}
88 
89function CommandList({
90  className,
91  ...props
92}: React.ComponentProps<typeof CommandPrimitive.List>) {
93// … truncated