@solostylist/ui-kit 1.0.212 → 1.0.213

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

@@ -26,9 +26,11 @@ export interface SNavItemProps {
     sx?: SxProps<Theme>;
     /** Additional SX overrides for the inner anchor/div (useful for padding-left on nested items) */
     innerSx?: SxProps<Theme>;
+    /** Additional SX overrides for the title Typography */
+    titleSx?: SxProps<Theme>;
 }
 export declare const SNavItem: {
-    ({ active, disabled, external, href, icon, onClick, rightAction, title, component, sx, innerSx, }: Readonly<SNavItemProps>): React.JSX.Element;
+    ({ active, disabled, external, href, icon, onClick, rightAction, title, component, sx, innerSx, titleSx, }: Readonly<SNavItemProps>): React.JSX.Element;
     displayName: string;
 };
 export default SNavItem;

package/dist/s-nav-item/s-nav-item.js

@@ -4,7 +4,7 @@ import { t } from "../Typography-Ci004UCT.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/s-nav-item/s-nav-item.tsx
-var i = ({ active: i, disabled: a, external: o, href: s, icon: c, onClick: l, rightAction: u, title: d, component: f, sx: p, innerSx: m }) => /* @__PURE__ */ n(e, {
+var i = ({ active: i, disabled: a, external: o, href: s, icon: c, onClick: l, rightAction: u, title: d, component: f, sx: p, innerSx: m, titleSx: h }) => /* @__PURE__ */ n(e, {
 	component: "li",
 	sx: {
 		userSelect: "none",
@@ -62,7 +62,7 @@ var i = ({ active: i, disabled: a, external: o, href: s, icon: c, onClick: l, ri
 				children: c
 			}) : null, /* @__PURE__ */ n(t, {
 				component: "span",
-				sx: { fontWeight: 500 },
+				sx: { ...h },
 				children: d
 			})]
 		}), u ? /* @__PURE__ */ n(e, {

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

@@ -33,23 +33,29 @@ export interface SNavItemsProps {
     pathname?: string;
     /** Depth level, used internally for recursive rendering */
     depth?: number;
+    /**
+     * Default link component for all items (e.g., React Router Link).
+     * Can be overridden per-item via `SNavItemConfig.component`.
+     */
+    component?: React.ElementType;
 }
 interface SNavGroupItemProps {
     item: SNavItemConfig;
     pathname: string;
     depth: number;
+    component?: React.ElementType;
 }
 /**
  * Renders a single navigation entry — either a leaf link or a collapsible group with children.
  */
-export declare function SNavGroupItem({ item, pathname, depth }: SNavGroupItemProps): React.JSX.Element;
+export declare function SNavGroupItem({ item, pathname, depth, component }: SNavGroupItemProps): React.JSX.Element;
 export declare namespace SNavGroupItem {
     var displayName: string;
 }
 /**
  * Renders a list of navigation items, supporting nested collapsible groups.
  */
-export declare function SNavItems({ items, pathname, depth }: SNavItemsProps): React.JSX.Element;
+export declare function SNavItems({ items, pathname, depth, component }: SNavItemsProps): React.JSX.Element;
 export declare namespace SNavItems {
     var displayName: string;
 }

package/dist/s-nav-item/s-nav-items.js

@@ -11,21 +11,21 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
 function l(e, t) {
 	return e.some((e) => e.href && (t === e.href || t.startsWith(e.href + "/")) ? !0 : e.items ? l(e.items, t) : !1);
 }
-function u({ item: t, pathname: u, depth: f }) {
-	let p = !!(t.items && t.items.length > 0), m = t.href ? u === t.href || u.startsWith(t.href + "/") : !1, h = p ? l(t.items, u) : !1, [g, _] = o.useState(t.defaultOpen ?? h);
+function u({ item: t, pathname: u, depth: f, component: p }) {
+	let m = !!(t.items && t.items.length > 0), h = t.href ? u === t.href || u.startsWith(t.href + "/") : !1, g = m ? l(t.items, u) : !1, [_, v] = o.useState(t.defaultOpen ?? g);
 	if (o.useEffect(() => {
-		h && _(!0);
-	}, [h]), !p) return /* @__PURE__ */ s(a, {
-		active: m,
+		g && v(!0);
+	}, [g]), !m) return /* @__PURE__ */ s(a, {
+		active: h,
 		disabled: t.disabled,
 		external: t.external,
 		href: t.href,
-		component: t.component,
-		icon: t.icon ? t.icon(m) : null,
+		component: t.component ?? p,
+		icon: t.icon ? t.icon(h) : null,
 		title: t.title,
 		innerSx: f > 0 ? { pl: `${(f - 1) * 12 + 12}px` } : void 0
 	});
-	let v = m || h;
+	let y = h || g;
 	return /* @__PURE__ */ c(e, {
 		component: "li",
 		sx: {
@@ -34,11 +34,11 @@ function u({ item: t, pathname: u, depth: f }) {
 		},
 		children: [/* @__PURE__ */ c(e, {
 			role: "button",
-			onClick: () => _((e) => !e),
+			onClick: () => v((e) => !e),
 			sx: {
 				alignItems: "center",
 				borderRadius: 1,
-				color: v ? "var(--s-palette-text-primary)" : "var(--s-palette-text-secondary)",
+				color: y ? "var(--s-palette-text-primary)" : "var(--s-palette-text-secondary)",
 				cursor: t.disabled ? "not-allowed" : "pointer",
 				display: "flex",
 				flex: "0 0 auto",
@@ -49,15 +49,15 @@ function u({ item: t, pathname: u, depth: f }) {
 				textDecoration: "none",
 				whiteSpace: "nowrap",
 				...t.disabled && { color: "var(--s-palette-text-disabled)" },
-				...v && { bgcolor: "var(--s-palette-action-selected)" },
-				"&:hover": { ...!v && !t.disabled && {
+				...y && { bgcolor: "var(--s-palette-action-selected)" },
+				"&:hover": { ...!y && !t.disabled && {
 					bgcolor: "var(--s-palette-action-hover)",
 					color: "var(--s-palette-text-primary)"
 				} }
 			},
 			tabIndex: 0,
 			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), _((e) => !e));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v((e) => !e));
 			},
 			children: [/* @__PURE__ */ c(e, {
 				sx: {
@@ -72,7 +72,7 @@ function u({ item: t, pathname: u, depth: f }) {
 						alignItems: "center",
 						justifyContent: "center"
 					},
-					children: t.icon(v)
+					children: t.icon(y)
 				}) : null, /* @__PURE__ */ s(n, {
 					component: "span",
 					sx: {
@@ -88,18 +88,18 @@ function u({ item: t, pathname: u, depth: f }) {
 					alignItems: "center",
 					color: "var(--s-palette-text-secondary)",
 					transition: "transform 200ms ease",
-					transform: g ? "rotate(0deg)" : "rotate(-90deg)"
+					transform: _ ? "rotate(0deg)" : "rotate(-90deg)"
 				},
 				children: /* @__PURE__ */ s(r, {})
 			})]
 		}), /* @__PURE__ */ s(i, {
-			in: g,
+			in: _,
 			timeout: 200,
 			unmountOnExit: !0,
 			children: /* @__PURE__ */ s(e, {
 				sx: {
 					borderLeft: "2px solid var(--s-palette-divider)",
-					ml: f > 0 ? `${f * 16 + 24}px` : "24px",
+					ml: f > 0 ? `${f * 16 + 12}px` : "12px",
 					mt: 1,
 					mb: 1,
 					pl: 1
@@ -107,14 +107,15 @@ function u({ item: t, pathname: u, depth: f }) {
 				children: /* @__PURE__ */ s(d, {
 					items: t.items,
 					pathname: u,
-					depth: f + 1
+					depth: f + 1,
+					component: p
 				})
 			})
 		})]
 	});
 }
 u.displayName = "SNavGroupItem";
-function d({ items: e, pathname: n = "", depth: r = 0 }) {
+function d({ items: e, pathname: n = "", depth: r = 0, component: i }) {
 	return /* @__PURE__ */ s(t, {
 		component: "ul",
 		spacing: 1,
@@ -126,7 +127,8 @@ function d({ items: e, pathname: n = "", depth: r = 0 }) {
 		children: e.map((e) => /* @__PURE__ */ s(u, {
 			item: e,
 			pathname: n,
-			depth: r
+			depth: r,
+			component: i
 		}, e.key))
 	});
 }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.212",
+  "version": "1.0.213",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",