@solostylist/ui-kit 1.0.203 → 1.0.205

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

@@ -1,207 +1,169 @@
-import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import * as o from "react";
-import { C as A } from "../ChevronLeft-BmgmPHp9.js";
-import { C as z } from "../ChevronRight-DbWSr8yz.js";
-import { Box as i, IconButton as D } from "@mui/material";
-import E from "../s-lazy-image/s-lazy-image.js";
-const F = o.forwardRef(
-  ({ sx: C, leftImage: u, rightImage: I, altLeft: d = "Left image", altRight: L = "Right image", initialPosition: S = 50, ...k }, a) => {
-    const p = Array.isArray(u) ? u : [u], v = Array.isArray(d) ? d : [d], [l, M] = o.useState(0), [r, P] = o.useState(S), [n, b] = o.useState(!1), m = o.useRef(null), R = p.length > 1, y = (e) => {
-      if (!m.current) return;
-      const s = m.current.getBoundingClientRect();
-      let f = (e - s.left) / s.width * 100;
-      f = Math.max(0, Math.min(100, f)), P(f);
-    }, h = o.useCallback(
-      (e) => {
-        n && y(e.clientX);
-      },
-      [n]
-    ), g = o.useCallback(
-      (e) => {
-        n && y(e.touches[0].clientX);
-      },
-      [n]
-    ), w = () => {
-      b(!0);
-    }, c = () => {
-      b(!1);
-    }, x = r === 0 || r === 100;
-    return o.useEffect(() => (n ? (document.addEventListener("mousemove", h), document.addEventListener("touchmove", g), document.addEventListener("mouseup", c), document.addEventListener("touchend", c), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-      document.removeEventListener("mousemove", h), document.removeEventListener("touchmove", g), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
-    }), [n, h, g]), /* @__PURE__ */ t.jsxs(
-      i,
-      {
-        ref: (e) => {
-          m.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
-        },
-        sx: {
-          position: "relative",
-          width: "100%",
-          height: "100%",
-          overflow: "hidden",
-          userSelect: "none",
-          ...C
-        },
-        onMouseDown: w,
-        onTouchStart: w,
-        ...k,
-        children: [
-          /* @__PURE__ */ t.jsx(
-            E,
-            {
-              src: I,
-              alt: L,
-              style: {
-                position: "absolute",
-                inset: 0,
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-                pointerEvents: "none"
-              },
-              draggable: !1
-            }
-          ),
-          /* @__PURE__ */ t.jsx(
-            i,
-            {
-              sx: {
-                position: "absolute",
-                inset: 0,
-                width: "100%",
-                height: "100%",
-                overflow: "hidden",
-                pointerEvents: "none",
-                clipPath: `polygon(0 0, ${r}% 0, ${r}% 100%, 0 100%)`
-              },
-              children: /* @__PURE__ */ t.jsx(
-                E,
-                {
-                  src: p[l],
-                  alt: v[l] ?? v[0],
-                  style: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover"
-                  },
-                  draggable: !1
-                }
-              )
-            }
-          ),
-          R && /* @__PURE__ */ t.jsx(
-            i,
-            {
-              sx: {
-                position: "absolute",
-                left: 16,
-                bottom: 16,
-                display: "flex",
-                gap: 1,
-                zIndex: 1,
-                pointerEvents: n ? "none" : "auto",
-                // Disable bubble click when dragging
-                opacity: r > 10 ? 1 : 0,
-                // Fade out if left image is mostly hidden
-                transition: "opacity 0.2s"
-              },
-              onClick: (e) => e.stopPropagation(),
-              onMouseDown: (e) => e.stopPropagation(),
-              children: p.map((e, s) => /* @__PURE__ */ t.jsx(
-                i,
-                {
-                  onClick: (j) => {
-                    j.stopPropagation(), M(s);
-                  },
-                  sx: {
-                    width: 8,
-                    height: 8,
-                    borderRadius: "50%",
-                    bgcolor: l === s ? "primary.main" : "whiteAlpha.medium",
-                    cursor: "pointer",
-                    boxShadow: 1,
-                    backdropFilter: "blur(4px)",
-                    transition: "all 0.2s",
-                    "&:hover": {
-                      transform: "scale(1.2)",
-                      bgcolor: l === s ? "primary.main" : "whiteAlpha.dark"
-                    }
-                  }
-                },
-                s
-              ))
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(
-            i,
-            {
-              sx: {
-                position: "absolute",
-                top: 0,
-                height: "100%",
-                width: "4px",
-                cursor: "ew-resize",
-                left: `calc(${r}% - 2px)`
-              },
-              children: [
-                /* @__PURE__ */ t.jsx(
-                  i,
-                  {
-                    sx: {
-                      position: "absolute",
-                      inset: "0 0 0 0",
-                      width: "4px",
-                      bgcolor: "divider",
-                      backdropFilter: "blur(4px)"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(
-                  D,
-                  {
-                    sx: {
-                      position: "absolute",
-                      top: "50%",
-                      left: "50%",
-                      transform: "translate(-50%, -50%)",
-                      cursor: "ew-resize",
-                      ...x ? {
-                        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: x ? "rgba(255,255,255,0.4)" : "transparent"
-                      }
-                    },
-                    role: "slider",
-                    "aria-valuenow": r,
-                    "aria-valuemin": 0,
-                    "aria-valuemax": 100,
-                    "aria-orientation": "horizontal",
-                    "aria-label": "Image comparison slider",
-                    onClick: (e) => {
-                      e.preventDefault(), e.stopPropagation();
-                    },
-                    children: x && /* @__PURE__ */ t.jsxs(i, { sx: { display: "flex", alignItems: "center" }, children: [
-                      /* @__PURE__ */ t.jsx(A, {}),
-                      /* @__PURE__ */ t.jsx(z, {})
-                    ] })
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-F.displayName = "SImageComparison";
-export {
-  F as default
-};
+import "../createTheme-DuS5_nJb.js";
+import { t as e } from "../ChevronLeft-C7DUyLoc.js";
+import { t } from "../ChevronRight-VFk57Tte.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";
+//#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;
+	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 = "";
+	}), [
+		S,
+		D,
+		O
+	]), /* @__PURE__ */ a(o, {
+		ref: (e) => {
+			w.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
+		},
+		sx: {
+			position: "relative",
+			width: "100%",
+			height: "100%",
+			overflow: "hidden",
+			userSelect: "none",
+			...c
+		},
+		onMouseDown: k,
+		onTouchStart: k,
+		...m,
+		children: [
+			/* @__PURE__ */ i(n, {
+				src: u,
+				alt: f,
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					objectFit: "cover",
+					pointerEvents: "none"
+				},
+				draggable: !1
+			}),
+			/* @__PURE__ */ i(o, {
+				sx: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					overflow: "hidden",
+					pointerEvents: "none",
+					clipPath: `polygon(0 0, ${b}% 0, ${b}% 100%, 0 100%)`
+				},
+				children: /* @__PURE__ */ i(n, {
+					src: g[v],
+					alt: _[v] ?? _[0],
+					style: {
+						width: "100%",
+						height: "100%",
+						objectFit: "cover"
+					},
+					draggable: !1
+				})
+			}),
+			T && /* @__PURE__ */ i(o, {
+				sx: {
+					position: "absolute",
+					left: 16,
+					bottom: 16,
+					display: "flex",
+					gap: 1,
+					zIndex: 1,
+					pointerEvents: S ? "none" : "auto",
+					opacity: b > 10 ? 1 : 0,
+					transition: "opacity 0.2s"
+				},
+				onClick: (e) => e.stopPropagation(),
+				onMouseDown: (e) => e.stopPropagation(),
+				children: g.map((e, t) => /* @__PURE__ */ i(o, {
+					onClick: (e) => {
+						e.stopPropagation(), y(t);
+					},
+					sx: {
+						width: 8,
+						height: 8,
+						borderRadius: "50%",
+						bgcolor: v === 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"
+						}
+					}
+				}, t))
+			}),
+			/* @__PURE__ */ a(o, {
+				sx: {
+					position: "absolute",
+					top: 0,
+					height: "100%",
+					width: "4px",
+					cursor: "ew-resize",
+					left: `calc(${b}% - 2px)`
+				},
+				children: [/* @__PURE__ */ i(o, { 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" }
+					},
+					role: "slider",
+					"aria-valuenow": b,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-orientation": "horizontal",
+					"aria-label": "Image comparison slider",
+					onClick: (e) => {
+						e.preventDefault(), e.stopPropagation();
+					},
+					children: j && /* @__PURE__ */ a(o, {
+						sx: {
+							display: "flex",
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(t, {})]
+					})
+				})]
+			})
+		]
+	});
+});
+c.displayName = "SImageComparison";
+//#endregion
+export { c as default };

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

@@ -1,5 +1,3 @@
-import { DefaultMediaItem as t, SImageModal as d } from "./s-image-modal.js";
-export {
-  t as DefaultMediaItem,
-  d as default
-};
+import "../createTheme-DuS5_nJb.js";
+import { DefaultMediaItem as e, SImageModal as t } from "./s-image-modal.js";
+export { e as DefaultMediaItem, t as default };