Context Menu

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";
8import styles from "./context-menu.module.css";
9 
10function ContextMenuRoot({ ...props }: ContextMenu.Root.Props) {
11  return <ContextMenu.Root {...props} />;
12}
13 
14function ContextMenuTrigger({ className, ...props }: ContextMenu.Trigger.Props) {
15  return <ContextMenu.Trigger className={cn(styles.trigger, className)} data-slot="contextmenu-trigger" {...props} />;
16}
17 
18const ContextMenuPortal = ContextMenu.Portal;
19 
20function ContextMenuBackdrop({ className, ...props }: ContextMenu.Backdrop.Props) {
21  return (
22    <ContextMenu.Backdrop className={cn(styles.backdrop, className)} data-slot="contextmenu-backdrop" {...props} />
23  );
24}
25 
26function ContextMenuPositioner({ className, ...props }: ContextMenu.Positioner.Props) {
27  return (
28    <ContextMenu.Positioner
29      className={cn(styles.positioner, className)}
30      data-slot="contextmenu-positioner"
31      {...props}
32    />
33  );
34}
35 
36function ContextMenuPopup({ className, ...props }: ContextMenu.Popup.Props) {
37  return <ContextMenu.Popup className={cn(styles.popup, className)} data-slot="contextmenu-popup" {...props} />;
38}
39 
40function ContextMenuArrow({ className, ...props }: ContextMenu.Arrow.Props) {
41  return <ContextMenu.Arrow className={cn(styles.arrow, className)} data-slot="contextmenu-arrow" {...props} />;
42}
43 
44interface ContextMenuItemProps extends ContextMenu.Item.Props {
45  icon?: ReactNode;
46  inset?: boolean;
47  className?: string;
48  children?: ReactNode;
49  variant?: "default" | "destructive";
50}
51 
52function ContextMenuItem({
53  className,
54  icon,
55  children,
56  inset = false,
57  variant = "default",
58  ...props
59}: ContextMenuItemProps) {
60  return (
61    <ContextMenu.Item
62      className={cn(styles.item, inset && styles.inset, className)}
63      data-slot="contextmenu-item"
64      data-variant={variant === "destructive" ? "destructive" : undefined}
65      {...props}
66    >
67      {icon && <span className={styles.icon}>{icon}</span>}
68      {children}
69    </ContextMenu.Item>
70  );
71}
72 
73function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenu.CheckboxItem.Props) {
74  return (
75    <ContextMenu.CheckboxItem
76      className={cn(styles.checkboxItem, className)}
77      data-slot="contextmenu-checkboxitem"
78      {...props}
79    >
80      <span className={styles.itemIndicator}>
81// … truncated