@stridge/noctis 1.0.0-beta.0

package/dist/components/navigation-menu/navigation-menu.d.ts

@@ -0,0 +1,328 @@
+import { navigation_menu_d_exports } from "../../primitives/navigation-menu.js";
+import { NavigationMenuLinkPropsArgs, NavigationMenuPartProps, NavigationMenuRootPropsArgs, NavigationMenuTriggerPropsArgs, contentProps, footerProps, itemProps, linkDescriptionProps, linkProps, linkTitleProps, listProps, rootProps, sectionProps, sectionTitleProps, separatorProps, triggerProps, viewportProps } from "./navigation-menu.props.js";
+import { CSSProperties, ComponentProps, ReactElement } from "react";
+
+//#region src/components/navigation-menu/navigation-menu.d.ts
+/**
+ * Owns the open value and shares it across the bar. Wraps Base UI's NavigationMenu, which renders a
+ * `<nav>`. Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`). Carries a
+ * Noctis hover-intent `delay`/`closeDelay` (override per instance) and a `size` density knob (`md`
+ * site-nav default, `sm` compact). Compose a `NavigationMenu.List` of items with a single
+ * `NavigationMenu.Viewport`.
+ */
+declare function NavigationMenuRoot({
+  size,
+  orientation,
+  delay,
+  closeDelay,
+  className,
+  ...props
+}: NavigationMenu.Root.Props): ReactElement;
+/**
+ * The bar of top-level items. Holds `NavigationMenu.Item`s; arrow keys move between them (roving
+ * focus). Base UI wires the arrows but not Home/End, so we layer those on (APG disclosure-navigation):
+ * Home/End jump to the first/last enabled bar item; the composite re-syncs off the newly focused item.
+ */
+declare function NavigationMenuList({
+  className,
+  onKeyDown,
+  ...props
+}: NavigationMenu.List.Props): ReactElement;
+/** One top-level entry — wrap a `Trigger` + `Content` for a flyout, or a single `Link` for a direct page. */
+declare function NavigationMenuItem({
+  className,
+  ...props
+}: NavigationMenu.Item.Props): ReactElement;
+/**
+ * The control that opens an item's flyout — on hover (after the intent delay) and from the keyboard
+ * (Enter/Space, then Down to enter the panel). Carries a trailing chevron that rotates while the flyout
+ * is open. Mark it `current` to keep its fill when the section's page is the current one (the persistent
+ * "you are here" at the top level). Pair it with a `NavigationMenu.Content` inside the same `Item`.
+ */
+declare function NavigationMenuTrigger({
+  current,
+  disabled,
+  className,
+  children,
+  ...props
+}: NavigationMenu.Trigger.Props): ReactElement;
+/**
+ * The flyout panel for an item, moved into the shared `Viewport` while its trigger is active. Lay out
+ * its links and sections (`NavigationMenu.Section`/`Separator`/`Footer`) with logical Tailwind utilities
+ * at the call site; the panel itself carries the content padding and the cross-panel slide transition.
+ * Set `keepMounted` to keep the panel's links in the DOM when closed — recommended for site nav so
+ * crawlers can see them (Base UI defaults it `false`).
+ */
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenu.Content.Props): ReactElement;
+/**
+ * A navigation link — usable as a top-level bar entry or as a row inside a flyout panel. Mark the
+ * current page with `active` (sets `aria-current="page"`); mark a bar link as the current section with
+ * `current` (keeps the fill when closed). For SPA routing, pass `closeOnClick` to dismiss the panel on
+ * navigation. Compose your router's link via `render` (e.g.
+ * `<NavigationMenu.Link render={<NextLink href="/docs" />}>Docs</NavigationMenu.Link>`).
+ */
+declare function NavigationMenuLink({
+  current,
+  disabled,
+  className,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  ...props
+}: NavigationMenu.Link.Props): ReactElement;
+/** The bold first line of a two-line panel link — the link's label. Place inside a `NavigationMenu.Link`. */
+declare function NavigationMenuLinkTitle({
+  className,
+  ...props
+}: NavigationMenu.LinkTitle.Props): ReactElement;
+/** The muted supporting line of a two-line panel link. Place inside a `NavigationMenu.Link`, after the title. */
+declare function NavigationMenuLinkDescription({
+  className,
+  ...props
+}: NavigationMenu.LinkDescription.Props): ReactElement;
+/**
+ * A titled column group inside a flyout panel — the blessed mega-panel layout (cap each at the NN/G
+ * 3–5 groups, 7–9 links rule). Stack a `NavigationMenu.SectionTitle` over the section's `Link` rows;
+ * lay multiple sections out in a row/grid at the call site.
+ */
+declare function NavigationMenuSection({
+  className,
+  ...props
+}: NavigationMenu.Section.Props): ReactElement;
+/** A section's small heading label. Place as the first child of a `NavigationMenu.Section`. */
+declare function NavigationMenuSectionTitle({
+  className,
+  ...props
+}: NavigationMenu.SectionTitle.Props): ReactElement;
+/** A sharp 1px divider between panel groups (a native `<hr>`, implicitly a separator). */
+declare function NavigationMenuSeparator({
+  className,
+  ...props
+}: NavigationMenu.Separator.Props): ReactElement;
+/**
+ * A pinned "view all"/CTA row at a panel's end, set off by a hairline. Put the lead text first and the
+ * call-to-action `NavigationMenu.Link` last (it floats to the inline-end).
+ */
+declare function NavigationMenuFooter({
+  className,
+  ...props
+}: NavigationMenu.Footer.Props): ReactElement;
+/**
+ * The single floating flyout container — portaled, elevated, positioned against the active trigger, and
+ * animated. Render it once inside `Root`, after the `List`. Base UI teleports each open `Content` into
+ * it, so switching items slides the panel in place. The popup paint is the composed `<Surface
+ * elevation="menu">`; `data-elevation` lands on the portaled popup so the flyout re-derives its theme.
+ * Set `backdrop` to dim the page behind a full-bleed mega-panel.
+ *
+ * Set `inline` for a nested menu whose panels should stay inside the current layout (e.g. a sidebar
+ * mega-panel): the viewport renders in place as a plain clipping window — no portal, positioner, or
+ * elevated popup — so the outer flyout's card already provides the surface. Position props are ignored
+ * in this mode.
+ */
+declare function NavigationMenuViewport({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  collisionAvoidance,
+  backdrop,
+  inline,
+  className,
+  style,
+  ...props
+}: NavigationMenu.Viewport.Props): ReactElement;
+/**
+ * A site navigation bar with flyout panels: a row of `Trigger`s and `Link`s, where each trigger reveals
+ * an elevated panel that slides in place as you move between items. Built on Base UI's NavigationMenu,
+ * so the bar is fully keyboard-operable (roving arrows across the bar, Enter/Space and Down to open and
+ * enter a panel, Home/End to the ends, Escape to close), RTL-aware, and the panel transitions respect
+ * `prefers-reduced-motion`.
+ *
+ * The bar reads like Tabs — muted text links that lift to a neutral ghost fill on hover/open/current
+ * (no accent chrome; the focus ring is the one accent use). Panels read like Menu — ghost-fill rows,
+ * two-line `Link`s (`LinkTitle` + `LinkDescription`), titled `Section`s, a `Separator`, and a pinned
+ * `Footer`.
+ *
+ * Compose from parts: `NavigationMenu.Root` owns the open value, `NavigationMenu.List` holds the
+ * `NavigationMenu.Item`s (each a `Trigger` + `Content`, or a single `Link`), and one
+ * `NavigationMenu.Viewport` — rendered after the list — is the elevated flyout the active panel teleports
+ * into. `NavigationMenu.Link` styles links in the bar and inside panels alike.
+ *
+ * Styling is precompiled in `navigation-menu.css`, keyed off each part's prefixed `data-slot`. Each part
+ * also carries the D12 `props()` escape hatch via `Object.assign` (e.g.
+ * `NavigationMenu.Link.props({ active })`), returning a spreadable
+ * `{ "data-slot": "noctis-navigation-menu-<part>", ...dataAttrs }` bag for a foreign element a
+ * `<NavigationMenu.*>` can't wrap.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `NavigationMenu` namespace — e.g. `NavigationMenu.Link.Props`.
+ */
+declare const NavigationMenu: {
+  Root: typeof NavigationMenuRoot & {
+    props: typeof rootProps;
+  };
+  List: typeof NavigationMenuList & {
+    props: typeof listProps;
+  };
+  Item: typeof NavigationMenuItem & {
+    props: typeof itemProps;
+  };
+  Trigger: typeof NavigationMenuTrigger & {
+    props: typeof triggerProps;
+  };
+  Content: typeof NavigationMenuContent & {
+    props: typeof contentProps;
+  };
+  Link: typeof NavigationMenuLink & {
+    props: typeof linkProps;
+  };
+  LinkTitle: typeof NavigationMenuLinkTitle & {
+    props: typeof linkTitleProps;
+  };
+  LinkDescription: typeof NavigationMenuLinkDescription & {
+    props: typeof linkDescriptionProps;
+  };
+  Section: typeof NavigationMenuSection & {
+    props: typeof sectionProps;
+  };
+  SectionTitle: typeof NavigationMenuSectionTitle & {
+    props: typeof sectionTitleProps;
+  };
+  Separator: typeof NavigationMenuSeparator & {
+    props: typeof separatorProps;
+  };
+  Footer: typeof NavigationMenuFooter & {
+    props: typeof footerProps;
+  };
+  Viewport: typeof NavigationMenuViewport & {
+    props: typeof viewportProps;
+  };
+};
+/**
+ * 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 `NavigationMenu` object above, so `NavigationMenu.Link` is
+ * the component value while `NavigationMenu.Link.Props` is its prop type.
+ */
+declare namespace NavigationMenu {
+  /** The spreadable data-attribute prop bag every `NavigationMenu.*.props()` returns (D12). */
+  type PartProps = NavigationMenuPartProps;
+  namespace Root {
+    type Props = navigation_menu_d_exports.NavigationMenu.Root.Props & {
+      /**
+       * The bar's control density — `md` for site nav, `sm` for a compact docs bar.
+       * @default "md"
+       */
+      size?: "md" | "sm";
+    };
+    type State = navigation_menu_d_exports.NavigationMenu.Root.State;
+    /** Argument to the `NavigationMenu.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = NavigationMenuRootPropsArgs;
+  }
+  namespace List {
+    type Props = navigation_menu_d_exports.NavigationMenu.List.Props;
+    type State = navigation_menu_d_exports.NavigationMenu.List.State;
+  }
+  namespace Item {
+    type Props = navigation_menu_d_exports.NavigationMenu.Item.Props;
+    type State = navigation_menu_d_exports.NavigationMenu.Item.State;
+  }
+  namespace Trigger {
+    type Props = navigation_menu_d_exports.NavigationMenu.Trigger.Props & {
+      /** Whether this trigger owns the current section — keeps the fill when its panel is closed. */current?: boolean;
+    };
+    type State = navigation_menu_d_exports.NavigationMenu.Trigger.State;
+    /** Argument to the `NavigationMenu.Trigger.props(...)` escape-hatch helper. */
+    type PropsArgs = NavigationMenuTriggerPropsArgs;
+  }
+  namespace Content {
+    type Props = navigation_menu_d_exports.NavigationMenu.Content.Props;
+    type State = navigation_menu_d_exports.NavigationMenu.Content.State;
+  }
+  namespace Link {
+    type Props = navigation_menu_d_exports.NavigationMenu.Link.Props & {
+      /** Whether this bar link owns the current section — keeps the fill when closed. */current?: boolean; /** Whether this link is disabled — dims it and sets `aria-disabled` (anchors can't natively disable). */
+      disabled?: boolean;
+    };
+    type State = navigation_menu_d_exports.NavigationMenu.Link.State;
+    /** Argument to the `NavigationMenu.Link.props(...)` escape-hatch helper. */
+    type PropsArgs = NavigationMenuLinkPropsArgs;
+  }
+  /** The bold first line of a two-line panel link. */
+  namespace LinkTitle {
+    type Props = ComponentProps<"span">;
+  }
+  /** The muted supporting line of a two-line panel link. */
+  namespace LinkDescription {
+    type Props = ComponentProps<"span">;
+  }
+  /** A titled column group inside a flyout panel. */
+  namespace Section {
+    type Props = ComponentProps<"div">;
+  }
+  /** A panel section's heading label. */
+  namespace SectionTitle {
+    type Props = ComponentProps<"div">;
+  }
+  /** A sharp divider between panel groups. */
+  namespace Separator {
+    type Props = ComponentProps<"hr">;
+  }
+  /** A panel's pinned "view all"/CTA row. */
+  namespace Footer {
+    type Props = ComponentProps<"div">;
+  }
+  namespace Viewport {
+    type Props = navigation_menu_d_exports.NavigationMenu.Popup.Props & {
+      /**
+       * Which side of the bar to open the flyout on.
+       * @default "bottom"
+       */
+      side?: navigation_menu_d_exports.NavigationMenu.Positioner.Props["side"];
+      /**
+       * Alignment along that side, relative to the active trigger.
+       * @default "center"
+       */
+      align?: navigation_menu_d_exports.NavigationMenu.Positioner.Props["align"];
+      /**
+       * Gap from the bar, in px.
+       * @default 8
+       */
+      sideOffset?: number;
+      /**
+       * Offset along the alignment axis, in px (e.g. nudge a side-opening submenu up or down).
+       * @default 0
+       */
+      alignOffset?: number;
+      /**
+       * Minimum space kept from the viewport edge when avoiding collisions, in px.
+       * @default 12
+       */
+      collisionPadding?: navigation_menu_d_exports.NavigationMenu.Positioner.Props["collisionPadding"];
+      /**
+       * Collision strategy. Defaults to never flipping the flyout to the opposite side (the bar
+       * always opens downward); align still shifts to stay on-screen.
+       * @default { side: "none" }
+       */
+      collisionAvoidance?: navigation_menu_d_exports.NavigationMenu.Positioner.Props["collisionAvoidance"];
+      /**
+       * Dim the page behind the open flyout — for full-bleed mega-panels.
+       * @default false
+       */
+      backdrop?: boolean;
+      /**
+       * Render the viewport in place as a plain clipping window — no portal, positioner, or elevated
+       * popup — for a nested menu whose panels stay inside the current layout (e.g. a sidebar
+       * mega-panel). Position props are ignored.
+       * @default false
+       */
+      inline?: boolean; /** Inline style merged with the popup's runtime CSS vars. */
+      style?: CSSProperties;
+    };
+  }
+}
+//#endregion
+export { NavigationMenu };

