@solostylist/ui-kit 1.0.229 → 2.0.0

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

@@ -1,36 +1,44 @@
-import { SxProps, Theme } from '@mui/material/styles';
+import { BoxProps, ListItemButtonProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for SNavItem component
- */
-export interface SNavItemProps {
-    /** Text to display */
-    title?: React.ReactNode;
-    /** Link destination */
+export interface SNavItemOwnerState extends SNavItemProps {
+    disabled: boolean;
+    selected: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SNavItemOwnerState>;
+export interface SNavItemSlots {
+    action?: React.ElementType;
+    button?: React.ElementType;
+    icon?: React.ElementType;
+    primary?: React.ElementType;
+}
+export type SNavItemButtonProps = ListItemButtonProps & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
+export interface SNavItemSlotProps {
+    action?: OwnerStateSlotProps<BoxProps>;
+    button?: OwnerStateSlotProps<SNavItemButtonProps>;
+    icon?: OwnerStateSlotProps<BoxProps>;
+    primary?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for a semantic list item with a MUI ListItemButton action. */
+export interface SNavItemProps extends Omit<BoxProps<'li'>, 'children' | 'component' | 'onClick'> {
+    /** Optional trailing action content. */
+    action?: React.ReactNode;
+    /** Disables the navigation action. */
+    disabled?: boolean;
+    /** Link destination. When provided, the action renders as an anchor by default. */
     href?: string;
-    /** Active state. If true, highlighting is applied */
-    active?: boolean;
-    /** Icon shown on the left */
+    /** Optional leading icon. */
     icon?: React.ReactNode;
-    /** Action node shown on the right */
-    rightAction?: React.ReactNode;
-    /** Used for onClick when href is not provided */
-    onClick?: () => void;
-    /** Disables the item */
-    disabled?: boolean;
-    /** Target link for external link */
-    external?: boolean;
-    /** Custom link component (e.g., React Router Link) for client-side navigation */
-    component?: React.ElementType;
-    /** Additional SX overrides for the outer list item */
-    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>;
+    /** Called when the item is activated. */
+    onClick?: ListItemButtonProps['onClick'];
+    /** Visible primary label. */
+    primary: React.ReactNode;
+    /** Selected navigation state, matching MUI ListItemButton. */
+    selected?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SNavItemSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SNavItemSlotProps;
 }
-export declare const SNavItem: {
-    ({ active, disabled, external, href, icon, onClick, rightAction, title, component, sx, innerSx, titleSx, }: Readonly<SNavItemProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare const SNavItem: React.ForwardRefExoticComponent<Omit<SNavItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export default SNavItem;

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

@@ -1,88 +1,87 @@
-import { t as e } from "../Box-BlmynALm.js";
-import { t } from "../Typography-CZ_MYa-E.js";
-import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../appendOwnerState-CELpvdMz.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, ListItemButton as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
 //#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, titleSx: h }) => {
-	let g = a ? void 0 : l, _ = s ? {
-		component: o ? "a" : f ?? "a",
-		href: a ? void 0 : s,
-		target: o ? "_blank" : void 0,
-		rel: o ? "noreferrer" : void 0,
-		onClick: g
-	} : {
-		role: "button",
-		component: "div",
-		onClick: g,
-		onKeyDown: (e) => {
-			a || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l?.());
-		}
-	};
-	return /* @__PURE__ */ n(e, {
-		component: "li",
-		sx: {
-			userSelect: "none",
+var u = c("li", {
+	name: "SNavItem",
+	slot: "Root"
+})({});
+function d(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var f = n.forwardRef(function(n, c) {
+	let f = l({
+		props: n,
+		name: "SNavItem"
+	}), { action: p, disabled: m = !1, href: h, icon: g, onClick: _, primary: v, selected: y = !1, slotProps: b, slots: x, sx: S, ...C } = f, w = {
+		...f,
+		disabled: m,
+		selected: y
+	}, T = x?.button ?? o, E = x?.icon ?? a, D = x?.primary ?? s, O = x?.action ?? a, k = d(b?.button, w), A = d(b?.icon, w), j = d(b?.primary, w), M = d(b?.action, w), N = t(x?.button, k ?? {}, w), P = t(x?.icon, A ?? {}, w), F = t(x?.primary, j ?? {}, w), I = t(x?.action, M ?? {}, w), { onClick: L, sx: R, ...z } = N, { sx: B, ...V } = P, { sx: H, ...U } = I, W = L || _ ? (e) => {
+		L?.(e), e.defaultPrevented || _?.(e);
+	} : void 0;
+	return /* @__PURE__ */ r(u, {
+		...C,
+		ref: c,
+		ownerState: w,
+		sx: [{
 			display: "block",
-			...p
-		},
-		children: /* @__PURE__ */ r(e, {
-			..._,
-			"aria-current": i ? "page" : void 0,
-			"aria-disabled": a || void 0,
-			sx: {
-				alignItems: "center",
+			userSelect: "none"
+		}, ...e(S)],
+		children: /* @__PURE__ */ i(T, {
+			component: h ? "a" : "div",
+			...z,
+			"aria-current": y ? "page" : void 0,
+			disabled: m,
+			href: m ? void 0 : h,
+			onClick: W,
+			selected: y,
+			sx: [{
 				borderRadius: 1,
 				color: "text.secondary",
-				cursor: a ? "not-allowed" : "pointer",
-				display: "flex",
-				flex: "0 0 auto",
 				gap: 1,
 				justifyContent: "space-between",
 				p: 1.5,
-				textDecoration: "none",
 				whiteSpace: "nowrap",
-				...a && { color: "text.disabled" },
-				...i && {
-					bgcolor: "action.selected",
-					color: "text.primary"
-				},
-				"&:hover": { ...!i && !a && {
-					bgcolor: "action.hover",
-					color: "text.primary"
-				} },
-				...m
-			},
-			tabIndex: a ? -1 : 0,
-			children: [/* @__PURE__ */ r(e, {
+				"&.Mui-selected": { color: "text.primary" },
+				"&.Mui-disabled": { cursor: "not-allowed" },
+				"@media (hover: hover) and (pointer: fine)": { "&:hover": { color: "text.primary" } }
+			}, ...e(R)],
+			children: [/* @__PURE__ */ i(a, {
 				sx: {
 					alignItems: "center",
 					display: "flex",
-					gap: 1
+					gap: 1,
+					minWidth: 0
 				},
-				children: [c ? /* @__PURE__ */ n(e, {
+				children: [g == null ? null : /* @__PURE__ */ r(E, {
 					component: "span",
-					sx: {
-						display: "flex",
+					...V,
+					sx: [{
 						alignItems: "center",
+						display: "flex",
 						justifyContent: "center"
-					},
-					children: c
-				}) : null, /* @__PURE__ */ n(t, {
+					}, ...e(B)],
+					children: g
+				}), /* @__PURE__ */ r(D, {
 					component: "span",
-					sx: { ...h },
-					children: d
+					...F,
+					children: v
 				})]
-			}), u ? /* @__PURE__ */ n(e, {
+			}), p == null ? null : /* @__PURE__ */ r(O, {
 				component: "span",
-				sx: {
-					display: "flex",
-					alignItems: "center"
-				},
-				children: u
-			}) : null]
+				...U,
+				sx: [{
+					alignItems: "center",
+					display: "flex"
+				}, ...e(H)],
+				children: p
+			})]
 		})
 	});
-};
-i.displayName = "SNavItem";
+});
+f.displayName = "SNavItem";
 //#endregion
-export { i as SNavItem, i as default };
+export { f as SNavItem, f as default };

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

@@ -1,2 +1,3 @@
-export { SNavItems, SNavGroupItem, type SNavItemConfig, type SNavItemsProps } from './s-nav-items';
+export { SNavItems, SNavGroupItem, type SNavItemConfig, type SNavItemsOwnerState, type SNavItemsProps, } from './s-nav-items';
 export { default } from './s-nav-items';
+export type {} from '../theme/component-augmentation';

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

@@ -1,2 +1,2 @@
-import { SNavGroupItem as e, SNavItems as t } from "./s-nav-items.js";
-export { e as SNavGroupItem, t as SNavItems, t as default };
+import { n as e, t } from "../s-nav-items-BUp7DddG.js";
+export { t as SNavGroupItem, e as SNavItems, e as default };

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

@@ -1,3 +1,4 @@
+import { StackProps } from '@mui/material/Stack';
 import * as React from 'react';
 /**
  * Configuration for a single navigation item or group
@@ -13,8 +14,10 @@ export interface SNavItemConfig {
     icon?: (active: boolean) => React.ReactNode;
     /** Disables the item */
     disabled?: boolean;
-    /** Whether the link opens in a new tab */
-    external?: boolean;
+    /** Link relationship attribute. */
+    rel?: string;
+    /** Link target attribute. */
+    target?: React.HTMLAttributeAnchorTarget;
     /** Custom link component (e.g., React Router Link) */
     component?: React.ElementType;
     /** Sub-items to render as a collapsible submenu */
@@ -22,7 +25,7 @@ export interface SNavItemConfig {
     /** Whether a group item is open by default (defaults to false) */
     defaultOpen?: boolean;
 }
-export interface SNavItemsProps {
+export interface SNavItemsProps extends Omit<StackProps<'ul'>, 'children' | 'component'> {
     /** List of nav item configurations */
     items: SNavItemConfig[];
     /**
@@ -37,26 +40,26 @@ export interface SNavItemsProps {
      * Default link component for all items (e.g., React Router Link).
      * Can be overridden per-item via `SNavItemConfig.component`.
      */
-    component?: React.ElementType;
+    linkComponent?: React.ElementType;
+}
+export interface SNavItemsOwnerState extends SNavItemsProps {
+    depth: number;
 }
 interface SNavGroupItemProps {
     item: SNavItemConfig;
     pathname: string;
     depth: number;
-    component?: React.ElementType;
+    linkComponent?: React.ElementType;
 }
 /**
  * Renders a single navigation entry — either a leaf link or a collapsible group with children.
  */
-export declare function SNavGroupItem({ item, pathname, depth, component }: Readonly<SNavGroupItemProps>): React.JSX.Element;
+export declare function SNavGroupItem({ item, pathname, depth, linkComponent, }: Readonly<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, component }: Readonly<SNavItemsProps>): React.JSX.Element;
-export declare namespace SNavItems {
-    var displayName: string;
-}
+export declare const SNavItems: React.ForwardRefExoticComponent<Omit<SNavItemsProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default SNavItems;

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

@@ -1,151 +1,2 @@
-import { t as e } from "../Box-BlmynALm.js";
-import { t } from "../Stack-BQkLmLFp.js";
-import { t as n } from "../Typography-CZ_MYa-E.js";
-import { t as r } from "../ExpandMore-DIsT5FOp.js";
-import { SNavItem as i } from "../s-nav-item/s-nav-item.js";
-import { t as a } from "../Collapse-JUd84Z9O.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region lib/s-nav-items/s-nav-items.tsx
-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(e, t) {
-	return !!(e.href && (t === e.href || t.startsWith(e.href + "/")));
-}
-function d(e, t) {
-	let n = e.items ?? [];
-	return {
-		active: u(e, t),
-		childActive: n.length > 0 && l(n, t)
-	};
-}
-function f({ item: t, pathname: l, depth: u, component: f }) {
-	let m = !!(t.items && t.items.length > 0), { active: h, childActive: g } = d(t, l), [_, v] = o.useState(t.defaultOpen ?? g);
-	if (o.useEffect(() => {
-		g && v(!0);
-	}, [g]), !m) return /* @__PURE__ */ s(i, {
-		active: h,
-		disabled: t.disabled,
-		external: t.external,
-		href: t.href,
-		component: t.component ?? f,
-		icon: t.icon ? t.icon(h) : null,
-		title: t.title,
-		innerSx: u > 0 ? { pl: `${(u - 1) * 12 + 12}px` } : void 0
-	});
-	let y = h || g;
-	return /* @__PURE__ */ c(e, {
-		component: "li",
-		sx: {
-			userSelect: "none",
-			display: "block"
-		},
-		children: [/* @__PURE__ */ c(e, {
-			component: "button",
-			type: "button",
-			onClick: () => v((e) => !e),
-			sx: {
-				alignItems: "center",
-				appearance: "none",
-				background: "transparent",
-				border: 0,
-				borderRadius: 1,
-				color: y ? "text.primary" : "text.secondary",
-				cursor: t.disabled ? "not-allowed" : "pointer",
-				display: "flex",
-				flex: "0 0 auto",
-				font: "inherit",
-				gap: 1,
-				justifyContent: "space-between",
-				margin: 0,
-				p: 1.5,
-				pl: u > 0 ? `${u * 12 + 12}px` : "12px",
-				textAlign: "left",
-				textDecoration: "none",
-				whiteSpace: "nowrap",
-				width: "100%",
-				...t.disabled && { color: "text.disabled" },
-				...y && { bgcolor: "action.selected" },
-				"&:hover": { ...!y && !t.disabled && {
-					bgcolor: "action.hover",
-					color: "text.primary"
-				} }
-			},
-			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v((e) => !e));
-			},
-			"aria-disabled": t.disabled || void 0,
-			"aria-expanded": _,
-			children: [/* @__PURE__ */ c(e, {
-				sx: {
-					alignItems: "center",
-					display: "flex",
-					gap: 1
-				},
-				children: [t.icon ? /* @__PURE__ */ s(e, {
-					component: "span",
-					sx: {
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center"
-					},
-					children: t.icon(y)
-				}) : null, /* @__PURE__ */ s(n, {
-					component: "span",
-					variant: "body1",
-					children: t.title
-				})]
-			}), /* @__PURE__ */ s(e, {
-				component: "span",
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					color: "text.secondary",
-					transition: "transform 200ms ease",
-					transform: _ ? "rotate(0deg)" : "rotate(-90deg)"
-				},
-				children: /* @__PURE__ */ s(r, {})
-			})]
-		}), /* @__PURE__ */ s(a, {
-			in: _,
-			timeout: 200,
-			unmountOnExit: !0,
-			children: /* @__PURE__ */ s(e, {
-				sx: {
-					ml: u > 0 ? `${u * 16 + 12}px` : "12px",
-					mt: 1,
-					mb: 1,
-					pl: 1
-				},
-				children: /* @__PURE__ */ s(p, {
-					items: t.items,
-					pathname: l,
-					depth: u + 1,
-					component: f
-				})
-			})
-		})]
-	});
-}
-f.displayName = "SNavGroupItem";
-function p({ items: e, pathname: n = "", depth: r = 0, component: i }) {
-	return /* @__PURE__ */ s(t, {
-		component: "ul",
-		spacing: 1,
-		sx: {
-			listStyle: "none",
-			m: 0,
-			p: 0
-		},
-		children: e.map((e) => /* @__PURE__ */ s(f, {
-			item: e,
-			pathname: n,
-			depth: r,
-			component: i
-		}, e.key))
-	});
-}
-p.displayName = "SNavItems";
-//#endregion
-export { f as SNavGroupItem, p as SNavItems, p as default };
+import { n as e, t } from "../s-nav-items-BUp7DddG.js";
+export { t as SNavGroupItem, e as SNavItems, e as default };