@solostylist/ui-kit 2.0.1 → 2.0.2

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

@@ -0,0 +1,615 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { g as i } from "./createTheme-xB2Em0Na.js";
+import { t as a } from "./generateUtilityClass-PAIOm1jC.js";
+import { t as o } from "./clsx-DGZSe4Nt.js";
+import { t as s } from "./Box-9oeZgA1U.js";
+import { t as c } from "./generateUtilityClasses-DvX505Gy.js";
+import { t as l } from "./styled-Bog8QCl3.js";
+import { t as u } from "./useThemeProps-Dw9dmKyT.js";
+import { t as d } from "./memoTheme-qFyKAk7y.js";
+import { resolveOwnerStateSlotProps as f } from "./utils/slots.js";
+import { t as p } from "./useForkRef-BuNFTXxE.js";
+import { t as m } from "./useEventCallback-DGCsaRIu.js";
+import { t as h } from "./ButtonBase-DovDC6-1.js";
+import { t as g } from "./appendOwnerState-CFQTq3pb.js";
+import { t as _ } from "./useSlot-BG8ReOxN.js";
+import { actionHoverMedia as v, getFocusVisibleStyle as y, reducedMotionMedia as b } from "./theme/components/action-styles.js";
+import { t as x } from "./capitalize-C0baBJCm.js";
+import { t as S } from "./createSimplePaletteValueFilter-DFvyXHoZ.js";
+import { t as C } from "./unsupportedProp-whMV_uOi.js";
+import { t as w } from "./useControlled-DqNPBJNp.js";
+import { t as T } from "./mergeSlotProps-DC8r4QzS.js";
+import * as E from "react";
+import { createElement as D } from "react";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { visuallyHidden as A } from "@mui/utils";
+//#region ../../node_modules/@mui/utils/usePreviousProps/usePreviousProps.mjs
+function j(e) {
+	let t = E.useRef({});
+	return E.useEffect(() => {
+		t.current = e;
+	}), t.current;
+}
+//#endregion
+//#region ../../node_modules/@mui/material/Badge/useBadge.mjs
+var M = /* @__PURE__ */ e(t(), 1);
+function N(e) {
+	let { badgeContent: t, invisible: n = !1, max: r = 99, showZero: i = !1 } = e, a = j({
+		badgeContent: t,
+		max: r
+	}), o = n;
+	n === !1 && t === 0 && !i && (o = !0);
+	let { badgeContent: s, max: c = r } = o ? a : e, l = s && Number(s) > c ? `${c}+` : s;
+	return {
+		badgeContent: s,
+		invisible: o,
+		max: c,
+		displayValue: l
+	};
+}
+//#endregion
+//#region ../../node_modules/@mui/material/Badge/badgeClasses.mjs
+function P(e) {
+	return a("MuiBadge", e);
+}
+var F = c("MuiBadge", [
+	"root",
+	"badge",
+	"dot",
+	"standard",
+	"anchorOriginTopRight",
+	"anchorOriginBottomRight",
+	"anchorOriginTopLeft",
+	"anchorOriginBottomLeft",
+	"invisible",
+	"colorError",
+	"colorInfo",
+	"colorPrimary",
+	"colorSecondary",
+	"colorSuccess",
+	"colorWarning",
+	"overlapRectangular",
+	"overlapCircular",
+	"anchorOriginTopLeftCircular",
+	"anchorOriginTopLeftRectangular",
+	"anchorOriginTopRightCircular",
+	"anchorOriginTopRightRectangular",
+	"anchorOriginBottomLeftCircular",
+	"anchorOriginBottomLeftRectangular",
+	"anchorOriginBottomRightCircular",
+	"anchorOriginBottomRightRectangular"
+]), I = 10, L = 4, R = (e) => {
+	let { color: t, anchorOrigin: r, invisible: i, overlap: a, variant: o, classes: s = {} } = e;
+	return n({
+		root: ["root"],
+		badge: [
+			"badge",
+			o,
+			i && "invisible",
+			`anchorOrigin${x(r.vertical)}${x(r.horizontal)}`,
+			`anchorOrigin${x(r.vertical)}${x(r.horizontal)}${x(a)}`,
+			`overlap${x(a)}`,
+			t !== "default" && `color${x(t)}`
+		]
+	}, P, s);
+}, ee = l("span", {
+	name: "MuiBadge",
+	slot: "Root"
+})({
+	position: "relative",
+	display: "inline-flex",
+	verticalAlign: "middle",
+	flexShrink: 0
+}), z = l("span", {
+	name: "MuiBadge",
+	slot: "Badge",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.badge,
+			t[n.variant],
+			t[`anchorOrigin${x(n.anchorOrigin.vertical)}${x(n.anchorOrigin.horizontal)}${x(n.overlap)}`],
+			n.color !== "default" && t[`color${x(n.color)}`],
+			n.invisible && t.invisible
+		];
+	}
+})(d(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "row",
+	flexWrap: "wrap",
+	justifyContent: "center",
+	alignContent: "center",
+	alignItems: "center",
+	position: "absolute",
+	boxSizing: "border-box",
+	fontFamily: e.typography.fontFamily,
+	fontWeight: e.typography.fontWeightMedium,
+	fontSize: e.typography.pxToRem(12),
+	minWidth: I * 2,
+	lineHeight: 1,
+	padding: "0 6px",
+	height: I * 2,
+	borderRadius: I,
+	zIndex: 1,
+	"@media (forced-colors: active)": { border: "1px solid ButtonBorder" },
+	transition: e.transitions.create("transform", {
+		easing: e.transitions.easing.easeInOut,
+		duration: e.transitions.duration.enteringScreen
+	}),
+	variants: [
+		...Object.entries(e.palette).filter(S(["contrastText"])).map(([t]) => ({
+			props: { color: t },
+			style: {
+				backgroundColor: (e.vars || e).palette[t].main,
+				color: (e.vars || e).palette[t].contrastText
+			}
+		})),
+		{
+			props: { variant: "dot" },
+			style: {
+				borderRadius: L,
+				height: L * 2,
+				minWidth: L * 2,
+				padding: 0
+			}
+		},
+		{
+			props: { invisible: !0 },
+			style: { transition: e.transitions.create("transform", {
+				easing: e.transitions.easing.easeInOut,
+				duration: e.transitions.duration.leavingScreen
+			}) }
+		},
+		{ style: ({ ownerState: e }) => {
+			let { vertical: t, horizontal: n } = e.anchorOrigin, r = e.overlap === "circular" ? "14%" : 0;
+			return {
+				"--Badge-translateX": n === "right" ? "50%" : "-50%",
+				"--Badge-translateY": t === "top" ? "-50%" : "50%",
+				top: t === "top" ? r : "initial",
+				bottom: t === "bottom" ? r : "initial",
+				right: n === "right" ? r : "initial",
+				left: n === "left" ? r : "initial",
+				transform: "scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))",
+				transformOrigin: `${n === "right" ? "100%" : "0%"} ${t === "top" ? "0%" : "100%"}`,
+				[`&.${F.invisible}`]: { transform: "scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))" }
+			};
+		} }
+	]
+})));
+function B(e) {
+	return {
+		vertical: e?.vertical ?? "top",
+		horizontal: e?.horizontal ?? "right"
+	};
+}
+var V = /* @__PURE__ */ E.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiBadge"
+	}), { anchorOrigin: i, className: a, classes: s, component: c, children: l, overlap: u = "rectangular", color: d = "default", invisible: f = !1, max: p = 99, badgeContent: m, slots: h, slotProps: g, showZero: v = !1, variant: y = "standard", ...b } = n, { badgeContent: x, invisible: S, max: C, displayValue: w } = N({
+		max: p,
+		invisible: f,
+		badgeContent: m,
+		showZero: v
+	}), T = j({
+		anchorOrigin: B(i),
+		color: d,
+		overlap: u,
+		variant: y,
+		badgeContent: m
+	}), E = S || x == null && y !== "dot", { color: D = d, overlap: A = u, anchorOrigin: M, variant: P = y } = E ? T : n, F = B(M), I = P === "dot" ? void 0 : w, L = {
+		...n,
+		badgeContent: x,
+		invisible: E,
+		max: C,
+		displayValue: I,
+		showZero: v,
+		anchorOrigin: F,
+		color: D,
+		overlap: A,
+		variant: P
+	}, V = R(L), H = {
+		slots: h,
+		slotProps: g
+	}, [U, W] = _("root", {
+		elementType: ee,
+		externalForwardedProps: {
+			...H,
+			...b
+		},
+		ownerState: L,
+		className: o(V.root, a),
+		ref: t,
+		additionalProps: { as: c }
+	}), [G, K] = _("badge", {
+		elementType: z,
+		externalForwardedProps: H,
+		ownerState: L,
+		className: V.badge
+	});
+	return /* @__PURE__ */ k(U, {
+		...W,
+		children: [l, /* @__PURE__ */ O(G, {
+			...K,
+			children: I
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (V.propTypes = {
+	anchorOrigin: M.default.shape({
+		horizontal: M.default.oneOf(["left", "right"]),
+		vertical: M.default.oneOf(["bottom", "top"])
+	}),
+	badgeContent: M.default.node,
+	children: M.default.node,
+	classes: M.default.object,
+	className: M.default.string,
+	color: M.default.oneOfType([M.default.oneOf([
+		"default",
+		"primary",
+		"secondary",
+		"error",
+		"info",
+		"success",
+		"warning"
+	]), M.default.string]),
+	component: M.default.elementType,
+	invisible: M.default.bool,
+	max: M.default.number,
+	overlap: M.default.oneOf(["circular", "rectangular"]),
+	showZero: M.default.bool,
+	slotProps: M.default.shape({
+		badge: M.default.oneOfType([M.default.func, M.default.object]),
+		root: M.default.oneOfType([M.default.func, M.default.object])
+	}),
+	slots: M.default.shape({
+		badge: M.default.elementType,
+		root: M.default.elementType
+	}),
+	sx: M.default.oneOfType([
+		M.default.arrayOf(M.default.oneOfType([
+			M.default.func,
+			M.default.object,
+			M.default.bool
+		])),
+		M.default.func,
+		M.default.object
+	]),
+	variant: M.default.oneOfType([M.default.oneOf(["dot", "standard"]), M.default.string])
+});
+//#endregion
+//#region ../../node_modules/@mui/material/BottomNavigation/bottomNavigationClasses.mjs
+var H = i();
+function U(e) {
+	return a("MuiBottomNavigation", e);
+}
+c("MuiBottomNavigation", ["root"]);
+//#endregion
+//#region ../../node_modules/@mui/material/BottomNavigation/BottomNavigation.mjs
+var W = (e) => {
+	let { classes: t } = e;
+	return n({ root: ["root"] }, U, t);
+}, G = l("div", {
+	name: "MuiBottomNavigation",
+	slot: "Root"
+})(d(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "center",
+	height: 56,
+	backgroundColor: (e.vars || e).palette.background.paper
+}))), K = /* @__PURE__ */ E.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiBottomNavigation"
+	}), { children: i, className: a, component: s = "div", onChange: c, showLabels: l = !1, value: u, ...d } = n, f = {
+		...n,
+		component: s,
+		showLabels: l
+	};
+	return /* @__PURE__ */ O(G, {
+		as: s,
+		className: o(W(f).root, a),
+		ref: t,
+		ownerState: f,
+		...d,
+		children: E.Children.map(i, (e, t) => {
+			if (!/* @__PURE__ */ E.isValidElement(e)) return null;
+			process.env.NODE_ENV !== "production" && (0, H.isFragment)(e) && console.error(["MUI: The BottomNavigation component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
+			let n = e.props.value === void 0 ? t : e.props.value;
+			return /* @__PURE__ */ E.cloneElement(e, {
+				selected: n === u,
+				showLabel: e.props.showLabel === void 0 ? l : e.props.showLabel,
+				value: n,
+				onChange: c
+			});
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (K.propTypes = {
+	children: M.default.node,
+	classes: M.default.object,
+	className: M.default.string,
+	component: M.default.elementType,
+	onChange: M.default.func,
+	showLabels: M.default.bool,
+	sx: M.default.oneOfType([
+		M.default.arrayOf(M.default.oneOfType([
+			M.default.func,
+			M.default.object,
+			M.default.bool
+		])),
+		M.default.func,
+		M.default.object
+	]),
+	value: M.default.any
+});
+//#endregion
+//#region ../../node_modules/@mui/material/BottomNavigationAction/bottomNavigationActionClasses.mjs
+function q(e) {
+	return a("MuiBottomNavigationAction", e);
+}
+var J = c("MuiBottomNavigationAction", [
+	"root",
+	"iconOnly",
+	"selected",
+	"label"
+]), Y = (e) => {
+	let { classes: t, showLabel: r, selected: i } = e;
+	return n({
+		root: [
+			"root",
+			!r && !i && "iconOnly",
+			i && "selected"
+		],
+		label: [
+			"label",
+			!r && !i && "iconOnly",
+			i && "selected"
+		]
+	}, q, t);
+}, X = l(h, {
+	name: "MuiBottomNavigationAction",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [t.root, !n.showLabel && !n.selected && t.iconOnly];
+	}
+})(d(({ theme: e }) => ({
+	transition: e.transitions.create(["color", "padding-top"], { duration: e.transitions.duration.short }),
+	padding: "0px 12px",
+	minWidth: 80,
+	maxWidth: 168,
+	color: (e.vars || e).palette.text.secondary,
+	flexDirection: "column",
+	flex: "1",
+	[`&.${J.selected}`]: { color: (e.vars || e).palette.primary.main },
+	variants: [{
+		props: ({ showLabel: e, selected: t }) => !e && !t,
+		style: { paddingTop: 14 }
+	}, {
+		props: ({ showLabel: e, selected: t, label: n }) => !e && !t && !n,
+		style: { paddingTop: 0 }
+	}]
+}))), te = l("span", {
+	name: "MuiBottomNavigationAction",
+	slot: "Label"
+})(d(({ theme: e }) => ({
+	fontFamily: e.typography.fontFamily,
+	fontSize: e.typography.pxToRem(12),
+	opacity: 1,
+	transition: "font-size 0.2s, opacity 0.2s",
+	transitionDelay: "0.1s",
+	[`&.${J.selected}`]: { fontSize: e.typography.pxToRem(14) },
+	variants: [{
+		props: ({ showLabel: e, selected: t }) => !e && !t,
+		style: {
+			opacity: 0,
+			transitionDelay: "0s"
+		}
+	}]
+}))), Z = /* @__PURE__ */ E.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiBottomNavigationAction"
+	}), { className: i, icon: a, label: s, onChange: c, onClick: l, selected: u, showLabel: d, value: f, slots: p = {}, slotProps: m = {}, ...h } = n, g = n, v = Y(g), y = (e) => {
+		c && c(e, f), l && l(e);
+	}, b = {
+		slots: p,
+		slotProps: m
+	}, [x, S] = _("root", {
+		elementType: X,
+		externalForwardedProps: {
+			...b,
+			...h
+		},
+		shouldForwardComponentProp: !0,
+		ownerState: g,
+		ref: t,
+		className: o(v.root, i),
+		additionalProps: {
+			internalNativeButton: !0,
+			focusRipple: !0
+		},
+		getSlotProps: (e) => ({
+			...e,
+			onClick: (t) => {
+				e.onClick?.(t), y(t);
+			}
+		})
+	}), [C, w] = _("label", {
+		elementType: te,
+		externalForwardedProps: b,
+		ownerState: g,
+		className: v.label
+	});
+	return /* @__PURE__ */ k(x, {
+		...S,
+		children: [a, /* @__PURE__ */ O(C, {
+			...w,
+			children: s
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (Z.propTypes = {
+	children: C,
+	classes: M.default.object,
+	className: M.default.string,
+	icon: M.default.node,
+	label: M.default.node,
+	onChange: M.default.func,
+	onClick: M.default.func,
+	showLabel: M.default.bool,
+	slotProps: M.default.shape({
+		label: M.default.oneOfType([M.default.func, M.default.object]),
+		root: M.default.oneOfType([M.default.func, M.default.object])
+	}),
+	slots: M.default.shape({
+		label: M.default.elementType,
+		root: M.default.elementType
+	}),
+	sx: M.default.oneOfType([
+		M.default.arrayOf(M.default.oneOfType([
+			M.default.func,
+			M.default.object,
+			M.default.bool
+		])),
+		M.default.func,
+		M.default.object
+	]),
+	value: M.default.any
+});
+//#endregion
+//#region lib/s-mobile-dock/s-mobile-dock.tsx
+var ne = 416, Q = 44, re = l(K, {
+	name: "SMobileDock",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	border: `1px solid ${(e.vars ?? e).palette.divider}`,
+	borderRadius: e.radius.full,
+	boxShadow: e.shadows[8],
+	gap: e.spacing(.5),
+	height: "auto",
+	justifyContent: "space-around",
+	marginInline: "auto",
+	maxWidth: `calc(100% - ${e.spacing(3)})`,
+	padding: e.spacing(.75),
+	paddingBottom: `calc(${e.spacing(.75)} + env(safe-area-inset-bottom))`,
+	width: ne
+})), ie = l(Z, {
+	name: "SMobileDock",
+	slot: "Action"
+})(({ theme: e, ownerState: t }) => ({
+	borderRadius: e.radius.full,
+	color: (e.vars ?? e).palette.text.secondary,
+	gap: e.spacing(.5),
+	minHeight: Q,
+	minWidth: Q,
+	padding: e.spacing(.75, 1),
+	transition: e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
+	[`& .${J.label}`]: {
+		fontSize: e.typography.body2.fontSize,
+		lineHeight: e.typography.body2.lineHeight,
+		[`&.${J.selected}`]: { fontSize: e.typography.body2.fontSize },
+		...t.labelVisibility === "never" && A
+	},
+	[`&.${J.selected}`]: {
+		backgroundColor: e.alpha((e.vars ?? e).palette.primary.main, (e.vars ?? e).palette.action.selectedOpacity),
+		color: (e.vars ?? e).palette.primary.main
+	},
+	"&.Mui-disabled": { color: (e.vars ?? e).palette.action.disabled },
+	[`&.${J.selected}.Mui-disabled`]: { backgroundColor: (e.vars ?? e).palette.action.disabledBackground },
+	"&.Mui-focusVisible": y(e),
+	[v]: {
+		"&:hover": {
+			backgroundColor: (e.vars ?? e).palette.action.hover,
+			color: (e.vars ?? e).palette.text.primary
+		},
+		[`&.${J.selected}:hover`]: {
+			backgroundColor: e.alpha((e.vars ?? e).palette.primary.main, Math.min(e.palette.action.selectedOpacity + e.palette.action.hoverOpacity, 1)),
+			color: (e.vars ?? e).palette.primary.main
+		}
+	},
+	[b]: { transition: "none" }
+})), ae = l(s, {
+	name: "SMobileDock",
+	slot: "Icon"
+})({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center"
+}), oe = l(V, {
+	name: "SMobileDock",
+	slot: "Badge"
+})({}), se = l("span", {
+	name: "SMobileDock",
+	slot: "Label"
+})({});
+function ce(e, t) {
+	let n = u({
+		props: e,
+		name: "SMobileDock"
+	}), { defaultValue: r, items: i, labelVisibility: a = "always", linkComponent: o, onChange: s, slotProps: c, slots: l, value: d, ...h } = n, [_, v] = w({
+		controlled: d,
+		default: r ?? null,
+		name: "SMobileDock",
+		state: "value"
+	}), y = {
+		...n,
+		labelVisibility: a,
+		value: _
+	}, b = l?.root ?? re, x = l?.action ?? ie, S = l?.icon ?? ae, C = l?.badge ?? oe, E = l?.label ?? se, k = m((e, t) => {
+		v(t), s?.(e, t);
+	}), { ref: A, ...j } = g(b, T(f(c?.root, y), {
+		...h,
+		onChange: k,
+		showLabels: !0,
+		value: _
+	}), y), M = p(t, A);
+	return /* @__PURE__ */ O(b, {
+		...j,
+		ref: M,
+		component: "nav",
+		children: i.map((e) => {
+			let t = e.value === _, n = {
+				...y,
+				item: e,
+				selected: t
+			}, r = e.component ?? (e.href == null ? "button" : o ?? "a"), i = g(x, T(f(c?.action, n), {
+				"aria-current": t ? "page" : void 0,
+				"aria-label": e.ariaLabel,
+				component: r,
+				disabled: e.disabled,
+				href: e.disabled ? void 0 : e.href,
+				nativeButton: r === "button",
+				onClick: e.onClick,
+				rel: e.rel,
+				target: e.target
+			}), n), a = g(S, f(c?.icon, n) ?? {}, n), s = g(C, f(c?.badge, n) ?? {}, n), l = g(E, f(c?.label, n) ?? {}, n);
+			return /* @__PURE__ */ D(x, {
+				...i,
+				key: e.value,
+				icon: /* @__PURE__ */ O(S, {
+					...a,
+					children: e.badge == null ? e.icon : /* @__PURE__ */ O(C, {
+						badgeContent: e.badge,
+						color: "error",
+						...s,
+						children: e.icon
+					})
+				}),
+				label: e.label,
+				slotProps: { label: l },
+				slots: { label: E },
+				value: e.value
+			});
+		})
+	});
+}
+var $ = E.forwardRef(ce);
+$.displayName = "SMobileDock";
+//#endregion
+export { $ as t };

package/dist/s-nav-item/index.d.ts

@@ -1,3 +1,3 @@
-export { SNavItem, type SNavItemOwnerState, type SNavItemButtonProps, type SNavItemProps, type SNavItemSlotProps, type SNavItemSlots, } from './s-nav-item';
+export { SNavItem, type SNavItemOwnerState, type SNavItemProps, type SNavItemRowProps, type SNavItemSlotProps, type SNavItemSlots, } from './s-nav-item';
 export { default } from './s-nav-item';
 export type {} from '../theme/component-augmentation';

package/dist/s-nav-item/s-nav-item.d.ts

@@ -1,4 +1,5 @@
-import { BoxProps, ListItemButtonProps, TypographyProps } from '@mui/material';
+import { BoxProps, TypographyProps } from '@mui/material';
+import { SListActionItemProps } from '../s-list-action-item/s-list-action-item';
 import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
 export interface SNavItemOwnerState extends SNavItemProps {
@@ -6,39 +7,57 @@ export interface SNavItemOwnerState extends SNavItemProps {
     selected: boolean;
 }
 type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SNavItemOwnerState>;
+/** Row props, mirroring the primitive the nav item is built on. */
+export type SNavItemRowProps = Omit<SListActionItemProps, 'label'>;
 export interface SNavItemSlots {
-    action?: React.ElementType;
-    button?: React.ElementType;
+    /** Leading icon container. */
     icon?: React.ElementType;
-    primary?: React.ElementType;
+    /** Interactive row element. */
+    item?: React.ElementType;
+    /** Primary label element. */
+    label?: React.ElementType;
+    /** List item element wrapping the row. */
+    root?: React.ElementType;
+    /** Trailing content container. */
+    trailing?: React.ElementType;
 }
-export type SNavItemButtonProps = ListItemButtonProps & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
 export interface SNavItemSlotProps {
-    action?: OwnerStateSlotProps<BoxProps>;
-    button?: OwnerStateSlotProps<SNavItemButtonProps>;
+    /** Props or owner-state callback for the icon slot. */
     icon?: OwnerStateSlotProps<BoxProps>;
-    primary?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the row slot. */
+    item?: OwnerStateSlotProps<SNavItemRowProps>;
+    /** Props or owner-state callback for the label slot. */
+    label?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the list item slot. */
+    root?: OwnerStateSlotProps<BoxProps<'li'>>;
+    /** Props or owner-state callback for the trailing slot. */
+    trailing?: OwnerStateSlotProps<BoxProps>;
 }
-/** Props for a semantic list item with a MUI ListItemButton action. */
+/** Props for a semantic list item wrapping a navigation row. */
 export interface SNavItemProps extends Omit<BoxProps<'li'>, 'children' | 'component' | 'onClick'> {
-    /** Optional trailing action content. */
-    action?: React.ReactNode;
+    /**
+     * Content rendered under the row, inside the same list item — used for
+     * collapsible submenus. The row itself is described by the other props.
+     */
+    children?: React.ReactNode;
     /** Disables the navigation action. */
     disabled?: boolean;
-    /** Link destination. When provided, the action renders as an anchor by default. */
+    /** Link destination. When provided, the row renders as an anchor by default. */
     href?: string;
     /** Optional leading icon. */
     icon?: React.ReactNode;
-    /** Called when the item is activated. */
-    onClick?: ListItemButtonProps['onClick'];
     /** Visible primary label. */
-    primary: React.ReactNode;
-    /** Selected navigation state, matching MUI ListItemButton. */
+    label: React.ReactNode;
+    /** Called when the row is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Marks the row as the current navigation target. */
     selected?: boolean;
     /** Components used for internal structural slots. */
     slots?: SNavItemSlots;
     /** Props or owner-state callbacks for internal structural slots. */
     slotProps?: SNavItemSlotProps;
+    /** Optional trailing content, e.g. a count chip or an expand indicator. */
+    trailing?: React.ReactNode;
 }
 export declare const SNavItem: React.ForwardRefExoticComponent<Omit<SNavItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export default SNavItem;