@solostylist/ui-kit 1.0.203 → 1.0.205

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

@@ -1,347 +1,311 @@
-import { j as r } from "../jsx-runtime-tc70JA_2.js";
-import { useState as g, useId as $, useEffect as b, useRef as D } from "react";
-import { Box as p, Paper as w, Skeleton as V, Typography as j } from "@mui/material";
-import { AnimatePresence as E, motion as I } from "framer-motion";
-import { SImageModal as M } from "../s-image-modal/s-image-modal.js";
-import F from "../s-lazy-image/s-lazy-image.js";
-const A = ({ item: s, sx: o, onClick: i }) => {
-  const e = D(null), [l, c] = g(!1), [u, f] = g(!0);
-  return b(() => {
-    const d = {
-      root: null,
-      rootMargin: "50px",
-      // Start loading 50px before entering viewport
-      threshold: 0.1
-      // Trigger when 10% of video is visible
-    }, h = new IntersectionObserver((t) => {
-      t.forEach((a) => c(a.isIntersecting));
-    }, d), n = e.current;
-    return n && h.observe(n), () => {
-      n && h.unobserve(n);
-    };
-  }, []), b(() => {
-    let d = !0;
-    const h = async () => {
-      if (!(!e.current || !l || !d))
-        try {
-          e.current.readyState >= 3 ? (f(!1), await e.current.play()) : (f(!0), await new Promise((t) => {
-            e.current && (e.current.oncanplay = () => t());
-          }), d && (f(!1), await e.current.play()));
-        } catch (t) {
-          console.warn("Video playback failed:", t);
-        }
-    }, n = e.current;
-    return l ? h() : n && n.pause(), () => {
-      d = !1, n && (n.pause(), n.removeAttribute("src"), n.load());
-    };
-  }, [l]), s.type === "video" ? /* @__PURE__ */ r.jsxs(
-    p,
-    {
-      sx: {
-        position: "relative",
-        overflow: "hidden",
-        width: "100%",
-        height: "100%",
-        ...o
-      },
-      children: [
-        /* @__PURE__ */ r.jsx(
-          p,
-          {
-            component: "video",
-            ref: e,
-            onClick: i,
-            playsInline: !0,
-            muted: !0,
-            loop: !0,
-            preload: "auto",
-            sx: {
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              opacity: u ? 0.8 : 1,
-              transition: "opacity 0.2s",
-              transform: "translateZ(0)",
-              willChange: "transform",
-              display: "block"
-            },
-            children: /* @__PURE__ */ r.jsx("source", { src: s.url, type: "video/mp4" })
-          }
-        ),
-        u && /* @__PURE__ */ r.jsx(
-          p,
-          {
-            sx: {
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              bgcolor: "action.disabled"
-            },
-            children: /* @__PURE__ */ r.jsx(
-              p,
-              {
-                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)" }
-                  }
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ r.jsx(p, { onClick: i, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ r.jsx(
-    F,
-    {
-      src: s.url,
-      alt: s.title ?? "",
-      width: "100%",
-      height: "100%",
-      style: {
-        objectFit: o?.objectFit ? o.objectFit : "cover",
-        cursor: i ? "pointer" : "default",
-        display: "block",
-        width: "100%",
-        height: "100%"
-      }
-    }
-  ) });
-}, k = (s, o) => {
-  let i = 1, e = 2;
-  switch (o) {
-    case "grid":
-      i = 1, e = 2;
-      break;
-    case "masonry":
-      i = 1, e = s % 3 === 0 ? 3 : s % 2 === 0 ? 2 : 4;
-      break;
-    case "spotlight":
-      s === 0 ? (i = 2, e = 4) : (i = 1, e = 2);
-      break;
-    case "featured":
-      s === 0 ? (i = 2, e = 6) : (i = 1, e = 2);
-      break;
-    case "highlight":
-      s === 0 ? (i = 3, e = 6) : (i = 1, e = 2);
-      break;
-    case "custom":
-      i = 1, e = 2;
-      break;
-  }
-  return { colSpan: i, rowSpan: e };
-}, S = (s, o) => o === "custom" ? s : s.map((i, e) => {
-  const { colSpan: l, rowSpan: c } = k(e, o);
-  return { ...i, colSpan: l, rowSpan: c };
-}), B = ({
-  mediaItems: s,
-  variant: o = "masonry",
-  loading: i = !1,
-  skeletonCount: e = 6
-}) => {
-  const [l, c] = g(null), [u, f] = g(() => S(s, o)), [d, h] = g(!1), n = $();
-  return b(() => {
-    f(S(s, o));
-  }, [s, o]), /* @__PURE__ */ r.jsxs(p, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
-    /* @__PURE__ */ r.jsx(
-      M,
-      {
-        selectedItem: l,
-        isOpen: !!l,
-        onClose: () => c(null),
-        onItemChange: c,
-        mediaItems: u
-      }
-    ),
-    /* @__PURE__ */ r.jsx(E, { mode: "wait", children: !l && /* @__PURE__ */ r.jsx(
-      I.div,
-      {
-        initial: "hidden",
-        animate: "visible",
-        exit: "hidden",
-        variants: {
-          hidden: { opacity: 0 },
-          visible: {
-            opacity: 1,
-            transition: { staggerChildren: 0.1 }
-            // Stagger child animations
-          }
-        },
-        children: /* @__PURE__ */ r.jsx(
-          p,
-          {
-            sx: {
-              display: "grid",
-              gridTemplateColumns: {
-                xs: "1fr",
-                sm: "repeat(3, 1fr)",
-                md: "repeat(4, 1fr)"
-              },
-              gap: 1.5,
-              gridAutoRows: "60px",
-              position: "relative"
-              // Ensure proper stacking context
-            },
-            children: i ? Array.from({ length: e }).map((t, a) => {
-              const { colSpan: x, rowSpan: y } = k(a, o);
-              return /* @__PURE__ */ r.jsx(
-                w,
-                {
-                  sx: {
-                    position: "relative",
-                    overflow: "hidden",
-                    borderRadius: 2,
-                    gridRow: `span ${y}`,
-                    gridColumn: `span ${x}`
-                  },
-                  children: /* @__PURE__ */ r.jsx(
-                    V,
-                    {
-                      variant: "rectangular",
-                      animation: "wave",
-                      sx: {
-                        width: "100%",
-                        height: "100%",
-                        transform: "none"
-                      }
-                    }
-                  )
-                },
-                a
-              );
-            }) : u.map((t, a) => /* @__PURE__ */ r.jsx(
-              I.div,
-              {
-                layoutId: `media-${t.id}-${n}`,
-                onClick: () => !d && c(t),
-                variants: {
-                  hidden: { y: 50, scale: 0.9, opacity: 0 },
-                  visible: {
-                    y: 0,
-                    scale: 1,
-                    opacity: 1,
-                    transition: {
-                      type: "spring",
-                      stiffness: 350,
-                      damping: 25,
-                      delay: a * 0.05
-                    }
-                  }
-                },
-                whileHover: { filter: "brightness(1.1)", zIndex: 10 },
-                drag: !0,
-                dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
-                dragElastic: 1,
-                onDragStart: () => h(!0),
-                onDragEnd: (x, y) => {
-                  h(!1);
-                  const v = y.offset.x + y.offset.y;
-                  if (Math.abs(v) > 50) {
-                    const m = [...u], C = m[a], R = v > 0 ? Math.min(a + 1, u.length - 1) : Math.max(a - 1, 0);
-                    m.splice(a, 1), m.splice(R, 0, C), f(m);
-                  }
-                },
-                style: {
-                  position: "relative",
-                  gridRow: t.rowSpan ? `span ${t.rowSpan}` : "span 2",
-                  gridColumn: t.colSpan ? `span ${t.colSpan}` : "span 1"
-                },
-                children: /* @__PURE__ */ r.jsxs(
-                  w,
-                  {
-                    sx: {
-                      position: "relative",
-                      overflow: "hidden",
-                      borderRadius: 2,
-                      width: "100%",
-                      height: "100%",
-                      cursor: "grab",
-                      "&:active": { cursor: "grabbing" },
-                      "&:hover .hover-overlay": {
-                        opacity: 1
-                      }
-                    },
-                    children: [
-                      /* @__PURE__ */ r.jsx(
-                        A,
-                        {
-                          item: t,
-                          sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !d && c(t)
-                        }
-                      ),
-                      (t.title || t.desc) && /* @__PURE__ */ r.jsxs(
-                        p,
-                        {
-                          className: "hover-overlay",
-                          sx: {
-                            position: "absolute",
-                            inset: 0,
-                            display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "flex-end",
-                            padding: 1.5,
-                            pointerEvents: "none",
-                            // Prevent blocking clicks
-                            opacity: 0,
-                            transition: "opacity 0.2s ease-in-out",
-                            backdropFilter: "blur(8px)"
-                          },
-                          children: [
-                            t.title && /* @__PURE__ */ r.jsx(
-                              j,
-                              {
-                                variant: "subtitle2",
-                                sx: {
-                                  position: "relative",
-                                  whiteSpace: "nowrap",
-                                  overflow: "hidden",
-                                  textOverflow: "ellipsis"
-                                },
-                                children: t.title
-                              }
-                            ),
-                            t.desc && /* @__PURE__ */ r.jsx(
-                              j,
-                              {
-                                variant: "caption",
-                                sx: {
-                                  position: "relative",
-                                  display: "-webkit-box",
-                                  WebkitLineClamp: 2,
-                                  WebkitBoxOrient: "vertical",
-                                  overflow: "hidden"
-                                },
-                                children: t.desc
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
-              },
-              `${t.id}-${n}`
-            ))
-          }
-        )
-      }
-    ) })
-  ] });
-};
-B.displayName = "SGallery";
-export {
-  A as MediaItem,
-  B as SGallery,
-  B as default
+import "../createTheme-DuS5_nJb.js";
+import e from "../s-lazy-image/s-lazy-image.js";
+import { SImageModal as t } from "../s-image-modal/s-image-modal.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";
+//#region lib/s-gallery/s-gallery.tsx
+var m = ({ item: t, sx: r, onClick: l }) => {
+	let u = i(null), [d, f] = a(!1), [p, m] = a(!0);
+	return 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 = async () => {
+			if (!(!u.current || !d || !e)) try {
+				u.current.readyState >= 3 ? (m(!1), await u.current.play()) : (m(!0), await new Promise((e) => {
+					u.current && (u.current.oncanplay = () => e());
+				}), e && (m(!1), await u.current.play()));
+			} catch (e) {
+				console.warn("Video playback failed:", e);
+			}
+		}, n = u.current;
+		return d ? t() : n && n.pause(), () => {
+			e = !1, n && (n.pause(), n.removeAttribute("src"), n.load());
+		};
+	}, [d]), t.type === "video" ? /* @__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: t.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)" } }
+			} })
+		})]
+	}) : /* @__PURE__ */ o(c, {
+		onClick: l,
+		sx: {
+			width: "100%",
+			height: "100%",
+			...r
+		},
+		children: /* @__PURE__ */ o(e, {
+			src: t.url,
+			alt: t.title ?? "",
+			width: "100%",
+			height: "100%",
+			style: {
+				objectFit: r?.objectFit ? r.objectFit : "cover",
+				cursor: l ? "pointer" : "default",
+				display: "block",
+				width: "100%",
+				height: "100%"
+			}
+		})
+	});
+}, h = (e, t) => {
+	let n = 1, r = 2;
+	switch (t) {
+		case "grid":
+			n = 1, r = 2;
+			break;
+		case "masonry":
+			n = 1, r = e % 3 == 0 ? 3 : e % 2 == 0 ? 2 : 4;
+			break;
+		case "spotlight":
+			e === 0 ? (n = 2, r = 4) : (n = 1, r = 2);
+			break;
+		case "featured":
+			e === 0 ? (n = 2, r = 6) : (n = 1, r = 2);
+			break;
+		case "highlight":
+			e === 0 ? (n = 3, r = 6) : (n = 1, r = 2);
+			break;
+		case "custom":
+			n = 1, r = 2;
+			break;
+	}
+	return {
+		colSpan: n,
+		rowSpan: r
+	};
+}, g = (e, t) => t === "custom" ? e : e.map((e, n) => {
+	let { colSpan: r, rowSpan: i } = h(n, t);
+	return {
+		...e,
+		colSpan: r,
+		rowSpan: i
+	};
+}), _ = ({ mediaItems: e, variant: i = "masonry", loading: _ = !1, skeletonCount: v = 6 }) => {
+	let [y, b] = a(null), [x, S] = a(() => g(e, i)), [C, w] = a(!1), T = r();
+	return n(() => {
+		S(g(e, i));
+	}, [e, i]), /* @__PURE__ */ s(c, {
+		sx: {
+			width: "100%",
+			position: "relative",
+			zIndex: 1
+		},
+		children: [/* @__PURE__ */ o(t, {
+			selectedItem: y,
+			isOpen: !!y,
+			onClose: () => b(null),
+			onItemChange: b,
+			mediaItems: x
+		}), /* @__PURE__ */ o(f, {
+			mode: "wait",
+			children: !y && /* @__PURE__ */ o(p.div, {
+				initial: "hidden",
+				animate: "visible",
+				exit: "hidden",
+				variants: {
+					hidden: { opacity: 0 },
+					visible: {
+						opacity: 1,
+						transition: { staggerChildren: .1 }
+					}
+				},
+				children: /* @__PURE__ */ o(c, {
+					sx: {
+						display: "grid",
+						gridTemplateColumns: {
+							xs: "1fr",
+							sm: "repeat(3, 1fr)",
+							md: "repeat(4, 1fr)"
+						},
+						gap: 1.5,
+						gridAutoRows: "60px",
+						position: "relative"
+					},
+					children: _ ? Array.from({ length: v }).map((e, t) => {
+						let { colSpan: n, rowSpan: r } = h(t, i);
+						return /* @__PURE__ */ o(l, {
+							sx: {
+								position: "relative",
+								overflow: "hidden",
+								borderRadius: 2,
+								gridRow: `span ${r}`,
+								gridColumn: `span ${n}`
+							},
+							children: /* @__PURE__ */ o(u, {
+								variant: "rectangular",
+								animation: "wave",
+								sx: {
+									width: "100%",
+									height: "100%",
+									transform: "none"
+								}
+							})
+						}, t);
+					}) : 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: 2,
+								width: "100%",
+								height: "100%",
+								cursor: "grab",
+								"&:active": { cursor: "grabbing" },
+								"&:hover .hover-overlay": { opacity: 1 }
+							},
+							children: [/* @__PURE__ */ o(m, {
+								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",
+									backdropFilter: "blur(8px)"
+								},
+								children: [e.title && /* @__PURE__ */ o(d, {
+									variant: "subtitle2",
+									sx: {
+										position: "relative",
+										whiteSpace: "nowrap",
+										overflow: "hidden",
+										textOverflow: "ellipsis"
+									},
+									children: e.title
+								}), e.desc && /* @__PURE__ */ o(d, {
+									variant: "caption",
+									sx: {
+										position: "relative",
+										display: "-webkit-box",
+										WebkitLineClamp: 2,
+										WebkitBoxOrient: "vertical",
+										overflow: "hidden"
+									},
+									children: e.desc
+								})]
+							})]
+						})
+					}, `${e.id}-${T}`))
+				})
+			})
+		})]
+	});
 };
+_.displayName = "SGallery";
+//#endregion
+export { m as MediaItem, _ as SGallery, _ as default };