@solostylist/ui-kit 1.0.146 → 1.0.147

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

@@ -32,7 +32,7 @@ export declare const MediaItem: React.FC<MediaItemProps>;
 /**
  * Built-in layout variants for the gallery
  */
-export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'custom';
+export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'highlight' | 'custom';
 /**
  * Props interface for the main SGallery component
  */

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

@@ -1,12 +1,12 @@
 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 { useState as y, useId as R, useEffect as v, 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 A = ({ item: o, sx: s, onClick: i }) => {
   const e = D(null), [n, l] = y(!1), [u, f] = y(!0);
-  return b(() => {
+  return v(() => {
     const c = {
       root: null,
       rootMargin: "50px",
@@ -19,7 +19,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
     return e.current && g.observe(e.current), () => {
       e.current && g.unobserve(e.current);
     };
-  }, []), b(() => {
+  }, []), v(() => {
     let c = !0;
     return n ? (async () => {
       if (!(!e.current || !n || !c))
@@ -33,7 +33,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
     })() : e.current && e.current.pause(), () => {
       c = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [n]), i.type === "video" ? /* @__PURE__ */ t.jsxs(
+  }, [n]), o.type === "video" ? /* @__PURE__ */ t.jsxs(
     a,
     {
       sx: {
@@ -41,7 +41,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
         overflow: "hidden",
         width: "100%",
         height: "100%",
-        ...o
+        ...s
       },
       children: [
         /* @__PURE__ */ t.jsx(
@@ -49,7 +49,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
           {
             component: "video",
             ref: e,
-            onClick: s,
+            onClick: i,
             playsInline: !0,
             muted: !0,
             loop: !0,
@@ -64,7 +64,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ t.jsx("source", { src: i.url, type: "video/mp4" })
+            children: /* @__PURE__ */ t.jsx("source", { src: o.url, type: "video/mp4" })
           }
         ),
         u && /* @__PURE__ */ t.jsx(
@@ -99,50 +99,53 @@ const A = ({ item: i, sx: o, onClick: s }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ t.jsx(a, { onClick: s, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ t.jsx(
+  ) : /* @__PURE__ */ t.jsx(a, { onClick: i, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ t.jsx(
     P,
     {
-      src: i.url,
-      alt: i.title || "",
+      src: o.url,
+      alt: o.title || "",
       width: "100%",
       height: "100%",
       style: {
-        objectFit: o != null && o.objectFit ? o.objectFit : "cover",
-        cursor: s ? "pointer" : "default",
+        objectFit: s != null && s.objectFit ? s.objectFit : "cover",
+        cursor: i ? "pointer" : "default",
         display: "block",
         width: "100%",
         height: "100%"
       }
     }
   ) });
-}, C = (i, o) => {
-  let s = 1, e = 2;
-  switch (o) {
+}, k = (o, s) => {
+  let i = 1, e = 2;
+  switch (s) {
     case "grid":
-      s = 1, e = 2;
+      i = 1, e = 2;
       break;
     case "masonry":
-      s = 1, e = i % 3 === 0 ? 3 : i % 2 === 0 ? 2 : 4;
+      i = 1, e = o % 3 === 0 ? 3 : o % 2 === 0 ? 2 : 4;
       break;
     case "spotlight":
-      i === 0 ? (s = 2, e = 4) : (s = 1, e = 2);
+      o === 0 ? (i = 2, e = 4) : (i = 1, e = 2);
       break;
     case "featured":
-      i === 0 ? (s = 2, e = 6) : (s = 1, e = 2);
+      o === 0 ? (i = 2, e = 6) : (i = 1, e = 2);
+      break;
+    case "highlight":
+      o === 0 ? (i = 3, e = 6) : (i = 1, e = 2);
       break;
     case "custom":
-      s = 1, e = 2;
+      i = 1, e = 2;
       break;
   }
-  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: [
+  return { colSpan: i, rowSpan: e };
+}, S = (o, s) => s === "custom" ? o : o.map((i, e) => {
+  const { colSpan: n, rowSpan: l } = k(e, s);
+  return { ...i, colSpan: n, rowSpan: l };
+}), W = ({ mediaItems: o, variant: s = "masonry", loading: i = !1, skeletonCount: e = 6 }) => {
+  const [n, l] = y(null), [u, f] = y(() => S(o, s)), [c, g] = y(!1), d = R();
+  return v(() => {
+    f(S(o, s));
+  }, [o, s]), /* @__PURE__ */ t.jsxs(a, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
     /* @__PURE__ */ t.jsx(
       V,
       {
@@ -182,8 +185,8 @@ const A = ({ item: i, sx: o, onClick: s }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: s ? Array.from({ length: e }).map((r, p) => {
-              const { colSpan: h, rowSpan: m } = C(p, o);
+            children: i ? Array.from({ length: e }).map((r, p) => {
+              const { colSpan: h, rowSpan: b } = k(p, s);
               return /* @__PURE__ */ t.jsx(
                 w,
                 {
@@ -191,7 +194,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
                     position: "relative",
                     overflow: "hidden",
                     borderRadius: 2,
-                    gridRow: `span ${m}`,
+                    gridRow: `span ${b}`,
                     gridColumn: `span ${h}`
                   },
                   children: /* @__PURE__ */ t.jsx(
@@ -233,12 +236,12 @@ const A = ({ item: i, sx: o, onClick: s }) => {
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
                 onDragStart: () => g(!0),
-                onDragEnd: (h, m) => {
+                onDragEnd: (h, b) => {
                   g(!1);
-                  const x = m.offset.x + m.offset.y;
+                  const x = b.offset.x + b.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);
+                    const m = [...u], C = m[p], $ = x > 0 ? Math.min(p + 1, u.length - 1) : Math.max(p - 1, 0);
+                    m.splice(p, 1), m.splice($, 0, C), f(m);
                   }
                 },
                 style: {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.146",
+  "version": "1.0.147",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",