Context Menu (Tailwind)

1"use client";
2 
3import { ContextMenu } from "@base-ui/react/context-menu";
4import { Check, ChevronRight, Circle } from "lucide-react";
5import type React from "react";
6import type { ReactNode } from "react";
7import { cn } from "@/lib/utils";
8 
9function ContextMenuRoot({ ...props }: ContextMenu.Root.Props) {
10  return <ContextMenu.Root {...props} />;
11}
12 
13function ContextMenuTrigger({ className, ...props }: ContextMenu.Trigger.Props) {
14  return (
15    <ContextMenu.Trigger
16      className={cn("select-none outline-none", className)}
17      data-slot="contextmenu-trigger"
18      {...props}
19    />
20  );
21}
22 
23const ContextMenuPortal = ContextMenu.Portal;
24 
25function ContextMenuBackdrop({ className, ...props }: ContextMenu.Backdrop.Props) {
26  return (
27    <ContextMenu.Backdrop
28      className={cn(
29        "fixed inset-0 z-[140] bg-black/80 opacity-0 transition-opacity duration-150",
30        "data-[open]:opacity-100",
31        className
32      )}
33      data-slot="contextmenu-backdrop"
34      {...props}
35    />
36  );
37}
38 
39function ContextMenuPositioner({ className, ...props }: ContextMenu.Positioner.Props) {
40  return (
41    <ContextMenu.Positioner
42      className={cn("absolute z-[150] outline-none", className)}
43      data-slot="contextmenu-positioner"
44      {...props}
45    />
46  );
47}
48 
49function ContextMenuPopup({ className, ...props }: ContextMenu.Popup.Props) {
50  return (
51    <ContextMenu.Popup
52      className={cn(
53        "box-border min-w-[140px] bg-[var(--popover)]",
54        "rounded-[var(--radius)]",
55        "flex flex-col shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.8),var(--shadow-border-stack)]",
56        "origin-[top_center] transition-[transform,scale,opacity] duration-[250ms] ease-[var(--ease-out-expo)]",
57        "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
58        "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
59        "data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none",
60        "data-[side=none]:data-[ending-style]:transition-none",
61        "max-sm:max-w-[calc(100vw-2rem)] max-sm:p-1.5",
62        className
63      )}
64      data-slot="contextmenu-popup"
65      {...props}
66    />
67  );
68}
69 
70function ContextMenuArrow({ className, ...props }: ContextMenu.Arrow.Props) {
71  return (
72    <ContextMenu.Arrow
73      className={cn("fill-background stroke-1 stroke-border", className)}
74      data-slot="contextmenu-arrow"
75      {...props}
76    />
77  );
78}
79 
80// … truncated