@dmsi/wedgekit-react 0.0.388 → 0.0.389

package/dist/components/PDFViewer/PDFNavigation.cjs

@@ -541,7 +541,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -580,9 +581,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -609,7 +611,9 @@ var Stack = (_a) => {
         borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
         marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
         zIndex: zIndex !== void 0 ? zIndex : void 0,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx6.default)(
         "scrollbar-thin",

package/dist/components/PDFViewer/PDFNavigation.js

@@ -1,11 +1,11 @@
 import {
   PdfNavigation
-} from "../../chunk-BPJR54VM.js";
+} from "../../chunk-2HMCS25C.js";
 import "../../chunk-EU73QPW7.js";
-import "../../chunk-WWAPK5PH.js";
+import "../../chunk-GB4ZTUQV.js";
 import "../../chunk-OGIFIPKH.js";
-import "../../chunk-MX57T3HP.js";
 import "../../chunk-NKUETCDA.js";
+import "../../chunk-WWAPK5PH.js";
 import "../../chunk-6CTCHYIS.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/PDFViewer/index.cjs

@@ -996,7 +996,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -1035,9 +1036,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1064,7 +1066,9 @@ var Stack = (_a) => {
         borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
         marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
         zIndex: zIndex !== void 0 ? zIndex : void 0,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx10.default)(
         "scrollbar-thin",

package/dist/components/PDFViewer/index.js

@@ -1,27 +1,27 @@
 "use client";
 import {
   PDFViewer
-} from "../../chunk-2XHBPMHQ.js";
-import "../../chunk-XFZRKXMV.js";
-import "../../chunk-DCCTNHNL.js";
-import "../../chunk-BPJR54VM.js";
+} from "../../chunk-LLZ3SSZJ.js";
+import "../../chunk-EJSPFQCY.js";
+import "../../chunk-ERW5DEIO.js";
+import "../../chunk-2HMCS25C.js";
 import "../../chunk-VJVY6NPF.js";
-import "../../chunk-E4AGWXFA.js";
+import "../../chunk-D6YCMQPO.js";
 import "../../chunk-4RJKB7LC.js";
-import "../../chunk-EC7SC3MO.js";
-import "../../chunk-AG43RS4Q.js";
-import "../../chunk-5OPI4GTJ.js";
+import "../../chunk-XM7IQHBU.js";
 import "../../chunk-FRHPFACM.js";
+import "../../chunk-T36HX6QY.js";
+import "../../chunk-AG43RS4Q.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-EU73QPW7.js";
-import "../../chunk-WWAPK5PH.js";
 import "../../chunk-MYKYZHEO.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-TYTD4FLW.js";
 import "../../chunk-5UH6QUFB.js";
+import "../../chunk-GB4ZTUQV.js";
 import "../../chunk-OGIFIPKH.js";
-import "../../chunk-MX57T3HP.js";
 import "../../chunk-NKUETCDA.js";
+import "../../chunk-WWAPK5PH.js";
 import "../../chunk-6CTCHYIS.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/ProductImagePreview/ProductPrimaryImage.cjs

