Context Menu

1"use client";
2 
3import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
4import { Check, ChevronRight, Circle } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7import { glass } from "@/lib/glass";
8import {
9  menuContentClass,
10  menuItemClass,
11  menuLabelClass,
12  menuSeparatorClass,
13} from "@/lib/menu-classes";
14 
15export const ContextMenu = ContextMenuPrimitive.Root;
16export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
17export const ContextMenuGroup = ContextMenuPrimitive.Group;
18export const ContextMenuPortal = ContextMenuPrimitive.Portal;
19export const ContextMenuSub = ContextMenuPrimitive.Sub;
20export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
21 
22export const ContextMenuContent = forwardRef<
23  HTMLDivElement,
24  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
25>(({ className, ...props }, ref) => (
26  <ContextMenuPrimitive.Portal>
27    <ContextMenuPrimitive.Content
28      ref={ref}
29      className={cn(
30        glass,
31        menuContentClass,
32        "animate-in fade-in-0 zoom-in-95",
33        className,
34      )}
35      {...props}
36    />
37  </ContextMenuPrimitive.Portal>
38));
39ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
40 
41export const ContextMenuItem = forwardRef<
42  HTMLDivElement,
43  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
44    inset?: boolean;
45  }
46>(({ className, inset, ...props }, ref) => (
47  <ContextMenuPrimitive.Item
48    ref={ref}
49    className={cn(menuItemClass, inset && "pl-8", className)}
50    {...props}
51  />
52));
53ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
54 
55export const ContextMenuCheckboxItem = forwardRef<
56  HTMLDivElement,
57  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
58>(({ className, children, checked, ...props }, ref) => (
59  <ContextMenuPrimitive.CheckboxItem
60    ref={ref}
61    className={cn(menuItemClass, "pl-8", className)}
62    checked={checked}
63    {...props}
64  >
65    <span className="absolute left-2 flex size-4 items-center justify-center">
66      <ContextMenuPrimitive.ItemIndicator>
67        <Check className="size-4" />
68      </ContextMenuPrimitive.ItemIndicator>
69    </span>
70    {children}
71  </ContextMenuPrimitive.CheckboxItem>
72));
73ContextMenuCheckboxItem.displayName =
74  ContextMenuPrimitive.CheckboxItem.displayName;
75 
76export const ContextMenuRadioItem = forwardRef<
77  HTMLDivElement,
78// … truncated