@solostylist/ui-kit 2.0.1 → 2.0.2

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

@@ -0,0 +1,228 @@
+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 ee } from "../useControlled-DqNPBJNp.js";
+import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
+import { t as te } from "../mega-menu-trigger-BcOo8I5_.js";
+import { contains as o, focusAdjacentTrigger as s, getFirstRow as c } from "./utils.js";
+import { SMegaMenuPopover as ne, SMegaMenuRoot as re } from "./mega-menu-slots.js";
+import { MegaMenuPanelContent as ie } from "./mega-menu-panel.js";
+import * as l from "react";
+import { jsx as u, jsxs as ae } from "react/jsx-runtime";
+import { useMediaQuery as oe, useThemeProps as se } from "@mui/material";
+//#region lib/s-mega-menu/s-mega-menu.tsx
+var ce = 0;
+function d(e, t) {
+	return e.href === t || !!e.children?.some((e) => d(e, t));
+}
+function f(f, p) {
+	let { activeHref: m, closeDelay: h = ce, defaultOpenId: g = null, getIsActive: _, items: v, keepMounted: y = !1, layout: b = "auto", linkComponent: x, onOpenChange: S, openDelay: C = 0, openId: le, renderItem: ue, renderTrigger: de, slotProps: w, slots: T, sx: fe, ...E } = se({
+		props: f,
+		name: "SMegaMenu"
+	}), [D, O] = ee({
+		controlled: le,
+		default: g,
+		name: "SMegaMenu",
+		state: "openId"
+	}), [k, A] = l.useState(null), pe = oe("(prefers-reduced-motion: reduce)", { noSsr: !0 }), j = l.useId(), M = `${j}-panel`, N = l.useRef(null), P = l.useRef(/* @__PURE__ */ new Map()), F = l.useRef(void 0), I = l.useRef(void 0), L = l.useRef(!1), R = l.useRef(0), me = n(N, p), [z, he] = l.useState(g);
+	D != null && D !== z && he(D);
+	let B = v.find((e) => e.id === (D ?? z)) ?? null, V = B ? v.indexOf(B) : -1, ge = V >= 0 ? `${j}-trigger-${V}` : void 0, H = !!(D == null ? null : B)?.children?.length && k != null, U = {
+		activeHref: m,
+		closeDelay: h,
+		items: v,
+		keepMounted: y,
+		layout: b,
+		openDelay: C,
+		openId: D ?? null
+	};
+	l.useEffect(() => {}, [v, b]);
+	let W = l.useCallback(() => typeof document > "u" ? null : document.getElementById(M), [M]), G = l.useCallback(() => {
+		F.current &&= (clearTimeout(F.current), void 0), I.current &&= (clearTimeout(I.current), void 0);
+	}, []);
+	l.useEffect(() => G, [G]);
+	let K = r((e) => _ ? _(e) : !!(m && d(e, m))), q = r((e, t, n, r, i = !1) => {
+		G(), !(e.disabled || D === e.id) && (L.current = i, A(t), O(e.id), S?.(n, e.id, e, r));
+	}), J = r(({ event: e, focusTrigger: t = !1, reason: n }) => {
+		G(), D != null && (t && P.current.get(D)?.focus(), L.current = !1, O(null), S?.(e, null, null, n));
+	}), Y = r((e) => {
+		G(), I.current = setTimeout(() => J({
+			event: e,
+			reason: "pointerLeave"
+		}), h);
+	});
+	l.useEffect(() => {
+		if (D == null) return;
+		let e = P.current.get(D);
+		e && e !== k && A(e);
+	}, [k, D]), l.useEffect(() => {
+		H && L.current && (L.current = !1, c(W())?.focus());
+	}, [W, H]), l.useEffect(() => {
+		if (!H) return;
+		let e = (e) => {
+			o(W(), e.target) || o(N.current, e.target) || J({
+				event: e,
+				reason: "outsidePress"
+			});
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [
+		J,
+		W,
+		H
+	]);
+	let _e = l.useCallback((e, t) => {
+		t ? P.current.set(e, t) : P.current.delete(e);
+	}, []), X = r((e) => {
+		let t = e.relatedTarget;
+		!t || o(N.current, t) || o(W(), t) || J({
+			event: e,
+			reason: "blur"
+		});
+	}), ve = r((e, t) => {
+		if (e.disabled || t.pointerType === "touch" || Date.now() < R.current || !e.children?.length) return;
+		let n = t.currentTarget, r = t.nativeEvent;
+		if (G(), C > 0 && D == null) {
+			F.current = setTimeout(() => q(e, n, r, "triggerHover"), C);
+			return;
+		}
+		q(e, n, t, "triggerHover");
+	}), ye = r((e) => {
+		Date.now() >= R.current && (R.current = 0), e.pointerType !== "touch" && Y(e.nativeEvent);
+	}), be = r((e, t) => {
+		let n = !!e.children?.length;
+		if (n && D !== e.id) {
+			q(e, t.currentTarget, t, "triggerClick");
+			return;
+		}
+		if (n) {
+			R.current = Date.now() + 300, J({
+				event: t,
+				reason: "triggerClick"
+			});
+			return;
+		}
+		J({
+			event: t,
+			reason: "itemClick"
+		});
+	}), xe = r((e, t) => {
+		D != null && D !== e.id && J({
+			event: t,
+			reason: "triggerFocus"
+		});
+	}), Se = r((e, t) => {
+		let n = t.currentTarget, r = !!e.children?.length;
+		switch (t.key) {
+			case "ArrowDown":
+				if (!r) break;
+				t.preventDefault(), D === e.id ? c(W())?.focus() : q(e, n, t, "triggerKeyDown", !0);
+				break;
+			case "ArrowRight":
+				t.preventDefault(), s(N.current, n, 1);
+				break;
+			case "ArrowLeft":
+				t.preventDefault(), s(N.current, n, -1);
+				break;
+			case "Escape":
+				D != null && (t.preventDefault(), J({
+					event: t,
+					reason: "escapeKeyDown"
+				}));
+				break;
+			default: break;
+		}
+	}), Ce = r((e) => {
+		e.pointerType !== "touch" && G();
+	}), we = r((e) => {
+		e.pointerType !== "touch" && Y(e.nativeEvent);
+	}), Z = r((e) => {
+		e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), J({
+			event: e,
+			focusTrigger: !0,
+			reason: "escapeKeyDown"
+		}));
+	}), Te = {
+		closeMenu: J,
+		getIsActive: K,
+		keepMounted: y,
+		linkComponent: x,
+		ownerState: U,
+		renderItem: ue,
+		slotProps: w,
+		slots: T
+	}, Q = T?.root ?? re, $ = T?.popover ?? ne, { ref: Ee, sx: De, ...Oe } = i(Q, a(t(w?.root, U), {
+		...E,
+		onBlurCapture: X
+	}), U), ke = n(Ee, me), { slotProps: Ae, sx: je, ...Me } = t(w?.popover, U) ?? {}, Ne = a(Ae?.paper, {
+		"aria-labelledby": ge,
+		id: M,
+		onBlurCapture: X,
+		onKeyDown: Z,
+		onPointerEnter: Ce,
+		onPointerLeave: we,
+		sx: [(e) => ({
+			maxWidth: "92vw",
+			minWidth: e.spacing(25),
+			overflow: "visible",
+			pointerEvents: "auto",
+			width: "max-content"
+		})],
+		role: "region",
+		tabIndex: -1
+	}), Pe = i($, a(Me, {
+		anchorEl: k,
+		disableAutoFocus: !0,
+		disableEnforceFocus: !0,
+		disableRestoreFocus: !0,
+		disableScrollLock: !0,
+		hideBackdrop: !0,
+		keepMounted: y,
+		onClose: (e, t) => J({
+			event: e,
+			focusTrigger: t === "escapeKeyDown",
+			reason: t === "escapeKeyDown" ? "escapeKeyDown" : "outsidePress"
+		}),
+		placement: "bottom-start",
+		transitionDuration: pe ? 0 : void 0
+	}), U);
+	return /* @__PURE__ */ ae(Q, {
+		...Oe,
+		ref: ke,
+		sx: [...e(De), ...e(fe)],
+		children: [v.map((e, t) => /* @__PURE__ */ u(te, {
+			active: K(e),
+			hasPanel: !!e.children?.length,
+			item: e,
+			linkComponent: x,
+			onClick: (t) => be(e, t),
+			onFocus: (t) => xe(e, t),
+			onKeyDown: (t) => Se(e, t),
+			onPointerEnter: (t) => ve(e, t),
+			onPointerLeave: ye,
+			open: H && D === e.id,
+			ownerState: U,
+			panelId: M,
+			registerRef: _e,
+			renderTrigger: de,
+			slotProps: w,
+			slots: T,
+			triggerId: `${j}-trigger-${t}`
+		}, e.id)), /* @__PURE__ */ u($, {
+			...Pe,
+			open: H,
+			slotProps: { paper: Ne },
+			sx: [...e(je)],
+			children: B?.children?.length ? /* @__PURE__ */ u(ie, {
+				ctx: Te,
+				depth: 0,
+				items: B.children
+			}) : null
+		})]
+	});
+}
+var p = l.forwardRef(f);
+p.displayName = "SMegaMenu";
+//#endregion
+export { p as SMegaMenu, p as default };

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

