@solostylist/ui-kit 1.0.138 → 1.0.139

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,24 @@ 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;
 }
 /**
- * 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 +75,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,11 +1,11 @@
 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 { useState as h, 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);
+const E = ({ item: n, sx: o, onClick: l }) => {
+  const e = S(null), [i, s] = h(!1), [f, u] = h(!0);
   return y(() => {
     const d = {
       root: null,
@@ -13,8 +13,8 @@ const E = ({ item: a, sx: o, onClick: l }) => {
       // 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));
+    }, t = new IntersectionObserver((a) => {
+      a.forEach((p) => s(p.isIntersecting));
     }, d);
     return e.current && t.observe(e.current), () => {
       e.current && t.unobserve(e.current);
@@ -24,16 +24,16 @@ const E = ({ item: a, sx: o, onClick: l }) => {
     return i ? (async () => {
       if (!(!e.current || !i || !d))
         try {
-          e.current.readyState >= 3 ? (u(!1), await e.current.play()) : (u(!0), await new Promise((n) => {
-            e.current && (e.current.oncanplay = () => n());
+          e.current.readyState >= 3 ? (u(!1), await e.current.play()) : (u(!0), await new Promise((a) => {
+            e.current && (e.current.oncanplay = () => a());
           }), d && (u(!1), await e.current.play()));
-        } catch (n) {
-          console.warn("Video playback failed:", n);
+        } catch (a) {
+          console.warn("Video playback failed:", a);
         }
     })() : e.current && e.current.pause(), () => {
       d = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [i]), a.type === "video" ? /* @__PURE__ */ r.jsxs(
+  }, [i]), n.type === "video" ? /* @__PURE__ */ r.jsxs(
     c,
     {
       sx: {
@@ -58,16 +58,16 @@ const E = ({ item: a, sx: o, onClick: l }) => {
               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",
               display: "block"
             },
-            children: /* @__PURE__ */ r.jsx("source", { src: a.url, type: "video/mp4" })
+            children: /* @__PURE__ */ r.jsx("source", { src: n.url, type: "video/mp4" })
           }
         ),
-        h && /* @__PURE__ */ r.jsx(
+        f && /* @__PURE__ */ r.jsx(
           c,
           {
             sx: {
@@ -102,8 +102,8 @@ 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,
     {
-      src: a.url,
-      alt: a.title || "",
+      src: n.url,
+      alt: n.title || "",
       width: "100%",
       height: "100%",
       style: {
@@ -115,7 +115,7 @@ const E = ({ item: a, sx: o, onClick: l }) => {
       }
     }
   ) });
-}, w = (a, o) => a.map((l, e) => {
+}, w = (n, o) => o === "custom" ? n : n.map((l, e) => {
   let i = 1, s = 2;
   switch (o) {
     case "grid":
@@ -132,11 +132,11 @@ const E = ({ item: a, sx: o, onClick: l }) => {
       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();
+}), T = ({ mediaItems: n, variant: o = "masonry" }) => {
+  const [l, e] = h(null), [i, s] = h(() => w(n, o)), [f, u] = h(!1), d = C();
   return y(() => {
-    s(w(a, o));
-  }, [a, o]), /* @__PURE__ */ r.jsxs(c, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+    s(w(n, o));
+  }, [n, o]), /* @__PURE__ */ r.jsxs(c, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
     /* @__PURE__ */ r.jsx(
       R,
       {
@@ -176,11 +176,11 @@ const E = ({ item: a, sx: o, onClick: l }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: i.map((t, n) => /* @__PURE__ */ r.jsx(
+            children: i.map((t, a) => /* @__PURE__ */ r.jsx(
               m.div,
               {
                 layoutId: `media-${t.id}-${d}`,
-                onClick: () => !h && e(t),
+                onClick: () => !f && e(t),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -191,7 +191,7 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: n * 0.05
+                      delay: a * 0.05
                     }
                   }
                 },
@@ -200,12 +200,12 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
                 onDragStart: () => u(!0),
-                onDragEnd: (p, v) => {
+                onDragEnd: (p, b) => {
                   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);
+                  const v = b.offset.x + b.offset.y;
+                  if (Math.abs(v) > 50) {
+                    const g = [...i], j = g[a], I = v > 0 ? Math.min(a + 1, i.length - 1) : Math.max(a - 1, 0);
+                    g.splice(a, 1), g.splice(I, 0, j), s(g);
                   }
                 },
                 style: {
@@ -234,7 +234,7 @@ const E = ({ item: a, sx: o, onClick: l }) => {
                         {
                           item: t,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !h && e(t)
+                          onClick: () => !f && e(t)
                         }
                       ),
                       (t.title || t.desc) && /* @__PURE__ */ r.jsxs(

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.138",
+  "version": "1.0.139",
   "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
-};