@@ -143,7 +143,7 @@ function ProductPrimaryImage({
   }, [zoomEnabled, onZoomPositionChange]);
   const handlePointerMove = (0, import_react2.useCallback)(
     (e) => {
-      if (!zoomEnabled || !active) return;
+      if (!zoomEnabled || !active || imageError) return;
       if (e.pointerType === "touch") return;
       const el = containerRef.current;
       if (!el) return;
@@ -175,7 +175,7 @@ function ProductPrimaryImage({
         true
       );
     },
-    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
   );
   (0, import_react2.useEffect)(() => {
     const container = containerRef.current;
@@ -192,6 +192,10 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  (0, import_react2.useEffect)(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [image]);
   if (!image && !isPlaceholder) return null;
   const pt = lastPointRef.current;
   let lensStyle;
@@ -215,7 +219,13 @@ function ProductPrimaryImage({
         zoomEnabled ? "cursor-crosshair" : "",
         className
       ].join(" "),
-      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      style: {
+        maxWidth: width,
+        maxHeight: height,
+        minWidth: width,
+        minHeight: height,
+        aspectRatio: "1 / 1"
+      },
       onPointerEnter: handlePointerEnter,
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
@@ -224,9 +234,9 @@ function ProductPrimaryImage({
         isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "img",
           {
-            src: imageSrc,
+            src: imageError ? "/placeholder.svg" : imageSrc,
             alt: (image == null ? void 0 : image.alt) || "Product image",
-            className: "object-cover w-full h-full select-none",
+            className: "object-cover min-w-full min-h-full select-none",
             draggable: false,
             loading: "lazy",
             onLoad: () => setImageLoading(false),

package/dist/components/ProductImagePreview/ProductPrimaryImage.js

@@ -1,6 +1,6 @@
 import {
   ProductPrimaryImage
-} from "../../chunk-CQFPNZTN.js";
+} from "../../chunk-G5DEC7H3.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-ORMEWXMH.js";

package/dist/components/ProductImagePreview/Thumbnail.cjs

@@ -40,6 +40,7 @@ __export(Thumbnail_exports, {
   Thumbnail: () => Thumbnail
 });
 module.exports = __toCommonJS(Thumbnail_exports);
+var import_react2 = require("react");
 
 // src/components/ImagePlaceholder.tsx
 var import_react = require("react");
@@ -73,6 +74,7 @@ function Thumbnail({
   onClick,
   isPlaceholder = false
 }) {
+  const [imageError, setImageError] = (0, import_react2.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
@@ -89,11 +91,14 @@ function Thumbnail({
       children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "img",
         {
-          src,
+          src: imageError ? "/placeholder.svg" : src,
           alt,
           className: "object-cover w-full h-full select-none",
           draggable: false,
-          loading: "lazy"
+          loading: "lazy",
+          onError: () => {
+            setImageError(true);
+          }
         }
       )
     }

package/dist/components/ProductImagePreview/Thumbnail.js

@@ -1,6 +1,6 @@
 import {
   Thumbnail
-} from "../../chunk-HPQWEZJL.js";
+} from "../../chunk-3X3Y4TMS.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/ProductImagePreview/index.cjs

@@ -63,6 +63,9 @@ __export(ProductImagePreview_exports, {
 });
 module.exports = __toCommonJS(ProductImagePreview_exports);
 
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_react2 = require("react");
+
 // src/components/ImagePlaceholder.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -95,6 +98,7 @@ function Thumbnail({
   onClick,
   isPlaceholder = false
 }) {
+  const [imageError, setImageError] = (0, import_react2.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
@@ -111,11 +115,14 @@ function Thumbnail({
       children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "img",
         {
-          src,
+          src: imageError ? "/placeholder.svg" : src,
           alt,
           className: "object-cover w-full h-full select-none",
           draggable: false,
-          loading: "lazy"
+          loading: "lazy",
+          onError: () => {
+            setImageError(true);
+          }
         }
       )
     }
@@ -320,7 +327,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -359,9 +367,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -388,7 +397,9 @@ var Stack = (_a) => {
         borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
         marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
         zIndex: zIndex !== void 0 ? zIndex : void 0,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx2.default)(
         "scrollbar-thin",
@@ -436,7 +447,7 @@ var Stack = (_a) => {
 };
 
 // src/components/Grid.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_clsx3 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var COLUMNS_WITH_SIDE_MENU_MAP = {
@@ -505,7 +516,7 @@ var Grid = ({
   testid,
   style
 }) => {
-  const childCount = import_react2.Children.count(children);
+  const childCount = import_react3.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
@@ -530,7 +541,7 @@ var Grid = ({
 };
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -576,14 +587,14 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  const containerRef = (0, import_react3.useRef)(null);
-  const lastPointRef = (0, import_react3.useRef)(null);
-  const rafRef = (0, import_react3.useRef)(null);
-  const [active, setActive] = (0, import_react3.useState)(false);
-  const [, forceRerender] = (0, import_react3.useState)(0);
-  const [imageLoading, setImageLoading] = (0, import_react3.useState)(true);
-  const [imageError, setImageError] = (0, import_react3.useState)(false);
-  const imageSrc = (0, import_react3.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const containerRef = (0, import_react4.useRef)(null);
+  const lastPointRef = (0, import_react4.useRef)(null);
+  const rafRef = (0, import_react4.useRef)(null);
+  const [active, setActive] = (0, import_react4.useState)(false);
+  const [, forceRerender] = (0, import_react4.useState)(0);
+  const [imageLoading, setImageLoading] = (0, import_react4.useState)(true);
+  const [imageError, setImageError] = (0, import_react4.useState)(false);
+  const imageSrc = (0, import_react4.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   const schedule = () => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -591,7 +602,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react3.useCallback)(() => {
+  const handlePointerEnter = (0, import_react4.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -604,15 +615,15 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react3.useCallback)(() => {
+  const handlePointerLeave = (0, import_react4.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(false);
     lastPointRef.current = null;
     onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
   }, [zoomEnabled, onZoomPositionChange]);
-  const handlePointerMove = (0, import_react3.useCallback)(
+  const handlePointerMove = (0, import_react4.useCallback)(
     (e) => {
-      if (!zoomEnabled || !active) return;
+      if (!zoomEnabled || !active || imageError) return;
       if (e.pointerType === "touch") return;
       const el = containerRef.current;
       if (!el) return;
@@ -644,9 +655,9 @@ function ProductPrimaryImage({
         true
       );
     },
-    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -661,6 +672,10 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  (0, import_react4.useEffect)(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [image]);
   if (!image && !isPlaceholder) return null;
   const pt = lastPointRef.current;
   let lensStyle;
@@ -684,7 +699,13 @@ function ProductPrimaryImage({
         zoomEnabled ? "cursor-crosshair" : "",
         className
       ].join(" "),
-      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      style: {
+        maxWidth: width,
+        maxHeight: height,
+        minWidth: width,
+        minHeight: height,
+        aspectRatio: "1 / 1"
+      },
       onPointerEnter: handlePointerEnter,
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
@@ -693,9 +714,9 @@ function ProductPrimaryImage({
         isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "img",
           {
-            src: imageSrc,
+            src: imageError ? "/placeholder.svg" : imageSrc,
             alt: (image == null ? void 0 : image.alt) || "Product image",
-            className: "object-cover w-full h-full select-none",
+            className: "object-cover min-w-full min-h-full select-none",
             draggable: false,
             loading: "lazy",
             onLoad: () => setImageLoading(false),
@@ -720,7 +741,7 @@ function ProductPrimaryImage({
 }
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx4 = __toESM(require("clsx"), 1);
@@ -771,7 +792,7 @@ function ZoomWindow({
   offset = 10,
   className = ""
 }) {
-  const imageSrc = (0, import_react4.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const imageSrc = (0, import_react5.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   if (!image || !active || !pointer) return null;
   const zoomWindowSize = pointer.lensSize * scaleFactor;
   const baseW = pointer.w || width;
@@ -900,7 +921,7 @@ function CarouselPagination({
 }
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
@@ -910,15 +931,15 @@ function MobileImageCarousel({
   onChangeIndex,
   className = ""
 }) {
-  const containerRef = (0, import_react5.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const [startX, setStartX] = (0, import_react5.useState)(0);
-  const [currentTranslate, setCurrentTranslate] = (0, import_react5.useState)(0);
-  const [prevTranslate, setPrevTranslate] = (0, import_react5.useState)(0);
-  const [containerWidth, setContainerWidth] = (0, import_react5.useState)(width);
+  const containerRef = (0, import_react6.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
+  const [startX, setStartX] = (0, import_react6.useState)(0);
+  const [currentTranslate, setCurrentTranslate] = (0, import_react6.useState)(0);
+  const [prevTranslate, setPrevTranslate] = (0, import_react6.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react6.useState)(width);
   const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
   const gap = 16;
-  const getTranslateX = (0, import_react5.useCallback)(
+  const getTranslateX = (0, import_react6.useCallback)(
     (index) => {
       const containerCenter = containerWidth / 2;
       const imageCenter = imageSize / 2;
@@ -927,12 +948,12 @@ function MobileImageCarousel({
     },
     [containerWidth, imageSize, gap]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const translateX = getTranslateX(currentIndex);
     setCurrentTranslate(translateX);
     setPrevTranslate(translateX);
   }, [currentIndex, getTranslateX]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const updateContainerWidth = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -946,11 +967,11 @@ function MobileImageCarousel({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const handleStart = (0, import_react5.useCallback)((clientX) => {
+  const handleStart = (0, import_react6.useCallback)((clientX) => {
     setIsDragging(true);
     setStartX(clientX);
   }, []);
-  const handleMove = (0, import_react5.useCallback)(
+  const handleMove = (0, import_react6.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const currentPosition = clientX;
@@ -959,7 +980,7 @@ function MobileImageCarousel({
     },
     [isDragging, startX, prevTranslate]
   );
-  const handleEnd = (0, import_react5.useCallback)(() => {
+  const handleEnd = (0, import_react6.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const moved = currentTranslate - prevTranslate;
@@ -1007,7 +1028,7 @@ function MobileImageCarousel({
   const handleTouchEnd = () => {
     handleEnd();
   };
-  const handleImageClick = (0, import_react5.useCallback)(
+  const handleImageClick = (0, import_react6.useCallback)(
     (index) => {
       if (!isDragging && index !== currentIndex) {
         onChangeIndex(index);
@@ -1087,16 +1108,16 @@ function MobileImageCarousel({
 }
 
 // src/hooks/useKeydown.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/useInfiniteScroll.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/useMatchesMedia.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react8.useState)();
-  (0, import_react8.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react9.useState)();
+  (0, import_react9.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
     const listener = () => setMatches(mediaQueryList.matches);
     listener();
@@ -1108,10 +1129,10 @@ var useMatchesMedia = (query) => {
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/hooks/useTableLayout.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useProductImagePreview(props) {
   const {
     images,
@@ -1124,18 +1145,18 @@ function useProductImagePreview(props) {
   } = props;
   const hasImages = !!(images == null ? void 0 : images.length);
   const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
-  const active = (0, import_react10.useMemo)(() => {
+  const active = (0, import_react11.useMemo)(() => {
     return hasImages ? images[safeIndex] : void 0;
   }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = (0, import_react10.useState)(null);
-  const [zoomActive, setZoomActive] = (0, import_react10.useState)(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react10.useState)(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react10.useState)(null);
-  const primaryImageRef = (0, import_react10.useRef)(null);
-  const cleanupRef = (0, import_react10.useRef)(null);
+  const [zoomPoint, setZoomPoint] = (0, import_react11.useState)(null);
+  const [zoomActive, setZoomActive] = (0, import_react11.useState)(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react11.useState)(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react11.useState)(null);
+  const primaryImageRef = (0, import_react11.useRef)(null);
+  const cleanupRef = (0, import_react11.useRef)(null);
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
   const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!effectiveZoomEnabled) return;
     const setupTracking = () => {
       const element = primaryImageRef.current;
@@ -1169,24 +1190,24 @@ function useProductImagePreview(props) {
       }
     };
   }, [effectiveZoomEnabled]);
-  const handleSelect = (0, import_react10.useCallback)(
+  const handleSelect = (0, import_react11.useCallback)(
     (idx) => {
       if (idx === safeIndex) return;
       onChangeIndex(idx);
     },
     [safeIndex, onChangeIndex]
   );
-  const handleNext = (0, import_react10.useCallback)(() => {
+  const handleNext = (0, import_react11.useCallback)(() => {
     if (!hasImages) return;
     const nextIndex = (safeIndex + 1) % images.length;
     onChangeIndex(nextIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = (0, import_react10.useCallback)(() => {
+  const handlePrevious = (0, import_react11.useCallback)(() => {
     if (!hasImages) return;
     const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
     onChangeIndex(previousIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = (0, import_react10.useCallback)(
+  const handleZoomPositionChange = (0, import_react11.useCallback)(
     (p, active2) => {
       if (isMobile) return;
       setZoomPoint(p);
@@ -1194,7 +1215,7 @@ function useProductImagePreview(props) {
     },
     [isMobile]
   );
-  const handleScrollZoom = (0, import_react10.useCallback)(
+  const handleScrollZoom = (0, import_react11.useCallback)(
     (delta) => {
       if (!effectiveScrollToZoomEnabled) return;
       const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
@@ -1202,7 +1223,7 @@ function useProductImagePreview(props) {
     },
     [effectiveScrollToZoomEnabled, currentZoomFactor]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCurrentZoomFactor(zoomFactor);
   }, [zoomFactor]);
   return {

package/dist/components/ProductImagePreview/index.js

@@ -1,8 +1,8 @@
 import {
   ProductImagePreview
-} from "../../chunk-A7CEYUVE.js";
-import "../../chunk-CQFPNZTN.js";
-import "../../chunk-HPQWEZJL.js";
+} from "../../chunk-LZGYABCX.js";
+import "../../chunk-G5DEC7H3.js";
+import "../../chunk-3X3Y4TMS.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
@@ -14,7 +14,7 @@ import "../../chunk-MYKYZHEO.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-TYTD4FLW.js";
 import "../../chunk-5UH6QUFB.js";
-import "../../chunk-MX57T3HP.js";
+import "../../chunk-GB4ZTUQV.js";
 import "../../chunk-6CTCHYIS.js";
 import "../../chunk-ORMEWXMH.js";
 export {