@solostylist/ui-kit 1.0.138 → 1.0.140

package/dist/main.d.ts

@@ -98,8 +98,8 @@ export { default as SSpotlightCursor } from './s-spotlight-cursor/index';
 export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor/index';
 export { default as SCopyableText } from './s-copyable-text/index';
 export type { SCopyableTextProps } from './s-copyable-text/index';
-export { default as SInteractiveGallery, MediaItem } from './s-interactive-gallery/index';
-export type { SInteractiveGalleryProps, MediaItemProps } from './s-interactive-gallery/index';
+export { default as SGallery, MediaItem } from './s-gallery/index';
+export type { SGalleryProps, MediaItemProps, GalleryLayoutVariant } from './s-gallery/index';
 export { default as SImageModal } from './s-image-modal/index';
 export type { MediaItemType } from './s-image-modal/index';
 export type { SImageModalProps } from './s-image-modal/index';

package/dist/main.js

@@ -11,7 +11,7 @@ import { default as b } from "./s-comment-message/s-comment-message.js";
 import { default as M } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
 import { default as y } from "./s-checkbox/s-checkbox.js";
-import { default as L } from "./s-chip/s-chip.js";
+import { default as I } from "./s-chip/s-chip.js";
 import { default as F } from "./s-chips/s-chips.js";
 import { default as B } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as z, default as E, useDialogConfirm as R } from "./s-dialog-confirm/s-dialog-confirm.js";
@@ -35,7 +35,7 @@ import { default as Te } from "./s-skeleton/s-skeleton.js";
 import { default as ve } from "./s-tip/s-tip.js";
 import { default as be } from "./s-text-truncation/s-text-truncation.js";
 import { default as Me, SnackbarMessageProvider as he, useSnackbarMessage as ye } from "./s-snackbar-message/s-snackbar-message.js";
-import { default as Le } from "./s-form/s-form.js";
+import { default as Ie } from "./s-form/s-form.js";
 import { SSmartTextField as Fe } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as Be } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
 import { SStripeCVC as ze, SStripeExpiry as Ee, SStripeNumber as Re, StripeTextField as Ge } from "./s-stripe/s-stripe.js";
@@ -50,7 +50,7 @@ import { default as $e } from "./s-moving-border/s-moving-border.js";
 import { default as oo } from "./s-scroll-reveal/s-scroll-reveal.js";
 import { default as ao } from "./s-spotlight-cursor/s-spotlight-cursor.js";
 import { default as fo } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as mo, default as so } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { MediaItem as mo, default as so } from "./s-gallery/s-gallery.js";
 import { default as So } from "./s-image-modal/s-image-modal.js";
 import { default as xo } from "./s-lazy-image/s-lazy-image.js";
 import { default as no } from "./s-image-comparison/s-image-comparison.js";
@@ -59,7 +59,7 @@ import { default as Co } from "./s-category-card/s-category-card.js";
 import { default as Po } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
 import { default as Do } from "./s-rating/s-rating.js";
 import { default as ho } from "./s-review/s-review.js";
-import { default as Io } from "./s-tabs/s-tabs.js";
+import { default as Lo } from "./s-tabs/s-tabs.js";
 import { default as ko } from "./s-tabs/s-tab.js";
 import { default as Ao } from "./s-tabs/s-tab-panel.js";
 import { default as wo } from "./s-text-shimmer/s-text-shimmer.js";
