Combobox

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/ui/input/input";
8import styles from "./combobox.module.css";
9 
10function ComboboxRoot<ItemValue, Multiple extends boolean | undefined = undefined>(
11  props: React.ComponentProps<typeof Combobox.Root<ItemValue, Multiple>>
12) {
13  return <Combobox.Root<ItemValue, Multiple> {...props} />;
14}
15 
16function ComboboxTrigger({ className, children, ...props }: Combobox.Trigger.Props) {
17  return (
18    <Combobox.Trigger className={cn(styles.trigger, className)} data-slot="combobox-trigger" {...props}>
19      {children}
20      <ChevronsUpDown className={styles.icon} size={16} />
21    </Combobox.Trigger>
22  );
23}
24 
25function ComboboxInput({ className, ...props }: Combobox.Input.Props) {
26  return (
27    <Combobox.Input className={cn(styles.input, className)} data-slot="combobox-input" render={<Input />} {...props} />
28  );
29}
30 
31function ComboboxClear({ className, children, ...props }: Combobox.Clear.Props) {
32  return (
33    <Combobox.Clear className={cn(styles.clear, className)} {...props}>
34      {children || <X size={16} />}
35    </Combobox.Clear>
36  );
37}
38 
39const ComboboxPortal = Combobox.Portal;
40 
41function ComboboxPositioner({ className, ...props }: Combobox.Positioner.Props) {
42  return (
43    <Combobox.Positioner
44      className={cn(styles.positioner, className)}
45      data-slot="combobox-positioner"
46      sideOffset={4}
47      {...props}
48    />
49  );
50}
51 
52function ComboboxPopup({ className, children, ...props }: Combobox.Popup.Props) {
53  return (
54    <Combobox.Popup className={cn(styles.popup, className)} {...props}>
55      <ComboboxSpacer />
56      {children}
57      <ComboboxSpacer />
58    </Combobox.Popup>
59  );
60}
61 
62function ComboboxSpacer() {
63  return <div style={{ height: "4px", width: "100%", flexShrink: 0 }} />;
64}
65 
66function ComboboxList({ className, ...props }: Combobox.List.Props) {
67  return <Combobox.List className={cn(styles.list, className)} data-slot="combobox-list" {...props} />;
68}
69 
70function ComboboxEmpty({ className, children, ...props }: Combobox.Empty.Props) {
71  return (
72    <Combobox.Empty className={cn(styles.empty, className)} {...props}>
73      {children || "No items found"}
74    </Combobox.Empty>
75  );
76}
77 
78function ComboboxItem({
79  className,
80  children,
81  indicatorPosition = "left",
82  ...props
83}: Combobox.Item.Props & {
84// … truncated