MicroClub Combobox

1'use client';
2 
3import { Combobox as ComboboxPrimitive } from '@base-ui/react';
4import { CheckIcon, ChevronsUpDown, SearchIcon } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7const McCombobox = ComboboxPrimitive.Root;
8 
9function McComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
10  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
11}
12 
13function McComboboxTrigger({
14  className,
15  placeholder,
16  ...props
17}: ComboboxPrimitive.Trigger.Props & { placeholder?: string }) {
18  return (
19    <ComboboxPrimitive.Trigger
20      data-slot="combobox-trigger"
21      className={cn(
22        'min-w-50 min-h-9 px-3 py-2 rounded-md ring-1 ring-inset ring-border shadow-xs flex justify-between items-center bg-input text-foreground paragraph-sm font-medium',
23        className
24      )}
25      {...props}
26    >
27      <McComboboxValue placeholder={placeholder} />
28      <ChevronsUpDown className="size-4 text-foreground" />
29    </ComboboxPrimitive.Trigger>
30  );
31}
32 
33function McComboboxSearch({
34  className,
35  placeholder,
36  ...props
37}: ComboboxPrimitive.Input.Props & { placeholder?: string }) {
38  return (
39    <div className="flex items-center border-b px-3 h-fit w-full gap-2" data-slot="combobox-search">
40      <SearchIcon className="text-muted-foreground size-4" />
41      <ComboboxPrimitive.Input
42        className={cn(
43          'flex h-10 w-full rounded-md bg-transparent py-3 outline-none paragraph-sm placeholder:text-muted-foreground',
44          className
45        )}
46        placeholder={placeholder}
47        {...props}
48      />
49    </div>
50  );
51}
52 
53function McComboboxContent({
54  className,
55  side = 'bottom',
56  sideOffset = 8,
57  align = 'start',
58  ...props
59}: ComboboxPrimitive.Popup.Props &
60  Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {
61  return (
62    <ComboboxPrimitive.Portal>
63      <ComboboxPrimitive.Positioner
64        side={side}
65        sideOffset={sideOffset}
66        align={align}
67        className="isolate z-50"
68      >
69        <ComboboxPrimitive.Popup
70          data-slot="combobox-content"
71          className={cn(
72            'w-[var(--anchor-width)] flex flex-col rounded-md ring-1 ring-inset ring-border bg-card-background shadow-md',
73            className
74          )}
75          {...props}
76        />
77      </ComboboxPrimitive.Positioner>
78    </ComboboxPrimitive.Portal>
79  );
80}
81 
82function McComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
83  return (
84    <ComboboxPrimitive.List
85// … truncated