@solostylist/ui-kit 1.0.139 → 1.0.141

package/dist/s-gallery/s-gallery.d.ts

@@ -41,6 +41,10 @@ export interface SGalleryProps {
     mediaItems: MediaItemType[];
     /** Layout variant to use (default: 'masonry') */
     variant?: GalleryLayoutVariant;
+    /** Loading state - shows skeleton placeholders matching the variant layout */
+    loading?: boolean;
+    /** Number of skeleton items to show when loading (default: 6) */
+    skeletonCount?: number;
 }
 /**
  * SGallery - A sophisticated media gallery with drag-and-drop, modal viewing, and animations.

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

@@ -1,40 +1,40 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as h, useId as C, useEffect as y, useRef as S } from "react";
-import { Box as c, Paper as k, Typography as x } from "@mui/material";
-import { AnimatePresence as $, motion as m } from "framer-motion";
-import R from "../s-image-modal/s-image-modal.js";
-import D from "../s-lazy-image/s-lazy-image.js";
-const E = ({ item: n, sx: o, onClick: l }) => {
-  const e = S(null), [i, s] = h(!1), [f, u] = h(!0);
-  return y(() => {
-    const d = {
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as y, useId as R, useEffect as b, useRef as D } from "react";
+import { Box as a, Paper as w, Skeleton as E, Typography as j } from "@mui/material";
+import { AnimatePresence as M, motion as I } from "framer-motion";
+import V from "../s-image-modal/s-image-modal.js";
+import P from "../s-lazy-image/s-lazy-image.js";
+const A = ({ item: i, sx: o, onClick: s }) => {
+  const e = D(null), [n, l] = y(!1), [u, f] = y(!0);
+  return b(() => {
+    const c = {
       root: null,
       rootMargin: "50px",
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, t = new IntersectionObserver((a) => {
-      a.forEach((p) => s(p.isIntersecting));
-    }, d);
-    return e.current && t.observe(e.current), () => {
-      e.current && t.unobserve(e.current);
+    }, g = new IntersectionObserver((d) => {
+      d.forEach((r) => l(r.isIntersecting));
+    }, c);
+    return e.current && g.observe(e.current), () => {
+      e.current && g.unobserve(e.current);
     };
-  }, []), y(() => {
-    let d = !0;
-    return i ? (async () => {
-      if (!(!e.current || !i || !d))
+  }, []), b(() => {
+    let c = !0;
+    return n ? (async () => {
+      if (!(!e.current || !n || !c))
         try {
-          e.current.readyState >= 3 ? (u(!1), await e.current.play()) : (u(!0), await new Promise((a) => {
-            e.current && (e.current.oncanplay = () => a());
-          }), d && (u(!1), await e.current.play()));
-        } catch (a) {
-          console.warn("Video playback failed:", a);
+          e.current.readyState >= 3 ? (f(!1), await e.current.play()) : (f(!0), await new Promise((d) => {
+            e.current && (e.current.oncanplay = () => d());
+          }), c && (f(!1), await e.current.play()));
+        } catch (d) {
+          console.warn("Video playback failed:", d);
         }
     })() : e.current && e.current.pause(), () => {
-      d = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+      c = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [i]), n.type === "video" ? /* @__PURE__ */ r.jsxs(
-    c,
+  }, [n]), i.type === "video" ? /* @__PURE__ */ t.jsxs(
+    a,
     {
       sx: {
         position: "relative",
@@ -44,12 +44,12 @@ const E = ({ item: n, sx: o, onClick: l }) => {
         ...o
       },
       children: [
-        /* @__PURE__ */ r.jsx(
-          c,
+        /* @__PURE__ */ t.jsx(
+          a,
           {
             component: "video",
             ref: e,
-            onClick: l,
+            onClick: s,
             playsInline: !0,
             muted: !0,
             loop: !0,
@@ -58,17 +58,17 @@ const E = ({ item: n, sx: o, onClick: l }) => {
               width: "100%",
               height: "100%",
               objectFit: "cover",
-              opacity: f ? 0.8 : 1,
+              opacity: u ? 0.8 : 1,
               transition: "opacity 0.2s",
               transform: "translateZ(0)",
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ r.jsx("source", { src: n.url, type: "video/mp4" })
+            children: /* @__PURE__ */ t.jsx("source", { src: i.url, type: "video/mp4" })
           }
         ),
-        f && /* @__PURE__ */ r.jsx(
-          c,
+        u && /* @__PURE__ */ t.jsx(
+          a,
           {
             sx: {
               position: "absolute",
@@ -78,8 +78,8 @@ const E = ({ item: n, sx: o, onClick: l }) => {
               justifyContent: "center",
               bgcolor: "action.disabled"
             },
-            children: /* @__PURE__ */ r.jsx(
-              c,
+            children: /* @__PURE__ */ t.jsx(
+              a,
               {
                 sx: {
                   width: 24,
@@ -99,56 +99,62 @@ const E = ({ item: n, sx: o, onClick: l }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ r.jsx(c, { onClick: l, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ r.jsx(
-    D,
+  ) : /* @__PURE__ */ t.jsx(a, { onClick: s, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ t.jsx(
+    P,
     {
-      src: n.url,
-      alt: n.title || "",
+      src: i.url,
+      alt: i.title || "",
       width: "100%",
       height: "100%",
       style: {
         objectFit: o != null && o.objectFit ? o.objectFit : "cover",
-        cursor: l ? "pointer" : "default",
+        cursor: s ? "pointer" : "default",
         display: "block",
         width: "100%",
         height: "100%"
       }
     }
   ) });
-}, w = (n, o) => o === "custom" ? n : n.map((l, e) => {
-  let i = 1, s = 2;
+}, C = (i, o) => {
+  let s = 1, e = 2;
   switch (o) {
     case "grid":
-      i = 1, s = 2;
+      s = 1, e = 2;
       break;
     case "masonry":
-      i = 1, s = e % 3 === 0 ? 3 : e % 2 === 0 ? 2 : 4;
+      s = 1, e = i % 3 === 0 ? 3 : i % 2 === 0 ? 2 : 4;
       break;
     case "spotlight":
-      e === 0 ? (i = 2, s = 4) : (i = 1, s = 2);
+      i === 0 ? (s = 2, e = 4) : (s = 1, e = 2);
       break;
     case "featured":
-      e === 0 ? (i = 2, s = 6) : (i = 1, s = 2);
+      i === 0 ? (s = 2, e = 6) : (s = 1, e = 2);
+      break;
+    case "custom":
+      s = 1, e = 2;
       break;
   }
-  return { ...l, colSpan: i, rowSpan: s };
-}), T = ({ mediaItems: n, variant: o = "masonry" }) => {
-  const [l, e] = h(null), [i, s] = h(() => w(n, o)), [f, u] = h(!1), d = C();
-  return y(() => {
-    s(w(n, o));
-  }, [n, o]), /* @__PURE__ */ r.jsxs(c, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
-    /* @__PURE__ */ r.jsx(
-      R,
+  return { colSpan: s, rowSpan: e };
+}, S = (i, o) => o === "custom" ? i : i.map((s, e) => {
+  const { colSpan: n, rowSpan: l } = C(e, o);
+  return { ...s, colSpan: n, rowSpan: l };
+}), W = ({ mediaItems: i, variant: o = "masonry", loading: s = !1, skeletonCount: e = 6 }) => {
+  const [n, l] = y(null), [u, f] = y(() => S(i, o)), [c, g] = y(!1), d = R();
+  return b(() => {
+    f(S(i, o));
+  }, [i, o]), /* @__PURE__ */ t.jsxs(a, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+    /* @__PURE__ */ t.jsx(
+      V,
       {
-        selectedItem: l,
-        isOpen: !!l,
-        onClose: () => e(null),
-        onItemChange: e,
-        mediaItems: i
+        selectedItem: n,
+        isOpen: !!n,
+        onClose: () => l(null),
+        onItemChange: l,
+        mediaItems: u
       }
     ),
-    /* @__PURE__ */ r.jsx($, { mode: "wait", children: !l && /* @__PURE__ */ r.jsx(
-      m.div,
+    /* @__PURE__ */ t.jsx(M, { mode: "wait", children: !n && /* @__PURE__ */ t.jsx(
+      I.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -161,8 +167,8 @@ const E = ({ item: n, sx: o, onClick: l }) => {
             // Stagger child animations
           }
         },
-        children: /* @__PURE__ */ r.jsx(
-          c,
+        children: /* @__PURE__ */ t.jsx(
+          a,
           {
             sx: {
               display: "grid",
@@ -176,11 +182,38 @@ const E = ({ item: n, sx: o, onClick: l }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: i.map((t, a) => /* @__PURE__ */ r.jsx(
-              m.div,
+            children: s ? Array.from({ length: e }).map((r, p) => {
+              const { colSpan: h, rowSpan: m } = C(p, o);
+              return /* @__PURE__ */ t.jsx(
+                w,
+                {
+                  sx: {
+                    position: "relative",
+                    overflow: "hidden",
+                    borderRadius: 2,
+                    gridRow: `span ${m}`,
+                    gridColumn: `span ${h}`
+                  },
+                  children: /* @__PURE__ */ t.jsx(
+                    E,
+                    {
+                      variant: "rectangular",
+                      animation: "wave",
+                      sx: {
+                        width: "100%",
+                        height: "100%",
+                        transform: "none"
+                      }
+                    }
+                  )
+                },
+                p
+              );
+            }) : u.map((r, p) => /* @__PURE__ */ t.jsx(
+              I.div,
               {
-                layoutId: `media-${t.id}-${d}`,
-                onClick: () => !f && e(t),
+                layoutId: `media-${r.id}-${d}`,
+                onClick: () => !c && l(r),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -191,7 +224,7 @@ const E = ({ item: n, sx: o, onClick: l }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: a * 0.05
+                      delay: p * 0.05
                     }
                   }
                 },
@@ -199,22 +232,22 @@ const E = ({ item: n, sx: o, onClick: l }) => {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => u(!0),
-                onDragEnd: (p, b) => {
-                  u(!1);
-                  const v = b.offset.x + b.offset.y;
-                  if (Math.abs(v) > 50) {
-                    const g = [...i], j = g[a], I = v > 0 ? Math.min(a + 1, i.length - 1) : Math.max(a - 1, 0);
-                    g.splice(a, 1), g.splice(I, 0, j), s(g);
+                onDragStart: () => g(!0),
+                onDragEnd: (h, m) => {
+                  g(!1);
+                  const x = m.offset.x + m.offset.y;
+                  if (Math.abs(x) > 50) {
+                    const v = [...u], k = v[p], $ = x > 0 ? Math.min(p + 1, u.length - 1) : Math.max(p - 1, 0);
+                    v.splice(p, 1), v.splice($, 0, k), f(v);
                   }
                 },
                 style: {
                   position: "relative",
-                  gridRow: t.rowSpan ? `span ${t.rowSpan}` : "span 2",
-                  gridColumn: t.colSpan ? `span ${t.colSpan}` : "span 1"
+                  gridRow: r.rowSpan ? `span ${r.rowSpan}` : "span 2",
+                  gridColumn: r.colSpan ? `span ${r.colSpan}` : "span 1"
                 },
-                children: /* @__PURE__ */ r.jsxs(
-                  k,
+                children: /* @__PURE__ */ t.jsxs(
+                  w,
                   {
                     sx: {
                       position: "relative",
@@ -229,16 +262,16 @@ const E = ({ item: n, sx: o, onClick: l }) => {
                       }
                     },
                     children: [
-                      /* @__PURE__ */ r.jsx(
-                        E,
+                      /* @__PURE__ */ t.jsx(
+                        A,
                         {
-                          item: t,
+                          item: r,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !f && e(t)
+                          onClick: () => !c && l(r)
                         }
                       ),
-                      (t.title || t.desc) && /* @__PURE__ */ r.jsxs(
-                        c,
+                      (r.title || r.desc) && /* @__PURE__ */ t.jsxs(
+                        a,
                         {
                           className: "hover-overlay",
                           sx: {
@@ -254,18 +287,18 @@ const E = ({ item: n, sx: o, onClick: l }) => {
                             transition: "opacity 0.2s ease-in-out"
                           },
                           children: [
-                            /* @__PURE__ */ r.jsx(
-                              c,
+                            /* @__PURE__ */ t.jsx(
+                              a,
                               {
                                 sx: {
                                   position: "absolute",
                                   inset: 0,
-                                  background: (p) => `linear-gradient(to top, ${(p.vars || p).palette.grey[900]}CC, ${(p.vars || p).palette.grey[900]}66, transparent)`
+                                  background: (h) => `linear-gradient(to top, ${(h.vars || h).palette.grey[900]}CC, ${(h.vars || h).palette.grey[900]}66, transparent)`
                                 }
                               }
                             ),
-                            t.title && /* @__PURE__ */ r.jsx(
-                              x,
+                            r.title && /* @__PURE__ */ t.jsx(
+                              j,
                               {
                                 variant: "subtitle2",
                                 sx: {
@@ -276,23 +309,23 @@ const E = ({ item: n, sx: o, onClick: l }) => {
                                   overflow: "hidden",
                                   textOverflow: "ellipsis"
                                 },
-                                children: t.title
+                                children: r.title
                               }
                             ),
-                            t.desc && /* @__PURE__ */ r.jsx(
-                              x,
+                            r.desc && /* @__PURE__ */ t.jsx(
+                              j,
                               {
                                 variant: "caption",
                                 sx: {
                                   position: "relative",
                                   color: "text.secondary",
-                                  mt: t.title ? 0.5 : 0,
+                                  mt: r.title ? 0.5 : 0,
                                   display: "-webkit-box",
                                   WebkitLineClamp: 2,
                                   WebkitBoxOrient: "vertical",
                                   overflow: "hidden"
                                 },
-                                children: t.desc
+                                children: r.desc
                               }
                             )
                           ]
@@ -302,7 +335,7 @@ const E = ({ item: n, sx: o, onClick: l }) => {
                   }
                 )
               },
-              `${t.id}-${d}`
+              `${r.id}-${d}`
             ))
           }
         )
@@ -311,6 +344,6 @@ const E = ({ item: n, sx: o, onClick: l }) => {
   ] });
 };
 export {
-  E as MediaItem,
-  T as default
+  A as MediaItem,
+  W as default
 };