Autocomplete

1"use client";
2 
3import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
4import type * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const Autocomplete = AutocompletePrimitive.Root;
9 
10const AutocompleteInput = ({
11  className,
12  ...props
13}: React.ComponentProps<typeof AutocompletePrimitive.Input>) => (
14  <AutocompletePrimitive.Input
15    className={cn(
16      "input flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/15 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
17      className,
18    )}
19    data-slot="autocomplete-input"
20    {...props}
21  />
22);
23 
24const AutocompletePortal = ({
25  ...props
26}: React.ComponentProps<typeof AutocompletePrimitive.Portal>) => (
27  <AutocompletePrimitive.Portal {...props} />
28);
29 
30const AutocompletePositioner = ({
31  className,
32  ...props
33}: React.ComponentProps<typeof AutocompletePrimitive.Positioner>) => (
34  <AutocompletePrimitive.Positioner
35    className={cn("isolate z-110", className)}
36    data-slot="autocomplete-positioner"
37    {...props}
38  />
39);
40 
41const AutocompletePopup = ({
42  className,
43  ...props
44}: React.ComponentProps<typeof AutocompletePrimitive.Popup>) => (
45  <AutocompletePrimitive.Popup
46    className={cn(
47      "fade-in-80 relative z-110 max-h-[250px] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) animate-in overflow-hidden rounded-xl border border-border bg-popover p-0 text-popover-foreground shadow-soft",
48      className,
49    )}
50    data-slot="autocomplete-popup"
51    {...props}
52  />
53);
54 
55const AutocompleteEmpty = ({
56  className,
57  ...props
58}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) => (
59  <AutocompletePrimitive.Empty
60    className={cn(
61      "cursor-default px-4 py-3 text-center text-muted-foreground text-sm empty:hidden",
62      className,
63    )}
64    data-slot="autocomplete-empty"
65    {...props}
66  />
67);
68 
69const AutocompleteList = ({
70  className,
71  ...props
72}: React.ComponentProps<typeof AutocompletePrimitive.List>) => (
73  <AutocompletePrimitive.List
74    className={cn("w-full overflow-y-auto p-1", className)}
75// … truncated