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="text-muted-foreground size-4 pointer-events-none" />
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            asChild
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            <ComboboxTrigger />
80          </InputGroupButton>
81        )}
82        {showClear && <ComboboxClear disabled={disabled} />}
83      </InputGroupAddon>
84      {children}
85    </InputGroup>
86  )
87}
88 
89function ComboboxContent({
90  className,
91  side = "bottom",
92  sideOffset = 6,
93  align = "start",
94  alignOffset = 0,
95  anchor,
96  ...props
97}: ComboboxPrimitive.Popup.Props &
98  Pick<
99// … truncated