@solostylist/ui-kit 1.0.220 → 1.0.222

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

@@ -1,35 +1,33 @@
-import { t as e } from "../ChevronLeft-rgSvkrT_.js";
-import { t } from "../ChevronRight-DHulYS1l.js";
-import n from "../s-lazy-image/s-lazy-image.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Box as o, IconButton as s } from "@mui/material";
+import e from "../s-lazy-image/s-lazy-image.js";
+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 c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left image", altRight: f = "Right image", initialPosition: p = 50, ...m }, h) => {
-	let g = Array.isArray(l) ? l : [l], _ = Array.isArray(d) ? d : [d], [v, y] = r.useState(0), [b, x] = r.useState(p), [S, C] = r.useState(!1), w = r.useRef(null), T = g.length > 1, E = (e) => {
-		if (!w.current) return;
-		let t = w.current.getBoundingClientRect(), n = (e - t.left) / t.width * 100;
-		n = Math.max(0, Math.min(100, n)), x(n);
-	}, D = r.useCallback((e) => {
-		S && E(e.clientX);
-	}, [S]), O = r.useCallback((e) => {
-		S && E(e.touches[0].clientX);
-	}, [S]), k = () => {
-		C(!0);
-	}, A = () => {
-		C(!1);
-	}, j = b === 0 || b === 100, M = (e) => {
-		x(Number(e.target.value));
+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));
 	};
