Combobox

1"use client"
2 
3import * as React from "react"
4import { Combobox as ComboboxPrimitive } from "@base-ui/react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import {
9  InputGroup,
10  InputGroupAddon,
11  InputGroupButton,
12  InputGroupInput,
13} from "@/components/ui/input-group"
14import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
15 
16const Combobox = ComboboxPrimitive.Root
17 
18function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
19  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
20}
21 
22function ComboboxTrigger({
23  className,
24  children,
25  ...props
26}: ComboboxPrimitive.Trigger.Props) {
27  return (
28    <ComboboxPrimitive.Trigger
29      data-slot="combobox-trigger"
30      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
31      {...props}
32    >
33      {children}
34      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
35    </ComboboxPrimitive.Trigger>
36  )
37}
38 
39function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
40  return (
41    <ComboboxPrimitive.Clear
42      data-slot="combobox-clear"
43      render={<InputGroupButton variant="ghost" size="icon-xs" />}
44      className={cn(className)}
45      {...props}
46    >
47      <XIcon className="pointer-events-none" />
48    </ComboboxPrimitive.Clear>
49  )
50}
51 
52function ComboboxInput({
53  className,
54  children,
55  disabled = false,
56  showTrigger = true,
57  showClear = false,
58  ...props
59}: ComboboxPrimitive.Input.Props & {
60  showTrigger?: boolean
61  showClear?: boolean
62}) {
63  return (
64    <InputGroup className={cn("w-auto", className)}>
65      <ComboboxPrimitive.Input
66        render={<InputGroupInput disabled={disabled} />}
67        {...props}
68      />
69      <InputGroupAddon align="inline-end">
70        {showTrigger && (
71          <InputGroupButton
72            size="icon-xs"
73            variant="ghost"
74            render={<ComboboxTrigger />}
75            data-slot="input-group-button"
76            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
77            disabled={disabled}
78          />
79        )}
80        {showClear && <ComboboxClear disabled={disabled} />}
81      </InputGroupAddon>
82      {children}
83    </InputGroup>
84  )
85}
86 
87function ComboboxContent({
88  className,
89  side = "bottom",
90  sideOffset = 6,
91  align = "start",
92  alignOffset = 0,
93  anchor,
94  ...props
95}: ComboboxPrimitive.Popup.Props &
96  Pick<
97    ComboboxPrimitive.Positioner.Props,
98// … truncated