uix-image-magnify 0.2.0 → 0.2.1

package/dist/{ImageMagnify-zNjM2jVN.d.cts → ImageMagnify-DssaU7jS.d.cts}

@@ -67,7 +67,6 @@ declare function useImageMagnify(options?: UseImageMagnifyOptions): {
 interface ImageMagnifyProps extends UseImageMagnifyOptions {
     src: string;
     alt: string;
-    /** Rendered width of the image (height follows aspect ratio). */
     width?: number | string;
     className?: string;
     style?: CSSProperties;
@@ -77,10 +76,9 @@ interface ImageMagnifyProps extends UseImageMagnifyOptions {
     lensStyle?: CSSProperties;
     paneClassName?: string;
     paneStyle?: CSSProperties;
-    paneWidth?: number;
-    paneHeight?: number;
+    paneWidth?: number | string;
+    paneHeight?: number | string;
     lazy?: boolean;
-    /** Extra attributes forwarded to the underlying <img>. */
     imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style">;
     onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
     onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];

package/dist/{ImageMagnify-zNjM2jVN.d.ts → ImageMagnify-DssaU7jS.d.ts}

@@ -67,7 +67,6 @@ declare function useImageMagnify(options?: UseImageMagnifyOptions): {
 interface ImageMagnifyProps extends UseImageMagnifyOptions {
     src: string;
     alt: string;
-    /** Rendered width of the image (height follows aspect ratio). */
     width?: number | string;
     className?: string;
     style?: CSSProperties;
@@ -77,10 +76,9 @@ interface ImageMagnifyProps extends UseImageMagnifyOptions {
     lensStyle?: CSSProperties;
     paneClassName?: string;
     paneStyle?: CSSProperties;
-    paneWidth?: number;
-    paneHeight?: number;
+    paneWidth?: number | string;
+    paneHeight?: number | string;
     lazy?: boolean;
-    /** Extra attributes forwarded to the underlying <img>. */
     imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style">;
     onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
     onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];

package/dist/index.cjs

@@ -2,6 +2,11 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('swiper/react');
+var modules = require('swiper/modules');
+require('swiper/css');
+require('swiper/css/navigation');
+require('swiper/css/thumbs');
 
 // src/components/ImageMagnify.tsx
 var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
@@ -413,6 +418,19 @@ function useImageMagnify(options = {}) {
     handlers
   };
 }
+var useIsoLayoutEffect2 = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function useMediaQuery(query) {
+  const [matches, setMatches] = react.useState(false);
+  useIsoLayoutEffect2(() => {
+    const media = window.matchMedia(query);
+    const listener = () => setMatches(media.matches);
+    listener();
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+}
+var MOBILE_QUERY = "(max-width: 768px)";
 var ImageMagnify = react.forwardRef(
   (props, ref) => {
     const {
@@ -441,6 +459,8 @@ var ImageMagnify = react.forwardRef(
       onError,
       ...hookOptions
     } = props;
+    const isMobile = useMediaQuery(MOBILE_QUERY);
+    const responsivePanePosition = isMobile ? "bottom" : panePosition;
     const {
       isZoomed,
       bgImage,
@@ -458,25 +478,36 @@ var ImageMagnify = react.forwardRef(
       disabled,
       ...hookOptions
     });
-    const paneOffset = {};
-    if (panePosition === "right") {
-      paneOffset.left = "calc(100% + 12px)";
-      paneOffset.top = 0;
-    } else if (panePosition === "left") {
-      paneOffset.right = "calc(100% + 12px)";
-      paneOffset.top = 0;
-    } else if (panePosition === "top") {
-      paneOffset.left = 0;
-      paneOffset.bottom = "calc(100% + 12px)";
+    const panePositionStyle = {};
+    if (responsivePanePosition === "right") {
+      panePositionStyle.position = "absolute";
+      panePositionStyle.left = "calc(100% + 12px)";
+      panePositionStyle.top = 0;
+    } else if (responsivePanePosition === "left") {
+      panePositionStyle.position = "absolute";
+      panePositionStyle.right = "calc(100% + 12px)";
+      panePositionStyle.top = 0;
+    } else if (responsivePanePosition === "top") {
+      panePositionStyle.position = "absolute";
+      panePositionStyle.left = 0;
+      panePositionStyle.bottom = "calc(100% + 12px)";
+    } else if (isMobile) {
+      panePositionStyle.position = "static";
+      panePositionStyle.display = "block";
+      panePositionStyle.marginTop = 12;
+      panePositionStyle.width = "100%";
+      panePositionStyle.boxSizing = "border-box";
     } else {
-      paneOffset.left = 0;
-      paneOffset.top = "calc(100% + 12px)";
+      panePositionStyle.position = "absolute";
+      panePositionStyle.left = 0;
+      panePositionStyle.top = "calc(100% + 12px)";
     }
     const isInner = mode === "inner";
     const showLens = (mode === "lens" || mode === "follow") && isZoomed;
     const showPane = mode === "side-by-side" && isZoomed;
     const showCursor = mode === "side-by-side" && isZoomed;
     const cursorStyle = disabled ? "default" : zoomType === "hover" || zoomType === "hold" || zoomType === "wheel" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in";
+    const outerWidth = isMobile ? "100%" : width;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -486,7 +517,8 @@ var ImageMagnify = react.forwardRef(
           position: "relative",
           display: "inline-block",
           lineHeight: 0,
-          width,
+          width: outerWidth,
+          maxWidth: "100%",
           ...style
         },
         children: [
@@ -503,7 +535,6 @@ var ImageMagnify = react.forwardRef(
                 overflow: "hidden",
                 width: "100%",
                 cursor: cursorStyle,
-                // Only block scrolling while zoomed so page scrolling still works.
                 touchAction: isZoomed ? "none" : "pan-y",
                 outline: "none",
                 lineHeight: 0
@@ -590,16 +621,17 @@ var ImageMagnify = react.forwardRef(
               className: paneClassName,
               "aria-hidden": "true",
               style: {
-                position: "absolute",
-                width: paneWidth,
+                width: isMobile && responsivePanePosition === "bottom" ? "100%" : paneWidth,
                 height: paneHeight,
+                maxWidth: "100%",
+                boxSizing: "border-box",
                 backgroundImage: bgImage ? `url("${bgImage}")` : void 0,
                 backgroundRepeat: "no-repeat",
                 border: "1px solid #e5e5e5",
                 borderRadius: 4,
                 boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
                 pointerEvents: "none",
-                ...paneOffset,
+                ...panePositionStyle,
                 ...paneStyle
               }
             }
@@ -610,45 +642,6 @@ var ImageMagnify = react.forwardRef(
   }
 );
 ImageMagnify.displayName = "ImageMagnify";
-function useImageSlider({
-  length,
-  defaultIndex = 0,
-  index: controlledIndex,
-  onIndexChange,
-  loop = true
-}) {
-  const [internalIndex, setInternalIndex] = react.useState(defaultIndex);
-  const safeLength = Math.max(1, length);
-  const rawIndex = controlledIndex ?? internalIndex;
-  const index = Math.max(0, Math.min(safeLength - 1, rawIndex));
-  const setIndex = react.useCallback(
-    (next2) => {
-      if (length <= 0) return;
-      let resolved;
-      if (loop) {
-        resolved = (next2 % safeLength + safeLength) % safeLength;
-      } else {
-        resolved = Math.max(0, Math.min(safeLength - 1, next2));
-      }
-      if (resolved === index) return;
-      if (controlledIndex === void 0) {
-        setInternalIndex(resolved);
-      }
-      onIndexChange?.(resolved);
-    },
-    [length, safeLength, loop, index, controlledIndex, onIndexChange]
-  );
-  const prev = react.useCallback(() => setIndex(index - 1), [setIndex, index]);
-  const next = react.useCallback(() => setIndex(index + 1), [setIndex, index]);
-  return {
-    index,
-    canPrev: loop || index > 0,
-    canNext: loop || index < safeLength - 1,
-    setIndex,
-    prev,
-    next
-  };
-}
 var ArrowLeftIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -700,30 +693,6 @@ var defaultArrowBaseStyle = {
   backdropFilter: "blur(4px)",
   WebkitBackdropFilter: "blur(4px)"
 };
-var defaultThumbStripStyle = {
-  display: "flex",
-  overflowX: "auto",
-  overflowY: "hidden",
-  paddingBottom: 4,
-  scrollbarWidth: "thin",
-  WebkitOverflowScrolling: "touch"
-};
-var defaultThumbBaseStyle = {
-  flexShrink: 0,
-  padding: 0,
-  border: "2px solid #e5e5e5",
-  background: "#fff",
-  cursor: "pointer",
-  overflow: "hidden",
-  transition: "border-color 0.15s ease",
-  borderRadius: 2,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center"
-};
-var defaultThumbActiveStyle = {
-  borderColor: "#111"
-};
 var visuallyHidden = {
   position: "absolute",
   width: 1,
@@ -764,70 +733,51 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
     thumbnailGap = 8,
     prevArrow,
     nextArrow,
+    width,
     ...magnifyProps
   } = props;
-  const { index, canPrev, canNext, setIndex, prev, next } = useImageSlider({
-    length: images.length,
-    defaultIndex,
-    index: controlledActiveIndex,
-    onIndexChange,
-    loop
-  });
-  const currentSrc = images[index] ?? "";
-  const thumbStripRef = react.useRef(null);
-  const [hoveredThumb, setHoveredThumb] = react.useState(null);
+  const [swiper, setSwiper] = react.useState(null);
+  const [thumbsSwiper, setThumbsSwiper] = react.useState(null);
+  const [localIndex, setLocalIndex] = react.useState(defaultIndex);
+  const prevRef = react.useRef(null);
+  const nextRef = react.useRef(null);
+  const isControlled = controlledActiveIndex !== void 0;
+  const activeIndex = isControlled ? controlledActiveIndex : localIndex;
+  const hasMultiple = images.length > 1;
   react.useEffect(() => {
-    if (!preloadAdjacent || typeof window === "undefined") return;
-    if (images.length <= 1) return;
-    const targets = /* @__PURE__ */ new Set();
-    targets.add((index + 1) % images.length);
-    targets.add((index - 1 + images.length) % images.length);
+    if (!swiper || swiper.destroyed) return;
+    if (isControlled && swiper.activeIndex !== controlledActiveIndex) {
+      swiper.slideTo(controlledActiveIndex);
+    }
+  }, [isControlled, controlledActiveIndex, swiper]);
+  react.useEffect(() => {
+    if (!preloadAdjacent || typeof window === "undefined" || images.length <= 1)
+      return;
+    const targets = /* @__PURE__ */ new Set([
+      (activeIndex + 1) % images.length,
+      (activeIndex - 1 + images.length) % images.length
+    ]);
     targets.forEach((i) => {
       if (images[i]) {
         const img = new Image();
         img.src = images[i];
       }
     });
-  }, [index, images, preloadAdjacent]);
-  react.useEffect(() => {
-    const strip = thumbStripRef.current;
-    if (!strip) return;
-    const active = strip.children[index];
-    if (!active) return;
-    const sr = strip.getBoundingClientRect();
-    const ar = active.getBoundingClientRect();
-    if (ar.left < sr.left) {
-      strip.scrollBy({ left: ar.left - sr.left, behavior: "smooth" });
-    } else if (ar.right > sr.right) {
-      strip.scrollBy({ left: ar.right - sr.right, behavior: "smooth" });
-    }
-  }, [index]);
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      if (!enableKeyboard) return;
-      if (e.key === "ArrowLeft") {
-        if (!canPrev) return;
-        e.preventDefault();
-        prev();
-      } else if (e.key === "ArrowRight") {
-        if (!canNext) return;
-        e.preventDefault();
-        next();
-      }
-    },
-    [enableKeyboard, canPrev, canNext, prev, next]
-  );
-  const hasMultiple = images.length > 1;
-  const liveText = react.useMemo(
-    () => `Image ${index + 1} of ${images.length}`,
-    [index, images.length]
-  );
+  }, [activeIndex, images, preloadAdjacent]);
+  const modules$1 = react.useMemo(() => {
+    const m = [modules.Navigation, modules.Thumbs];
+    if (enableKeyboard) m.push(modules.Keyboard);
+    return m;
+  }, [enableKeyboard]);
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, style });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       className,
-      style,
+      style: { maxWidth: "100%", width, ...style },
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": `${alt} \u2014 image gallery`,
@@ -836,53 +786,80 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
           "div",
           {
             className: viewportClassName,
-            style: {
-              position: "relative",
-              width: "fit-content",
-              maxWidth: "100%",
-              ...viewportStyle
-            },
-            tabIndex: enableKeyboard && hasMultiple ? 0 : void 0,
-            onKeyDown: handleKeyDown,
+            style: { position: "relative", width: "100%", ...viewportStyle },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ImageMagnify, { ...magnifyProps, src: currentSrc, alt }),
-              showArrows && hasMultiple && canPrev && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.Swiper,
                 {
-                  type: "button",
-                  onClick: prev,
-                  className: arrowClassName,
-                  style: {
-                    ...defaultArrowBaseStyle,
-                    left: 12,
-                    ...arrowStyle
+                  modules: modules$1,
+                  onSwiper: setSwiper,
+                  initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
+                  onSlideChange: (s) => {
+                    if (!isControlled) setLocalIndex(s.activeIndex);
+                    onIndexChange?.(s.activeIndex);
                   },
-                  "aria-label": "Previous image",
-                  children: prevArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon, {})
-                }
-              ),
-              showArrows && hasMultiple && canNext && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: next,
-                  className: arrowClassName,
+                  onBeforeInit: (s) => {
+                    if (!showArrows || !hasMultiple) return;
+                    if (s.params.navigation && typeof s.params.navigation === "object") {
+                      s.params.navigation.prevEl = prevRef.current;
+                      s.params.navigation.nextEl = nextRef.current;
+                    }
+                  },
+                  navigation: showArrows && hasMultiple ? {} : false,
+                  keyboard: enableKeyboard ? { enabled: true } : void 0,
+                  thumbs: {
+                    swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
+                  },
+                  loop: loop && hasMultiple,
+                  autoHeight: true,
+                  spaceBetween: 10,
                   style: {
-                    ...defaultArrowBaseStyle,
-                    right: 12,
+                    width: "100%",
+                    "--swiper-navigation-size": "20px",
                     ...arrowStyle
                   },
-                  "aria-label": "Next image",
-                  children: nextArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, {})
+                  children: images.map((src, idx) => /* @__PURE__ */ jsxRuntime.jsx(react$1.SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ImageMagnify,
+                    {
+                      ...magnifyProps,
+                      src,
+                      alt,
+                      width: "100%"
+                    }
+                  ) }, idx))
                 }
               ),
