Combobox

1import * as React from "react"
2import { Combobox as ComboboxPrimitive } from "@base-ui/react"
3 
4import { cn } from "@/registry/lib/surface"
5import { floatingSurfaceClasses } from "@/registry/lib/surface"
6import { ThemedPortalShell } from "@/registry/lib/portal-container"
7import { Button } from "@/registry/ui/button"
8import {
9  InputGroup,
10  InputGroupAddon,
11  InputGroupButton,
12  InputGroupInput,
13} from "@/registry/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          <ComboboxTrigger
72            render={
73              <InputGroupButton
74                size="icon-xs"
75                variant="ghost"
76                data-slot="input-group-button"
77                className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
78                disabled={disabled}
79              />
80            }
81          />
82        )}
83        {showClear && <ComboboxClear disabled={disabled} />}
84      </InputGroupAddon>
85      {children}
86    </InputGroup>
87  )
88}
89 
90function ComboboxContent({
91  className,
92// … truncated