@solostylist/ui-kit 2.0.1 → 2.0.3

package/dist/s-mega-menu/mega-menu-panel.js

@@ -0,0 +1,251 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { LIST_ATTRIBUTE as n, NODE_ATTRIBUTE as r, PANEL_ATTRIBUTE as i, ROW_ATTRIBUTE as a, focusAdjacentList as o, focusRowByOffset as s, getFirstRow as c, getSiblingRows as l, hasNestedChildren as u, resolveLayout as d, resolveSubmenuSide as f } from "./utils.js";
+import { SMegaMenuColumn as p, SMegaMenuHeading as m, SMegaMenuItemRoot as h, SMegaMenuPanel as g, SMegaMenuSubmenu as _, SMegaMenuSubmenuNode as v } from "./mega-menu-slots.js";
+import * as y from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { mergeSlotProps as S, useEventCallback as C, useForkRef as w } from "@mui/material/utils";
+import T from "@mui/utils/appendOwnerState";
+import E from "@mui/icons-material/ChevronRight";
+//#region lib/s-mega-menu/mega-menu-panel.tsx
+function D(e, t, n) {
+	return {
+		...e.ownerState,
+		active: e.getIsActive(t),
+		hasChildren: !!t.children?.length,
+		item: t,
+		...n
+	};
+}
+function O({ closeParent: e, ctx: n, depth: r, item: i, onOpenSubmenu: c, onRowClick: u, open: d = !1, resolvedLayout: f, rowRef: p, side: m = "right", submenuId: g, triggerId: _ }) {
+	let v = D(n, i, {
+		depth: r,
+		heading: !1,
+		open: d,
+		resolvedLayout: f,
+		side: m
+	}), y = n.slots?.item ?? h, x = v.hasChildren, O = C((t) => {
+		let r = t.currentTarget;
+		switch (t.key) {
+			case "ArrowDown":
+				t.preventDefault(), s(l(r), r, 1);
+				break;
+			case "ArrowUp":
+				t.preventDefault(), s(l(r), r, -1);
+				break;
+			case "Home":
+				t.preventDefault(), l(r)[0]?.focus();
+				break;
+			case "End": {
+				t.preventDefault();
+				let e = l(r);
+				e[e.length - 1]?.focus();
+				break;
+			}
+			case "ArrowRight":
+				t.preventDefault(), c ? c() : o(r, 1);
+				break;
+			case "ArrowLeft":
+				t.preventDefault(), e ? e() : o(r, -1) || n.closeMenu({
+					event: t,
+					focusTrigger: !0,
+					reason: "triggerKeyDown"
+				});
+				break;
+			case "Escape":
+				t.preventDefault(), n.closeMenu({
+					event: t,
+					focusTrigger: !0,
+					reason: "escapeKeyDown"
+				});
+				break;
+			default: break;
+		}
+	}), k = x ? void 0 : i.component ?? (i.href ? n.linkComponent : void 0), A = x ? void 0 : i.href, { slotProps: j, ...M } = t(n.slotProps?.item, v) ?? {}, { ref: N, ...P } = T(y, S(M, {
+		[a]: "",
+		"aria-controls": x ? g : void 0,
+		"aria-current": v.active && A ? "page" : void 0,
+		"aria-expanded": x ? d : void 0,
+		component: k,
+		description: i.description,
+		disabled: i.disabled,
+		href: A,
+		icon: i.icon,
+		onClick: u,
+		onKeyDown: O,
+		rel: A ? i.rel : void 0,
+		selected: v.active,
+		slotProps: {
+			...j,
+			label: S(j?.label, { variant: r === 0 ? "body1" : "body2" }),
+			trailing: S(j?.trailing, { sx: { color: "inherit" } })
+		},
+		target: A ? i.target : void 0,
+		trailing: x ? /* @__PURE__ */ b(E, { fontSize: "small" }) : void 0,
+		id: _,
+		variant: f === "columns" ? "plain" : "inset"
+	}), v), F = w(N, p);
+	return /* @__PURE__ */ b(y, {
+		...P,
+		ref: F,
+		label: n.renderItem ? n.renderItem(i, v) : i.label
+	});
+}
+function k({ closeParent: n, ctx: i, depth: a, item: o, onSubmenuOpenChange: s, open: l = !1, resolvedLayout: u }) {
+	let d = y.useRef(null), p = y.useRef(null), m = y.useRef(null), h = y.useRef(void 0), g = y.useRef(!1), [E, k] = y.useState("right"), A = y.useId(), M = `${A}-submenu`, N = `${A}-trigger`, P = o.children ?? [], F = y.useCallback(() => {
+		h.current &&= (clearTimeout(h.current), void 0);
+	}, []);
+	y.useEffect(() => F, [F]);
+	let I = C(() => {
+		k(f(d.current, p.current));
+	});
+	y.useLayoutEffect(() => {
+		l && (I(), g.current && (g.current = !1, c(p.current)?.focus()));
+	}, [l, I]);
+	let L = C(() => {
+		F(), !o.disabled && (I(), s?.(!0));
+	}), R = C(() => {
+		F(), h.current = setTimeout(() => s?.(!1), i.ownerState.closeDelay);
+	}), z = C((e) => {
+		F(), s?.(!1), e && m.current?.focus();
+	}), B = C(() => {
+		if (l) {
+			c(p.current)?.focus();
+			return;
+		}
+		g.current = !0, L();
+	}), V = C(() => {
+		if (!l) {
+			L();
+			return;
+		}
+		z(!1);
+	}), H = D(i, o, {
+		depth: a,
+		heading: !1,
+		open: l,
+		resolvedLayout: u,
+		side: E
+	}), U = i.slots?.submenuNode ?? v, W = i.slots?.submenu ?? _, G = C((e) => {
+		let t = e.relatedTarget;
+		!t || e.currentTarget.contains(t) || z(!1);
+	}), { ref: K, ...q } = T(U, S(t(i.slotProps?.submenuNode, H), {
+		[r]: "",
+		"data-side": E,
+		onBlurCapture: G,
+		onFocus: I,
+		onPointerEnter: (e) => {
+			!o.disabled && e.pointerType !== "touch" && L();
+		},
+		onPointerLeave: (e) => {
+			e.pointerType !== "touch" && R();
+		}
+	}), H), J = w(K, d), { ref: Y, sx: X, ...Z } = T(W, S(t(i.slotProps?.submenu, H), {
+		"aria-hidden": l ? void 0 : !0,
+		"aria-labelledby": N,
+		id: M,
+		role: "region"
+	}), H), Q = w(Y, p);
+	return /* @__PURE__ */ x(U, {
+		...q,
+		ref: J,
+		children: [/* @__PURE__ */ b(O, {
+			closeParent: n,
+			ctx: i,
+			depth: a,
+			item: o,
+			onOpenSubmenu: B,
+			onRowClick: V,
+			open: l,
+			resolvedLayout: u,
+			rowRef: m,
+			side: E,
+			submenuId: M,
+			triggerId: N
+		}), /* @__PURE__ */ b(W, {
+			...Z,
+			ref: Q,
+			sx: [...e(X)],
+			children: l || i.keepMounted ? /* @__PURE__ */ b(j, {
+				closeParent: () => z(!0),
+				ctx: i,
+				depth: a + 1,
+				items: P
+			}) : null
+		})]
+	});
+}
+function A({ closeParent: e, ctx: r, depth: i, item: a }) {
+	let o = D(r, a, {
+		depth: i,
+		heading: !0,
+		open: !1,
+		resolvedLayout: "columns",
+		side: "right"
+	}), s = `${y.useId()}-heading`, c = r.slots?.column ?? p, l = r.slots?.heading ?? m, u = T(c, S(t(r.slotProps?.column, o), {
+		[n]: "",
+		"aria-labelledby": s
+	}), o), d = T(l, S(t(r.slotProps?.heading, o), {
+		component: "h3",
+		id: s
+	}), o);
+	return /* @__PURE__ */ x(c, {
+		...u,
+		children: [/* @__PURE__ */ b(l, {
+			...d,
+			children: r.renderItem ? r.renderItem(a, o) : a.label
+		}), (a.children ?? []).map((t) => /* @__PURE__ */ b(O, {
+			closeParent: e,
+			ctx: r,
+			depth: i + 1,
+			item: t,
+			onRowClick: (e) => r.closeMenu({
+				event: e,
+				reason: "itemClick"
+			}),
+			resolvedLayout: "columns"
+		}, t.id))]
+	});
+}
+function j({ closeParent: r, ctx: a, depth: o, items: s }) {
+	let c = d(s, a.ownerState.layout), [l, f] = y.useState(null), p = c === "columns" || !u(s), m = {
+		...a.ownerState,
+		depth: o,
+		resolvedLayout: c,
+		scrollable: p
+	}, h = a.slots?.panel ?? g, { sx: _, ...v } = T(h, S(t(a.slotProps?.panel, m), {
+		[i]: "",
+		...c === "list" ? { [n]: "" } : {}
+	}), m);
+	return /* @__PURE__ */ b(h, {
+		...v,
+		sx: [...e(_)],
+		children: c === "columns" ? s.map((e) => /* @__PURE__ */ b(A, {
+			closeParent: r,
+			ctx: a,
+			depth: o,
+			item: e,
+			resolvedLayout: c
+		}, e.id)) : s.map((e) => e.children?.length ? /* @__PURE__ */ b(k, {
+			closeParent: r,
+			ctx: a,
+			depth: o,
+			item: e,
+			onSubmenuOpenChange: (t) => f((n) => t ? e.id : n === e.id ? null : n),
+			open: l === e.id,
+			resolvedLayout: c
+		}, e.id) : /* @__PURE__ */ b(O, {
+			closeParent: r,
+			ctx: a,
+			depth: o,
+			item: e,
+			onRowClick: (e) => a.closeMenu({
+				event: e,
+				reason: "itemClick"
+			}),
+			resolvedLayout: c
+		}, e.id))
+	});
+}
+//#endregion
+export { j as MegaMenuPanelContent };

