menubar

1import { Menu as BaseMenu } from "@base-ui/react/menu"
2import { Menubar as BaseMenubar } from "@base-ui/react/menubar"
3import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6 
7function Menubar({
8	className,
9	...props
10}: React.ComponentProps<typeof BaseMenubar>) {
11	return (
12		<BaseMenubar
13			data-slot="menubar"
14			className={cn(
15				"bg-popover flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
16				className
17			)}
18			{...props}
19		/>
20	)
21}
22 
23function MenubarMenu({ ...props }: React.ComponentProps<typeof BaseMenu.Root>) {
24	return <BaseMenu.Root data-slot="menubar-menu" {...props} />
25}
26 
27function MenubarGroup({
28	...props
29}: React.ComponentProps<typeof BaseMenu.Group>) {
30	return <BaseMenu.Group data-slot="menubar-group" {...props} />
31}
32 
33function MenubarPortal({
34	...props
35}: React.ComponentProps<typeof BaseMenu.Portal>) {
36	return <BaseMenu.Portal data-slot="menubar-portal" {...props} />
37}
38 
39function MenubarRadioGroup({
40	...props
41}: React.ComponentProps<typeof BaseMenu.RadioGroup>) {
42	return <BaseMenu.RadioGroup data-slot="menubar-radio-group" {...props} />
43}
44 
45function MenubarTrigger({
46	className,
47	...props
48}: React.ComponentProps<typeof BaseMenu.Trigger>) {
49	return (
50		<BaseMenu.Trigger
51			delay={0}
52			closeDelay={0}
53			data-slot="menubar-trigger"
54			className={cn(
55				"data-popup-open:bg-accent data-popup-open:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
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}: React.ComponentProps<typeof BaseMenu.Popup> & {
70	align?: BaseMenu.Positioner.Props["align"]
71	alignOffset?: BaseMenu.Positioner.Props["alignOffset"]
72	sideOffset?: BaseMenu.Positioner.Props["sideOffset"]
73}) {
74	return (
75		<MenubarPortal>
76			<BaseMenu.Positioner
77				className="max-h-(--available-height)"
78				align={align}
79				alignOffset={alignOffset}
80				sideOffset={sideOffset}
81			>
82				<BaseMenu.Popup
83					data-slot="menubar-content"
84					className={cn(
85						"bg-popover text-popover-foreground z-50 min-w-48 origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-md transition-all data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0",
86						className
87					)}
88					{...props}
89				/>
90			</BaseMenu.Positioner>
91// … truncated