Menubar

1"use client";
2 
3import { Menu as MenuPrimitive } from "@base-ui/react/menu";
4import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
5import { CheckIcon, ChevronRightIcon } from "blode-icons-react";
6import * as React from "react";
7 
8import { cn } from "@/lib/utils";
9 
10const Menubar = ({ className, ...props }: MenubarPrimitive.Props) => (
11  <MenubarPrimitive
12    className={cn(
13      "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
14      className,
15    )}
16    data-slot="menubar"
17    {...props}
18  />
19);
20 
21const MenubarMenu = ({ ...props }: MenuPrimitive.Root.Props) => (
22  <MenuPrimitive.Root data-slot="menubar-menu" {...props} />
23);
24 
25const MenubarGroup = ({ ...props }: MenuPrimitive.Group.Props) => (
26  <MenuPrimitive.Group data-slot="menubar-group" {...props} />
27);
28 
29const MenubarPortal = ({ ...props }: MenuPrimitive.Portal.Props) => (
30  <MenuPrimitive.Portal data-slot="menubar-portal" {...props} />
31);
32 
33const MenubarRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => (
34  <MenuPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
35);
36 
37const MenubarTrigger = ({
38  className,
39  asChild,
40  children,
41  ...props
42}: MenuPrimitive.Trigger.Props & {
43  asChild?: boolean;
44}) => {
45  if (asChild && React.isValidElement(children)) {
46    return (
47      <MenuPrimitive.Trigger
48        className={cn(
49          "flex select-none items-center rounded-sm px-1.5 py-[2px] font-medium text-sm outline-hidden hover:bg-muted aria-expanded:bg-muted data-popup-open:bg-muted",
50          className,
51        )}
52        data-slot="menubar-trigger"
53        render={children}
54        {...props}
55      />
56    );
57  }
58 
59  return (
60    <MenuPrimitive.Trigger
61      className={cn(
62        "flex select-none items-center rounded-sm px-1.5 py-[2px] font-medium text-sm outline-hidden hover:bg-muted aria-expanded:bg-muted data-popup-open:bg-muted",
63        className,
64      )}
65      data-slot="menubar-trigger"
66      {...props}
67    >
68      {children}
69    </MenuPrimitive.Trigger>
70  );
71};
72 
73const MenubarContent = ({
74  className,
75  align = "start",
76  alignOffset = -4,
77  sideOffset = 8,
78  ...props
79}: MenuPrimitive.Popup.Props &
80  Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "sideOffset">) => (
81  <MenubarPortal>
82    <MenuPrimitive.Positioner
83      align={align}
84      alignOffset={alignOffset}
85      className="isolate z-50 outline-none"
86      sideOffset={sideOffset}
87    >
88      <MenuPrimitive.Popup
89        className={cn(
90// … truncated