package/dist/s-mega-menu/mega-menu-slots.d.ts

@@ -0,0 +1,65 @@
+import { SMegaMenuItemState, SMegaMenuOwnerState, SMegaMenuPanelState, SMegaMenuTriggerState } from './types';
+/**
+ * Navigation root. Semantic `nav` markup is fixed by the default slot; consumers
+ * can replace the slot when their application needs a custom navigation root.
+ */
+export declare const SMegaMenuRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuOwnerState;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+/**
+ * Top-level trigger.
+ *
+ * While its panel is open an invisible `::after` bridge extends past the bottom
+ * edge so the pointer never leaves a hoverable element on its way down to the
+ * panel surface. See the close-intent explanation in `s-mega-menu.tsx`.
+ */
+export declare const SMegaMenuTrigger: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonBaseOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, keyof import('@mui/material').ButtonBaseOwnProps> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuTriggerState;
+}, {}, {}>;
+/** Chevron rendered by the default trigger content, rotated while the panel is open. */
+export declare const SMegaMenuTriggerArrow: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuTriggerState;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * Popover hosting the top-level panel.
+ *
+ * `pointerEvents: 'none'` on the popover root plus `pointerEvents: 'auto'` on the
+ * surface keeps the page underneath interactive — the non-modal pattern
+ * documented in the SPopover `hover-preview` example. Without it the modal root
+ * would swallow every pointer event outside the surface.
+ */
+export declare const SMegaMenuPopover: import('@emotion/styled').StyledComponent<Omit<import('../s-popover').SPopoverProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState?: SMegaMenuOwnerState;
+}, {}, {}>;
+/** Content container inside a panel surface. Also used for every flyout submenu. */
+export declare const SMegaMenuPanel: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuPanelState;
+}, {}, {}>;
+/** Column wrapper in the `columns` layout. */
+export declare const SMegaMenuColumn: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/** Non-interactive label of one column group. */
+export declare const SMegaMenuHeading: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/** Panel row. */
+export declare const SMegaMenuItemRoot: import('@emotion/styled').StyledComponent<Omit<import('../s-list-action-item').SListActionItemProps, "ref"> & import('react').RefAttributes<HTMLElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/**
+ * Positioned wrapper around a row plus its flyout submenu.
+ *
+ * While open, an invisible `::after` bridge spans the horizontal gap between the
+ * row and the submenu, flipped to the other side when collision detection moved
+ * the submenu left. Because the submenu is a DOM descendant of this wrapper, the
+ * pointer never leaves the wrapper on its way across — `pointerleave` simply
+ * does not fire.
+ */
+export declare const SMegaMenuSubmenuNode: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;
+/** Flyout submenu surface rendered next to a nested row. */
+export declare const SMegaMenuSubmenu: import('@emotion/styled').StyledComponent<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "elevation" | "square" | "sx" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    ownerState: SMegaMenuItemState;
+}, {}, {}>;

