@solostylist/ui-kit 1.0.167 → 1.0.168

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

@@ -1,4 +1,12 @@
-import { default as o } from "./s-zoom-image.js";
+import { SZoomImage as r } from "./s-zoom-image.js";
+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" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", 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 {
+  SZoomImageProps.displayName = "SZoomImageProps", SZoomImageProps.__docgenInfo = { description: "Props interface for SZoomImage component", displayName: "SZoomImageProps", props: {} };
+} catch {
+}
 export {
-  o as default
+  r as default
 };

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

@@ -1,25 +1,18 @@
 import { default as React } from 'react';
 import { BoxProps, SkeletonProps } from '@mui/material';
 /**
- * Props interface for SZoomImage component with advanced zoom capabilities
- *
- * Extends Material-UI Box props while providing configuration for zoom behavior,
- * animation settings, transform origin tracking based on mouse position, and lazy loading.
+ * Props interface for SZoomImage component
  */
 export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
-    /** Image source URL - the image to display and zoom */
+    /** Image source URL */
     src: string;
-    /** Alternative text for the image, for accessibility and screen readers */
+    /** Alternative text for accessibility */
     alt: string;
-    /** The scale factor to apply on zoom - controls how much the image enlarges on hover */
+    /** Scale factor to apply on zoom */
     zoomScale?: number;
-    /** The duration of the spring animation in seconds - affects zoom speed */
+    /** Duration of the spring animation in seconds */
     transitionDuration?: number;
-    /**
-     * The border radius of the component
-     * - number: multiplied by theme spacing (default 8px), e.g., 2 = 16px
-     * - string: any valid CSS unit ('1rem', '8px', '50%', etc.)
-     */
+    /** Border radius (number uses theme spacing, string accepts any CSS unit) */
     borderRadius?: number | string;
     /** Custom styles applied to the image element */
     imgStyle?: React.CSSProperties;
@@ -27,38 +20,13 @@ export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
     imgClassName?: string;
     /** Skeleton variant while loading */
     skeletonVariant?: SkeletonProps['variant'];
-    /** Image height - supports responsive units, useful for lazy loading skeleton */
+    /** Image height for lazy loading skeleton */
     height?: number | string;
-    /** Image width - supports responsive units, useful for lazy loading skeleton */
+    /** Image width for lazy loading skeleton */
     width?: number | string;
 }
 /**
- * SZoomImage - An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.
- *
- * This component creates an engaging user experience by zooming the image on hover
- * with the zoom origin following the mouse cursor position. Built with framer-motion
- * for smooth, physics-based animations and proper Material-UI integration. Integrates
- * with SLazyImage for skeleton loading states to improve perceived performance.
- *
- * Key features:
- * - **Mouse-Tracked Zoom**: Zoom origin dynamically follows cursor position for natural interaction
- * - **Spring Physics**: Smooth, natural animations using configurable spring physics
- * - **Lazy Loading**: Built-in skeleton placeholder while image loads for better UX
- * - **Theme Integration**: Full Material-UI Box component integration with sx prop support
- * - **Responsive Design**: Works seamlessly across different viewport sizes
- * - **Performance Optimized**: Uses GPU-accelerated transforms and efficient motion values
- * - **Customizable Behavior**: Configurable zoom scale, animation duration, and border radius
- * - **Accessibility Ready**: Maintains proper alt text and image semantics
- *
- * Technical implementation:
- * - Uses framer-motion's useMotionValue for efficient mouse position tracking
- * - Applies useSpring for smooth, natural transitions with configurable physics
- * - Leverages useTransform to calculate dynamic transform-origin based on mouse position
- * - Implements proper overflow handling to contain zoomed image within container
- * - Integrates SLazyImage for optimized loading with skeleton placeholders
- *
- * @param props - SZoomImageProps configuration object
- * @returns JSX.Element - Interactive zoom image component with hover effects
+ * An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.
  */
-declare const SZoomImage: React.ForwardRefExoticComponent<Omit<SZoomImageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SZoomImage: React.ForwardRefExoticComponent<Omit<SZoomImageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SZoomImage;

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

@@ -1,78 +1,79 @@
-import { j as n } from "../jsx-runtime-OVHDjVDe.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(
+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(
   ({
-    src: d,
-    alt: u,
-    zoomScale: l = 1.2,
-    transitionDuration: f = 0.3,
-    borderRadius: g = 1.5,
-    imgStyle: h,
-    imgClassName: p,
+    src: a,
+    alt: c,
+    zoomScale: p = 1.2,
+    transitionDuration: g = 0.3,
+    borderRadius: f = 1.5,
+    imgStyle: y,
+    imgClassName: h,
     skeletonVariant: v = "rounded",
-    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);
+    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);
     };
-    return /* @__PURE__ */ n.jsx(
-      r,
+    return /* @__PURE__ */ r.jsx(
+      u,
       {
-        ref: L,
-        onMouseMove: I,
-        onMouseLeave: X,
+        ref: z,
+        onMouseMove: x,
+        onMouseLeave: k,
         sx: {
           position: "relative",
           width: "100%",
           height: "auto",
           overflow: "hidden",
-          borderRadius: g,
-          ...j
+          borderRadius: f,
+          ...b
         },
-        ...y,
-        children: /* @__PURE__ */ n.jsx(
-          r,
+        ...q,
+        children: /* @__PURE__ */ r.jsx(
+          u,
           {
-            component: Z.div,
+            component: A.div,
             style: {
-              transformOrigin: b
+              transformOrigin: I
             },
             animate: { scale: 1 },
-            whileHover: i ? { scale: l } : { scale: 1 },
+            whileHover: l ? { scale: p } : { scale: 1 },
             transition: {
               type: "spring",
-              duration: f,
+              duration: g,
               bounce: 0
             },
-            children: /* @__PURE__ */ n.jsx(
-              _,
+            children: /* @__PURE__ */ r.jsx(
+              B,
               {
-                src: d,
-                alt: u,
+                src: a,
+                alt: c,
                 variant: v,
-                height: M,
-                width: x,
-                className: p,
+                height: S,
+                width: V,
+                className: h,
                 style: {
                   objectFit: "cover",
                   display: "block",
                   borderRadius: "inherit",
-                  ...h
+                  ...y
                 },
-                onLoad: () => w(!0)
+                onLoad: () => _(!0)
               }
             )
           }
@@ -81,7 +82,16 @@ const $ = H.forwardRef(
     );
   }
 );
-$.displayName = "SZoomImage";
+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" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", 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" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", 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 {
+}
 export {
-  $ as default
+  o as SZoomImage,
+  o as default
 };