autocomplete

1import * as React from "react"
2import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
3import { XIcon } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6 
7function Autocomplete({
8	...props
9}: React.ComponentProps<typeof BaseAutocomplete.Root>) {
10	return <BaseAutocomplete.Root data-slot="autocomplete" {...props} />
11}
12 
13function AutocompletePortal({
14	...props
15}: React.ComponentProps<typeof BaseAutocomplete.Portal>) {
16	return <BaseAutocomplete.Portal data-slot="autocomplete-portal" {...props} />
17}
18 
19function AutocompletePositioner({
20	...props
21}: React.ComponentProps<typeof BaseAutocomplete.Positioner>) {
22	return (
23		<BaseAutocomplete.Positioner
24			data-slot="autocomplete-positioner"
25			{...props}
26		/>
27	)
28}
29 
30function AutocompleteValue({
31	...props
32}: React.ComponentProps<typeof BaseAutocomplete.Value>) {
33	return <BaseAutocomplete.Value data-slot="autocomplete-value" {...props} />
34}
35 
36function AutocompleteTrigger({
37	...props
38}: React.ComponentProps<typeof BaseAutocomplete.Trigger>) {
39	return (
40		<BaseAutocomplete.Trigger data-slot="autocomplete-trigger" {...props} />
41	)
42}
43 
44function AutocompleteIcon({
45	...props
46}: React.ComponentProps<typeof BaseAutocomplete.Icon>) {
47	return <BaseAutocomplete.Icon data-slot="autocomplete-icon" {...props} />
48}
49 
50function AutocompleteClear({
51	...props
52}: React.ComponentProps<typeof BaseAutocomplete.Clear>) {
53	return <BaseAutocomplete.Clear data-slot="autocomplete-clear" {...props} />
54}
55 
56function AutocompleteInput({
57	className,
58	inputContainerClassName,
59	showClear = false,
60	...props
61}: React.ComponentProps<typeof BaseAutocomplete.Input> & {
62	inputContainerClassName?: string
63	showClear?: boolean
64}) {
65	return (
66		<div
67			className={cn(
68				"group relative w-full has-[[data-slot=autocomplete-input][data-disabled]]:pointer-events-none has-[[data-slot=autocomplete-input][data-disabled]]:opacity-50",
69				inputContainerClassName
70			)}
71			data-slot="autocomplete-input-container"
72		>
73			<BaseAutocomplete.Input
74				data-slot="autocomplete-input"
75				className={cn(
76					"placeholder:text-muted-foreground selection:bg-primary group-hover:border-ring/70 selection:text-primary-foreground bg-input aria-invalid:ring-destructive/50 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] md:text-sm",
77					showClear && "pr-8",
78					className
79				)}
80// … truncated