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 { IconChevronDown, IconX, IconCheck } from "@tabler/icons-react"
15 
16type ComboboxSize = "xs" | "sm" | "default" | "lg" | "xl" | "2xl"
17 
18const ComboboxSizeContext = React.createContext<ComboboxSize>("default")
19 
20function Combobox<Value, Multiple extends boolean | undefined = false>({
21  size = "default",
22  ...props
23}: ComboboxPrimitive.Root.Props<Value, Multiple> & { size?: ComboboxSize }) {
24  return (
25    <ComboboxSizeContext.Provider value={size}>
26      <ComboboxPrimitive.Root {...props} />
27    </ComboboxSizeContext.Provider>
28  )
29}
30 
31function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
32  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
33}
34 
35function ComboboxTrigger({
36  className,
37  children,
38  ...props
39}: ComboboxPrimitive.Trigger.Props) {
40  return (
41    <ComboboxPrimitive.Trigger
42      data-slot="combobox-trigger"
43      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
44      {...props}
45    >
46      {children}
47      <IconChevronDown className="pointer-events-none size-4 text-muted-foreground" />
48    </ComboboxPrimitive.Trigger>
49  )
50}
51 
52function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
53  return (
54    <ComboboxPrimitive.Clear
55      data-slot="combobox-clear"
56      render={
57        <InputGroupButton variant="ghost" size="icon-xs" />
58      }
59      className={cn(className)}
60      {...props}
61    >
62      <IconX className="pointer-events-none" />
63    </ComboboxPrimitive.Clear>
64  )
65}
66 
67function ComboboxInput({
68  className,
69  children,
70  disabled = false,
71  showTrigger = true,
72  showClear = false,
73  ...props
74}: ComboboxPrimitive.Input.Props & {
75  showTrigger?: boolean
76  showClear?: boolean
77}) {
78  const size = React.useContext(ComboboxSizeContext)
79 
80  return (
81    <InputGroup size={size} className={cn("w-auto", className)}>
82      <ComboboxPrimitive.Input
83        render={<InputGroupInput disabled={disabled} />}
84        {...props}
85      />
86      <InputGroupAddon align="inline-end">
87        {showTrigger && (
88          <InputGroupButton
89            size="icon-xs"
90            variant="ghost"
91            render={<ComboboxTrigger />}
92            data-slot="input-group-button"
93// … truncated