@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-moving-border/s-moving-border.js

@@ -1,15 +1,16 @@
-import { useRef as e } from "react";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i } from "@mui/material";
-import { motion as a, useAnimationFrame as o, useMotionTemplate as s, useMotionValue as c, useTransform as l } from "framer-motion";
+import { toSxArray as e } from "../utils/sx.js";
+import t, { useRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, styled as s, useThemeProps as c } from "@mui/material";
+import { motion as l, useAnimationFrame as u, useMotionTemplate as d, useMotionValue as f, useReducedMotion as p, useTransform as m } from "framer-motion";
 //#region lib/s-moving-border/s-moving-border.tsx
-var u = 250, d = 24, f = Array.from({ length: d }, (e, t) => {
-	let n = t / (d - 1);
+var h = 250, g = 24, _ = Array.from({ length: g }, (e, t) => {
+	let n = t / (g - 1);
 	return {
 		scale: 1 - n * .76,
 		opacity: .006 + n * .044
 	};
-}), p = ({ color: e, size: t }) => /* @__PURE__ */ n(i, {
+}), v = ({ color: e, size: t }) => /* @__PURE__ */ i(o, {
 	sx: {
 		position: "absolute",
 		left: "50%",
@@ -19,31 +20,40 @@ var u = 250, d = 24, f = Array.from({ length: d }, (e, t) => {
 		transform: "translate(-50%, -50%)",
 		pointerEvents: "none"
 	},
-	children: f.map(({ scale: r, opacity: a }) => {
-		let o = t * r, s = (t - o) / 2;
-		return /* @__PURE__ */ n(i, { sx: {
+	children: _.map(({ scale: n, opacity: r }) => {
+		let a = t * n, s = (t - a) / 2;
+		return /* @__PURE__ */ i(o, { sx: {
 			position: "absolute",
 			backgroundColor: e,
 			borderRadius: "50%",
-			height: o,
+			height: a,
 			left: s,
-			opacity: a,
+			opacity: r,
 			top: s,
-			width: o
-		} }, r);
+			width: a
+		} }, n);
 	})
 });
-function m({ children: i, duration: u, rx: d, ry: f, phase: p = 0 }) {
-	let m = e(null), h = c(0);
-	o((e) => {
-		let t = m.current?.getTotalLength();
+function y({ children: e, duration: o, rx: s, ry: c, phase: h = 0 }) {
+	let g = n(null), _ = f(0), v = p();
+	t.useLayoutEffect(() => {
+		if (!v) return;
+		let e = g.current?.getTotalLength();
+		e && _.set(e * h);
+	}, [
+		h,
+		v,
+		_
+	]), u((e) => {
+		if (v) return;
+		let t = g.current?.getTotalLength();
 		if (t) {
-			let n = t / u;
-			h.set((e * n + t * p) % t);
+			let n = t / o;
+			_.set((e * n + t * h) % t);
 		}
 	});
-	let g = s`translateX(${l(h, (e) => m.current?.getPointAtLength(e)?.x)}px) translateY(${l(h, (e) => m.current?.getPointAtLength(e)?.y)}px) translateX(-50%) translateY(-50%)`;
-	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("svg", {
+	let y = d`translateX(${m(_, (e) => g.current?.getPointAtLength(e)?.x)}px) translateY(${m(_, (e) => g.current?.getPointAtLength(e)?.y)}px) translateX(-50%) translateY(-50%)`;
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		preserveAspectRatio: "none",
 		width: "100%",
@@ -52,66 +62,85 @@ function m({ children: i, duration: u, rx: d, ry: f, phase: p = 0 }) {
 			position: "absolute",
 			inset: 0
 		},
-		children: /* @__PURE__ */ n("rect", {
+		children: /* @__PURE__ */ i("rect", {
 			fill: "none",
 			width: "100%",
 			height: "100%",
-			rx: d,
-			ry: f,
-			ref: m
+			rx: s,
+			ry: c,
+			ref: g
 		})
-	}), /* @__PURE__ */ n(a.div, {
+	}), /* @__PURE__ */ i(l.div, {
 		style: {
 			position: "absolute",
 			top: 0,
 			left: 0,
 			display: "inline-block",
-			transform: g
+			transform: y
 		},
-		children: i
+		children: e
 	})] });
 }
-var h = ({ borderRadius: e, className: t, duration: a = 6e3, children: o, glowColor: s = "var(--s-palette-primary-main)", glowSize: c = u, height: l, padding: d, width: f, ...h }) => /* @__PURE__ */ r(i, {
-	className: t,
-	...h,
-	sx: [{
-		position: "relative",
-		overflow: "hidden",
-		height: l ?? "100%",
-		width: f ?? "100%",
-		padding: d ?? .125,
-		borderRadius: e,
-		backgroundColor: "transparent"
-	}, ...Array.isArray(h.sx) ? h.sx : [h.sx]],
-	children: [/* @__PURE__ */ r(i, {
-		sx: {
-			position: "absolute",
-			top: 0,
-			left: 0,
-			right: 0,
-			bottom: 0
-		},
-		children: [/* @__PURE__ */ n(m, {
-			duration: a,
-			rx: "100%",
-			ry: "100%",
-			phase: 0,
-			children: /* @__PURE__ */ n(p, {
-				color: s,
-				size: c
-			})
-		}), /* @__PURE__ */ n(m, {
-			duration: a,
-			rx: "100%",
-			ry: "100%",
-			phase: .5,
-			children: /* @__PURE__ */ n(p, {
-				color: s,
-				size: c
-			})
-		})]
-	}), o]
+var b = s(o, {
+	name: "SMovingBorder",
+	slot: "Root"
+})({}), x = t.forwardRef(function(t, n) {
+	let r = c({
+		props: t,
+		name: "SMovingBorder"
+	}), { borderRadius: s, duration: l = 6e3, children: u, glowColor: d = "var(--s-palette-primary-main)", glowSize: f = h, height: p, padding: m, sx: g, width: _, ...x } = r, S = {
+		...r,
+		borderRadius: s,
+		duration: l,
+		glowColor: d,
+		glowSize: f,
+		height: p,
+		padding: m,
+		width: _
+	};
+	return /* @__PURE__ */ a(b, {
+		...x,
+		ref: n,
+		ownerState: S,
+		sx: [{
+			position: "relative",
+			overflow: "hidden",
+			height: p ?? "100%",
+			width: _ ?? "100%",
+			padding: m ?? .125,
+			borderRadius: s,
+			backgroundColor: "transparent"
+		}, ...e(g)],
+		children: [/* @__PURE__ */ a(o, {
+			sx: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0
+			},
+			children: [/* @__PURE__ */ i(y, {
+				duration: l,
+				rx: "100%",
+				ry: "100%",
+				phase: 0,
+				children: /* @__PURE__ */ i(v, {
+					color: d,
+					size: f
+				})
+			}), /* @__PURE__ */ i(y, {
+				duration: l,
+				rx: "100%",
+				ry: "100%",
+				phase: .5,
+				children: /* @__PURE__ */ i(v, {
+					color: d,
+					size: f
+				})
+			})]
+		}), u]
+	});
 });
-h.displayName = "SMovingBorder";
+x.displayName = "SMovingBorder";
 //#endregion
-export { h as SMovingBorder, h as default };
+export { x as SMovingBorder, x as default };

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

@@ -1,2 +1,3 @@
-export { SNavItem, type SNavItemProps } from './s-nav-item';
+export { SNavItem, type SNavItemOwnerState, type SNavItemButtonProps, type SNavItemProps, 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,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 { toSxArray as e } from "../utils/sx.js";
+import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Box as i, ListItemButton as a, Typography as o, styled as s, useThemeProps as c } from "@mui/material";
+import l from "@mui/utils/appendOwnerState";
 //#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 = s("li", {
+	name: "SNavItem",
+	slot: "Root"
+})({});
+function d(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var f = t.forwardRef(function(t, s) {
+	let f = c({
+		props: t,
+		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 ?? a, E = x?.icon ?? i, D = x?.primary ?? o, O = x?.action ?? i, k = d(b?.button, w), A = d(b?.icon, w), j = d(b?.primary, w), M = d(b?.action, w), N = l(x?.button, k ?? {}, w), P = l(x?.icon, A ?? {}, w), F = l(x?.primary, j ?? {}, w), I = l(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__ */ n(u, {
+		...C,
+		ref: s,
+		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__ */ r(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__ */ r(i, {
 				sx: {
 					alignItems: "center",
 					display: "flex",
-					gap: 1
+					gap: 1,
+					minWidth: 0
 				},
-				children: [c ? /* @__PURE__ */ n(e, {
+				children: [g == null ? null : /* @__PURE__ */ n(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__ */ n(D, {
 					component: "span",
-					sx: { ...h },
-					children: d
+					...F,
+					children: v
 				})]
-			}), u ? /* @__PURE__ */ n(e, {
+			}), p == null ? null : /* @__PURE__ */ n(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/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;