Command

1"use client";
2 
3import * as React from "react";
4import { Autocomplete as AutocompleteBase } from "@base-ui/react/autocomplete";
5import { Dialog as BaseDialog } from "@base-ui/react/dialog";
6import {
7  InputGroup,
8  InputGroupAddon,
9  InputGroupInput,
10} from "@/registry/default/input-group/input-group";
11import {
12  ScrollArea,
13  type ScrollAreaProps,
14} from "@/registry/default/scroll-area/scroll-area";
15 
16import { cn } from "@/lib/utils";
17import {
18  solidSurface,
19  type SurfaceLevel,
20} from "@/registry/default/lib/elevated";
21 
22import { HugeiconsIcon } from "@hugeicons/react";
23import { Search01Icon } from "@hugeicons/core-free-icons";
24const useCommandFilter = AutocompleteBase.useFilter;
25const useCommandFilteredItems = AutocompleteBase.useFilteredItems;
26 
27const AutocompleteRoot = AutocompleteBase.Root;
28 
29function Command<ItemValue>({
30  className,
31  items = [],
32  children,
33  autoHighlight = "always",
34  open = true,
35  keepHighlight = true,
36  level = 3,
37  shadowLevel = 3,
38  ...props
39}: AutocompleteBase.Root.Props<ItemValue> & {
40  className?: string;
41  /** Surface elevation level for the outer Command frame (1-8). Defaults to 3. Bump to 7 when used inside CommandDialog so the palette pops above the dialog. */
42  level?: SurfaceLevel;
43  /** Shadow weight (1-8). Pinned to 3 by default. */
44  shadowLevel?: SurfaceLevel;
45}) {
46  return (
47    <div
48      data-slot="command"
49      data-level={level}
50      className={cn(
51        // Outer frame is surface-2 (bg-muted); CommandContent drops back to
52        // surface-1 inside, creating a "panel with well" effect. bg-muted pins
53        // the outer color regardless of level — only shadow weight varies.
54        "text-popover-foreground flex min-h-0 flex-1 flex-col rounded-4xl p-1",
55        solidSurface(level, shadowLevel),
56        "bg-muted",
57        className,
58      )}
59    >
60      <AutocompleteRoot
61        items={items}
62        autoHighlight={autoHighlight}
63        keepHighlight={keepHighlight}
64        open={open}
65        inline={true}
66        {...props}
67      >
68        {children}
69      </AutocompleteRoot>
70    </div>
71  );
72}
73 
74const CommandDialog = BaseDialog.Root;
75 
76function CommandDialogTrigger({ ...props }: BaseDialog.Trigger.Props) {
77  return <BaseDialog.Trigger data-slot="command-dialog-trigger" {...props} />;
78}
79 
80function CommandDialogPortal({ ...props }: BaseDialog.Portal.Props) {
81  return <BaseDialog.Portal data-slot="command-dialog-portal" {...props} />;
82}
83 
84function CommandDialogBackdrop({
85  className,
86  ...props
87// … truncated