Command

1"use client";
2 
3import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
4import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
5import { createContext, useContext } from "react";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8import {
9  itemGroupLabel,
10  itemRow,
11  overlayLayer,
12  popupDivider,
13  popupSurface,
14  selectionFocus,
15} from "@/lib/recipes";
16 
17import { Check, X } from "@phosphor-icons/react/dist/ssr";
18type Density = "compact" | "comfortable";
19 
20const CommandDensityContext = createContext<Density>("comfortable");
21 
22/** Command palette / searchable list built on Base UI Autocomplete (inline mode). */
23export function Command(
24  props: React.ComponentProps<typeof AutocompletePrimitive.Root>,
25): React.ReactElement {
26  return (
27    <AutocompletePrimitive.Root
28      data-slot="command"
29      inline
30      autoHighlight={false}
31      {...props}
32    />
33  );
34}
35 
36export interface CommandInputProps
37  extends Omit<React.ComponentProps<typeof AutocompletePrimitive.Input>, "prefix"> {
38  prefix?: React.ReactNode;
39  /** Trailing node (Kbd hint, chip). Consumers wire click behavior themselves. */
40  action?: React.ReactNode;
41}
42 
43export function CommandInput({
44  className,
45  prefix,
46  action,
47  ...props
48}: CommandInputProps): React.ReactElement {
49  return (
50    <span
51      className="relative inline-flex w-full items-center bg-transparent text-ink-muted"
52      data-slot="command-input-wrapper"
53    >
54      {prefix && (
55        <span className="flex shrink-0 items-center ps-4 pe-2 [&_svg]:size-4 [&_svg]:shrink-0">
56          {prefix}
57        </span>
58      )}
59      <AutocompletePrimitive.Input
60        data-slot="command-input"
61        className={cn(
62          "h-12 w-full flex-1 border-none bg-transparent text-small text-ink placeholder:text-ink-subtle outline-none ring-0 focus:outline-none focus:ring-0",
63          prefix ? "ps-0" : "ps-4",
64          action ? "pe-2" : "pe-4",
65          className,
66        )}
67        {...props}
68      />
69      {action && (
70        <span
71          className="flex shrink-0 items-center gap-1.5 pe-3 text-mini text-ink-muted"
72          data-slot="command-input-action"
73        >
74          {action}
75        </span>
76      )}
77    </span>
78  );
79}
80 
81export function CommandList({
82  className,
83  density = "comfortable",
84  children,
85  ...props
86}: Omit<
87  React.ComponentProps<typeof AutocompletePrimitive.List>,
88  "children"
89> & {
90  density?: Density;
91  children?: React.ReactNode;
92// … truncated