@solostylist/ui-kit 1.0.78 → 1.0.79

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

@@ -1,31 +1,36 @@
 import { j as i } from "../jsx-runtime-DywqP_6a.js";
-import { useState as u, useEffect as v, useRef as C } from "react";
-import { Box as l, Paper as y, Typography as b, Modal as I, IconButton as z, Stack as S } from "@mui/material";
-import { AnimatePresence as j, motion as p } from "framer-motion";
-import R from "../s-lazy-image/s-lazy-image.js";
-import { C as P } from "../Close-CVFQMMUW.js";
-const m = ({ item: r, sx: s, onClick: a }) => {
-  const e = C(null), [d, x] = u(!1), [h, t] = u(!0);
+import { useState as b, useEffect as v, useRef as z } from "react";
+import { Box as l, Paper as y, Typography as m, Modal as R, IconButton as j, Stack as P } from "@mui/material";
+import { AnimatePresence as k, motion as u } from "framer-motion";
+import S from "../s-lazy-image/s-lazy-image.js";
+import { C as E } from "../Close-CVFQMMUW.js";
+import { c as C } from "../createSvgIcon-DN-sh_sr.js";
+const D = C(/* @__PURE__ */ i.jsx("path", {
+  d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+}), "ChevronLeft"), M = C(/* @__PURE__ */ i.jsx("path", {
+  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+}), "ChevronRight"), w = ({ item: r, sx: s, onClick: a }) => {
+  const e = z(null), [d, g] = b(!1), [f, o] = b(!0);
   return v(() => {
-    const o = { root: null, rootMargin: "50px", threshold: 0.1 }, n = new IntersectionObserver((c) => {
-      c.forEach((g) => x(g.isIntersecting));
-    }, o);
-    return e.current && n.observe(e.current), () => {
-      e.current && n.unobserve(e.current);
+    const n = { root: null, rootMargin: "50px", threshold: 0.1 }, x = new IntersectionObserver((p) => {
+      p.forEach((t) => g(t.isIntersecting));
+    }, n);
+    return e.current && x.observe(e.current), () => {
+      e.current && x.unobserve(e.current);
     };
   }, []), v(() => {
-    let o = !0;
+    let n = !0;
     return d ? (async () => {
-      if (!(!e.current || !d || !o))
+      if (!(!e.current || !d || !n))
         try {
-          e.current.readyState >= 3 ? (t(!1), await e.current.play()) : (t(!0), await new Promise((c) => {
-            e.current && (e.current.oncanplay = () => c());
-          }), o && (t(!1), await e.current.play()));
-        } catch (c) {
-          console.warn("Video playback failed:", c);
+          e.current.readyState >= 3 ? (o(!1), await e.current.play()) : (o(!0), await new Promise((p) => {
+            e.current && (e.current.oncanplay = () => p());
+          }), n && (o(!1), await e.current.play()));
+        } catch (p) {
+          console.warn("Video playback failed:", p);
         }
     })() : e.current && e.current.pause(), () => {
-      o = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+      n = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
   }, [d]), r.type === "video" ? /* @__PURE__ */ i.jsxs(
     l,
@@ -52,7 +57,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
               width: "100%",
               height: "100%",
               objectFit: "cover",
-              opacity: h ? 0.8 : 1,
+              opacity: f ? 0.8 : 1,
               transition: "opacity 0.2s",
               transform: "translateZ(0)",
               willChange: "transform",
@@ -61,7 +66,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
             children: /* @__PURE__ */ i.jsx("source", { src: r.url, type: "video/mp4" })
           }
         ),
-        h && /* @__PURE__ */ i.jsx(
+        f && /* @__PURE__ */ i.jsx(
           l,
           {
             sx: {
@@ -94,7 +99,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
       ]
     }
   ) : /* @__PURE__ */ i.jsx(l, { onClick: a, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ i.jsx(
-    R,
+    S,
     {
       src: r.url,
       alt: r.title || "",
@@ -109,16 +114,36 @@ const m = ({ item: r, sx: s, onClick: a }) => {
       }
     }
   ) });
-}, D = ({
+}, L = ({
   selectedItem: r,
   isOpen: s,
   onClose: a,
   setSelectedItem: e,
   mediaItems: d
 }) => {
-  const [x, h] = u({ x: 0, y: 0 });
-  return s ? /* @__PURE__ */ i.jsx(
-    I,
+  const [g, f] = b({ x: 0, y: 0 }), o = d.findIndex((t) => t.id === r.id), n = d.length, x = () => {
+    o > 0 && e(d[o - 1]);
+  }, p = () => {
+    o < n - 1 && e(d[o + 1]);
+  };
+  return v(() => {
+    const t = (c) => {
+      if (s)
+        switch (c.key) {
+          case "ArrowLeft":
+            x();
+            break;
+          case "ArrowRight":
+            p();
+            break;
+          case "Escape":
+            a();
+            break;
+        }
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [s, o, n]), s ? /* @__PURE__ */ i.jsx(
+    R,
     {
       open: s,
       onClose: a,
@@ -137,7 +162,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
       },
       children: /* @__PURE__ */ i.jsxs(l, { children: [
         /* @__PURE__ */ i.jsx(
-          p.div,
+          u.div,
           {
             initial: { scale: 0.98 },
             animate: { scale: 1 },
@@ -177,8 +202,8 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                             justifyContent: "center",
                             bgcolor: "background.default"
                           },
-                          children: /* @__PURE__ */ i.jsx(j, { mode: "wait", children: /* @__PURE__ */ i.jsx(
-                            p.div,
+                          children: /* @__PURE__ */ i.jsx(k, { mode: "wait", children: /* @__PURE__ */ i.jsx(
+                            u.div,
                             {
                               style: { position: "relative" },
                               initial: { y: 20, scale: 0.97 },
@@ -204,7 +229,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                                   },
                                   children: [
                                     /* @__PURE__ */ i.jsx(
-                                      m,
+                                      w,
                                       {
                                         item: r,
                                         sx: { width: "100%", height: "100%", objectFit: "contain", bgcolor: "background.paper" },
@@ -225,8 +250,8 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                                         },
                                         onClick: (t) => t.stopPropagation(),
                                         children: [
-                                          r.title && /* @__PURE__ */ i.jsx(b, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: r.title }),
-                                          r.desc && /* @__PURE__ */ i.jsx(b, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: r.desc })
+                                          r.title && /* @__PURE__ */ i.jsx(m, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: r.title }),
+                                          r.desc && /* @__PURE__ */ i.jsx(m, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: r.desc })
                                         ]
                                       }
                                     )
@@ -241,7 +266,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                     }
                   ),
                   /* @__PURE__ */ i.jsx(
-                    z,
+                    j,
                     {
                       "aria-label": "Close",
                       onClick: a,
@@ -252,7 +277,69 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                         zIndex: (t) => t.zIndex.modal + 102
                         // Ensure it's above everything
                       },
-                      children: /* @__PURE__ */ i.jsx(P, { fontSize: "small" })
+                      children: /* @__PURE__ */ i.jsx(E, {})
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsxs(
+                    l,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: { xs: 8, sm: 10, md: 12 },
+                        left: { xs: 8, sm: 10, md: 12 },
+                        zIndex: (t) => t.zIndex.modal + 102,
+                        padding: 1,
+                        px: 2,
+                        fontSize: { xs: 14, sm: 16 },
+                        color: "text.primary"
+                      },
+                      children: [
+                        o + 1,
+                        " / ",
+                        n
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    j,
+                    {
+                      "aria-label": "Previous image",
+                      onClick: (t) => {
+                        t.stopPropagation(), x();
+                      },
+                      disabled: o === 0,
+                      sx: {
+                        position: "absolute",
+                        left: { xs: 8, sm: 10, md: 12 },
+                        top: "50%",
+                        transform: "translateY(-50%)",
+                        zIndex: (t) => t.zIndex.modal + 102,
+                        "&:disabled": {
+                          opacity: 0.5
+                        }
+                      },
+                      children: /* @__PURE__ */ i.jsx(D, {})
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    j,
+                    {
+                      "aria-label": "Next image",
+                      onClick: (t) => {
+                        t.stopPropagation(), p();
+                      },
+                      disabled: o === n - 1,
+                      sx: {
+                        position: "absolute",
+                        right: { xs: 8, sm: 10, md: 12 },
+                        top: "50%",
+                        transform: "translateY(-50%)",
+                        zIndex: (t) => t.zIndex.modal + 102,
+                        "&:disabled": {
+                          opacity: 0.5
+                        }
+                      },
+                      children: /* @__PURE__ */ i.jsx(M, {})
                     }
                   )
                 ]
@@ -261,15 +348,15 @@ const m = ({ item: r, sx: s, onClick: a }) => {
           }
         ),
         /* @__PURE__ */ i.jsx(
-          p.div,
+          u.div,
           {
             drag: !0,
             dragMomentum: !1,
             dragElastic: 0.1,
             initial: !1,
-            animate: { x: x.x, y: x.y },
-            onDragEnd: (t, o) => {
-              h((n) => ({ x: n.x + o.offset.x, y: n.y + o.offset.y }));
+            animate: { x: g.x, y: g.y },
+            onDragEnd: (t, c) => {
+              f((h) => ({ x: h.x + c.offset.x, y: h.y + c.offset.y }));
             },
             style: {
               position: "fixed",
@@ -296,11 +383,11 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                   px: 1.5,
                   py: 1
                 },
-                children: /* @__PURE__ */ i.jsx(S, { direction: "row", alignItems: "center", spacing: -1.5, children: d.map((t, o) => /* @__PURE__ */ i.jsxs(
-                  p.div,
+                children: /* @__PURE__ */ i.jsx(P, { direction: "row", alignItems: "center", spacing: -1.5, children: d.map((t, c) => /* @__PURE__ */ i.jsxs(
+                  u.div,
                   {
-                    onClick: (n) => {
-                      n.stopPropagation(), e(t);
+                    onClick: (h) => {
+                      h.stopPropagation(), e(t);
                     },
                     style: {
                       position: "relative",
@@ -309,15 +396,15 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                       borderRadius: 10,
                       overflow: "hidden",
                       flexShrink: 0,
-                      zIndex: r.id === t.id ? 30 : d.length - o,
+                      zIndex: r.id === t.id ? 30 : d.length - c,
                       border: r.id === t.id ? "2px solid" : void 0,
                       borderColor: r.id === t.id ? "divider" : void 0,
                       cursor: "pointer"
                     },
-                    initial: { rotate: o % 2 === 0 ? -15 : 15 },
+                    initial: { rotate: c % 2 === 0 ? -15 : 15 },
                     animate: {
                       scale: r.id === t.id ? 1.2 : 1,
-                      rotate: r.id === t.id ? 0 : o % 2 === 0 ? -15 : 15,
+                      rotate: r.id === t.id ? 0 : c % 2 === 0 ? -15 : 15,
                       y: r.id === t.id ? -8 : 0
                     },
                     whileHover: {
@@ -327,20 +414,20 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                       transition: { type: "spring", stiffness: 400, damping: 25 }
                     },
                     children: [
-                      /* @__PURE__ */ i.jsx(m, { item: t, sx: { width: "100%", height: "100%" }, onClick: () => e(t) }),
+                      /* @__PURE__ */ i.jsx(w, { item: t, sx: { width: "100%", height: "100%" }, onClick: () => e(t) }),
                       /* @__PURE__ */ i.jsx(
                         l,
                         {
                           sx: {
                             position: "absolute",
                             inset: 0,
-                            background: (n) => `linear-gradient(to bottom, transparent, ${n.palette.action.hover}, ${n.palette.action.selected})`,
+                            background: (h) => `linear-gradient(to bottom, transparent, ${h.palette.action.hover}, ${h.palette.action.selected})`,
                             pointerEvents: "none"
                           }
                         }
                       ),
                       r.id === t.id && /* @__PURE__ */ i.jsx(
-                        p.div,
+                        u.div,
                         {
                           layoutId: "activeGlow",
                           style: {
@@ -365,14 +452,14 @@ const m = ({ item: r, sx: s, onClick: a }) => {
       ] })
     }
   ) : null;
-}, T = ({ mediaItems: r }) => {
-  const [s, a] = u(null), [e, d] = u(r), [x, h] = u(!1);
+}, W = ({ mediaItems: r }) => {
+  const [s, a] = b(null), [e, d] = b(r), [g, f] = b(!1);
   return v(() => {
     d(r);
   }, [r]), /* @__PURE__ */ i.jsxs(l, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
     " ",
     s && /* @__PURE__ */ i.jsx(
-      D,
+      L,
       {
         selectedItem: s,
         isOpen: !0,
@@ -381,8 +468,8 @@ const m = ({ item: r, sx: s, onClick: a }) => {
         mediaItems: e
       }
     ),
-    /* @__PURE__ */ i.jsx(j, { mode: "wait", children: !s && /* @__PURE__ */ i.jsx(
-      p.div,
+    /* @__PURE__ */ i.jsx(k, { mode: "wait", children: !s && /* @__PURE__ */ i.jsx(
+      u.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -409,11 +496,11 @@ const m = ({ item: r, sx: s, onClick: a }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: e.map((t, o) => /* @__PURE__ */ i.jsx(
-              p.div,
+            children: e.map((o, n) => /* @__PURE__ */ i.jsx(
+              u.div,
               {
-                layoutId: `media-${t.id}`,
-                onClick: () => !x && a(t),
+                layoutId: `media-${o.id}`,
+                onClick: () => !g && a(o),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -424,7 +511,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: o * 0.05
+                      delay: n * 0.05
                     }
                   }
                 },
@@ -432,19 +519,19 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => h(!0),
-                onDragEnd: (n, c) => {
-                  h(!1);
-                  const g = c.offset.x + c.offset.y;
-                  if (Math.abs(g) > 50) {
-                    const f = [...e], w = f[o], k = g > 0 ? Math.min(o + 1, e.length - 1) : Math.max(o - 1, 0);
-                    f.splice(o, 1), f.splice(k, 0, w), d(f);
+                onDragStart: () => f(!0),
+                onDragEnd: (x, p) => {
+                  f(!1);
+                  const t = p.offset.x + p.offset.y;
+                  if (Math.abs(t) > 50) {
+                    const c = [...e], h = c[n], I = t > 0 ? Math.min(n + 1, e.length - 1) : Math.max(n - 1, 0);
+                    c.splice(n, 1), c.splice(I, 0, h), d(c);
                   }
                 },
                 style: {
                   position: "relative",
-                  gridRow: t.rowSpan ? `span ${t.rowSpan}` : "span 2",
-                  gridColumn: t.colSpan ? `span ${t.colSpan}` : "span 1"
+                  gridRow: o.rowSpan ? `span ${o.rowSpan}` : "span 2",
+                  gridColumn: o.colSpan ? `span ${o.colSpan}` : "span 1"
                 },
                 children: /* @__PURE__ */ i.jsxs(
                   y,
@@ -462,15 +549,15 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                     },
                     children: [
                       /* @__PURE__ */ i.jsx(
-                        m,
+                        w,
                         {
-                          item: t,
+                          item: o,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !x && a(t)
+                          onClick: () => !g && a(o)
                         }
                       ),
                       /* @__PURE__ */ i.jsxs(
-                        p.div,
+                        u.div,
                         {
                           style: {
                             position: "absolute",
@@ -492,12 +579,12 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                                 sx: {
                                   position: "absolute",
                                   inset: 0,
-                                  background: (n) => `linear-gradient(to top, ${n.palette.grey[900]}CC, ${n.palette.grey[900]}66, transparent)`
+                                  background: (x) => `linear-gradient(to top, ${x.palette.grey[900]}CC, ${x.palette.grey[900]}66, transparent)`
                                 }
                               }
                             ),
                             /* @__PURE__ */ i.jsx(
-                              b,
+                              m,
                               {
                                 variant: "subtitle2",
                                 sx: {
@@ -508,11 +595,11 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                                   overflow: "hidden",
                                   textOverflow: "ellipsis"
                                 },
-                                children: t.title
+                                children: o.title
                               }
                             ),
                             /* @__PURE__ */ i.jsx(
-                              b,
+                              m,
                               {
                                 variant: "caption",
                                 sx: {
@@ -524,7 +611,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                                   WebkitBoxOrient: "vertical",
                                   overflow: "hidden"
                                 },
-                                children: t.desc
+                                children: o.desc
                               }
                             )
                           ]
@@ -534,7 +621,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
                   }
                 )
               },
-              t.id
+              o.id
             ))
           }
         )
@@ -543,7 +630,7 @@ const m = ({ item: r, sx: s, onClick: a }) => {
   ] });
 };
 export {
-  D as GalleryModal,
-  m as MediaItem,
-  T as default
+  L as GalleryModal,
+  w as MediaItem,
+  W as default
 };

package/package.json

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