Context Menu (Base UI)

1"use client";
2 
3import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
4import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
5import { Check, ChevronRight } from "lucide-react";
6import { MotionConfig, motion, useReducedMotion } 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 contextMenuThemeClassName =
18  "[--cm-surface:var(--popover,#ffffff)] [--cm-foreground:var(--popover-foreground,#111111)] [--cm-border:var(--border,#e3e7ec)] [--cm-muted-foreground:var(--muted-foreground,#6d7480)] [--cm-accent:var(--accent,#f3f5f8)] [--color-accent:var(--cm-accent)] [--color-accent-foreground:var(--cm-accent-foreground)] [--cm-accent-foreground:var(--accent-foreground,#111111)] [--cm-destructive:var(--destructive,#dc2626)] [--cm-ring:var(--ring,rgba(17,17,17,0.16))] dark:[--cm-surface:var(--popover,#111111)] dark:[--cm-foreground:var(--popover-foreground,#f6f3ec)] dark:[--cm-border:var(--border,#2b2a25)] dark:[--cm-muted-foreground:var(--muted-foreground,#9a958a)] dark:[--cm-accent:var(--accent,#1a1a18)] dark:[--cm-accent-foreground:var(--accent-foreground,#f6f3ec)] dark:[--cm-destructive:var(--destructive,#f87171)] dark:[--cm-ring:var(--ring,rgba(246,243,236,0.18))]";
19 
20const ITEM_HEIGHT = 44;
21 
22const contextMenuPanelChromeClassName = cn(
23  controlCornerClassName,
24  "z-50 min-w-[232px] overflow-hidden border border-[color:color-mix(in_oklch,var(--cm-border),transparent_40%)] bg-[color:var(--cm-surface)] text-[color:var(--cm-foreground)] shadow-lg"
25);
26 
27const contextMenuPanelScrollbarClassName =
28  "z-10 my-1.5 mr-0.5 w-1 shrink-0 touch-none select-none opacity-0 transition-opacity duration-150 before:absolute before:left-1/2 before:h-full before:w-5 before:-translate-x-1/2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0";
29 
30const contextMenuPanelThumbClassName =
31  "relative rounded-full bg-[color:color-mix(in_oklch,var(--cm-muted-foreground),transparent_35%)]";
32 
33export const contextMenuTriggerClassName =
34// … truncated