Combobox

1"use client";
2
3import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
4import React, { createContext, SVGProps, useContext, useRef } from "react";
5
6import { Input } from "@/registry/pure-ui/ui/input";
7import { ScrollArea } from "@/registry/pure-ui/ui/scroll-area";
8import { Label } from "@/registry/pure-ui/ui/label";
9import { cn } from "@/lib/classes";
10
11interface ComboboxContextType {
12  chipsRef: React.RefObject<HTMLDivElement | null> | null;
13  multiple: boolean;
14}
15
16const ComboboxContext = createContext<ComboboxContextType>({
17  chipsRef: null,
18  multiple: false,
19});
20
21interface ComboboxProps<Value, Multiple extends boolean | undefined = false>
22  extends ComboboxPrimitive.Root.Props<Value, Multiple> {}
23
24function Combobox<Value, Multiple extends boolean | undefined = false>(
25  props: ComboboxProps<Value, Multiple>
26) {
27  const chipsRef = useRef<HTMLDivElement | null>(null);
28
29  return (
30    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>
31      <ComboboxPrimitive.Root data-slot="combobox" {...props} />
32    </ComboboxContext.Provider>
33  );
34}
35
36interface ComboboxValueProps extends ComboboxPrimitive.Value.Props {}
37
38function ComboboxValue(props: ComboboxValueProps) {
39  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
40}
41
42export function ChevronsUpDownIcon(props: SVGProps<SVGSVGElement>) {
43  return (
44    <svg
45      xmlns="http://www.w3.org/2000/svg"
46      width="20"
47      height="20"
48      viewBox="0 0 20 20"
49      {...props}
50    >
51      {/* Up chevron */}
52      <path
53        className="group-data-popup-open:translate-y-[8.5px] [transition-property:translate] duration-200 ease-out"
54        fill="currentColor"
55        d="M10.53 2.72a.75.75 0 0 0-1.06 0L5.22 6.97a.75.75 0 0 0 1.06 1.06L10 4.31l3.72 3.72a.75.75 0 1 0 1.06-1.06z"
56      />
57
58      {/* Down chevron */}
59      <path
60        className="group-data-popup-open:-translate-y-[8.5px] [transition-property:translate] duration-200 ease-out"
61        fill="currentColor"
62        d="M14.78 13.03l-4.25 4.25a.75.75 0 0 1-1.06 0l-4.25-4.25a.75.75 0 1 1 1.06-1.06L10 15.69l3.72-3.72a.75.75 0 1 1 1.06 1.06"
63      />
64    </svg>
65  );
66}
67
68export function CloseIcon(props: SVGProps<SVGSVGElement>) {
69  return (
70    <svg
71      xmlns="http://www.w3.org/2000/svg"
72      width="24"
73      height="24"
74      viewBox="0 0 24 24"
75      {...props}
76    >
77      <path
78        fill="none"
79// … truncated