Menu

1import { cn } from "@/lib/utils";
2import { Menu as BaseMenu } from "@base-ui/react";
3import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
4import * as React from "react";
5 
6const Menu = BaseMenu.Root;
7 
8const MenuTrigger = BaseMenu.Trigger;
9 
10const MenuPortal = BaseMenu.Portal;
11 
12const MenuGroup = BaseMenu.Group;
13 
14const MenuRadioGroup = BaseMenu.RadioGroup;
15 
16const MenuSub = BaseMenu.SubmenuRoot;
17 
18function MenuContent({
19  className,
20  sideOffset = 4,
21  children,
22  ...props
23}: BaseMenu.Positioner.Props) {
24  return (
25    <BaseMenu.Portal>
26      <BaseMenu.Positioner
27        className={cn(
28          "overflow-hidden rounded-lg bg-grey-900 shadow-400 dark:inset-shadow-2xs dark:inset-shadow-white-100",
29          className,
30        )}
31        sideOffset={sideOffset}
32        {...props}
33      >
34        <BaseMenu.Popup className="min-w-(--anchor-width) p-2">{children}</BaseMenu.Popup>
35      </BaseMenu.Positioner>
36    </BaseMenu.Portal>
37  );
38}
39 
40function MenuSubContent({
41  className,
42  sideOffset = 12,
43  children,
44  ...props
45}: BaseMenu.Positioner.Props) {
46  return (
47    <BaseMenu.Portal>
48      <BaseMenu.Positioner
49        className={cn(
50          "overflow-hidden rounded-lg bg-grey-900 shadow-400 dark:inset-shadow-2xs dark:inset-shadow-white-100",
51          className,
52        )}
53        sideOffset={sideOffset}
54        {...props}
55      >
56        <BaseMenu.Popup className="min-w-(--anchor-width) p-2">{children}</BaseMenu.Popup>
57      </BaseMenu.Positioner>
58    </BaseMenu.Portal>
59  );
60}
61 
62function MenuItem({
63  className,
64  inset,
65  ...props
66}: BaseMenu.Item.Props & {
67  inset?: boolean;
68}) {
69  return (
70    <BaseMenu.Item
71      className={cn(
72        "typography-body-medium flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-white-1000 outline-none data-highlighted:bg-blue-500 data-disabled:pointer-events-none data-disabled:opacity-50",
73        inset && "pl-8",
74        className,
75      )}
76      {...props}
77    />
78  );
79}
80 
81function MenuCheckboxItem({
82  className,
83  children,
84  checked,
85  ...props
86}: BaseMenu.CheckboxItem.Props) {
87  return (
88    <BaseMenu.CheckboxItem
89      className={cn(
90        "typography-body-medium grid cursor-default grid-cols-[0.75rem_1fr] gap-2 rounded-md px-2 py-1 text-white-1000 outline-none data-highlighted:bg-blue-500 data-disabled:pointer-events-none data-disabled:opacity-50",
91        className,
92      )}
93      checked={checked}
94      {...props}
95    >
96// … truncated