@@ -90,7 +90,7 @@ export {
   T as SChatInput,
   v as SChatMessage,
   y as SCheckbox,
-  L as SChip,
+  I as SChip,
   F as SChips,
   b as SCommentMessage,
   Be as SCopilotKitProvider,
@@ -106,14 +106,14 @@ export {
   Y as SFileDropzone,
   _ as SFileIcon,
   Q as SFlexBox,
-  Le as SForm,
+  Ie as SForm,
+  so as SGallery,
   Ze as SGlowButton,
   Xe as SGradientIcon,
   ee as SI18nProvider,
   re as SIconButton,
   no as SImageComparison,
   So as SImageModal,
-  so as SInteractiveGallery,
   co as SItemNotFound,
   te as SLabel,
   Go as SLanguagePopover,
@@ -139,7 +139,7 @@ export {
   Re as SStripeNumber,
   ko as STab,
   Ao as STabPanel,
-  Io as STabs,
+  Lo as STabs,
   M as STextEditor,
   de as STextField,
   wo as STextShimmer,

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

@@ -0,0 +1,2 @@
+export { default, MediaItem } from './s-gallery';
+export type { SGalleryProps, MediaItemProps, GalleryLayoutVariant } from './s-gallery';

package/dist/s-gallery/index.js

@@ -0,0 +1,5 @@
+import { MediaItem as a, default as d } from "./s-gallery.js";
+export {
+  a as MediaItem,
+  d as default
+};

package/dist/{s-interactive-gallery/s-interactive-gallery.d.ts → s-gallery/s-gallery.d.ts}

@@ -32,24 +32,28 @@ export declare const MediaItem: React.FC<MediaItemProps>;
 /**
  * Built-in layout variants for the gallery
  */
-export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured';
+export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'custom';
 /**
- * Props interface for the main SInteractiveGallery component
+ * Props interface for the main SGallery component
  */
-export interface SInteractiveGalleryProps {
+export interface SGalleryProps {
     /** Array of media items to display in the gallery */
     mediaItems: MediaItemType[];
     /** Layout variant to use (default: 'masonry') */
     variant?: GalleryLayoutVariant;
+    /** Loading state - shows skeleton placeholders matching the variant layout */
+    loading?: boolean;
+    /** Number of skeleton items to show when loading (default: 6) */
+    skeletonCount?: number;
 }
 /**
- * SInteractiveGallery - A sophisticated media gallery with drag-and-drop, modal viewing, and animations.
+ * 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, zigzag, featured)
+ * - Built-in layout variants (masonry, grid, spotlight, featured, custom)
  * - Drag-and-drop reordering of items
  * - Hover overlays with title/description
  * - Staggered entrance animations
@@ -75,8 +79,8 @@ export interface SInteractiveGalleryProps {
  *
  * Built with Framer Motion for smooth animations and Material-UI for theming.
  *
- * @param props - SInteractiveGalleryProps with media items array and optional layout variant
+ * @param props - SGalleryProps with media items array and optional layout variant
  * @returns JSX.Element - Complete interactive gallery system
  */
-declare const SInteractiveGallery: React.FC<SInteractiveGalleryProps>;
-export default SInteractiveGallery;
+declare const SGallery: React.FC<SGalleryProps>;
+export default SGallery;

package/dist/{s-interactive-gallery/s-interactive-gallery.js → s-gallery/s-gallery.js}

@@ -1,40 +1,40 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as f, useId as C, useEffect as y, useRef as S } from "react";
-import { Box as c, Paper as k, Typography as x } from "@mui/material";
-import { AnimatePresence as $, motion as m } from "framer-motion";
-import R from "../s-image-modal/s-image-modal.js";
-import D from "../s-lazy-image/s-lazy-image.js";
-const E = ({ item: a, sx: o, onClick: l }) => {
-  const e = S(null), [i, s] = f(!1), [h, u] = f(!0);
-  return y(() => {
-    const d = {
+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 { 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 e = D(null), [n, l] = y(!1), [u, f] = y(!0);
+  return b(() => {
+    const c = {
       root: null,
       rootMargin: "50px",
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, t = new IntersectionObserver((n) => {
-      n.forEach((p) => s(p.isIntersecting));
-    }, d);
-    return e.current && t.observe(e.current), () => {
-      e.current && t.unobserve(e.current);
+    }, 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(() => {
-    let d = !0;
-    return i ? (async () => {
-      if (!(!e.current || !i || !d))
+  }, []), b(() => {
+    let c = !0;
+    return n ? (async () => {
+      if (!(!e.current || !n || !c))
         try {
-          e.current.readyState >= 3 ? (u(!1), await e.current.play()) : (u(!0), await new Promise((n) => {
-            e.current && (e.current.oncanplay = () => n());
-          }), d && (u(!1), await e.current.play()));
-        } catch (n) {
-          console.warn("Video playback failed:", n);
+          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 && e.current.pause(), () => {
-      d = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+      c = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [i]), a.type === "video" ? /* @__PURE__ */ r.jsxs(
-    c,
+  }, [n]), i.type === "video" ? /* @__PURE__ */ t.jsxs(
+    a,
     {
       sx: {
         position: "relative",
@@ -44,12 +44,12 @@ const E = ({ item: a, sx: o, onClick: l }) => {
         ...o
       },
       children: [
-        /* @__PURE__ */ r.jsx(
-          c,
+        /* @__PURE__ */ t.jsx(
+          a,
           {
             component: "video",
             ref: e,
-            onClick: l,
+            onClick: s,
             playsInline: !0,
             muted: !0,
             loop: !0,
@@ -58,17 +58,17 @@ const E = ({ item: a, sx: o, onClick: l }) => {
               width: "100%",
               height: "100%",
               objectFit: "cover",
-              opacity: h ? 0.8 : 1,
+              opacity: u ? 0.8 : 1,
               transition: "opacity 0.2s",
               transform: "translateZ(0)",
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ r.jsx("source", { src: a.url, type: "video/mp4" })
+            children: /* @__PURE__ */ t.jsx("source", { src: i.url, type: "video/mp4" })
           }
         ),
-        h && /* @__PURE__ */ r.jsx(
-          c,
+        u && /* @__PURE__ */ t.jsx(
+          a,
           {
             sx: {
               position: "absolute",
@@ -78,8 +78,8 @@ const E = ({ item: a, sx: o, onClick: l }) => {
               justifyContent: "center",
               bgcolor: "action.disabled"
             },
-            children: /* @__PURE__ */ r.jsx(
-              c,
+            children: /* @__PURE__ */ t.jsx(
+              a,
               {
                 sx: {
                   width: 24,
@@ -99,56 +99,62 @@ const E = ({ item: a, sx: o, onClick: l }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ r.jsx(c, { onClick: l, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ r.jsx(
-    D,
+  ) : /* @__PURE__ */ t.jsx(a, { onClick: s, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ t.jsx(
+    P,
     {
-      src: a.url,
-      alt: a.title || "",
+      src: i.url,
+      alt: i.title || "",
       width: "100%",
       height: "100%",
       style: {
         objectFit: o != null && o.objectFit ? o.objectFit : "cover",
-        cursor: l ? "pointer" : "default",
+        cursor: s ? "pointer" : "default",
         display: "block",
         width: "100%",
         height: "100%"
       }
     }
   ) });
-}, w = (a, o) => a.map((l, e) => {
-  let i = 1, s = 2;
+}, C = (i, o) => {
+  let s = 1, e = 2;
   switch (o) {
     case "grid":
-      i = 1, s = 2;
+      s = 1, e = 2;
       break;
     case "masonry":
-      i = 1, s = e % 3 === 0 ? 3 : e % 2 === 0 ? 2 : 4;
+      s = 1, e = i % 3 === 0 ? 3 : i % 2 === 0 ? 2 : 4;
       break;
     case "spotlight":
-      e === 0 ? (i = 2, s = 4) : (i = 1, s = 2);
+      i === 0 ? (s = 2, e = 4) : (s = 1, e = 2);
       break;
     case "featured":
-      e === 0 ? (i = 2, s = 6) : (i = 1, s = 2);
+      i === 0 ? (s = 2, e = 6) : (s = 1, e = 2);
+      break;
+    case "custom":
+      s = 1, e = 2;
       break;
   }
-  return { ...l, colSpan: i, rowSpan: s };
-}), T = ({ mediaItems: a, variant: o = "masonry" }) => {
-  const [l, e] = f(null), [i, s] = f(() => w(a, o)), [h, u] = f(!1), d = C();
-  return y(() => {
-    s(w(a, o));
-  }, [a, o]), /* @__PURE__ */ r.jsxs(c, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
-    /* @__PURE__ */ r.jsx(
-      R,
+  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: [
+    /* @__PURE__ */ t.jsx(
+      V,
       {
-        selectedItem: l,
-        isOpen: !!l,
-        onClose: () => e(null),
-        onItemChange: e,
-        mediaItems: i
+        selectedItem: n,
+        isOpen: !!n,
+        onClose: () => l(null),
+        onItemChange: l,
+        mediaItems: u
       }
     ),
-    /* @__PURE__ */ r.jsx($, { mode: "wait", children: !l && /* @__PURE__ */ r.jsx(
-      m.div,
+    /* @__PURE__ */ t.jsx(M, { mode: "wait", children: !n && /* @__PURE__ */ t.jsx(
+      I.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -161,8 +167,8 @@ const E = ({ item: a, sx: o, onClick: l }) => {
             // Stagger child animations
           }
         },
-        children: /* @__PURE__ */ r.jsx(
-          c,
+        children: /* @__PURE__ */ t.jsx(
+          a,
           {
             sx: {
               display: "grid",
@@ -176,11 +182,38 @@ const E = ({ item: a, sx: o, onClick: l }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: i.map((t, n) => /* @__PURE__ */ r.jsx(
-              m.div,
+            children: s ? Array.from({ length: e }).map((r, p) => {
+              const { colSpan: h, rowSpan: m } = C(p, o);
+              return /* @__PURE__ */ t.jsx(
+                w,
+                {
+                  sx: {
+                    position: "relative",
+                    overflow: "hidden",
+                    borderRadius: 2,
+                    gridRow: `span ${m}`,
+                    gridColumn: `span ${h}`
+                  },
+                  children: /* @__PURE__ */ t.jsx(
+                    E,
+                    {
+                      variant: "rectangular",
+                      animation: "wave",
+                      sx: {
+                        width: "100%",
+                        height: "100%",
+                        transform: "none"
+                      }
+                    }
+                  )
+                },
+                p
+              );
+            }) : u.map((r, p) => /* @__PURE__ */ t.jsx(
+              I.div,
               {
-                layoutId: `media-${t.id}-${d}`,
-                onClick: () => !h && e(t),
+                layoutId: `media-${r.id}-${d}`,
+                onClick: () => !c && l(r),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -191,7 +224,7 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: n * 0.05
+                      delay: p * 0.05
                     }
                   }
                 },
@@ -199,22 +232,22 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => u(!0),
-                onDragEnd: (p, v) => {
-                  u(!1);
-                  const b = v.offset.x + v.offset.y;
-                  if (Math.abs(b) > 50) {
-                    const g = [...i], j = g[n], I = b > 0 ? Math.min(n + 1, i.length - 1) : Math.max(n - 1, 0);
-                    g.splice(n, 1), g.splice(I, 0, j), s(g);
+                onDragStart: () => g(!0),
+                onDragEnd: (h, m) => {
+                  g(!1);
+                  const x = m.offset.x + m.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);
                   }
                 },
                 style: {
                   position: "relative",
-                  gridRow: t.rowSpan ? `span ${t.rowSpan}` : "span 2",
-                  gridColumn: t.colSpan ? `span ${t.colSpan}` : "span 1"
+                  gridRow: r.rowSpan ? `span ${r.rowSpan}` : "span 2",
+                  gridColumn: r.colSpan ? `span ${r.colSpan}` : "span 1"
                 },
-                children: /* @__PURE__ */ r.jsxs(
-                  k,
+                children: /* @__PURE__ */ t.jsxs(
+                  w,
                   {
                     sx: {
                       position: "relative",
@@ -229,16 +262,16 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                       }
                     },
                     children: [
-                      /* @__PURE__ */ r.jsx(
-                        E,
+                      /* @__PURE__ */ t.jsx(
+                        A,
                         {
-                          item: t,
+                          item: r,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !h && e(t)
+                          onClick: () => !c && l(r)
                         }
                       ),
-                      (t.title || t.desc) && /* @__PURE__ */ r.jsxs(
-                        c,
+                      (r.title || r.desc) && /* @__PURE__ */ t.jsxs(
+                        a,
                         {
                           className: "hover-overlay",
                           sx: {
@@ -254,18 +287,18 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                             transition: "opacity 0.2s ease-in-out"
                           },
                           children: [
-                            /* @__PURE__ */ r.jsx(
-                              c,
+                            /* @__PURE__ */ t.jsx(
+                              a,
                               {
                                 sx: {
                                   position: "absolute",
                                   inset: 0,
-                                  background: (p) => `linear-gradient(to top, ${(p.vars || p).palette.grey[900]}CC, ${(p.vars || p).palette.grey[900]}66, transparent)`
+                                  background: (h) => `linear-gradient(to top, ${(h.vars || h).palette.grey[900]}CC, ${(h.vars || h).palette.grey[900]}66, transparent)`
                                 }
                               }
                             ),
-                            t.title && /* @__PURE__ */ r.jsx(
-                              x,
+                            r.title && /* @__PURE__ */ t.jsx(
+                              j,
                               {
                                 variant: "subtitle2",
                                 sx: {
@@ -276,23 +309,23 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                                   overflow: "hidden",
                                   textOverflow: "ellipsis"
                                 },
-                                children: t.title
+                                children: r.title
                               }
                             ),
-                            t.desc && /* @__PURE__ */ r.jsx(
-                              x,
+                            r.desc && /* @__PURE__ */ t.jsx(
+                              j,
                               {
                                 variant: "caption",
                                 sx: {
                                   position: "relative",
                                   color: "text.secondary",
-                                  mt: t.title ? 0.5 : 0,
+                                  mt: r.title ? 0.5 : 0,
                                   display: "-webkit-box",
                                   WebkitLineClamp: 2,
                                   WebkitBoxOrient: "vertical",
                                   overflow: "hidden"
                                 },
-                                children: t.desc
+                                children: r.desc
                               }
                             )
                           ]
@@ -302,7 +335,7 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                   }
                 )
               },
-              `${t.id}-${d}`
+              `${r.id}-${d}`
             ))
           }
         )
@@ -311,6 +344,6 @@ const E = ({ item: a, sx: o, onClick: l }) => {
   ] });
 };
 export {
-  E as MediaItem,
-  T as default
+  A as MediaItem,
+  W as default
 };

package/package.json

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

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

@@ -1,2 +0,0 @@
-export { default, MediaItem } from './s-interactive-gallery';
-export type { SInteractiveGalleryProps, MediaItemProps, GalleryLayoutVariant } from './s-interactive-gallery';

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

@@ -1,5 +0,0 @@
-import { MediaItem as a, default as d } from "./s-interactive-gallery.js";
-export {
-  a as MediaItem,
-  d as default
-};