Autocomplete

1import * as React from "react";
2import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
3import { cn } from "@/lib/utils";
4import {
5  elevatedSurface,
6  type SurfaceLevel,
7} from "@/registry/default/lib/elevated";
8import {
9  ScrollArea,
10  type ScrollAreaProps,
11} from "@/registry/default/scroll-area/scroll-area";
12 
13import { HugeiconsIcon } from "@hugeicons/react";
14import { ArrowDown01Icon, Cancel01Icon } from "@hugeicons/core-free-icons";
15const AutocompleteRoot = BaseAutocomplete.Root;
16 
17function AutocompleteInput({
18  className,
19  showTrigger = false,
20  showClear = false,
21  variant = "default",
22  ...props
23}: BaseAutocomplete.Input.Props & {
24  showTrigger?: boolean;
25  showClear?: boolean;
26  variant?: "default" | "elevated";
27}) {
28  return (
29    <BaseAutocomplete.InputGroup
30      data-slot="autocomplete-input-group"
31      className={cn(
32        "relative",
33        "has-data-[slot=autocomplete-clear]:**:data-[slot=autocomplete-input]:pr-7",
34        "has-data-[slot=autocomplete-trigger]:**:data-[slot=autocomplete-input]:pr-7",
35        "has-data-[slot=autocomplete-clear]:has-data-[slot=autocomplete-trigger]:**:data-[slot=autocomplete-input]:pr-13",
36      )}
37    >
38      <BaseAutocomplete.Input
39        data-slot="autocomplete-input"
40        className={cn(
41          "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-10 w-full min-w-0 rounded-lg border bg-clip-padding px-3 text-base font-normal disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 sm:h-9 md:text-sm",
42          variant === "default" ? "bg-input" : "bg-input-elevated",
43          "file:text-foreground file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:text-sm file:font-medium",
44          "focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out outline-solid focus-visible:outline-2 focus-visible:outline-offset-2",
45          "aria-invalid:outline-destructive/50 aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-solid",
46          className,
47        )}
48        {...props}
49      />
50      {(showClear || showTrigger) && (
51        <div className="absolute inset-y-0 right-3 flex items-center gap-2">
52          {showClear && <AutocompleteClear />}
53          {showTrigger && <AutocompleteTrigger />}
54        </div>
55      )}
56    </BaseAutocomplete.InputGroup>
57  );
58}
59 
60// … truncated