Autocomplete

1"use client";
2 
3import { Autocomplete } from "@base-ui/react/autocomplete";
4import { Search, X } from "lucide-react";
5import type React from "react";
6import { cn } from "@/lib/utils";
7import { Input } from "@/registry/brook/ui/input/input";
8import styles from "./autocomplete.module.css";
9 
10function AutocompleteRoot({ ...props }: React.ComponentProps<typeof Autocomplete.Root>) {
11  return <Autocomplete.Root {...props} />;
12}
13 
14function AutocompleteValue({ ...props }: React.ComponentProps<typeof Autocomplete.Value>) {
15  return <Autocomplete.Value data-slot="autocomplete-value" {...props} />;
16}
17 
18function AutocompleteInput({ className, ...props }: React.ComponentProps<typeof Autocomplete.Input>) {
19  return <Autocomplete.Input className={cn(styles.inputOverride, className)} render={<Input />} {...props} />;
20}
21 
22function AutocompleteTrigger({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Trigger>) {
23  return (
24    <Autocomplete.Trigger className={cn(styles.trigger, className)} data-slot="autocomplete-trigger" {...props}>
25      {children || <Search className={styles.icon} size={16} />}
26    </Autocomplete.Trigger>
27  );
28}
29 
30function AutocompleteIcon({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Icon>) {
31  return (
32    <Autocomplete.Icon className={cn(styles.icon, className)} data-slot="autocomplete-icon" {...props}>
33      {children || <Search size={16} />}
34    </Autocomplete.Icon>
35  );
36}
37 
38function AutocompleteClear({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Clear>) {
39  return (
40    <Autocomplete.Clear className={cn(styles.clear, className)} data-slot="autocomplete-clear" {...props}>
41      {children || <X size={16} />}
42    </Autocomplete.Clear>
43  );
44}
45 
46const AutocompletePortal = Autocomplete.Portal;
47 
48function AutocompleteBackdrop({ className, ...props }: React.ComponentProps<typeof Autocomplete.Backdrop>) {
49  return (
50    <Autocomplete.Backdrop className={cn(styles.backdrop, className)} data-slot="autocomplete-backdrop" {...props} />
51  );
52}
53 
54function AutocompletePositioner({ className, ...props }: React.ComponentProps<typeof Autocomplete.Positioner>) {
55  return (
56    <Autocomplete.Positioner
57      className={cn(styles.positioner, className)}
58      data-slot="autocomplete-positioner"
59      sideOffset={4}
60      {...props}
61    />
62  );
63}
64 
65function AutocompletePopup({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Popup>) {
66  return (
67// … truncated