Menubar

1import { CheckIcon } from "lucide-react";
2import { Menu as MenuPrimitive } from "@base-ui/react/menu";
3import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
4import type * as React from "react";
5import { cn } from "@/registry/lib/surface";
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuGroup,
10  DropdownMenuItem,
11  DropdownMenuLabel,
12  DropdownMenuPortal,
13  DropdownMenuRadioGroup,
14  DropdownMenuSeparator,
15  DropdownMenuShortcut,
16  DropdownMenuSub,
17  DropdownMenuSubContent,
18  DropdownMenuSubTrigger,
19  DropdownMenuTrigger,
20} from "@/registry/ui/dropdown-menu";
21 
22function Menubar({ className, ...props }: MenubarPrimitive.Props) {
23  return (
24    <MenubarPrimitive
25      data-slot="menubar"
26      className={cn(
27        "flex h-8 items-center gap-0.5 rounded-md border border-border p-[3px]",
28        className,
29      )}
30      {...props}
31    />
32  );
33}
34 
35function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
36  return <DropdownMenu data-slot="menubar-menu" {...props} />;
37}
38 
39function MenubarGroup({
40  ...props
41}: React.ComponentProps<typeof DropdownMenuGroup>) {
42  return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
43}
44 
45function MenubarPortal({
46  ...props
47}: React.ComponentProps<typeof DropdownMenuPortal>) {
48  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
49}
50 
51function MenubarRadioGroup({
52  ...props
53}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
54  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
55}
56 
57function MenubarTrigger({
58  className,
59  ...props
60}: React.ComponentProps<typeof DropdownMenuTrigger>) {
61  return (
62    <DropdownMenuTrigger
63      data-slot="menubar-trigger"
64      className={cn(
65        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-none select-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 active:opacity-40 active:duration-[var(--d-snap)] active:ease-[var(--ease-snap)] focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring",
66        className,
67      )}
68      {...props}
69    />
70  );
71}
72 
73function MenubarContent({
74  className,
75  align = "start",
76  alignOffset = -4,
77  sideOffset = 8,
78  ...props
79}: React.ComponentProps<typeof DropdownMenuContent>) {
80  return (
81    <DropdownMenuContent
82      data-slot="menubar-content"
83      align={align}
84      alignOffset={alignOffset}
85      sideOffset={sideOffset}
86// … truncated