@solostylist/ui-kit 1.0.170 → 1.0.172

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

@@ -1,41 +1,41 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as L, useState as h, useEffect as b, useId as N } from "react";
-import { Box as s, Paper as j, Skeleton as R, Typography as _ } from "@mui/material";
-import { AnimatePresence as $, motion as k } from "framer-motion";
-import { SImageModal as q } from "../s-image-modal/s-image-modal.js";
+import { j as a } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as L, useState as g, useEffect as v, useId as N } from "react";
+import { Box as u, Paper as j, Skeleton as R, Typography as _ } from "@mui/material";
+import { AnimatePresence as q, motion as k } from "framer-motion";
+import { SImageModal as A } from "../s-image-modal/s-image-modal.js";
 import "../s-lazy-image/index.js";
-import A from "../s-lazy-image/s-lazy-image.js";
-const w = ({ item: a, sx: o, onClick: i }) => {
-  const e = L(null), [n, l] = h(!1), [u, g] = h(!0);
-  return b(() => {
-    const d = {
+import $ from "../s-lazy-image/s-lazy-image.js";
+const b = ({ item: t, sx: o, onClick: r }) => {
+  const e = L(null), [n, s] = g(!1), [p, m] = g(!0);
+  return v(() => {
+    const l = {
       root: null,
       rootMargin: "50px",
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, y = new IntersectionObserver((c) => {
-      c.forEach((r) => l(r.isIntersecting));
-    }, d);
-    return e.current && y.observe(e.current), () => {
-      e.current && y.unobserve(e.current);
+    }, h = new IntersectionObserver((d) => {
+      d.forEach((i) => s(i.isIntersecting));
+    }, l);
+    return e.current && h.observe(e.current), () => {
+      e.current && h.unobserve(e.current);
     };
-  }, []), b(() => {
-    let d = !0;
+  }, []), v(() => {
+    let l = !0;
     return n ? (async () => {
-      if (!(!e.current || !n || !d))
+      if (!(!e.current || !n || !l))
         try {
-          e.current.readyState >= 3 ? (g(!1), await e.current.play()) : (g(!0), await new Promise((c) => {
-            e.current && (e.current.oncanplay = () => c());
-          }), d && (g(!1), await e.current.play()));
-        } catch (c) {
-          console.warn("Video playback failed:", c);
+          e.current.readyState >= 3 ? (m(!1), await e.current.play()) : (m(!0), await new Promise((d) => {
+            e.current && (e.current.oncanplay = () => d());
+          }), l && (m(!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());
+      l = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [n]), a.type === "video" ? /* @__PURE__ */ t.jsxs(
-    s,
+  }, [n]), t.type === "video" ? /* @__PURE__ */ a.jsxs(
+    u,
     {
       sx: {
         position: "relative",
@@ -45,12 +45,12 @@ const w = ({ item: a, sx: o, onClick: i }) => {
         ...o
       },
       children: [
-        /* @__PURE__ */ t.jsx(
-          s,
+        /* @__PURE__ */ a.jsx(
+          u,
           {
             component: "video",
             ref: e,
-            onClick: i,
+            onClick: r,
             playsInline: !0,
             muted: !0,
             loop: !0,
@@ -59,17 +59,17 @@ const w = ({ item: a, sx: o, onClick: i }) => {
               width: "100%",
               height: "100%",
               objectFit: "cover",
-              opacity: u ? 0.8 : 1,
+              opacity: p ? 0.8 : 1,
               transition: "opacity 0.2s",
               transform: "translateZ(0)",
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ t.jsx("source", { src: a.url, type: "video/mp4" })
+            children: /* @__PURE__ */ a.jsx("source", { src: t.url, type: "video/mp4" })
           }
         ),
-        u && /* @__PURE__ */ t.jsx(
-          s,
+        p && /* @__PURE__ */ a.jsx(
+          u,
           {
             sx: {
               position: "absolute",
@@ -79,8 +79,8 @@ const w = ({ item: a, sx: o, onClick: i }) => {
               justifyContent: "center",
               bgcolor: "action.disabled"
             },
-            children: /* @__PURE__ */ t.jsx(
-              s,
+            children: /* @__PURE__ */ a.jsx(
+              u,
               {
                 sx: {
                   width: 24,
@@ -100,69 +100,69 @@ const w = ({ item: a, sx: o, onClick: i }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ t.jsx(s, { onClick: i, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ t.jsx(
-    A,
+  ) : /* @__PURE__ */ a.jsx(u, { onClick: r, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ a.jsx(
+    $,
     {
-      src: a.url,
-      alt: a.title || "",
+      src: t.url,
+      alt: t.title || "",
       width: "100%",
       height: "100%",
       style: {
         objectFit: o != null && o.objectFit ? o.objectFit : "cover",
-        cursor: i ? "pointer" : "default",
+        cursor: r ? "pointer" : "default",
         display: "block",
         width: "100%",
         height: "100%"
       }
     }
   ) });
-}, C = (a, o) => {
-  let i = 1, e = 2;
+}, C = (t, o) => {
+  let r = 1, e = 2;
   switch (o) {
     case "grid":
-      i = 1, e = 2;
+      r = 1, e = 2;
       break;
     case "masonry":
-      i = 1, e = a % 3 === 0 ? 3 : a % 2 === 0 ? 2 : 4;
+      r = 1, e = t % 3 === 0 ? 3 : t % 2 === 0 ? 2 : 4;
       break;
     case "spotlight":
-      a === 0 ? (i = 2, e = 4) : (i = 1, e = 2);
+      t === 0 ? (r = 2, e = 4) : (r = 1, e = 2);
       break;
     case "featured":
-      a === 0 ? (i = 2, e = 6) : (i = 1, e = 2);
+      t === 0 ? (r = 2, e = 6) : (r = 1, e = 2);
       break;
     case "highlight":
-      a === 0 ? (i = 3, e = 6) : (i = 1, e = 2);
+      t === 0 ? (r = 3, e = 6) : (r = 1, e = 2);
       break;
     case "custom":
-      i = 1, e = 2;
+      r = 1, e = 2;
       break;
   }
-  return { colSpan: i, rowSpan: e };
-}, S = (a, o) => o === "custom" ? a : a.map((i, e) => {
-  const { colSpan: n, rowSpan: l } = C(e, o);
-  return { ...i, colSpan: n, rowSpan: l };
-}), x = ({
-  mediaItems: a,
+  return { colSpan: r, rowSpan: e };
+}, S = (t, o) => o === "custom" ? t : t.map((r, e) => {
+  const { colSpan: n, rowSpan: s } = C(e, o);
+  return { ...r, colSpan: n, rowSpan: s };
+}), w = ({
+  mediaItems: t,
   variant: o = "masonry",
-  loading: i = !1,
+  loading: r = !1,
   skeletonCount: e = 6
 }) => {
-  const [n, l] = h(null), [u, g] = h(() => S(a, o)), [d, y] = h(!1), c = N();
-  return b(() => {
-    g(S(a, o));
-  }, [a, o]), /* @__PURE__ */ t.jsxs(s, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
-    /* @__PURE__ */ t.jsx(
-      q,
+  const [n, s] = g(null), [p, m] = g(() => S(t, o)), [l, h] = g(!1), d = N();
+  return v(() => {
+    m(S(t, o));
+  }, [t, o]), /* @__PURE__ */ a.jsxs(u, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+    /* @__PURE__ */ a.jsx(
+      A,
       {
         selectedItem: n,
         isOpen: !!n,
-        onClose: () => l(null),
-        onItemChange: l,
-        mediaItems: u
+        onClose: () => s(null),
+        onItemChange: s,
+        mediaItems: p
       }
     ),
-    /* @__PURE__ */ t.jsx($, { mode: "wait", children: !n && /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ a.jsx(q, { mode: "wait", children: !n && /* @__PURE__ */ a.jsx(
       k.div,
       {
         initial: "hidden",
@@ -176,8 +176,8 @@ const w = ({ item: a, sx: o, onClick: i }) => {
             // Stagger child animations
           }
         },
-        children: /* @__PURE__ */ t.jsx(
-          s,
+        children: /* @__PURE__ */ a.jsx(
+          u,
           {
             sx: {
               display: "grid",
@@ -191,19 +191,19 @@ const w = ({ item: a, sx: o, onClick: i }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: i ? Array.from({ length: e }).map((r, p) => {
-              const { colSpan: m, rowSpan: f } = C(p, o);
-              return /* @__PURE__ */ t.jsx(
+            children: r ? Array.from({ length: e }).map((i, c) => {
+              const { colSpan: x, rowSpan: y } = C(c, o);
+              return /* @__PURE__ */ a.jsx(
                 j,
                 {
                   sx: {
                     position: "relative",
                     overflow: "hidden",
                     borderRadius: 2,
-                    gridRow: `span ${f}`,
-                    gridColumn: `span ${m}`
+                    gridRow: `span ${y}`,
+                    gridColumn: `span ${x}`
                   },
-                  children: /* @__PURE__ */ t.jsx(
+                  children: /* @__PURE__ */ a.jsx(
                     R,
                     {
                       variant: "rectangular",
@@ -216,13 +216,13 @@ const w = ({ item: a, sx: o, onClick: i }) => {
                     }
                   )
                 },
-                p
+                c
               );
-            }) : u.map((r, p) => /* @__PURE__ */ t.jsx(
+            }) : p.map((i, c) => /* @__PURE__ */ a.jsx(
               k.div,
               {
-                layoutId: `media-${r.id}-${c}`,
-                onClick: () => !d && l(r),
+                layoutId: `media-${i.id}-${d}`,
+                onClick: () => !l && s(i),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -233,7 +233,7 @@ const w = ({ item: a, sx: o, onClick: i }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: p * 0.05
+                      delay: c * 0.05
                     }
                   }
                 },
@@ -241,21 +241,21 @@ const w = ({ item: a, sx: o, onClick: i }) => {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => y(!0),
-                onDragEnd: (m, f) => {
-                  y(!1);
-                  const I = f.offset.x + f.offset.y;
+                onDragStart: () => h(!0),
+                onDragEnd: (x, y) => {
+                  h(!1);
+                  const I = y.offset.x + y.offset.y;
                   if (Math.abs(I) > 50) {
-                    const v = [...u], V = v[p], M = I > 0 ? Math.min(p + 1, u.length - 1) : Math.max(p - 1, 0);
-                    v.splice(p, 1), v.splice(M, 0, V), g(v);
+                    const f = [...p], V = f[c], M = I > 0 ? Math.min(c + 1, p.length - 1) : Math.max(c - 1, 0);
+                    f.splice(c, 1), f.splice(M, 0, V), m(f);
                   }
                 },
                 style: {
                   position: "relative",
-                  gridRow: r.rowSpan ? `span ${r.rowSpan}` : "span 2",
-                  gridColumn: r.colSpan ? `span ${r.colSpan}` : "span 1"
+                  gridRow: i.rowSpan ? `span ${i.rowSpan}` : "span 2",
+                  gridColumn: i.colSpan ? `span ${i.colSpan}` : "span 1"
                 },
-                children: /* @__PURE__ */ t.jsxs(
+                children: /* @__PURE__ */ a.jsxs(
                   j,
                   {
                     sx: {
@@ -271,16 +271,16 @@ const w = ({ item: a, sx: o, onClick: i }) => {
                       }
                     },
                     children: [
-                      /* @__PURE__ */ t.jsx(
-                        w,
+                      /* @__PURE__ */ a.jsx(
+                        b,
                         {
-                          item: r,
+                          item: i,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !d && l(r)
+                          onClick: () => !l && s(i)
                         }
                       ),
-                      (r.title || r.desc) && /* @__PURE__ */ t.jsxs(
-                        s,
+                      (i.title || i.desc) && /* @__PURE__ */ a.jsxs(
+                        u,
                         {
                           className: "hover-overlay",
                           sx: {
@@ -293,48 +293,35 @@ const w = ({ item: a, sx: o, onClick: i }) => {
                             pointerEvents: "none",
                             // Prevent blocking clicks
                             opacity: 0,
-                            transition: "opacity 0.2s ease-in-out"
+                            transition: "opacity 0.2s ease-in-out",
+                            backdropFilter: "blur(8px)"
                           },
                           children: [
-                            /* @__PURE__ */ t.jsx(
-                              s,
-                              {
-                                sx: {
-                                  position: "absolute",
-                                  inset: 0,
-                                  background: (m) => `linear-gradient(to top, ${(m.vars || m).palette.grey[900]}CC, ${(m.vars || m).palette.grey[900]}66, transparent)`
-                                }
-                              }
-                            ),
-                            r.title && /* @__PURE__ */ t.jsx(
+                            i.title && /* @__PURE__ */ a.jsx(
                               _,
                               {
                                 variant: "subtitle2",
                                 sx: {
                                   position: "relative",
-                                  color: "primary.contrastText",
-                                  fontWeight: 600,
                                   whiteSpace: "nowrap",
                                   overflow: "hidden",
                                   textOverflow: "ellipsis"
                                 },
-                                children: r.title
+                                children: i.title
                               }
                             ),
-                            r.desc && /* @__PURE__ */ t.jsx(
+                            i.desc && /* @__PURE__ */ a.jsx(
                               _,
                               {
                                 variant: "caption",
                                 sx: {
                                   position: "relative",
-                                  color: "text.secondary",
-                                  mt: r.title ? 0.5 : 0,
                                   display: "-webkit-box",
                                   WebkitLineClamp: 2,
                                   WebkitBoxOrient: "vertical",
                                   overflow: "hidden"
                                 },
-                                children: r.desc
+                                children: i.desc
                               }
                             )
                           ]
@@ -344,7 +331,7 @@ const w = ({ item: a, sx: o, onClick: i }) => {
                   }
                 )
               },
-              `${r.id}-${c}`
+              `${i.id}-${d}`
             ))
           }
         )
@@ -352,9 +339,9 @@ const w = ({ item: a, sx: o, onClick: i }) => {
     ) })
   ] });
 };
-x.displayName = "SGallery";
+w.displayName = "SGallery";
 try {
-  w.displayName = "MediaItem", w.__docgenInfo = { description: `MediaItem - Renders individual media items (images or videos) with optimized loading and playback.
+  b.displayName = "MediaItem", b.__docgenInfo = { description: `MediaItem - Renders individual media items (images or videos) with optimized loading and playback.
 
 For videos:
 - Intersection Observer for viewport-based autoplay/pause
@@ -368,7 +355,7 @@ For images:
 } catch {
 }
 try {
-  x.displayName = "SGallery", x.__docgenInfo = { description: "A sophisticated media gallery with drag-and-drop reordering, modal viewing, and multiple layout variants.", displayName: "SGallery", props: { mediaItems: { defaultValue: null, description: "Array of media items to display in the gallery", name: "mediaItems", required: !0, type: { name: "MediaItemType[]" } }, variant: { defaultValue: { value: "masonry" }, description: "Layout variant to use (default: 'masonry')", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"masonry"' }, { value: '"spotlight"' }, { value: '"featured"' }, { value: '"highlight"' }, { value: '"custom"' }] } }, loading: { defaultValue: { value: "false" }, description: "Loading state - shows skeleton placeholders matching the variant layout", name: "loading", required: !1, type: { name: "boolean" } }, skeletonCount: { defaultValue: { value: "6" }, description: "Number of skeleton items to show when loading (default: 6)", name: "skeletonCount", required: !1, type: { name: "number" } } } };
+  w.displayName = "SGallery", w.__docgenInfo = { description: "A sophisticated media gallery with drag-and-drop reordering, modal viewing, and multiple layout variants.", displayName: "SGallery", props: { mediaItems: { defaultValue: null, description: "Array of media items to display in the gallery", name: "mediaItems", required: !0, type: { name: "MediaItemType[]" } }, variant: { defaultValue: { value: "masonry" }, description: "Layout variant to use (default: 'masonry')", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"masonry"' }, { value: '"spotlight"' }, { value: '"featured"' }, { value: '"highlight"' }, { value: '"custom"' }] } }, loading: { defaultValue: { value: "false" }, description: "Loading state - shows skeleton placeholders matching the variant layout", name: "loading", required: !1, type: { name: "boolean" } }, skeletonCount: { defaultValue: { value: "6" }, description: "Number of skeleton items to show when loading (default: 6)", name: "skeletonCount", required: !1, type: { name: "number" } } } };
 } catch {
 }
 try {
@@ -376,7 +363,7 @@ try {
 } catch {
 }
 export {
-  w as MediaItem,
-  x as SGallery,
-  x as default
+  b as MediaItem,
+  w as SGallery,
+  w as default
 };

package/dist/s-glow-button/s-glow-button.d.ts

@@ -10,12 +10,18 @@ export interface SGlowButtonProps extends ButtonProps {
     children: React.ReactNode;
     /** Duration of the moving border animation in milliseconds (defaults to 6000ms) */
     duration?: number;
+    /** Button width (defaults to 'fit-content') */
+    width?: string;
+    /** Size of the glow effect in pixels (defaults to 60) */
+    glowSize?: number;
+    /** Color of the glow effect (defaults to blue[500]) */
+    glowColor?: string;
 }
 /**
  * A visually striking button with animated glowing border effects and gradient text.
  */
 declare const SGlowButton: {
-    ({ borderRadius, children, duration, ...props }: SGlowButtonProps): React.JSX.Element;
+    ({ borderRadius, children, duration, width, glowSize, glowColor, ...props }: SGlowButtonProps): React.JSX.Element;
     displayName: string;
 };
 export default SGlowButton;