Menubar

1"use client";
2 
3import * as React from "react";
4import { Menu as MenuPrimitive } from "@base-ui/react/menu";
5import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
6 
7import { cn } from "@/lib/utils";
8import {
9	DropdownMenu,
10	DropdownMenuContent,
11	DropdownMenuGroup,
12	DropdownMenuItem,
13	DropdownMenuLabel,
14	DropdownMenuPortal,
15	DropdownMenuRadioGroup,
16	DropdownMenuSeparator,
17	DropdownMenuShortcut,
18	DropdownMenuSub,
19	DropdownMenuSubContent,
20	DropdownMenuSubTrigger,
21	DropdownMenuTrigger,
22} from "@/registry/optics/dropdown-menu";
23import { CheckIcon } from "lucide-react";
24 
25function Menubar({ className = "", ...props }) {
26	return (
27		<MenubarPrimitive
28			data-slot="menubar"
29			className={cn(
30				"bg-background h-9 rounded-md border p-1 flex items-center",
31				className,
32			)}
33			{...props}
34		/>
35	);
36}
37 
38function MenubarMenu({ ...props } = {}) {
39	return <DropdownMenu data-slot="menubar-menu" {...props} />;
40}
41 
42function MenubarGroup({ ...props } = {}) {
43	return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
44}
45 
46function MenubarPortal({ ...props } = {}) {
47	return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
48}
49 
50function MenubarTrigger({ className = "", ...props }) {
51	return (
52		<DropdownMenuTrigger
53			data-slot="menubar-trigger"
54			className={cn(
55				"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium flex items-center outline-hidden select-none",
56				className,
57			)}
58			{...props}
59		/>
60	);
61}
62 
63function MenubarContent({
64	className = "",
65	align = "start",
66	alignOffset = -4,
67	sideOffset = 8,
68	...props
69}) {
70	return (
71		<DropdownMenuContent
72			data-slot="menubar-content"
73			align={align}
74			alignOffset={alignOffset}
75			sideOffset={sideOffset}
76			className={cn(
77				"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 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 ring-foreground/10 min-w-48 rounded-lg p-1 shadow-md ring-1 duration-100",
78				className,
79			)}
80			{...props}
81		/>
82	);
83}
84 
85function MenubarItem({
86	className = "",
87	inset = false,
88	variant = "default",
89	...props
90}) {
91	return (
92		<DropdownMenuItem
93			data-slot="menubar-item"
94			data-inset={inset}
95			data-variant={variant}
96			className={cn(
97// … truncated