@solostylist/ui-kit 1.0.167 → 1.0.169

package/dist/s-gallery/index.js

@@ -1,5 +1,35 @@
-import { MediaItem as a, default as d } from "./s-gallery.js";
+import { MediaItem as r, SGallery as o } from "./s-gallery.js";
+try {
+  sgallery.displayName = "sgallery", sgallery.__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 {
+  MediaItem.displayName = "MediaItem", MediaItem.__docgenInfo = { description: `MediaItem - Renders individual media items (images or videos) with optimized loading and playback.
+
+For videos:
+- Intersection Observer for viewport-based autoplay/pause
+- Buffering state management with loading indicator
+- Muted autoplay with loop for engagement
+- Preloading for smooth playback
+
+For images:
+- Lazy loading via SLazyImage component
+- Optimized object-fit handling`, displayName: "MediaItem", props: {} };
+} catch {
+}
+try {
+  SGalleryProps.displayName = "SGalleryProps", SGalleryProps.__docgenInfo = { description: "Props for the SGallery component.", displayName: "SGalleryProps", props: {} };
+} catch {
+}
+try {
+  MediaItemProps.displayName = "MediaItemProps", MediaItemProps.__docgenInfo = { description: "Props for individual MediaItem components", displayName: "MediaItemProps", props: {} };
+} catch {
+}
+try {
+  GalleryLayoutVariant.displayName = "GalleryLayoutVariant", GalleryLayoutVariant.__docgenInfo = { description: "Built-in layout variants for the gallery", displayName: "GalleryLayoutVariant", props: {} };
+} catch {
+}
 export {
-  a as MediaItem,
-  d as default
+  r as MediaItem,
+  o as default
 };

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

@@ -34,7 +34,7 @@ export declare const MediaItem: React.FC<MediaItemProps>;
  */
 export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'highlight' | 'custom';
 /**
- * Props interface for the main SGallery component
+ * Props for the SGallery component.
  */
 export interface SGalleryProps {
     /** Array of media items to display in the gallery */
@@ -47,40 +47,7 @@ export interface SGalleryProps {
     skeletonCount?: number;
 }
 /**
- * SGallery - A sophisticated media gallery with drag-and-drop, modal viewing, and animations.
- *
- * This component provides a complete gallery solution with:
- *
- * Grid Layout Features:
- * - Responsive grid with customizable spans per item
- * - Built-in layout variants (masonry, grid, spotlight, featured, custom)
- * - Drag-and-drop reordering of items
- * - Hover overlays with title/description
- * - Staggered entrance animations
- * - Smooth layout transitions
- *
- * Modal Features:
- * - Full-screen lightbox experience
- * - Keyboard navigation (arrows, escape)
- * - Thumbnail dock at bottom
- * - Previous/next navigation
- * - Item counter and captions
- * - Backdrop blur effects
- *
- * Video Features:
- * - Viewport-based autoplay/pause
- * - Buffering state management
- * - Optimized performance
- *
- * Image Features:
- * - Lazy loading
- * - Responsive sizing
- * - Object-fit optimization
- *
- * Built with Framer Motion for smooth animations and Material-UI for theming.
- *
- * @param props - SGalleryProps with media items array and optional layout variant
- * @returns JSX.Element - Complete interactive gallery system
+ * A sophisticated media gallery with drag-and-drop reordering, modal viewing, and multiple layout variants.
  */
-declare const SGallery: React.FC<SGalleryProps>;
+export declare const SGallery: React.FC<SGalleryProps>;
 export default SGallery;

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

@@ -1,51 +1,52 @@
 import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-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: o, sx: s, onClick: i }) => {
-  const e = D(null), [n, l] = y(!1), [u, f] = y(!0);
-  return v(() => {
-    const c = {
+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 "../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 = {
       root: null,
       rootMargin: "50px",
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, 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 = new IntersectionObserver((c) => {
+      c.forEach((r) => l(r.isIntersecting));
+    }, d);
+    return e.current && y.observe(e.current), () => {
+      e.current && y.unobserve(e.current);
     };
-  }, []), v(() => {
-    let c = !0;
+  }, []), b(() => {
+    let d = !0;
     return n ? (async () => {
-      if (!(!e.current || !n || !c))
+      if (!(!e.current || !n || !d))
         try {
-          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.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 && e.current.pause(), () => {
-      c = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+      d = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [n]), o.type === "video" ? /* @__PURE__ */ t.jsxs(
-    a,
+  }, [n]), a.type === "video" ? /* @__PURE__ */ t.jsxs(
+    s,
     {
       sx: {
         position: "relative",
         overflow: "hidden",
         width: "100%",
         height: "100%",
-        ...s
+        ...o
       },
       children: [
         /* @__PURE__ */ t.jsx(
-          a,
+          s,
           {
             component: "video",
             ref: e,
@@ -64,11 +65,11 @@ const A = ({ item: o, sx: s, onClick: i }) => {
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ t.jsx("source", { src: o.url, type: "video/mp4" })
+            children: /* @__PURE__ */ t.jsx("source", { src: a.url, type: "video/mp4" })
           }
         ),
         u && /* @__PURE__ */ t.jsx(
-          a,
+          s,
           {
             sx: {
               position: "absolute",
@@ -79,7 +80,7 @@ const A = ({ item: o, sx: s, onClick: i }) => {
               bgcolor: "action.disabled"
             },
             children: /* @__PURE__ */ t.jsx(
-              a,
+              s,
               {
                 sx: {
                   width: 24,
@@ -99,15 +100,15 @@ const A = ({ item: o, sx: s, onClick: i }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ t.jsx(a, { onClick: i, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ t.jsx(
-    P,
+  ) : /* @__PURE__ */ t.jsx(s, { onClick: i, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ t.jsx(
+    A,
     {
-      src: o.url,
-      alt: o.title || "",
+      src: a.url,
+      alt: a.title || "",
       width: "100%",
       height: "100%",
       style: {
-        objectFit: s != null && s.objectFit ? s.objectFit : "cover",
+        objectFit: o != null && o.objectFit ? o.objectFit : "cover",
         cursor: i ? "pointer" : "default",
         display: "block",
         width: "100%",
@@ -115,39 +116,44 @@ const A = ({ item: o, sx: s, onClick: i }) => {
       }
     }
   ) });
-}, k = (o, s) => {
+}, C = (a, o) => {
   let i = 1, e = 2;
-  switch (s) {
+  switch (o) {
     case "grid":
       i = 1, e = 2;
       break;
     case "masonry":
-      i = 1, e = o % 3 === 0 ? 3 : o % 2 === 0 ? 2 : 4;
+      i = 1, e = a % 3 === 0 ? 3 : a % 2 === 0 ? 2 : 4;
       break;
     case "spotlight":
-      o === 0 ? (i = 2, e = 4) : (i = 1, e = 2);
+      a === 0 ? (i = 2, e = 4) : (i = 1, e = 2);
       break;
     case "featured":
-      o === 0 ? (i = 2, e = 6) : (i = 1, e = 2);
+      a === 0 ? (i = 2, e = 6) : (i = 1, e = 2);
       break;
     case "highlight":
-      o === 0 ? (i = 3, e = 6) : (i = 1, e = 2);
+      a === 0 ? (i = 3, e = 6) : (i = 1, e = 2);
       break;
     case "custom":
       i = 1, e = 2;
       break;
   }
   return { colSpan: i, rowSpan: e };
-}, S = (o, s) => s === "custom" ? o : o.map((i, e) => {
-  const { colSpan: n, rowSpan: l } = k(e, s);
+}, S = (a, o) => o === "custom" ? a : a.map((i, e) => {
+  const { colSpan: n, rowSpan: l } = C(e, o);
   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: [
+}), x = ({
+  mediaItems: a,
+  variant: o = "masonry",
+  loading: i = !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(
-      V,
+      q,
       {
         selectedItem: n,
         isOpen: !!n,
@@ -156,8 +162,8 @@ const A = ({ item: o, sx: s, onClick: i }) => {
         mediaItems: u
       }
     ),
-    /* @__PURE__ */ t.jsx(M, { mode: "wait", children: !n && /* @__PURE__ */ t.jsx(
-      I.div,
+    /* @__PURE__ */ t.jsx($, { mode: "wait", children: !n && /* @__PURE__ */ t.jsx(
+      k.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -171,7 +177,7 @@ const A = ({ item: o, sx: s, onClick: i }) => {
           }
         },
         children: /* @__PURE__ */ t.jsx(
-          a,
+          s,
           {
             sx: {
               display: "grid",
@@ -186,19 +192,19 @@ const A = ({ item: o, sx: s, onClick: i }) => {
               // Ensure proper stacking context
             },
             children: i ? Array.from({ length: e }).map((r, p) => {
-              const { colSpan: h, rowSpan: b } = k(p, s);
+              const { colSpan: m, rowSpan: f } = C(p, o);
               return /* @__PURE__ */ t.jsx(
-                w,
+                j,
                 {
                   sx: {
                     position: "relative",
                     overflow: "hidden",
                     borderRadius: 2,
-                    gridRow: `span ${b}`,
-                    gridColumn: `span ${h}`
+                    gridRow: `span ${f}`,
+                    gridColumn: `span ${m}`
                   },
                   children: /* @__PURE__ */ t.jsx(
-                    E,
+                    R,
                     {
                       variant: "rectangular",
                       animation: "wave",
@@ -213,10 +219,10 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                 p
               );
             }) : u.map((r, p) => /* @__PURE__ */ t.jsx(
-              I.div,
+              k.div,
               {
-                layoutId: `media-${r.id}-${d}`,
-                onClick: () => !c && l(r),
+                layoutId: `media-${r.id}-${c}`,
+                onClick: () => !d && l(r),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -235,13 +241,13 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => g(!0),
-                onDragEnd: (h, b) => {
-                  g(!1);
-                  const x = b.offset.x + b.offset.y;
-                  if (Math.abs(x) > 50) {
-                    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);
+                onDragStart: () => y(!0),
+                onDragEnd: (m, f) => {
+                  y(!1);
+                  const I = f.offset.x + f.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);
                   }
                 },
                 style: {
@@ -250,7 +256,7 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                   gridColumn: r.colSpan ? `span ${r.colSpan}` : "span 1"
                 },
                 children: /* @__PURE__ */ t.jsxs(
-                  w,
+                  j,
                   {
                     sx: {
                       position: "relative",
@@ -266,15 +272,15 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                     },
                     children: [
                       /* @__PURE__ */ t.jsx(
-                        A,
+                        w,
                         {
                           item: r,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !c && l(r)
+                          onClick: () => !d && l(r)
                         }
                       ),
                       (r.title || r.desc) && /* @__PURE__ */ t.jsxs(
-                        a,
+                        s,
                         {
                           className: "hover-overlay",
                           sx: {
@@ -291,17 +297,17 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                           },
                           children: [
                             /* @__PURE__ */ t.jsx(
-                              a,
+                              s,
                               {
                                 sx: {
                                   position: "absolute",
                                   inset: 0,
-                                  background: (h) => `linear-gradient(to top, ${(h.vars || h).palette.grey[900]}CC, ${(h.vars || h).palette.grey[900]}66, transparent)`
+                                  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(
-                              j,
+                              _,
                               {
                                 variant: "subtitle2",
                                 sx: {
@@ -316,7 +322,7 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                               }
                             ),
                             r.desc && /* @__PURE__ */ t.jsx(
-                              j,
+                              _,
                               {
                                 variant: "caption",
                                 sx: {
@@ -338,7 +344,7 @@ const A = ({ item: o, sx: s, onClick: i }) => {
                   }
                 )
               },
-              `${r.id}-${d}`
+              `${r.id}-${c}`
             ))
           }
         )
@@ -346,7 +352,31 @@ const A = ({ item: o, sx: s, onClick: i }) => {
     ) })
   ] });
 };
+x.displayName = "SGallery";
+try {
+  w.displayName = "MediaItem", w.__docgenInfo = { description: `MediaItem - Renders individual media items (images or videos) with optimized loading and playback.
+
+For videos:
+- Intersection Observer for viewport-based autoplay/pause
+- Buffering state management with loading indicator
+- Muted autoplay with loop for engagement
+- Preloading for smooth playback
+
+For images:
+- Lazy loading via SLazyImage component
+- Optimized object-fit handling`, displayName: "MediaItem", props: {} };
+} 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" } } } };
+} catch {
+}
+try {
+  sgallery.displayName = "sgallery", sgallery.__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 {
+}
 export {
-  A as MediaItem,
-  W as default
+  w as MediaItem,
+  x as SGallery,
+  x as default
 };

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

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
 import { ButtonProps } from '@mui/material';
 /**
- * Props interface for SGlowButton component - extends Material-UI ButtonProps
- * with visual effect customization options
+ * Props interface for SGlowButton component
  */
 export interface SGlowButtonProps extends ButtonProps {
     /** Border radius for the button (defaults to 12px) */
@@ -13,45 +12,10 @@ export interface SGlowButtonProps extends ButtonProps {
     duration?: number;
 }
 /**
- * SGlowButton - A visually striking button with animated glowing border effects.
- * Combines Material-UI Button with SMovingBorder for premium visual appeal.
- * Fully integrated with MUI theme system for consistent styling across light/dark modes.
- *
- * Key features:
- * - Animated moving border with customizable duration
- * - Theme-aware gradient text effect using palette.gradient.primary
- * - Fixed height (60px) for consistency
- * - Customizable border radius
- * - Full Material-UI Button API compatibility
- * - Disabled ripple effect for cleaner animation
- * - MUI theme integration with palette colors
- * - Glassmorphism effect with backdrop blur
- * - Theme-aware hover states and shadows
- * - Accessibility-compliant focus styles
- *
- * Visual effects:
- * - Moving gradient border animation with theme-aware colors
- * - Gradient text coloring from theme palette
- * - Glow effects around the border
- * - Smooth hover transitions with lift effect
- * - Glassmorphism background with backdrop blur
- * - Theme-responsive shadows and borders
- *
- * Theme integration:
- * - Uses theme.palette.gradient.primary for text gradient
- * - Uses theme.palette.primary.dark/light for glow colors
- * - Uses theme.palette.background.paper for button background
- * - Uses theme.palette.baseShadow for elevation
- * - Automatically adapts to light/dark mode changes
- *
- * Best used for:
- * - Primary call-to-action buttons
- * - Premium feature highlights
- * - Landing page hero buttons
- * - Special action triggers
- *
- * @param props - SGlowButtonProps with animation config and Material-UI Button props
- * @returns JSX.Element - Button with animated glow effects
+ * A visually striking button with animated glowing border effects and gradient text.
  */
-declare const SGlowButton: ({ borderRadius, children, duration, ...props }: SGlowButtonProps) => React.JSX.Element;
+declare const SGlowButton: {
+    ({ borderRadius, children, duration, ...props }: SGlowButtonProps): React.JSX.Element;
+    displayName: string;
+};
 export default SGlowButton;