Select

1"use client";
2
3import { createContext, useContext, useMemo } from "react";
4import { Select as SelectPrimitive } from "@base-ui/react/select";
5import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
6
7import { cn } from "@/lib/classes";
8
9const cssAnimationPresets = {
10  none: "transition-none",
11  scale: [
12    `[transition-property:scale,opacity] [will-change:scale,opacity]`,
13    `data-starting-style:scale-80 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-80`,
14  ],
15  fade: [
16    `[transition-property:opacity] [will-change:opacity]`,
17    `data-starting-style:opacity-0 data-ending-style:opacity-0`,
18  ],
19  slideOutside: [
20    `[transition-property:translate,opacity] [will-change:translate,opacity]`,
21    // side=bottom
22    `data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[10px] data-[side=bottom]:data-ending-style:translate-y-[10px] data-[side=bottom]:data-ending-style:opacity-0`,
23    // side=top
24    `data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[-10px] data-[side=top]:data-ending-style:translate-y-[-10px] data-[side=top]:data-ending-style:opacity-0`,
25    // side=left
26    `data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[-10px] data-[side=left]:data-ending-style:translate-x-[-10px] data-[side=left]:data-ending-style:opacity-0`,
27    // side=right
28    `data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[10px] data-[side=right]:data-ending-style:translate-x-[10px] data-[side=right]:data-ending-style:opacity-0`,
29    // side=inline-start
30    `data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:opacity-0`,
31    // side=inline-end
32    `data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:opacity-0`,
33  ],
34  slideInside: [
35    `[transition-property:translate,opacity] [will-change:translate,opacity]`,
36    // side=bottom
37// … truncated