Combobox

1"use client";
2 
3import "./combobox.css";
4import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ComboboxContext, useComboboxContext } from "./combobox.context";
9import { comboboxVariants, type ComboboxVariants } from "./combobox.variants";
10 
11export type ComboboxProps<
12  Item = any,
13  Multiple extends boolean | undefined = false,
14> = ComboboxVariants & React.ComponentProps<typeof BaseCombobox.Root<Item, Multiple>>;
15 
16export function ComboboxRoot<Item = any, Multiple extends boolean | undefined = false>({
17  children,
18  size,
19  variant,
20  ...props
21}: ComboboxProps<Item, Multiple>) {
22  const slots = comboboxVariants({ size, variant });
23 
24  return (
25    <ComboboxContext.Provider value={{ slots }}>
26      <BaseCombobox.Root {...props}>{children}</BaseCombobox.Root>
27    </ComboboxContext.Provider>
28  );
29}
30 
31export type ComboboxInputGroupProps = React.ComponentProps<typeof BaseCombobox.InputGroup>;
32 
33export const ComboboxInputGroup = ({ className, ...props }: ComboboxInputGroupProps) => {
34  const { slots } = useComboboxContext();
35  return <BaseCombobox.InputGroup className={cn(slots.inputGroup(), className)} {...props} />;
36};
37 
38export type ComboboxInputProps = React.ComponentProps<typeof BaseCombobox.Input>;
39 
40export const ComboboxInput = ({
41  className,
42  children: _children,
43  dangerouslySetInnerHTML: _dangerouslySetInnerHTML,
44  ...props
45}: ComboboxInputProps & { children?: React.ReactNode; dangerouslySetInnerHTML?: any }) => {
46  const { slots } = useComboboxContext();
47  return <BaseCombobox.Input className={cn(slots.input(), className)} {...props} />;
48};
49 
50export type ComboboxTriggerProps = React.ComponentProps<typeof BaseCombobox.Trigger>;
51 
52export const ComboboxTrigger = ({ children, className, ...props }: ComboboxTriggerProps) => {
53  const { slots } = useComboboxContext();
54  return (
55    <BaseCombobox.Trigger className={cn(slots.trigger(), className)} {...props}>
56      {children ?? (
57        <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
58          <path d="M12 6H4l4 4.5z" />
59        </svg>
60      )}
61    </BaseCombobox.Trigger>
62  );
63};
64 
65export type ComboboxClearProps = React.ComponentProps<typeof BaseCombobox.Clear>;
66 
67export const ComboboxClear = ({ children, className, ...props }: ComboboxClearProps) => {
68  const { slots } = useComboboxContext();
69  return (
70    <BaseCombobox.Clear className={cn(slots.clear(), className)} {...props}>
71      {children ?? (
72// … truncated