uix-image-magnify 0.2.2 → 0.2.4

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CSSProperties, ImgHTMLAttributes } from 'react';
+import { CSSProperties, ImgHTMLAttributes, ReactNode } from 'react';
 
 type ZoomType = "hover" | "click" | "double-click" | "hold" | "wheel" | "none";
 type PanePosition = "left" | "right" | "top" | "bottom";
@@ -7,35 +7,20 @@ type LensShape = "circle" | "square";
 type MagnifyMode = "lens" | "side-by-side" | "inner" | "follow";
 type DragMode = "follow" | "pan";
 interface UseImageMagnifyOptions {
-    /** Base image URL (required when used standalone). */
     src?: string;
-    /** High-resolution image used for the zoomed view. Defaults to `src`. */
     zoomSrc?: string;
-    /** Magnification factor (2 = 200%). */
     zoomScale?: number;
-    /** Minimum scale for wheel/keyboard zoom. Default `1.5`. */
     minZoomScale?: number;
-    /** Maximum scale for wheel/keyboard zoom. Default `5`. */
     maxZoomScale?: number;
-    /** Interaction that activates zoom. */
     zoomType?: ZoomType;
-    /** How the zoomed content is displayed. */
     mode?: MagnifyMode;
-    /** Drag interaction for `inner` mode. */
     dragMode?: DragMode;
-    /** Where the side-by-side pane sits relative to the image. */
     panePosition?: PanePosition;
-    /** Diameter / side length of the lens in px. */
     lensSize?: number;
-    /** Lens shape. */
     lensShape?: LensShape;
-    /** Offset (both axes, px) for `mode="follow"`. */
     followOffset?: number;
-    /** Disable all interaction. */
     disabled?: boolean;
-    /** Preload the high-res image to avoid a flash. */
     zoomPreload?: boolean;
-    /** Reset zoom when the pointer leaves the container. */
     resetOnLeave?: boolean;
     onZoomStart?: () => void;
     onZoomEnd?: () => void;
@@ -79,10 +64,42 @@ interface ImageMagnifyProps extends UseImageMagnifyOptions {
     paneWidth?: number | string;
     paneHeight?: number | string;
     lazy?: boolean;
-    imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style">;
+    imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style" | "className" | "onLoad" | "onError">;
     onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
     onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
 }
 declare const ImageMagnify: React.ForwardRefExoticComponent<ImageMagnifyProps & React.RefAttributes<HTMLDivElement>>;
 
-export { type DragMode as D, type ImageMagnifyProps as I, type LensShape as L, type MagnifyMode as M, type PanePosition as P, type UseImageMagnifyOptions as U, type ZoomType as Z, ImageMagnify as a, useImageMagnify as u };
+interface ImageMagnifyGalleryProps extends Omit<ImageMagnifyProps, "src" | "onLoad" | "onError"> {
+    images: string[];
+    alt: string;
+    activeIndex?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    showArrows?: boolean;
+    showThumbnails?: boolean;
+    showCounter?: boolean;
+    loop?: boolean;
+    enableKeyboard?: boolean;
+    preloadAdjacent?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    viewportClassName?: string;
+    viewportStyle?: CSSProperties;
+    swiperStyle?: CSSProperties;
+    thumbnailContainerClassName?: string;
+    thumbnailContainerStyle?: CSSProperties;
+    thumbnailClassName?: string;
+    thumbnailActiveClassName?: string;
+    thumbnailStyle?: CSSProperties;
+    thumbnailActiveStyle?: CSSProperties;
+    arrowClassName?: string;
+    arrowStyle?: CSSProperties;
+    thumbnailSize?: number;
+    thumbnailGap?: number;
+    prevArrow?: ReactNode;
+    nextArrow?: ReactNode;
+}
+declare const ImageMagnifyGallery: React.ForwardRefExoticComponent<ImageMagnifyGalleryProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type DragMode as D, ImageMagnify as I, type LensShape as L, type MagnifyMode as M, type PanePosition as P, type UseImageMagnifyOptions as U, type ZoomType as Z, ImageMagnifyGallery as a, type ImageMagnifyGalleryProps as b, type ImageMagnifyProps as c, useImageMagnify as u };

package/dist/index.cjs

