@solostylist/ui-kit 2.0.2 → 2.0.4

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

@@ -1,2 +1,427 @@
-import { t as e } from "../s-product-gallery-Dj9eGg5i.js";
-export { e as SProductGallery, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import { SIconButton as r } from "../s-icon-button/s-icon-button.js";
+import { SCarousel as i } from "../s-carousel/s-carousel.js";
+import * as a from "react";
+import { createElement as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, ButtonBase as u, CircularProgress as d, styled as f, useTheme as ee, useThemeProps as te } from "@mui/material";
+import { mergeSlotProps as p, useControlled as ne, useEventCallback as m, useForkRef as h } from "@mui/material/utils";
+import g from "@mui/utils/appendOwnerState";
+import _ from "@mui/icons-material/PlayArrowRounded";
+//#region lib/s-product-gallery/s-product-gallery.tsx
+var re = f(l, {
+	name: "SProductGallery",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ width: "100%" }), ie = f(l, {
+	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%"
+})), ae = f(l, {
+	name: "SProductGallery",
+	slot: "Media",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "grid",
+	height: "100%",
+	minWidth: 0,
+	position: "relative",
+	width: "100%",
+	"& > *": {
+		gridArea: "1 / 1",
+		minWidth: 0
+	}
+}), oe = f(n, {
+	name: "SProductGallery",
+	slot: "Image",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), se = f(i, {
+	name: "SProductGallery",
+	slot: "Carousel",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), ce = f("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%"
+}), le = f(l, {
+	name: "SProductGallery",
+	slot: "VideoFrame"
+})({
+	height: "100%",
+	minHeight: 0,
+	position: "relative",
+	width: "100%"
+}), ue = f(r, {
+	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) }
+	};
+}), de = f(l, {
+	name: "SProductGallery",
+	slot: "Thumbnails",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	marginTop: e.spacing(1),
+	width: "100%"
+})), fe = f(u, {
+	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
+		}
+	}]
+})), pe = f(l, {
+	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, me = 6;
+function he(e, t) {
+	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : t;
+}
+function ge(e, t) {
+	return typeof e == "number" ? he(e, typeof t == "number" ? t : v) : typeof e == "string" && e.trim() ? e : t;
+}
+function _e(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 ve = (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 ye(e, t, n) {
+	return `${y(e) || (e.type === "video" ? "Product video" : "Product image")} ${t + 1} of ${n}`;
+}
+function be(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var x = a.forwardRef(function(r, i) {
+	let { aspectRatio: l = v, defaultValue: u, getThumbnailAriaLabel: f = ve, items: y, onChange: x, slotProps: S, slots: C, sx: w, thumbnailsLabel: T = "Choose product media", thumbnailsToShow: xe = me, value: E, ...D } = te({
+		props: r,
+		name: "SProductGallery"
+	}), Se = ee(), Ce = ge(l, v), O = Math.max(1, Math.floor(he(xe, me))), we = a.useRef(y[0]?.id ?? ""), Te = a.useRef(u === void 0), [k, A] = ne({
+		controlled: E,
+		default: u ?? we.current,
+		name: "SProductGallery",
+		state: "value"
+	}), j = E !== void 0, M = y.findIndex((e) => e.id === k), Ee = !j && y.length > 0 && M < 0 && (k !== "" || Te.current), N = M >= 0 ? M : Ee ? 0 : -1, P = y[N] ?? null, F = P?.id ?? "", De = b(P), I = P?.type === "video" ? De : "", L = a.useRef(null), R = a.useRef(null), z = a.useRef(!1), [B, V] = a.useState({
+		mediaKey: "",
+		loading: !1,
+		started: !1
+	}), H = B.mediaKey === I ? B : null, U = H?.loading ?? !1, W = H?.started ?? !1, G = a.useId(), K = {
+		...D,
+		aspectRatio: Ce,
+		activeItem: P,
+		activeIndex: N,
+		defaultValue: u,
+		getThumbnailAriaLabel: f,
+		items: y,
+		onChange: x,
+		sx: w,
+		thumbnailsLabel: T,
+		thumbnailsToShow: O,
+		value: F
+	}, q = t(S?.video, K), Oe = h(R, q?.ref);
+	a.useEffect(() => {
+		!j && P && k !== F && A(F);
+	}, [
+		P,
+		F,
+		j,
+		A,
+		k
+	]), a.useEffect(() => {
+		N >= 0 && L.current?.scrollTo(N);
+	}, [N]), a.useEffect(() => {
+		z.current = !1;
+	}, [I]);
+	let ke = m((e, t) => {
+		let n = y[t];
+		!n || n.id === P?.id || (A(n.id), x?.(e, n.id));
+	}), Ae = m(() => {
+		let e = R.current;
+		if (!e || P?.type !== "video") return;
+		let t = b(P);
+		z.current = !0, V({
+			mediaKey: t,
+			loading: !0,
+			started: !1
+		}), e.play().catch(() => {
+			z.current = !1, V((n) => R.current === e && n.mediaKey === t ? {
+				...n,
+				loading: !1,
+				started: !1
+			} : n);
+		});
+	}), je = C?.root ?? re, Me = C?.stage ?? ie, Ne = C?.media ?? ae, Pe = C?.image ?? oe, Fe = C?.video ?? ce, J = C?.thumbnails ?? de, Ie = C?.carousel ?? se, Le = C?.thumbnail ?? fe, { ref: Re, sx: ze, ...Y } = g(je, p(t(S?.root, K), D), K), Be = h(Re, i), X = g(Me, t(S?.stage, K) ?? {}, K), Ve = g(Ne, t(S?.media, K) ?? {}, K), Z = g(J, t(S?.thumbnails, K) ?? {}, K), He = t(S?.carousel, K), Q = Math.min(y.length, O), $ = He?.slotProps, Ue = g(Ie, p(He, {
+		arrows: y.length > Q,
+		slotProps: {
+			...$,
+			viewport: {
+				...$?.viewport,
+				sx: [{ py: .5 }, ...e($?.viewport?.sx)]
+			}
+		}
+	}), K), We = () => {
+		if (!P) return null;
+		if (P.type === "video") {
+			let e = b(P), t = (e) => e.currentTarget === R.current, { children: n, controls: r = !0, ...i } = g(Fe, p(q, {
+				controls: !0,
+				onCanPlay: (n) => {
+					t(n) && V((t) => t.mediaKey === e && t.started ? {
+						...t,
+						loading: !1
+					} : t);
+				},
+				onEnded: (n) => {
+					t(n) && (z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onError: (n) => {
+					t(n) && (z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPause: (n) => {
+					t(n) && (z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPlay: (n) => {
+					t(n) && V({
+						mediaKey: e,
+						loading: !0,
+						started: !1
+					});
+				},
+				onPlaying: (n) => {
+					if (!t(n)) return;
+					let r = n.currentTarget, i = z.current;
+					z.current = !1, V({
+						mediaKey: e,
+						loading: !1,
+						started: !0
+					}), i && requestAnimationFrame(() => {
+						R.current === r && r.focus({ preventScroll: !0 });
+					});
+				},
+				onWaiting: (n) => {
+					t(n) && V((t) => ({
+						mediaKey: e,
+						loading: !0,
+						started: t.mediaKey === e && t.started
+					}));
+				},
+				playsInline: !0,
+				preload: "metadata"
+			}), K);
+			return /* @__PURE__ */ c(le, {
+				"aria-busy": U || void 0,
+				children: [/* @__PURE__ */ s(Fe, {
+					...i,
+					"aria-label": P.ariaLabel,
+					controls: r && W,
+					poster: P.poster,
+					ref: Oe,
+					src: P.src,
+					children: n
+				}), !W || U ? /* @__PURE__ */ s(ue, {
+					"aria-busy": U || void 0,
+					"aria-label": U ? `Loading ${P.ariaLabel}` : `Play ${P.ariaLabel}`,
+					disabled: U,
+					onClick: Ae,
+					variant: "overlay",
+					children: U ? /* @__PURE__ */ s(d, {
+						"aria-label": `Loading ${P.ariaLabel}`,
+						color: "inherit",
+						size: 28
+					}) : /* @__PURE__ */ s(_, {})
+				}) : null]
+			}, `${P.type}:${P.id}:${P.src}`);
+		}
+		let { slotProps: e, ...n } = p(t(S?.image, K), { variant: "rectangular" }), r = g(Pe, n, K), i = {
+			...e,
+			image: p(e?.image, { sx: { objectFit: "cover" } })
+		};
+		return /* @__PURE__ */ o(Pe, {
+			...r,
+			alt: P.alt,
+			key: `${P.type ?? "image"}:${P.id}:${P.src}`,
+			slotProps: i,
+			src: P.src
+		});
+	};
+	return /* @__PURE__ */ c(je, {
+		...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(w)],
+		children: [/* @__PURE__ */ s(Me, {
+			...X,
+			"aria-hidden": X["aria-hidden"] ?? !P,
+			"aria-label": X["aria-label"] ?? (P ? ye(P, N, y.length) : void 0),
+			"aria-roledescription": X["aria-roledescription"] ?? (P ? "slide" : void 0),
+			id: G,
+			role: X.role ?? (P ? "group" : void 0),
+			children: /* @__PURE__ */ s(Ne, {
+				...Ve,
+				children: We()
+			})
+		}), y.length > 1 ? /* @__PURE__ */ s(J, {
+			...Z,
+			"aria-label": Z["aria-label"] ?? T,
+			role: Z.role ?? "group",
+			children: /* @__PURE__ */ s(Ie, {
+				...Ue,
+				apiRef: L,
+				autoplay: !1,
+				centerMode: !1,
+				infinite: !1,
+				responsive: [{
+					breakpoint: Se.breakpoints.values.sm,
+					settings: { slidesToShow: Math.max(Math.ceil(Q / 2), 1) }
+				}],
+				slidesToShow: Q,
+				spaceBetween: 0,
+				children: y.map((e, r) => {
+					let i = r === N, a = {
+						...K,
+						index: r,
+						item: e,
+						selected: i
+					}, o = t(S?.thumbnail, a), { ref: l, ...u } = g(Le, o ?? {}, a), d = `${G}-thumbnail-${r}`;
+					return /* @__PURE__ */ c(Le, {
+						...u,
+						"aria-controls": G,
+						"aria-label": f(e, r, y.length),
+						"aria-pressed": i,
+						id: d,
+						onClick: (e) => {
+							o?.onClick?.(e), e.defaultPrevented || ke(e, r);
+						},
+						ref: (e) => {
+							be(l, e);
+						},
+						children: [/* @__PURE__ */ s(n, {
+							alt: "",
+							src: _e(e),
+							variant: "rectangular",
+							slotProps: { image: { sx: { objectFit: "cover" } } }
+						}), e.type === "video" ? /* @__PURE__ */ s(pe, {
+							"aria-hidden": !0,
+							children: /* @__PURE__ */ s(_, {})
+						}) : null]
+					}, e.id);
+				})
+			})
+		}) : null]
+	});
+});
+x.displayName = "SProductGallery";
+//#endregion
+export { x as SProductGallery, x as default };

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

@@ -1,11 +1,11 @@
 import { toSxArray as e } from "../utils/sx.js";
-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";
+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";
 //#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 = d(l, {
+}, h = c(o, {
 	name: "SQuantityInput",
 	slot: "Root"
-})({}), g = a((a, d) => {
-	let g = f({
-		props: a,
+})({}), g = n((n, c) => {
+	let g = l({
+		props: n,
 		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] = t({
+	}), { 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({
 		controlled: _,
 		default: m(v ?? b, b, x),
 		name: "SQuantityInput",
@@ -87,7 +87,7 @@ var p = {
 				break;
 			default: break;
 		}
-	}, J = /* @__PURE__ */ s(l, {
+	}, J = /* @__PURE__ */ i(o, {
 		component: "input",
 		inputMode: "numeric",
 		value: String(I),
@@ -146,9 +146,9 @@ var p = {
 			})
 		};
 	};
-	return /* @__PURE__ */ c(h, {
+	return /* @__PURE__ */ a(h, {
 		...P,
-		ref: d,
+		ref: c,
 		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__ */ s(i, {
+			/* @__PURE__ */ i(t, {
 				"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__ */ s(r, {})
+				children: /* @__PURE__ */ i(f, {})
 			}),
-			U && /* @__PURE__ */ s(l, { sx: {
+			U && /* @__PURE__ */ i(o, { sx: {
 				width: "1px",
 				alignSelf: "stretch",
 				bgcolor: "divider"
 			} }),
-			/* @__PURE__ */ s(u, {
+			/* @__PURE__ */ i(s, {
 				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__ */ c(o, { children: [/* @__PURE__ */ s(l, {
+				children: W == null ? E ? J : I : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(o, {
 					component: "span",
 					"aria-hidden": !0,
 					sx: { visibility: "hidden" },
 					children: W
-				}), E ? J : /* @__PURE__ */ s(l, {
+				}), E ? J : /* @__PURE__ */ i(o, {
 					component: "span",
 					sx: {
 						position: "absolute",
@@ -224,19 +224,19 @@ var p = {
 					children: I
 				})] })
 			}),
-			U && /* @__PURE__ */ s(l, { sx: {
+			U && /* @__PURE__ */ i(o, { sx: {
 				width: "1px",
 				alignSelf: "stretch",
 				bgcolor: "divider"
 			} }),
-			/* @__PURE__ */ s(i, {
+			/* @__PURE__ */ i(t, {
 				"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__ */ s(n, {})
+				children: /* @__PURE__ */ i(d, {})
 			})
 		]
 	});

package/dist/s-review/index.js

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