@@ -0,0 +1,188 @@
+import { default as React } from 'react';
+import { BoxProps, ButtonBaseProps, PaperProps, TypographyProps } from '@mui/material';
+import { SListActionItemProps } from '../s-list-action-item/s-list-action-item';
+import { SPopoverProps } from '../s-popover/s-popover';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+/** Props shared by every node of the mega-menu tree. */
+export interface SMegaMenuItemBase<T = unknown> {
+    /** Arbitrary consumer payload, handed back to `renderTrigger`/`renderItem`. */
+    data?: T;
+    /** Secondary text rendered under the label on panel rows. */
+    description?: React.ReactNode;
+    /** Prevents activation and exposes the disabled state to assistive technology. */
+    disabled?: boolean;
+    /** Leading icon. Comes from the item data — the kit never maps labels to icons. */
+    icon?: React.ReactNode;
+    /** Stable identifier, used as the React key and as the open-panel key. */
+    id: string;
+    /** Visible label. */
+    label: React.ReactNode;
+}
+/**
+ * A single node of the mega-menu tree.
+ *
+ * At runtime, nodes with children are always disclosure buttons and `href` is
+ * used only by leaf links. Keeping this as an interface avoids the pathological
+ * type expansion produced by a recursive discriminated union combined with
+ * generic owner-state slot callbacks.
+ */
+export interface SMegaMenuItem<T = unknown> extends SMegaMenuItemBase<T> {
+    /** Nested navigation entries shown by this disclosure. */
+    children?: SMegaMenuItem<T>[];
+    /** Element used for this link, e.g. a router `Link`. Overrides `linkComponent`. */
+    component?: React.ElementType;
+    /** Leaf-link destination. Ignored when `children` is non-empty. */
+    href?: string;
+    /** Anchor relationship, forwarded when the entry renders as a link. */
+    rel?: string;
+    /** Anchor target, forwarded when the entry renders as a link. */
+    target?: string;
+}
+/**
+ * Panel layout.
+ *
+ * - `list` — one vertical list; rows that have children open a flyout submenu.
+ * - `columns` — a `title + children` column grid, for trees that are exactly two levels deep.
+ * - `auto` — picks `list` when the tree is flat or deeper than two levels, `columns` when it is
+ *   exactly two levels deep.
+ */
+export type SMegaMenuLayout = 'auto' | 'columns' | 'list';
+/** Layout actually rendered once `auto` has been resolved. */
+export type SMegaMenuResolvedLayout = Exclude<SMegaMenuLayout, 'auto'>;
+/** Side a flyout submenu is placed on after viewport collision detection. */
+export type SMegaMenuSide = 'left' | 'right';
+/** Why the open top-level disclosure changed. */
+export type SMegaMenuChangeReason = 'blur' | 'escapeKeyDown' | 'itemClick' | 'outsidePress' | 'pointerLeave' | 'triggerClick' | 'triggerFocus' | 'triggerHover' | 'triggerKeyDown';
+export interface SMegaMenuSlots {
+    /** Column wrapper in the `columns` layout. */
+    column?: React.ElementType;
+    /** Non-interactive column heading in the `columns` layout. */
+    heading?: React.ElementType;
+    /** Panel row. Defaults to `SListActionItem`. */
+    item?: React.ElementType;
+    /** Content container inside the popover surface (and inside every flyout submenu). */
+    panel?: React.ElementType;
+    /** Popover hosting the top-level panel. Defaults to `SPopover`. */
+    popover?: React.ElementType;
+    /** Navigation root. */
+    root?: React.ElementType;
+    /** Flyout submenu surface rendered next to a nested row. */
+    submenu?: React.ElementType;
+    /** Positioned wrapper around a row plus its flyout submenu. Carries the invisible hover bridge. */
+    submenuNode?: React.ElementType;
+    /** Top-level trigger. */
+    trigger?: React.ElementType;
+    /** Chevron rendered by the default top-level trigger. */
+    triggerArrow?: React.ElementType;
+}
+type SMegaMenuItemSlotProps = Omit<SListActionItemProps, 'component' | 'description' | 'disabled' | 'href' | 'icon' | 'label' | 'onClick' | 'rel' | 'selected' | 'target'>;
+type SMegaMenuTriggerSlotProps = Omit<ButtonBaseProps, 'children' | 'component' | 'disabled' | 'href' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onPointerEnter' | 'onPointerLeave'>;
+export interface SMegaMenuSlotProps<T = unknown> {
+    /** Props or state callback for the column slot. */
+    column?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SMegaMenuItemState<T>>;
+    /** Props or state callback for the non-interactive column heading slot. */
+    heading?: MuiOwnerStateSlotProps<Omit<TypographyProps, 'children'>, SMegaMenuItemState<T>>;
+    /** Props or state callback for the row slot. */
+    item?: MuiOwnerStateSlotProps<SMegaMenuItemSlotProps, SMegaMenuItemState<T>>;
+    /** Props or state callback for the panel slot. */
+    panel?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SMegaMenuPanelState<T>>;
+    /** Props or state callback for the popover slot. */
+    popover?: MuiOwnerStateSlotProps<Omit<SPopoverProps, 'children' | 'open'>, SMegaMenuOwnerState<T>>;
+    /** Props or state callback for the navigation root slot. */
+    root?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children' | 'component'>, SMegaMenuOwnerState<T>>;
+    /** Props or state callback for the flyout submenu surface slot. */
+    submenu?: MuiOwnerStateSlotProps<Omit<PaperProps, 'children'>, SMegaMenuItemState<T>>;
+    /** Props or state callback for the positioned submenu wrapper slot. */
+    submenuNode?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SMegaMenuItemState<T>>;
+    /** Props or state callback for the trigger slot. */
+    trigger?: MuiOwnerStateSlotProps<SMegaMenuTriggerSlotProps, SMegaMenuTriggerState<T>>;
+    /** Props or state callback for the default trigger's chevron slot. */
+    triggerArrow?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children' | 'component'>, SMegaMenuTriggerState<T>>;
+}
+/** Props for a multi-level navigation mega menu built on `SPopover`. */
+export interface SMegaMenuProps<T = unknown> extends Omit<BoxProps, 'children' | 'component'> {
+    /** Accessible name of the navigation landmark. */
+    'aria-label'?: string;
+    /** `href` considered current. Marks the matching trigger and row as the active entry. */
+    activeHref?: string;
+    /**
+     * Delay in ms before an open panel closes once the pointer leaves both trigger and panel.
+     * @default 0
+     */
+    closeDelay?: number;
+    /** Initially open top-level item id, for uncontrolled usage. */
+    defaultOpenId?: string | null;
+    /** Overrides `activeHref` matching with custom logic. */
+    getIsActive?: (item: SMegaMenuItem<T>) => boolean;
+    /** Top-level entries of the menu. */
+    items: SMegaMenuItem<T>[];
+    /** Keeps panel and submenu content mounted while closed. Defaults to unmounted, so closed panels add no tab stops. */
+    keepMounted?: boolean;
+    /** Panel layout. `auto` derives it from the shape of the tree. */
+    layout?: SMegaMenuLayout;
+    /** Default element used for every entry that has an `href`, e.g. a router `Link`. */
+    linkComponent?: React.ElementType;
+    /** Called whenever the open top-level item changes. */
+    onOpenChange?: (event: Event | React.SyntheticEvent | null, openId: string | null, item: SMegaMenuItem<T> | null, reason: SMegaMenuChangeReason) => void;
+    /** Delay in ms before hovering a trigger opens its panel. */
+    openDelay?: number;
+    /** Open top-level item id, for controlled usage. Pass `null` to close. */
+    openId?: string | null;
+    /** Renders the content of a panel row. Defaults to `item.label`. Return content, not a nested link. */
+    renderItem?: (item: SMegaMenuItem<T>, state: SMegaMenuItemState<T>) => React.ReactNode;
+    /** Renders the content of a top-level trigger. Defaults to the label plus a rotating chevron. */
+    renderTrigger?: (item: SMegaMenuItem<T>, state: SMegaMenuTriggerState<T>) => React.ReactNode;
+    /** Components used for internal structural slots. */
+    slots?: SMegaMenuSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SMegaMenuSlotProps<T>;
+}
+/** Styling and interaction state shared by every slot. */
+export interface SMegaMenuOwnerState<T = unknown> {
+    activeHref?: string;
+    closeDelay: number;
+    items: SMegaMenuItem<T>[];
+    keepMounted: boolean;
+    layout: SMegaMenuLayout;
+    openDelay: number;
+    /** Currently open top-level item id, or `null`. */
+    openId: string | null;
+}
+/** Owner state of a top-level trigger. */
+export interface SMegaMenuTriggerState<T = unknown> extends SMegaMenuOwnerState<T> {
+    /** The trigger points at the active `href`. */
+    active: boolean;
+    /** The item has children, so the trigger owns a panel. */
+    hasPanel: boolean;
+    item: SMegaMenuItem<T>;
+    /** The trigger's panel is open. */
+    open: boolean;
+}
+/** Owner state of a panel container. */
+export interface SMegaMenuPanelState<T = unknown> extends SMegaMenuOwnerState<T> {
+    /** Nesting level: `0` is the top-level panel. */
+    depth: number;
+    /** The panel scrolls instead of letting flyout submenus overflow it. */
+    scrollable: boolean;
+    /** Layout after `auto` has been resolved for this level. */
+    resolvedLayout: SMegaMenuResolvedLayout;
+}
+/** Owner state of a panel row and of its submenu wrapper/surface. */
+export interface SMegaMenuItemState<T = unknown> extends SMegaMenuOwnerState<T> {
+    /** The row points at the active `href`. */
+    active: boolean;
+    /** Nesting level of the row's list: `0` is the top-level panel. */
+    depth: number;
+    /** The row has children, so it owns a flyout submenu. */
+    hasChildren: boolean;
+    /** The row is a column heading in the `columns` layout. */
+    heading: boolean;
+    item: SMegaMenuItem<T>;
+    /** The row's flyout submenu is open. */
+    open: boolean;
+    /** Layout after `auto` has been resolved for the row's current panel. */
+    resolvedLayout: SMegaMenuResolvedLayout;
+    /** Side the flyout submenu is placed on. */
+    side: SMegaMenuSide;
+}
+export {};

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

