uix-image-magnify 0.1.3 → 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 };