react-smart-image-viewer 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,255 @@
+/**
+ * react-smart-image-viewer
+ *
+ * A high-performance, TypeScript-first React image viewer
+ * with zoom, pan, keyboard, and mobile gesture support.
+ *
+ * @packageDocumentation
+ */
+
+import { default as default_2 } from 'react';
+
+export declare const ChevronLeftIcon: default_2.FC<IconProps>;
+
+export declare const ChevronRightIcon: default_2.FC<IconProps>;
+
+/**
+ * Clamps a value between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+
+/**
+ * SVG Icons for the ImageViewer controls
+ * Using inline SVGs to avoid external dependencies
+ */
+export declare const CloseIcon: default_2.FC<IconProps>;
+
+/**
+ * Props passed to custom controls renderer
+ */
+export declare interface ControlsRenderProps {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    currentZoom: number;
+    minZoom: number;
+    maxZoom: number;
+    close: () => void;
+}
+
+declare interface IconProps {
+    className?: string;
+    'aria-hidden'?: boolean;
+}
+
+/**
+ * Input type that accepts either string URLs or ImageSource objects
+ */
+export declare type ImageInput = string | ImageSource;
+
+/**
+ * Configuration for image sources with optional metadata
+ */
+export declare interface ImageSource {
+    /** Image URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Optional thumbnail URL for gallery previews */
+    thumbnail?: string;
+    /** Optional title to display */
+    title?: string;
+}
+
+/**
+ * ImageViewer - A high-performance image viewer with zoom, pan, and gallery support
+ *
+ * @example
+ * ```tsx
+ * // Single image
+ * <ImageViewer images="https://example.com/image.jpg" isOpen={isOpen} onClose={() => setIsOpen(false)} />
+ *
+ * // Gallery
+ * <ImageViewer images={['image1.jpg', 'image2.jpg']} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+ * ```
+ */
+export declare const ImageViewer: default_2.FC<ImageViewerProps>;
+
+/**
+ * Props for the ImageViewer component
+ */
+export declare interface ImageViewerProps {
+    /** Single image or array of images */
+    images: ImageInput | ImageInput[];
+    /** Initial image index for gallery mode */
+    initialIndex?: number;
+    /** Controlled mode: whether the viewer is open */
+    isOpen?: boolean;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
+    /** Callback when viewer closes */
+    onClose?: () => void;
+    /** Callback when image index changes */
+    onIndexChange?: (index: number) => void;
+    /** Zoom increment per step */
+    zoomStep?: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Whether to show control buttons */
+    showControls?: boolean;
+    /** Whether to show navigation arrows */
+    showNavigation?: boolean;
+    /** Whether to show image counter */
+    showCounter?: boolean;
+    /** Whether to close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Whether to close on ESC key */
+    closeOnEscape?: boolean;
+    /** Whether to enable keyboard navigation */
+    enableKeyboardNavigation?: boolean;
+    /** Whether to loop gallery navigation */
+    loop?: boolean;
+    /** Custom class name for the overlay */
+    className?: string;
+    /** Custom class name for the image */
+    imageClassName?: string;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Accessible label for the viewer */
+    ariaLabel?: string;
+    /** Custom render function for controls */
+    renderControls?: (props: ControlsRenderProps) => React.ReactNode;
+    /** Custom render function for navigation */
+    renderNavigation?: (props: NavigationRenderProps) => React.ReactNode;
+}
+
+/**
+ * Check if we're in SSR environment
+ */
+export declare function isSSR(): boolean;
+
+/**
+ * Detects if device supports touch
+ */
+export declare function isTouchDevice(): boolean;
+
+/**
+ * Props passed to custom navigation renderer
+ */
+export declare interface NavigationRenderProps {
+    goToPrevious: () => void;
+    goToNext: () => void;
+    currentIndex: number;
+    totalImages: number;
+    canGoPrevious: boolean;
+    canGoNext: boolean;
+}
+
+/**
+ * Normalized image type used internally
+ */
+declare type NormalizedImage = ImageSource;
+
+/**
+ * Normalizes image input to consistent ImageSource format
+ */
+export declare function normalizeImage(image: ImageInput): NormalizedImage;
+
+/**
+ * Normalizes array of images
+ */
+export declare function normalizeImages(images: ImageInput | ImageInput[]): NormalizedImage[];
+
+export declare const ResetIcon: default_2.FC<IconProps>;
+
+/**
+ * Transform state for zoom and pan
+ */
+export declare interface TransformState {
+    scale: number;
+    translateX: number;
+    translateY: number;
+}
+
+/**
+ * Hook for controlling the ImageViewer programmatically
+ *
+ * @example
+ * ```tsx
+ * const viewer = useImageViewer({ totalImages: 5 });
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => viewer.open(0)}>Open Gallery</button>
+ *     <ImageViewer images={images} {...viewer.getViewerProps()} />
+ *   </>
+ * );
+ * ```
+ */
+export declare function useImageViewer(options?: UseImageViewerOptions): UseImageViewerReturn;
+
+/**
+ * Options for useImageViewer hook
+ */
+export declare interface UseImageViewerOptions {
+    /** Initial open state */
+    defaultOpen?: boolean;
+    /** Initial image index */
+    defaultIndex?: number;
+    /** Total number of images */
+    totalImages?: number;
+    /** Zoom step */
+    zoomStep?: number;
+    /** Minimum zoom */
+    minZoom?: number;
+    /** Maximum zoom */
+    maxZoom?: number;
+    /** Loop navigation */
+    loop?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Callback when index changes */
+    onIndexChange?: (index: number) => void;
+}
+
+/**
+ * Return type for useImageViewer hook
+ */
+export declare interface UseImageViewerReturn {
+    /** Whether the viewer is open */
+    isOpen: boolean;
+    /** Open the viewer */
+    open: (index?: number) => void;
+    /** Close the viewer */
+    close: () => void;
+    /** Toggle the viewer */
+    toggle: () => void;
+    /** Current image index */
+    currentIndex: number;
+    /** Set current image index */
+    setCurrentIndex: (index: number) => void;
+    /** Go to next image */
+    goToNext: () => void;
+    /** Go to previous image */
+    goToPrevious: () => void;
+    /** Current zoom level */
+    zoom: number;
+    /** Zoom in */
+    zoomIn: () => void;
+    /** Zoom out */
+    zoomOut: () => void;
+    /** Reset zoom to 1 */
+    resetZoom: () => void;
+    /** Set specific zoom level */
+    setZoom: (zoom: number) => void;
+    /** Props to spread on ImageViewer component */
+    getViewerProps: () => Partial<ImageViewerProps>;
+}
+
+export declare const ZoomInIcon: default_2.FC<IconProps>;
+
+export declare const ZoomOutIcon: default_2.FC<IconProps>;
+
+export { }