@@ -0,0 +1,51 @@
+import { SMegaMenuItem, SMegaMenuLayout, SMegaMenuResolvedLayout, SMegaMenuSide } from './types';
+/**
+ * Width assumed for a flyout submenu that has not been measured yet (its content
+ * is unmounted while closed). Once the submenu opens, the real `offsetWidth` is
+ * measured in a layout effect and the side is recomputed before paint.
+ */
+export declare const SUBMENU_FALLBACK_WIDTH = 280;
+/** Viewport gutter kept clear when deciding whether a submenu still fits on the right. */
+export declare const VIEWPORT_EDGE_INSET = 16;
+/** Data attributes used for DOM-based keyboard traversal of the recursive tree. */
+export declare const ROW_ATTRIBUTE = "data-s-mega-menu-row";
+export declare const LIST_ATTRIBUTE = "data-s-mega-menu-list";
+export declare const NODE_ATTRIBUTE = "data-s-mega-menu-node";
+export declare const PANEL_ATTRIBUTE = "data-s-mega-menu-panel";
+export declare const TRIGGER_ATTRIBUTE = "data-s-mega-menu-trigger";
+/** `true` when at least one item carries children. */
+export declare function hasNestedChildren<T>(items: readonly SMegaMenuItem<T>[]): boolean;
+/** `true` when the tree bottoms out after `items` + one level of children. */
+export declare function isFinalTwoLevels<T>(items: readonly SMegaMenuItem<T>[]): boolean;
+/** `true` when `items` can render as non-interactive headings plus leaf-link columns. */
+export declare function supportsColumnsLayout<T>(items: readonly SMegaMenuItem<T>[]): boolean;
+/**
+ * Resolves the `auto` layout with the heuristic ported from the store: a flat
+ * tree renders as a plain list, a tree exactly two levels deep renders as a
+ * column grid, and anything deeper renders as a list of flyout submenus. An
+ * explicit but incompatible `columns` request safely falls back to `list`.
+ */
+export declare function resolveLayout<T>(items: readonly SMegaMenuItem<T>[], layout: SMegaMenuLayout): SMegaMenuResolvedLayout;
+/**
+ * Viewport collision flipping, ported from the store: a submenu stays on the
+ * right while its far edge still clears the viewport gutter, otherwise it flips
+ * to the left of its row.
+ */
+export declare function resolveSubmenuSide(node: HTMLElement | null, surface: HTMLElement | null): SMegaMenuSide;
+/** Rows that sit in the same list as `row`, in DOM order. */
+export declare function getSiblingRows(row: HTMLElement): HTMLElement[];
+/** Lists that sit in the same panel as `row`, in DOM order. Only `columns` panels have more than one. */
+export declare function getSiblingLists(row: HTMLElement): HTMLElement[];
+/**
+ * Moves focus to the first row of the adjacent list (column) inside the same panel.
+ * Returns `false` when the panel has no sibling list, so the caller can fall back.
+ */
+export declare function focusAdjacentList(row: HTMLElement, offset: number): boolean;
+/** First row of `container`, used when opening a panel or submenu from the keyboard. */
+export declare function getFirstRow(container: HTMLElement | null): HTMLElement | null;
+/** Moves focus to the previous/next top-level trigger inside `root`, wrapping around. */
+export declare function focusAdjacentTrigger(root: HTMLElement | null, current: HTMLElement, offset: number): void;
+/** Moves focus by `offset` inside `rows`, wrapping around at both ends. */
+export declare function focusRowByOffset(rows: HTMLElement[], current: HTMLElement, offset: number): void;
+/** `true` when `element` is inside `container`. Tolerates `null` on either side. */
+export declare function contains(container: Element | null | undefined, element: EventTarget | null): boolean;

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

