@solostylist/ui-kit 2.0.2 → 2.0.4

package/dist/s-review/s-review.js

@@ -1,2 +1,272 @@
-import { t as e } from "../s-review--Q2C0ngO.js";
-export { e as SReview, e as default };
+import { i as e } from "../utils-CMeAWSRO.js";
+import { toSxArray as t } from "../utils/sx.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import { SSkeleton as r } from "../s-skeleton/s-skeleton.js";
+import { SAvatar as i } from "../s-avatar/s-avatar.js";
+import { SImageViewer as a } from "../s-image-viewer/s-image-viewer.js";
+import { SRating as ee } from "../s-rating/s-rating.js";
+import o, { useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ThumbDown as te, ThumbUp as d } from "@mui/icons-material";
+import { Box as f, ButtonBase as ne, Divider as p, IconButton as m, Stack as h, Typography as g, styled as _, useTheme as re, useThemeProps as ie } from "@mui/material";
+import { useControlled as v } from "@mui/material/utils";
+//#region lib/s-review/s-review.tsx
+var y = _(f, {
+	name: "SReview",
+	slot: "Root"
+})({}), b = o.forwardRef(function(o, _) {
+	let b = ie({
+		props: o,
+		name: "SReview"
+	}), ae = re(), { reviewId: x, userName: S, userAvatar: C, rating: w, onRatingChange: oe, reviewContent: T, datetime: E, images: D, userHelpfulVote: O, defaultUserHelpfulVote: k = null, helpfulYes: A, defaultHelpfulYes: j = 0, helpfulNo: se, defaultHelpfulNo: M = 0, onHelpfulVote: ce, showHelpfulSection: N = !0, avatarSize: P = 48, maxRating: F = 5, readOnly: I = !0, showDivider: L = !0, loading: R = !1, sx: z, ...B } = b, V = s(), H = x ?? B.id ?? V, [U, W] = v({
+		controlled: O,
+		default: k,
+		name: "SReview",
+		state: "userHelpfulVote"
+	}), [G, le] = v({
+		controlled: A,
+		default: j,
+		name: "SReview",
+		state: "helpfulYes"
+	}), [K, ue] = v({
+		controlled: se,
+		default: M,
+		name: "SReview",
+		state: "helpfulNo"
+	}), q = {
+		...b,
+		avatarSize: P,
+		defaultHelpfulNo: M,
+		defaultHelpfulYes: j,
+		defaultUserHelpfulVote: k,
+		helpfulNo: K,
+		helpfulYes: G,
+		maxRating: F,
+		loading: R,
+		readOnly: I,
+		reviewId: H,
+		showDivider: L,
+		showHelpfulSection: N,
+		userHelpfulVote: U
+	}, [de, J] = c(!1), [Y, X] = c(null), Z = (e, t) => {
+		let n = U === t ? null : t, r = G, i = K;
+		U === "yes" && (r = Math.max(0, r - 1)), U === "no" && (i = Math.max(0, i - 1)), n === "yes" && (r += 1), n === "no" && (i += 1), W(n), le(r), ue(i), ce?.(e, H, n);
+	}, Q = D?.map((e, t) => ({
+		id: `review-${H}-image-${t}`,
+		type: "image",
+		url: e,
+		title: `Review image ${t + 1}`,
+		desc: `Image ${t + 1} from ${S}'s review`
+	})) ?? [], fe = (e) => {
+		let t = Q[e];
+		t && (X(t), J(!0));
+	}, $ = () => {
+		J(!1), X(null);
+	}, pe = (e, t) => {
+		X(t);
+	}, me = e(E);
+	return R ? /* @__PURE__ */ u(y, {
+		...B,
+		ref: _,
+		ownerState: q,
+		sx: [{ py: 2 }, ...t(z)],
+		children: [/* @__PURE__ */ u(h, {
+			direction: "row",
+			spacing: 2,
+			sx: { alignItems: "flex-start" },
+			children: [/* @__PURE__ */ l(r, {
+				variant: "circular",
+				width: P,
+				height: P,
+				sx: { flexShrink: 0 }
+			}), /* @__PURE__ */ u(f, {
+				sx: { flex: 1 },
+				children: [
+					/* @__PURE__ */ u(h, {
+						direction: "row",
+						spacing: 2,
+						sx: {
+							alignItems: "center",
+							mb: 1
+						},
+						children: [/* @__PURE__ */ l(r, {
+							width: 120,
+							height: 20
+						}), /* @__PURE__ */ l(r, {
+							width: 80,
+							height: 16
+						})]
+					}),
+					/* @__PURE__ */ l(f, {
+						sx: { mb: 1 },
+						children: /* @__PURE__ */ l(r, {
+							width: 100,
+							height: 20
+						})
+					}),
+					/* @__PURE__ */ l(r, {
+						height: 16,
+						sx: { mb: .5 }
+					}),
+					N && /* @__PURE__ */ u(h, {
+						direction: "row",
+						spacing: 1,
+						sx: {
+							display: "inline-flex",
+							alignItems: "center"
+						},
+						children: [
+							/* @__PURE__ */ l(r, {
+								width: 140,
+								height: 16,
+								sx: { mr: 2 }
+							}),
+							/* @__PURE__ */ l(r, { preset: "icon-button" }),
+							/* @__PURE__ */ l(r, {
+								width: 20,
+								height: 16
+							}),
+							/* @__PURE__ */ l(r, { preset: "icon-button" }),
+							/* @__PURE__ */ l(r, {
+								width: 20,
+								height: 16
+							})
+						]
+					})
+				]
+			})]
+		}), L && /* @__PURE__ */ l(p, { sx: { mt: 2 } })]
+	}) : /* @__PURE__ */ u(y, {
+		...B,
+		ref: _,
+		ownerState: q,
+		sx: [{ py: 2 }, ...t(z)],
+		children: [
+			/* @__PURE__ */ u(h, {
+				direction: "row",
+				spacing: 2,
+				sx: { alignItems: "flex-start" },
+				children: [/* @__PURE__ */ l(i, {
+					src: C,
+					name: S,
+					size: P
+				}), /* @__PURE__ */ u(f, {
+					sx: { flex: 1 },
+					children: [
+						/* @__PURE__ */ l(g, {
+							variant: "subtitle1",
+							children: S
+						}),
+						/* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(ee, {
+							value: w,
+							max: F,
+							onChange: oe,
+							readOnly: I
+						}) }),
+						/* @__PURE__ */ l(g, {
+							variant: "body1",
+							sx: { lineHeight: 1.6 },
+							children: T
+						}),
+						/* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(g, {
+							variant: "caption",
+							sx: { mb: 2 },
+							children: me
+						}) }),
+						D && D.length > 0 && /* @__PURE__ */ l(h, {
+							direction: "row",
+							sx: {
+								mt: 1,
+								mb: 2,
+								flexWrap: "wrap",
+								gap: 1
+							},
+							children: D.map((e, t) => /* @__PURE__ */ l(ne, {
+								"aria-label": `Open review image ${t + 1}`,
+								component: "div",
+								onClick: () => fe(t),
+								sx: {
+									borderRadius: 1,
+									transition: (e) => e.transitions.create("opacity", { duration: e.transitions.duration.shorter }),
+									"&.Mui-focusVisible": {
+										outline: "2px solid",
+										outlineColor: "primary.main",
+										outlineOffset: 2
+									},
+									"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: ae.interaction.mediaHoverOpacity } }
+								},
+								children: /* @__PURE__ */ l(n, {
+									src: e,
+									alt: `Review image ${t + 1}`,
+									width: 80,
+									height: 80,
+									slotProps: { image: { sx: { objectFit: "cover" } } }
+								})
+							}, `${e}-${t}`))
+						}),
+						N && /* @__PURE__ */ u(h, {
+							direction: "row",
+							spacing: 1,
+							sx: {
+								display: "inline-flex",
+								alignItems: "center"
+							},
+							children: [
+								/* @__PURE__ */ l(g, {
+									variant: "body2",
+									sx: { mr: 2 },
+									children: "Was this review helpful?"
+								}),
+								/* @__PURE__ */ l(m, {
+									"aria-label": "Mark review as helpful",
+									"aria-pressed": U === "yes",
+									onClick: (e) => Z(e, "yes"),
+									sx: {
+										color: U === "yes" ? "primary.main" : "text.secondary",
+										"&:hover": { backgroundColor: "action.hover" }
+									},
+									children: /* @__PURE__ */ l(d, { fontSize: "small" })
+								}),
+								/* @__PURE__ */ l(g, {
+									variant: "caption",
+									children: G
+								}),
+								/* @__PURE__ */ l(m, {
+									"aria-label": "Mark review as not helpful",
+									"aria-pressed": U === "no",
+									onClick: (e) => Z(e, "no"),
+									sx: {
+										color: U === "no" ? "error.main" : "text.secondary",
+										ml: 1,
+										"&:hover": { backgroundColor: "action.hover" }
+									},
+									children: /* @__PURE__ */ l(te, { fontSize: "small" })
+								}),
+								/* @__PURE__ */ l(g, {
+									variant: "caption",
+									children: K
+								})
+							]
+						})
+					]
+				})]
+			}),
+			L && /* @__PURE__ */ l(p, { sx: { mt: 2 } }),
+			/* @__PURE__ */ l(a, {
+				"aria-label": "Review media viewer",
+				open: de,
+				onClose: $,
+				onCloseButtonClick: $,
+				selectedItem: Y,
+				onItemChange: pe,
+				mediaItems: Q,
+				showNavigation: Q.length > 1,
+				showThumbnailDock: Q.length > 1,
+				showCounter: Q.length > 1
+			})
+		]
+	});
+});
+b.displayName = "SReview";
+//#endregion
+export { b as SReview, b as default };