package/dist/s-mega-menu/mega-menu-slots.js

@@ -0,0 +1,232 @@
+import { actionHoverMedia as e, getFocusVisibleStyle as t, reducedMotionMedia as n } from "../theme/components/action-styles.js";
+import { SListActionItem as r } from "../s-list-action-item/s-list-action-item.js";
+import { SPopover as i } from "../s-popover/s-popover.js";
+import { Box as a, ButtonBase as o, Paper as s, Typography as c, styled as l } from "@mui/material";
+//#region lib/s-mega-menu/mega-menu-slots.tsx
+var u = 44, d = .75, f = l("nav", {
+	name: "SMegaMenu",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "nowrap",
+	gap: e.spacing(1.25),
+	minWidth: 0,
+	[e.breakpoints.down("lg")]: { gap: e.spacing(.75) }
+})), p = l(o, {
+	name: "SMegaMenu",
+	slot: "Trigger",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: r }) => ({
+	...r.typography.body1,
+	alignItems: "center",
+	backgroundColor: "transparent",
+	border: "1px solid transparent",
+	borderRadius: r.radius.md,
+	color: (r.vars ?? r).palette.text.primary,
+	display: "inline-flex",
+	gap: r.spacing(1.25),
+	minHeight: u,
+	minWidth: 0,
+	padding: r.spacing(.75, 1.5),
+	position: "relative",
+	textDecoration: "none",
+	transition: r.transitions.create([
+		"background-color",
+		"border-color",
+		"color"
+	], { duration: r.transitions.duration.shorter }),
+	whiteSpace: "nowrap",
+	[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.hover } },
+	"&.Mui-focusVisible": {
+		backgroundColor: (r.vars ?? r).palette.action.focus,
+		...t(r)
+	},
+	"&.Mui-disabled": { color: (r.vars ?? r).palette.text.disabled },
+	[r.breakpoints.down("lg")]: { padding: r.spacing(.75, 1) },
+	[n]: { transition: "none" },
+	variants: [{
+		props: ({ ownerState: e }) => e.open,
+		style: {
+			backgroundColor: (r.vars ?? r).palette.action.selected,
+			"&::after": {
+				content: "\"\"",
+				height: r.spacing(2.5),
+				left: 0,
+				position: "absolute",
+				top: "100%",
+				width: "100%"
+			},
+			[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.selected } }
+		}
+	}, {
+		props: ({ ownerState: e }) => e.active,
+		style: {
+			backgroundColor: (r.vars ?? r).palette.action.selected,
+			color: (r.vars ?? r).palette.text.primary,
+			fontWeight: r.typography.fontWeightMedium,
+			[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.selected } }
+		}
+	}]
+})), m = l("span", {
+	name: "SMegaMenu",
+	slot: "TriggerArrow",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	color: "inherit",
+	display: "inline-flex",
+	flexShrink: 0,
+	transition: e.transitions.create(["transform"], { duration: e.transitions.duration.shorter }),
+	[n]: { transition: "none" },
+	variants: [{
+		props: ({ ownerState: e }) => e.open,
+		style: { transform: "rotate(180deg)" }
+	}]
+})), h = l(i, {
+	name: "SMegaMenu",
+	slot: "Popover",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ pointerEvents: "none" }), g = l(a, {
+	name: "SMegaMenu",
+	slot: "Panel",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	minWidth: 0,
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.resolvedLayout === "list",
+			style: {
+				display: "block",
+				paddingBlock: e.spacing(d)
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.resolvedLayout === "columns",
+			style: {
+				alignItems: "start",
+				columnGap: e.spacing(5),
+				display: "grid",
+				gridAutoColumns: "1fr",
+				gridAutoFlow: "column",
+				padding: e.spacing(d)
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.scrollable,
+			style: {
+				maxHeight: "min(70vh, 620px)",
+				overflowY: "auto"
+			}
+		}
+	]
+})), _ = l(a, {
+	name: "SMegaMenu",
+	slot: "Column",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: e.spacing(d),
+	minWidth: 0
+})), v = l(c, {
+	name: "SMegaMenu",
+	slot: "Heading",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	...e.typography.subtitle1,
+	color: (e.vars ?? e).palette.text.primary,
+	margin: 0,
+	padding: e.spacing(1, 1.5, .5),
+	whiteSpace: "nowrap"
+})), y = l(r, {
+	name: "SMegaMenu",
+	slot: "Item",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.md,
+	flex: "0 0 auto",
+	paddingInline: e.spacing(1.5),
+	whiteSpace: "nowrap",
+	variants: [{
+		props: ({ ownerState: e }) => e.resolvedLayout === "list",
+		style: {
+			marginInline: e.spacing(d),
+			width: `calc(100% - ${e.spacing(d * 2)})`
+		}
+	}]
+})), b = l(a, {
+	name: "SMegaMenu",
+	slot: "SubmenuNode",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	minWidth: 0,
+	position: "relative",
+	variants: [{
+		props: ({ ownerState: e }) => e.open,
+		style: { "&::after": {
+			content: "\"\"",
+			height: "100%",
+			left: "100%",
+			position: "absolute",
+			top: 0,
+			width: e.spacing(1.5)
+		} }
+	}, {
+		props: ({ ownerState: e }) => e.open && e.side === "left",
+		style: { "&::after": {
+			left: "auto",
+			right: "100%"
+		} }
+	}]
+})), x = l(s, {
+	name: "SMegaMenu",
+	slot: "Submenu",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	backgroundImage: "none",
+	border: "1px solid",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.radius.md,
+	left: `calc(100% + ${e.spacing(1.5)})`,
+	minWidth: e.spacing(25),
+	opacity: 0,
+	overflow: "visible",
+	pointerEvents: "none",
+	position: "absolute",
+	top: 0,
+	transform: `translateX(${e.spacing(1)})`,
+	transition: e.transitions.create([
+		"opacity",
+		"transform",
+		"visibility"
+	], { duration: e.transitions.duration.shorter }),
+	visibility: "hidden",
+	width: "max-content",
+	zIndex: 1,
+	[n]: {
+		transform: "none",
+		transition: "none"
+	},
+	variants: [{
+		props: ({ ownerState: e }) => e.side === "left",
+		style: {
+			left: "auto",
+			right: `calc(100% + ${e.spacing(1.5)})`,
+			transform: `translateX(-${e.spacing(1)})`
+		}
+	}, {
+		props: ({ ownerState: e }) => e.open,
+		style: {
+			opacity: 1,
+			pointerEvents: "auto",
+			transform: "translateX(0)",
+			visibility: "visible",
+			zIndex: 2
+		}
+	}]
+}));
+//#endregion
+export { _ as SMegaMenuColumn, v as SMegaMenuHeading, y as SMegaMenuItemRoot, g as SMegaMenuPanel, h as SMegaMenuPopover, f as SMegaMenuRoot, x as SMegaMenuSubmenu, b as SMegaMenuSubmenuNode, p as SMegaMenuTrigger, m as SMegaMenuTriggerArrow };

