@solostylist/ui-kit 1.0.188 → 1.0.190

package/dist/s-glow-button/package.json

@@ -1,5 +1,5 @@
-{
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": false
-}
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-gradient-icon/package.json

@@ -1,5 +1,5 @@
-{
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": false
-}
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-gradient-icon/s-gradient-icon.d.ts

@@ -1,7 +1,7 @@
 import { SvgIconProps, SvgIconTypeMap, SxProps } from '@mui/material';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 /** Type definition for Material-UI icon components with muiName property */
-type IconComponent = OverridableComponent<SvgIconTypeMap<{}, 'svg'>> & {
+type IconComponent = OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
     muiName: string;
 };
 /** Gradient direction options */

package/dist/s-gradient-icon/s-gradient-icon.js

@@ -1,46 +1,45 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
-const C = ({
+import { useId as b } from "react";
+const $ = ({
   hovered: x = !1,
   IconComponent: n,
   sx: c,
   strokeWidth: p = 0,
   gradientTheme: m = "blue-cyan",
-  customGradient: t,
+  customGradient: o,
   gradientDirection: a = "diagonal",
   animationDuration: y = 300,
-  animationEasing: h = "ease",
+  animationEasing: u = "ease",
   autoHover: i = !1,
-  gradientId: u,
+  gradientId: h,
   alwaysGradient: f = !1,
-  fallbackColor: g,
+  fallbackColor: j,
   ...d
 }) => {
-  if (!n)
-    return null;
-  const o = u || `gradient-${Math.random().toString(36).substr(2, 9)}`, s = {
+  const g = b(), t = h || `gradient-${g}`, s = {
     "blue-cyan": { start: "#1469be", end: "#43ecff" },
     "purple-pink": { start: "#8b5cf6", end: "#ec4899" },
     "orange-red": { start: "#f97316", end: "#ef4444" },
     "green-teal": { start: "#10b981", end: "#06b6d4" },
     "indigo-purple": { start: "#6366f1", end: "#a855f7" },
-    custom: t ? {
-      start: t.startColor,
-      end: t.endColor,
-      middle: t.middleColor,
-      middlePos: t.middlePosition || 0.5
+    custom: o ? {
+      start: o.startColor,
+      end: o.endColor,
+      middle: o.middleColor,
+      middlePos: o.middlePosition || 0.5
     } : { start: "#1469be", end: "#43ecff" }
   }[m], r = {
     horizontal: { x1: "0", y1: "0", x2: "1", y2: "0" },
     vertical: { x1: "0", y1: "0", x2: "0", y2: "1" },
     diagonal: { x1: "0", y1: "0", x2: "1", y2: "1" },
     radial: { x1: "0.5", y1: "0.5", x2: "0.5", y2: "0.5" }
-  }[a], j = f || x ? `url(#${o})` : g || "var(--s-palette-text-primary)";
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: a === "radial" ? /* @__PURE__ */ e.jsxs("radialGradient", { id: o, cx: "50%", cy: "50%", r: "50%", children: [
+  }[a], C = f || x ? `url(#${t})` : j || "var(--s-palette-text-primary)";
+  return n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: a === "radial" ? /* @__PURE__ */ e.jsxs("radialGradient", { id: t, cx: "50%", cy: "50%", r: "50%", children: [
       /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: s.start }),
       s.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(s.middlePos || 0.5) * 100}%`, stopColor: s.middle }),
       /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: s.end })
-    ] }) : /* @__PURE__ */ e.jsxs("linearGradient", { id: o, x1: r.x1, y1: r.y1, x2: r.x2, y2: r.y2, children: [
+    ] }) : /* @__PURE__ */ e.jsxs("linearGradient", { id: t, x1: r.x1, y1: r.y1, x2: r.x2, y2: r.y2, children: [
       /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: s.start }),
       s.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(s.middlePos || 0.5) * 100}%`, stopColor: s.middle }),
       /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: s.end })
@@ -50,13 +49,13 @@ const C = ({
       {
         ...d,
         sx: {
-          fill: j,
+          fill: C,
           strokeWidth: p,
-          transition: `fill ${y}ms ${h}`,
+          transition: `fill ${y}ms ${u}`,
           // Auto hover functionality
           ...i && {
             "&:hover": {
-              fill: `url(#${o})`
+              fill: `url(#${t})`
             }
           },
           ...c
@@ -72,10 +71,10 @@ const C = ({
         }
       }
     )
-  ] });
+  ] }) : null;
 };
