Autocomplete (Tailwind)

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/tailwind/ui/input";
8 
9function AutocompleteRoot({ ...props }: React.ComponentProps<typeof Autocomplete.Root>) {
10  return <Autocomplete.Root {...props} />;
11}
12 
13function AutocompleteValue({ ...props }: React.ComponentProps<typeof Autocomplete.Value>) {
14  return <Autocomplete.Value data-slot="autocomplete-value" {...props} />;
15}
16 
17function AutocompleteInput({ className, ...props }: React.ComponentProps<typeof Autocomplete.Input>) {
18  return (
19    <Autocomplete.Input
20      className={cn("max-sm:text-[0.9375rem] max-sm:placeholder:text-[0.9375rem]", className)}
21      render={<Input />}
22      {...props}
23    />
24  );
25}
26 
27function AutocompleteTrigger({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Trigger>) {
28  return (
29    <Autocomplete.Trigger
30      className={cn(
31        "flex cursor-pointer items-center justify-center border-none bg-transparent p-2",
32        "text-muted-foreground transition-colors duration-150",
33        "hover:text-foreground",
34        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2",
35        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
36        className
37      )}
38      data-slot="autocomplete-trigger"
39      {...props}
40    >
41      {children || <Search className="h-4 w-4 flex-shrink-0 opacity-60" size={16} />}
42    </Autocomplete.Trigger>
43  );
44}
45 
46function AutocompleteIcon({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Icon>) {
47  return (
48    <Autocomplete.Icon
49      className={cn("h-4 w-4 flex-shrink-0 opacity-60", className)}
50      data-slot="autocomplete-icon"
51      {...props}
52    >
53      {children || <Search size={16} />}
54    </Autocomplete.Icon>
55  );
56}
57 
58function AutocompleteClear({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Clear>) {
59  return (
60    <Autocomplete.Clear
61      className={cn(
62        "flex cursor-pointer items-center justify-center rounded-[calc(var(--radius)-2px)] p-1",
63        "text-muted-foreground transition-all duration-150",
64        "hover:bg-accent hover:text-foreground",
65        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2",
66        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
67        className
68      )}
69// … truncated