Dropdown Menu

1import { CheckIcon, ChevronRightIcon } from "lucide-react";
2import { Menu as MenuPrimitive } from "@base-ui/react/menu";
3import type * as React from "react";
4import { cn, floatingSurfaceClasses } from "@/registry/lib/surface";
5import { ThemedPortalShell } from "@/registry/lib/portal-container";
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 (
13    <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
14  );
15}
16 
17function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
18  return (
19    <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
20  );
21}
22 
23function DropdownMenuContent({
24  className,
25  align = "start",
26  alignOffset = 0,
27  side = "bottom",
28  sideOffset = 4,
29  ...props
30}: MenuPrimitive.Popup.Props &
31  Pick<
32    MenuPrimitive.Positioner.Props,
33    "align" | "alignOffset" | "side" | "sideOffset"
34  >) {
35  return (
36    <MenuPrimitive.Portal>
37      <ThemedPortalShell>
38        <MenuPrimitive.Positioner
39          className="isolate z-50 outline-none"
40          align={align}
41          alignOffset={alignOffset}
42          side={side}
43          sideOffset={sideOffset}
44        >
45          <MenuPrimitive.Popup
46            data-slot="dropdown-menu-content"
47            className={cn(
48              "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto p-1 data-closed:overflow-hidden",
49              floatingSurfaceClasses(),
50              className,
51            )}
52            {...props}
53          />
54        </MenuPrimitive.Positioner>
55      </ThemedPortalShell>
56    </MenuPrimitive.Portal>
57  );
58}
59 
60function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
61  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
62}
63 
64function DropdownMenuItem({
65  className,
66  inset,
67  variant = "default",
68  ...props
69}: MenuPrimitive.Item.Props & {
70  inset?: boolean;
71  variant?: "default" | "destructive";
72}) {
73  return (
74    <MenuPrimitive.Item
75      data-slot="dropdown-menu-item"
76      data-inset={inset}
77      data-variant={variant}
78      className={cn(
79// … truncated