Dropdown Menu

1import * as React from "react";
2import { Menu as MenuPrimitive } from "@base-ui/react/menu";
3import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
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 DropdownMenuPositioner({
20  sideOffset = 4,
21  className,
22  ...props
23}: MenuPrimitive.Positioner.Props) {
24  return (
25    <MenuPrimitive.Portal>
26      <MenuPrimitive.Positioner
27        data-slot="dropdown-menu-positioner"
28        sideOffset={sideOffset}
29        className={cn("z-50", className)}
30        {...props}
31      />
32    </MenuPrimitive.Portal>
33  );
34}
35 
36function DropdownMenuContent({
37  className,
38  ...props
39}: MenuPrimitive.Popup.Props) {
40  return (
41    <MenuPrimitive.Popup
42      data-slot="dropdown-menu-content"
43      className={cn(
44        "bg-popover text-popover-foreground data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
45        className
46      )}
47      {...props}
48    />
49  );
50}
51 
52function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
53  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
54}
55 
56function DropdownMenuItem({
57  className,
58  inset,
59  variant = "default",
60  ...props
61}: MenuPrimitive.Item.Props & {
62  inset?: boolean;
63  variant?: "default" | "destructive";
64}) {
65  return (
66    <MenuPrimitive.Item
67      data-slot="dropdown-menu-item"
68      data-inset={inset}
69      data-variant={variant}
70      className={cn(
71// … truncated