Autocomplete

1"use client";
2 
3import type React from "react";
4import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
5import { ChevronsUpDown, X } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8import { Input } from "@/components/ui/input";
9import { ScrollArea } from "@/components/ui/scroll-area";
10 
11export const Autocomplete: typeof AutocompletePrimitive.Root =
12  AutocompletePrimitive.Root;
13 
14export function AutocompleteInput({
15  className,
16  showTrigger = false,
17  showClear = false,
18  startAddon,
19  size,
20  triggerProps,
21  clearProps,
22  ...props
23}: Omit<AutocompletePrimitive.Input.Props, "size"> & {
24  showTrigger?: boolean;
25  showClear?: boolean;
26  startAddon?: React.ReactNode;
27  size?: "sm" | "default" | "lg" | number;
28  ref?: React.Ref<HTMLInputElement>;
29  triggerProps?: AutocompletePrimitive.Trigger.Props;
30  clearProps?: AutocompletePrimitive.Clear.Props;
31}): React.ReactElement {
32  const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number;
33 
34  return (
35    <AutocompletePrimitive.InputGroup
36      className="text-foreground relative w-full not-has-[>*.w-full]:w-fit has-disabled:opacity-64"
37      data-slot="autocomplete-input-group"
38    >
39      {startAddon && (
40        <div
41          aria-hidden="true"
42          className="pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4"
43          data-slot="autocomplete-start-addon"
44        >
45          {startAddon}
46        </div>
47      )}
48      <AutocompletePrimitive.Input
49        className={cn(
50          startAddon &&
51            "*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)]",
52          sizeValue === "sm"
53            ? "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5"
54            : "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7",
55          className,
56        )}
57        data-slot="autocomplete-input"
58        render={<Input nativeInput size={sizeValue} />}
59        {...props}
60      />
61      {showTrigger && (
62// … truncated