package/dist/s-scroll-reveal/s-scroll-reveal.js

@@ -1,12 +1,11 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Dw9dmKyT.js";
-import { useScrollAnimation as n } from "../hooks/use-scroll-animation.js";
+import { useScrollAnimation as e } from "../hooks/use-scroll-animation.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
 import r from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { Box as a } from "@mui/material";
 import { motion as o, useReducedMotion as s } from "framer-motion";
 //#region lib/s-scroll-reveal/s-scroll-reveal.tsx
-var c = e(a, {
+var c = t(a, {
 	name: "SScrollReveal",
 	slot: "Root"
 })({ overflow: "hidden" });
@@ -16,9 +15,9 @@ function l(e) {
 function u(e, t, n, r) {
 	return t ? e ? "visible" : "hidden" : e ? r : n;
 }
-var d = r.forwardRef(function(e, d) {
-	let f = t({
-		props: e,
+var d = r.forwardRef(function(t, d) {
+	let f = n({
+		props: t,
 		name: "SScrollReveal"
 	}), { children: p, duration: m = .6, ease: h = "easeOut", threshold: g, rootMargin: _, delay: v, direction: y, distance: b, scaleOnReveal: x = !0, rotateOnReveal: S = !1, stagger: C = !0, staggerDelay: w = .1, sx: T, ...E } = f, D = {
 		...f,
@@ -28,7 +27,7 @@ var d = r.forwardRef(function(e, d) {
 		scaleOnReveal: x,
 		stagger: C,
 		staggerDelay: w
-	}, O = s(), { ref: k, animate: A, initialPosition: j, finalPosition: M } = n({
+	}, O = s(), { ref: k, animate: A, initialPosition: j, finalPosition: M } = e({
 		threshold: g,
 		rootMargin: _,
 		delay: v,

package/dist/s-scroll-to-top/s-scroll-to-top.js

@@ -1,37 +1,36 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Dw9dmKyT.js";
-import { reducedMotionMedia as n } from "../theme/components/action-styles.js";
-import { t as r } from "../ArrowUpward-udL1ltj2.js";
-import { SIconButton as i } from "../s-icon-button/s-icon-button.js";
-import * as a from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { useMediaQuery as s, useScrollTrigger as c } from "@mui/material";
+import { reducedMotionMedia as e } from "../theme/components/action-styles.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { useMediaQuery as o, useScrollTrigger as s } from "@mui/material";
+import c from "@mui/icons-material/ArrowUpward";
 //#region lib/s-scroll-to-top/s-scroll-to-top.tsx
-var l = e(i, {
+var l = n(t, {
 	name: "SScrollToTop",
 	slot: "Root"
-})(({ theme: e, ownerState: t }) => {
-	let r = e.vars ?? e;
+})(({ theme: t, ownerState: n }) => {
+	let r = t.vars ?? t;
 	return {
 		position: "fixed",
-		bottom: e.spacing(2),
-		right: e.spacing(2),
+		bottom: t.spacing(2),
+		right: t.spacing(2),
 		zIndex: r.zIndex.fab,
-		opacity: +!!t.isScrolled,
-		visibility: t.isScrolled ? "visible" : "hidden",
-		transition: [e.transitions.create(["opacity", "visibility"]), e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter })].join(","),
-		[n]: { transition: "none" }
+		opacity: +!!n.isScrolled,
+		visibility: n.isScrolled ? "visible" : "hidden",
+		transition: [t.transitions.create(["opacity", "visibility"]), t.transitions.create(["background-color", "color"], { duration: t.transitions.duration.shorter })].join(","),
+		[e]: { transition: "none" }
 	};
-}), u = a.forwardRef(function(e, n) {
-	let { target: i, ...a } = t({
+}), u = i.forwardRef(function(e, t) {
+	let { target: n, ...i } = r({
 		props: e,
 		name: "SScrollToTop"
-	}), { "aria-label": u = "Scroll to top", disableHysteresis: d = !0, icon: f, onClick: p, sx: m, tabIndex: h = 0, threshold: g = 100, ..._ } = a, v = c({
+	}), { "aria-label": u = "Scroll to top", disableHysteresis: d = !0, icon: f, onClick: p, sx: m, tabIndex: h = 0, threshold: g = 100, ..._ } = i, v = s({
 		disableHysteresis: d,
-		target: i,
+		target: n,
 		threshold: g
-	}), y = s("(prefers-reduced-motion: reduce)"), b = {
-		...a,
+	}), y = o("(prefers-reduced-motion: reduce)"), b = {
+		...i,
 		"aria-label": u,
 		disableHysteresis: d,
 		isScrolled: v,
@@ -39,15 +38,15 @@ var l = e(i, {
 		threshold: g
 	}, x = (e) => {
 		if (p?.(e), e.defaultPrevented) return;
-		let t = i === void 0 ? typeof window > "u" ? null : window : i;
+		let t = n === void 0 ? typeof window > "u" ? null : window : n;
 		typeof t?.scrollTo == "function" && t.scrollTo({
 			top: 0,
 			behavior: y ? "auto" : "smooth"
 		});
 	};
-	return /* @__PURE__ */ o(l, {
+	return /* @__PURE__ */ a(l, {
 		..._,
-		ref: n,
+		ref: t,
 		"aria-hidden": v ? void 0 : !0,
 		"aria-label": u,
 		onClick: x,
@@ -55,9 +54,9 @@ var l = e(i, {
 		tabIndex: v ? h : -1,
 		variant: "overlay",
 		sx: m,
-		children: f ?? /* @__PURE__ */ o(r, {})
+		children: f ?? /* @__PURE__ */ a(c, {})
 	});
-}), d = a.memo(u);
+}), d = i.memo(u);
 d.displayName = "SScrollToTop";
 //#endregion
 export { d as SScrollToTop, d as default };

package/dist/s-scroll-velocity/scroll-velocity-row.js

@@ -1,9 +1,9 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../useForkRef-BuNFTXxE.js";
-import { ScrollVelocityContext as n } from "./scroll-velocity-container.js";
-import r, { useContext as i, useEffect as a, useRef as o, useState as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-import { Box as l, useTheme as u } from "@mui/material";
+import { ScrollVelocityContext as t } from "./scroll-velocity-container.js";
+import n, { useContext as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { Box as c, useTheme as l } from "@mui/material";
+import { useForkRef as u } from "@mui/material/utils";
 import { motion as d, useAnimationFrame as f, useMotionValue as p, useScroll as m, useSpring as h, useTransform as g, useVelocity as _ } from "framer-motion";
 //#region lib/s-scroll-velocity/scroll-velocity-row.tsx
 var v = (e, t, n) => {
@@ -13,12 +13,12 @@ var v = (e, t, n) => {
 function y(e) {
 	return Array.from({ length: e }, (e, t) => `scroll-velocity-copy-${t + 1}`);
 }
-var b = r.forwardRef(function({ children: n, baseVelocity: i = 5, direction: m = 1, spacing: h = 0, sx: _, velocityFactor: b, ...x }, S) {
-	let C = u(), w = o(null), T = t(w, S), E = o(null), [D, O] = s(1), k = p(0), A = o(m >= 0 ? -1 : 1), j = o(m >= 0 ? -1 : 1), M = p(0), N = o(!0), P = o(!0), F = o(!1), I = r.useMemo(() => y(D), [D]), L = C.spacing(h);
-	a(() => {
+var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m = 1, spacing: h = 0, sx: _, velocityFactor: b, ...x }, S) {
+	let C = l(), w = a(null), T = u(w, S), E = a(null), [D, O] = o(1), k = p(0), A = a(m >= 0 ? -1 : 1), j = a(m >= 0 ? -1 : 1), M = p(0), N = a(!0), P = a(!0), F = a(!1), I = n.useMemo(() => y(D), [D]), L = C.spacing(h);
+	i(() => {
 		let e = m >= 0 ? -1 : 1, t = A.current;
 		A.current = e, j.current *= e / t;
-	}, [m]), a(() => {
+	}, [m]), i(() => {
 		let e = w.current, t = E.current, n = t?.parentElement;
 		if (!e || !t || !n) return;
 		let r = () => {
@@ -45,23 +45,23 @@ var b = r.forwardRef(function({ children: n, baseVelocity: i = 5, direction: m =
 			i.disconnect(), a.disconnect(), document.removeEventListener("visibilitychange", o), s.removeEventListener("change", c);
 		};
 	}, [
-		n,
+		t,
 		L,
 		M
 	]);
 	let R = g([k, M], ([e, t]) => `${-v(0, Number(t) || 1, -(Number(e) || 0))}px`);
 	return f((e, t) => {
 		if (!N.current || !P.current || F.current) return;
-		let n = t / 1e3, r = b.get(), a = Math.min(5, Math.abs(r)), o = 1 + a;
+		let n = t / 1e3, i = b.get(), a = Math.min(5, Math.abs(i)), o = 1 + a;
 		if (a > .1) {
-			let e = r >= 0 ? 1 : -1;
+			let e = i >= 0 ? 1 : -1;
 			j.current = A.current * e;
 		}
 		let s = M.get() ?? 0;
 		if (s <= 0) return;
-		let c = s * i / 100, l = j.current * c * o * n;
+		let c = s * r / 100, l = j.current * c * o * n;
 		k.set(k.get() + l);
-	}), /* @__PURE__ */ c(l, {
+	}), /* @__PURE__ */ s(c, {
 		ref: T,
 		sx: [{
 			width: "100%",
@@ -69,7 +69,7 @@ var b = r.forwardRef(function({ children: n, baseVelocity: i = 5, direction: m =
 			whiteSpace: "nowrap"
 		}, ...e(_)],
 		...x,
-		children: /* @__PURE__ */ c(d.div, {
+		children: /* @__PURE__ */ s(d.div, {
 			style: {
 				display: "inline-flex",
 				alignItems: "center",
@@ -78,10 +78,10 @@ var b = r.forwardRef(function({ children: n, baseVelocity: i = 5, direction: m =
 				userSelect: "none",
 				x: R
 			},
-			children: I.map((e, t) => /* @__PURE__ */ c(l, {
-				ref: t === 0 ? E : null,
-				"aria-hidden": t !== 0,
-				inert: t !== 0,
+			children: I.map((e, n) => /* @__PURE__ */ s(c, {
+				ref: n === 0 ? E : null,
+				"aria-hidden": n !== 0,
+				inert: n !== 0,
 				sx: {
 					display: "inline-flex",
 					flexShrink: 0,
@@ -89,29 +89,29 @@ var b = r.forwardRef(function({ children: n, baseVelocity: i = 5, direction: m =
 					columnGap: L
 				},
 				component: "div",
-				children: n
+				children: t
 			}, e))
 		})
 	});
-}), x = r.forwardRef(function(e, t) {
+}), x = n.forwardRef(function(e, t) {
 	let { scrollY: n } = m(), r = g(h(_(n), {
 		damping: 50,
 		stiffness: 400
 	}), (e) => (e < 0 ? -1 : 1) * Math.min(5, Math.abs(e) / 1e3 * 5));
-	return /* @__PURE__ */ c(b, {
+	return /* @__PURE__ */ s(b, {
 		...e,
 		ref: t,
 		velocityFactor: r
 	});
-}), S = r.forwardRef(function(e, t) {
-	let r = i(n);
-	return r ? /* @__PURE__ */ c(b, {
+}), S = n.forwardRef(function(e, n) {
+	let i = r(t);
+	return i ? /* @__PURE__ */ s(b, {
 		...e,
-		ref: t,
-		velocityFactor: r
-	}) : /* @__PURE__ */ c(x, {
+		ref: n,
+		velocityFactor: i
+	}) : /* @__PURE__ */ s(x, {
 		...e,
-		ref: t
+		ref: n
 	});
 });
 //#endregion