Dropdown Menu

1import * as React from "react"
2import { Menu as MenuPrimitive } from "@base-ui/react/menu"
3 
4import { cn } from "@/lib/utils"
5import { ChevronRightIcon, CheckIcon } from "lucide-react"
6 
7function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
8  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
9}
10 
11function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
12  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
13}
14 
15function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
16  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
17}
18 
19function DropdownMenuContent({
20  align = "start",
21  alignOffset = 0,
22  side = "bottom",
23  sideOffset = 4,
24  className,
25  ...props
26}: MenuPrimitive.Popup.Props &
27  Pick<
28    MenuPrimitive.Positioner.Props,
29    "align" | "alignOffset" | "side" | "sideOffset"
30  >) {
31  return (
32    <MenuPrimitive.Portal>
33      <MenuPrimitive.Positioner
34        className="isolate z-50 outline-none"
35        align={align}
36        alignOffset={alignOffset}
37        side={side}
38        sideOffset={sideOffset}
39      >
40        <MenuPrimitive.Popup
41          data-slot="dropdown-menu-content"
42          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
43          {...props}
44        />
45      </MenuPrimitive.Positioner>
46    </MenuPrimitive.Portal>
47  )
48}
49 
50function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
51  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
52}
53 
54function DropdownMenuLabel({
55  className,
56  inset,
57  ...props
58}: MenuPrimitive.GroupLabel.Props & {
59  inset?: boolean
60}) {
61  return (
62    <MenuPrimitive.GroupLabel
63      data-slot="dropdown-menu-label"
64      data-inset={inset}
65      className={cn(
66        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
67        className
68      )}
69// … truncated