Combobox

1import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
2import { CheckIcon, XIcon } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5import { Button } from "@/registry/components/ui/button";
6import { Input } from "@/registry/components/ui/input";
7import { Separator } from "@/registry/components/ui/separator";
8import { RefObject } from "react";
9 
10const Combobox = ComboboxPrimitive.Root;
11 
12function ComboboxInput(
13  props: ComboboxPrimitive.Input.Props & {
14    ref?: RefObject<HTMLInputElement | null>;
15  }
16) {
17  return (
18    <ComboboxPrimitive.Input
19      data-slot="combobox-input"
20      render={<Input />}
21      {...props}
22    />
23  );
24}
25 
26function ComboboxTrigger(props: ComboboxPrimitive.Trigger.Props) {
27  return (
28    <ComboboxPrimitive.Trigger
29      data-slot="combobox-trigger"
30      render={<Button variant="outline" />}
31      {...props}
32    />
33  );
34}
35 
36function ComboboxIcon(props: ComboboxPrimitive.Icon.Props) {
37  return <ComboboxPrimitive.Icon data-slot="combobox-icon" {...props} />;
38}
39 
40function ComboboxClear({
41  children,
42  className,
43  ...props
44}: ComboboxPrimitive.Clear.Props) {
45  return (
46    <ComboboxPrimitive.Clear
47      className={cn(
48        "flex h-9 w-6 items-center justify-center rounded bg-transparent p-0",
49        className
50      )}
51      aria-label="Clear selection"
52      data-slot="combobox-clear"
53      {...props}
54    >
55      {children ?? <XIcon className="size-4" />}
56    </ComboboxPrimitive.Clear>
57  );
58}
59 
60function ComboboxValue(props: ComboboxPrimitive.Value.Props) {
61  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
62}
63 
64function ComboboxChips({
65  className,
66  ...props
67}: ComboboxPrimitive.Chips.Props & { ref?: RefObject<HTMLDivElement | null> }) {
68  return (
69    <ComboboxPrimitive.Chips
70      data-slot="combobox-chips"
71      className={cn(
72        "min-h-9 flex flex-wrap items-start gap-1 rounded-md border px-1.5 py-1.5 transition-[color,box-shadow]",
73        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
74        className
75      )}
76      {...props}
77    />
78  );
79}
80 
81function ComboboxChip({ className, ...props }: ComboboxPrimitive.Chip.Props) {
82  return (
83    <ComboboxPrimitive.Chip
84      data-slot="combobox-chip"
85      className={cn(
86        "flex items-center gap-1 rounded-md bg-muted px-1 ps-2 pe-0 text-xs outline-none cursor-default focus-within:bg-primary focus-within:text-primary-foreground",
87        className
88      )}
89      {...props}
90    />
91  );
92}
93 
94// … truncated