@@ -6,7 +6,6 @@ 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));
@@ -82,6 +81,15 @@ function useImageMagnify(options = {}) {
       isZoomedRef.current = z;
       setIsZoomed(z);
       if (z) {
+        if (modeRef.current === "inner" && dragModeRef.current === "pan") {
+          const container = containerRef.current;
+          if (container) {
+            const rect = container.getBoundingClientRect();
+            const s = scaleRef.current;
+            txRef.current = rect.width * (1 - s) / 2;
+            tyRef.current = rect.height * (1 - s) / 2;
+          }
+        }
         onZoomStart?.();
       } else {
         if (zoomType === "wheel") {
@@ -288,8 +296,6 @@ function useImageMagnify(options = {}) {
         setZoomed(!isZoomedRef.current);
       } else if (zoomType === "click") {
         setZoomed(!isZoomedRef.current);
-      } else if (zoomType === "wheel") {
-        setZoomed(!isZoomedRef.current);
       }
       schedule();
     },
@@ -506,7 +512,8 @@ var ImageMagnify = react.forwardRef(
     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 isInteractive = !disabled && zoomType !== "none";
+    const cursorStyle = !isInteractive ? "default" : zoomType === "hover" || zoomType === "hold" || zoomType === "wheel" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in";
     const outerWidth = isMobile ? "100%" : width;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -526,7 +533,7 @@ var ImageMagnify = react.forwardRef(
             "div",
             {
               ref: containerRef,
-              tabIndex: 0,
+              tabIndex: isInteractive ? 0 : -1,
               role: "img",
               "aria-label": alt,
               "aria-disabled": disabled || void 0,
@@ -693,6 +700,23 @@ var defaultArrowBaseStyle = {
   backdropFilter: "blur(4px)",
   WebkitBackdropFilter: "blur(4px)"
 };
+var defaultThumbBaseStyle = {
+  flexShrink: 0,
+  padding: 0,
+  border: "2px solid #e5e5e5",
+  background: "#fff",
+  cursor: "pointer",
+  overflow: "hidden",
+  transition: "border-color 0.15s ease, opacity 0.15s ease",
+  borderRadius: 2,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxSizing: "border-box"
+};
+var defaultThumbActiveStyle = {
+  borderColor: "#111"
+};
 var visuallyHidden = {
   position: "absolute",
   width: 1,
@@ -721,6 +745,7 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
     style,
     viewportClassName,
     viewportStyle,
+    swiperStyle,
     thumbnailContainerClassName,
     thumbnailContainerStyle,
     thumbnailClassName,
@@ -737,13 +762,17 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
     ...magnifyProps
   } = props;
   const [swiper, setSwiper] = react.useState(null);
-  const [thumbsSwiper, setThumbsSwiper] = react.useState(null);
-  const [localIndex, setLocalIndex] = react.useState(defaultIndex);
+  const [localIndex, setLocalIndex] = react.useState(() => {
+    const safeLength = Math.max(1, images.length);
+    return Math.max(0, Math.min(safeLength - 1, defaultIndex));
+  });
   const prevRef = react.useRef(null);
   const nextRef = react.useRef(null);
   const isControlled = controlledActiveIndex !== void 0;
-  const activeIndex = isControlled ? controlledActiveIndex : localIndex;
+  const rawIndex = isControlled ? controlledActiveIndex : localIndex;
+  const activeIndex = images.length ? Math.max(0, Math.min(images.length - 1, rawIndex)) : 0;
   const hasMultiple = images.length > 1;
+  const modules$1 = react.useMemo(() => [modules.Navigation, modules.Keyboard, modules.A11y], []);
   react.useEffect(() => {
     if (!swiper || swiper.destroyed) return;
     if (isControlled && swiper.activeIndex !== controlledActiveIndex) {
@@ -753,22 +782,31 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
   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
-    ]);
+    const targets = /* @__PURE__ */ new Set();
+    if (loop) {
+      targets.add((activeIndex + 1) % images.length);
+      targets.add((activeIndex - 1 + images.length) % images.length);
+    } else {
+      if (activeIndex < images.length - 1) targets.add(activeIndex + 1);
+      if (activeIndex > 0) targets.add(activeIndex - 1);
+    }
     targets.forEach((i) => {
-      if (images[i]) {
+      const src = images[i];
+      if (src) {
         const img = new Image();
-        img.src = images[i];
+        img.src = src;
       }
     });
-  }, [activeIndex, images, preloadAdjacent]);
-  const modules$1 = react.useMemo(() => {
-    const m = [modules.Navigation, modules.Thumbs];
-    if (enableKeyboard) m.push(modules.Keyboard);
-    return m;
-  }, [enableKeyboard]);
+  }, [activeIndex, images, preloadAdjacent, loop]);
+  const handleSlideChange = (s) => {
+    const idx = s.activeIndex;
+    if (!isControlled) setLocalIndex(idx);
+    onIndexChange?.(idx);
+  };
+  const handleThumbClick = (idx) => {
+    if (!swiper || swiper.destroyed) return;
+    swiper.slideTo(idx);
+  };
   if (images.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, style });
   }
@@ -794,36 +832,29 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
                   modules: modules$1,
                   onSwiper: setSwiper,
                   initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
-                  onSlideChange: (s) => {
-                    if (!isControlled) setLocalIndex(s.activeIndex);
-                    onIndexChange?.(s.activeIndex);
-                  },
+                  onSlideChange: handleSlideChange,
                   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;
+                    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
-                  },
+                  keyboard: enableKeyboard ? { enabled: true } : false,
                   loop: loop && hasMultiple,
                   autoHeight: true,
                   spaceBetween: 10,