@@ -0,0 +1,51 @@
+//#region lib/s-mega-menu/utils.ts
+var e = 280, t = 16, n = "data-s-mega-menu-row", r = "data-s-mega-menu-list", i = "data-s-mega-menu-node", a = "data-s-mega-menu-panel", o = "data-s-mega-menu-trigger", s = `[${n}]`, c = `[${r}]`, l = `[${a}]`, u = `:scope > ${s}, :scope > [${i}] > ${s}`;
+function d(e) {
+	return e.some((e) => !!e.children?.length);
+}
+function f(e) {
+	return e.every((e) => !e.children?.some((e) => e.children?.length));
+}
+function p(e) {
+	return d(e) && f(e);
+}
+function m(e, t) {
+	return t === "list" ? "list" : p(e) ? "columns" : "list";
+}
+function h(e, t) {
+	if (!e || !t || typeof window > "u") return "right";
+	let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = r.width, a = i > 280 / 2 ? i : 280, o = r.left >= n.right ? r.left - n.right : Math.max(0, n.left - r.right);
+	return n.right + o + a <= window.innerWidth - 16 ? "right" : "left";
+}
+function g(e) {
+	let t = e.closest(c);
+	return t ? Array.from(t.querySelectorAll(u)) : [e];
+}
+function _(e) {
+	let t = e.closest(l);
+	return t ? Array.from(t.querySelectorAll(`:scope > ${c}`)) : [];
+}
+function v(e, t) {
+	let n = _(e), r = e.closest(c);
+	if (n.length < 2 || !r) return !1;
+	let i = n.indexOf(r);
+	if (i === -1) return !1;
+	let a = y(n[(i + t + n.length) % n.length]);
+	return a?.focus(), !!a;
+}
+function y(e) {
+	return e?.querySelector(s) ?? null;
+}
+function b(e, t, n) {
+	e && x(Array.from(e.querySelectorAll(`[${o}]`)), t, n);
+}
+function x(e, t, n) {
+	if (e.length === 0) return;
+	let r = e.indexOf(t);
+	e[r === -1 ? 0 : (r + n + e.length) % e.length]?.focus();
+}
+function S(e, t) {
+	return !!(e && t instanceof Node && e.contains(t));
+}
+//#endregion
+export { r as LIST_ATTRIBUTE, i as NODE_ATTRIBUTE, a as PANEL_ATTRIBUTE, n as ROW_ATTRIBUTE, e as SUBMENU_FALLBACK_WIDTH, o as TRIGGER_ATTRIBUTE, t as VIEWPORT_EDGE_INSET, S as contains, v as focusAdjacentList, b as focusAdjacentTrigger, x as focusRowByOffset, y as getFirstRow, _ as getSiblingLists, g as getSiblingRows, d as hasNestedChildren, f as isFinalTwoLevels, m as resolveLayout, h as resolveSubmenuSide, p as supportsColumnsLayout };

