@stridge/noctis 1.0.0-beta.0

package/dist/components/menu/menu.props.d.ts

@@ -0,0 +1,92 @@
+//#region src/components/menu/menu.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Menu.*.props()` returns. */
+type MenuPartProps = {
+  /** The slot value the matching `menu.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Menu.Item.props(...)` — the per-row tone + state the CSS keys its colour/affordance off. */
+interface MenuItemPropsArgs extends BasePropsArgs {
+  /** Visual intent — `danger` re-points the row's label/highlight to the danger role via `data-variant`. @default "default" */
+  tone?: "default" | "danger";
+  /** Whether the pointer/keyboard is over this row (drives the highlight via `data-highlighted`). */
+  highlighted?: boolean;
+  /** Whether this row is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to a highlightable-but-tone-less part's `.props(...)` — checkbox/radio/submenu rows. */
+interface MenuRowPropsArgs extends BasePropsArgs {
+  /** Whether the pointer/keyboard is over this row (drives the highlight via `data-highlighted`). */
+  highlighted?: boolean;
+  /** Whether this row is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own; look flows from the row. */
+type MenuStatelessPropsArgs = BasePropsArgs;
+/** Trigger prop bag: just the slot anchor. */
+declare function triggerProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+/** Content prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+declare function contentProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+/** Group prop bag: just the slot anchor. */
+declare function groupProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+/** Group-label prop bag: just the slot anchor. */
+declare function groupLabelProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+/** Item prop bag: slot anchor plus the `data-variant` tone and `data-highlighted`/`data-disabled` state. */
+declare function itemProps({
+  tone,
+  highlighted,
+  disabled,
+  className
+}?: MenuItemPropsArgs): MenuPartProps;
+/** Link-item prop bag: like `itemProps`, but anchors on the link-item slot (a navigable `<a>` row). */
+declare function linkItemProps({
+  tone,
+  highlighted,
+  disabled,
+  className
+}?: MenuItemPropsArgs): MenuPartProps;
+/** Checkbox-item prop bag: slot anchor plus the `data-highlighted`/`data-disabled` state. */
+declare function checkboxItemProps({
+  highlighted,
+  disabled,
+  className
+}?: MenuRowPropsArgs): MenuPartProps;
+/** Radio-group prop bag: just the slot anchor. */
+declare function radioGroupProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+/** Radio-item prop bag: slot anchor plus the `data-highlighted`/`data-disabled` state. */
+declare function radioItemProps({
+  highlighted,
+  disabled,
+  className
+}?: MenuRowPropsArgs): MenuPartProps;
+/** Submenu-trigger prop bag: slot anchor plus the `data-highlighted`/`data-disabled` state. */
+declare function submenuTriggerProps({
+  highlighted,
+  disabled,
+  className
+}?: MenuRowPropsArgs): MenuPartProps;
+/** Shortcut prop bag: just the slot anchor. */
+declare function shortcutProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+/** Separator prop bag: just the slot anchor. */
+declare function separatorProps({
+  className
+}?: MenuStatelessPropsArgs): MenuPartProps;
+//#endregion
+export { MenuItemPropsArgs, MenuPartProps, checkboxItemProps, contentProps, groupLabelProps, groupProps, itemProps, linkItemProps, radioGroupProps, radioItemProps, separatorProps, shortcutProps, submenuTriggerProps, triggerProps };

package/dist/components/menu/menu.props.js

@@ -0,0 +1,97 @@
+import { MENU_SLOTS } from "./menu.slots.js";
+//#region src/components/menu/menu.props.ts
+/**
+* The D12 unified variant contract for Menu — a per-part set of `props(...)` builders that each return
+* a **spreadable props object** of the form `{ "data-slot": "noctis-menu-<part>", ...dataAttrs }`,
+* derived from the part's variant/state inputs.
+*
+* Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `menu.css` keys every rule off it — so spreading a part's `props()` onto a *foreign* element styles
+* it as that part:
+*
+*     <li {...Menu.Item.props({ tone: "danger", highlighted: true })}>Delete</li>
+*     // → <li data-slot="noctis-menu-item" data-variant="danger" data-highlighted="">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
+* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React /
+* agent consumers can hand-write the markup from the docs.
+*/
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Trigger prop bag: just the slot anchor. */
+function triggerProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.trigger }, className);
+}
+/** Content prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+function contentProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.content }, className);
+}
+/** Group prop bag: just the slot anchor. */
+function groupProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.group }, className);
+}
+/** Group-label prop bag: just the slot anchor. */
+function groupLabelProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.groupLabel }, className);
+}
+/** Item prop bag: slot anchor plus the `data-variant` tone and `data-highlighted`/`data-disabled` state. */
+function itemProps({ tone = "default", highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": MENU_SLOTS.item,
+		"data-variant": tone,
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Link-item prop bag: like `itemProps`, but anchors on the link-item slot (a navigable `<a>` row). */
+function linkItemProps({ tone = "default", highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": MENU_SLOTS.linkItem,
+		"data-variant": tone,
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Checkbox-item prop bag: slot anchor plus the `data-highlighted`/`data-disabled` state. */
+function checkboxItemProps({ highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": MENU_SLOTS.checkboxItem,
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Radio-group prop bag: just the slot anchor. */
+function radioGroupProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.radioGroup }, className);
+}
+/** Radio-item prop bag: slot anchor plus the `data-highlighted`/`data-disabled` state. */
+function radioItemProps({ highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": MENU_SLOTS.radioItem,
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Submenu-trigger prop bag: slot anchor plus the `data-highlighted`/`data-disabled` state. */
+function submenuTriggerProps({ highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": MENU_SLOTS.submenuTrigger,
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Shortcut prop bag: just the slot anchor. */
+function shortcutProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.shortcut }, className);
+}
+/** Separator prop bag: just the slot anchor. */
+function separatorProps({ className } = {}) {
+	return withClassName({ "data-slot": MENU_SLOTS.separator }, className);
+}
+//#endregion
+export { checkboxItemProps, contentProps, groupLabelProps, groupProps, itemProps, linkItemProps, radioGroupProps, radioItemProps, separatorProps, shortcutProps, submenuTriggerProps, triggerProps };

package/dist/components/menu/menu.slots.d.ts

@@ -0,0 +1,32 @@
+//#region src/components/menu/menu.slots.d.ts
+/**
+ * The `data-*` hooks `Menu` stamps on its parts, for host-side styling and tests. Slot values mark
+ * each rendered element; the state attributes are emitted by Base UI's Menu — pair a slot with a state
+ * to target, say, the trigger only while its menu is open.
+ */
+declare enum MenuDataAttributes {
+  /** The trigger element. */
+  trigger = "data-slot",
+  /** Present on the trigger — and on a submenu trigger — while its menu is open. */
+  popupOpen = "data-popup-open",
+  /** The item's visual variant, mirroring its `tone` prop (`default`/`danger`); the component layer keys the row's token defaults off it. */
+  variant = "data-variant",
+  /** Present on the menu item the pointer or keyboard is currently over. */
+  highlighted = "data-highlighted",
+  /** Present on a disabled menu item. */
+  disabled = "data-disabled",
+  /** Present on a ticked checkbox item or the selected radio item (and its indicator). */
+  checked = "data-checked",
+  /** Present on an unticked checkbox item or an unselected radio item (and its indicator). */
+  unchecked = "data-unchecked",
+  /** The side of the anchor the content actually rendered on (`bottom`, `inline-end`, …). */
+  side = "data-side",
+  /** Present on the content for the first frame after mount — the transition's start state. */
+  startingStyle = "data-starting-style",
+  /** Present on the content while it transitions out before unmounting. */
+  endingStyle = "data-ending-style",
+  /** Present on the content when the change should not animate (keyboard open, dismissal). */
+  instant = "data-instant"
+}
+//#endregion
+export { MenuDataAttributes };

package/dist/components/menu/menu.slots.js

@@ -0,0 +1,60 @@
+//#region src/components/menu/menu.slots.ts
+/**
+* The slot vocabulary every `Menu` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, prefixed `noctis-{component}-{part}` (the precompiled `menu.css`
+* keys every rule off these anchors); SLOTS.md still generates from the token-graph declarations.
+*
+* `positioner` and `insetSpacer` are styling-only anchors (a z-index wrapper and the icon-column
+* spacer) — they carry no token mints, so they live here but not in the token-graph anatomy.
+*/
+const MENU_SLOTS = {
+	trigger: "noctis-menu-trigger",
+	positioner: "noctis-menu-positioner",
+	content: "noctis-menu-content",
+	viewport: "noctis-menu-viewport",
+	group: "noctis-menu-group",
+	groupLabel: "noctis-menu-group-label",
+	item: "noctis-menu-item",
+	linkItem: "noctis-menu-link-item",
+	checkboxItem: "noctis-menu-checkbox-item",
+	itemIndicator: "noctis-menu-item-indicator",
+	radioGroup: "noctis-menu-radio-group",
+	radioItem: "noctis-menu-radio-item",
+	radioDot: "noctis-menu-radio-dot",
+	insetSpacer: "noctis-menu-inset-spacer",
+	submenuTrigger: "noctis-menu-submenu-trigger",
+	shortcut: "noctis-menu-shortcut",
+	separator: "noctis-menu-separator"
+};
+/**
+* The `data-*` hooks `Menu` stamps on its parts, for host-side styling and tests. Slot values mark
+* each rendered element; the state attributes are emitted by Base UI's Menu — pair a slot with a state
+* to target, say, the trigger only while its menu is open.
+*/
+let MenuDataAttributes = /* @__PURE__ */ function(MenuDataAttributes) {
+	/** The trigger element. */
+	MenuDataAttributes["trigger"] = "data-slot";
+	/** Present on the trigger — and on a submenu trigger — while its menu is open. */
+	MenuDataAttributes["popupOpen"] = "data-popup-open";
+	/** The item's visual variant, mirroring its `tone` prop (`default`/`danger`); the component layer keys the row's token defaults off it. */
+	MenuDataAttributes["variant"] = "data-variant";
+	/** Present on the menu item the pointer or keyboard is currently over. */
+	MenuDataAttributes["highlighted"] = "data-highlighted";
+	/** Present on a disabled menu item. */
+	MenuDataAttributes["disabled"] = "data-disabled";
+	/** Present on a ticked checkbox item or the selected radio item (and its indicator). */
+	MenuDataAttributes["checked"] = "data-checked";
+	/** Present on an unticked checkbox item or an unselected radio item (and its indicator). */
+	MenuDataAttributes["unchecked"] = "data-unchecked";
+	/** The side of the anchor the content actually rendered on (`bottom`, `inline-end`, …). */
+	MenuDataAttributes["side"] = "data-side";
+	/** Present on the content for the first frame after mount — the transition's start state. */
+	MenuDataAttributes["startingStyle"] = "data-starting-style";
+	/** Present on the content while it transitions out before unmounting. */
+	MenuDataAttributes["endingStyle"] = "data-ending-style";
+	/** Present on the content when the change should not animate (keyboard open, dismissal). */
+	MenuDataAttributes["instant"] = "data-instant";
+	return MenuDataAttributes;
+}({});
+//#endregion
+export { MENU_SLOTS, MenuDataAttributes };

package/dist/components/menubar/index.d.ts

@@ -0,0 +1,2 @@
+import { Menubar } from "./menubar.js";
+import { MenubarDataAttributes } from "./menubar.slots.js";

package/dist/components/menubar/menubar.context.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/menubar/menubar.context.ts
+/** Context carrying the bar's size from `Menubar.Root` to each `Menubar.Trigger`. */
+const MenubarContext = createContext(null);
+/** Read the surrounding `Menubar.Root` state; throws if a part is rendered outside one. */
+function useMenubarContext(part) {
+	const context = use(MenubarContext);
+	if (context === null) throw new Error(`Menubar.${part} must be rendered inside a Menubar.Root.`);
+	return context;
+}
+//#endregion
+export { MenubarContext, useMenubarContext };

package/dist/components/menubar/menubar.d.ts

@@ -0,0 +1,162 @@
+import { IconGlyph } from "../../icons/glyphs.js";
+import { menu_d_exports } from "../../primitives/menu.js";
+import { menubar_d_exports } from "../../primitives/menubar.js";
+import { MenubarSize, rootProps, triggerProps } from "./menubar.props.js";
+import { ReactElement } from "react";
+
+//#region src/components/menubar/menubar.d.ts
+/**
+ * The bar that holds the top-level menus. A roving-tabindex `role="menubar"` row: arrow keys move the
+ * roving focus between triggers, Home/End jump to the first/last, and opening one menu while another is
+ * open switches to it. `Modal` by default — while a menu is open, outside content is inert and page
+ * scroll is locked; set `modal={false}` for a lighter bar that leaves the page interactive.
+ */
+declare function MenubarRoot({
+  size,
+  className,
+  ...props
+}: Menubar.Root.Props): ReactElement;
+/**
+ * Owns one top-level menu's open state. Renders no element of its own — wrap a `Menubar.Trigger` and a
+ * `Menu.Content` (plus the `Menu` rows). It is `Menu.Root` under the hood, so it inherits every Menu
+ * behaviour (keyboard, typeahead, dismissal) and is detected by the surrounding bar as one of its
+ * menus, switching on hover/arrow between siblings.
+ */
+declare function MenubarMenu(props: Menubar.Menu.Props): ReactElement;
+/**
+ * A top-level trigger in the bar — the labelled button that opens its menu. A menubar trigger is a
+ * bare word by platform convention (macOS / VS Code / Word), so no chevron is shown by default; opt
+ * one in with `chevron` for the rare dropdown-button-in-a-bar case. An optional leading `icon` covers
+ * a brand / app-menu slot. The button is styled as a quiet ghost that lights up on highlight and stays
+ * lit while its menu is open.
+ */
+declare function MenubarTrigger({
+  icon,
+  chevron,
+  className,
+  children,
+  ...props
+}: Menubar.Trigger.Props): ReactElement;
+/**
+ * The trailing overflow trigger for the VS Code spillover model — an icon-only `menuitem` that holds
+ * the menus which don't fit the bar. Drop it inside a final `Menubar.Menu` in place of a
+ * `Menubar.Trigger`, then fill the dropdown with the spillover menus (as `Menu.Item`s or nested
+ * `Menu.SubmenuRoot`s):
+ *
+ *     <Menubar.Menu>
+ *         <Menubar.Overflow />
+ *         <Menu.Content>…the menus that spilled…</Menu.Content>
+ *     </Menubar.Menu>
+ *
+ * Defaults to a `…` glyph and a localized `"More menus"` `aria-label` (override either). Styled as the
+ * same ghost as a `Menubar.Trigger`, squared off for the single glyph via `data-overflow`.
+ */
+declare function MenubarOverflow({
+  icon,
+  className,
+  ...props
+}: Menubar.Overflow.Props): ReactElement;
+/**
+ * An application menu bar: a row of top-level menus whose dropdowns share one visual language with the
+ * `Menu` component. Built on Base UI's Menubar + Menu for the roving-tabindex bar, the arrow-between-
+ * menus keyboard model, switch-on-hover, focus management, and `Escape`/outside-click dismissal.
+ *
+ * Compose from parts: `Menubar.Root` is the bar, each `Menubar.Menu` owns one menu's open state, its
+ * `Menubar.Trigger` opens it, and the dropdown is a `Menu.Content` holding the usual `Menu` rows —
+ * `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup`/`RadioItem`, `Menu.Group` with a `GroupLabel`,
+ * `Menu.Separator`, `Menu.Shortcut`, and nested submenus via `Menu.SubmenuRoot`. Menubar ships no item
+ * parts of its own — reach for `Menu`'s, so a bar menu and a standalone dropdown look identical.
+ *
+ * Styling is precompiled in `menubar.css` (bar + trigger) and `menu.css` (the dropdown). Each part also
+ * carries the D12 `props()` escape hatch via `Object.assign` (e.g. `Menubar.Trigger.props({ open })`),
+ * returning a spreadable `{ "data-slot": "noctis-menubar-<part>", ...dataAttrs }` bag for a foreign
+ * element a `<Menubar.*>` can't wrap.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `Menubar` namespace — e.g. `Menubar.Trigger.Props`.
+ */
+declare const Menubar: {
+  Root: typeof MenubarRoot & {
+    props: typeof rootProps;
+  };
+  Menu: typeof MenubarMenu;
+  Trigger: typeof MenubarTrigger & {
+    props: typeof triggerProps;
+  };
+  Overflow: typeof MenubarOverflow;
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `Menubar` object above, so `Menubar.Trigger` is the
+ * component value while `Menubar.Trigger.Props` is its prop type.
+ */
+declare namespace Menubar {
+  /** The size step a menubar renders at; re-points the trigger metrics. */
+  type Size = MenubarSize;
+  namespace Root {
+    type Props = Omit<menubar_d_exports.Menubar.Props, "modal" | "loopFocus" | "orientation" | "disabled"> & {
+      /**
+       * The bar's size step, re-pointing the trigger height, padding, and label size.
+       * @default "md"
+       */
+      size?: MenubarSize;
+      /**
+       * Whether an open menu is modal — outside content is made inert and page scroll is locked
+       * while a menu is open. Set `false` for a lighter bar that leaves the page interactive.
+       * @default true
+       */
+      modal?: boolean;
+      /**
+       * Whether arrow-key roving wraps from the last trigger back to the first (and vice versa).
+       * @default true
+       */
+      loopFocus?: boolean;
+      /**
+       * The bar's layout axis. `vertical` stacks the triggers into a left-aligned rail and mirrors
+       * the arrow-key model (Up/Down traverse the bar); the value is stamped as `data-orientation`.
+       * @default "horizontal"
+       */
+      orientation?: menubar_d_exports.Menubar.Props["orientation"];
+      /**
+       * Whether the whole bar is disabled — every trigger reads as unavailable but stays in the
+       * roving order (APG: disabled menu items remain focusable).
+       * @default false
+       */
+      disabled?: boolean;
+    };
+    type State = menubar_d_exports.Menubar.State;
+  }
+  namespace Menu {
+    type Props = Omit<menu_d_exports.Menu.Root.Props, "open" | "defaultOpen" | "onOpenChange"> & {
+      /**
+       * Controls whether this menu is open. Pair with `onOpenChange` to drive which menu is open
+       * from host state — Base UI's Menubar tracks the open menu per `Menubar.Menu`, so the
+       * controlled-open seam lives here, not on `Menubar.Root`.
+       */
+      open?: menu_d_exports.Menu.Root.Props["open"]; /** The menu's initial open state when uncontrolled. */
+      defaultOpen?: menu_d_exports.Menu.Root.Props["defaultOpen"]; /** Called when this menu opens or closes (pointer, keyboard, or sibling-switch). */
+      onOpenChange?: menu_d_exports.Menu.Root.Props["onOpenChange"];
+    };
+    type State = menu_d_exports.Menu.Root.State;
+  }
+  namespace Overflow {
+    type Props = menu_d_exports.Menu.Trigger.Props & {
+      /** The overflow glyph. @default MoreHorizontalIcon (`…`) */icon?: IconGlyph;
+    };
+    type State = menu_d_exports.Menu.Trigger.State;
+  }
+  namespace Trigger {
+    type Props = menu_d_exports.Menu.Trigger.Props & {
+      /** Optional leading glyph — a brand / app-menu affordance; off-pattern for ordinary menus. */icon?: IconGlyph;
+      /**
+       * Show a trailing dropdown chevron. Off by default — a menubar trigger is a bare word by
+       * platform convention; opt in only for a dropdown-button-style trigger.
+       * @default false
+       */
+      chevron?: boolean;
+    };
+    type State = menu_d_exports.Menu.Trigger.State;
+  }
+}
+//#endregion
+export { Menubar };

package/dist/components/menubar/menubar.js

@@ -0,0 +1,122 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { ChevronDownIcon, MoreHorizontalIcon } from "../../icons/glyphs.js";
+import { useNoctisStringFormatter } from "../../core/use-injected-labels.js";
+import { menu_exports } from "../../primitives/menu.js";
+import { menubar_exports } from "../../primitives/menubar.js";
+import { MenubarContext, useMenubarContext } from "./menubar.context.js";
+import { MENUBAR_SLOTS } from "./menubar.slots.js";
+import { rootProps, triggerProps } from "./menubar.props.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menubar/menubar.tsx
+/**
+* The bar that holds the top-level menus. A roving-tabindex `role="menubar"` row: arrow keys move the
+* roving focus between triggers, Home/End jump to the first/last, and opening one menu while another is
+* open switches to it. `Modal` by default — while a menu is open, outside content is inert and page
+* scroll is locked; set `modal={false}` for a lighter bar that leaves the page interactive.
+*/
+function MenubarRoot({ size = "md", className, ...props }) {
+	const { "data-size": dataSize } = rootProps({ size });
+	return /* @__PURE__ */ jsx(MenubarContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(menubar_exports.Menubar, {
+			"data-slot": MENUBAR_SLOTS.root,
+			"data-size": dataSize,
+			className: clsx$1(className),
+			...props
+		})
+	});
+}
+/**
+* Owns one top-level menu's open state. Renders no element of its own — wrap a `Menubar.Trigger` and a
+* `Menu.Content` (plus the `Menu` rows). It is `Menu.Root` under the hood, so it inherits every Menu
+* behaviour (keyboard, typeahead, dismissal) and is detected by the surrounding bar as one of its
+* menus, switching on hover/arrow between siblings.
+*/
+function MenubarMenu(props) {
+	return /* @__PURE__ */ jsx(menu_exports.Menu.Root, { ...props });
+}
+/**
+* A top-level trigger in the bar — the labelled button that opens its menu. A menubar trigger is a
+* bare word by platform convention (macOS / VS Code / Word), so no chevron is shown by default; opt
+* one in with `chevron` for the rare dropdown-button-in-a-bar case. An optional leading `icon` covers
+* a brand / app-menu slot. The button is styled as a quiet ghost that lights up on highlight and stays
+* lit while its menu is open.
+*/
+function MenubarTrigger({ icon, chevron = false, className, children, ...props }) {
+	const { size } = useMenubarContext("Trigger");
+	return /* @__PURE__ */ jsxs(menu_exports.Menu.Trigger, {
+		"data-slot": MENUBAR_SLOTS.trigger,
+		className: clsx$1(className),
+		...props,
+		children: [
+			icon ? /* @__PURE__ */ jsx(Icon, {
+				icon,
+				size: size === "sm" ? "sm" : "md"
+			}) : null,
+			children,
+			chevron ? /* @__PURE__ */ jsx(Icon, {
+				icon: ChevronDownIcon,
+				size: "sm"
+			}) : null
+		]
+	});
+}
+/**
+* The trailing overflow trigger for the VS Code spillover model — an icon-only `menuitem` that holds
+* the menus which don't fit the bar. Drop it inside a final `Menubar.Menu` in place of a
+* `Menubar.Trigger`, then fill the dropdown with the spillover menus (as `Menu.Item`s or nested
+* `Menu.SubmenuRoot`s):
+*
+*     <Menubar.Menu>
+*         <Menubar.Overflow />
+*         <Menu.Content>…the menus that spilled…</Menu.Content>
+*     </Menubar.Menu>
+*
+* Defaults to a `…` glyph and a localized `"More menus"` `aria-label` (override either). Styled as the
+* same ghost as a `Menubar.Trigger`, squared off for the single glyph via `data-overflow`.
+*/
+function MenubarOverflow({ icon = MoreHorizontalIcon, className, ...props }) {
+	const { size } = useMenubarContext("Overflow");
+	const formatter = useNoctisStringFormatter();
+	const label = props["aria-label"] ?? formatter.format("menubar.moreMenus");
+	return /* @__PURE__ */ jsx(menu_exports.Menu.Trigger, {
+		"data-slot": MENUBAR_SLOTS.trigger,
+		"data-overflow": "",
+		className: clsx$1(className),
+		...props,
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: size === "sm" ? "sm" : "md"
+		})
+	});
+}
+/**
+* An application menu bar: a row of top-level menus whose dropdowns share one visual language with the
+* `Menu` component. Built on Base UI's Menubar + Menu for the roving-tabindex bar, the arrow-between-
+* menus keyboard model, switch-on-hover, focus management, and `Escape`/outside-click dismissal.
+*
+* Compose from parts: `Menubar.Root` is the bar, each `Menubar.Menu` owns one menu's open state, its
+* `Menubar.Trigger` opens it, and the dropdown is a `Menu.Content` holding the usual `Menu` rows —
+* `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup`/`RadioItem`, `Menu.Group` with a `GroupLabel`,
+* `Menu.Separator`, `Menu.Shortcut`, and nested submenus via `Menu.SubmenuRoot`. Menubar ships no item
+* parts of its own — reach for `Menu`'s, so a bar menu and a standalone dropdown look identical.
+*
+* Styling is precompiled in `menubar.css` (bar + trigger) and `menu.css` (the dropdown). Each part also
+* carries the D12 `props()` escape hatch via `Object.assign` (e.g. `Menubar.Trigger.props({ open })`),
+* returning a spreadable `{ "data-slot": "noctis-menubar-<part>", ...dataAttrs }` bag for a foreign
+* element a `<Menubar.*>` can't wrap.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Menubar` namespace — e.g. `Menubar.Trigger.Props`.
+*/
+const Menubar = {
+	Root: Object.assign(MenubarRoot, { props: rootProps }),
+	Menu: MenubarMenu,
+	Trigger: Object.assign(MenubarTrigger, { props: triggerProps }),
+	Overflow: MenubarOverflow
+};
+//#endregion
+export { Menubar };

package/dist/components/menubar/menubar.props.d.ts

@@ -0,0 +1,41 @@
+//#region src/components/menubar/menubar.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Menubar.*.props()` returns. */
+type MenubarPartProps = {
+  /** The slot value the matching `menubar.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** The size step a menubar can render at; re-points the trigger height/padding/font-size internals. */
+type MenubarSize = "sm" | "md" | "lg";
+/** Argument to `Menubar.Root.props(...)` — the bar's size, stamped as `data-size` for the trigger re-point. */
+interface MenubarRootPropsArgs {
+  /** The bar's size step (`sm`/`md`/`lg`), driving the trigger metrics. @default "md" */
+  size?: MenubarSize;
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Menubar.Trigger.props(...)` — the top-level trigger's open/highlight/disabled state. */
+interface MenubarTriggerPropsArgs {
+  /** Whether this trigger's menu is open (drives the lit look via `data-popup-open`). */
+  open?: boolean;
+  /** Whether the pointer/keyboard is over this trigger (drives the highlight via `data-highlighted`). */
+  highlighted?: boolean;
+  /** Whether this trigger is disabled — dims and reads as unavailable, but stays focusable (via `data-disabled`). */
+  disabled?: boolean;
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Root (bar) prop bag: the slot anchor plus the `data-size` axis the trigger metrics re-point off. */
+declare function rootProps({
+  size,
+  className
+}?: MenubarRootPropsArgs): MenubarPartProps;
+/** Trigger prop bag: the slot anchor plus the `data-popup-open`/`data-highlighted`/`data-disabled` state. */
+declare function triggerProps({
+  open,
+  highlighted,
+  disabled,
+  className
+}?: MenubarTriggerPropsArgs): MenubarPartProps;
+//#endregion
+export { MenubarSize, rootProps, triggerProps };