@solostylist/ui-kit 1.0.225 → 1.0.226

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

@@ -1,184 +1,40 @@
-import { n as e } from "../s-image-modal-Za71QD3d.js";
-import t from "../s-lazy-image/s-lazy-image.js";
-import { useEffect as n, useId as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Box as c, Paper as l, Skeleton as u, Typography as d } from "@mui/material";
-import { AnimatePresence as f, motion as p } from "framer-motion";
+import { t as e } from "../s-image-modal-hhRD4727.js";
+import { GalleryGridItem as t } from "./gallery-grid-item.js";
+import { applyLayoutVariant as n, getLayoutDimensions as r } from "./gallery-layout.js";
+import { useCallback as i, useEffect as a, useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, Paper as d, Skeleton as f } from "@mui/material";
+import { AnimatePresence as p, motion as m } from "framer-motion";
 //#region lib/s-gallery/s-gallery.tsx
-function m(e) {
-	return new Promise((t) => {
-		let n = () => {
-			e.removeEventListener("canplay", n), t();
-		};
-		e.addEventListener("canplay", n, { once: !0 });
-	});
-}
-function h(e) {
-	return e % 3 == 0 ? 3 : e % 2 == 0 ? 2 : 4;
-}
-var g = ({ item: e, sx: r, onClick: l }) => {
-	let u = i(null), [d, f] = a(!1), [p, h] = a(!0);
-	if (n(() => {
-		let e = new IntersectionObserver((e) => {
-			e.forEach((e) => f(e.isIntersecting));
-		}, {
-			root: null,
-			rootMargin: "50px",
-			threshold: .1
-		}), t = u.current;
-		return t && e.observe(t), () => {
-			t && e.unobserve(t);
-		};
-	}, []), n(() => {
-		let e = !0, t = u.current;
-		return d ? (async () => {
-			if (!(!t || !d || !e)) try {
-				if (t.readyState < 3 && (h(!0), await m(t)), !e) return;
-				h(!1), await t.play();
-			} catch (e) {
-				console.warn("Video playback failed:", e);
-			}
-		})() : t && t.pause(), () => {
-			e = !1, t && (t.pause(), t.removeAttribute("src"), t.load());
-		};
-	}, [d]), e.type === "video") return /* @__PURE__ */ s(c, {
-		sx: {
-			position: "relative",
-			overflow: "hidden",
-			width: "100%",
-			height: "100%",
-			...r
-		},
-		children: [/* @__PURE__ */ o(c, {
-			component: "video",
-			ref: u,
-			onClick: l,
-			playsInline: !0,
-			muted: !0,
-			loop: !0,
-			preload: "auto",
-			sx: {
-				width: "100%",
-				height: "100%",
-				objectFit: "cover",
-				opacity: p ? .8 : 1,
-				transition: "opacity 0.2s",
-				transform: "translateZ(0)",
-				willChange: "transform",
-				display: "block"
-			},
-			children: /* @__PURE__ */ o("source", {
-				src: e.url,
-				type: "video/mp4"
-			})
-		}), p && /* @__PURE__ */ o(c, {
-			sx: {
-				position: "absolute",
-				inset: 0,
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				bgcolor: "action.disabled"
-			},
-			children: /* @__PURE__ */ o(c, { sx: {
-				width: 24,
-				height: 24,
-				borderRadius: "50%",
-				border: "2px solid",
-				borderColor: "divider",
-				borderTopColor: "primary.main",
-				animation: "spin 0.8s linear infinite",
-				"@keyframes spin": { to: { transform: "rotate(360deg)" } }
-			} })
-		})]
-	});
-	let g = r && typeof r == "object" && "objectFit" in r && typeof r.objectFit == "string" ? r.objectFit : "cover";
-	return /* @__PURE__ */ o(c, {
-		onClick: l,
-		sx: {
-			width: "100%",
-			height: "100%",
-			...r
-		},
-		children: /* @__PURE__ */ o(t, {
-			src: e.url,
-			alt: e.title ?? "",
-			style: {
-				objectFit: g,
-				cursor: l ? "pointer" : "default",
-				display: "block",
-				width: "100%",
-				height: "100%"
-			}
-		})
-	});
-}, _ = (e, t) => {
-	switch (t) {
-		case "grid": return {
-			colSpan: 1,
-			rowSpan: 2
-		};
-		case "masonry": return {
-			colSpan: 1,
-			rowSpan: h(e)
-		};
-		case "spotlight": return e === 0 ? {
-			colSpan: 2,
-			rowSpan: 4
-		} : {
-			colSpan: 1,
-			rowSpan: 2
-		};
-		case "featured": return e === 0 ? {
-			colSpan: 2,
-			rowSpan: 6
-		} : {
-			colSpan: 1,
-			rowSpan: 2
-		};
-		case "highlight": return e === 0 ? {
-			colSpan: 3,
-			rowSpan: 6
-		} : {
-			colSpan: 1,
-			rowSpan: 2
-		};
-		case "custom": return {
-			colSpan: 1,
-			rowSpan: 2
-		};
-	}
-}, v = (e, t) => t === "custom" ? e : e.map((e, n) => {
-	let { colSpan: r, rowSpan: i } = _(n, t);
-	return {
-		...e,
-		colSpan: r,
-		rowSpan: i
-	};
-}), y = ({ mediaItems: t, variant: i = "masonry", loading: m = !1, skeletonCount: h = 6 }) => {
-	let [y, b] = a(null), [x, S] = a(() => v(t, i)), [C, w] = a(!1), T = r();
-	n(() => {
-		S(v(t, i));
-	}, [t, i]);
-	let E = Array.from({ length: h }, (e, t) => ({
-		id: `${i}-skeleton-${t + 1}`,
-		..._(t, i)
-	}));
-	return /* @__PURE__ */ s(c, {
+var h = ({ mediaItems: h, variant: g = "masonry", loading: _ = !1, skeletonCount: v = 6 }) => {
+	let [y, b] = s(null), [x, S] = s(() => n(h, g)), [C, w] = s(!1), T = o();
+	a(() => {
+		S(n(h, g));
+	}, [h, g]);
+	let E = Array.from({ length: v }, (e, t) => ({
+		id: `${g}-skeleton-${t + 1}`,
+		...r(t, g)
+	})), D = i(() => w(!0), []), O = i((e, t) => {
+		if (w(!1), Math.abs(t) > 50) {
+			let n = [...x], r = n[e], i = t > 0 ? Math.min(e + 1, x.length - 1) : Math.max(e - 1, 0);
+			n.splice(e, 1), n.splice(i, 0, r), S(n);
+		}
+	}, [x]);
+	return /* @__PURE__ */ l(u, {
 		sx: {
 			width: "100%",
 			position: "relative",
 			zIndex: 1
 		},
-		children: [/* @__PURE__ */ o(e, {
+		children: [/* @__PURE__ */ c(e, {
 			selectedItem: y,
 			isOpen: !!y,
 			onClose: () => b(null),
 			onItemChange: b,
 			mediaItems: x
-		}), /* @__PURE__ */ o(f, {
+		}), /* @__PURE__ */ c(p, {
 			mode: "wait",
-			children: !y && /* @__PURE__ */ o(p.div, {
+			children: !y && /* @__PURE__ */ c(m.div, {
 				initial: "hidden",
 				animate: "visible",
 				exit: "hidden",
@@ -189,7 +45,7 @@ var g = ({ item: e, sx: r, onClick: l }) => {
 						transition: { staggerChildren: .1 }
 					}
 				},
-				children: /* @__PURE__ */ o(c, {
+				children: /* @__PURE__ */ c(u, {
 					sx: {
 						display: "grid",
 						gridTemplateColumns: {
@@ -201,7 +57,7 @@ var g = ({ item: e, sx: r, onClick: l }) => {
 						gridAutoRows: "60px",
 						position: "relative"
 					},
-					children: m ? E.map(({ id: e, colSpan: t, rowSpan: n }) => /* @__PURE__ */ o(l, {
+					children: _ ? E.map(({ id: e, colSpan: t, rowSpan: n }) => /* @__PURE__ */ c(d, {
 						sx: {
 							position: "relative",
 							overflow: "hidden",
@@ -209,7 +65,7 @@ var g = ({ item: e, sx: r, onClick: l }) => {
 							gridRow: `span ${n}`,
 							gridColumn: `span ${t}`
 						},
-						children: /* @__PURE__ */ o(u, {
+						children: /* @__PURE__ */ c(f, {
 							variant: "rectangular",
 							animation: "wave",
 							sx: {
@@ -218,122 +74,20 @@ var g = ({ item: e, sx: r, onClick: l }) => {
 								transform: "none"
 							}
 						})
-					}, e)) : x.map((e, t) => /* @__PURE__ */ o(p.div, {
-						layoutId: `media-${e.id}-${T}`,
-						onClick: () => !C && b(e),
-						variants: {
-							hidden: {
-								y: 50,
-								scale: .9,
-								opacity: 0
-							},
-							visible: {
-								y: 0,
-								scale: 1,
-								opacity: 1,
-								transition: {
-									type: "spring",
-									stiffness: 350,
-									damping: 25,
-									delay: t * .05
-								}
-							}
-						},
-						whileHover: {
-							filter: "brightness(1.1)",
-							zIndex: 10
-						},
-						drag: !0,
-						dragConstraints: {
-							left: 0,
-							right: 0,
-							top: 0,
-							bottom: 0
-						},
-						dragElastic: 1,
-						onDragStart: () => w(!0),
-						onDragEnd: (e, n) => {
-							w(!1);
-							let r = n.offset.x + n.offset.y;
-							if (Math.abs(r) > 50) {
-								let e = [...x], n = e[t], i = r > 0 ? Math.min(t + 1, x.length - 1) : Math.max(t - 1, 0);
-								e.splice(t, 1), e.splice(i, 0, n), S(e);
-							}
-						},
-						style: {
-							position: "relative",
-							gridRow: e.rowSpan ? `span ${e.rowSpan}` : "span 2",
-							gridColumn: e.colSpan ? `span ${e.colSpan}` : "span 1"
-						},
-						children: /* @__PURE__ */ s(l, {
-							sx: {
-								position: "relative",
-								overflow: "hidden",
-								borderRadius: 1,
-								width: "100%",
-								height: "100%",
-								cursor: "grab",
-								"&:active": { cursor: "grabbing" },
-								"&:hover .hover-overlay": { opacity: 1 }
-							},
-							children: [/* @__PURE__ */ o(g, {
-								item: e,
-								sx: {
-									position: "absolute",
-									inset: 0,
-									width: "100%",
-									height: "100%"
-								},
-								onClick: () => !C && b(e)
-							}), (e.title || e.desc) && /* @__PURE__ */ s(c, {
-								className: "hover-overlay",
-								sx: {
-									position: "absolute",
-									inset: 0,
-									display: "flex",
-									flexDirection: "column",
-									justifyContent: "flex-end",
-									padding: 1.5,
-									pointerEvents: "none",
-									opacity: 0,
-									transition: "opacity 0.2s ease-in-out",
-									color: "common.white",
-									background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent)"
-								},
-								children: [e.title && /* @__PURE__ */ o(d, {
-									variant: "h6",
-									sx: {
-										position: "relative",
-										fontSize: {
-											xs: 14,
-											sm: 18,
-											md: 20
-										},
-										whiteSpace: "nowrap",
-										overflow: "hidden",
-										textOverflow: "ellipsis"
-									},
-									children: e.title
-								}), e.desc && /* @__PURE__ */ o(d, {
-									variant: "body2",
-									sx: {
-										position: "relative",
-										mt: .5,
-										display: "-webkit-box",
-										WebkitLineClamp: 2,
-										WebkitBoxOrient: "vertical",
-										overflow: "hidden"
-									},
-									children: e.desc
-								})]
-							})]
-						})
+					}, e)) : x.map((e, n) => /* @__PURE__ */ c(t, {
+						item: e,
+						index: n,
+						instanceId: T,
+						isDragging: C,
+						onSelect: b,
+						onDragStart: D,
+						onDragEnd: O
 					}, `${e.id}-${T}`))
 				})
 			})
 		})]
 	});
 };
-y.displayName = "SGallery";
+h.displayName = "SGallery";
 //#endregion
-export { g as MediaItem, y as SGallery, y as default };
+export { h as SGallery, h as default };

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

@@ -3,31 +3,35 @@ import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Box as i } from "@mui/material";
 //#region lib/s-image-comparison/s-image-comparison.tsx
-var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left image", altRight: l = "Right image", initialPosition: u = 50, ...d }, f) => {
-	let p = Array.isArray(o) ? o : [o], m = Array.isArray(c) ? c : [c], [h, g] = t.useState(0), [_, v] = t.useState(u), [y, b] = t.useState(!1), x = t.useRef(null), S = p.length > 1, C = (e) => {
-		if (!x.current) return;
-		let t = x.current.getBoundingClientRect(), n = (e - t.left) / t.width * 100;
-		n = Math.max(0, Math.min(100, n)), v(n);
-	}, w = t.useCallback((e) => {
-		y && C(e.clientX);
-	}, [y]), T = t.useCallback((e) => {
-		y && C(e.touches[0].clientX);
-	}, [y]), E = () => {
-		b(!0);
-	}, D = () => {
-		b(!1);
-	}, O = (e) => {
-		v(Number(e.target.value));
+var a = (e) => Math.max(0, Math.min(100, e)), o = t.forwardRef(({ sx: o, leftImage: s, rightImage: c, altLeft: l = "Left image", altRight: u = "Right image", initialPosition: d = 50, ...f }, p) => {
+	let m = Array.isArray(s) ? s : [s], h = Array.isArray(l) ? l : [l], [g, _] = t.useState(0), [v, y] = t.useState(() => a(d)), [b, x] = t.useState(!1), S = t.useRef(null), C = m.length > 1;
+	t.useEffect(() => {
+		y(a(d));
+	}, [d]);
+	let w = (e) => {
+		if (!S.current) return;
+		let t = S.current.getBoundingClientRect(), n = (e - t.left) / t.width * 100;
+		n = a(n), y(n);
+	}, T = t.useCallback((e) => {
+		b && w(e.clientX);
+	}, [b]), E = t.useCallback((e) => {
+		b && w(e.touches[0].clientX);
+	}, [b]), D = () => {
+		x(!0);
+	}, O = () => {
+		x(!1);
+	}, k = (e) => {
+		y(a(Number(e.target.value)));
 	};
-	return t.useEffect(() => (y ? (document.addEventListener("mousemove", w), document.addEventListener("touchmove", T), document.addEventListener("mouseup", D), document.addEventListener("touchend", D), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-		document.removeEventListener("mousemove", w), document.removeEventListener("touchmove", T), document.removeEventListener("mouseup", D), document.removeEventListener("touchend", D), document.body.style.cursor = "";
+	return t.useEffect(() => (b ? (document.addEventListener("mousemove", T), document.addEventListener("touchmove", E), document.addEventListener("mouseup", O), document.addEventListener("touchend", O), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+		document.removeEventListener("mousemove", T), document.removeEventListener("touchmove", E), document.removeEventListener("mouseup", O), document.removeEventListener("touchend", O), document.body.style.cursor = "";
 	}), [
-		y,
-		w,
-		T
+		b,
+		T,
+		E
 	]), /* @__PURE__ */ r(i, {
 		ref: (e) => {
-			x.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+			S.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
 		},
 		sx: {
 			position: "relative",
@@ -35,15 +39,15 @@ var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left i
 			height: "100%",
 			overflow: "hidden",
 			userSelect: "none",
-			...a
+			...o
 		},
-		onMouseDown: E,
-		onTouchStart: E,
-		...d,
+		onMouseDown: D,
+		onTouchStart: D,
+		...f,
 		children: [
 			/* @__PURE__ */ n(e, {
-				src: s,
-				alt: l,
+				src: c,
+				alt: u,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -62,11 +66,11 @@ var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left i
 					height: "100%",
 					overflow: "hidden",
 					pointerEvents: "none",
-					clipPath: `polygon(0 0, ${_}% 0, ${_}% 100%, 0 100%)`
+					clipPath: `polygon(0 0, ${v}% 0, ${v}% 100%, 0 100%)`
 				},
 				children: /* @__PURE__ */ n(e, {
-					src: p[h],
-					alt: m[h] ?? m[0],
+					src: m[g],
+					alt: h[g] ?? h[0],
 					style: {
 						width: "100%",
 						height: "100%",
@@ -75,7 +79,7 @@ var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left i
 					draggable: !1
 				})
 			}),
-			S && /* @__PURE__ */ n(i, {
+			C && /* @__PURE__ */ n(i, {
 				sx: {
 					position: "absolute",
 					left: 16,
@@ -83,28 +87,28 @@ var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left i
 					display: "flex",
 					gap: 1,
 					zIndex: 1,
-					pointerEvents: y ? "none" : "auto",
-					opacity: +(_ > 10),
+					pointerEvents: b ? "none" : "auto",
+					opacity: +(v > 10),
 					transition: "opacity 0.2s"
 				},
 				onClick: (e) => e.stopPropagation(),
 				onMouseDown: (e) => e.stopPropagation(),
-				children: p.map((e, t) => /* @__PURE__ */ n(i, {
+				children: m.map((e, t) => /* @__PURE__ */ n(i, {
 					onClick: (e) => {
-						e.stopPropagation(), g(t);
+						e.stopPropagation(), _(t);
 					},
 					sx: {
 						width: 8,
 						height: 8,
 						borderRadius: "50%",
-						bgcolor: h === t ? "primary.main" : "whiteAlpha.medium",
+						bgcolor: g === t ? "primary.main" : "whiteAlpha.medium",
 						cursor: "pointer",
 						boxShadow: 1,
 						backdropFilter: "blur(4px)",
 						transition: "all 0.2s",
 						"&:hover": {
 							transform: "scale(1.2)",
-							bgcolor: h === t ? "primary.main" : "whiteAlpha.dark"
+							bgcolor: g === t ? "primary.main" : "whiteAlpha.dark"
 						}
 					}
 				}, e))
@@ -116,15 +120,15 @@ var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left i
 					height: "100%",
 					width: 6,
 					cursor: "ew-resize",
-					left: `calc(${_}% - 3px)`
+					left: `calc(${v}% - 3px)`
 				},
 				children: [/* @__PURE__ */ n(i, {
 					component: "input",
 					type: "range",
 					min: 0,
 					max: 100,
-					value: _,
-					onChange: O,
+					value: v,
+					onChange: k,
 					"aria-label": "Image comparison slider",
 					sx: {
 						position: "absolute",
@@ -149,6 +153,6 @@ var a = t.forwardRef(({ sx: a, leftImage: o, rightImage: s, altLeft: c = "Left i
 		]
 	});
 });
-a.displayName = "SImageComparison";
+o.displayName = "SImageComparison";
 //#endregion
-export { a as default };
+export { o as default };

package/dist/s-image-modal/default-media-item.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { MediaItemType } from './types';
+export declare const DefaultMediaItem: React.FC<{
+    item: MediaItemType;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    disableVideoControls?: boolean;
+}>;

package/dist/s-image-modal/default-media-item.js

@@ -0,0 +1,34 @@
+import e from "../s-lazy-image/s-lazy-image.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Box as n } from "@mui/material";
+//#region lib/s-image-modal/default-media-item.tsx
+var r = ({ item: r, onClick: i, style: a = {}, objectFit: o = "contain", disableVideoControls: s = !1 }) => r.type === "video" ? /* @__PURE__ */ t(n, {
+	component: "video",
+	onClick: i,
+	controls: !s,
+	sx: {
+		width: "100%",
+		height: "100%",
+		objectFit: o,
+		bgcolor: "background.paper",
+		...a
+	},
+	children: /* @__PURE__ */ t("source", {
+		src: r.url,
+		type: "video/mp4"
+	})
+}) : /* @__PURE__ */ t(e, {
+	src: r.url,
+	alt: r.title ?? "",
+	onClick: i,
+	style: {
+		width: "100%",
+		height: "100%",
+		objectFit: o,
+		backgroundColor: "background.paper",
+		...a
+	}
+});
+//#endregion
+export { r as DefaultMediaItem };

package/dist/s-image-modal/image-modal-thumbnail-dock.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { MediaItemType, SImageModalProps } from './types';
+/**
+ * Stacked-card thumbnail dock pinned to the bottom of the modal
+ */
+export declare const ImageModalThumbnailDock: React.FC<{
+    mediaItems: MediaItemType[];
+    selectedItem: MediaItemType;
+    onSelect: (item: MediaItemType) => void;
+    renderMediaItem?: SImageModalProps['renderMediaItem'];
+}>;