-                  style: {
-                    width: "100%",
-                    "--swiper-navigation-size": "20px",
-                    ...arrowStyle
-                  },
+                  observer: true,
+                  observeParents: true,
+                  style: { width: "100%", ...swiperStyle },
                   children: images.map((src, idx) => /* @__PURE__ */ jsxRuntime.jsx(react$1.SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
                     ImageMagnify,
                     {
                       ...magnifyProps,
                       src,
-                      alt,
+                      alt: `${alt} \u2014 image ${idx + 1} of ${images.length}`,
                       width: "100%"
                     }
                   ) }, idx))
@@ -836,7 +867,7 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
                     ref: prevRef,
                     type: "button",
                     className: arrowClassName,
-                    style: { ...defaultArrowBaseStyle, left: 12 },
+                    style: { ...defaultArrowBaseStyle, left: 12, ...arrowStyle },
                     "aria-label": "Previous image",
                     children: prevArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon, {})
                   }
@@ -847,7 +878,7 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
                     ref: nextRef,
                     type: "button",
                     className: arrowClassName,
-                    style: { ...defaultArrowBaseStyle, right: 12 },
+                    style: { ...defaultArrowBaseStyle, right: 12, ...arrowStyle },
                     "aria-label": "Next image",
                     children: nextArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, {})
                   }
@@ -887,41 +918,62 @@ var ImageMagnifyGallery = react.forwardRef((props, ref) => {
           }
         ),
         showThumbnails && hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.Swiper,
+          "div",
           {
-            modules: modules$1,
-            onSwiper: setSwiper,
-            initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
-            onSlideChange: (s) => {
-              if (!isControlled) setLocalIndex(s.activeIndex);
-              onIndexChange?.(s.activeIndex);
-            },
-            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
+            className: thumbnailContainerClassName,
+            role: "group",
+            "aria-label": "Image thumbnails",
+            style: {
+              display: "flex",
+              gap: thumbnailGap,
+              marginTop: 12,
+              overflowX: "auto",
+              overflowY: "hidden",
+              paddingBottom: 4,
+              scrollbarWidth: "thin",
+              ...thumbnailContainerStyle
             },
-            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))
+            children: images.map((src, idx) => {
+              const isActive = idx === activeIndex;
+              const mergedClassName = [
+                thumbnailClassName,
+                isActive ? thumbnailActiveClassName : void 0
+              ].filter(Boolean).join(" ") || void 0;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleThumbClick(idx),
+                  className: mergedClassName,
+                  style: {
+                    ...defaultThumbBaseStyle,
+                    width: thumbnailSize,
+                    height: thumbnailSize,
+                    ...thumbnailStyle,
+                    ...isActive ? { ...defaultThumbActiveStyle, ...thumbnailActiveStyle } : void 0
+                  },
+                  "aria-label": `View image ${idx + 1}`,
+                  "aria-current": isActive ? "true" : void 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src,
+                      alt: "",
+                      loading: "lazy",
+                      draggable: false,
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block",
+                        pointerEvents: "none"
+                      }
+                    }
+                  )
+                },
+                idx
+              );
+            })
           }
         )
       ]
@@ -936,7 +988,10 @@ function useImageSlider({
   onIndexChange,
   loop = true
 }) {
-  const [internalIndex, setInternalIndex] = react.useState(defaultIndex);
+  const [internalIndex, setInternalIndex] = react.useState(() => {
+    const safeLength2 = Math.max(1, length);
+    return Math.max(0, Math.min(safeLength2 - 1, defaultIndex));
+  });
   const safeLength = Math.max(1, length);
   const rawIndex = controlledIndex ?? internalIndex;
   const index = Math.max(0, Math.min(safeLength - 1, rawIndex));