Context-menu

1"use client";
2 
3import * as React from "react";
4import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
5import { cn } from "@/lib/utils";
6import {
7  solidSurface,
8  type SurfaceLevel,
9} from "@/registry/default/lib/elevated";
10 
11import { HugeiconsIcon } from "@hugeicons/react";
12import {
13  ArrowRight01Icon,
14  CircleIcon,
15  Tick02Icon,
16} from "@hugeicons/core-free-icons";
17function ContextMenu({
18  ...props
19}: React.ComponentProps<typeof BaseContextMenu.Root>) {
20  return <BaseContextMenu.Root data-slot="context-menu" {...props} />;
21}
22 
23function ContextMenuTrigger({
24  ...props
25}: React.ComponentProps<typeof BaseContextMenu.Trigger>) {
26  return (
27    <BaseContextMenu.Trigger data-slot="context-menu-trigger" {...props} />
28  );
29}
30 
31function ContextMenuGroup({
32  ...props
33}: React.ComponentProps<typeof BaseContextMenu.Group>) {
34  return <BaseContextMenu.Group data-slot="context-menu-group" {...props} />;
35}
36 
37function ContextMenuPortal({
38  ...props
39}: React.ComponentProps<typeof BaseContextMenu.Portal>) {
40  return <BaseContextMenu.Portal data-slot="context-menu-portal" {...props} />;
41}
42 
43function ContextMenuPositioner({
44  ...props
45}: React.ComponentProps<typeof BaseContextMenu.Positioner>) {
46  return (
47    <BaseContextMenu.Positioner
48      data-slot="context-menu-positioner"
49      {...props}
50    />
51  );
52}
53 
54function ContextMenuRadioGroup({
55  ...props
56}: React.ComponentProps<typeof BaseContextMenu.RadioGroup>) {
57  return (
58    <BaseContextMenu.RadioGroup
59      data-slot="context-menu-radio-group"
60      {...props}
61    />
62  );
63}
64 
65function ContextMenuContent({
66  className,
67  sideOffset = 4,
68  align = "start",
69  level = 3,
70  shadowLevel = 3,
71  ...props
72}: React.ComponentProps<typeof BaseContextMenu.Popup> & {
73  align?: BaseContextMenu.Positioner.Props["align"];
74  sideOffset?: BaseContextMenu.Positioner.Props["sideOffset"];
75  /** Surface elevation level for the popup bg (1-8). Bump when nesting inside a Dialog or other elevated container. Defaults to 3. */
76  level?: SurfaceLevel;
77  /** Shadow weight (1-8). Pinned to 3 by default so the menu reads the same regardless of nesting depth. */
78  shadowLevel?: SurfaceLevel;
79}) {
80  return (
81    <ContextMenuPortal>
82      <ContextMenuPositioner
83        className="max-h-[var(--available-height)]"
84        align={align}
85        sideOffset={sideOffset}
86      >
87        <BaseContextMenu.Popup
88          data-slot="context-menu-content"
89          data-level={level}
90          className={cn(
91// … truncated