menu

1"use client"
2 
3import * as React from "react"
4 
5import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
6import { Menu as MenuPrimitive, menuAnatomy } from "@ark-ui/react/menu"
7import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
8 
9import { cn } from "@/lib/utils"
10 
11const parts = menuAnatomy.extendWith("shortcut").build()
12 
13const Menu = MenuPrimitive.Root
14 
15const MenuArrow = React.forwardRef<
16  React.ElementRef<typeof MenuPrimitive.Arrow>,
17  MenuPrimitive.ArrowProps
18>(({ className, ...props }, ref) => (
19  <MenuPrimitive.Arrow
20    ref={ref}
21    className={cn(
22      "[--arrow-background:var(--popover)] [--arrow-size:calc(var(--spacing)*2)]",
23      className
24    )}
25    {...props}
26  >
27    <MenuPrimitive.ArrowTip className="border-t border-l" />
28  </MenuPrimitive.Arrow>
29))
30MenuArrow.displayName = "MenuArrow"
31 
32const MenuCheckboxItem = React.forwardRef<
33  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,
34  MenuPrimitive.CheckboxItemProps
35>(({ className, children, ...props }, ref) => (
36  <MenuPrimitive.CheckboxItem
37    ref={ref}
38    className={cn(
39      "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
40      className
41    )}
42    {...props}
43  >
44    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
45      <MenuPrimitive.ItemIndicator>
46        <CheckIcon className="size-4" />
47      </MenuPrimitive.ItemIndicator>
48    </span>
49    <MenuPrimitive.ItemText>{children}</MenuPrimitive.ItemText>
50  </MenuPrimitive.CheckboxItem>
51))
52MenuCheckboxItem.displayName = "MenuCheckboxItem"
53 
54const MenuContent = React.forwardRef<
55  React.ElementRef<typeof MenuPrimitive.Content>,
56  MenuPrimitive.ContentProps
57>(({ className, ...props }, ref) => (
58  <MenuPrimitive.Positioner>
59    <MenuPrimitive.Content
60      ref={ref}
61      className={cn(
62// … truncated