@solostylist/ui-kit 1.0.164 → 1.0.165

package/README.md

@@ -1,13 +1,13 @@
-## Installation
-
-You can install it with npm:
-
-```bash
-npm i @solostylist/ui-kit
-```
-
-## Usage
-
-```javascript
-import { STextField } from '@solostylist/ui-kit';
-```
+## Installation
+
+You can install it with npm:
+
+```bash
+npm i @solostylist/ui-kit
+```
+
+## Usage
+
+```javascript
+import { STextField } from '@solostylist/ui-kit';
+```

package/dist/main.d.ts

@@ -111,6 +111,8 @@ export { default as SLazyImage } from './s-lazy-image/index';
 export type { SLazyImageProps } from './s-lazy-image/index';
 export { default as SImageComparison } from './s-image-comparison/index';
 export type { SImageComparisonProps } from './s-image-comparison/index';
+export { default as SZoomImage } from './s-zoom-image/index';
+export type { SZoomImageProps } from './s-zoom-image/index';
 export { default as SItemNotFound } from './s-item-not-found/index';
 export type { SItemNotFoundProps } from './s-item-not-found/index';
 export { default as SCategoryCard } from './s-category-card/index';

package/dist/main.js

@@ -9,18 +9,18 @@ import { default as T } from "./s-carousel/s-carousel.js";
 import { default as P } from "./s-chat-input/s-chat-input.js";
 import { default as b } from "./s-chat-message/s-chat-message.js";
 import { default as y } from "./s-comment-message/s-comment-message.js";
-import { default as M } from "./s-text-editor/s-text-editor.js";
+import { default as I } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
-import { default as I } from "./s-checkbox/s-checkbox.js";
+import { default as h } from "./s-checkbox/s-checkbox.js";
 import { default as B } from "./s-chip/s-chip.js";
 import { default as w } from "./s-chips/s-chips.js";
 import { default as E } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as R, default as G, useDialogConfirm as N } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as j, default as V, useDialogMessage as q } from "./s-dialog-message/s-dialog-message.js";
-import { default as J } from "./s-error/s-error.js";
-import { default as Q } from "./s-empty/s-empty.js";
-import { default as W } from "./s-flex-box/s-flex-box.js";
-import { default as Y } from "./s-two-pane-layout/s-two-pane-layout.js";
+import { DialogMessageProvider as j, default as V, useDialogMessage as Z } from "./s-dialog-message/s-dialog-message.js";
+import { default as H } from "./s-error/s-error.js";
+import { default as K } from "./s-empty/s-empty.js";
+import { default as U } from "./s-flex-box/s-flex-box.js";
+import { default as X } from "./s-two-pane-layout/s-two-pane-layout.js";
 import { default as _ } from "./s-dialog/s-dialog.js";
 import { default as ee } from "./s-error-layout/s-error-layout.js";
 import { default as re } from "./s-file-dropzone/s-file-dropzone.js";
@@ -35,17 +35,17 @@ import { default as Te } from "./s-text-field/s-text-field.js";
 import { default as Pe } from "./s-pagination/s-pagination.js";
 import { default as be } from "./s-select/s-select.js";
 import { default as ye } from "./s-select-list/s-select-list.js";
-import { default as Me } from "./s-skeleton/s-skeleton.js";
-import { default as Ie } from "./s-tip/s-tip.js";
+import { default as Ie } from "./s-skeleton/s-skeleton.js";
+import { default as he } from "./s-tip/s-tip.js";
 import { default as Be } from "./s-text-truncation/s-text-truncation.js";
 import { default as we, SnackbarMessageProvider as Ae, useSnackbarMessage as Ee } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as Re } from "./s-form/s-form.js";
 import { SStripeCVC as Ne, SStripeExpiry as Oe, SStripeNumber as je, StripeTextField as Ve } from "./s-stripe/s-stripe.js";