-C.displayName = "SGradientIcon";
+$.displayName = "SGradientIcon";
 export {
-  C as SGradientIcon,
-  C as default
+  $ as SGradientIcon,
+  $ as default
 };

package/dist/s-i18n-provider/package.json

@@ -1,5 +1,5 @@
-{
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": false
-}
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-icon-button/package.json

@@ -1,5 +1,5 @@
-{
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": false
-}
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

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

@@ -1,5 +1,5 @@
-{
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": false
-}
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

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

@@ -1,29 +1,35 @@
 import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import * as i from "react";
+import * as o from "react";
 import { C as A } from "../ChevronLeft-BJjuFNNQ.js";
 import { C as z } from "../ChevronRight-5ZX3FodP.js";
-import { Box as n, IconButton as D } from "@mui/material";
+import { Box as s, IconButton as D } from "@mui/material";
 import E from "../s-lazy-image/s-lazy-image.js";
-const F = i.forwardRef(
-  ({ sx: I, leftImage: d, rightImage: L, altLeft: u = "Left image", altRight: C = "Right image", initialPosition: S = 50, ...M }, a) => {
-    const m = Array.isArray(d) ? d : [d], v = Array.isArray(u) ? u : [u], [l, P] = i.useState(0), [o, R] = i.useState(S), [s, x] = i.useState(!1), p = i.useRef(null), k = m.length > 1, f = (e) => {
+const F = o.forwardRef(
+  ({ sx: C, leftImage: u, rightImage: I, altLeft: d = "Left image", altRight: L = "Right image", initialPosition: S = 50, ...k }, a) => {
+    const m = Array.isArray(u) ? u : [u], f = Array.isArray(d) ? d : [d], [l, M] = o.useState(0), [r, P] = o.useState(S), [n, b] = o.useState(!1), p = o.useRef(null), R = m.length > 1, y = (e) => {
       if (!p.current) return;
-      const r = p.current.getBoundingClientRect();
-      let g = (e - r.left) / r.width * 100;
-      g = Math.max(0, Math.min(100, g)), R(g);
-    }, b = (e) => {
-      s && f(e.clientX);
-    }, y = (e) => {
-      s && f(e.touches[0].clientX);
-    }, w = () => {
-      x(!0);
+      const i = p.current.getBoundingClientRect();
+      let x = (e - i.left) / i.width * 100;
+      x = Math.max(0, Math.min(100, x)), P(x);
+    }, h = o.useCallback(
+      (e) => {
+        n && y(e.clientX);
+      },
+      [n]
+    ), g = o.useCallback(
+      (e) => {
+        n && y(e.touches[0].clientX);
+      },
+      [n]
+    ), w = () => {
+      b(!0);
     }, c = () => {
-      x(!1);
-    }, h = o === 0 || o === 100;
-    return i.useEffect(() => (s ? (document.addEventListener("mousemove", b), document.addEventListener("touchmove", y), 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", y), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
-    }), [s]), /* @__PURE__ */ t.jsxs(
-      n,
+      b(!1);
+    }, v = r === 0 || r === 100;
+    return o.useEffect(() => (n ? (document.addEventListener("mousemove", h), document.addEventListener("touchmove", g), document.addEventListener("mouseup", c), document.addEventListener("touchend", c), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+      document.removeEventListener("mousemove", h), document.removeEventListener("touchmove", g), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
+    }), [n, h, g]), /* @__PURE__ */ t.jsxs(
+      s,
       {
         ref: (e) => {
           p.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
@@ -34,17 +40,17 @@ const F = i.forwardRef(
           height: "100%",
           overflow: "hidden",
           userSelect: "none",
-          ...I
+          ...C
         },
         onMouseDown: w,
         onTouchStart: w,
-        ...M,
+        ...k,
         children: [
           /* @__PURE__ */ t.jsx(
             E,
             {
-              src: L,
-              alt: C,
+              src: I,
+              alt: L,
               style: {
                 position: "absolute",
                 inset: 0,
@@ -57,7 +63,7 @@ const F = i.forwardRef(
             }
           ),
           /* @__PURE__ */ t.jsx(
-            n,
+            s,
             {
               sx: {
                 position: "absolute",
@@ -66,13 +72,13 @@ const F = i.forwardRef(
                 height: "100%",
                 overflow: "hidden",
                 pointerEvents: "none",
-                clipPath: `polygon(0 0, ${o}% 0, ${o}% 100%, 0 100%)`
+                clipPath: `polygon(0 0, ${r}% 0, ${r}% 100%, 0 100%)`
               },
               children: /* @__PURE__ */ t.jsx(
                 E,
                 {
                   src: m[l],
-                  alt: v[l] || v[0],
+                  alt: f[l] || f[0],
                   style: {
                     width: "100%",
                     height: "100%",
@@ -83,8 +89,8 @@ const F = i.forwardRef(
               )
             }
           ),
-          k && /* @__PURE__ */ t.jsx(
-            n,
+          R && /* @__PURE__ */ t.jsx(
+            s,
             {
               sx: {
                 position: "absolute",
@@ -93,41 +99,41 @@ const F = i.forwardRef(
                 display: "flex",
                 gap: 1,
                 zIndex: 1,
-                pointerEvents: s ? "none" : "auto",
+                pointerEvents: n ? "none" : "auto",
                 // Disable bubble click when dragging
-                opacity: o > 10 ? 1 : 0,
+                opacity: r > 10 ? 1 : 0,
                 // Fade out if left image is mostly hidden
                 transition: "opacity 0.2s"
               },
               onClick: (e) => e.stopPropagation(),
               onMouseDown: (e) => e.stopPropagation(),
-              children: m.map((e, r) => /* @__PURE__ */ t.jsx(
-                n,
+              children: m.map((e, i) => /* @__PURE__ */ t.jsx(
+                s,
                 {
                   onClick: (j) => {
-                    j.stopPropagation(), P(r);
+                    j.stopPropagation(), M(i);
                   },
                   sx: {
                     width: 8,
                     height: 8,
                     borderRadius: "50%",
-                    bgcolor: l === r ? "primary.main" : "whiteAlpha.medium",
+                    bgcolor: l === i ? "primary.main" : "whiteAlpha.medium",
                     cursor: "pointer",
                     boxShadow: 1,
                     backdropFilter: "blur(4px)",
                     transition: "all 0.2s",
                     "&:hover": {
                       transform: "scale(1.2)",
-                      bgcolor: l === r ? "primary.main" : "whiteAlpha.dark"
+                      bgcolor: l === i ? "primary.main" : "whiteAlpha.dark"
                     }
                   }
                 },
-                r
+                i
               ))
             }
           ),
           /* @__PURE__ */ t.jsxs(
-            n,
+            s,
             {
               sx: {
                 position: "absolute",
@@ -135,11 +141,11 @@ const F = i.forwardRef(
                 height: "100%",
                 width: "4px",
                 cursor: "ew-resize",
-                left: `calc(${o}% - 2px)`
+                left: `calc(${r}% - 2px)`
               },
               children: [
                 /* @__PURE__ */ t.jsx(
-                  n,
+                  s,
                   {
                     sx: {
                       position: "absolute",
@@ -159,7 +165,7 @@ const F = i.forwardRef(
                       left: "50%",
                       transform: "translate(-50%, -50%)",
                       cursor: "ew-resize",
-                      ...h ? {
+                      ...v ? {
                         width: 48,
                         height: 48,
                         backdropFilter: "blur(8px)",
@@ -168,11 +174,11 @@ const F = i.forwardRef(
                       } : {},
                       transition: "all 0.3s ease-in-out",
                       "&:hover": {
-                        bgcolor: h ? "divider" : "transparent"
+                        bgcolor: v ? "divider" : "transparent"
                       }
                     },
                     role: "slider",
-                    "aria-valuenow": o,
+                    "aria-valuenow": r,
                     "aria-valuemin": 0,
                     "aria-valuemax": 100,
                     "aria-orientation": "horizontal",
@@ -180,7 +186,7 @@ const F = i.forwardRef(
                     onClick: (e) => {
                       e.preventDefault(), e.stopPropagation();
                     },
-                    children: h && /* @__PURE__ */ t.jsxs(n, { sx: { display: "flex", alignItems: "center" }, children: [
+                    children: v && /* @__PURE__ */ t.jsxs(s, { sx: { display: "flex", alignItems: "center" }, children: [
                       /* @__PURE__ */ t.jsx(A, {}),
                       /* @__PURE__ */ t.jsx(z, {})
                     ] })

package/dist/s-image-modal/package.json

@@ -1,5 +1,5 @@
-{
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": false
-}
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}