Combobox

1'use client';
2 
3import { Combobox as ComboboxPrimitive } from '@base-ui/react';
4import * as React from 'react';
5 
6import { Button } from '@/components/ui/button';
7import { Icon } from '@/components/ui/icon';
8import { inputVariantStyles } from '@/components/ui/input';
9import { InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
10import { cn } from '@/lib/utils';
11 
12// Defer border/bg/focus-ring/rounding/padding to the InputGroup wrapper
13const inputGroupChildOverrides = [
14  '[[data-slot=input-group]_&]:rounded-none [[data-slot=input-group]_&]:border-0 [[data-slot=input-group]_&]:bg-transparent',
15  '[[data-slot=input-group]_&]:px-0! [[data-slot=input-group]_&]:py-0! [[data-slot=input-group]_&]:min-h-0',
16  '[[data-slot=input-group]_&]:focus-within:bg-transparent [[data-slot=input-group]_&]:focus-within:shadow-none [[data-slot=input-group]_&]:focus-within:ring-0',
17];
18 
19// Anchor ref context so popup width matches the full input group (not just the input element)
20const ComboboxAnchorContext =
21  React.createContext<React.RefObject<HTMLDivElement | null> | null>(null);
22 
23function useComboboxAnchorRef() {
24  return React.useContext(ComboboxAnchorContext);
25}
26 
27function Combobox(props: React.ComponentProps<typeof ComboboxPrimitive.Root>) {
28  const anchorRef = React.useRef<HTMLDivElement | null>(null);
29  return (
30    <ComboboxAnchorContext.Provider value={anchorRef}>
31      <ComboboxPrimitive.Root {...props} />
32    </ComboboxAnchorContext.Provider>
33  );
34}
35 
36function ComboboxValue(props: ComboboxPrimitive.Value.Props) {
37  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
38}
39 
40function ComboboxTrigger({
41  className,
42  children,
43  ...props
44}: ComboboxPrimitive.Trigger.Props) {
45  return (
46    <ComboboxPrimitive.Trigger
47      data-slot="combobox-trigger"
48      // Fallback size for any unsized SVG slotted as children (internal ChevronDown always has size-4 explicit)
49      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
50      {...props}>
51      {children}
52      <Icon
53        icon="keyboard_arrow_down"
54        size="sm"
55        data-slot="combobox-trigger-icon"
56        className="text-fg-secondary pointer-events-none"
57      />
58    </ComboboxPrimitive.Trigger>
59  );
60}
61 
62function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
63  return (
64    <ComboboxPrimitive.Clear
65      data-slot="combobox-clear"
66      render={<InputGroupButton variant="ghost" size="icon-xs" />}
67      className={cn(className)}
68// … truncated