+              showArrows && hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    ref: prevRef,
+                    type: "button",
+                    className: arrowClassName,
+                    style: { ...defaultArrowBaseStyle, left: 12 },
+                    "aria-label": "Previous image",
+                    children: prevArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    ref: nextRef,
+                    type: "button",
+                    className: arrowClassName,
+                    style: { ...defaultArrowBaseStyle, right: 12 },
+                    "aria-label": "Next image",
+                    children: nextArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, {})
+                  }
+                )
+              ] }),
               showCounter && hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   "aria-hidden": "true",
                   style: {
                     position: "absolute",
-                    bottom: 12,
+                    top: 12,
                     right: 12,
                     background: "rgba(0,0,0,0.6)",
                     color: "#fff",
@@ -894,74 +871,57 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
                     pointerEvents: "none"
                   },
                   children: [
-                    index + 1,
+                    activeIndex + 1,
                     " / ",
                     images.length
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: liveText })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: [
+                "Image ",
+                activeIndex + 1,
+                " of ",
+                images.length
+              ] })
             ]
           }
         ),
         showThumbnails && hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          react$1.Swiper,
           {
-            ref: thumbStripRef,
-            className: thumbnailContainerClassName,
-            role: "tablist",
-            "aria-label": "Choose image",
-            style: {
-              ...defaultThumbStripStyle,
-              gap: thumbnailGap,
-              marginTop: 12,
-              ...thumbnailContainerStyle
+            modules: modules$1,
+            onSwiper: setSwiper,
+            initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
+            onSlideChange: (s) => {
+              if (!isControlled) setLocalIndex(s.activeIndex);
+              onIndexChange?.(s.activeIndex);
             },
-            children: images.map((img, idx) => {
-              const isActive = idx === index;
-              const isHovered = idx === hoveredThumb;
-              const cls = isActive ? thumbnailActiveClassName : thumbnailClassName;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "tab",
-                  onClick: () => setIndex(idx),
-                  onMouseEnter: () => setHoveredThumb(idx),
-                  onMouseLeave: () => setHoveredThumb(null),
-                  className: cls,
-                  style: {
-                    ...defaultThumbBaseStyle,
-                    width: thumbnailSize,
-                    height: thumbnailSize,
-                    ...thumbnailStyle,
-                    ...isActive ? defaultThumbActiveStyle : void 0,
-                    ...isActive ? thumbnailActiveStyle : void 0,
-                    ...isHovered && !isActive ? { borderColor: "#999" } : void 0
-                  },
-                  "aria-label": `View image ${idx + 1} of ${images.length}`,
-                  "aria-selected": isActive,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      src: img,
-                      alt: "",
-                      loading: "lazy",
-                      draggable: false,
-                      style: {
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "contain",
-                        display: "block",
-                        pointerEvents: "none",
-                        userSelect: "none"
-                      }
-                    }
-                  )
-                },
-                idx
-              );
-            })
+            onBeforeInit: (s) => {
+              if (!showArrows || !hasMultiple) return;
+              const nav = s.params.navigation;
+              if (nav && typeof nav === "object") {
+                nav.prevEl = prevRef.current;
+                nav.nextEl = nextRef.current;
+              }
+            },
+            navigation: showArrows && hasMultiple ? {} : false,
+            keyboard: enableKeyboard ? { enabled: true } : void 0,
+            thumbs: {
+              swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
+            },
+            loop: loop && hasMultiple,
+            autoHeight: true,
+            spaceBetween: 10,
+            style: { width: "100%" },
+            children: images.map((src, idx) => /* @__PURE__ */ jsxRuntime.jsx(react$1.SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ImageMagnify,
+              {
+                ...magnifyProps,
+                src,
+                alt,
+                width: "100%"
+              }
+            ) }, idx))
           }
         )
       ]