-import { default as He } from "./s-theme-provider/s-theme-provider.js";
-import { default as Ke } from "./s-theme-switch/s-theme-switch.js";
-import { default as Ue } from "./s-datetime-picker/s-datetime-picker.js";
-import { default as Xe } from "./s-date-picker/s-date-picker.js";
-import { default as Ze } from "./s-localization-provider/s-localization-provider.js";
+import { default as qe } from "./s-theme-provider/s-theme-provider.js";
+import { default as Je } from "./s-theme-switch/s-theme-switch.js";
+import { default as Qe } from "./s-datetime-picker/s-datetime-picker.js";
+import { default as We } from "./s-date-picker/s-date-picker.js";
+import { default as Ye } from "./s-localization-provider/s-localization-provider.js";
 import { default as $e } from "./s-gradient-icon/s-gradient-icon.js";
 import { default as oo } from "./s-glow-button/s-glow-button.js";
 import { default as ao } from "./s-moving-border/s-moving-border.js";
@@ -56,32 +56,33 @@ import { MediaItem as So, default as xo } from "./s-gallery/s-gallery.js";
 import { default as no } from "./s-image-modal/s-image-modal.js";
 import { default as co } from "./s-lazy-image/s-lazy-image.js";
 import { default as Co } from "./s-image-comparison/s-image-comparison.js";
-import { default as vo } from "./s-item-not-found/s-item-not-found.js";
-import { default as Lo } from "./s-category-card/s-category-card.js";
-import { default as Do } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as ho } from "./s-rating/s-rating.js";
-import { default as ko } from "./s-review/s-review.js";
-import { default as Fo } from "./s-tabs/s-tabs.js";
-import { default as Ao } from "./s-tabs/s-tab.js";
-import { default as zo } from "./s-tabs/s-tab-panel.js";
-import { default as Go } from "./s-text-shimmer/s-text-shimmer.js";
-import { default as Oo } from "./s-typewriter-text/s-typewriter-text.js";
-import { SLanguagePopover as Vo, default as qo, defaultLanguageOptions as Ho } from "./s-language-switcher/s-language-switcher.js";
-import { default as Ko } from "./s-scroll-to-top/s-scroll-to-top.js";
-import { useDialog as Uo } from "./hooks/use-dialog.js";
-import { usePopover as Xo } from "./hooks/use-popover.js";
+import { default as vo } from "./s-zoom-image/s-zoom-image.js";
+import { default as Lo } from "./s-item-not-found/s-item-not-found.js";
+import { default as Do } from "./s-category-card/s-category-card.js";
+import { default as Mo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as ko } from "./s-rating/s-rating.js";
+import { default as Fo } from "./s-review/s-review.js";
+import { default as Ao } from "./s-tabs/s-tabs.js";
+import { default as zo } from "./s-tabs/s-tab.js";
+import { default as Go } from "./s-tabs/s-tab-panel.js";
+import { default as Oo } from "./s-text-shimmer/s-text-shimmer.js";
+import { default as Vo } from "./s-typewriter-text/s-typewriter-text.js";
+import { SLanguagePopover as qo, default as Ho, defaultLanguageOptions as Jo } from "./s-language-switcher/s-language-switcher.js";
+import { default as Qo } from "./s-scroll-to-top/s-scroll-to-top.js";
+import { useDialog as Wo } from "./hooks/use-dialog.js";
+import { usePopover as Yo } from "./hooks/use-popover.js";
 import "react";
