uix-image-magnify 0.1.4 → 0.2.0

package/dist/ImageMagnify-zNjM2jVN.d.cts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { CSSProperties, ImgHTMLAttributes } from 'react';
+
+type ZoomType = "hover" | "click" | "double-click" | "hold" | "wheel" | "none";
+type PanePosition = "left" | "right" | "top" | "bottom";
+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;
+    onZoomChange?: (scale: number) => void;
+}
+declare function useImageMagnify(options?: UseImageMagnifyOptions): {
+    isZoomed: boolean;
+    zoomScale: number;
+    bgImage: string | undefined;
+    containerRef: React.RefObject<HTMLDivElement>;
+    imageRef: React.RefObject<HTMLImageElement>;
+    lensRef: React.RefObject<HTMLDivElement>;
+    paneRef: React.RefObject<HTMLDivElement>;
+    cursorRef: React.RefObject<HTMLDivElement>;
+    handlers: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+        onPointerDown: (e: React.PointerEvent) => void;
+        onPointerMove: (e: React.PointerEvent) => void;
+        onPointerUp: (e: React.PointerEvent) => void;
+        onPointerCancel: () => void;
+        onDoubleClick: (e: React.MouseEvent) => 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;
+    className?: string;
+    style?: CSSProperties;
+    imageClassName?: string;
+    imageStyle?: CSSProperties;
+    lensClassName?: string;
+    lensStyle?: CSSProperties;
+    paneClassName?: string;
+    paneStyle?: CSSProperties;
+    paneWidth?: number;
+    paneHeight?: number;
+    lazy?: boolean;
+    /** Extra attributes forwarded to the underlying <img>. */
+    imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style">;
+    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 };

package/dist/ImageMagnify-zNjM2jVN.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { CSSProperties, ImgHTMLAttributes } from 'react';
+
+type ZoomType = "hover" | "click" | "double-click" | "hold" | "wheel" | "none";
+type PanePosition = "left" | "right" | "top" | "bottom";
+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;
+    onZoomChange?: (scale: number) => void;
+}
+declare function useImageMagnify(options?: UseImageMagnifyOptions): {
+    isZoomed: boolean;
+    zoomScale: number;
+    bgImage: string | undefined;
+    containerRef: React.RefObject<HTMLDivElement>;
+    imageRef: React.RefObject<HTMLImageElement>;
+    lensRef: React.RefObject<HTMLDivElement>;
+    paneRef: React.RefObject<HTMLDivElement>;
+    cursorRef: React.RefObject<HTMLDivElement>;
+    handlers: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+        onPointerDown: (e: React.PointerEvent) => void;
+        onPointerMove: (e: React.PointerEvent) => void;
+        onPointerUp: (e: React.PointerEvent) => void;
+        onPointerCancel: () => void;
+        onDoubleClick: (e: React.MouseEvent) => 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;
+    className?: string;
+    style?: CSSProperties;
+    imageClassName?: string;
+    imageStyle?: CSSProperties;
+    lensClassName?: string;
+    lensStyle?: CSSProperties;
+    paneClassName?: string;
+    paneStyle?: CSSProperties;
+    paneWidth?: number;
+    paneHeight?: number;
+    lazy?: boolean;
+    /** Extra attributes forwarded to the underlying <img>. */
+    imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style">;
+    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 };

package/dist/index.cjs

@@ -610,8 +610,369 @@ 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",
+  {
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
+  }
+);
+var ArrowRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
+  }
+);
+var defaultArrowBaseStyle = {
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  width: 40,
+  height: 40,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(255,255,255,0.85)",
+  border: "1px solid rgba(0,0,0,0.12)",
+  borderRadius: 9999,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+  cursor: "pointer",
+  zIndex: 10,
+  color: "#111",
+  padding: 0,
+  transition: "background 0.15s ease",
+  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,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var ImageMagnifyGallery = react.forwardRef((props, ref) => {
+  const {
+    images,
+    alt,
+    activeIndex: controlledActiveIndex,
+    defaultIndex = 0,
+    onIndexChange,
+    showArrows = true,
+    showThumbnails = true,
+    showCounter = false,
+    loop = true,
+    enableKeyboard = true,
+    preloadAdjacent = true,
+    className,
+    style,
+    viewportClassName,
+    viewportStyle,
+    thumbnailContainerClassName,
+    thumbnailContainerStyle,
+    thumbnailClassName,
+    thumbnailActiveClassName,
+    thumbnailStyle,
+    thumbnailActiveStyle,
+    arrowClassName,
+    arrowStyle,
+    thumbnailSize = 80,
+    thumbnailGap = 8,
+    prevArrow,
+    nextArrow,
+    ...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);
+  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);
+    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]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className,
+      style,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": `${alt} \u2014 image gallery`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: viewportClassName,
+            style: {
+              position: "relative",
+              width: "fit-content",
+              maxWidth: "100%",
+              ...viewportStyle
+            },
+            tabIndex: enableKeyboard && hasMultiple ? 0 : void 0,
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ImageMagnify, { ...magnifyProps, src: currentSrc, alt }),
+              showArrows && hasMultiple && canPrev && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: prev,
+                  className: arrowClassName,
+                  style: {
+                    ...defaultArrowBaseStyle,
+                    left: 12,
+                    ...arrowStyle
+                  },
+                  "aria-label": "Previous image",
+                  children: prevArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon, {})
+                }
+              ),
+              showArrows && hasMultiple && canNext && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: next,
+                  className: arrowClassName,
+                  style: {
+                    ...defaultArrowBaseStyle,
+                    right: 12,
+                    ...arrowStyle
+                  },
+                  "aria-label": "Next image",
+                  children: nextArrow ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, {})
+                }
+              ),
+              showCounter && hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    bottom: 12,
+                    right: 12,
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#fff",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    padding: "4px 8px",
+                    borderRadius: 4,
+                    zIndex: 10,
+                    pointerEvents: "none"
+                  },
+                  children: [
+                    index + 1,
+                    " / ",
+                    images.length
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: liveText })
+            ]
+          }
+        ),
+        showThumbnails && hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: thumbStripRef,
+            className: thumbnailContainerClassName,
+            role: "tablist",
+            "aria-label": "Choose image",
+            style: {
+              ...defaultThumbStripStyle,
+              gap: thumbnailGap,
+              marginTop: 12,
+              ...thumbnailContainerStyle
+            },
+            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
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+ImageMagnifyGallery.displayName = "ImageMagnifyGallery";
 
 exports.ImageMagnify = ImageMagnify;
+exports.ImageMagnifyGallery = ImageMagnifyGallery;
 exports.useImageMagnify = useImageMagnify;
+exports.useImageSlider = useImageSlider;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map