@@ -969,6 +929,45 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
   );
 });
 ImageMagnifyGallery.displayName = "ImageMagnifyGallery";
+function useImageSlider({
+  length,
+  defaultIndex = 0,
+  index: controlledIndex,
+  onIndexChange,
+  loop = true
+}) {
+  const [internalIndex, setInternalIndex] = react.useState(defaultIndex);
+  const safeLength = Math.max(1, length);
+  const rawIndex = controlledIndex ?? internalIndex;
+  const index = Math.max(0, Math.min(safeLength - 1, rawIndex));
+  const setIndex = react.useCallback(
+    (next2) => {
+      if (length <= 0) return;
+      let resolved;
+      if (loop) {
+        resolved = (next2 % safeLength + safeLength) % safeLength;
+      } else {
+        resolved = Math.max(0, Math.min(safeLength - 1, next2));
+      }
+      if (resolved === index) return;
+      if (controlledIndex === void 0) {
+        setInternalIndex(resolved);
+      }
+      onIndexChange?.(resolved);
+    },
+    [length, safeLength, loop, index, controlledIndex, onIndexChange]
+  );
+  const prev = react.useCallback(() => setIndex(index - 1), [setIndex, index]);
+  const next = react.useCallback(() => setIndex(index + 1), [setIndex, index]);
+  return {
+    index,
+    canPrev: loop || index > 0,
+    canNext: loop || index < safeLength - 1,
+    setIndex,
+    prev,
+    next
+  };
+}
 
 exports.ImageMagnify = ImageMagnify;
 exports.ImageMagnifyGallery = ImageMagnifyGallery;