package/dist/s-mobile-dock/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SMobileDock } from './s-mobile-dock';
+export type { SMobileDockItem, SMobileDockItemState, SMobileDockLabelVisibility, SMobileDockOwnerState, SMobileDockProps, SMobileDockSlotProps, SMobileDockSlots, } from './s-mobile-dock';
+export type {} from '../theme/component-augmentation';

package/dist/s-mobile-dock/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../s-mobile-dock-8F3UWAb8.js";
+export { e as SMobileDock, e as default };

package/dist/s-mobile-dock/s-mobile-dock.d.ts

@@ -0,0 +1,96 @@
+import { BadgeProps } from '@mui/material/Badge';
+import { BottomNavigationProps } from '@mui/material/BottomNavigation';
+import { BottomNavigationActionProps } from '@mui/material/BottomNavigationAction';
+import { BoxProps } from '@mui/material/Box';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+interface SMobileDockItemBase<Value extends string> {
+    /** Badge content rendered over the icon. Omit for no badge. */
+    badge?: React.ReactNode;
+    /** Non-native link component used for this destination. Overrides `linkComponent`. */
+    component?: React.ElementType;
+    /** Disables the item. */
+    disabled?: boolean;
+    /** Link destination; renders an anchor when no `component` is given. */
+    href?: string;
+    /** Item icon. */
+    icon: React.ReactNode;
+    /** Called when the item is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Anchor relationship forwarded to link destinations. */
+    rel?: string;
+    /** Anchor target forwarded to link destinations. */
+    target?: React.HTMLAttributeAnchorTarget;
+    /** Stable value used for selection and as the React key. */
+    value: Value;
+}
+type SMobileDockItemAccessibleName = {
+    /** Accessible name. Overrides the visible label for assistive technology. */
+    ariaLabel: string;
+    /** Optional visible label. */
+    label?: React.ReactNode;
+} | {
+    /** Optional accessible-name override. */
+    ariaLabel?: string;
+    /** Visible label used as the accessible name. */
+    label: React.ReactNode;
+};
+/** A single dock destination. Navigation and copy stay with the consumer. */
+export type SMobileDockItem<Value extends string = string> = SMobileDockItemBase<Value> & SMobileDockItemAccessibleName;
+export type SMobileDockLabelVisibility = 'always' | 'never';
+type SMobileDockAccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+/** Props for a semantic bottom navigation dock built on MUI BottomNavigation. */
+export type SMobileDockProps<Value extends string = string> = Omit<BottomNavigationProps, 'aria-label' | 'aria-labelledby' | 'children' | 'component' | 'defaultValue' | 'onChange' | 'showLabels' | 'value'> & SMobileDockAccessibleName & {
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: Value;
+    /** Dock destinations. */
+    items: readonly SMobileDockItem<Value>[];
+    /** Controls whether destination labels are visually displayed. @default 'always' */
+    labelVisibility?: SMobileDockLabelVisibility;
+    /** Default non-native element used for destinations with an `href`, e.g. a router link. */
+    linkComponent?: React.ElementType;
+    /** Called with the value of the newly activated destination. */
+    onChange?: (event: React.SyntheticEvent, value: Value) => void;
+    /** Components used for internal structural slots. */
+    slots?: SMobileDockSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SMobileDockSlotProps<Value>;
+    /** Selected value for controlled usage. */
+    value?: Value;
+};
+export type SMobileDockOwnerState<Value extends string = string> = Omit<SMobileDockProps<Value>, 'labelVisibility' | 'slotProps' | 'slots' | 'value'> & {
+    labelVisibility: SMobileDockLabelVisibility;
+    value: Value | null;
+};
+export type SMobileDockItemState<Value extends string = string> = SMobileDockOwnerState<Value> & {
+    item: SMobileDockItem<Value>;
+    selected: boolean;
+};
+type RootSlotProps<Props, Value extends string> = MuiOwnerStateSlotProps<Props, SMobileDockOwnerState<Value>>;
+type ItemSlotProps<Props, Value extends string> = MuiOwnerStateSlotProps<Props, SMobileDockItemState<Value>>;
+export interface SMobileDockSlots {
+    action?: React.ElementType;
+    badge?: React.ElementType;
+    icon?: React.ElementType;
+    label?: React.ElementType;
+    root?: React.ElementType;
+}
+export interface SMobileDockSlotProps<Value extends string = string> {
+    action?: ItemSlotProps<Omit<BottomNavigationActionProps, 'icon' | 'label' | 'slots' | 'slotProps' | 'value'>, Value>;
+    badge?: ItemSlotProps<Omit<BadgeProps, 'children'>, Value>;
+    icon?: ItemSlotProps<Omit<BoxProps, 'children'>, Value>;
+    label?: ItemSlotProps<React.HTMLAttributes<HTMLSpanElement>, Value>;
+    root?: RootSlotProps<Omit<BottomNavigationProps, 'children' | 'component' | 'defaultValue' | 'onChange' | 'showLabels' | 'value'>, Value>;
+}
+interface SMobileDockComponent {
+    <Value extends string = string>(props: SMobileDockProps<Value> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+    displayName?: string;
+}
+export declare const SMobileDock: SMobileDockComponent;
+export default SMobileDock;

package/dist/s-mobile-dock/s-mobile-dock.js

@@ -0,0 +1,2 @@
+import { t as e } from "../s-mobile-dock-8F3UWAb8.js";
+export { e as SMobileDock, e as default };