Context Menu

1"use client";
2 
3import { Slot } from "@radix-ui/react-slot";
4import { AnimatePresence, motion } from "motion/react";
5import * as React from "react";
6import { createPortal } from "react-dom";
7 
8import { cn } from "@/lib/utils";
9 
10const controlCornerClassName =
11  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
12 
13const controlCornerInheritClassName =
14  "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]";
15 
16const contextMenuThemeClassName =
17  "[--cm-surface:#ffffff] [--cm-foreground:#111111] [--cm-border:#e3e7ec] [--cm-muted-foreground:#6d7480] [--cm-accent:#f3f5f8] [--color-accent:var(--cm-accent)] [--color-accent-foreground:var(--cm-accent-foreground)] [--cm-accent-foreground:#111111] [--cm-destructive:#dc2626] [--cm-ring:rgba(17,17,17,0.16)] dark:[--cm-surface:#111111] dark:[--cm-foreground:#f6f3ec] dark:[--cm-border:#2b2a25] dark:[--cm-muted-foreground:#9a958a] dark:[--cm-accent:#1a1a18] [--color-accent:var(--cm-accent)] [--color-accent-foreground:var(--cm-accent-foreground)] dark:[--cm-accent-foreground:#f6f3ec] dark:[--cm-destructive:#f87171] dark:[--cm-ring:rgba(246,243,236,0.18)]";
18 
19const contextMenuPanelClassName = cn(
20  controlCornerClassName,
21  "border border-[color:color-mix(in_oklch,var(--cm-border),transparent_40%)] bg-[color:var(--cm-surface)] p-1.5 text-[color:var(--cm-foreground)] shadow-2xl"
22);
23 
24const contextMenuTriggerClassName =
25  "outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--cm-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--cm-surface)]";
26 
27const contextMenuItemHighlightClassName = cn(
28  controlCornerInheritClassName,
29  "absolute inset-0 bg-[color:var(--cm-accent)]"
30);
31 
32const contextMenuItemClassName = cn(
33  controlCornerClassName,
34  "relative flex w-full cursor-pointer items-center gap-2.5 px-3 py-2.5 text-left font-medium text-sm outline-none transition-colors"
35);
36 
37const contextMenuItemDefaultClassName =
38  "text-[color:color-mix(in_oklch,var(--cm-foreground),transparent_15%)] hover:bg-accent/60";
39 
40const contextMenuItemDestructiveClassName =
41  "text-[color:var(--cm-destructive)] hover:bg-accent/60";
42 
43export type ContextMenuItem = {
44  label: string;
45  icon?: React.ReactNode;
46  shortcut?: string;
47  onSelect?: () => void;
48  destructive?: boolean;
49  disabled?: boolean;
50  separatorAfter?: boolean;
51};
52 
53type Position = { x: number; y: number };
54// … truncated