@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-typewriter-text/s-typewriter-text.js

@@ -1,40 +1,63 @@
-import { useEffect as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Typography as a } from "@mui/material";
+import * as e from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Box as r, Typography as i, styled as a, useMediaQuery as o, useThemeProps as s } from "@mui/material";
 //#region lib/s-typewriter-text/s-typewriter-text.tsx
-var o = ({ text: o, speed: s = 100, cursor: c = "|", cursorBlinking: l = !0, loop: u = !1, deleteSpeed: d = 50, delay: f = 1500, ...p }) => {
-	let [m, h] = t(""), [g, _] = t(0), [v, y] = t(!1), [b, x] = t(0), S = Array.isArray(o) ? o : [o], C = S[b] || "";
-	return e(() => {
-		if (!C) return;
-		let e = setTimeout(() => {
-			v ? m.length > 0 ? h((e) => e.slice(0, -1)) : (y(!1), _(0), x((e) => (e + 1) % S.length)) : g < C.length ? (h((e) => e + C[g]), _((e) => e + 1)) : u && setTimeout(() => y(!0), f);
-		}, v ? d : s);
-		return () => clearTimeout(e);
+var c = a(i, {
+	name: "STypewriterText",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function l(i, a) {
+	let l = s({
+		props: i,
+		name: "STypewriterText"
+	}), { cursor: u = "|", cursorBlinking: d = !0, delay: f = 1500, deleteSpeed: p = 50, loop: m = !1, speed: h = 100, text: g, ..._ } = l, [v, y] = e.useState(""), [b, x] = e.useState(0), [S, C] = e.useState(!1), [w, T] = e.useState(0), E = o("(prefers-reduced-motion: reduce)"), D = Array.isArray(g) ? g : [g], O = D[w] || "", k = JSON.stringify(g);
+	e.useEffect(() => {
+		y(""), x(0), C(!1), T(0);
+	}, [k]), e.useEffect(() => {
+		if (E || !O) return;
+		let e = !S && b >= O.length;
+		if (e && !m) return;
+		let t = setTimeout(() => {
+			S ? v.length > 0 ? y((e) => e.slice(0, -1)) : (C(!1), x(0), T((e) => (e + 1) % D.length)) : b < O.length ? (y((e) => e + O[b]), x((e) => e + 1)) : m && C(!0);
+		}, e ? f : S ? p : h);
+		return () => clearTimeout(t);
 	}, [
-		g,
-		v,
-		C,
-		u,
-		s,
-		d,
-		f,
+		b,
+		S,
+		O,
 		m,
-		S.length
-	]), /* @__PURE__ */ r(a, {
-		...p,
-		children: [m, /* @__PURE__ */ n(i, {
+		h,
+		p,
+		f,
+		v,
+		E,
+		D.length
+	]);
+	let A = {
+		...l,
+		cursorBlinking: d,
+		deleting: S,
+		loop: m
+	};
+	return /* @__PURE__ */ n(c, {
+		..._,
+		ownerState: A,
+		ref: a,
+		children: [E ? D[0] ?? "" : v, E ? null : /* @__PURE__ */ t(r, {
 			component: "span",
 			sx: {
-				animation: l ? "blink 1s infinite" : "none",
+				animation: d ? "blink 1s infinite" : "none",
 				"@keyframes blink": {
 					"0%, 50%": { opacity: 1 },
 					"51%, 100%": { opacity: 0 }
 				}
 			},
-			children: c
+			children: u
 		})]
 	});
-};
-o.displayName = "STypewriterText";
+}
+var u = e.forwardRef(l);
+u.displayName = "STypewriterText";
 //#endregion
-export { o as STypewriterText, o as default };
+export { u as STypewriterText, u as default };

package/dist/s-zoom-image/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SZoomImage } from './s-zoom-image';
-export type { SZoomImageProps } from './s-zoom-image';
+export type { SZoomImageOwnerState, SZoomImageProps } from './s-zoom-image';
+export type {} from '../theme/component-augmentation';

package/dist/s-zoom-image/s-zoom-image.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 import { BoxProps, SkeletonProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
 /**
  * Props interface for SZoomImage component
  */
-export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
+export interface SZoomImageProps extends Omit<BoxProps, 'children' | 'component'> {
     /** Image source URL */
     src: string;
     /** Alternative text for accessibility */
@@ -14,10 +15,10 @@ export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
     transitionDuration?: number;
     /** Border radius (number uses theme spacing, string accepts any CSS unit) */
     borderRadius?: number | string;
-    /** Custom styles applied to the image element */
-    imgStyle?: React.CSSProperties;
-    /** Custom class name for the image element */
-    imgClassName?: string;
+    /** Components used for the image and skeleton slots. */
+    slots?: SLazyImageProps['slots'];
+    /** Props for the image and skeleton slots. */
+    slotProps?: SLazyImageProps['slotProps'];
     /** Skeleton variant while loading */
     skeletonVariant?: SkeletonProps['variant'];
     /** Image height for lazy loading skeleton */
@@ -25,5 +26,13 @@ export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
     /** Image width for lazy loading skeleton */
     width?: number | string;
 }
+export type SZoomImageOwnerState = SZoomImageProps & {
+    borderRadius: number | string;
+    height: number | string;
+    skeletonVariant: NonNullable<SkeletonProps['variant']>;
+    transitionDuration: number;
+    width: number | string;
+    zoomScale: number;
+};
 export declare const SZoomImage: React.ForwardRefExoticComponent<Omit<SZoomImageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SZoomImage;

package/dist/s-zoom-image/s-zoom-image.js

@@ -1,62 +1,84 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import t, { useState as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { Box as i } from "@mui/material";
-import { motion as a, useMotionValue as o, useSpring as s, useTransform as c } from "framer-motion";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Cr28OQu3.js";
+import { toSxArray as n } from "../utils/sx.js";
+import { t as r } from "../mergeSlotProps-xl1-PgWL.js";
+import { SLazyImage as i } from "../s-lazy-image/s-lazy-image.js";
+import a, { useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { Box as c } from "@mui/material";
+import { motion as l, useMotionValue as u, useReducedMotion as d, useSpring as f, useTransform as p } from "framer-motion";
 //#region lib/s-zoom-image/s-zoom-image.tsx
-var l = t.forwardRef(({ src: t, alt: l, zoomScale: u = 1.2, transitionDuration: d = .3, borderRadius: f = 1, imgStyle: p, imgClassName: m, skeletonVariant: h = "rounded", height: g = "100%", width: _ = "100%", sx: v, ...y }, b) => {
-	let [x, S] = n(!1), C = o(50), w = o(50), T = {
+var m = e(c, {
+	name: "SZoomImage",
+	slot: "Root"
+})({}), h = a.forwardRef((e, a) => {
+	let h = t({
+		props: e,
+		name: "SZoomImage"
+	}), { src: g, alt: _, zoomScale: v = 1.2, transitionDuration: y = .3, borderRadius: b = 1, skeletonVariant: x = "rounded", height: S = "100%", width: C = "100%", slots: w, slotProps: T, onMouseLeave: E, onMouseMove: D, sx: O, ...k } = h, [A, j] = o(null), M = A === g, N = d(), P = u(50), F = u(50), I = {
 		damping: 20,
 		stiffness: 150,
 		mass: .5
-	}, E = c([s(C, T), s(w, T)], ([e, t]) => `${e}% ${t}%`);
-	return /* @__PURE__ */ r(i, {
-		ref: b,
-		onMouseMove: (e) => {
-			if (!x) return;
-			let { left: t, top: n, width: r, height: i } = e.currentTarget.getBoundingClientRect();
-			C.set((e.clientX - t) / r * 100), w.set((e.clientY - n) / i * 100);
-		},
-		onMouseLeave: () => {
-			C.set(50), w.set(50);
-		},
+	}, L = p([f(P, I), f(F, I)], ([e, t]) => `${e}% ${t}%`), R = (e) => {
+		if (D?.(e), e.defaultPrevented || !M || N) return;
+		let { left: t, top: n, width: r, height: i } = e.currentTarget.getBoundingClientRect();
+		P.set((e.clientX - t) / r * 100), F.set((e.clientY - n) / i * 100);
+	}, z = (e) => {
+		E?.(e), !e.defaultPrevented && (N || (P.set(50), F.set(50)));
+	}, B = {
+		...h,
+		borderRadius: b,
+		height: S,
+		skeletonVariant: x,
+		transitionDuration: y,
+		width: C,
+		zoomScale: v
+	}, V = r(T?.image, {
+		onLoad: () => j(g),
 		sx: {
+			borderRadius: "inherit",
+			display: "block",
+			objectFit: "cover"
+		}
+	});
+	return /* @__PURE__ */ s(m, {
+		ref: a,
+		ownerState: B,
+		onMouseMove: R,
+		onMouseLeave: z,
+		sx: [{
 			position: "relative",
 			width: "100%",
 			height: "auto",
 			overflow: "hidden",
-			borderRadius: f,
-			...v
-		},
-		...y,
-		children: /* @__PURE__ */ r(i, {
-			component: a.div,
-			style: { transformOrigin: E },
+			borderRadius: b
+		}, ...n(O)],
+		...k,
+		children: /* @__PURE__ */ s(c, {
+			component: l.div,
+			style: { transformOrigin: N ? "50% 50%" : L },
 			animate: { scale: 1 },
-			whileHover: x ? { scale: u } : { scale: 1 },
-			transition: {
+			whileHover: !N && M ? { scale: v } : { scale: 1 },
+			transition: N ? { duration: 0 } : {
 				type: "spring",
-				duration: d,
+				duration: y,
 				bounce: 0
 			},
-			children: /* @__PURE__ */ r(e, {
-				src: t,
-				alt: l,
-				variant: h,
-				height: g,
-				width: _,
-				className: m,
-				style: {
-					objectFit: "cover",
-					display: "block",
-					borderRadius: "inherit",
-					...p
-				},
-				onLoad: () => S(!0)
+			children: /* @__PURE__ */ s(i, {
+				src: g,
+				alt: _,
+				variant: x,
+				height: S,
+				width: C,
+				slots: w,
+				slotProps: {
+					...T,
+					image: V
+				}
 			})
 		})
 	});
 });
-l.displayName = "SZoomImage";
+h.displayName = "SZoomImage";
 //#endregion
-export { l as SZoomImage, l as default };
+export { h as SZoomImage, h as default };

package/dist/{selectClasses-C-QpiLPi.js → selectClasses-DoUlWfzV.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./generateUtilityClass-tRYNDrlH.js";
-import { t } from "./generateUtilityClasses-XrPHiTcM.js";
+import { t as e } from "./generateUtilityClass-PAIOm1jC.js";
+import { t } from "./generateUtilityClasses-DvX505Gy.js";
 //#region ../../node_modules/@mui/material/Select/selectClasses.mjs
 function n(t) {
 	return e("MuiSelect", t);

package/dist/{styled-BTDmdi4c.js → styled-Bog8QCl3.js}

@@ -1,8 +1,7 @@
-import { a as e, g as t, h as n, l as r, o as i, p as a } from "./createTheme-Bnw5w28O.js";
-import { i as o, o as s, r as c, s as l } from "./styled-engine-DOxAQ3qw.js";
-import { t as u } from "./defaultTheme-Bi3OTfLN.js";
+import { a as e, c as t, l as n, o as r, t as i } from "./defaultTheme-BaGcIzCh.js";
+import { a, g as o, h as s, i as c, l, p as u } from "./createTheme-xB2Em0Na.js";
 //#region ../../node_modules/@mui/utils/getDisplayName/getDisplayName.mjs
-var d = t();
+var d = o();
 function f(e, t = "") {
 	return e.displayName || e.name || t;
 }
@@ -24,18 +23,18 @@ function m(e) {
 //#endregion
 //#region ../../node_modules/@mui/system/preprocessStyles.mjs
 function h(e) {
-	let { variants: t, ...n } = e, r = {
+	let { variants: t, ...n } = e, i = {
 		variants: t,
-		style: o(n),
+		style: r(n),
 		isProcessed: !0
 	};
-	return r.style === n || t && t.forEach((e) => {
-		typeof e.style != "function" && (e.style = o(e.style));
-	}), r;
+	return i.style === n || t && t.forEach((e) => {
+		typeof e.style != "function" && (e.style = r(e.style));
+	}), i;
 }
 //#endregion
 //#region ../../node_modules/@mui/system/createStyled/createStyled.mjs
-var g = e();
+var g = c();
 function _(e) {
 	return e !== "ownerState" && e !== "theme" && e !== "sx" && e !== "as";
 }
@@ -46,97 +45,97 @@ function y(e) {
 	return e ? (t, n) => n[e] : null;
 }
 function b(e, t, n) {
-	e.theme = a(e.theme) ? n : e.theme[t] || e.theme;
+	e.theme = u(e.theme) ? n : e.theme[t] || e.theme;
 }
 function x(e, t, n) {
-	let r = typeof t == "function" ? t(e) : t;
-	if (Array.isArray(r)) return r.flatMap((t) => x(e, t, n));
-	if (Array.isArray(r?.variants)) {
+	let i = typeof t == "function" ? t(e) : t;
+	if (Array.isArray(i)) return i.flatMap((t) => x(e, t, n));
+	if (Array.isArray(i?.variants)) {
 		let t;
-		if (r.isProcessed) t = n ? v(r.style, n) : r.style;
+		if (i.isProcessed) t = n ? v(i.style, n) : i.style;
 		else {
-			let { variants: e, ...i } = r;
-			t = n ? v(o(i), n) : i;
+			let { variants: e, ...a } = i;
+			t = n ? v(r(a), n) : a;
 		}
-		return S(e, r.variants, [t], n);
+		return S(e, i.variants, [t], n);
 	}
-	return r?.isProcessed ? n ? v(o(r.style), n) : r.style : n ? v(o(r), n) : r;
+	return i?.isProcessed ? n ? v(r(i.style), n) : i.style : n ? v(r(i), n) : i;
 }
-function S(e, t, n = [], r = void 0) {
-	let i;
-	variantLoop: for (let a = 0; a < t.length; a += 1) {
-		let s = t[a];
+function S(e, t, n = [], i = void 0) {
+	let a;
+	variantLoop: for (let o = 0; o < t.length; o += 1) {
+		let s = t[o];
 		if (typeof s.props == "function") {
-			if (i ??= {
+			if (a ??= {
 				...e,
 				...e.ownerState,
 				ownerState: e.ownerState
-			}, !s.props(i)) continue;
+			}, !s.props(a)) continue;
 		} else for (let t in s.props) if (e[t] !== s.props[t] && e.ownerState?.[t] !== s.props[t]) continue variantLoop;
-		typeof s.style == "function" ? (i ??= {
+		typeof s.style == "function" ? (a ??= {
 			...e,
 			...e.ownerState,
 			ownerState: e.ownerState
-		}, n.push(r ? v(o(s.style(i)), r) : s.style(i))) : n.push(r ? v(o(s.style), r) : s.style);
+		}, n.push(i ? v(r(s.style(a)), i) : s.style(a))) : n.push(i ? v(r(s.style), i) : s.style);
 	}
 	return n;
 }
-function C(e = {}) {
-	let { themeId: t, defaultTheme: r = g, rootShouldForwardProp: a = _, slotShouldForwardProp: o = _ } = e;
+function C(n = {}) {
+	let { themeId: r, defaultTheme: i = g, rootShouldForwardProp: o = _, slotShouldForwardProp: c = _ } = n;
 	function l(e) {
-		b(e, t, r);
+		b(e, r, i);
 	}
-	return (e, t = {}) => {
-		c(e, (e) => e.filter((e) => e !== i));
-		let { name: r, slot: u, skipVariantsResolver: d, skipSx: f, overridesResolver: p = y(D(u)), ...m } = t, g = r && r.startsWith("Mui") || u ? "components" : "custom", b = d === void 0 ? u && u !== "Root" && u !== "root" || !1 : d, C = f || !1, O = _;
-		u === "Root" || u === "root" ? O = a : u ? O = o : E(e) && (O = void 0);
-		let k = s(e, {
+	return (n, r = {}) => {
+		e(n, (e) => e.filter((e) => e !== a));
+		let { name: i, slot: u, skipVariantsResolver: d, skipSx: f, overridesResolver: p = y(D(u)), ...m } = r, g = i && i.startsWith("Mui") || u ? "components" : "custom", b = d === void 0 ? u && u !== "Root" && u !== "root" || !1 : d, C = f || !1, O = _;
+		u === "Root" || u === "root" ? O = o : u ? O = c : E(n) && (O = void 0);
+		let k = t(n, {
 			shouldForwardProp: O,
-			label: T(r, u),
+			label: T(i, u),
 			...m
 		}), A = (e) => {
 			if (e.__emotion_real === e) return e;
 			if (typeof e == "function") return function(t) {
 				return x(t, e, t.theme.modularCssLayers ? g : void 0);
 			};
-			if (n(e)) {
+			if (s(e)) {
 				let t = h(e);
 				return function(e) {
 					return t.variants ? x(e, t, e.theme.modularCssLayers ? g : void 0) : e.theme.modularCssLayers ? v(t.style, g) : t.style;
 				};
 			}
 			return e;
-		}, j = (...t) => {
-			let n = [], a = t.map(A), o = [];
-			if (n.push(l), r && p && o.push(function(e) {
-				let t = e.theme.components?.[r]?.styleOverrides;
+		}, j = (...e) => {
+			let t = [], r = e.map(A), o = [];
+			if (t.push(l), i && p && o.push(function(e) {
+				let t = e.theme.components?.[i]?.styleOverrides;
 				if (!t) return null;
 				let n = {};
 				for (let r in t) n[r] = x(e, t[r], e.theme.modularCssLayers ? "theme" : void 0);
 				return p(e, n);
-			}), r && !b && o.push(function(e) {
-				let t = e.theme?.components?.[r]?.variants;
+			}), i && !b && o.push(function(e) {
+				let t = e.theme?.components?.[i]?.variants;
 				return t ? S(e, t, [], e.theme.modularCssLayers ? "theme" : void 0) : null;
-			}), C || o.push(i), Array.isArray(a[0])) {
-				let e = a.shift(), t = Array(n.length).fill(""), r = Array(o.length).fill(""), i;
-				i = [
-					...t,
+			}), C || o.push(a), Array.isArray(r[0])) {
+				let e = r.shift(), n = Array(t.length).fill(""), i = Array(o.length).fill(""), a;
+				a = [
+					...n,
 					...e,
-					...r
-				], i.raw = [
-					...t,
+					...i
+				], a.raw = [
+					...n,
 					...e.raw,
-					...r
-				], n.unshift(i);
+					...i
+				], t.unshift(a);
 			}
-			let s = k(...n, ...a, ...o);
-			return e.muiName && (s.muiName = e.muiName), process.env.NODE_ENV !== "production" && (s.displayName = w(r, u, e)), s;
+			let s = k(...t, ...r, ...o);
+			return n.muiName && (s.muiName = n.muiName), process.env.NODE_ENV !== "production" && (s.displayName = w(i, u, n)), s;
 		};
 		return k.withConfig && (j.withConfig = k.withConfig), j;
 	};
 }
 function w(e, t, n) {
-	return e ? `${e}${r(t || "")}` : `Styled(${m(n)})`;
+	return e ? `${e}${l(t || "")}` : `Styled(${m(n)})`;
 }
 function T(e, t) {
 	let n;
@@ -156,8 +155,8 @@ function O(e) {
 //#endregion
 //#region ../../node_modules/@mui/material/styles/rootShouldForwardProp.mjs
 var k = (e) => O(e) && e !== "classes", A = C({
-	themeId: l,
-	defaultTheme: u,
+	themeId: n,
+	defaultTheme: i,
 	rootShouldForwardProp: k
 });
 //#endregion

package/dist/{svgIconClasses-BtHvkhy5.js → svgIconClasses-C8D4AsMj.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./generateUtilityClass-tRYNDrlH.js";
-import { t } from "./generateUtilityClasses-XrPHiTcM.js";
+import { t as e } from "./generateUtilityClass-PAIOm1jC.js";
+import { t } from "./generateUtilityClasses-DvX505Gy.js";
 //#region ../../node_modules/@mui/material/SvgIcon/svgIconClasses.mjs
 function n(t) {
 	return e("MuiSvgIcon", t);

package/dist/switchClasses-eiq1bkQN.js

@@ -0,0 +1,23 @@
+import { t as e } from "./generateUtilityClass-PAIOm1jC.js";
+import { t } from "./generateUtilityClasses-DvX505Gy.js";
+//#region ../../node_modules/@mui/material/Switch/switchClasses.mjs
+function n(t) {
+	return e("MuiSwitch", t);
+}
+var r = t("MuiSwitch", [
+	"root",
+	"edgeStart",
+	"edgeEnd",
+	"switchBase",
+	"colorPrimary",
+	"colorSecondary",
+	"sizeSmall",
+	"sizeMedium",
+	"checked",
+	"disabled",
+	"input",
+	"thumb",
+	"track"
+]);
+//#endregion
+export { r as n, n as t };