Autocomplete

1import { XIcon } from "lucide-react";
2import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
3 
4import { cn } from "@/lib/utils";
5import { Button } from "@/registry/components/ui/button";
6import { Input } from "@/registry/components/ui/input";
7 
8const Autocomplete = AutocompletePrimitive.Root;
9 
10function AutocompleteInput(props: AutocompletePrimitive.Input.Props) {
11  return (
12    <AutocompletePrimitive.Input
13      data-slot="autocomplete-input"
14      render={<Input />}
15      {...props}
16    />
17  );
18}
19 
20function AutocompletePopup({
21  className,
22  ...props
23}: AutocompletePrimitive.Popup.Props) {
24  return (
25    <AutocompletePrimitive.Popup
26      data-slot="autocomplete-popup"
27      className={cn(
28        "w-(--anchor-width) max-h-[min(var(--available-height),23rem)] max-w-(--available-width) overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-popover text-popover-foreground shadow-md outline-1 outline-border dark:shadow-none",
29        className
30      )}
31      {...props}
32    />
33  );
34}
35 
36function AutocompletePositioner({
37  className,
38  ...props
39}: AutocompletePrimitive.Positioner.Props) {
40  return (
41    <AutocompletePrimitive.Portal>
42      <AutocompletePrimitive.Positioner
43        data-slot="autocomplete-positioner"
44        className={cn("z-50", className)}
45        {...props}
46      />
47    </AutocompletePrimitive.Portal>
48  );
49}
50 
51function AutocompleteList({
52  className,
53  ...props
54}: AutocompletePrimitive.List.Props) {
55  return (
56    <AutocompletePrimitive.List
57      data-slot="autocomplete-list"
58      className={cn("not-empty:p-1.5", className)}
59      {...props}
60    />
61  );
62}
63 
64function AutocompleteEmpty({
65  className,
66  ...props
67}: AutocompletePrimitive.Empty.Props) {
68  return (
69    <AutocompletePrimitive.Empty
70      data-slot="autocomplete-empty"
71      className={cn(
72        "flex items-center justify-center text-muted-foreground text-sm not-empty:py-3",
73        className
74      )}
75      {...props}
76    />
77  );
78}
79 
80function AutocompleteItem({
81  className,
82  ...props
83}: AutocompletePrimitive.Item.Props) {
84  return (
85    <AutocompletePrimitive.Item
86      data-slot="autocomplete-item"
87      className={cn(
88        "py-1.5 px-3 text-sm rounded-md data-highlighted:bg-accent data-highlighted:text-accent-foreground",
89        className
90      )}
91      {...props}
92    />
93  );
94}
95 
96function AutocompleteGroup({
97  className,
98  ...props
99}: AutocompletePrimitive.Group.Props) {
100  return (
101    <AutocompletePrimitive.Group
102// … truncated