package/dist/components/navigation-menu/navigation-menu.js

@@ -0,0 +1,274 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { ChevronDownIcon } from "../../icons/glyphs.js";
+import { Surface } from "../surface/surface.js";
+import { navigation_menu_exports } from "../../primitives/navigation-menu.js";
+import { NAVIGATION_MENU_SLOTS } from "./navigation-menu.slots.js";
+import { contentProps, footerProps, itemProps, linkDescriptionProps, linkProps, linkTitleProps, listProps, rootProps, sectionProps, sectionTitleProps, separatorProps, triggerProps, viewportProps } from "./navigation-menu.props.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation-menu/navigation-menu.tsx
+/** Noctis hover-intent defaults — deliberate enough to kill the cross-item flicker Base UI's 50ms produces. */
+const DEFAULT_DELAY = 150;
+const DEFAULT_CLOSE_DELAY = 180;
+/**
+* Owns the open value and shares it across the bar. Wraps Base UI's NavigationMenu, which renders a
+* `<nav>`. Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`). Carries a
+* Noctis hover-intent `delay`/`closeDelay` (override per instance) and a `size` density knob (`md`
+* site-nav default, `sm` compact). Compose a `NavigationMenu.List` of items with a single
+* `NavigationMenu.Viewport`.
+*/
+function NavigationMenuRoot({ size = "md", orientation = "horizontal", delay = DEFAULT_DELAY, closeDelay = DEFAULT_CLOSE_DELAY, className, ...props }) {
+	return /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Root, {
+		"data-slot": NAVIGATION_MENU_SLOTS.root,
+		"data-size": size,
+		"data-orientation": orientation,
+		orientation,
+		delay,
+		closeDelay,
+		className,
+		...props
+	});
+}
+/** Enabled bar items in roving order — triggers and direct bar links, skipping disabled ones. */
+const BAR_ITEM_SELECTOR = "[data-slot='noctis-navigation-menu-trigger']:not([data-disabled]),[data-slot='noctis-navigation-menu-item'] > [data-slot='noctis-navigation-menu-link']:not([data-disabled])";
+/**
+* The bar of top-level items. Holds `NavigationMenu.Item`s; arrow keys move between them (roving
+* focus). Base UI wires the arrows but not Home/End, so we layer those on (APG disclosure-navigation):
+* Home/End jump to the first/last enabled bar item; the composite re-syncs off the newly focused item.
+*/
+function NavigationMenuList({ className, onKeyDown, ...props }) {
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Home" && event.key !== "End") return;
+		const items = event.currentTarget.querySelectorAll(BAR_ITEM_SELECTOR);
+		if (items.length === 0) return;
+		(event.key === "Home" ? items[0] : items[items.length - 1])?.focus();
+		event.preventDefault();
+	}
+	return /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.List, {
+		"data-slot": NAVIGATION_MENU_SLOTS.list,
+		className,
+		onKeyDown: handleKeyDown,
+		...props
+	});
+}
+/** One top-level entry — wrap a `Trigger` + `Content` for a flyout, or a single `Link` for a direct page. */
+function NavigationMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Item, {
+		"data-slot": NAVIGATION_MENU_SLOTS.item,
+		className,
+		...props
+	});
+}
+/**
+* The control that opens an item's flyout — on hover (after the intent delay) and from the keyboard
+* (Enter/Space, then Down to enter the panel). Carries a trailing chevron that rotates while the flyout
+* is open. Mark it `current` to keep its fill when the section's page is the current one (the persistent
+* "you are here" at the top level). Pair it with a `NavigationMenu.Content` inside the same `Item`.
+*/
+function NavigationMenuTrigger({ current, disabled, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(navigation_menu_exports.NavigationMenu.Trigger, {
+		"data-slot": NAVIGATION_MENU_SLOTS.trigger,
+		"data-current": current ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		disabled,
+		className,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Icon, {
+			"data-slot": NAVIGATION_MENU_SLOTS.icon,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: ChevronDownIcon,
+				size: "sm"
+			})
+		})]
+	});
+}
+/**
+* The flyout panel for an item, moved into the shared `Viewport` while its trigger is active. Lay out
+* its links and sections (`NavigationMenu.Section`/`Separator`/`Footer`) with logical Tailwind utilities
+* at the call site; the panel itself carries the content padding and the cross-panel slide transition.
+* Set `keepMounted` to keep the panel's links in the DOM when closed — recommended for site nav so
+* crawlers can see them (Base UI defaults it `false`).
+*/
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Content, {
+		"data-slot": NAVIGATION_MENU_SLOTS.content,
+		className,
+		...props
+	});
+}
+/**
+* A navigation link — usable as a top-level bar entry or as a row inside a flyout panel. Mark the
+* current page with `active` (sets `aria-current="page"`); mark a bar link as the current section with
+* `current` (keeps the fill when closed). For SPA routing, pass `closeOnClick` to dismiss the panel on
+* navigation. Compose your router's link via `render` (e.g.
+* `<NavigationMenu.Link render={<NextLink href="/docs" />}>Docs</NavigationMenu.Link>`).
+*/
+function NavigationMenuLink({ current, disabled, className, onClick, onKeyDown, tabIndex, ...props }) {
+	return /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Link, {
+		"data-slot": NAVIGATION_MENU_SLOTS.link,
+		"data-current": current ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"aria-disabled": disabled ? true : void 0,
+		tabIndex: disabled ? -1 : tabIndex,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (disabled && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				return;
+			}
+			onKeyDown?.(event);
+		},
+		className,
+		...props
+	});
+}
+/** The bold first line of a two-line panel link — the link's label. Place inside a `NavigationMenu.Link`. */
+function NavigationMenuLinkTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": NAVIGATION_MENU_SLOTS.linkTitle,
+		className,
+		...props
+	});
+}
+/** The muted supporting line of a two-line panel link. Place inside a `NavigationMenu.Link`, after the title. */
+function NavigationMenuLinkDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": NAVIGATION_MENU_SLOTS.linkDescription,
+		className,
+		...props
+	});
+}
+/**
+* A titled column group inside a flyout panel — the blessed mega-panel layout (cap each at the NN/G
+* 3–5 groups, 7–9 links rule). Stack a `NavigationMenu.SectionTitle` over the section's `Link` rows;
+* lay multiple sections out in a row/grid at the call site.
+*/
+function NavigationMenuSection({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": NAVIGATION_MENU_SLOTS.section,
+		className,
+		...props
+	});
+}
+/** A section's small heading label. Place as the first child of a `NavigationMenu.Section`. */
+function NavigationMenuSectionTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": NAVIGATION_MENU_SLOTS.sectionTitle,
+		className,
+		...props
+	});
+}
+/** A sharp 1px divider between panel groups (a native `<hr>`, implicitly a separator). */
+function NavigationMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		"data-slot": NAVIGATION_MENU_SLOTS.separator,
+		className,
+		...props
+	});
+}
+/**
+* A pinned "view all"/CTA row at a panel's end, set off by a hairline. Put the lead text first and the
+* call-to-action `NavigationMenu.Link` last (it floats to the inline-end).
+*/
+function NavigationMenuFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": NAVIGATION_MENU_SLOTS.footer,
+		className,
+		...props
+	});
+}
+/**
+* The single floating flyout container — portaled, elevated, positioned against the active trigger, and
+* animated. Render it once inside `Root`, after the `List`. Base UI teleports each open `Content` into
+* it, so switching items slides the panel in place. The popup paint is the composed `<Surface
+* elevation="menu">`; `data-elevation` lands on the portaled popup so the flyout re-derives its theme.
+* Set `backdrop` to dim the page behind a full-bleed mega-panel.
+*
+* Set `inline` for a nested menu whose panels should stay inside the current layout (e.g. a sidebar
+* mega-panel): the viewport renders in place as a plain clipping window — no portal, positioner, or
+* elevated popup — so the outer flyout's card already provides the surface. Position props are ignored
+* in this mode.
+*/
+function NavigationMenuViewport({ side = "bottom", align = "center", sideOffset = 8, alignOffset = 0, collisionPadding = 12, collisionAvoidance = { side: "none" }, backdrop = false, inline = false, className, style, ...props }) {
+	if (inline) return /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Viewport, {
+		"data-slot": NAVIGATION_MENU_SLOTS.viewport,
+		className,
+		style
+	});
+	return /* @__PURE__ */ jsxs(navigation_menu_exports.NavigationMenu.Portal, { children: [backdrop ? /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Backdrop, { "data-slot": NAVIGATION_MENU_SLOTS.backdrop }) : null, /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		collisionAvoidance,
+		"data-slot": NAVIGATION_MENU_SLOTS.positioner,
+		children: /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Popup, {
+			"data-slot": NAVIGATION_MENU_SLOTS.popup,
+			render: /* @__PURE__ */ jsx(Surface, {
+				elevation: "menu",
+				bordered: true,
+				shadow: "modal"
+			}),
+			style: {
+				transformOrigin: "var(--transform-origin)",
+				width: "var(--popup-width)",
+				height: "var(--popup-height)",
+				...style
+			},
+			className,
+			...props,
+			children: /* @__PURE__ */ jsx(navigation_menu_exports.NavigationMenu.Viewport, { "data-slot": NAVIGATION_MENU_SLOTS.viewport })
+		})
+	})] });
+}
+/**
+* A site navigation bar with flyout panels: a row of `Trigger`s and `Link`s, where each trigger reveals
+* an elevated panel that slides in place as you move between items. Built on Base UI's NavigationMenu,
+* so the bar is fully keyboard-operable (roving arrows across the bar, Enter/Space and Down to open and
+* enter a panel, Home/End to the ends, Escape to close), RTL-aware, and the panel transitions respect
+* `prefers-reduced-motion`.
+*
+* The bar reads like Tabs — muted text links that lift to a neutral ghost fill on hover/open/current
+* (no accent chrome; the focus ring is the one accent use). Panels read like Menu — ghost-fill rows,
+* two-line `Link`s (`LinkTitle` + `LinkDescription`), titled `Section`s, a `Separator`, and a pinned
+* `Footer`.
+*
+* Compose from parts: `NavigationMenu.Root` owns the open value, `NavigationMenu.List` holds the
+* `NavigationMenu.Item`s (each a `Trigger` + `Content`, or a single `Link`), and one
+* `NavigationMenu.Viewport` — rendered after the list — is the elevated flyout the active panel teleports
+* into. `NavigationMenu.Link` styles links in the bar and inside panels alike.
+*
+* Styling is precompiled in `navigation-menu.css`, keyed off each part's prefixed `data-slot`. Each part
+* also carries the D12 `props()` escape hatch via `Object.assign` (e.g.
+* `NavigationMenu.Link.props({ active })`), returning a spreadable
+* `{ "data-slot": "noctis-navigation-menu-<part>", ...dataAttrs }` bag for a foreign element a
+* `<NavigationMenu.*>` can't wrap.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `NavigationMenu` namespace — e.g. `NavigationMenu.Link.Props`.
+*/
+const NavigationMenu = {
+	Root: Object.assign(NavigationMenuRoot, { props: rootProps }),
+	List: Object.assign(NavigationMenuList, { props: listProps }),
+	Item: Object.assign(NavigationMenuItem, { props: itemProps }),
+	Trigger: Object.assign(NavigationMenuTrigger, { props: triggerProps }),
+	Content: Object.assign(NavigationMenuContent, { props: contentProps }),
+	Link: Object.assign(NavigationMenuLink, { props: linkProps }),
+	LinkTitle: Object.assign(NavigationMenuLinkTitle, { props: linkTitleProps }),
+	LinkDescription: Object.assign(NavigationMenuLinkDescription, { props: linkDescriptionProps }),
+	Section: Object.assign(NavigationMenuSection, { props: sectionProps }),
+	SectionTitle: Object.assign(NavigationMenuSectionTitle, { props: sectionTitleProps }),
+	Separator: Object.assign(NavigationMenuSeparator, { props: separatorProps }),
+	Footer: Object.assign(NavigationMenuFooter, { props: footerProps }),
+	Viewport: Object.assign(NavigationMenuViewport, { props: viewportProps })
+};
+//#endregion
+export { NavigationMenu };