@solostylist/ui-kit 1.0.82 → 1.0.84

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

@@ -1,7 +1,7 @@
 import { j as i } from "../jsx-runtime-DywqP_6a.js";
-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 { useState as y, useEffect as v, useRef as z } from "react";
+import { Box as a, Paper as b, Typography as m, Modal as R, IconButton as j, Stack as P } from "@mui/material";
+import { AnimatePresence as k, motion as f } from "framer-motion";
 import S from "../s-lazy-image/s-lazy-image.js";
 import { C as E } from "../Close-C1lLcTQu.js";
 import { c as C } from "../createSvgIcon-9XY7lJan.js";
@@ -9,8 +9,8 @@ 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);
+}), "ChevronRight"), w = ({ item: r, sx: s, onClick: l }) => {
+  const o = z(null), [d, u] = y(!1), [g, e] = y(!0);
   return v(() => {
     const n = {
       root: null,
@@ -19,27 +19,27 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
       threshold: 0.1
       // Trigger when 10% of video is visible
     }, x = new IntersectionObserver((p) => {
-      p.forEach((t) => g(t.isIntersecting));
+      p.forEach((t) => u(t.isIntersecting));
     }, n);
-    return e.current && x.observe(e.current), () => {
-      e.current && x.unobserve(e.current);
+    return o.current && x.observe(o.current), () => {
+      o.current && x.unobserve(o.current);
     };
   }, []), v(() => {
     let n = !0;
     return d ? (async () => {
-      if (!(!e.current || !d || !n))
+      if (!(!o.current || !d || !n))
         try {
-          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()));
+          o.current.readyState >= 3 ? (e(!1), await o.current.play()) : (e(!0), await new Promise((p) => {
+            o.current && (o.current.oncanplay = () => p());
+          }), n && (e(!1), await o.current.play()));
         } catch (p) {
           console.warn("Video playback failed:", p);
         }
-    })() : e.current && e.current.pause(), () => {
-      n = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+    })() : o.current && o.current.pause(), () => {
+      n = !1, o.current && (o.current.pause(), o.current.removeAttribute("src"), o.current.load());
     };
   }, [d]), r.type === "video" ? /* @__PURE__ */ i.jsxs(
-    l,
+    a,
     {
       sx: {
         position: "relative",
@@ -50,11 +50,11 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
       },
       children: [
         /* @__PURE__ */ i.jsx(
-          l,
+          a,
           {
             component: "video",
-            ref: e,
-            onClick: a,
+            ref: o,
+            onClick: l,
             playsInline: !0,
             muted: !0,
             loop: !0,
@@ -63,7 +63,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
               width: "100%",
               height: "100%",
               objectFit: "cover",
-              opacity: f ? 0.8 : 1,
+              opacity: g ? 0.8 : 1,
               transition: "opacity 0.2s",
               transform: "translateZ(0)",
               willChange: "transform",
@@ -72,8 +72,8 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
             children: /* @__PURE__ */ i.jsx("source", { src: r.url, type: "video/mp4" })
           }
         ),
-        f && /* @__PURE__ */ i.jsx(
-          l,
+        g && /* @__PURE__ */ i.jsx(
+          a,
           {
             sx: {
               position: "absolute",
@@ -84,7 +84,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
               bgcolor: "action.disabled"
             },
             children: /* @__PURE__ */ i.jsx(
-              l,
+              a,
               {
                 sx: {
                   width: 24,
@@ -104,7 +104,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
         )
       ]
     }
-  ) : /* @__PURE__ */ i.jsx(l, { onClick: a, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ i.jsx(
+  ) : /* @__PURE__ */ i.jsx(a, { onClick: l, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ i.jsx(
     S,
     {
       src: r.url,
@@ -113,7 +113,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
       height: "100%",
       style: {
         objectFit: s != null && s.objectFit ? s.objectFit : "cover",
-        cursor: a ? "pointer" : "default",
+        cursor: l ? "pointer" : "default",
         display: "block",
         width: "100%",
         height: "100%"
@@ -123,14 +123,14 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
 }, L = ({
   selectedItem: r,
   isOpen: s,
-  onClose: a,
-  setSelectedItem: e,
+  onClose: l,
+  setSelectedItem: o,
   mediaItems: d
 }) => {
-  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]);
+  const [u, g] = y({ x: 0, y: 0 }), e = d.findIndex((t) => t.id === r.id), n = d.length, x = () => {
+    e > 0 && o(d[e - 1]);
   }, p = () => {
-    o < n - 1 && e(d[o + 1]);
+    e < n - 1 && o(d[e + 1]);
   };
   return v(() => {
     const t = (c) => {
@@ -143,16 +143,16 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
             p();
             break;
           case "Escape":
-            a();
+            l();
             break;
         }
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [s, o, n]), s ? /* @__PURE__ */ i.jsx(
+  }, [s, e, n]), s ? /* @__PURE__ */ i.jsx(
     R,
     {
       open: s,
-      onClose: a,
+      onClose: l,
       sx: {
         zIndex: (t) => t.zIndex.modal + 100
         // Increased z-index
@@ -166,16 +166,16 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
           }
         }
       },
-      children: /* @__PURE__ */ i.jsxs(l, { children: [
+      children: /* @__PURE__ */ i.jsxs(a, { children: [
         /* @__PURE__ */ i.jsx(
-          u.div,
+          f.div,
           {
             initial: { scale: 0.98 },
             animate: { scale: 1 },
             exit: { scale: 0.98 },
             transition: { type: "spring", stiffness: 400, damping: 30 },
             children: /* @__PURE__ */ i.jsxs(
-              y,
+              b,
               {
                 elevation: 3,
                 sx: {
@@ -190,7 +190,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                 },
                 children: [
                   /* @__PURE__ */ i.jsx(
-                    l,
+                    a,
                     {
                       sx: {
                         height: "100%",
@@ -198,7 +198,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                         flexDirection: "column"
                       },
                       children: /* @__PURE__ */ i.jsx(
-                        l,
+                        a,
                         {
                           sx: {
                             flex: 1,
@@ -209,7 +209,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                             bgcolor: "background.default"
                           },
                           children: /* @__PURE__ */ i.jsx(k, { mode: "wait", children: /* @__PURE__ */ i.jsx(
-                            u.div,
+                            f.div,
                             {
                               style: { position: "relative" },
                               initial: { y: 20, scale: 0.97 },
@@ -219,9 +219,9 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                                 transition: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 }
                               },
                               exit: { y: 20, scale: 0.97, transition: { duration: 0.15 } },
-                              onClick: a,
+                              onClick: l,
                               children: /* @__PURE__ */ i.jsxs(
-                                y,
+                                b,
                                 {
                                   elevation: 6,
                                   sx: {
@@ -239,11 +239,11 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                                       {
                                         item: r,
                                         sx: { width: "100%", height: "100%", objectFit: "contain", bgcolor: "background.paper" },
-                                        onClick: a
+                                        onClick: l
                                       }
                                     ),
                                     /* @__PURE__ */ i.jsxs(
-                                      l,
+                                      a,
                                       {
                                         sx: {
                                           position: "absolute",
@@ -275,7 +275,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                     j,
                     {
                       "aria-label": "Close",
-                      onClick: a,
+                      onClick: l,
                       sx: {
                         position: "absolute",
                         top: { xs: 8, sm: 10, md: 12 },
@@ -287,7 +287,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                     }
                   ),
                   /* @__PURE__ */ i.jsxs(
-                    l,
+                    a,
                     {
                       sx: {
                         position: "absolute",
@@ -300,7 +300,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                         color: "text.primary"
                       },
                       children: [
-                        o + 1,
+                        e + 1,
                         " / ",
                         n
                       ]
@@ -313,7 +313,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                       onClick: (t) => {
                         t.stopPropagation(), x();
                       },
-                      disabled: o === 0,
+                      disabled: e === 0,
                       sx: {
                         position: "absolute",
                         left: { xs: 8, sm: 10, md: 12 },
@@ -334,7 +334,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                       onClick: (t) => {
                         t.stopPropagation(), p();
                       },
-                      disabled: o === n - 1,
+                      disabled: e === n - 1,
                       sx: {
                         position: "absolute",
                         right: { xs: 8, sm: 10, md: 12 },
@@ -354,15 +354,15 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
           }
         ),
         /* @__PURE__ */ i.jsx(
-          u.div,
+          f.div,
           {
             drag: !0,
             dragMomentum: !1,
             dragElastic: 0.1,
             initial: !1,
-            animate: { x: g.x, y: g.y },
+            animate: { x: u.x, y: u.y },
             onDragEnd: (t, c) => {
-              f((h) => ({ x: h.x + c.offset.x, y: h.y + c.offset.y }));
+              g((h) => ({ x: h.x + c.offset.x, y: h.y + c.offset.y }));
             },
             style: {
               position: "fixed",
@@ -374,7 +374,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
               touchAction: "none"
             },
             children: /* @__PURE__ */ i.jsx(
-              y,
+              b,
               {
                 elevation: 8,
                 sx: {
@@ -390,10 +390,10 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                   py: 1
                 },
                 children: /* @__PURE__ */ i.jsx(P, { direction: "row", alignItems: "center", spacing: -1.5, children: d.map((t, c) => /* @__PURE__ */ i.jsxs(
-                  u.div,
+                  f.div,
                   {
                     onClick: (h) => {
-                      h.stopPropagation(), e(t);
+                      h.stopPropagation(), o(t);
                     },
                     style: {
                       position: "relative",
@@ -420,9 +420,9 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                       transition: { type: "spring", stiffness: 400, damping: 25 }
                     },
                     children: [
-                      /* @__PURE__ */ i.jsx(w, { item: t, sx: { width: "100%", height: "100%" }, onClick: () => e(t) }),
+                      /* @__PURE__ */ i.jsx(w, { item: t, sx: { width: "100%", height: "100%" }, onClick: () => o(t) }),
                       /* @__PURE__ */ i.jsx(
-                        l,
+                        a,
                         {
                           sx: {
                             position: "absolute",
@@ -433,7 +433,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                         }
                       ),
                       r.id === t.id && /* @__PURE__ */ i.jsx(
-                        u.div,
+                        f.div,
                         {
                           layoutId: "activeGlow",
                           style: {
@@ -458,23 +458,23 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
       ] })
     }
   ) : null;
-}, W = ({ mediaItems: r }) => {
-  const [s, a] = b(null), [e, d] = b(r), [g, f] = b(!1);
+}, H = ({ mediaItems: r }) => {
+  const [s, l] = y(null), [o, d] = y(r), [u, g] = y(!1);
   return v(() => {
     d(r);
-  }, [r]), /* @__PURE__ */ i.jsxs(l, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+  }, [r]), /* @__PURE__ */ i.jsxs(a, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
     s && /* @__PURE__ */ i.jsx(
       L,
       {
         selectedItem: s,
         isOpen: !0,
-        onClose: () => a(null),
-        setSelectedItem: a,
-        mediaItems: e
+        onClose: () => l(null),
+        setSelectedItem: l,
+        mediaItems: o
       }
     ),
     /* @__PURE__ */ i.jsx(k, { mode: "wait", children: !s && /* @__PURE__ */ i.jsx(
-      u.div,
+      f.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -488,7 +488,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
           }
         },
         children: /* @__PURE__ */ i.jsx(
-          l,
+          a,
           {
             sx: {
               display: "grid",
@@ -502,11 +502,11 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: e.map((o, n) => /* @__PURE__ */ i.jsx(
-              u.div,
+            children: o.map((e, n) => /* @__PURE__ */ i.jsx(
+              f.div,
               {
-                layoutId: `media-${o.id}`,
-                onClick: () => !g && a(o),
+                layoutId: `media-${e.id}`,
+                onClick: () => !u && l(e),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -525,22 +525,22 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => f(!0),
+                onDragStart: () => g(!0),
                 onDragEnd: (x, p) => {
-                  f(!1);
+                  g(!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);
+                    const c = [...o], h = c[n], I = t > 0 ? Math.min(n + 1, o.length - 1) : Math.max(n - 1, 0);
                     c.splice(n, 1), c.splice(I, 0, h), d(c);
                   }
                 },
                 style: {
                   position: "relative",
-                  gridRow: o.rowSpan ? `span ${o.rowSpan}` : "span 2",
-                  gridColumn: o.colSpan ? `span ${o.colSpan}` : "span 1"
+                  gridRow: e.rowSpan ? `span ${e.rowSpan}` : "span 2",
+                  gridColumn: e.colSpan ? `span ${e.colSpan}` : "span 1"
                 },
                 children: /* @__PURE__ */ i.jsxs(
-                  y,
+                  b,
                   {
                     elevation: 4,
                     sx: {
@@ -549,38 +549,40 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                       borderRadius: 2,
                       width: "100%",
                       height: "100%",
-                      minHeight: 120,
                       cursor: "grab",
-                      "&:active": { cursor: "grabbing" }
+                      "&:active": { cursor: "grabbing" },
+                      "&:hover .hover-overlay": {
+                        opacity: 1
+                      }
                     },
                     children: [
                       /* @__PURE__ */ i.jsx(
                         w,
                         {
-                          item: o,
+                          item: e,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !g && a(o)
+                          onClick: () => !u && l(e)
                         }
                       ),
-                      /* @__PURE__ */ i.jsxs(
-                        u.div,
+                      (e.title || e.desc) && /* @__PURE__ */ i.jsxs(
+                        a,
                         {
-                          style: {
+                          className: "hover-overlay",
+                          sx: {
                             position: "absolute",
                             inset: 0,
                             display: "flex",
                             flexDirection: "column",
                             justifyContent: "flex-end",
-                            padding: 12,
-                            pointerEvents: "none"
+                            padding: 1.5,
+                            pointerEvents: "none",
                             // Prevent blocking clicks
+                            opacity: 0,
+                            transition: "opacity 0.2s ease-in-out"
                           },
-                          initial: { opacity: 0 },
-                          whileHover: { opacity: 1 },
-                          transition: { duration: 0.2 },
                           children: [
                             /* @__PURE__ */ i.jsx(
-                              l,
+                              a,
                               {
                                 sx: {
                                   position: "absolute",
@@ -589,7 +591,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                                 }
                               }
                             ),
-                            /* @__PURE__ */ i.jsx(
+                            e.title && /* @__PURE__ */ i.jsx(
                               m,
                               {
                                 variant: "subtitle2",
@@ -601,23 +603,23 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                                   overflow: "hidden",
                                   textOverflow: "ellipsis"
                                 },
-                                children: o.title
+                                children: e.title
                               }
                             ),
-                            /* @__PURE__ */ i.jsx(
+                            e.desc && /* @__PURE__ */ i.jsx(
                               m,
                               {
                                 variant: "caption",
                                 sx: {
                                   position: "relative",
                                   color: "text.secondary",
-                                  mt: 0.5,
+                                  mt: e.title ? 0.5 : 0,
                                   display: "-webkit-box",
                                   WebkitLineClamp: 2,
                                   WebkitBoxOrient: "vertical",
                                   overflow: "hidden"
                                 },
-                                children: o.desc
+                                children: e.desc
                               }
                             )
                           ]
@@ -627,7 +629,7 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
                   }
                 )
               },
-              o.id
+              e.id
             ))
           }
         )
@@ -638,5 +640,5 @@ const D = C(/* @__PURE__ */ i.jsx("path", {
 export {
   L as GalleryModal,
   w as MediaItem,
-  W as default
+  H as default
 };

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

@@ -1,53 +1,59 @@
-import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import { useId as c, useState as d } from "react";
-import { Box as f, Skeleton as p } from "@mui/material";
-const y = ({
-  src: a,
-  variant: n = "rounded",
-  alt: m,
-  height: i,
-  width: o,
-  className: g,
-  style: h,
-  minWidth: r = "auto",
-  minHeight: u = "auto"
+import { j as s } from "../jsx-runtime-DywqP_6a.js";
+import { useId as w, useState as n, useEffect as x } from "react";
+import { useTheme as j, Box as L, Skeleton as b } from "@mui/material";
+const R = ({
+  src: u,
+  variant: o = "rounded",
+  alt: r,
+  height: t,
+  width: i,
+  className: m,
+  style: d,
+  minWidth: g = "auto",
+  minHeight: c = "auto"
 }) => {
-  const w = c(), [t, l] = d({
-    width: o || "100%",
-    height: i || "auto"
-  }), [s, x] = d(!1);
-  return /* @__PURE__ */ e.jsxs(f, { height: t.height, width: t.width, children: [
-    !s && /* @__PURE__ */ e.jsx(
-      p,
+  const l = w(), f = j(), [e, h] = n({
+    width: i || "100%",
+    height: t || "auto"
+  }), [a, p] = n(!1);
+  return x(() => {
+    h({
+      width: i || "100%",
+      height: t || "auto"
+    });
+  }, [i, t]), /* @__PURE__ */ s.jsxs(L, { height: e.height, width: e.width, children: [
+    !a && /* @__PURE__ */ s.jsx(
+      b,
       {
-        variant: n,
-        id: `image-skeleton-${w}`,
+        variant: o,
+        id: `image-skeleton-${l}`,
         animation: "wave",
-        style: { height: t.height, width: t.width, minWidth: r, minHeight: u, ...h }
+        style: { height: e.height, width: e.width, minWidth: g, minHeight: c, ...d }
       }
     ),
-    /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ s.jsx(
       "img",
       {
-        src: a,
-        alt: m,
+        src: u,
+        alt: r,
         style: {
-          height: t.height,
-          width: t.width,
-          display: s ? "block" : "none",
-          ...h
+          height: e.height,
+          width: e.width,
+          display: a ? "block" : "none",
+          borderRadius: o === "circular" ? "50%" : o === "rounded" ? f.shape.borderRadius : "0px",
+          ...d
         },
-        className: g,
+        className: m,
         onLoad: () => {
-          (!i || !o) && l({
-            width: t.width,
-            height: t.height
-          }), x(!0);
+          (!t || !i) && h({
+            width: e.width,
+            height: e.height
+          }), p(!0);
         }
       }
     )
   ] });
 };
 export {
-  y as default
+  R as default
 };

package/dist/s-snackbar-message/s-snackbar-message.d.ts

@@ -37,14 +37,14 @@ export default SSnackbarMessage;
  */
 export interface SnackbarMessageOpenOptions {
     /** The message to display */
-    message: string;
+    message: string | React.ReactNode;
 }
 /**
  * Parameters for the handleOpen function
  */
 export interface handleOpenParams {
     /** Message configuration */
-    snackbarMessageOptions: SnackbarMessageOpenOptions;
+    snackbarMessageOptions?: SnackbarMessageOpenOptions;
     /** Optional Snackbar props for customization */
     snackbarProps?: SnackbarProps;
     /** Optional Alert props for customization */

package/dist/s-snackbar-message/s-snackbar-message.js

@@ -17,7 +17,7 @@ const x = ({
     onClose: e,
     anchorOrigin: { vertical: "top", horizontal: "center" },
     ...n,
-    children: /* @__PURE__ */ t.jsx(S, { onClose: e, severity: "error", sx: { width: "100%" }, ...o, children: s })
+    children: /* @__PURE__ */ t.jsx(S, { onClose: e, severity: "info", sx: { width: "100%" }, ...o, children: s })
   }
 ), c = a.createContext(null), M = ({ children: s }) => {
   const e = k(), [r, n] = a.useState({
@@ -25,7 +25,7 @@ const x = ({
   }), [o, l] = a.useState({}), [i, u] = a.useState({}), p = {
     handleOpen: a.useCallback(
       ({ snackbarMessageOptions: d, snackbarProps: g = {}, alertProps: m = {} }) => {
-        const { message: b } = d;
+        const { message: b } = d || { message: "" };
         n({ message: b }), l(g), u(m), e.handleOpen();
       },
       [e]