Context Menu

1import * as React from "react"
2import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
3 
4import { cn } from "@/lib/utils"
5import { ChevronRightIcon, CheckIcon } from "lucide-react"
6 
7function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
8  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
9}
10 
11function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
12  return (
13    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
14  )
15}
16 
17function ContextMenuTrigger({
18  className,
19  ...props
20}: ContextMenuPrimitive.Trigger.Props) {
21  return (
22    <ContextMenuPrimitive.Trigger
23      data-slot="context-menu-trigger"
24      className={cn("select-none", className)}
25      {...props}
26    />
27  )
28}
29 
30function ContextMenuContent({
31  className,
32  align = "start",
33  alignOffset = 4,
34  side = "right",
35  sideOffset = 0,
36  ...props
37}: ContextMenuPrimitive.Popup.Props &
38  Pick<
39    ContextMenuPrimitive.Positioner.Props,
40    "align" | "alignOffset" | "side" | "sideOffset"
41  >) {
42  return (
43    <ContextMenuPrimitive.Portal>
44      <ContextMenuPrimitive.Positioner
45        className="isolate z-50 outline-none"
46        align={align}
47        alignOffset={alignOffset}
48        side={side}
49        sideOffset={sideOffset}
50      >
51        <ContextMenuPrimitive.Popup
52          data-slot="context-menu-content"
53          className={cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
54          {...props}
55        />
56      </ContextMenuPrimitive.Positioner>
57    </ContextMenuPrimitive.Portal>
58  )
59}
60 
61function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
62  return (
63    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
64  )
65}
66 
67function ContextMenuLabel({
68  className,
69  inset,
70  ...props
71}: ContextMenuPrimitive.GroupLabel.Props & {
72  inset?: boolean
73}) {
74  return (
75    <ContextMenuPrimitive.GroupLabel
76// … truncated