context-menu

1"use client"
2 
3import * as React from "react"
4import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
5import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function ContextMenu({
10	...props
11}: React.ComponentProps<typeof BaseContextMenu.Root>) {
12	return <BaseContextMenu.Root data-slot="context-menu" {...props} />
13}
14 
15function ContextMenuTrigger({
16	...props
17}: React.ComponentProps<typeof BaseContextMenu.Trigger>) {
18	return <BaseContextMenu.Trigger data-slot="context-menu-trigger" {...props} />
19}
20 
21function ContextMenuGroup({
22	...props
23}: React.ComponentProps<typeof BaseContextMenu.Group>) {
24	return <BaseContextMenu.Group data-slot="context-menu-group" {...props} />
25}
26 
27function ContextMenuPortal({
28	...props
29}: React.ComponentProps<typeof BaseContextMenu.Portal>) {
30	return <BaseContextMenu.Portal data-slot="context-menu-portal" {...props} />
31}
32 
33function ContextMenuPositioner({
34	...props
35}: React.ComponentProps<typeof BaseContextMenu.Positioner>) {
36	return (
37		<BaseContextMenu.Positioner
38			data-slot="context-menu-positioner"
39			{...props}
40		/>
41	)
42}
43 
44function ContextMenuRadioGroup({
45	...props
46}: React.ComponentProps<typeof BaseContextMenu.RadioGroup>) {
47	return (
48		<BaseContextMenu.RadioGroup
49			data-slot="context-menu-radio-group"
50			{...props}
51		/>
52	)
53}
54 
55function ContextMenuContent({
56	className,
57	sideOffset = 4,
58	align = "start",
59	...props
60}: React.ComponentProps<typeof BaseContextMenu.Popup> & {
61	align?: BaseContextMenu.Positioner.Props["align"]
62	sideOffset?: BaseContextMenu.Positioner.Props["sideOffset"]
63}) {
64	return (
65		<ContextMenuPortal>
66			<ContextMenuPositioner
67				className="max-h-(--available-height)"
68				align={align}
69				sideOffset={sideOffset}
70			>
71				<BaseContextMenu.Popup
72					data-slot="context-menu-content"
73					className={cn(
74						"bg-popover text-popover-foreground z-50 min-w-48 origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-md transition-all outline-none data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0",
75						className
76					)}
77					{...props}
78				/>
79			</ContextMenuPositioner>
80		</ContextMenuPortal>
81	)
82}
83 
84function ContextMenuItem({
85	className,
86	inset,
87	variant = "default",
88	...props
89}: React.ComponentProps<typeof BaseContextMenu.Item> & {
90	inset?: boolean
91	variant?: "default" | "destructive"
92}) {
93	return (
94		<BaseContextMenu.Item
95			data-slot="context-menu-item"
96// … truncated