@solostylist/ui-kit 1.0.229 → 2.0.0

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

@@ -0,0 +1,327 @@
+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 { t as i } from "./clsx-DGZSe4Nt.js";
+import { t as a } from "./Box-9oeZgA1U.js";
+import { n as o, t as s } from "./styled-Bog8QCl3.js";
+import { t as c } from "./Stack-UMc4dV4G.js";
+import { t as l } from "./memoTheme-qFyKAk7y.js";
+import { t as u } from "./useThemeProps-Cr28OQu3.js";
+import { toSxArray as d } from "./utils/sx.js";
+import { t as f } from "./ButtonBase-DxKtpFYs.js";
+import { t as p } from "./useForkRef-CKneCEtr.js";
+import { t as m } from "./useEnhancedEffect-Bc3gBClC.js";
+import { t as h } from "./ListContext-B1HQt3OD.js";
+import { t as g } from "./ExpandMore-Ba5bg6s-.js";
+import { t as _ } from "./Typography-yXjc7kVP.js";
+import { SNavItem as v } from "./s-nav-item/s-nav-item.js";
+import { t as y } from "./Collapse-zgIFP5Sj.js";
+import { n as b, t as x } from "./listItemButtonClasses-DbL-aTVf.js";
+import * as S from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region ../../node_modules/@mui/material/ListItemButton/ListItemButton.mjs
+var T = /* @__PURE__ */ e(t(), 1), E = (e, t) => {
+	let { ownerState: n } = e;
+	return [
+		t.root,
+		n.dense && t.dense,
+		n.alignItems === "flex-start" && t.alignItemsFlexStart,
+		n.divider && t.divider,
+		!n.disableGutters && t.gutters
+	];
+}, D = (e) => {
+	let { alignItems: t, classes: r, dense: i, disabled: a, disableGutters: o, divider: s, selected: c } = e, l = n({ root: [
+		"root",
+		i && "dense",
+		!o && "gutters",
+		s && "divider",
+		a && "disabled",
+		t === "flex-start" && "alignItemsFlexStart",
+		c && "selected"
+	] }, x, r);
+	return {
+		...r,
+		...l
+	};
+}, O = s(f, {
+	shouldForwardProp: (e) => o(e) || e === "classes",
+	name: "MuiListItemButton",
+	slot: "Root",
+	overridesResolver: E
+})(l(({ theme: e }) => ({
+	display: "flex",
+	flexGrow: 1,
+	justifyContent: "flex-start",
+	alignItems: "center",
+	position: "relative",
+	textDecoration: "none",
+	minWidth: 0,
+	boxSizing: "border-box",
+	textAlign: "left",
+	paddingTop: 8,
+	paddingBottom: 8,
+	transition: e.transitions.create("background-color", { duration: e.transitions.duration.shortest }),
+	"&:hover": {
+		textDecoration: "none",
+		backgroundColor: (e.vars || e).palette.action.hover,
+		"@media (hover: none)": { backgroundColor: "transparent" }
+	},
+	[`&.${b.selected}`]: {
+		backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity),
+		[`&.${b.focusVisible}`]: { backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.focusOpacity}`) }
+	},
+	[`&.${b.selected}:hover`]: {
+		backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.hoverOpacity}`),
+		"@media (hover: none)": { backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity) }
+	},
+	[`&.${b.focusVisible}`]: { backgroundColor: (e.vars || e).palette.action.focus },
+	[`&.${b.disabled}`]: { opacity: (e.vars || e).palette.action.disabledOpacity },
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.divider,
+			style: {
+				borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
+				backgroundClip: "padding-box"
+			}
+		},
+		{
+			props: { alignItems: "flex-start" },
+			style: { alignItems: "flex-start" }
+		},
+		{
+			props: ({ ownerState: e }) => !e.disableGutters,
+			style: {
+				paddingLeft: 16,
+				paddingRight: 16
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.dense,
+			style: {
+				paddingTop: 4,
+				paddingBottom: 4
+			}
+		}
+	]
+}))), k = /* @__PURE__ */ S.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiListItemButton"
+	}), { alignItems: a = "center", autoFocus: o = !1, component: s = "div", children: c, dense: l = !1, disableGutters: u = !1, divider: d = !1, focusVisibleClassName: f, selected: g = !1, className: _, ...v } = n, y = S.useContext(h), b = S.useMemo(() => ({
+		dense: l || y.dense || !1,
+		alignItems: a,
+		disableGutters: u
+	}), [
+		a,
+		y.dense,
+		l,
+		u
+	]), x = S.useRef(null);
+	m(() => {
+		o && (x.current ? x.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered."));
+	}, [o]);
+	let w = {
+		...n,
+		alignItems: a,
+		dense: b.dense,
+		disableGutters: u,
+		divider: d,
+		selected: g
+	}, T = D(w), { root: E, ...k } = T, A = p(x, t);
+	return /* @__PURE__ */ C(h.Provider, {
+		value: b,
+		children: /* @__PURE__ */ C(O, {
+			ref: A,
+			href: v.href || v.to,
+			component: (v.href || v.to) && s === "div" ? "button" : s,
+			internalNativeButton: !1,
+			focusVisibleClassName: i(T.focusVisible, f),
+			ownerState: w,
+			className: i(T.root, _),
+			...v,
+			classes: k,
+			children: c
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (k.propTypes = {
+	alignItems: T.default.oneOf(["center", "flex-start"]),
+	autoFocus: T.default.bool,
+	children: T.default.node,
+	classes: T.default.object,
+	className: T.default.string,
+	component: T.default.elementType,
+	dense: T.default.bool,
+	disabled: T.default.bool,
+	disableGutters: T.default.bool,
+	divider: T.default.bool,
+	focusVisibleClassName: T.default.string,
+	href: T.default.string,
+	selected: T.default.bool,
+	sx: T.default.oneOfType([
+		T.default.arrayOf(T.default.oneOfType([
+			T.default.func,
+			T.default.object,
+			T.default.bool
+		])),
+		T.default.func,
+		T.default.object
+	])
+});
+//#endregion
+//#region lib/s-nav-items/s-nav-items.tsx
+var A = s(S.forwardRef(function(e, t) {
+	return /* @__PURE__ */ C(c, {
+		component: "ul",
+		...e,
+		ref: t
+	});
+}), {
+	name: "SNavItems",
+	slot: "Root"
+})({});
+function j(e, t) {
+	return e.some((e) => e.href && (t === e.href || t.startsWith(e.href + "/")) ? !0 : e.items ? j(e.items, t) : !1);
+}
+function M(e, t) {
+	return !!(e.href && (t === e.href || t.startsWith(e.href + "/")));
+}
+function N(e, t) {
+	let n = e.items ?? [];
+	return {
+		active: M(e, t),
+		childActive: n.length > 0 && j(n, t)
+	};
+}
+function P({ item: e, pathname: t, depth: n, linkComponent: r }) {
+	let i = !!(e.items && e.items.length > 0), { active: o, childActive: s } = N(e, t), [c, l] = S.useState(e.defaultOpen ?? s);
+	if (S.useEffect(() => {
+		s && l(!0);
+	}, [s]), !i) return /* @__PURE__ */ C(v, {
+		disabled: e.disabled,
+		href: e.href,
+		icon: e.icon ? e.icon(o) : null,
+		primary: e.title,
+		selected: o,
+		slotProps: { button: {
+			component: e.component ?? r,
+			rel: e.rel,
+			target: e.target,
+			sx: n > 0 ? { pl: `${(n - 1) * 12 + 12}px` } : void 0
+		} }
+	});
+	let u = o || s;
+	return /* @__PURE__ */ w(a, {
+		component: "li",
+		sx: {
+			userSelect: "none",
+			display: "block"
+		},
+		children: [/* @__PURE__ */ w(k, {
+			onClick: () => l((e) => !e),
+			disabled: e.disabled,
+			selected: u,
+			sx: {
+				alignItems: "center",
+				borderRadius: 1,
+				color: u ? "text.primary" : "text.secondary",
+				display: "flex",
+				flex: "0 0 auto",
+				gap: 1,
+				justifyContent: "space-between",
+				p: 1.5,
+				pl: n > 0 ? `${n * 12 + 12}px` : "12px",
+				whiteSpace: "nowrap",
+				width: "100%",
+				"&.Mui-disabled": {
+					color: "text.disabled",
+					cursor: "not-allowed"
+				},
+				"@media (hover: hover) and (pointer: fine)": { "&:hover": { ...!u && !e.disabled && {
+					bgcolor: "action.hover",
+					color: "text.primary"
+				} } }
+			},
+			"aria-expanded": c,
+			children: [/* @__PURE__ */ w(a, {
+				sx: {
+					alignItems: "center",
+					display: "flex",
+					gap: 1
+				},
+				children: [e.icon ? /* @__PURE__ */ C(a, {
+					component: "span",
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: e.icon(u)
+				}) : null, /* @__PURE__ */ C(_, {
+					component: "span",
+					variant: "body1",
+					children: e.title
+				})]
+			}), /* @__PURE__ */ C(a, {
+				component: "span",
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					color: "text.secondary",
+					transition: "transform 200ms ease",
+					transform: c ? "rotate(0deg)" : "rotate(-90deg)"
+				},
+				children: /* @__PURE__ */ C(g, {})
+			})]
+		}), /* @__PURE__ */ C(y, {
+			in: c,
+			timeout: 200,
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ C(a, {
+				sx: {
+					ml: n > 0 ? `${n * 16 + 12}px` : "12px",
+					mt: 1,
+					mb: 1,
+					pl: 1
+				},
+				children: /* @__PURE__ */ C(F, {
+					items: e.items,
+					pathname: t,
+					depth: n + 1,
+					linkComponent: r
+				})
+			})
+		})]
+	});
+}
+P.displayName = "SNavGroupItem";
+var F = S.forwardRef(function(e, t) {
+	let n = u({
+		props: e,
+		name: "SNavItems"
+	}), { depth: r = 0, items: i, linkComponent: a, pathname: o = "", sx: s, ...c } = n, l = {
+		...n,
+		depth: r,
+		pathname: o
+	};
+	return /* @__PURE__ */ C(A, {
+		spacing: 1,
+		...c,
+		ref: t,
+		ownerState: l,
+		sx: [{
+			listStyle: "none",
+			m: 0,
+			p: 0
+		}, ...d(s)],
+		children: i.map((e) => /* @__PURE__ */ C(P, {
+			item: e,
+			pathname: o,
+			depth: r,
+			linkComponent: a
+		}, e.key))
+	});
+});
+F.displayName = "SNavItems";
+//#endregion
+export { F as n, P as t };

package/dist/s-no-ssr/index.js

@@ -1,2 +1,2 @@
-import { SNoSsr as e } from "./s-no-ssr.js";
+import { t as e } from "../s-no-ssr-D8tPdDfh.js";
 export { e as SNoSsr, e as default };

package/dist/s-no-ssr/s-no-ssr.d.ts

@@ -1,17 +1,5 @@
-import * as React from 'react';
-/**
- * Props for the SNoSSR component
- */
-export interface SNoSsrProps {
-    /** Content to render only on the client side */
-    children?: React.ReactNode;
-    /** Whether to defer rendering until after initial paint */
-    defer?: boolean;
-    /** Content to show during server-side rendering or while loading */
-    fallback?: React.ReactNode;
-}
-export declare const SNoSsr: {
-    (props: SNoSsrProps): React.JSX.Element;
-    displayName: string;
-};
+import { default as NoSsr, NoSsrProps } from '@mui/material/NoSsr';
+/** Exact MUI NoSsr contract exposed under the ui-kit namespace. */
+export type SNoSsrProps = NoSsrProps;
+export declare const SNoSsr: typeof NoSsr;
 export default SNoSsr;

package/dist/s-no-ssr/s-no-ssr.js

@@ -1,15 +1,2 @@
-import { t as e } from "../useEnhancedEffect-Dsu5K7-Z.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
-//#region lib/s-no-ssr/s-no-ssr.tsx
-var r = (r) => {
-	let { children: i, defer: a = !1, fallback: o = null } = r, [s, c] = t.useState(!1);
-	return e(() => {
-		a || c(!0);
-	}, [a]), t.useEffect(() => {
-		a && c(!0);
-	}, [a]), /* @__PURE__ */ n(t.Fragment, { children: s ? i : o });
-};
-r.displayName = "SNoSsr";
-//#endregion
-export { r as SNoSsr, r as default };
+import { t as e } from "../s-no-ssr-D8tPdDfh.js";
+export { e as SNoSsr, e as default };

package/dist/s-no-ssr-D8tPdDfh.js

@@ -0,0 +1,25 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { t as n } from "./useEnhancedEffect-DFq_FMGX.js";
+import { t as r } from "./exactProp-C_IsucXf.js";
+import * as i from "react";
+//#region ../../node_modules/@mui/material/NoSsr/NoSsr.mjs
+var a = /* @__PURE__ */ e(t(), 1);
+function o(e) {
+	let { children: t, defer: r = !1, fallback: a = null } = e, [o, s] = i.useState(!1);
+	return n(() => {
+		r || s(!0);
+	}, [r]), i.useEffect(() => {
+		r && s(!0);
+	}, [r]), o ? t : a;
+}
+process.env.NODE_ENV !== "production" && (o.propTypes = {
+	children: a.default.node,
+	defer: a.default.bool,
+	fallback: a.default.node
+}), process.env.NODE_ENV !== "production" && (o.propTypes = r(o.propTypes));
+//#endregion
+//#region lib/s-no-ssr/s-no-ssr.tsx
+var s = o;
+//#endregion
+export { s as t };

package/dist/s-overlay-scrollbar/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as SOverlayScrollbar } from './s-overlay-scrollbar';
-export type { SOverlayScrollbarProps } from './s-overlay-scrollbar';
+export type { SOverlayScrollbarOwnerState, SOverlayScrollbarProps } from './s-overlay-scrollbar';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-overlay-scrollbar';

package/dist/s-overlay-scrollbar/s-overlay-scrollbar.d.ts

@@ -1,15 +1,17 @@
-import { PropsWithChildren } from 'react';
 import { SxProps, Theme } from '@mui/material';
+import { OverlayScrollbarsComponentProps, OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
 /**
  * Props interface for SOverlayScrollbar component
  */
-export interface SOverlayScrollbarProps extends PropsWithChildren {
-    /** Optional id for the scrollbar container */
-    id?: string;
-    /** Additional CSS class name */
-    className?: string;
+export type SOverlayScrollbarProps = Omit<OverlayScrollbarsComponentProps<'div'>, 'ref'> & {
     /** Material-UI sx prop for custom styling */
     sx?: SxProps<Theme>;
-}
-export declare const SOverlayScrollbar: import('react').ForwardRefExoticComponent<SOverlayScrollbarProps & import('react').RefAttributes<import('overlayscrollbars-react').OverlayScrollbarsComponentRef<import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>>>;
+};
+export type SOverlayScrollbarOwnerState = SOverlayScrollbarProps & {
+    defer: boolean | IdleRequestOptions;
+};
+export declare const SOverlayScrollbar: import('react').ForwardRefExoticComponent<Omit<OverlayScrollbarsComponentProps<"div">, "ref"> & {
+    /** Material-UI sx prop for custom styling */
+    sx?: SxProps<Theme>;
+} & import('react').RefAttributes<OverlayScrollbarsComponentRef<"div">>>;
 export default SOverlayScrollbar;

package/dist/s-overlay-scrollbar/s-overlay-scrollbar.js

@@ -1,9 +1,12 @@
 import { forwardRef as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
-import { styled as n } from "@mui/material";
-import { OverlayScrollbarsComponent as r } from "overlayscrollbars-react";
+import { styled as n, useThemeProps as r } from "@mui/material";
+import { OverlayScrollbarsComponent as i } from "overlayscrollbars-react";
 import '../assets/s-overlay-scrollbar.css';//#region lib/s-overlay-scrollbar/s-overlay-scrollbar.tsx
-var i = n(r)(({ theme: e }) => ({
+var a = n(i, {
+	name: "SOverlayScrollbar",
+	slot: "Root"
+})(({ theme: e }) => ({
 	maxHeight: "100%",
 	".os-theme-dark": {
 		"--os-size": "10px",
@@ -16,19 +19,28 @@ var i = n(r)(({ theme: e }) => ({
 			"--os-handle-bg-active": (e.vars ?? e).palette.whiteAlpha.dark
 		})
 	}
-})), a = e(({ sx: e, children: n, className: r, id: a, ...o }, s) => /* @__PURE__ */ t(i, {
-	id: a,
-	ref: s,
-	defer: !0,
-	sx: e,
-	className: r,
-	options: { scrollbars: {
+})), o = e(function(e, n) {
+	let i = r({
+		props: e,
+		name: "SOverlayScrollbar"
+	}), { children: o, defer: s = !0, options: c = { scrollbars: {
 		autoHide: "leave",
 		autoHideDelay: 100
-	} },
-	...o,
-	children: n
-}));
-a.displayName = "SOverlayScrollbar";
+	} }, sx: l, ...u } = i, d = {
+		...i,
+		defer: s,
+		options: c
+	};
+	return /* @__PURE__ */ t(a, {
+		...u,
+		ref: n,
+		defer: s,
+		options: c,
+		ownerState: d,
+		sx: l,
+		children: o
+	});
+});
+o.displayName = "SOverlayScrollbar";
 //#endregion
-export { a as SOverlayScrollbar, a as default };
+export { o as SOverlayScrollbar, o as default };

package/dist/s-pagination/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as SPagination } from './s-pagination';
-export type { SPaginationProps } from './s-pagination';
+export type { SPaginationOwnerState, SPaginationProps } from './s-pagination';
+export type { SPaginationColor, SPaginationSize } from './types';
+export type {} from '../theme/component-augmentation';

package/dist/s-pagination/index.js

@@ -1,2 +1,2 @@
-import { SPagination as e } from "./s-pagination.js";
+import { t as e } from "../s-pagination-Dt8Pk5Tp.js";
 export { e as SPagination, e as default };

package/dist/s-pagination/s-pagination.d.ts

@@ -1,16 +1,18 @@
-import { default as React } from 'react';
-import { PaginationProps } from '@mui/material';
-/**
- * Props for the SPagination component, extending Material-UI's PaginationProps
- */
+import { PaginationProps } from '@mui/material/Pagination';
+import * as React from 'react';
+export type { SPaginationColor, SPaginationSize } from './types';
+/** MUI Pagination props plus a Button-like loading state. */
 export interface SPaginationProps extends PaginationProps {
-    /** Whether the pagination is in a loading state - shows skeleton when true */
+    /** Total number of pages. The component is hidden when count is 0 or less. @default 0 */
+    count?: PaginationProps['count'];
+    /** If true, the pagination is replaced by its loading indicator when count is positive. */
     loading?: boolean;
-    /** Total number of pages - component returns empty fragment when 0 */
-    count?: number;
+    /** Custom content rendered while loading. */
+    loadingIndicator?: React.ReactNode;
 }
-export declare const SPagination: {
-    ({ loading, count, ...props }: SPaginationProps): React.JSX.Element;
-    displayName: string;
-};
+export interface SPaginationOwnerState extends SPaginationProps {
+    loading: boolean;
+    size: NonNullable<PaginationProps['size']>;
+}
+export declare const SPagination: React.ForwardRefExoticComponent<Omit<SPaginationProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SPagination;

package/dist/s-pagination/s-pagination.js

@@ -1,32 +1,2 @@
-import { SSkeleton as e } from "../s-skeleton/s-skeleton.js";
-import "react";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Pagination as i, Stack as a, useMediaQuery as o, useTheme as s } from "@mui/material";
-//#region lib/s-pagination/s-pagination.tsx
-var c = ({ style: t }) => /* @__PURE__ */ r(a, {
-	direction: "row",
-	style: t,
-	sx: {
-		display: "inline-flex",
-		flexWrap: "wrap",
-		gap: 1
-	},
-	children: [
-		/* @__PURE__ */ n(e, { preset: "icon-button" }),
-		/* @__PURE__ */ n(e, {
-			variant: "rounded",
-			width: 120
-		}),
-		/* @__PURE__ */ n(e, { preset: "icon-button" })
-	]
-}), l = ({ loading: e, count: r = 0, ...a }) => {
-	let l = o(s().breakpoints.down("sm"));
-	return r === 0 ? /* @__PURE__ */ n(t, {}) : e ? /* @__PURE__ */ n(c, { style: a.style }) : /* @__PURE__ */ n(i, {
-		size: l ? "small" : "medium",
-		count: r,
-		...a
-	});
-};
-l.displayName = "SPagination";
-//#endregion
-export { l as SPagination, l as default };
+import { t as e } from "../s-pagination-Dt8Pk5Tp.js";
+export { e as SPagination, e as default };

package/dist/s-pagination/types.d.ts

@@ -0,0 +1,31 @@
+import { PaginationProps } from '@mui/material';
+declare module '@mui/material/Pagination' {
+    interface PaginationPropsColorOverrides {
+        error: true;
+        info: true;
+        success: true;
+        warning: true;
+    }
+}
+declare module '@mui/material/PaginationItem' {
+    interface PaginationItemPropsColorOverrides {
+        error: true;
+        info: true;
+        success: true;
+        warning: true;
+    }
+}
+export type SPaginationSize = 'small' | 'medium' | 'large';
+export type SPaginationColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+export declare const paginationColors: readonly ["primary", "secondary", "success", "error", "info", "warning"];
+export declare const paginationSizes: readonly ["small", "medium", "large"];
+export declare const paginationDimensions: Record<SPaginationSize, {
+    item: number;
+    gap: number;
+    bar: number;
+}>;
+export declare const getPaginationDimensions: (size: PaginationProps["size"]) => {
+    item: number;
+    gap: number;
+    bar: number;
+};

package/dist/s-pagination/types.js

@@ -0,0 +1,31 @@
+//#region lib/s-pagination/types.ts
+var e = [
+	"primary",
+	"secondary",
+	"success",
+	"error",
+	"info",
+	"warning"
+], t = [
+	"small",
+	"medium",
+	"large"
+], n = {
+	small: {
+		item: 26,
+		gap: 6,
+		bar: 90
+	},
+	medium: {
+		item: 32,
+		gap: 6,
+		bar: 120
+	},
+	large: {
+		item: 40,
+		gap: 6,
+		bar: 150
+	}
+}, r = (e) => n[e] ?? n.medium;
+//#endregion
+export { r as getPaginationDimensions, e as paginationColors, n as paginationDimensions, t as paginationSizes };