package/dist/s-mega-menu/mega-menu-trigger.d.ts

@@ -0,0 +1,35 @@
+import { SMegaMenuItem, SMegaMenuOwnerState, SMegaMenuSlotProps, SMegaMenuSlots, SMegaMenuTriggerState } from './types';
+import * as React from 'react';
+export interface MegaMenuTriggerButtonProps<T = unknown> {
+    /** The trigger points at the active `href`. */
+    active: boolean;
+    /** The item has children, so the trigger owns a panel. */
+    hasPanel: boolean;
+    item: SMegaMenuItem<T>;
+    /** Default element used when the item has an `href`. */
+    linkComponent?: React.ElementType;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    onFocus: React.FocusEventHandler<HTMLElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    onPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave: React.PointerEventHandler<HTMLElement>;
+    /** The trigger's panel is open. */
+    open: boolean;
+    ownerState: SMegaMenuOwnerState<T>;
+    /** `id` of the panel surface, referenced by `aria-controls` while open. */
+    panelId: string;
+    /** Registers the rendered element so the menu can anchor to it and restore focus. */
+    registerRef: (id: string, node: HTMLElement | null) => void;
+    renderTrigger?: (item: SMegaMenuItem<T>, state: SMegaMenuTriggerState<T>) => React.ReactNode;
+    slotProps?: SMegaMenuSlotProps<T>;
+    slots?: SMegaMenuSlots;
+    /** Stable accessible relationship target for the panel's `aria-labelledby`. */
+    triggerId: string;
+}
+/**
+ * A single top-level trigger.
+ *
+ * Extracted from `SMegaMenu` so the per-item `useForkRef` stays a top-level hook
+ * instead of being called inside a render loop.
+ */
+export declare function MegaMenuTriggerButton<T>({ active, hasPanel, item, linkComponent, onClick, onFocus, onKeyDown, onPointerEnter, onPointerLeave, open, ownerState, panelId, registerRef, renderTrigger, slotProps, slots, triggerId, }: Readonly<MegaMenuTriggerButtonProps<T>>): React.JSX.Element;

