Menubar

1// Base UI base menubar — the bar runs on @octanejs/base-ui's `Menubar`, and every menu inside it
2// runs on `Menu`, the same primitive `dropdown-menu` uses. Class strings from the maintainer-supplied
3// radix source.
4//
5// PART MAPPING. Radix nests the whole family under one `Menubar` namespace; Base UI has a `Menubar`
6// component for the bar ONLY, and the menus are ordinary `Menu` parts:
7//
8//     radix     Menubar.Root / .Menu / .Trigger / .Content / .Item / .Sub / …
9//     Base UI   Menubar   +   Menu.Root / .Trigger / .Portal > .Positioner > .Popup / .Item / …
10//
11// CARRIED OVER FROM dropdown-menu, re-verified against this composition:
12//   - `--radix-menubar-content-transform-origin` -> `--transform-origin`. A utility naming a
13//     variable nothing sets does nothing, silently.
14//   - The SUBMENU trigger marks itself open with `data-popup-open`, not the `data-open` the popup
15//     carries, so radix's `data-open:bg-accent` there would never match.
16//   - `Label` and `Separator` are plain host elements: `Menu.GroupLabel` throws outside a
17//     `Menu.Group` while shadcn's label is standalone, and the `Menu` namespace ships no Separator
18//     part at all (its sibling `ContextMenu` does).
19//   - Radix's `focus:` item utilities carry over, because Base UI moves real DOM focus onto the
20//     highlighted item.
21//   - Positioning props are routed to the Positioner, not swept onto the Popup where they are inert.
22//
23// THE BAR TRIGGER IS THE ONE PLACE THIS FAMILY DIFFERS from the dropdown. Its radix class keys off
24// `aria-expanded:bg-muted` rather than a data attribute, and that carries over UNCHANGED — Base UI's
25// trigger publishes `aria-expanded="true"` when its menu is open (verified by rendering). So the
26// `data-popup-open` rewrite above applies only to the submenu trigger, not to this one.
27import { type OctaneNode } from 'octane';
28import { Menubar as MenubarPrimitive } from '@octanejs/base-ui/menubar';
29import { Menu as MenuPrimitive } from '@octanejs/base-ui/menu';
30import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
31 
32import { cn } from '@/lib/utils';
33 
34type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
35 
36export interface BaseUiPositioningProps {
37	/** Forwarded to the Positioner; see the note at the top of this file. */
38	side?: 'top' | 'right' | 'bottom' | 'left';
39	sideOffset?: number;
40	align?: 'start' | 'center' | 'end';
41	alignOffset?: number;
42	anchor?: unknown;
43// … truncated