Menubar

1import { Menu as BaseMenu } from "@base-ui/react/menu";
2import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
3import { cn } from "@/lib/utils";
4import {
5  solidSurface,
6  type SurfaceLevel,
7} from "@/registry/default/lib/elevated";
8
9import { HugeiconsIcon } from "@hugeicons/react";
10import { ArrowRight01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
11import {
12  SwitchVisual,
13  type SwitchVisualProps,
14} from "@/registry/default/switch/switch";
15
16// Shared shell for checkbox and radio items. Padding matches the plain menu
17// item so labels line up across every item type; the indicator lives in a
18// reserved right-hand column so toggling never shifts the label.
19const toggleItemClasses =
20  "group/switch data-highlighted:bg-surface-hover data-highlighted:text-accent-foreground grid cursor-default items-center rounded-md px-2.5 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-60 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
21
22// The tick draws itself in on check. `pathLength` restates the path as 1 unit
23// long, so the dash values are fractions of the stroke and survive a HugeIcons
24// reshape. Deriving the icon array is the only way to reach the path.
25const tickIcon = Tick02Icon.map(([tag, attrs]) => [
26  tag,
27  { ...attrs, pathLength: 1 },
28]) as typeof Tick02Icon;
29
30const checkmarkClasses =
31  "[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none";
32
33function Menubar({
34  className,
35  level = 2,
36  shadowLevel = 2,
37  ...props
38}: React.ComponentProps<typeof BaseMenubar> & {
39  /** Surface elevation level (1-8). Defaults to 2 — a subtle inline toolbar that sits just above the page. */
40  level?: SurfaceLevel;
41  /** Shadow weight (1-8). Defaults to 2. */
42  shadowLevel?: SurfaceLevel;
43}) {
44  return (
45    <BaseMenubar
46      data-slot="menubar"
47      data-level={level}
48      className={cn(
49        "relative flex h-9 items-center gap-1 rounded-lg p-1",
50        solidSurface(level, shadowLevel),
51        className,
52      )}
53      {...props}
54    />
55  );
56}
57
58function MenubarMenu({ ...props }: React.ComponentProps<typeof BaseMenu.Root>) {
59  return <BaseMenu.Root data-slot="menubar-menu" {...props} />;
60}
61
62// … truncated