@solostylist/ui-kit 1.0.167 → 1.0.168

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

@@ -1,32 +1,33 @@
 import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import * as s from "react";
+import * as i from "react";
 import { C as k } from "../ChevronLeft-CBuFk2Fh.js";
 import { C as z } from "../ChevronRight-CnDWPrOm.js";
-import { Box as r, IconButton as D } from "@mui/material";
+import { Box as n, IconButton as q } from "@mui/material";
+import "../s-lazy-image/index.js";
 import E from "../s-lazy-image/s-lazy-image.js";
-const F = s.forwardRef(
-  ({ sx: I, leftImage: u, rightImage: L, altLeft: d = "Left image", altRight: S = "Right image", initialPosition: C = 50, ...M }, a) => {
-    const m = Array.isArray(u) ? u : [u], g = Array.isArray(d) ? d : [d], [l, P] = s.useState(0), [o, R] = s.useState(C), [i, f] = s.useState(!1), h = s.useRef(null), A = m.length > 1, x = (e) => {
-      if (!h.current) return;
-      const n = h.current.getBoundingClientRect();
-      let p = (e - n.left) / n.width * 100;
-      p = Math.max(0, Math.min(100, p)), R(p);
-    }, v = (e) => {
-      i && x(e.clientX);
+const g = i.forwardRef(
+  ({ sx: f, leftImage: u, rightImage: S, altLeft: d = "Left image", altRight: C = "Right image", initialPosition: R = 50, ...P }, s) => {
+    const m = Array.isArray(u) ? u : [u], v = Array.isArray(d) ? d : [d], [l, M] = i.useState(0), [o, _] = i.useState(R), [a, x] = i.useState(!1), p = i.useRef(null), A = m.length > 1, y = (e) => {
+      if (!p.current) return;
+      const r = p.current.getBoundingClientRect();
+      let h = (e - r.left) / r.width * 100;
+      h = Math.max(0, Math.min(100, h)), _(h);
     }, b = (e) => {
-      i && x(e.touches[0].clientX);
-    }, y = () => {
-      f(!0);
+      a && y(e.clientX);
+    }, w = (e) => {
+      a && y(e.touches[0].clientX);
+    }, I = () => {
+      x(!0);
     }, c = () => {
-      f(!1);
-    }, w = o === 0 || o === 100;
-    return s.useEffect(() => (i ? (document.addEventListener("mousemove", v), document.addEventListener("touchmove", b), document.addEventListener("mouseup", c), document.addEventListener("touchend", c), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-      document.removeEventListener("mousemove", v), document.removeEventListener("touchmove", b), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
-    }), [i]), /* @__PURE__ */ t.jsxs(
-      r,
+      x(!1);
+    }, j = o === 0 || o === 100;
+    return i.useEffect(() => (a ? (document.addEventListener("mousemove", b), document.addEventListener("touchmove", w), document.addEventListener("mouseup", c), document.addEventListener("touchend", c), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+      document.removeEventListener("mousemove", b), document.removeEventListener("touchmove", w), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
+    }), [a]), /* @__PURE__ */ t.jsxs(
+      n,
       {
         ref: (e) => {
-          h.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+          p.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
         },
         sx: {
           position: "relative",
@@ -34,17 +35,17 @@ const F = s.forwardRef(
           height: "100%",
           overflow: "hidden",
           userSelect: "none",
-          ...I
+          ...f
         },
-        onMouseDown: y,
-        onTouchStart: y,
-        ...M,
+        onMouseDown: I,
+        onTouchStart: I,
+        ...P,
         children: [
           /* @__PURE__ */ t.jsx(
             E,
             {
-              src: L,
-              alt: S,
+              src: S,
+              alt: C,
               style: {
                 position: "absolute",
                 inset: 0,
@@ -57,7 +58,7 @@ const F = s.forwardRef(
             }
           ),
           /* @__PURE__ */ t.jsx(
-            r,
+            n,
             {
               sx: {
                 position: "absolute",
@@ -72,7 +73,7 @@ const F = s.forwardRef(
                 E,
                 {
                   src: m[l],
-                  alt: g[l] || g[0],
+                  alt: v[l] || v[0],
                   style: {
                     width: "100%",
                     height: "100%",
@@ -84,7 +85,7 @@ const F = s.forwardRef(
             }
           ),
           A && /* @__PURE__ */ t.jsx(
-            r,
+            n,
             {
               sx: {
                 position: "absolute",
@@ -93,7 +94,7 @@ const F = s.forwardRef(
                 display: "flex",
                 gap: 1,
                 zIndex: 1,
-                pointerEvents: i ? "none" : "auto",
+                pointerEvents: a ? "none" : "auto",
                 // Disable bubble click when dragging
                 opacity: o > 10 ? 1 : 0,
                 // Fade out if left image is mostly hidden
@@ -101,33 +102,33 @@ const F = s.forwardRef(
               },
               onClick: (e) => e.stopPropagation(),
               onMouseDown: (e) => e.stopPropagation(),
-              children: m.map((e, n) => /* @__PURE__ */ t.jsx(
-                r,
+              children: m.map((e, r) => /* @__PURE__ */ t.jsx(
+                n,
                 {
-                  onClick: (j) => {
-                    j.stopPropagation(), P(n);
+                  onClick: (L) => {
+                    L.stopPropagation(), M(r);
                   },
                   sx: {
                     width: 8,
                     height: 8,
                     borderRadius: "50%",
-                    bgcolor: l === n ? "primary.main" : "whiteAlpha.medium",
+                    bgcolor: l === r ? "primary.main" : "whiteAlpha.medium",
                     cursor: "pointer",
                     boxShadow: 1,
                     backdropFilter: "blur(4px)",
                     transition: "all 0.2s",
                     "&:hover": {
                       transform: "scale(1.2)",
-                      bgcolor: l === n ? "primary.main" : "whiteAlpha.dark"
+                      bgcolor: l === r ? "primary.main" : "whiteAlpha.dark"
                     }
                   }
                 },
-                n
+                r
               ))
             }
           ),
           /* @__PURE__ */ t.jsxs(
-            r,
+            n,
             {
               sx: {
                 position: "absolute",
@@ -139,7 +140,7 @@ const F = s.forwardRef(
               },
               children: [
                 /* @__PURE__ */ t.jsx(
-                  r,
+                  n,
                   {
                     sx: {
                       position: "absolute",
@@ -151,7 +152,7 @@ const F = s.forwardRef(
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  D,
+                  q,
                   {
                     sx: {
                       position: "absolute",
@@ -159,7 +160,7 @@ const F = s.forwardRef(
                       left: "50%",
                       transform: "translate(-50%, -50%)",
                       cursor: "ew-resize",
-                      ...w ? {
+                      ...j ? {
                         width: 48,
                         height: 48,
                         backdropFilter: "blur(10px)"
@@ -178,7 +179,7 @@ const F = s.forwardRef(
                     onClick: (e) => {
                       e.preventDefault(), e.stopPropagation();
                     },
-                    children: w && /* @__PURE__ */ t.jsxs(r, { sx: { display: "flex", alignItems: "center" }, children: [
+                    children: j && /* @__PURE__ */ t.jsxs(n, { sx: { display: "flex", alignItems: "center" }, children: [
                       /* @__PURE__ */ t.jsx(k, {}),
                       /* @__PURE__ */ t.jsx(z, {})
                     ] })
@@ -192,7 +193,11 @@ const F = s.forwardRef(
     );
   }
 );
-F.displayName = "SImageComparison";
+g.displayName = "SImageComparison";
+try {
+  g.displayName = "SImageComparison", g.__docgenInfo = { description: "", displayName: "SImageComparison", props: { leftImage: { defaultValue: null, description: "", name: "leftImage", required: !0, type: { name: "string | string[]" } }, rightImage: { defaultValue: null, description: "", name: "rightImage", required: !0, type: { name: "string" } }, altLeft: { defaultValue: { value: "Left image" }, description: "", name: "altLeft", required: !1, type: { name: "string | string[]" } }, altRight: { defaultValue: { value: "Right image" }, description: "", name: "altRight", required: !1, type: { name: "string" } }, initialPosition: { defaultValue: { value: "50" }, description: "", name: "initialPosition", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  F as default
+  g as default
 };

package/dist/s-image-modal/index.js

@@ -1,5 +1,5 @@
-import { DefaultMediaItem as a, default as f } from "./s-image-modal.js";
+import { DefaultMediaItem as t, SImageModal as d } from "./s-image-modal.js";
 export {
-  a as DefaultMediaItem,
-  f as default
+  t as DefaultMediaItem,
+  d as default
 };

package/dist/s-image-modal/s-image-modal.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ModalProps } from '@mui/material';
 /**
  * Interface for individual media items (images/videos) in the modal
  */
@@ -41,7 +42,7 @@ export interface SImageModalProps {
     /** Whether to show the item counter */
     showCounter?: boolean;
     /** Custom modal styling */
-    modalSx?: any;
+    modalSx?: ModalProps['sx'];
 }
 /**
  * Default MediaItem renderer for images and videos
@@ -53,23 +54,6 @@ export declare const DefaultMediaItem: React.FC<{
     objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     disableVideoControls?: boolean;
 }>;
-/**
- * SImageModal - A reusable full-screen modal for displaying media items with navigation features.
- *
- * Key features:
- * - Full-screen modal with backdrop blur
- * - Keyboard navigation (arrow keys, escape)
- * - Previous/next navigation buttons (when mediaItems provided)
- * - Draggable thumbnail dock with stacked layout (optional)
- * - Animated transitions with Framer Motion
- * - Item counter display (optional)
- * - Responsive design for all screen sizes
- * - Caption overlays with gradient backgrounds
- * - Custom media item rendering support
- * - Advanced z-index management for proper layering
- *
- * @param props - SImageModalProps with modal state and navigation handlers
- * @returns JSX.Element - Full-screen image modal
- */
-declare const SImageModal: React.FC<SImageModalProps>;
+/** A reusable full-screen modal for displaying media items with navigation features. */
+export declare const SImageModal: React.FC<SImageModalProps>;
 export default SImageModal;