uix-image-magnify 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -0,0 +1,409 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ImageMagnify.tsx
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+function useImageMagnify(options = {}) {
+  const {
+    src,
+    zoomSrc,
+    zoomScale = 2,
+    zoomType = "hover",
+    lensSize = 150,
+    zoomPreload = true,
+    onZoomStart,
+    onZoomEnd
+  } = options;
+  const [isZoomed, setIsZoomed] = react.useState(false);
+  const isZoomedRef = react.useRef(false);
+  const containerRef = react.useRef(null);
+  const imageRef = react.useRef(null);
+  const lensRef = react.useRef(null);
+  const paneRef = react.useRef(null);
+  const cursorRef = react.useRef(null);
+  const pointerRef = react.useRef({ x: 0, y: 0 });
+  const rafRef = react.useRef(0);
+  const lastTouchRef = react.useRef(0);
+  const bgImage = zoomSrc || src;
+  const isRecentTouch = () => Date.now() - lastTouchRef.current < 700;
+  const setZoomed = react.useCallback(
+    (z) => {
+      if (isZoomedRef.current === z) return;
+      isZoomedRef.current = z;
+      setIsZoomed(z);
+      if (z) onZoomStart?.();
+      else onZoomEnd?.();
+    },
+    [onZoomStart, onZoomEnd]
+  );
+  const apply = react.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    const { x, y } = pointerRef.current;
+    const xPct = clamp(x / rect.width, 0, 1);
+    const yPct = clamp(y / rect.height, 0, 1);
+    const lens = lensRef.current;
+    if (lens) {
+      const maxX = Math.max(0, rect.width - lensSize);
+      const maxY = Math.max(0, rect.height - lensSize);
+      const lx = clamp(x - lensSize / 2, 0, maxX);
+      const ly = clamp(y - lensSize / 2, 0, maxY);
+      const cx = lx + lensSize / 2;
+      const cy = ly + lensSize / 2;
+      lens.style.transform = `translate3d(${lx}px, ${ly}px, 0)`;
+      lens.style.backgroundPosition = `${lensSize / 2 - cx * zoomScale}px ${lensSize / 2 - cy * zoomScale}px`;
+    }
+    const pane = paneRef.current;
+    if (pane) {
+      const pw = pane.offsetWidth;
+      const ph = pane.offsetHeight;
+      const bgW = rect.width * zoomScale;
+      const bgH = rect.height * zoomScale;
+      let bgX = pw / 2 - xPct * bgW;
+      let bgY = ph / 2 - yPct * bgH;
+      if (bgW > pw) bgX = clamp(bgX, pw - bgW, 0);
+      else bgX = (pw - bgW) / 2;
+      if (bgH > ph) bgY = clamp(bgY, ph - bgH, 0);
+      else bgY = (ph - bgH) / 2;
+      pane.style.backgroundPosition = `${bgX}px ${bgY}px`;
+    }
+    const cursor = cursorRef.current;
+    if (cursor) {
+      cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    }
+  }, [zoomScale, lensSize]);
+  const schedule = react.useCallback(() => {
+    if (rafRef.current) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = 0;
+      apply();
+    });
+  }, [apply]);
+  react.useEffect(() => {
+    if (isZoomed) schedule();
+  }, [isZoomed, schedule]);
+  react.useEffect(() => {
+    if (!bgImage) return;
+    const url = `url("${bgImage}")`;
+    if (lensRef.current) lensRef.current.style.backgroundImage = url;
+    if (paneRef.current) paneRef.current.style.backgroundImage = url;
+  }, [bgImage, isZoomed]);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const update = () => {
+      const rect = container.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      const size = `${rect.width * zoomScale}px ${rect.height * zoomScale}px`;
+      if (lensRef.current) lensRef.current.style.backgroundSize = size;
+      if (paneRef.current) paneRef.current.style.backgroundSize = size;
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [zoomScale, isZoomed]);
+  react.useEffect(() => {
+    if (!zoomPreload || !bgImage) return;
+    const img = new Image();
+    img.src = bgImage;
+  }, [zoomPreload, bgImage]);
+  react.useEffect(
+    () => () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    },
+    []
+  );
+  const updatePointer = (clientX, clientY) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    pointerRef.current = {
+      x: clamp(clientX - rect.left, 0, rect.width),
+      y: clamp(clientY - rect.top, 0, rect.height)
+    };
+  };
+  const handlers = {
+    onMouseEnter: (e) => {
+      if (isRecentTouch()) return;
+      updatePointer(e.clientX, e.clientY);
+      if (zoomType === "hover") setZoomed(true);
+      schedule();
+    },
+    onMouseMove: (e) => {
+      if (isRecentTouch()) return;
+      updatePointer(e.clientX, e.clientY);
+      if (isZoomedRef.current) schedule();
+    },
+    onMouseLeave: () => {
+      if (isRecentTouch()) return;
+      if (zoomType === "hover") setZoomed(false);
+    },
+    onClick: (e) => {
+      if (isRecentTouch()) return;
+      if (zoomType !== "click") return;
+      updatePointer(e.clientX, e.clientY);
+      setZoomed(!isZoomedRef.current);
+      schedule();
+    },
+    onDoubleClick: (e) => {
+      if (isRecentTouch()) return;
+      if (zoomType !== "double-click") return;
+      updatePointer(e.clientX, e.clientY);
+      setZoomed(!isZoomedRef.current);
+      schedule();
+    },
+    onTouchStart: (e) => {
+      lastTouchRef.current = Date.now();
+      const t = e.touches[0];
+      if (!t) return;
+      updatePointer(t.clientX, t.clientY);
+      if (zoomType === "hover") setZoomed(true);
+      else setZoomed(!isZoomedRef.current);
+      schedule();
+    },
+    onTouchMove: (e) => {
+      lastTouchRef.current = Date.now();
+      const t = e.touches[0];
+      if (!t) return;
+      updatePointer(t.clientX, t.clientY);
+      schedule();
+    },
+    onTouchEnd: () => {
+      lastTouchRef.current = Date.now();
+      if (zoomType === "hover") setZoomed(false);
+    },
+    onKeyDown: (e) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const step = 20;
+      const { x, y } = pointerRef.current;
+      let handled = true;
+      switch (e.key) {
+        case "ArrowLeft":
+          pointerRef.current.x = clamp(x - step, 0, rect.width);
+          break;
+        case "ArrowRight":
+          pointerRef.current.x = clamp(x + step, 0, rect.width);
+          break;
+        case "ArrowUp":
+          pointerRef.current.y = clamp(y - step, 0, rect.height);
+          break;
+        case "ArrowDown":
+          pointerRef.current.y = clamp(y + step, 0, rect.height);
+          break;
+        case "Enter":
+        case " ":
+          setZoomed(!isZoomedRef.current);
+          break;
+        case "Escape":
+          setZoomed(false);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        e.preventDefault();
+        schedule();
+      }
+    },
+    onFocus: () => {
+      if (isRecentTouch()) return;
+      if (zoomType === "hover") setZoomed(true);
+    },
+    onBlur: () => {
+      if (zoomType === "hover") setZoomed(false);
+    }
+  };
+  return {
+    isZoomed,
+    containerRef,
+    imageRef,
+    lensRef,
+    paneRef,
+    cursorRef,
+    handlers
+  };
+}
+var ImageMagnify = react.forwardRef(
+  (props, ref) => {
+    const {
+      src,
+      alt,
+      width,
+      mode = "side-by-side",
+      className,
+      style,
+      imageClassName,
+      imageStyle,
+      lensClassName,
+      lensStyle,
+      paneClassName,
+      paneStyle,
+      paneWidth = 400,
+      paneHeight = 400,
+      lazy,
+      panePosition = "right",
+      lensSize = 150,
+      lensShape = "circle",
+      zoomType = "hover",
+      ...hookOptions
+    } = props;
+    const {
+      isZoomed,
+      containerRef,
+      imageRef,
+      lensRef,
+      paneRef,
+      cursorRef,
+      handlers
+    } = useImageMagnify({ src, zoomType, lensSize, ...hookOptions });
+    const bgImage = props.zoomSrc || src;
+    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)";
+    } else {
+      paneOffset.left = 0;
+      paneOffset.top = "calc(100% + 12px)";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          position: "relative",
+          display: "inline-block",
+          lineHeight: 0,
+          width,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: containerRef,
+              tabIndex: 0,
+              role: "img",
+              "aria-label": alt,
+              style: {
+                position: "relative",
+                overflow: "hidden",
+                width: "100%",
+                cursor: zoomType === "hover" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in",
+                touchAction: "none",
+                outline: "none",
+                lineHeight: 0
+              },
+              ...handlers,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    ref: imageRef,
+                    src,
+                    alt,
+                    loading: lazy ? "lazy" : void 0,
+                    draggable: false,
+                    className: imageClassName,
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      height: "auto",
+                      userSelect: "none",
+                      pointerEvents: "none",
+                      ...imageStyle
+                    }
+                  }
+                ),
+                mode === "lens" && isZoomed && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: lensRef,
+                    className: lensClassName,
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: lensSize,
+                      height: lensSize,
+                      borderRadius: lensShape === "circle" ? "50%" : 0,
+                      backgroundImage: bgImage ? `url("${bgImage}")` : void 0,
+                      backgroundRepeat: "no-repeat",
+                      pointerEvents: "none",
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
+                      border: "1px solid rgba(255,255,255,0.6)",
+                      willChange: "transform",
+                      ...lensStyle
+                    }
+                  }
+                ),
+                mode === "side-by-side" && isZoomed && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: cursorRef,
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: 12,
+                      height: 12,
+                      marginLeft: -6,
+                      marginTop: -6,
+                      borderRadius: "50%",
+                      background: "rgba(255,255,255,0.7)",
+                      border: "1px solid rgba(0,0,0,0.5)",
+                      pointerEvents: "none",
+                      boxShadow: "0 0 0 1px rgba(255,255,255,0.8)",
+                      willChange: "transform"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          mode === "side-by-side" && isZoomed && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: paneRef,
+              className: paneClassName,
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                width: paneWidth,
+                height: paneHeight,
+                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,
+                ...paneStyle
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageMagnify.displayName = "ImageMagnify";
+
+exports.ImageMagnify = ImageMagnify;
+exports.useImageMagnify = useImageMagnify;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useImageMagnify.ts","../src/components/ImageMagnify.tsx"],"names":["useState","useRef","useCallback","useEffect","forwardRef","jsxs","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport type * as React from \"react\";\r\n\r\nexport type ZoomType = \"hover\" | \"click\" | \"double-click\";\r\nexport type PanePosition = \"left\" | \"right\" | \"top\" | \"bottom\";\r\nexport type LensShape = \"circle\" | \"square\";\r\n\r\nexport interface UseImageMagnifyOptions {\r\n  /** Base image URL (required when used standalone). */\r\n  src?: string;\r\n  /** High-resolution image used for the zoomed view. Defaults to `src`. */\r\n  zoomSrc?: string;\r\n  /** Magnification factor (2 = 200%). */\r\n  zoomScale?: number;\r\n  /** Interaction that activates zoom. */\r\n  zoomType?: ZoomType;\r\n  /** Where the side-by-side pane sits relative to the image. */\r\n  panePosition?: PanePosition;\r\n  /** Diameter / side length of the lens in px. */\r\n  lensSize?: number;\r\n  /** Lens shape. */\r\n  lensShape?: LensShape;\r\n  /** Preload the high-res image to avoid a flash. */\r\n  zoomPreload?: boolean;\r\n  onZoomStart?: () => void;\r\n  onZoomEnd?: () => void;\r\n}\r\n\r\nconst clamp = (v: number, min: number, max: number) =>\r\n  Math.max(min, Math.min(max, v));\r\n\r\nexport function useImageMagnify(options: UseImageMagnifyOptions = {}) {\r\n  const {\r\n    src,\r\n    zoomSrc,\r\n    zoomScale = 2,\r\n    zoomType = \"hover\",\r\n    lensSize = 150,\r\n    zoomPreload = true,\r\n    onZoomStart,\r\n    onZoomEnd,\r\n  } = options;\r\n\r\n  const [isZoomed, setIsZoomed] = useState(false);\r\n  const isZoomedRef = useRef(false);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const imageRef = useRef<HTMLImageElement>(null);\r\n  const lensRef = useRef<HTMLDivElement>(null);\r\n  const paneRef = useRef<HTMLDivElement>(null);\r\n  const cursorRef = useRef<HTMLDivElement>(null);\r\n  const pointerRef = useRef({ x: 0, y: 0 });\r\n  const rafRef = useRef(0);\r\n  const lastTouchRef = useRef(0);\r\n\r\n  const bgImage = zoomSrc || src;\r\n\r\n  const isRecentTouch = () => Date.now() - lastTouchRef.current < 700;\r\n\r\n  const setZoomed = useCallback(\r\n    (z: boolean) => {\r\n      if (isZoomedRef.current === z) return;\r\n      isZoomedRef.current = z;\r\n      setIsZoomed(z);\r\n      if (z) onZoomStart?.();\r\n      else onZoomEnd?.();\r\n    },\r\n    [onZoomStart, onZoomEnd],\r\n  );\r\n\r\n  /** Writes directly to DOM — no React re-renders on mousemove. */\r\n  const apply = useCallback(() => {\r\n    const container = containerRef.current;\r\n    if (!container) return;\r\n    const rect = container.getBoundingClientRect();\r\n    if (!rect.width || !rect.height) return;\r\n\r\n    const { x, y } = pointerRef.current;\r\n    const xPct = clamp(x / rect.width, 0, 1);\r\n    const yPct = clamp(y / rect.height, 0, 1);\r\n\r\n    const lens = lensRef.current;\r\n    if (lens) {\r\n      // Keep the lens fully inside the container so it never gets clipped\r\n      // (and never shows empty background near the edges).\r\n      const maxX = Math.max(0, rect.width - lensSize);\r\n      const maxY = Math.max(0, rect.height - lensSize);\r\n      const lx = clamp(x - lensSize / 2, 0, maxX);\r\n      const ly = clamp(y - lensSize / 2, 0, maxY);\r\n      const cx = lx + lensSize / 2;\r\n      const cy = ly + lensSize / 2;\r\n      lens.style.transform = `translate3d(${lx}px, ${ly}px, 0)`;\r\n      lens.style.backgroundPosition = `${\r\n        lensSize / 2 - cx * zoomScale\r\n      }px ${lensSize / 2 - cy * zoomScale}px`;\r\n    }\r\n\r\n    const pane = paneRef.current;\r\n    if (pane) {\r\n      const pw = pane.offsetWidth;\r\n      const ph = pane.offsetHeight;\r\n      const bgW = rect.width * zoomScale;\r\n      const bgH = rect.height * zoomScale;\r\n      let bgX = pw / 2 - xPct * bgW;\r\n      let bgY = ph / 2 - yPct * bgH;\r\n      if (bgW > pw) bgX = clamp(bgX, pw - bgW, 0);\r\n      else bgX = (pw - bgW) / 2;\r\n      if (bgH > ph) bgY = clamp(bgY, ph - bgH, 0);\r\n      else bgY = (ph - bgH) / 2;\r\n      pane.style.backgroundPosition = `${bgX}px ${bgY}px`;\r\n    }\r\n\r\n    const cursor = cursorRef.current;\r\n    if (cursor) {\r\n      cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;\r\n    }\r\n  }, [zoomScale, lensSize]);\r\n\r\n  /** Coalesce DOM writes into a single rAF. */\r\n  const schedule = useCallback(() => {\r\n    if (rafRef.current) return;\r\n    rafRef.current = requestAnimationFrame(() => {\r\n      rafRef.current = 0;\r\n      apply();\r\n    });\r\n  }, [apply]);\r\n\r\n  // Position after the lens/pane actually mount.\r\n  useEffect(() => {\r\n    if (isZoomed) schedule();\r\n  }, [isZoomed, schedule]);\r\n\r\n  // Background image.\r\n  useEffect(() => {\r\n    if (!bgImage) return;\r\n    const url = `url(\"${bgImage}\")`;\r\n    if (lensRef.current) lensRef.current.style.backgroundImage = url;\r\n    if (paneRef.current) paneRef.current.style.backgroundImage = url;\r\n  }, [bgImage, isZoomed]);\r\n\r\n  // Background size tracks the container.\r\n  useEffect(() => {\r\n    const container = containerRef.current;\r\n    if (!container) return;\r\n    const update = () => {\r\n      const rect = container.getBoundingClientRect();\r\n      if (!rect.width || !rect.height) return;\r\n      const size = `${rect.width * zoomScale}px ${rect.height * zoomScale}px`;\r\n      if (lensRef.current) lensRef.current.style.backgroundSize = size;\r\n      if (paneRef.current) paneRef.current.style.backgroundSize = size;\r\n    };\r\n    update();\r\n    const ro = new ResizeObserver(update);\r\n    ro.observe(container);\r\n    return () => ro.disconnect();\r\n  }, [zoomScale, isZoomed]);\r\n\r\n  // Preload the high-res image.\r\n  useEffect(() => {\r\n    if (!zoomPreload || !bgImage) return;\r\n    const img = new Image();\r\n    img.src = bgImage;\r\n  }, [zoomPreload, bgImage]);\r\n\r\n  // Cleanup rAF on unmount.\r\n  useEffect(\r\n    () => () => {\r\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\r\n    },\r\n    [],\r\n  );\r\n\r\n  const updatePointer = (clientX: number, clientY: number) => {\r\n    const container = containerRef.current;\r\n    if (!container) return;\r\n    const rect = container.getBoundingClientRect();\r\n    if (!rect.width || !rect.height) return;\r\n    pointerRef.current = {\r\n      x: clamp(clientX - rect.left, 0, rect.width),\r\n      y: clamp(clientY - rect.top, 0, rect.height),\r\n    };\r\n  };\r\n\r\n  const handlers = {\r\n    onMouseEnter: (e: React.MouseEvent) => {\r\n      if (isRecentTouch()) return;\r\n      updatePointer(e.clientX, e.clientY);\r\n      if (zoomType === \"hover\") setZoomed(true);\r\n      schedule();\r\n    },\r\n    onMouseMove: (e: React.MouseEvent) => {\r\n      if (isRecentTouch()) return;\r\n      updatePointer(e.clientX, e.clientY);\r\n      if (isZoomedRef.current) schedule();\r\n    },\r\n    onMouseLeave: () => {\r\n      if (isRecentTouch()) return;\r\n      if (zoomType === \"hover\") setZoomed(false);\r\n    },\r\n    onClick: (e: React.MouseEvent) => {\r\n      if (isRecentTouch()) return;\r\n      if (zoomType !== \"click\") return;\r\n      updatePointer(e.clientX, e.clientY);\r\n      setZoomed(!isZoomedRef.current);\r\n      schedule();\r\n    },\r\n    onDoubleClick: (e: React.MouseEvent) => {\r\n      if (isRecentTouch()) return;\r\n      if (zoomType !== \"double-click\") return;\r\n      updatePointer(e.clientX, e.clientY);\r\n      setZoomed(!isZoomedRef.current);\r\n      schedule();\r\n    },\r\n    onTouchStart: (e: React.TouchEvent) => {\r\n      lastTouchRef.current = Date.now();\r\n      const t = e.touches[0];\r\n      if (!t) return;\r\n      updatePointer(t.clientX, t.clientY);\r\n      if (zoomType === \"hover\") setZoomed(true);\r\n      else setZoomed(!isZoomedRef.current);\r\n      schedule();\r\n    },\r\n    onTouchMove: (e: React.TouchEvent) => {\r\n      lastTouchRef.current = Date.now();\r\n      const t = e.touches[0];\r\n      if (!t) return;\r\n      updatePointer(t.clientX, t.clientY);\r\n      schedule();\r\n    },\r\n    onTouchEnd: () => {\r\n      lastTouchRef.current = Date.now();\r\n      if (zoomType === \"hover\") setZoomed(false);\r\n    },\r\n    onKeyDown: (e: React.KeyboardEvent) => {\r\n      const container = containerRef.current;\r\n      if (!container) return;\r\n      const rect = container.getBoundingClientRect();\r\n      const step = 20;\r\n      const { x, y } = pointerRef.current;\r\n      let handled = true;\r\n\r\n      switch (e.key) {\r\n        case \"ArrowLeft\":\r\n          pointerRef.current.x = clamp(x - step, 0, rect.width);\r\n          break;\r\n        case \"ArrowRight\":\r\n          pointerRef.current.x = clamp(x + step, 0, rect.width);\r\n          break;\r\n        case \"ArrowUp\":\r\n          pointerRef.current.y = clamp(y - step, 0, rect.height);\r\n          break;\r\n        case \"ArrowDown\":\r\n          pointerRef.current.y = clamp(y + step, 0, rect.height);\r\n          break;\r\n        case \"Enter\":\r\n        case \" \":\r\n          setZoomed(!isZoomedRef.current);\r\n          break;\r\n        case \"Escape\":\r\n          setZoomed(false);\r\n          break;\r\n        default:\r\n          handled = false;\r\n      }\r\n      if (handled) {\r\n        e.preventDefault();\r\n        schedule();\r\n      }\r\n    },\r\n    onFocus: () => {\r\n      if (isRecentTouch()) return;\r\n      if (zoomType === \"hover\") setZoomed(true);\r\n    },\r\n    onBlur: () => {\r\n      if (zoomType === \"hover\") setZoomed(false);\r\n    },\r\n  };\r\n\r\n  return {\r\n    isZoomed,\r\n    containerRef,\r\n    imageRef,\r\n    lensRef,\r\n    paneRef,\r\n    cursorRef,\r\n    handlers,\r\n  };\r\n}\r\n","import { forwardRef } from \"react\";\r\nimport type { CSSProperties } from \"react\";\r\nimport { useImageMagnify } from \"../hooks/useImageMagnify\";\r\nimport type { UseImageMagnifyOptions } from \"../hooks/useImageMagnify\";\r\n\r\nexport interface ImageMagnifyProps extends UseImageMagnifyOptions {\r\n  src: string;\r\n  alt: string;\r\n  /** Rendered width of the image (height follows aspect ratio). */\r\n  width?: number | string;\r\n  mode?: \"lens\" | \"side-by-side\";\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  imageClassName?: string;\r\n  imageStyle?: CSSProperties;\r\n  lensClassName?: string;\r\n  lensStyle?: CSSProperties;\r\n  paneClassName?: string;\r\n  paneStyle?: CSSProperties;\r\n  paneWidth?: number;\r\n  paneHeight?: number;\r\n  lazy?: boolean;\r\n}\r\n\r\nexport const ImageMagnify = forwardRef<HTMLDivElement, ImageMagnifyProps>(\r\n  (props, ref) => {\r\n    const {\r\n      src,\r\n      alt,\r\n      width,\r\n      mode = \"side-by-side\",\r\n      className,\r\n      style,\r\n      imageClassName,\r\n      imageStyle,\r\n      lensClassName,\r\n      lensStyle,\r\n      paneClassName,\r\n      paneStyle,\r\n      paneWidth = 400,\r\n      paneHeight = 400,\r\n      lazy,\r\n      panePosition = \"right\",\r\n      lensSize = 150,\r\n      lensShape = \"circle\",\r\n      zoomType = \"hover\",\r\n      ...hookOptions\r\n    } = props;\r\n\r\n    const {\r\n      isZoomed,\r\n      containerRef,\r\n      imageRef,\r\n      lensRef,\r\n      paneRef,\r\n      cursorRef,\r\n      handlers,\r\n    } = useImageMagnify({ src, zoomType, lensSize, ...hookOptions });\r\n\r\n    const bgImage = props.zoomSrc || src;\r\n\r\n    const paneOffset: CSSProperties = {};\r\n    if (panePosition === \"right\") {\r\n      paneOffset.left = \"calc(100% + 12px)\";\r\n      paneOffset.top = 0;\r\n    } else if (panePosition === \"left\") {\r\n      paneOffset.right = \"calc(100% + 12px)\";\r\n      paneOffset.top = 0;\r\n    } else if (panePosition === \"top\") {\r\n      paneOffset.left = 0;\r\n      paneOffset.bottom = \"calc(100% + 12px)\";\r\n    } else {\r\n      paneOffset.left = 0;\r\n      paneOffset.top = \"calc(100% + 12px)\";\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={className}\r\n        style={{\r\n          position: \"relative\",\r\n          display: \"inline-block\",\r\n          lineHeight: 0,\r\n          width,\r\n          ...style,\r\n        }}\r\n      >\r\n        <div\r\n          ref={containerRef}\r\n          tabIndex={0}\r\n          role=\"img\"\r\n          aria-label={alt}\r\n          style={{\r\n            position: \"relative\",\r\n            overflow: \"hidden\",\r\n            width: \"100%\",\r\n            cursor:\r\n              zoomType === \"hover\"\r\n                ? \"crosshair\"\r\n                : isZoomed\r\n                  ? \"zoom-out\"\r\n                  : \"zoom-in\",\r\n            touchAction: \"none\",\r\n            outline: \"none\",\r\n            lineHeight: 0,\r\n          }}\r\n          {...handlers}\r\n        >\r\n          <img\r\n            ref={imageRef}\r\n            src={src}\r\n            alt={alt}\r\n            loading={lazy ? \"lazy\" : undefined}\r\n            draggable={false}\r\n            className={imageClassName}\r\n            style={{\r\n              display: \"block\",\r\n              width: \"100%\",\r\n              height: \"auto\",\r\n              userSelect: \"none\",\r\n              pointerEvents: \"none\",\r\n              ...imageStyle,\r\n            }}\r\n          />\r\n\r\n          {mode === \"lens\" && isZoomed && (\r\n            <div\r\n              ref={lensRef}\r\n              className={lensClassName}\r\n              style={{\r\n                position: \"absolute\",\r\n                top: 0,\r\n                left: 0,\r\n                width: lensSize,\r\n                height: lensSize,\r\n                borderRadius: lensShape === \"circle\" ? \"50%\" : 0,\r\n                backgroundImage: bgImage ? `url(\"${bgImage}\")` : undefined,\r\n                backgroundRepeat: \"no-repeat\",\r\n                pointerEvents: \"none\",\r\n                boxShadow: \"0 4px 12px rgba(0,0,0,0.25)\",\r\n                border: \"1px solid rgba(255,255,255,0.6)\",\r\n                willChange: \"transform\",\r\n                ...lensStyle,\r\n              }}\r\n            />\r\n          )}\r\n\r\n          {mode === \"side-by-side\" && isZoomed && (\r\n            <div\r\n              ref={cursorRef}\r\n              style={{\r\n                position: \"absolute\",\r\n                top: 0,\r\n                left: 0,\r\n                width: 12,\r\n                height: 12,\r\n                marginLeft: -6,\r\n                marginTop: -6,\r\n                borderRadius: \"50%\",\r\n                background: \"rgba(255,255,255,0.7)\",\r\n                border: \"1px solid rgba(0,0,0,0.5)\",\r\n                pointerEvents: \"none\",\r\n                boxShadow: \"0 0 0 1px rgba(255,255,255,0.8)\",\r\n                willChange: \"transform\",\r\n              }}\r\n            />\r\n          )}\r\n        </div>\r\n\r\n        {mode === \"side-by-side\" && isZoomed && (\r\n          <div\r\n            ref={paneRef}\r\n            className={paneClassName}\r\n            aria-hidden=\"true\"\r\n            style={{\r\n              position: \"absolute\",\r\n              width: paneWidth,\r\n              height: paneHeight,\r\n              backgroundImage: bgImage ? `url(\"${bgImage}\")` : undefined,\r\n              backgroundRepeat: \"no-repeat\",\r\n              border: \"1px solid #e5e5e5\",\r\n              borderRadius: 4,\r\n              boxShadow: \"0 8px 24px rgba(0,0,0,0.12)\",\r\n              pointerEvents: \"none\",\r\n              ...paneOffset,\r\n              ...paneStyle,\r\n            }}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nImageMagnify.displayName = \"ImageMagnify\";\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+
+type ZoomType = "hover" | "click" | "double-click";
+type PanePosition = "left" | "right" | "top" | "bottom";
+type LensShape = "circle" | "square";
+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;
+    /** Interaction that activates zoom. */
+    zoomType?: ZoomType;
+    /** 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;
+    /** Preload the high-res image to avoid a flash. */
+    zoomPreload?: boolean;
+    onZoomStart?: () => void;
+    onZoomEnd?: () => void;
+}
+declare function useImageMagnify(options?: UseImageMagnifyOptions): {
+    isZoomed: boolean;
+    containerRef: React.RefObject<HTMLDivElement>;
+    imageRef: React.RefObject<HTMLImageElement>;
+    lensRef: React.RefObject<HTMLDivElement>;
+    paneRef: React.RefObject<HTMLDivElement>;
+    cursorRef: React.RefObject<HTMLDivElement>;
+    handlers: {
+        onMouseEnter: (e: React.MouseEvent) => void;
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+        onClick: (e: React.MouseEvent) => void;
+        onDoubleClick: (e: React.MouseEvent) => void;
+        onTouchStart: (e: React.TouchEvent) => void;
+        onTouchMove: (e: React.TouchEvent) => void;
+        onTouchEnd: () => void;
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};
+
+interface ImageMagnifyProps extends UseImageMagnifyOptions {
+    src: string;
+    alt: string;
+    /** Rendered width of the image (height follows aspect ratio). */
+    width?: number | string;
+    mode?: "lens" | "side-by-side";
+    className?: string;
+    style?: CSSProperties;
+    imageClassName?: string;
+    imageStyle?: CSSProperties;
+    lensClassName?: string;
+    lensStyle?: CSSProperties;
+    paneClassName?: string;
+    paneStyle?: CSSProperties;
+    paneWidth?: number;
+    paneHeight?: number;
+    lazy?: boolean;
+}
+declare const ImageMagnify: React.ForwardRefExoticComponent<ImageMagnifyProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ImageMagnify, type ImageMagnifyProps, type LensShape, type PanePosition, type UseImageMagnifyOptions, type ZoomType, useImageMagnify };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+
+type ZoomType = "hover" | "click" | "double-click";
+type PanePosition = "left" | "right" | "top" | "bottom";
+type LensShape = "circle" | "square";
+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;
+    /** Interaction that activates zoom. */
+    zoomType?: ZoomType;
+    /** 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;
+    /** Preload the high-res image to avoid a flash. */
+    zoomPreload?: boolean;
+    onZoomStart?: () => void;
+    onZoomEnd?: () => void;
+}
+declare function useImageMagnify(options?: UseImageMagnifyOptions): {
+    isZoomed: boolean;
+    containerRef: React.RefObject<HTMLDivElement>;
+    imageRef: React.RefObject<HTMLImageElement>;
+    lensRef: React.RefObject<HTMLDivElement>;
+    paneRef: React.RefObject<HTMLDivElement>;
+    cursorRef: React.RefObject<HTMLDivElement>;
+    handlers: {
+        onMouseEnter: (e: React.MouseEvent) => void;
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+        onClick: (e: React.MouseEvent) => void;
+        onDoubleClick: (e: React.MouseEvent) => void;
+        onTouchStart: (e: React.TouchEvent) => void;
+        onTouchMove: (e: React.TouchEvent) => void;
+        onTouchEnd: () => void;
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};
+
+interface ImageMagnifyProps extends UseImageMagnifyOptions {
+    src: string;
+    alt: string;
+    /** Rendered width of the image (height follows aspect ratio). */
+    width?: number | string;
+    mode?: "lens" | "side-by-side";
+    className?: string;
+    style?: CSSProperties;
+    imageClassName?: string;
+    imageStyle?: CSSProperties;
+    lensClassName?: string;
+    lensStyle?: CSSProperties;
+    paneClassName?: string;
+    paneStyle?: CSSProperties;
+    paneWidth?: number;
+    paneHeight?: number;
+    lazy?: boolean;
+}
+declare const ImageMagnify: React.ForwardRefExoticComponent<ImageMagnifyProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ImageMagnify, type ImageMagnifyProps, type LensShape, type PanePosition, type UseImageMagnifyOptions, type ZoomType, useImageMagnify };