Dropdown Menu

1"use client";
2 
3import { CaretRightIcon, Check, Circle } from "@phosphor-icons/react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { DropdownMenu as DropdownMenuPrimitive } 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 dropdownMenuSubContentVariants = cva(
13  "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-xl p-1 shadow-lg 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",
14  {
15    variants: {
16      variant: {
17        default: "bg-popover text-popover-foreground border",
18        glass: "text-foreground",
19      },
20    },
21    defaultVariants: {
22      variant: "glass",
23    },
24  },
25);
26 
27const dropdownMenuContentVariants = cva(
28  "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl p-1 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/* Role: bordered + veiled adaptive glass. */
43const ROLE = {
44  border: true,
45  veil: true,
46};
47 
48const DropdownMenu = ({ ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>) => (
49  <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
50);
51DropdownMenu.displayName = DropdownMenuPrimitive.Root.displayName;
52 
53const DropdownMenuTrigger = ({ ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>) => (
54  <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
55// … truncated