Select (Base UI)

1"use client";
2 
3import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
4import { Select as SelectPrimitive } from "@base-ui/react/select";
5import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
6import { AnimatePresence, motion } from "motion/react";
7import * as React from "react";
8 
9import { cn } from "@/lib/utils";
10 
11const controlCornerClassName =
12  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
13 
14const controlCornerInheritClassName =
15  "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]";
16 
17const selectThemeClassName =
18  "[--sel-surface:#ffffff] [--sel-foreground:#111111] [--sel-border:#d5dae0] [--sel-ring:rgba(17,17,17,0.16)] [--sel-muted-foreground:#6d7480] [--sel-accent:#e9edf2] dark:[--sel-surface:#111111] dark:[--sel-foreground:#f6f3ec] dark:[--sel-border:#3a3834] dark:[--sel-ring:rgba(246,243,236,0.18)] dark:[--sel-muted-foreground:#9a958a] dark:[--sel-accent:#1e1e1c] [--color-accent:var(--sel-accent)] [--color-accent-foreground:var(--sel-foreground)]";
19 
20const selectTriggerClassName = cn(
21  controlCornerClassName,
22  "flex min-h-11 w-full touch-manipulation items-center justify-between gap-2 border border-[color:var(--sel-border)] bg-[color:var(--sel-surface)] px-4 py-3 text-left font-medium text-[color:var(--sel-foreground)] text-sm transition-[background-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-accent/72 focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--sel-ring),transparent_50%)] disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-[color:var(--sel-muted-foreground)]"
23);
24 
25const selectPanelChromeClassName = cn(
26  controlCornerClassName,
27  "z-[300] overflow-hidden border border-[color:color-mix(in_oklch,var(--sel-border,#d5dae0),transparent_40%)] bg-[var(--sel-surface,#ffffff)] text-[var(--sel-foreground,#111111)] shadow-none dark:border-[color:color-mix(in_oklch,var(--sel-border,#3a3834),transparent_40%)] dark:bg-[var(--sel-surface,#111111)] dark:text-[var(--sel-foreground,#f6f3ec)]"
28);
29 
30const selectItemClassName = cn(
31  controlCornerClassName,
32// … truncated