Combobox

1"use client";
2 
3import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
4import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
5import * as React from "react";
6 
7import { Button } from "@/components/ui/button";
8import {
9  InputGroup,
10  InputGroupAddon,
11  InputGroupButton,
12  InputGroupInput,
13} from "@/components/ui/input-group";
14import { cn } from "@/lib/utils";
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        aria-hidden
36        data-slot="combobox-trigger-icon"
37        className="text-muted-foreground pointer-events-none size-4"
38      />
39    </ComboboxPrimitive.Trigger>
40  );
41}
42 
43function ComboboxClear({
44  className,
45  "aria-label": ariaLabel = "Clear selection",
46  ...props
47}: ComboboxPrimitive.Clear.Props) {
48  return (
49    <ComboboxPrimitive.Clear
50      data-slot="combobox-clear"
51      render={<InputGroupButton variant="ghost" size="icon-xs" />}
52      className={cn(className)}
53      aria-label={ariaLabel}
54      {...props}
55    >
56      <XIcon aria-hidden className="pointer-events-none" />
57    </ComboboxPrimitive.Clear>
58  );
59}
60 
61function ComboboxInput({
62  className,
63  children,
64  disabled = false,
65  showTrigger = true,
66  showClear = false,
67  triggerAriaLabel = "Open listbox",
68  clearAriaLabel,
69  ...props
70}: ComboboxPrimitive.Input.Props & {
71  showTrigger?: boolean;
72  showClear?: boolean;
73  triggerAriaLabel?: string;
74  clearAriaLabel?: string;
75}) {
76  return (
77    <InputGroup
78      className={cn(
79        "w-fit min-w-[8rem] shadow-none bg-body-bg dark:bg-input/30 font-semibold text-neutral-fg data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
80 
81        // Focus state
82        "has-[[data-slot=input-group-control]:focus-visible]:border-2 has-[[data-slot=input-group-control]:focus-visible]:ring-0",
83        "has-[button:focus-visible]:border-2 has-[button:focus-visible]:ring-0",
84 
85        className,
86      )}
87    >
88      <ComboboxPrimitive.Input
89        render={<InputGroupInput disabled={disabled} />}
90        {...props}
91      />
92// … truncated