@solostylist/ui-kit 1.0.202 → 1.0.204

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

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

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

@@ -1,5 +1,4 @@
-import { DefaultMediaItem as t, SImageModal as d } from "./s-image-modal.js";
-export {
-  t as DefaultMediaItem,
-  d as default
-};
+import "../createTheme-CMuiGmV-.js";
+import "../jsx-runtime-V-UOMaX1.js";
+import { DefaultMediaItem as e, SImageModal as t } from "./s-image-modal.js";
+export { e as DefaultMediaItem, t as default };

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

@@ -44,9 +44,6 @@ export interface SImageModalProps {
     /** Custom modal styling */
     modalSx?: ModalProps['sx'];
 }
-/**
- * Default MediaItem renderer for images and videos
- */
 export declare const DefaultMediaItem: React.FC<{
     item: MediaItemType;
     onClick?: () => void;
@@ -54,6 +51,5 @@ export declare const DefaultMediaItem: React.FC<{
     objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     disableVideoControls?: boolean;
 }>;
-/** A reusable full-screen modal for displaying media items with navigation features. */
 export declare const SImageModal: React.FC<SImageModalProps>;
 export default SImageModal;