-	return r.useEffect(() => (S ? (document.addEventListener("mousemove", D), document.addEventListener("touchmove", O), document.addEventListener("mouseup", A), document.addEventListener("touchend", A), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-		document.removeEventListener("mousemove", D), document.removeEventListener("touchmove", O), document.removeEventListener("mouseup", A), document.removeEventListener("touchend", A), document.body.style.cursor = "";
+	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 = "";
 	}), [
-		S,
-		D,
-		O
-	]), /* @__PURE__ */ a(o, {
+		y,
+		w,
+		T
+	]), /* @__PURE__ */ r(i, {
 		ref: (e) => {
-			w.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
+			x.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
 		},
 		sx: {
 			position: "relative",
@@ -37,15 +35,15 @@ var c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left i
 			height: "100%",
 			overflow: "hidden",
 			userSelect: "none",
-			...c
+			...a
 		},
-		onMouseDown: k,
-		onTouchStart: k,
-		...m,
+		onMouseDown: E,
+		onTouchStart: E,
+		...d,
 		children: [
-			/* @__PURE__ */ i(n, {
-				src: u,
-				alt: f,
+			/* @__PURE__ */ n(e, {
+				src: s,
+				alt: l,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -56,7 +54,7 @@ var c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left i
 				},
 				draggable: !1
 			}),
-			/* @__PURE__ */ i(o, {
+			/* @__PURE__ */ n(i, {
 				sx: {
 					position: "absolute",
 					inset: 0,
@@ -64,11 +62,11 @@ var c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left i
 					height: "100%",
 					overflow: "hidden",
 					pointerEvents: "none",
-					clipPath: `polygon(0 0, ${b}% 0, ${b}% 100%, 0 100%)`
+					clipPath: `polygon(0 0, ${_}% 0, ${_}% 100%, 0 100%)`
 				},
-				children: /* @__PURE__ */ i(n, {
-					src: g[v],
-					alt: _[v] ?? _[0],
+				children: /* @__PURE__ */ n(e, {
+					src: p[h],
+					alt: m[h] ?? m[0],
 					style: {
 						width: "100%",
 						height: "100%",
@@ -77,7 +75,7 @@ var c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left i
 					draggable: !1
 				})
 			}),
-			T && /* @__PURE__ */ i(o, {
+			S && /* @__PURE__ */ n(i, {
 				sx: {
 					position: "absolute",
 					left: 16,
@@ -85,102 +83,72 @@ var c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left i
 					display: "flex",
 					gap: 1,
 					zIndex: 1,
-					pointerEvents: S ? "none" : "auto",
-					opacity: +(b > 10),
+					pointerEvents: y ? "none" : "auto",
+					opacity: +(_ > 10),
 					transition: "opacity 0.2s"
 				},
 				onClick: (e) => e.stopPropagation(),
 				onMouseDown: (e) => e.stopPropagation(),
-				children: g.map((e, t) => /* @__PURE__ */ i(o, {
+				children: p.map((e, t) => /* @__PURE__ */ n(i, {
 					onClick: (e) => {
-						e.stopPropagation(), y(t);
+						e.stopPropagation(), g(t);
 					},
 					sx: {
 						width: 8,
 						height: 8,
 						borderRadius: "50%",
-						bgcolor: v === t ? "primary.main" : "whiteAlpha.medium",
+						bgcolor: h === t ? "primary.main" : "whiteAlpha.medium",
 						cursor: "pointer",
 						boxShadow: 1,
 						backdropFilter: "blur(4px)",
 						transition: "all 0.2s",
 						"&:hover": {
 							transform: "scale(1.2)",
-							bgcolor: v === t ? "primary.main" : "whiteAlpha.dark"
+							bgcolor: h === t ? "primary.main" : "whiteAlpha.dark"
 						}
 					}
 				}, e))
 			}),
-			/* @__PURE__ */ a(o, {
+			/* @__PURE__ */ r(i, {
 				sx: {
 					position: "absolute",
 					top: 0,
 					height: "100%",
-					width: "4px",
+					width: 6,
 					cursor: "ew-resize",
-					left: `calc(${b}% - 2px)`
+					left: `calc(${_}% - 3px)`
 				},
-				children: [
-					/* @__PURE__ */ i(o, {
-						component: "input",
-						type: "range",
-						min: 0,
-						max: 100,
-						value: b,
-						onChange: M,
-						"aria-label": "Image comparison slider",
-						sx: {
-							position: "absolute",
-							inset: 0,
-							opacity: 0,
-							width: "100%",
-							height: "100%",
-							cursor: "ew-resize",
-							zIndex: 2
-						}
-					}),
-					/* @__PURE__ */ i(o, { sx: {
+				children: [/* @__PURE__ */ n(i, {
+					component: "input",
+					type: "range",
+					min: 0,
+					max: 100,
+					value: _,
+					onChange: O,
+					"aria-label": "Image comparison slider",
+					sx: {
 						position: "absolute",
-						inset: "0 0 0 0",
-						width: "4px",
-						bgcolor: "divider",
-						backdropFilter: "blur(4px)"
-					} }),
-					/* @__PURE__ */ i(s, {
-						sx: {
-							position: "absolute",
-							top: "50%",
-							left: "50%",
-							transform: "translate(-50%, -50%)",
-							cursor: "ew-resize",
-							...j ? {
-								width: 48,
-								height: 48,
-								backdropFilter: "blur(8px)",
-								backgroundColor: "rgba(255,255,255,0.3)",
-								boxShadow: "0px 0px 0px 1px rgba(0,0,0,0.1)",
-								color: "text.primary"
-							} : {},
-							transition: "all 0.3s ease-in-out",
-							"&:hover": { bgcolor: j ? "rgba(255,255,255,0.4)" : "transparent" }
-						},
-						tabIndex: -1,
-						onClick: (e) => {
-							e.preventDefault(), e.stopPropagation();
-						},
-						children: j && /* @__PURE__ */ a(o, {
-							sx: {
-								display: "flex",
-								alignItems: "center"
-							},
-							children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(t, {})]
-						})
-					})
-				]
+						inset: 0,
+						opacity: 0,
+						width: "100%",
+						height: "100%",
+						cursor: "ew-resize",
+						zIndex: 2,
+						pointerEvents: "none"
+					}
+				}), /* @__PURE__ */ n(i, { sx: {
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: 0,
+					width: 6,
+					bgcolor: "divider",
+					backdropFilter: "blur(4px)"
+				} })]
 			})
 		]
 	});
 });
-c.displayName = "SImageComparison";
+a.displayName = "SImageComparison";
 //#endregion
-export { c as default };
+export { a as default };

package/dist/s-image-modal/index.js

@@ -1,2 +1,2 @@
-import { DefaultMediaItem as e, SImageModal as t } from "./s-image-modal.js";
-export { e as DefaultMediaItem, t as SImageModal, t as default };
+import { n as e, t } from "../s-image-modal-DxwMFMNS.js";
+export { t as DefaultMediaItem, e as SImageModal, e as default };

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

@@ -1,399 +1,2 @@
-import { t as e } from "../ChevronLeft-rgSvkrT_.js";
-import { t } from "../ChevronRight-DHulYS1l.js";
-import { t as n } from "../Close-oXeOGTZb.js";
-import r from "../s-lazy-image/s-lazy-image.js";
-import i, { useEffect as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Box as u, IconButton as d, Modal as f, Paper as p, Stack as m, Typography as h } from "@mui/material";
-import { AnimatePresence as g, motion as _ } from "framer-motion";
-//#region lib/s-image-modal/s-image-modal.tsx
-var v = ({ item: e, onClick: t, style: n = {}, objectFit: i = "contain", disableVideoControls: a = !1 }) => e.type === "video" ? /* @__PURE__ */ c(u, {
-	component: "video",
-	onClick: t,
-	controls: !a,
-	sx: {
-		width: "100%",
-		height: "100%",
-		objectFit: i,
-		bgcolor: "background.paper",
-		...n
-	},
-	children: /* @__PURE__ */ c("source", {
-		src: e.url,
-		type: "video/mp4"
-	})
-}) : /* @__PURE__ */ c(r, {
-	src: e.url,
-	alt: e.title ?? "",
-	onClick: t,
-	style: {
-		width: "100%",
-		height: "100%",
-		objectFit: i,
-		backgroundColor: "background.paper",
-		...n
-	}
-}), y = ({ selectedItem: r, isOpen: y, onClose: b, onItemChange: x, mediaItems: S = [], renderMediaItem: C, showNavigation: w = !0, showThumbnailDock: T = !0, showCounter: E = !0, modalSx: D = {} }) => {
-	let [O, k] = o(r ?? null), A = r ?? O;
-	a(() => {
-		r && k(r);
-	}, [r]);
-	let j = w && S.length > 1 && A, M = A ? S.findIndex((e) => e.id === A.id) : -1, N = S.length, P = i.useCallback(() => {
-		if (j && M > 0) {
-			let e = S[M - 1];
-			x ? x(e) : k(e);
-		}
-	}, [
-		j,
-		M,
-		S,
-		x
-	]), F = i.useCallback(() => {
-		if (j && M < N - 1) {
-			let e = S[M + 1];
-			x ? x(e) : k(e);
-		}
-	}, [
-		j,
-		M,
-		N,
-		S,
-		x
-	]);
-	return a(() => {
-		let e = (e) => {
-			if (y) switch (e.key) {
-				case "ArrowLeft":
-					P();
-					break;
-				case "ArrowRight":
-					F();
-					break;
-				case "Escape":
-					b();
-					break;
-			}
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [
-		y,
-		M,
-		N,
-		j,
-		P,
-		F,
-		b
-	]), !y || !A ? null : /* @__PURE__ */ c(f, {
-		open: y,
-		onClose: b,
-		sx: {
-			zIndex: (e) => e.zIndex.modal + 100,
-			...D
-		},
-		slotProps: { backdrop: { sx: {
-			backdropFilter: "blur(8px)",
-			zIndex: (e) => e.zIndex.modal + 99
-		} } },
-		children: /* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(_.div, {
-			initial: { scale: .98 },
-			animate: { scale: 1 },
-			exit: { scale: .98 },
-			transition: {
-				type: "spring",
-				stiffness: 400,
-				damping: 30
-			},
-			children: /* @__PURE__ */ l(p, {
-				sx: {
-					position: "fixed",
-					inset: 0,
-					width: "100%",
-					minHeight: "100vh",
-					borderRadius: 0,
-					overflow: "hidden",
-					zIndex: (e) => e.zIndex.modal + 101
-				},
-				children: [
-					/* @__PURE__ */ c(u, {
-						sx: {
-							height: "100%",
-							display: "flex",
-							flexDirection: "column"
-						},
-						children: /* @__PURE__ */ c(u, {
-							sx: {
-								flex: 1,
-								p: {
-									xs: 1,
-									sm: 2,
-									md: 3
-								},
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								bgcolor: "background.default"
-							},
-							children: /* @__PURE__ */ c(g, {
-								mode: "wait",
-								children: /* @__PURE__ */ c(_.div, {
-									style: { position: "relative" },
-									initial: {
-										y: 20,
-										scale: .97
-									},
-									animate: {
-										y: 0,
-										scale: 1,
-										transition: {
-											type: "spring",
-											stiffness: 500,
-											damping: 30,
-											mass: .5
-										}
-									},
-									exit: {
-										y: 20,
-										scale: .97,
-										transition: { duration: .15 }
-									},
-									children: /* @__PURE__ */ l(p, {
-										onClick: (e) => e.stopPropagation(),
-										sx: {
-											position: "relative",
-											width: "100%",
-											aspectRatio: "16 / 9",
-											maxWidth: {
-												xs: "95%",
-												sm: "85%",
-												md: 960
-											},
-											height: "70vh",
-											borderRadius: 2,
-											overflow: "hidden"
-										},
-										children: [C ? C(A) : /* @__PURE__ */ c(v, { item: A }), (A.title || A.desc) && /* @__PURE__ */ l(u, {
-											sx: {
-												position: "absolute",
-												left: 0,
-												right: 0,
-												bottom: 0,
-												p: {
-													xs: 1.5,
-													sm: 2,
-													md: 3
-												},
-												background: (e) => `linear-gradient(to top, ${(e.vars ?? e).palette.background.paper}, transparent)`
-											},
-											onClick: (e) => e.stopPropagation(),
-											children: [A.title && /* @__PURE__ */ c(h, {
-												variant: "h6",
-												sx: {
-													fontWeight: 600,
-													fontSize: {
-														xs: 14,
-														sm: 18,
-														md: 20
-													}
-												},
-												children: A.title
-											}), A.desc && /* @__PURE__ */ c(h, {
-												variant: "body2",
-												sx: {
-													opacity: .8,
-													mt: .5
-												},
-												children: A.desc
-											})]
-										})]
-									})
-								}, A.id)
-							})
-						})
-					}),
-					/* @__PURE__ */ c(d, {
-						"aria-label": "Close",
-						onClick: b,
-						sx: {
-							position: "absolute",
-							top: {
-								xs: 8,
-								sm: 10,
-								md: 12
-							},
-							right: {
-								xs: 8,
-								sm: 10,
-								md: 12
-							},
-							zIndex: (e) => e.zIndex.modal + 102
-						},
-						children: /* @__PURE__ */ c(n, {})
-					}),
-					E && j && /* @__PURE__ */ l(u, {
-						sx: {
-							position: "absolute",
-							top: {
-								xs: 8,
-								sm: 10,
-								md: 12
-							},
-							left: {
-								xs: 8,
-								sm: 10,
-								md: 12
-							},
-							zIndex: (e) => e.zIndex.modal + 102,
-							padding: 1,
-							px: 2,
-							fontSize: {
-								xs: 14,
-								sm: 16
-							},
-							color: "text.primary"
-						},
-						children: [
-							M + 1,
-							" / ",
-							N
-						]
-					}),
-					j && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
-						"aria-label": "Previous image",
-						onClick: (e) => {
-							e.stopPropagation(), P();
-						},
-						disabled: M === 0,
-						sx: {
-							position: "absolute",
-							left: {
-								xs: 8,
-								sm: 10,
-								md: 12
-							},
-							top: "50%",
-							transform: "translateY(-50%)",
-							zIndex: (e) => e.zIndex.modal + 102,
-							"&:disabled": { opacity: .5 }
-						},
-						children: /* @__PURE__ */ c(e, {})
-					}), /* @__PURE__ */ c(d, {
-						"aria-label": "Next image",
-						onClick: (e) => {
-							e.stopPropagation(), F();
-						},
-						disabled: M === N - 1,
-						sx: {
-							position: "absolute",
-							right: {
-								xs: 8,
-								sm: 10,
-								md: 12
-							},
-							top: "50%",
-							transform: "translateY(-50%)",
-							zIndex: (e) => e.zIndex.modal + 102,
-							"&:disabled": { opacity: .5 }
-						},
-						children: /* @__PURE__ */ c(t, {})
-					})] })
-				]
-			})
-		}), T && j && S.length > 1 && /* @__PURE__ */ c(u, {
-			sx: {
-				position: "fixed",
-				zIndex: 1502,
-				left: "50%",
-				bottom: 16,
-				transform: "translateX(-50%)"
-			},
-			children: /* @__PURE__ */ c(p, {
-				sx: {
-					position: "relative",
-					borderRadius: 3,
-					bgcolor: "background.paper",
-					border: "1px solid",
-					borderColor: "divider",
-					backdropFilter: "blur(12px)",
-					px: 1.5,
-					py: 1
-				},
-				children: /* @__PURE__ */ c(m, {
-					direction: "row",
-					spacing: -1.5,
-					sx: { alignItems: "center" },
-					children: S.map((e, t) => {
-						let n = A.id === e.id, r = t % 2 == 0 ? -15 : 15, i = () => {
-							x ? x(e) : k(e);
-						};
-						return /* @__PURE__ */ l(_.div, {
-							onClick: (e) => {
-								e.stopPropagation(), i();
-							},
-							style: {
-								position: "relative",
-								width: 40,
-								height: 40,
-								borderRadius: 10,
-								overflow: "hidden",
-								flexShrink: 0,
-								zIndex: n ? 30 : S.length - t,
-								border: n ? "1px solid" : void 0,
-								borderColor: n ? "divider" : void 0,
-								cursor: "pointer"
-							},
-							initial: { rotate: r },
-							animate: {
-								scale: n ? 1.2 : 1,
-								rotate: n ? 0 : r,
-								y: n ? -8 : 0
-							},
-							whileHover: {
-								scale: 1.3,
-								rotate: 0,
-								y: -10,
-								transition: {
-									type: "spring",
-									stiffness: 400,
-									damping: 25
-								}
-							},
-							children: [
-								C ? C(e, i) : /* @__PURE__ */ c(v, {
-									item: e,
-									objectFit: "cover",
-									style: {
-										width: "100%",
-										height: "100%",
-										pointerEvents: e.type === "video" ? "none" : "auto"
-									},
-									disableVideoControls: !0
-								}),
-								/* @__PURE__ */ c(u, { sx: {
-									position: "absolute",
-									inset: 0,
-									background: (e) => `linear-gradient(to bottom, transparent, ${(e.vars ?? e).palette.action.hover}, ${(e.vars ?? e).palette.action.selected})`,
-									pointerEvents: "none"
-								} }),
-								n && /* @__PURE__ */ c(_.div, {
-									layoutId: "activeGlow",
-									style: {
-										position: "absolute",
-										inset: -8,
-										background: "primary.main",
-										filter: "blur(16px)"
-									},
-									initial: { opacity: 0 },
-									animate: { opacity: 1 },
-									transition: { duration: .2 }
-								})
-							]
-						}, e.id);
-					})
-				})
-			})
-		})] })
-	});
-};
-y.displayName = "SImageModal";
-//#endregion
-export { v as DefaultMediaItem, y as SImageModal, y as default };
+import { n as e, t } from "../s-image-modal-DxwMFMNS.js";
+export { t as DefaultMediaItem, e as SImageModal, e as default };