package/dist/s-mega-menu/mega-menu-trigger.js

@@ -0,0 +1,49 @@
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { TRIGGER_ATTRIBUTE as t } from "./utils.js";
+import { SMegaMenuTrigger as n, SMegaMenuTriggerArrow as r } from "./mega-menu-slots.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { mergeSlotProps as s, useForkRef as c } from "@mui/material/utils";
+import l from "@mui/utils/appendOwnerState";
+import u from "@mui/icons-material/KeyboardArrowDown";
+//#region lib/s-mega-menu/mega-menu-trigger.tsx
+function d({ active: d, hasPanel: f, item: p, linkComponent: m, onClick: h, onFocus: g, onKeyDown: _, onPointerEnter: v, onPointerLeave: y, open: b, ownerState: x, panelId: S, registerRef: C, renderTrigger: w, slotProps: T, slots: E, triggerId: D }) {
+	let O = {
+		...x,
+		active: d,
+		hasPanel: f,
+		item: p,
+		open: b
+	}, k = E?.trigger ?? n, A = E?.triggerArrow ?? r, j = f || !p.href ? "button" : p.component ?? m ?? "a", { ref: M, ...N } = l(k, s(e(T?.trigger, O), {
+		[t]: "",
+		"aria-controls": b ? S : void 0,
+		"aria-current": d && !f ? "page" : void 0,
+		"aria-expanded": f ? b : void 0,
+		component: j,
+		disabled: p.disabled,
+		href: f ? void 0 : p.href,
+		id: D,
+		nativeButton: j === "button",
+		onClick: h,
+		onFocus: g,
+		onKeyDown: _,
+		onPointerEnter: v,
+		onPointerLeave: y,
+		rel: p.rel,
+		target: p.target
+	}), O), P = l(A, e(T?.triggerArrow, O) ?? {}, O), F = c(M, i.useCallback((e) => C(p.id, e), [p.id, C]));
+	return /* @__PURE__ */ a(k, {
+		...N,
+		ref: F,
+		children: w ? w(p, O) : /* @__PURE__ */ o(i.Fragment, { children: [
+			p.icon,
+			/* @__PURE__ */ a("span", { children: p.label }),
+			f ? /* @__PURE__ */ a(A, {
+				...P,
+				children: /* @__PURE__ */ a(u, { fontSize: "small" })
+			}) : null
+		] })
+	});
+}
+//#endregion
+export { d as MegaMenuTriggerButton };

package/dist/s-mega-menu/s-mega-menu.d.ts

@@ -0,0 +1,23 @@
+import { SMegaMenuProps } from './types';
+import * as React from 'react';
+interface SMegaMenuComponent {
+    <T = unknown>(props: SMegaMenuProps<T> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+    displayName?: string;
+}
+/**
+ * Multi-level navigation mega menu built on `SPopover`.
+ *
+ * The panel opens on hover, click/tap and keyboard, and — the point of
+ * the component — never closes while the pointer or focus travels between the
+ * trigger and the panel content:
+ *
+ * 1. An invisible `::after` bridge under an open trigger covers the vertical gap,
+ *    and a second bridge on every submenu wrapper covers the horizontal gap, so
+ *    `pointerleave` usually does not fire at all while crossing.
+ * 2. Any `pointerleave` that does fire only *schedules* a close after
+ *    `closeDelay`; entering the panel surface cancels the pending close.
+ * 3. Focus never closes the panel unless `relatedTarget` is outside both the
+ *    navigation root and the panel surface.
+ */
+export declare const SMegaMenu: SMegaMenuComponent;
+export default SMegaMenu;