combobox

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