Select

1"use client";
2 
3import { CaretDownIcon, CaretUpIcon, Check } from "@phosphor-icons/react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { Select as SelectPrimitive } from "radix-ui";
6import * as React from "react";
7 
8import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
9import { cn } from "@/lib/utils";
10 
11/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
12const selectTriggerVariants = cva(
13  "flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
14  {
15    variants: {
16      variant: {
17        default: "border-input bg-background",
18        glass: "",
19      },
20    },
21    defaultVariants: {
22      variant: "glass",
23    },
24  },
25);
26 
27const selectContentVariants = cva(
28  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
29  {
30    variants: {
31      variant: {
32        default: "bg-popover text-popover-foreground border",
33        glass: "text-foreground",
34      },
35    },
36    defaultVariants: {
37      variant: "glass",
38    },
39  },
40);
41 
42/* Trigger role: bordered adaptive glass. */
43const TRIGGER_ROLE = {
44  border: true,
45};
46 
47/* Content role: bordered + veiled adaptive glass. */
48const CONTENT_ROLE = {
49  border: true,
50  veil: true,
51};
52 
53const Select = SelectPrimitive.Root;
54 
55const SelectGroup = SelectPrimitive.Group;
56 
57const SelectValue = SelectPrimitive.Value;
58 
59const SelectTrigger = React.forwardRef<
60  React.ElementRef<typeof SelectPrimitive.Trigger>,
61  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
62    VariantProps<typeof selectTriggerVariants> &
63    MaterialAxisProps & {
64      size?: "sm" | "default";
65    }
66>(({ className, children, variant = "glass", size = "default", ...props }, ref) => {
67  const [axes, rest] = splitAxisProps(props);
68// … truncated