-import { useScrollAnimation as Zo } from "./hooks/use-scroll-animation.js";
-import { useIsPassedPosition as $o } from "./hooks/use-is-passed-position.js";
-import { formatDatePosted as or } from "./utils/dayjs.js";
-import { bytesToSize as ar } from "./utils/bytes-to-size.js";
-import { LogLevel as fr, Logger as lr, createLogger as sr, logger as mr } from "./utils/logger.js";
-import { default as ur } from "dayjs";
+import { useScrollAnimation as $o } from "./hooks/use-scroll-animation.js";
+import { useIsPassedPosition as or } from "./hooks/use-is-passed-position.js";
+import { formatDatePosted as ar } from "./utils/dayjs.js";
+import { bytesToSize as fr } from "./utils/bytes-to-size.js";
+import { LogLevel as sr, Logger as mr, createLogger as pr, logger as ur } from "./utils/logger.js";
+import { default as dr } from "dayjs";
 export {
   R as DialogConfirmProvider,
   j as DialogMessageProvider,
-  fr as LogLevel,
-  lr as Logger,
+  sr as LogLevel,
+  mr as Logger,
   So as MediaItem,
   t as SAccordion,
   l as SActionOverlay,
@@ -91,26 +92,26 @@ export {
   i as SButton,
   g as SButtonLink,
   T as SCarousel,
-  Lo as SCategoryCard,
+  Do as SCategoryCard,
   P as SChatInput,
   b as SChatMessage,
-  I as SCheckbox,
+  h as SCheckbox,
   B as SChip,
   w as SChips,
   y as SCommentMessage,
   po as SCopyableText,
   E as SDataTable,
-  Xe as SDatePicker,
-  Ue as SDateTimePicker,
+  We as SDatePicker,
+  Qe as SDateTimePicker,
   _ as SDialog,
   G as SDialogConfirm,
   V as SDialogMessage,
-  Q as SEmpty,
-  J as SError,
+  K as SEmpty,
+  H as SError,
   ee as SErrorLayout,
   re as SFileDropzone,
   te as SFileIcon,
-  W as SFlexBox,
+  U as SFlexBox,
   Re as SForm,
   xo as SGallery,
   oo as SGlowButton,
@@ -119,55 +120,56 @@ export {
   me as SIconButton,
   Co as SImageComparison,
   no as SImageModal,
-  vo as SItemNotFound,
+  Lo as SItemNotFound,
   ue as SLabel,
-  Vo as SLanguagePopover,
-  qo as SLanguageSwitcher,
+  qo as SLanguagePopover,
+  Ho as SLanguageSwitcher,
   co as SLazyImage,
-  Ze as SLocalizationProvider,
+  Ye as SLocalizationProvider,
   ao as SMovingBorder,
   de as SMultiSelect,
   ie as SNoSsr,
   ge as SOverlayScrollbar,
   Pe as SPagination,
-  Do as SRadialPulseAnimate,
-  ho as SRating,
-  ko as SReview,
+  Mo as SRadialPulseAnimate,
+  ko as SRating,
+  Fo as SReview,
   fo as SScrollReveal,
-  Ko as SScrollToTop,
+  Qo as SScrollToTop,
   be as SSelect,
   ye as SSelectList,
-  Me as SSkeleton,
+  Ie as SSkeleton,
   we as SSnackbarMessage,
   so as SSpotlightCursor,
   Ne as SStripeCVC,
   Oe as SStripeExpiry,
   je as SStripeNumber,
-  Ao as STab,
-  zo as STabPanel,
-  Fo as STabs,
-  M as STextEditor,
+  zo as STab,
+  Go as STabPanel,
+  Ao as STabs,
+  I as STextEditor,
   Te as STextField,
-  Go as STextShimmer,
+  Oo as STextShimmer,
   Be as STextTruncation,
-  He as SThemeProvider,
-  Ke as SThemeSwitch,
-  Ie as STip,
-  Y as STwoPaneLayout,
-  Oo as STypewriterText,
+  qe as SThemeProvider,
+  Je as SThemeSwitch,
+  he as STip,
+  X as STwoPaneLayout,
+  Vo as STypewriterText,
+  vo as SZoomImage,
   Ae as SnackbarMessageProvider,
   Ve as StripeTextField,
-  ar as bytesToSize,
-  sr as createLogger,
-  ur as dayjs,
-  Ho as defaultLanguageOptions,
-  or as formatDatePosted,
-  mr as logger,
-  Uo as useDialog,
+  fr as bytesToSize,
+  pr as createLogger,
+  dr as dayjs,
+  Jo as defaultLanguageOptions,
+  ar as formatDatePosted,
+  ur as logger,
+  Wo as useDialog,
   N as useDialogConfirm,
-  q as useDialogMessage,
-  $o as useIsPassedPosition,
-  Xo as usePopover,
-  Zo as useScrollAnimation,
+  Z as useDialogMessage,
+  or as useIsPassedPosition,
+  Yo as usePopover,
+  $o as useScrollAnimation,
   Ee as useSnackbarMessage
 };

package/dist/s-accordion/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-action-overlay/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-avatar/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-blur-text/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-breadcrumbs/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-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-carousel/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-category-card/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-chat-input/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-chip/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-comment-message/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-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
+}

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

@@ -71,5 +71,5 @@ export interface SLazyImageProps extends React.ImgHTMLAttributes<HTMLImageElemen
  * />
  * ```
  */
-declare const SLazyImage: ({ src, variant, height, width, style, minWidth, minHeight, ...props }: SLazyImageProps) => React.JSX.Element;
+declare const SLazyImage: ({ src, variant, height, width, style, minWidth, minHeight, onLoad, ...props }: SLazyImageProps) => React.JSX.Element;
 export default SLazyImage;

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

@@ -1,65 +1,66 @@
-import { j as a } from "../jsx-runtime-OVHDjVDe.js";
-import { useId as i, useState as f } from "react";
-import { useTheme as j, Box as m, Skeleton as L } from "@mui/material";
-const I = ({
-  src: n,
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { useId as j, useState as b } from "react";
+import { useTheme as k, Box as n, Skeleton as y } from "@mui/material";
+const g = ({
+  src: c,
   variant: e = "rounded",
-  height: o = "100%",
-  width: s = "100%",
-  style: r,
-  minWidth: d = "auto",
-  minHeight: t = "auto",
-  ...c
+  height: s = "100%",
+  width: o = "100%",
+  style: u,
+  minWidth: a = "auto",
+  minHeight: m = "auto",
+  onLoad: r,
+  ...l
 }) => {
-  const l = i(), p = j(), [u, x] = f(!1);
+  const p = j(), x = k(), [d, i] = b(!1);
   return (
     // Container box maintains consistent dimensions throughout the loading process
     // This prevents layout shifts and provides stable positioning for both skeleton and image
-    /* @__PURE__ */ a.jsxs(m, { height: o, width: s, children: [
-      !u && /* @__PURE__ */ a.jsx(
-        L,
+    /* @__PURE__ */ t.jsxs(n, { height: s, width: o, children: [
+      !d && /* @__PURE__ */ t.jsx(
+        y,
         {
           variant: e,
-          id: `image-skeleton-${l}`,
+          id: `image-skeleton-${p}`,
           animation: "wave",
           style: {
-            height: o,
-            width: s,
-            minWidth: d,
-            minHeight: t,
-            ...r
+            height: s,
+            width: o,
+            minWidth: a,
+            minHeight: m,
+            ...u
             // User styles applied to skeleton for consistency
           }
         }
       ),
-      /* @__PURE__ */ a.jsx(
-        m,
+      /* @__PURE__ */ t.jsx(
+        n,
         {
           component: "img",
-          src: n,
+          src: c,
           style: {
-            height: o,
-            width: s,
-            minWidth: d,
-            minHeight: t,
+            height: s,
+            width: o,
+            minWidth: a,
+            minHeight: m,
             // Performance optimization: display toggling instead of opacity transitions
             // This approach reduces GPU usage and improves rendering performance
-            display: u ? "block" : "none",
+            display: d ? "block" : "none",
             // Theme-aware border radius calculation for consistent styling
             // Matches Material-UI skeleton variants with proper theme integration
-            borderRadius: e === "circular" ? "50%" : e === "rounded" ? p.shape.borderRadius : "0px",
-            ...r
+            borderRadius: e === "circular" ? "50%" : e === "rounded" ? x.shape.borderRadius : "0px",
+            ...u
             // User-provided styles override defaults
           },
-          onLoad: () => {
-            x(!0);
+          onLoad: (f) => {
+            i(!0), r == null || r(f);
           },
-          ...c
+          ...l
         }
       )
     ] })
   );
 };
 export {
-  I as default
+  g as default
 };

package/dist/s-radial-pulse-animate/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-rating/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-review/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-scroll-reveal/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "@solostylist/ui-kit/s-scroll-reveal",
-  "main": "./index.ts",
-  "module": "./index.ts",
-  "types": "./index.ts"
+{
+  "name": "@solostylist/ui-kit/s-scroll-reveal",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts"
 }

package/dist/s-scroll-to-top/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-tabs/package.json

@@ -1,4 +1,4 @@
-{
-  "name": "s-tabs",
-  "main": "./index.ts"
+{
+  "name": "s-tabs",
+  "main": "./index.ts"
 }

package/dist/s-text-shimmer/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-theme-demo/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-theme-switch/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-typewriter-text/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "@solostylist/ui-kit/s-typewriter-text",
-  "main": "./index.ts",
-  "module": "./index.ts",
-  "types": "./index.ts"
+{
+  "name": "@solostylist/ui-kit/s-typewriter-text",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts"
 }

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

@@ -0,0 +1,2 @@
+export { default } from './s-zoom-image';
+export type { SZoomImageProps } from './s-zoom-image';

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

@@ -0,0 +1,4 @@
+import { default as o } from "./s-zoom-image.js";
+export {
+  o as default
+};

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

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

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

@@ -0,0 +1,64 @@
+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.
+ */
+export interface SZoomImageProps extends Omit<BoxProps, 'component'> {
+    /** Image source URL - the image to display and zoom */
+    src: string;
+    /** Alternative text for the image, for accessibility and screen readers */
+    alt: string;
+    /** The scale factor to apply on zoom - controls how much the image enlarges on hover */
+    zoomScale?: number;
+    /** The duration of the spring animation in seconds - affects zoom speed */
+    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.)
+     */
+    borderRadius?: number | string;
+    /** Custom styles applied to the image element */
+    imgStyle?: React.CSSProperties;
+    /** Custom class name for the image element */
+    imgClassName?: string;
+    /** Skeleton variant while loading */
+    skeletonVariant?: SkeletonProps['variant'];
+    /** Image height - supports responsive units, useful for lazy loading skeleton */
+    height?: number | string;
+    /** Image width - supports responsive units, useful 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
+ */
+declare const SZoomImage: React.ForwardRefExoticComponent<Omit<SZoomImageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SZoomImage;

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

@@ -0,0 +1,87 @@
+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(
+  ({
+    src: d,
+    alt: u,
+    zoomScale: l = 1.2,
+    transitionDuration: f = 0.3,
+    borderRadius: g = 1.5,
+    imgStyle: h,
+    imgClassName: p,
+    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);
+    };
+    return /* @__PURE__ */ n.jsx(
+      r,
+      {
+        ref: L,
+        onMouseMove: I,
+        onMouseLeave: X,
+        sx: {
+          position: "relative",
+          width: "100%",
+          height: "auto",
+          overflow: "hidden",
+          borderRadius: g,
+          ...j
+        },
+        ...y,
+        children: /* @__PURE__ */ n.jsx(
+          r,
+          {
+            component: Z.div,
+            style: {
+              transformOrigin: b
+            },
+            animate: { scale: 1 },
+            whileHover: i ? { scale: l } : { scale: 1 },
+            transition: {
+              type: "spring",
+              duration: f,
+              bounce: 0
+            },
+            children: /* @__PURE__ */ n.jsx(
+              _,
+              {
+                src: d,
+                alt: u,
+                variant: v,
+                height: M,
+                width: x,
+                className: p,
+                style: {
+                  objectFit: "cover",
+                  display: "block",
+                  borderRadius: "inherit",
+                  ...h
+                },
+                onLoad: () => w(!0)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+$.displayName = "SZoomImage";
+export {
+  $ as default
+};

package/package.json

@@ -1,114 +1,114 @@
-{
-  "name": "@solostylist/ui-kit",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "version": "1.0.164",
-  "description": "advanced ui kit for solostylist",
-  "private": false,
-  "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
-    "build:docs": "vite build --config vite.docs.config.ts",
-    "build:lib": "tsc --p ./tsconfig-build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint --fix . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "app:publish": "npm run build:lib && npm publish --access public",
-    "format:write": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
-    "prepare": "husky"
-  },
-  "peerDependencies": {
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@fontsource/outfit": "^5.2.6",
-    "@mui/icons-material": "7.3.2",
-    "@mui/lab": "7.0.0-beta.17",
-    "@mui/material": "7.3.2",
-    "@mui/utils": "7.3.2",
-    "@mui/x-date-pickers": "8.12.0",
-    "@stripe/react-stripe-js": "^3.7.0",
-    "@stripe/stripe-js": "^7.3.1",
-    "@tiptap/extension-link": "^2.11.9",
-    "@tiptap/extension-placeholder": "^2.11.9",
-    "@tiptap/react": "^2.11.9",
-    "@tiptap/starter-kit": "^2.11.9",
-    "dayjs": "^1.11.13",
-    "emoji-picker-react": "^4.13.3",
-    "framer-motion": "^12.23.3",
-    "i18next": "^25.0.2",
-    "i18next-http-backend": "^3.0.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-dropzone": "^14.3.8",
-    "react-i18next": "^15.5.1",
-    "react-router-dom": "^7.8.2",
-    "react-slick": "^0.31.0",
-    "slick-carousel": "^1.8.1",
-    "uuid": "^11.1.0",
-    "overlayscrollbars-react": "^0.5.6"
-  },
-  "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
-    "@types/node": "^22.15.30",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.6",
-    "@types/react-slick": "^0.23.13",
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.33.1",
-    "@vitejs/plugin-react": "^4.5.1",
-    "eslint": "^9.28.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "glob": "^11.0.2",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.0",
-    "prettier": "^3.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "vite-plugin-static-copy": "^3.0.0"
-  },
-  "lint-staged": {
-    "*.js": [
-      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
-      "git add"
-    ],
-    "*.jsx": [
-      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
-      "git add"
-    ],
-    "*.ts": [
-      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
-      "git add"
-    ],
-    "*.tsx": [
-      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "directories": {
-    "lib": "lib"
-  },
-  "keywords": [],
-  "author": "Lê Đặng Trường Đạt",
-  "license": "ISC"
+{
+  "name": "@solostylist/ui-kit",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "version": "1.0.165",
+  "description": "advanced ui kit for solostylist",
+  "private": false,
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build:docs": "vite build --config vite.docs.config.ts",
+    "build:lib": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "app:publish": "npm run build:lib && npm publish --access public",
+    "format:write": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
+    "format:check": "prettier --check \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/outfit": "^5.2.6",
+    "@mui/icons-material": "7.3.2",
+    "@mui/lab": "7.0.0-beta.17",
+    "@mui/material": "7.3.2",
+    "@mui/utils": "7.3.2",
+    "@mui/x-date-pickers": "8.12.0",
+    "@stripe/react-stripe-js": "^3.7.0",
+    "@stripe/stripe-js": "^7.3.1",
+    "@tiptap/extension-link": "^2.11.9",
+    "@tiptap/extension-placeholder": "^2.11.9",
+    "@tiptap/react": "^2.11.9",
+    "@tiptap/starter-kit": "^2.11.9",
+    "dayjs": "^1.11.13",
+    "emoji-picker-react": "^4.13.3",
+    "framer-motion": "^12.23.3",
+    "i18next": "^25.0.2",
+    "i18next-http-backend": "^3.0.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-i18next": "^15.5.1",
+    "react-router-dom": "^7.8.2",
+    "react-slick": "^0.31.0",
+    "slick-carousel": "^1.8.1",
+    "uuid": "^11.1.0",
+    "overlayscrollbars-react": "^0.5.6"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
+    "@types/node": "^22.15.30",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-slick": "^0.23.13",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
+    "@vitejs/plugin-react": "^4.5.1",
+    "eslint": "^9.28.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "glob": "^11.0.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-static-copy": "^3.0.0"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
+      "git add"
+    ],
+    "*.jsx": [
+      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
+      "git add"
+    ],
+    "*.ts": [
+      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
+      "git add"
+    ],
+    "*.tsx": [
+      "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "keywords": [],
+  "author": "Lê Đặng Trường Đạt",
+  "license": "ISC"
 }