@solostylist/ui-kit 1.0.174 → 1.0.176

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

@@ -1,79 +1,78 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import L, { useState as j } from "react";
-import { Box as u } from "@mui/material";
-import { useMotionValue as m, useSpring as d, useTransform as D, motion as A } from "framer-motion";
-import "../s-lazy-image/index.js";
-import B from "../s-lazy-image/s-lazy-image.js";
-const o = L.forwardRef(
+import { j as n } from "../jsx-runtime-tc70JA_2.js";
+import H, { useState as N } from "react";
+import { Box as r } from "@mui/material";
+import { useMotionValue as m, useSpring as c, useTransform as T, motion as Z } from "framer-motion";
+import _ from "../s-lazy-image/s-lazy-image.js";
+const $ = H.forwardRef(
   ({
-    src: a,
-    alt: c,
-    zoomScale: p = 1.2,
-    transitionDuration: g = 0.3,
-    borderRadius: f = 1.5,
-    imgStyle: y,
-    imgClassName: h,
+    src: d,
+    alt: u,
+    zoomScale: l = 1.2,
+    transitionDuration: f = 0.3,
+    borderRadius: g = 1.5,
+    imgStyle: h,
+    imgClassName: p,
     skeletonVariant: v = "rounded",
-    height: S = "100%",
-    width: V = "100%",
-    sx: b,
-    ...q
-  }, z) => {
-    const [l, _] = j(!1), t = m(50), n = m(50), s = { damping: 20, stiffness: 150, mass: 0.5 }, w = d(t, s), C = d(n, s), I = D(
-      [w, C],
-      ([e, i]) => `${e}% ${i}%`
-    ), x = (e) => {
-      if (!l) return;
-      const { left: i, top: R, width: N, height: M } = e.currentTarget.getBoundingClientRect();
-      t.set((e.clientX - i) / N * 100), n.set((e.clientY - R) / M * 100);
-    }, k = () => {
-      t.set(50), n.set(50);
+    height: M = "100%",
+    width: x = "100%",
+    sx: j,
+    ...y
+  }, L) => {
+    const [i, w] = N(!1), o = m(50), t = m(50), a = { damping: 20, stiffness: 150, mass: 0.5 }, R = c(o, a), S = c(t, a), b = T(
+      [R, S],
+      ([e, s]) => `${e}% ${s}%`
+    ), I = (e) => {
+      if (!i) return;
+      const { left: s, top: Y, width: B, height: C } = e.currentTarget.getBoundingClientRect();
+      o.set((e.clientX - s) / B * 100), t.set((e.clientY - Y) / C * 100);
+    }, X = () => {
+      o.set(50), t.set(50);
     };
-    return /* @__PURE__ */ r.jsx(
-      u,
+    return /* @__PURE__ */ n.jsx(
+      r,
       {
-        ref: z,
-        onMouseMove: x,
-        onMouseLeave: k,
+        ref: L,
+        onMouseMove: I,
+        onMouseLeave: X,
         sx: {
           position: "relative",
           width: "100%",
           height: "auto",
           overflow: "hidden",
-          borderRadius: f,
-          ...b
+          borderRadius: g,
+          ...j
         },
-        ...q,
-        children: /* @__PURE__ */ r.jsx(
-          u,
+        ...y,
+        children: /* @__PURE__ */ n.jsx(
+          r,
           {
-            component: A.div,
+            component: Z.div,
             style: {
-              transformOrigin: I
+              transformOrigin: b
             },
             animate: { scale: 1 },
-            whileHover: l ? { scale: p } : { scale: 1 },
+            whileHover: i ? { scale: l } : { scale: 1 },
             transition: {
               type: "spring",
-              duration: g,
+              duration: f,
               bounce: 0
             },
-            children: /* @__PURE__ */ r.jsx(
-              B,
+            children: /* @__PURE__ */ n.jsx(
+              _,
               {
-                src: a,
-                alt: c,
+                src: d,
+                alt: u,
                 variant: v,
-                height: S,
-                width: V,
-                className: h,
+                height: M,
+                width: x,
+                className: p,
                 style: {
                   objectFit: "cover",
                   display: "block",
                   borderRadius: "inherit",
-                  ...y
+                  ...h
                 },
-                onLoad: () => _(!0)
+                onLoad: () => w(!0)
               }
             )
           }
@@ -82,16 +81,8 @@ const o = L.forwardRef(
     );
   }
 );
-o.displayName = "SZoomImage";
-try {
-  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
-} catch {
-}
-try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
-} catch {
-}
+$.displayName = "SZoomImage";
 export {
-  o as SZoomImage,
-  o as default
+  $ as SZoomImage,
+  $ as default
 };

package/dist/styled-B0KflPi-.js

@@ -0,0 +1,203 @@
+import { d as N } from "./defaultTheme-LSr-S9un.js";
+import { T as q } from "./identifier-BKLqN993.js";
+import { i as S, a as G, s as J } from "./index-D3G5Rwl-.js";
+import { j as E, b as Q, s as L, i as U, c as X } from "./createTheme-f5g1s6ww.js";
+function k(e, n = "") {
+  return e.displayName || e.name || n;
+}
+function V(e, n, t) {
+  const r = k(n);
+  return e.displayName || (r !== "" ? `${t}(${r})` : t);
+}
+function Y(e) {
+  if (e != null) {
+    if (typeof e == "string")
+      return e;
+    if (typeof e == "function")
+      return k(e, "Component");
+    if (typeof e == "object")
+      switch (e.$$typeof) {
+        case E.ForwardRef:
+          return V(e, e.render, "ForwardRef");
+        case E.Memo:
+          return V(e, e.type, "memo");
+        default:
+          return;
+      }
+  }
+}
+function Z(e) {
+  const {
+    variants: n,
+    ...t
+  } = e, r = {
+    variants: n,
+    style: S(t),
+    isProcessed: !0
+  };
+  return r.style === t || n && n.forEach((s) => {
+    typeof s.style != "function" && (s.style = S(s.style));
+  }), r;
+}
+const z = Q();
+function $(e) {
+  return e !== "ownerState" && e !== "theme" && e !== "sx" && e !== "as";
+}
+function m(e, n) {
+  return n && e && typeof e == "object" && e.styles && !e.styles.startsWith("@layer") && (e.styles = `@layer ${n}{${String(e.styles)}}`), e;
+}
+function ee(e) {
+  return e ? (n, t) => t[e] : null;
+}
+function te(e, n, t) {
+  e.theme = oe(e.theme) ? t : e.theme[n] || e.theme;
+}
+function P(e, n, t) {
+  const r = typeof n == "function" ? n(e) : n;
+  if (Array.isArray(r))
+    return r.flatMap((s) => P(e, s, t));
+  if (Array.isArray(r?.variants)) {
+    let s;
+    if (r.isProcessed)
+      s = t ? m(r.style, t) : r.style;
+    else {
+      const {
+        variants: w,
+        ...o
+      } = r;
+      s = t ? m(S(o), t) : o;
+    }
+    return j(e, r.variants, [s], t);
+  }
+  return r?.isProcessed ? t ? m(S(r.style), t) : r.style : t ? m(S(r), t) : r;
+}
+function j(e, n, t = [], r = void 0) {
+  let s;
+  e: for (let w = 0; w < n.length; w += 1) {
+    const o = n[w];
+    if (typeof o.props == "function") {
+      if (s ??= {
+        ...e,
+        ...e.ownerState,
+        ownerState: e.ownerState
+      }, !o.props(s))
+        continue;
+    } else
+      for (const i in o.props)
+        if (e[i] !== o.props[i] && e.ownerState?.[i] !== o.props[i])
+          continue e;
+    typeof o.style == "function" ? (s ??= {
+      ...e,
+      ...e.ownerState,
+      ownerState: e.ownerState
+    }, t.push(r ? m(S(o.style(s)), r) : o.style(s))) : t.push(r ? m(S(o.style), r) : o.style);
+  }
+  return t;
+}
+function ne(e = {}) {
+  const {
+    themeId: n,
+    defaultTheme: t = z,
+    rootShouldForwardProp: r = $,
+    slotShouldForwardProp: s = $
+  } = e;
+  function w(i) {
+    te(i, n, t);
+  }
+  return (i, I = {}) => {
+    G(i, (u) => u.filter((f) => f !== L));
+    const {
+      name: y,
+      slot: l,
+      skipVariantsResolver: A,
+      skipSx: M,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver: O = ee(D(l)),
+      ...H
+    } = I, T = y && y.startsWith("Mui") || l ? "components" : "custom", W = A !== void 0 ? A : (
+      // TODO v6: remove `Root` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      l && l !== "Root" && l !== "root" || !1
+    ), C = M || !1;
+    let v = $;
+    l === "Root" || l === "root" ? v = r : l ? v = s : ie(i) && (v = void 0);
+    const x = J(i, {
+      shouldForwardProp: v,
+      label: se(y, l),
+      ...H
+    }), B = (u) => {
+      if (u.__emotion_real === u)
+        return u;
+      if (typeof u == "function")
+        return function(h) {
+          return P(h, u, h.theme.modularCssLayers ? T : void 0);
+        };
+      if (U(u)) {
+        const f = Z(u);
+        return function(d) {
+          return f.variants ? P(d, f, d.theme.modularCssLayers ? T : void 0) : d.theme.modularCssLayers ? m(f.style, T) : f.style;
+        };
+      }
+      return u;
+    }, b = (...u) => {
+      const f = [], h = u.map(B), d = [];
+      if (f.push(w), y && O && d.push(function(a) {
+        const c = a.theme.components?.[y]?.styleOverrides;
+        if (!c)
+          return null;
+        const g = {};
+        for (const _ in c)
+          g[_] = P(a, c[_], a.theme.modularCssLayers ? "theme" : void 0);
+        return O(a, g);
+      }), y && !W && d.push(function(a) {
+        const c = a.theme?.components?.[y]?.variants;
+        return c ? j(a, c, [], a.theme.modularCssLayers ? "theme" : void 0) : null;
+      }), C || d.push(L), Array.isArray(h[0])) {
+        const p = h.shift(), a = new Array(f.length).fill(""), F = new Array(d.length).fill("");
+        let c;
+        c = [...a, ...p, ...F], c.raw = [...a, ...p.raw, ...F], f.unshift(c);
+      }
+      const K = [...f, ...h, ...d], R = x(...K);
+      return i.muiName && (R.muiName = i.muiName), process.env.NODE_ENV !== "production" && (R.displayName = re(y, l, i)), R;
+    };
+    return x.withConfig && (b.withConfig = x.withConfig), b;
+  };
+}
+function re(e, n, t) {
+  return e ? `${e}${X(n || "")}` : `Styled(${Y(t)})`;
+}
+function se(e, n) {
+  let t;
+  return process.env.NODE_ENV !== "production" && e && (t = `${e}-${D(n || "Root")}`), t;
+}
+function oe(e) {
+  for (const n in e)
+    return !1;
+  return !0;
+}
+function ie(e) {
+  return typeof e == "string" && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  e.charCodeAt(0) > 96;
+}
+function D(e) {
+  return e && e.charAt(0).toLowerCase() + e.slice(1);
+}
+function ue(e) {
+  return e !== "ownerState" && e !== "theme" && e !== "sx" && e !== "as";
+}
+const fe = (e) => ue(e) && e !== "classes", ye = ne({
+  themeId: q,
+  defaultTheme: N,
+  rootShouldForwardProp: fe
+});
+export {
+  ue as a,
+  $ as b,
+  ne as c,
+  Z as p,
+  fe as r,
+  ye as s
+};