Combobox (Tailwind)

1"use client";
2 
3import { Combobox } from "@base-ui/react/combobox";
4import { Check, ChevronsUpDown, X } from "lucide-react";
5import type React from "react";
6import { cn } from "@/lib/utils";
7import { Input } from "@/registry/brook/tailwind/ui/input";
8 
9function ComboboxRoot<ItemValue, Multiple extends boolean | undefined = undefined>(
10  props: React.ComponentProps<typeof Combobox.Root<ItemValue, Multiple>>
11) {
12  return <Combobox.Root<ItemValue, Multiple> {...props} />;
13}
14 
15function ComboboxTrigger({ className, children, ...props }: Combobox.Trigger.Props) {
16  return (
17    <Combobox.Trigger
18      className={cn(
19        "-translate-y-1/2 absolute top-1/2 right-2",
20        "flex cursor-pointer items-center justify-center border-none bg-transparent p-1",
21        "focus-visible:outline-none",
22        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
23        className
24      )}
25      data-slot="combobox-trigger"
26      {...props}
27    >
28      {children}
29      <ChevronsUpDown className="h-4 w-4 flex-shrink-0 text-muted-foreground transition-none" size={16} />
30    </Combobox.Trigger>
31  );
32}
33 
34function ComboboxInput({ className, ...props }: Combobox.Input.Props) {
35  return (
36    <Combobox.Input
37      className={cn("max-sm:text-[0.9375rem] max-sm:placeholder:text-[0.9375rem]", className)}
38      data-slot="combobox-input"
39      render={<Input />}
40      {...props}
41    />
42  );
43}
44 
45function ComboboxClear({ className, children, ...props }: Combobox.Clear.Props) {
46  return (
47    <Combobox.Clear
48      className={cn(
49        "-translate-y-1/2 absolute top-1/2 right-2",
50        "flex cursor-pointer items-center justify-center rounded-[calc(var(--radius)-2px)] p-1",
51        "text-muted-foreground transition-all duration-150",
52        "hover:bg-accent hover:text-foreground",
53        className
54      )}
55      data-slot="combobox-clear"
56      {...props}
57    >
58      {children || <X size={16} />}
59    </Combobox.Clear>
60  );
61}
62 
63const ComboboxPortal = Combobox.Portal;
64 
65function ComboboxPositioner({ className, ...props }: Combobox.Positioner.Props) {
66  return (
67    <Combobox.Positioner
68      className={cn("absolute top-full left-0 z-[150] w-[var(--anchor-width)]", className)}
69      data-slot="combobox-positioner"
70      sideOffset={4}
71      {...props}
72    />
73  );
74}
75 
76function ComboboxPopup({ className, children, ...props }: Combobox.Popup.Props) {
77  return (
78    <Combobox.Popup
79      className={cn(
80        "box-border flex flex-col rounded-[var(--radius)]",
81// … truncated