@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-product-gallery-Dj9eGg5i.js

@@ -0,0 +1,430 @@
+import { toSxArray as e } from "./utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "./utils/slots.js";
+import { t as n } from "./useForkRef-BuNFTXxE.js";
+import { t as r } from "./useEventCallback-DGCsaRIu.js";
+import { t as i } from "./appendOwnerState-CFQTq3pb.js";
+import { t as a } from "./createSvgIcon-3y-gS0r1.js";
+import { t as o } from "./useControlled-DqNPBJNp.js";
+import { t as s } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as c } from "./s-carousel-CAyAl3ka.js";
+import { SLazyImage as l } from "./s-lazy-image/s-lazy-image.js";
+import { SIconButton as u } from "./s-icon-button/s-icon-button.js";
+import * as d from "react";
+import { createElement as ee } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Box as m, ButtonBase as h, CircularProgress as te, styled as g, useTheme as ne, useThemeProps as re } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/PlayArrowRounded.mjs
+var _ = a(/* @__PURE__ */ f("path", { d: "M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82" }), "PlayArrowRounded"), ie = g(m, {
+	name: "SProductGallery",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ width: "100%" }), ae = g(m, {
+	name: "SProductGallery",
+	slot: "Stage",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => ({
+	aspectRatio: String(e.aspectRatio),
+	backgroundColor: (t.vars ?? t).palette.background.paper,
+	borderRadius: t.radius.md,
+	overflow: "hidden",
+	position: "relative",
+	width: "100%"
+})), oe = g(m, {
+	name: "SProductGallery",
+	slot: "Media",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "grid",
+	height: "100%",
+	minWidth: 0,
+	position: "relative",
+	width: "100%",
+	"& > *": {
+		gridArea: "1 / 1",
+		minWidth: 0
+	}
+}), se = g(l, {
+	name: "SProductGallery",
+	slot: "Image",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), ce = g(c, {
+	name: "SProductGallery",
+	slot: "Carousel",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), le = g("video", {
+	name: "SProductGallery",
+	slot: "Video",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	height: "100%",
+	inset: 0,
+	maxHeight: "100%",
+	minHeight: 0,
+	objectFit: "cover",
+	position: "absolute",
+	width: "100%"
+}), ue = g(m, {
+	name: "SProductGallery",
+	slot: "VideoFrame"
+})({
+	height: "100%",
+	minHeight: 0,
+	position: "relative",
+	width: "100%"
+}), de = g(u, {
+	name: "SProductGallery",
+	slot: "VideoPlayButton"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		height: e.spacing(7),
+		left: "50%",
+		position: "absolute",
+		top: "50%",
+		transform: "translate(-50%, -50%)",
+		width: e.spacing(7),
+		zIndex: 2,
+		"&.Mui-disabled": {
+			backgroundColor: t.blackAlpha.medium,
+			color: t.common.white
+		},
+		"& svg": { fontSize: e.typography.pxToRem(32) }
+	};
+}), fe = g(m, {
+	name: "SProductGallery",
+	slot: "Thumbnails",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	marginTop: e.spacing(1),
+	width: "100%"
+})), pe = g(h, {
+	name: "SProductGallery",
+	slot: "Thumbnail",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	boxSizing: "border-box",
+	borderRadius: e.radius.md,
+	display: "block",
+	height: e.spacing(7),
+	minHeight: e.spacing(5.5),
+	minWidth: e.spacing(5.5),
+	opacity: .72,
+	overflow: "hidden",
+	padding: 0,
+	position: "relative",
+	transition: e.transitions.create("opacity"),
+	marginInline: e.spacing(.5),
+	width: `calc(100% - ${e.spacing(1)})`,
+	[e.breakpoints.down("sm")]: { height: e.spacing(6.5) },
+	"&.Mui-focusVisible": {
+		outline: 0,
+		boxShadow: `0 0 0 2px ${(e.vars ?? e).palette.primary.main}`,
+		zIndex: 2
+	},
+	"&::after": {
+		border: "2px solid transparent",
+		borderRadius: "inherit",
+		content: "\"\"",
+		inset: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		transition: e.transitions.create("border-color"),
+		zIndex: 1
+	},
+	"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: 1 } },
+	"@media (prefers-reduced-motion: reduce)": {
+		transition: "none",
+		"&::after": { transition: "none" }
+	},
+	variants: [{
+		props: ({ ownerState: e }) => e.selected,
+		style: {
+			"&::after": { borderColor: (e.vars ?? e).palette.primary.main },
+			opacity: 1
+		}
+	}]
+})), me = g(m, {
+	name: "SProductGallery",
+	slot: "VideoIndicator"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		alignItems: "center",
+		backgroundColor: e.alpha(t.common.black, .58),
+		borderRadius: e.radius.full,
+		boxShadow: e.shadows[2],
+		color: t.common.white,
+		display: "flex",
+		height: e.spacing(3.5),
+		justifyContent: "center",
+		left: "50%",
+		pointerEvents: "none",
+		position: "absolute",
+		top: "50%",
+		transform: "translate(-50%, -50%)",
+		width: e.spacing(3.5),
+		zIndex: 2,
+		"& svg": { fontSize: e.typography.pxToRem(20) }
+	};
+}), v = 1, he = 6;
+function ge(e, t) {
+	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : t;
+}
+function _e(e, t) {
+	return typeof e == "number" ? ge(e, typeof t == "number" ? t : v) : typeof e == "string" && e.trim() ? e : t;
+}
+function ve(e) {
+	return e.type === "video" ? e.thumbnailSrc ?? e.poster ?? "" : e.thumbnailSrc ?? e.src;
+}
+function y(e) {
+	return e.type === "video" ? e.ariaLabel : e.alt;
+}
+function b(e) {
+	return e ? `${e.type ?? "image"}:${e.id}:${e.src}` : "";
+}
+var ye = (e, t, n) => {
+	let r = y(e);
+	return r ? `Show ${r}, ${t + 1} of ${n}` : `Show ${e.type === "video" ? "video" : "image"} ${t + 1} of ${n}`;
+};
+function be(e, t, n) {
+	return `${y(e) || (e.type === "video" ? "Product video" : "Product image")} ${t + 1} of ${n}`;
+}
+function xe(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var x = d.forwardRef(function(a, c) {
+	let { aspectRatio: u = v, defaultValue: m, getThumbnailAriaLabel: h = ye, items: g, onChange: y, slotProps: x, slots: S, sx: C, thumbnailsLabel: w = "Choose product media", thumbnailsToShow: Se = he, value: T, ...E } = re({
+		props: a,
+		name: "SProductGallery"
+	}), Ce = ne(), we = _e(u, v), D = Math.max(1, Math.floor(ge(Se, he))), Te = d.useRef(g[0]?.id ?? ""), Ee = d.useRef(m === void 0), [O, k] = o({
+		controlled: T,
+		default: m ?? Te.current,
+		name: "SProductGallery",
+		state: "value"
+	}), A = T !== void 0, j = g.findIndex((e) => e.id === O), De = !A && g.length > 0 && j < 0 && (O !== "" || Ee.current), M = j >= 0 ? j : De ? 0 : -1, N = g[M] ?? null, P = N?.id ?? "", Oe = b(N), F = N?.type === "video" ? Oe : "", I = d.useRef(null), L = d.useRef(null), R = d.useRef(!1), [ke, z] = d.useState({
+		mediaKey: "",
+		loading: !1,
+		started: !1
+	}), B = ke.mediaKey === F ? ke : null, V = B?.loading ?? !1, H = B?.started ?? !1, U = d.useId(), W = {
+		...E,
+		aspectRatio: we,
+		activeItem: N,
+		activeIndex: M,
+		defaultValue: m,
+		getThumbnailAriaLabel: h,
+		items: g,
+		onChange: y,
+		sx: C,
+		thumbnailsLabel: w,
+		thumbnailsToShow: D,
+		value: P
+	}, G = t(x?.video, W), Ae = n(L, G?.ref);
+	d.useEffect(() => {
+		!A && N && O !== P && k(P);
+	}, [
+		N,
+		P,
+		A,
+		k,
+		O
+	]), d.useEffect(() => {
+		M >= 0 && I.current?.scrollTo(M);
+	}, [M]), d.useEffect(() => {
+		R.current = !1;
+	}, [F]);
+	let je = r((e, t) => {
+		let n = g[t];
+		!n || n.id === N?.id || (k(n.id), y?.(e, n.id));
+	}), Me = r(() => {
+		let e = L.current;
+		if (!e || N?.type !== "video") return;
+		let t = b(N);
+		R.current = !0, z({
+			mediaKey: t,
+			loading: !0,
+			started: !1
+		}), e.play().catch(() => {
+			R.current = !1, z((n) => L.current === e && n.mediaKey === t ? {
+				...n,
+				loading: !1,
+				started: !1
+			} : n);
+		});
+	}), K = S?.root ?? ie, q = S?.stage ?? ae, Ne = S?.media ?? oe, Pe = S?.image ?? se, Fe = S?.video ?? le, J = S?.thumbnails ?? fe, Ie = S?.carousel ?? ce, Le = S?.thumbnail ?? pe, { ref: Re, sx: ze, ...Y } = i(K, s(t(x?.root, W), E), W), Be = n(Re, c), X = i(q, t(x?.stage, W) ?? {}, W), Ve = i(Ne, t(x?.media, W) ?? {}, W), Z = i(J, t(x?.thumbnails, W) ?? {}, W), He = t(x?.carousel, W), Q = Math.min(g.length, D), $ = He?.slotProps, Ue = i(Ie, s(He, {
+		arrows: g.length > Q,
+		slotProps: {
+			...$,
+			viewport: {
+				...$?.viewport,
+				sx: [{ py: .5 }, ...e($?.viewport?.sx)]
+			}
+		}
+	}), W), We = () => {
+		if (!N) return null;
+		if (N.type === "video") {
+			let e = b(N), t = (e) => e.currentTarget === L.current, { children: n, controls: r = !0, ...a } = i(Fe, s(G, {
+				controls: !0,
+				onCanPlay: (n) => {
+					t(n) && z((t) => t.mediaKey === e && t.started ? {
+						...t,
+						loading: !1
+					} : t);
+				},
+				onEnded: (n) => {
+					t(n) && (R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onError: (n) => {
+					t(n) && (R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPause: (n) => {
+					t(n) && (R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPlay: (n) => {
+					t(n) && z({
+						mediaKey: e,
+						loading: !0,
+						started: !1
+					});
+				},
+				onPlaying: (n) => {
+					if (!t(n)) return;
+					let r = n.currentTarget, i = R.current;
+					R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !0
+					}), i && requestAnimationFrame(() => {
+						L.current === r && r.focus({ preventScroll: !0 });
+					});
+				},
+				onWaiting: (n) => {
+					t(n) && z((t) => ({
+						mediaKey: e,
+						loading: !0,
+						started: t.mediaKey === e && t.started
+					}));
+				},
+				playsInline: !0,
+				preload: "metadata"
+			}), W);
+			return /* @__PURE__ */ p(ue, {
+				"aria-busy": V || void 0,
+				children: [/* @__PURE__ */ f(Fe, {
+					...a,
+					"aria-label": N.ariaLabel,
+					controls: r && H,
+					poster: N.poster,
+					ref: Ae,
+					src: N.src,
+					children: n
+				}), !H || V ? /* @__PURE__ */ f(de, {
+					"aria-busy": V || void 0,
+					"aria-label": V ? `Loading ${N.ariaLabel}` : `Play ${N.ariaLabel}`,
+					disabled: V,
+					onClick: Me,
+					variant: "overlay",
+					children: V ? /* @__PURE__ */ f(te, {
+						"aria-label": `Loading ${N.ariaLabel}`,
+						color: "inherit",
+						size: 28
+					}) : /* @__PURE__ */ f(_, {})
+				}) : null]
+			}, `${N.type}:${N.id}:${N.src}`);
+		}
+		let { slotProps: e, ...n } = s(t(x?.image, W), { variant: "rectangular" }), r = i(Pe, n, W), a = {
+			...e,
+			image: s(e?.image, { sx: { objectFit: "cover" } })
+		};
+		return /* @__PURE__ */ ee(Pe, {
+			...r,
+			alt: N.alt,
+			key: `${N.type ?? "image"}:${N.id}:${N.src}`,
+			slotProps: a,
+			src: N.src
+		});
+	};
+	return /* @__PURE__ */ p(K, {
+		...Y,
+		"aria-label": Y["aria-label"] ?? "Product media gallery",
+		"aria-roledescription": Y["aria-roledescription"] ?? "carousel",
+		ref: Be,
+		role: Y.role ?? "group",
+		sx: [...e(ze), ...e(C)],
+		children: [/* @__PURE__ */ f(q, {
+			...X,
+			"aria-hidden": X["aria-hidden"] ?? !N,
+			"aria-label": X["aria-label"] ?? (N ? be(N, M, g.length) : void 0),
+			"aria-roledescription": X["aria-roledescription"] ?? (N ? "slide" : void 0),
+			id: U,
+			role: X.role ?? (N ? "group" : void 0),
+			children: /* @__PURE__ */ f(Ne, {
+				...Ve,
+				children: We()
+			})
+		}), g.length > 1 ? /* @__PURE__ */ f(J, {
+			...Z,
+			"aria-label": Z["aria-label"] ?? w,
+			role: Z.role ?? "group",
+			children: /* @__PURE__ */ f(Ie, {
+				...Ue,
+				apiRef: I,
+				autoplay: !1,
+				centerMode: !1,
+				infinite: !1,
+				responsive: [{
+					breakpoint: Ce.breakpoints.values.sm,
+					settings: { slidesToShow: Math.max(Math.ceil(Q / 2), 1) }
+				}],
+				slidesToShow: Q,
+				spaceBetween: 0,
+				children: g.map((e, n) => {
+					let r = n === M, a = {
+						...W,
+						index: n,
+						item: e,
+						selected: r
+					}, o = t(x?.thumbnail, a), { ref: s, ...c } = i(Le, o ?? {}, a), u = `${U}-thumbnail-${n}`;
+					return /* @__PURE__ */ p(Le, {
+						...c,
+						"aria-controls": U,
+						"aria-label": h(e, n, g.length),
+						"aria-pressed": r,
+						id: u,
+						onClick: (e) => {
+							o?.onClick?.(e), e.defaultPrevented || je(e, n);
+						},
+						ref: (e) => {
+							xe(s, e);
+						},
+						children: [/* @__PURE__ */ f(l, {
+							alt: "",
+							src: ve(e),
+							variant: "rectangular",
+							slotProps: { image: { sx: { objectFit: "cover" } } }
+						}), e.type === "video" ? /* @__PURE__ */ f(me, {
+							"aria-hidden": !0,
+							children: /* @__PURE__ */ f(_, {})
+						}) : null]
+					}, e.id);
+				})
+			})
+		}) : null]
+	});
+});
+x.displayName = "SProductGallery";
+//#endregion
+export { x as t };

package/dist/s-quantity-input/s-quantity-input.js

@@ -1,11 +1,11 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
-import { forwardRef as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Box as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
-import { useControlled as u } from "@mui/material/utils";
-import d from "@mui/icons-material/Add";
-import f from "@mui/icons-material/Remove";
+import { t } from "../useControlled-DqNPBJNp.js";
+import { t as n } from "../Add-CEnTWsXs.js";
+import { t as r } from "../Remove-DDEn8ek8.js";
+import { SIconButton as i } from "../s-icon-button/s-icon-button.js";
+import { forwardRef as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, Typography as u, styled as d, useThemeProps as f } from "@mui/material";
 //#region lib/s-quantity-input/s-quantity-input.tsx
 var p = {
 	small: {
@@ -29,14 +29,14 @@ var p = {
 }, m = (e, t, n) => {
 	let r = Math.max(e, t);
 	return n == null ? r : Math.min(r, n);
-}, h = c(o, {
+}, h = d(l, {
 	name: "SQuantityInput",
 	slot: "Root"
-})({}), g = n((n, c) => {
-	let g = l({
-		props: n,
+})({}), g = a((a, d) => {
+	let g = f({
+		props: a,
 		name: "SQuantityInput"
-	}), { value: _, defaultValue: v, onChange: y, min: b = 0, max: x, step: S = 1, color: C = "default", variant: w = "outlined", size: T = "medium", editable: E = !1, disabled: D = !1, "aria-label": O, "aria-labelledby": k, onKeyDown: A, role: j = "spinbutton", sx: M, tabIndex: N = D ? -1 : 0, ...P } = g, F = p[T], [I, L] = u({
+	}), { value: _, defaultValue: v, onChange: y, min: b = 0, max: x, step: S = 1, color: C = "default", variant: w = "outlined", size: T = "medium", editable: E = !1, disabled: D = !1, "aria-label": O, "aria-labelledby": k, onKeyDown: A, role: j = "spinbutton", sx: M, tabIndex: N = D ? -1 : 0, ...P } = g, F = p[T], [I, L] = t({
 		controlled: _,
 		default: m(v ?? b, b, x),
 		name: "SQuantityInput",
@@ -87,7 +87,7 @@ var p = {
 				break;
 			default: break;
 		}
-	}, J = /* @__PURE__ */ i(o, {
+	}, J = /* @__PURE__ */ s(l, {
 		component: "input",
 		inputMode: "numeric",
 		value: String(I),
@@ -146,9 +146,9 @@ var p = {
 			})
 		};
 	};
-	return /* @__PURE__ */ a(h, {
+	return /* @__PURE__ */ c(h, {
 		...P,
-		ref: c,
+		ref: d,
 		ownerState: R,
 		role: E ? void 0 : j,
 		"aria-label": E ? void 0 : O,
@@ -178,21 +178,21 @@ var p = {
 			...D ? { opacity: .5 } : {}
 		}), ...e(M)],
 		children: [
-			/* @__PURE__ */ i(t, {
+			/* @__PURE__ */ s(i, {
 				"aria-label": "Decrease",
 				size: F.iconButton,
 				color: H ? void 0 : C,
 				disabled: B,
 				sx: H ? Y : U ? [G, K] : K,
 				onClick: (e) => z(e, I - S),
-				children: /* @__PURE__ */ i(f, {})
+				children: /* @__PURE__ */ s(r, {})
 			}),
-			U && /* @__PURE__ */ i(o, { sx: {
+			U && /* @__PURE__ */ s(l, { sx: {
 				width: "1px",
 				alignSelf: "stretch",
 				bgcolor: "divider"
 			} }),
-			/* @__PURE__ */ i(s, {
+			/* @__PURE__ */ s(u, {
 				component: "span",
 				variant: F.typography,
 				sx: {
@@ -207,12 +207,12 @@ var p = {
 					color: "text.primary",
 					fontVariantNumeric: "tabular-nums"
 				},
-				children: W == null ? E ? J : I : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(o, {
+				children: W == null ? E ? J : I : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l, {
 					component: "span",
 					"aria-hidden": !0,
 					sx: { visibility: "hidden" },
 					children: W
-				}), E ? J : /* @__PURE__ */ i(o, {
+				}), E ? J : /* @__PURE__ */ s(l, {
 					component: "span",
 					sx: {
 						position: "absolute",
@@ -224,19 +224,19 @@ var p = {
 					children: I
 				})] })
 			}),
-			U && /* @__PURE__ */ i(o, { sx: {
+			U && /* @__PURE__ */ s(l, { sx: {
 				width: "1px",
 				alignSelf: "stretch",
 				bgcolor: "divider"
 			} }),
-			/* @__PURE__ */ i(t, {
+			/* @__PURE__ */ s(i, {
 				"aria-label": "Increase",
 				size: F.iconButton,
 				color: H ? void 0 : C,
 				disabled: V,
 				sx: H ? Y : U ? [G, K] : K,
 				onClick: (e) => z(e, I + S),
-				children: /* @__PURE__ */ i(d, {})
+				children: /* @__PURE__ */ s(n, {})
 			})
 		]
 	});

package/dist/s-review/index.js

@@ -1,2 +1,2 @@
-import { SReview as e } from "./s-review.js";
+import { t as e } from "../s-review--Q2C0ngO.js";
 export { e as SReview, e as default };