@solostylist/ui-kit 1.0.116 → 1.0.117

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

@@ -1,30 +1,31 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import * as s from "react";
-import { C as y, a as I } from "../ChevronRight-DQD188LX.js";
-import { Box as o, IconButton as L } from "@mui/material";
-const R = s.forwardRef(
-  ({ sx: f, leftImage: v, rightImage: g, altLeft: b = "Left image", altRight: w = "Right image", initialPosition: j = 50, ...E }, i) => {
-    const [r, S] = s.useState(j), [n, d] = s.useState(!1), l = s.useRef(null), u = (t) => {
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import * as n from "react";
+import { C as I, a as L } from "../ChevronRight-DQD188LX.js";
+import { Box as s, IconButton as R } from "@mui/material";
+import v from "../s-lazy-image/s-lazy-image.js";
+const C = n.forwardRef(
+  ({ sx: x, leftImage: g, rightImage: b, altLeft: w = "Left image", altRight: j = "Right image", initialPosition: y = 50, ...E }, r) => {
+    const [i, S] = n.useState(y), [o, d] = n.useState(!1), l = n.useRef(null), u = (e) => {
       if (!l.current) return;
-      const p = l.current.getBoundingClientRect();
-      let c = (t - p.left) / p.width * 100;
+      const f = l.current.getBoundingClientRect();
+      let c = (e - f.left) / f.width * 100;
       c = Math.max(0, Math.min(100, c)), S(c);
-    }, m = (t) => {
-      n && u(t.clientX);
-    }, h = (t) => {
-      n && u(t.touches[0].clientX);
-    }, x = () => {
+    }, m = (e) => {
+      o && u(e.clientX);
+    }, h = (e) => {
+      o && u(e.touches[0].clientX);
+    }, p = () => {
       d(!0);
     }, a = () => {
       d(!1);
     };
-    return s.useEffect(() => (n ? (document.addEventListener("mousemove", m), document.addEventListener("touchmove", h), document.addEventListener("mouseup", a), document.addEventListener("touchend", a), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+    return n.useEffect(() => (o ? (document.addEventListener("mousemove", m), document.addEventListener("touchmove", h), document.addEventListener("mouseup", a), document.addEventListener("touchend", a), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
       document.removeEventListener("mousemove", m), document.removeEventListener("touchmove", h), document.removeEventListener("mouseup", a), document.removeEventListener("touchend", a), document.body.style.cursor = "";
-    }), [n]), /* @__PURE__ */ e.jsxs(
-      o,
+    }), [o]), /* @__PURE__ */ t.jsxs(
+      s,
       {
-        ref: (t) => {
-          l.current = t, typeof i == "function" ? i(t) : i && (i.current = t);
+        ref: (e) => {
+          l.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
         },
         sx: {
           position: "relative",
@@ -35,19 +36,18 @@ const R = s.forwardRef(
           "&:hover .slider-handle": {
             transform: "translate(-50%, -50%) scale(1.05)"
           },
-          ...f
+          ...x
         },
-        onMouseDown: x,
-        onTouchStart: x,
+        onMouseDown: p,
+        onTouchStart: p,
         ...E,
         children: [
-          /* @__PURE__ */ e.jsx(
-            o,
+          /* @__PURE__ */ t.jsx(
+            v,
             {
-              component: "img",
-              src: g,
-              alt: w,
-              sx: {
+              src: b,
+              alt: j,
+              style: {
                 position: "absolute",
                 inset: 0,
                 width: "100%",
@@ -58,8 +58,8 @@ const R = s.forwardRef(
               draggable: !1
             }
           ),
-          /* @__PURE__ */ e.jsx(
-            o,
+          /* @__PURE__ */ t.jsx(
+            s,
             {
               sx: {
                 position: "absolute",
@@ -68,15 +68,14 @@ const R = s.forwardRef(
                 height: "100%",
                 overflow: "hidden",
                 pointerEvents: "none",
-                clipPath: `polygon(0 0, ${r}% 0, ${r}% 100%, 0 100%)`
+                clipPath: `polygon(0 0, ${i}% 0, ${i}% 100%, 0 100%)`
               },
-              children: /* @__PURE__ */ e.jsx(
-                o,
+              children: /* @__PURE__ */ t.jsx(
+                v,
                 {
-                  component: "img",
-                  src: v,
-                  alt: b,
-                  sx: {
+                  src: g,
+                  alt: w,
+                  style: {
                     width: "100%",
                     height: "100%",
                     objectFit: "cover"
@@ -86,8 +85,8 @@ const R = s.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ e.jsxs(
-            o,
+          /* @__PURE__ */ t.jsxs(
+            s,
             {
               sx: {
                 position: "absolute",
@@ -95,11 +94,11 @@ const R = s.forwardRef(
                 height: "100%",
                 width: "4px",
                 cursor: "ew-resize",
-                left: `calc(${r}% - 2px)`
+                left: `calc(${i}% - 2px)`
               },
               children: [
-                /* @__PURE__ */ e.jsx(
-                  o,
+                /* @__PURE__ */ t.jsx(
+                  s,
                   {
                     sx: {
                       position: "absolute",
@@ -110,8 +109,8 @@ const R = s.forwardRef(
                     }
                   }
                 ),
-                /* @__PURE__ */ e.jsx(
-                  L,
+                /* @__PURE__ */ t.jsx(
+                  R,
                   {
                     className: "slider-handle",
                     sx: {
@@ -124,20 +123,23 @@ const R = s.forwardRef(
                       backdropFilter: "blur(10px)",
                       boxShadow: 3,
                       transition: "all 0.3s ease-in-out",
-                      ...n && {
+                      ...o && {
                         transform: "translate(-50%, -50%) scale(1.05)",
                         boxShadow: 6
                       }
                     },
                     role: "slider",
-                    "aria-valuenow": r,
+                    "aria-valuenow": i,
                     "aria-valuemin": 0,
                     "aria-valuemax": 100,
                     "aria-orientation": "horizontal",
                     "aria-label": "Image comparison slider",
-                    children: /* @__PURE__ */ e.jsxs(o, { sx: { display: "flex", alignItems: "center" }, children: [
-                      /* @__PURE__ */ e.jsx(y, { sx: { fontSize: 20 } }),
-                      /* @__PURE__ */ e.jsx(I, { sx: { fontSize: 20 } })
+                    onClick: (e) => {
+                      e.preventDefault(), e.stopPropagation();
+                    },
+                    children: /* @__PURE__ */ t.jsxs(s, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ t.jsx(I, { sx: { fontSize: 20 } }),
+                      /* @__PURE__ */ t.jsx(L, { sx: { fontSize: 20 } })
                     ] })
                   }
                 )
@@ -149,7 +151,7 @@ const R = s.forwardRef(
     );
   }
 );
-R.displayName = "SImageComparison";
+C.displayName = "SImageComparison";
 export {
-  R as default
+  C as default
 };

package/dist/theme/customizations/inputs.js

@@ -35,6 +35,7 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
   MuiIconButton: {
     styleOverrides: {
       root: ({ theme: o }) => ({
+        color: "var(--s-palette-text-primary)",
         boxShadow: "none",
         textTransform: "none",
         fontWeight: o.typography.fontWeightMedium,

package/package.json

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