Combobox

1"use client";
2 
3import { Combobox as ComboboxPrimitive } from "@base-ui/react";
4import { CheckIcon, ChevronDownIcon, CrossSmallIcon, XIcon } from "blode-icons-react";
5import * as React from "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 
18const ComboboxValue = ({ ...props }: ComboboxPrimitive.Value.Props) => (
19  <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
20);
21 
22const ComboboxTrigger = ({
23  className,
24  children,
25  render,
26  ...props
27}: ComboboxPrimitive.Trigger.Props) => (
28  <ComboboxPrimitive.Trigger
29    className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
30    data-slot="combobox-trigger"
31    render={
32      render ?? <InputGroupButton data-slot="input-group-button" size="icon-xs" variant="ghost" />
33    }
34    {...props}
35  >
36    {children}
37    <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
38  </ComboboxPrimitive.Trigger>
39);
40 
41const ComboboxClear = ({ className, ...props }: ComboboxPrimitive.Clear.Props) => (
42  <ComboboxPrimitive.Clear
43    className={cn(className)}
44    data-slot="combobox-clear"
45    render={<InputGroupButton size="icon-xs" variant="ghost" />}
46    {...props}
47  >
48    <XIcon className="pointer-events-none" />
49  </ComboboxPrimitive.Clear>
50);
51 
52const 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  <InputGroup
64    className={cn("h-[var(--field-height)] w-auto rounded-[var(--field-radius)]", className)}
65  >
66    <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
67    <InputGroupAddon align="inline-end">
68      {showTrigger && (
69        <ComboboxTrigger
70          className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
71          disabled={disabled}
72        />
73      )}
74      {showClear && <ComboboxClear disabled={disabled} />}
75    </InputGroupAddon>
76    {children}
77  </InputGroup>
78);
79 
80const ComboboxContent = ({
81  className,
82  side = "bottom",
83  sideOffset = 6,
84  align = "start",
85  alignOffset = 0,
86  anchor,
87  ...props
88}: ComboboxPrimitive.Popup.Props &
89  Pick<
90    ComboboxPrimitive.Positioner.Props,
91// … truncated