@solostylist/ui-kit 2.0.1 → 2.0.2

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

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