Menubar

1import { Menu as MenuPrimitive } from "@base-ui/react/menu";
2import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
3import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8function Menubar({ className, ...props }: MenubarPrimitive.Props) {
9  return (
10    <MenubarPrimitive
11      data-slot="menubar"
12      className={cn(
13        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
14        className
15      )}
16      {...props}
17    />
18  );
19}
20 
21function MenubarMenu({ ...props }: MenuPrimitive.Root.Props) {
22  return <MenuPrimitive.Root data-slot="menubar-menu" {...props} />;
23}
24 
25function MenubarGroup({ ...props }: MenuPrimitive.Group.Props) {
26  return <MenuPrimitive.Group data-slot="menubar-group" {...props} />;
27}
28 
29function MenubarPortal({ ...props }: MenuPrimitive.Portal.Props) {
30  return <MenuPrimitive.Portal data-slot="menubar-portal" {...props} />;
31}
32 
33function MenubarRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
34  return (
35    <MenuPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
36  );
37}
38 
39function MenubarTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
40  return (
41    <MenuPrimitive.Trigger
42      data-slot="menubar-trigger"
43      className={cn(
44        "focus:bg-accent focus:text-accent-foreground data-[popup-open]:bg-accent data-[open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
45        className
46      )}
47      {...props}
48    />
49  );
50}
51 
52function MenubarPositioner({
53  align = "start",
54  alignOffset = -4,
55  sideOffset = 8,
56  className,
57  ...props
58}: MenuPrimitive.Positioner.Props) {
59  return (
60    <MenubarPortal>
61      <MenuPrimitive.Positioner
62        data-slot="menubar-positioner"
63        align={align}
64        alignOffset={alignOffset}
65        sideOffset={sideOffset}
66        className={cn("z-50", className)}
67        {...props}
68      />
69    </MenubarPortal>
70  );
71}
72 
73function MenubarContent({ className, ...props }: MenuPrimitive.Popup.Props) {
74  return (
75    <MenuPrimitive.Popup
76      data-slot="menubar-content"
77      className={cn(
78// … truncated