yet-another-react-lightbox 2.5.1 → 2.6.1

package/dist/plugins/inline/Inline.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { ACTION_CLOSE, clsx, createModule, cssClass, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE, } from "../../core/index.js";
-const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
+function InlineContainer({ inline: { className, ...rest } = {}, children }) {
+    return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
+}
 export const Inline = ({ augment, replace, remove }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({
         open: true,

package/dist/plugins/slideshow/SlideshowButton.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
-export declare const SlideshowButton: React.FC;
+/// <reference types="react" />
+export declare function SlideshowButton(): JSX.Element;

package/dist/plugins/slideshow/SlideshowButton.js

@@ -3,10 +3,10 @@ import { createIcon, IconButton, label, useController, useLoseFocus } from "../.
 import { useSlideshow } from "./SlideshowContext.js";
 const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" }));
 const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
-export const SlideshowButton = () => {
+export function SlideshowButton() {
     const { playing, disabled, togglePlaying } = useSlideshow();
     const { getLightboxProps } = useController();
     const { render, labels } = getLightboxProps();
     const focusListeners = useLoseFocus(disabled);
     return render.buttonSlideshow ? (React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, togglePlaying, disabled }))) : (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: togglePlaying, disabled: disabled, ...focusListeners }));
-};
+}

package/dist/plugins/slideshow/SlideshowContext.d.ts

@@ -1,9 +1,9 @@
-import { Component } from "../../types.js";
-type SlideshowContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type SlideshowContextType = {
     playing: boolean;
     disabled: boolean;
     togglePlaying: () => void;
 };
 export declare const useSlideshow: () => SlideshowContextType;
-export declare const SlideshowContextProvider: Component;
-export {};
+export declare function SlideshowContextProvider({ slides, slideshow, carousel: { finite }, children }: ComponentProps): JSX.Element;

package/dist/plugins/slideshow/SlideshowContext.js

@@ -3,7 +3,7 @@ import { ACTION_NEXT, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LO
 import { defaultSlideshowProps } from "./Slideshow.js";
 const SlideshowContext = React.createContext(null);
 export const useSlideshow = makeUseContext("useSlideshow", "SlideshowContext", SlideshowContext);
-export const SlideshowContextProvider = ({ slides, slideshow, carousel: { finite }, children }) => {
+export function SlideshowContextProvider({ slides, slideshow, carousel: { finite }, children }) {
     const { autoplay, delay } = { ...defaultSlideshowProps, ...slideshow };
     const [playing, setPlaying] = React.useState(autoplay);
     const scheduler = React.useRef();
@@ -55,4 +55,4 @@ export const SlideshowContextProvider = ({ slides, slideshow, carousel: { finite
     })), [subscribe, cancelScheduler, scheduleNextSlide]);
     const context = React.useMemo(() => ({ playing, disabled, togglePlaying }), [playing, disabled, togglePlaying]);
     return React.createElement(SlideshowContext.Provider, { value: context }, children);
-};
+}

package/dist/plugins/slideshow/index.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Slideshow } from "./Slideshow.js";
 declare module "../../types" {
     interface LightboxProps {
@@ -10,20 +9,22 @@ declare module "../../types" {
             delay?: number;
         };
     }
+    /** `render.buttonSlideshow` render function props */
+    type RenderSlideshowButtonProps = {
+        /** current slideshow autoplay status */
+        playing: boolean;
+        /** toggle slideshow autoplay status */
+        togglePlaying: () => void;
+        /** if `true`, the button is disabled */
+        disabled: boolean;
+    };
     interface Render {
         /** render custom Slideshow Play icon */
-        iconSlideshowPlay?: () => React.ReactNode;
+        iconSlideshowPlay?: RenderFunction;
         /** render custom Slideshow Pause icon */
-        iconSlideshowPause?: () => React.ReactNode;
+        iconSlideshowPause?: RenderFunction;
         /** render custom Slideshow button */
-        buttonSlideshow?: ({ playing, togglePlaying, disabled, }: {
-            /** current slideshow autoplay status */
-            playing: boolean;
-            /** toggle slideshow autoplay status */
-            togglePlaying: () => void;
-            /** if `true`, the button is disabled */
-            disabled: boolean;
-        }) => React.ReactNode;
+        buttonSlideshow?: RenderFunction<RenderSlideshowButtonProps>;
     }
 }
 export default Slideshow;

package/dist/plugins/thumbnails/Thumbnail.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { ContainerRect, ImageFit, LightboxProps, Slide } from "../../types.js";
-type FadeSettings = {
+export type FadeSettings = {
     duration: number;
     delay: number;
 };
-type ThumbnailProps = {
+export type ThumbnailProps = {
     rect: ContainerRect;
     slide: Slide | null;
     onClick: () => void;
@@ -16,5 +16,4 @@ type ThumbnailProps = {
     imageFit: ImageFit;
     style?: React.CSSProperties;
 };
-export declare const Thumbnail: React.FC<ThumbnailProps>;
-export {};
+export declare function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }: ThumbnailProps): JSX.Element;

package/dist/plugins/thumbnails/Thumbnail.js

@@ -3,7 +3,7 @@ import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, clsx, createIcon, cssClass, cssVar,
 import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
 const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
 const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
-const renderThumbnail = ({ slide, render, rect, imageFit }) => {
+function renderThumbnail({ slide, render, rect, imageFit }) {
     var _a;
     const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
     if (customThumbnail) {
@@ -21,25 +21,27 @@ const renderThumbnail = ({ slide, render, rect, imageFit }) => {
         return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
     }
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
-};
+}
 const activePrefix = makeComposePrefix("active");
 const fadeInPrefix = makeComposePrefix("fadein");
 const fadeOutPrefix = makeComposePrefix("fadeout");
 const placeholderPrefix = makeComposePrefix("placeholder");
 const DELAY = "delay";
 const DURATION = "duration";
-export const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
-        ...(fadeIn
-            ? {
-                [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
-                [cssVar(cssThumbnailPrefix(fadeInPrefix(DELAY)))]: `${fadeIn.delay}ms`,
-            }
-            : null),
-        ...(fadeOut
-            ? {
-                [cssVar(cssThumbnailPrefix(fadeOutPrefix(DURATION)))]: `${fadeOut.duration}ms`,
-                [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
-            }
-            : null),
-        ...style,
-    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+export function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) {
+    return (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
+            ...(fadeIn
+                ? {
+                    [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
+                    [cssVar(cssThumbnailPrefix(fadeInPrefix(DELAY)))]: `${fadeIn.delay}ms`,
+                }
+                : null),
+            ...(fadeOut
+                ? {
+                    [cssVar(cssThumbnailPrefix(fadeOutPrefix(DURATION)))]: `${fadeOut.duration}ms`,
+                    [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
+                }
+                : null),
+            ...style,
+        }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+}

package/dist/plugins/thumbnails/ThumbnailsContainer.d.ts

@@ -1,3 +1,4 @@
-import { Component } from "../../types.js";
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
 /** Thumbnails plugin component */
-export declare const ThumbnailsComponent: Component;
+export declare function ThumbnailsComponent({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }: ComponentProps): JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -3,7 +3,7 @@ import { clsx, cssClass } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
 import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
-export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }) => {
+export function ThumbnailsComponent({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }) {
     const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
     const ref = React.useRef(null);
     const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
@@ -11,4 +11,4 @@ export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, carou
         (thumbnails.position === "start" || thumbnails.position === "top") && track,
         React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
         (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
-};
+}

package/dist/plugins/thumbnails/ThumbnailsTrack.d.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { ContainerRect, DeepNonNullable, LightboxProps } from "../../types.js";
-type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
+export type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
+export type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;
     thumbnails: ThumbnailsInternal;
     thumbnailRect: ContainerRect;
 };
-export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;
-export {};
+export declare function ThumbnailsTrack({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }: ThumbnailsTrackProps): JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -3,9 +3,13 @@ import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, cls
 import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
 import { Thumbnail } from "./Thumbnail.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
-const isHorizontal = (position) => ["top", "bottom"].includes(position);
-const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }) => {
+function isHorizontal(position) {
+    return ["top", "bottom"].includes(position);
+}
+function boxSize(thumbnails, dimension, includeGap) {
+    return dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
+}
+export function ThumbnailsTrack({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }) {
     const track = React.useRef(null);
     const { globalIndex, animation } = useLightboxState().state;
     const { publish, subscribe } = useEvents();
@@ -28,6 +32,7 @@ export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnail
                 { transform: "translateY(0)" },
             ],
         duration: animationDuration,
+        easing: animation === null || animation === void 0 ? void 0 : animation.easing,
     }));
     const handleControllerSwipe = useEventCallback(() => {
         let animationOffset;
@@ -128,4 +133,4 @@ export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnail
             return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), style: styles.thumbnail }));
         })),
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
-};
+}

package/dist/plugins/thumbnails/index.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Thumbnails } from "./Thumbnails.js";
 type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types" {
@@ -25,13 +24,16 @@ declare module "../../types" {
             vignette?: boolean;
         };
     }
+    /** `render.thumbnail` render function props */
+    type RenderThumbnailProps = {
+        slide: Slide;
+        rect: ContainerRect;
+        render: Render;
+        imageFit: ImageFit;
+    };
     interface Render {
-        thumbnail?: ({ slide, rect, render, imageFit, }: {
-            slide: Slide;
-            rect: ContainerRect;
-            render: Render;
-            imageFit: ImageFit;
-        }) => React.ReactNode;
+        /** render custom thumbnail */
+        thumbnail?: RenderFunction<RenderThumbnailProps>;
     }
     interface SlotType {
         /** thumbnail customization slot */

package/dist/plugins/video/VideoSlide.d.ts

@@ -1,9 +1,8 @@
-import * as React from "react";
+/// <reference types="react" />
 import { SlideVideo } from "./index.js";
-type VideoSlideProps = {
+export type VideoSlideProps = {
     slide: SlideVideo;
     offset: number;
 };
 /** Video slide */
-export declare const VideoSlide: React.FC<VideoSlideProps>;
-export {};
+export declare function VideoSlide({ slide, offset }: VideoSlideProps): JSX.Element;

package/dist/plugins/video/VideoSlide.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, clsx, cssClass, useContainerRect, useController, useEventCallback, useEvents, } from "../../core/index.js";
 import { defaultVideoProps } from "./Video.js";
-export const VideoSlide = ({ slide, offset }) => {
+export function VideoSlide({ slide, offset }) {
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
     const videoRef = React.useRef(null);
@@ -67,4 +67,4 @@ export const VideoSlide = ({ slide, offset }) => {
         }, onEnded: () => {
             publish(ACTIVE_SLIDE_COMPLETE);
         } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
-};
+}

package/dist/plugins/zoom/ResponsiveImage.d.ts

@@ -1,12 +1,11 @@
-import * as React from "react";
+/// <reference types="react" />
 import { ImageSlideProps } from "../../core/index.js";
 import { ImageSource, SlideImage } from "../../types.js";
-type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
+export type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
     srcSet: [ImageSource, ...ImageSource[]];
 };
-export declare const isResponsiveImageSlide: (slide: SlideImage) => slide is ResponsiveImageSlide;
-type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
+export declare function isResponsiveImageSlide(slide: SlideImage): slide is ResponsiveImageSlide;
+export type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
     slide: ResponsiveImageSlide;
 };
-export declare const ResponsiveImage: React.FC<ResponsiveImageProps>;
-export {};
+export declare function ResponsiveImage(props: ResponsiveImageProps): JSX.Element;

package/dist/plugins/zoom/ResponsiveImage.js

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { devicePixelRatio, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageSlide, useEventCallback, useLayoutEffect, } from "../../core/index.js";
-export const isResponsiveImageSlide = (slide) => { var _a; return (((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; };
-export const ResponsiveImage = (props) => {
+export function isResponsiveImageSlide(slide) {
+    var _a;
+    return (((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+}
+export function ResponsiveImage(props) {
     var _a, _b;
     const [state, setState] = React.useState({});
     const { current, preload } = state;
@@ -44,4 +47,4 @@ export const ResponsiveImage = (props) => {
                 iconError: () => null,
             } })),
         current && (React.createElement(ImageSlide, { key: "current", ...props, slide: { ...image, src: current, srcSet: undefined }, style: style }))));
-};
+}

package/dist/plugins/zoom/ZoomButtonsGroup.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxProps } from "../../types.js";
 type ZoomButtonsGroupProps = Pick<LightboxProps, "labels" | "render">;
-export declare const ZoomButtonsGroup: React.FC<ZoomButtonsGroupProps>;
+export declare function ZoomButtonsGroup({ labels, render }: ZoomButtonsGroupProps): JSX.Element;
 export {};

package/dist/plugins/zoom/ZoomButtonsGroup.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useController } from "../../core/index.js";
 import { ZoomButton } from "./ZoomButton.js";
 import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
-export const ZoomButtonsGroup = ({ labels, render }) => {
+export function ZoomButtonsGroup({ labels, render }) {
     const zoomInRef = React.useRef(null);
     const zoomOutRef = React.useRef(null);
     const { transferFocus } = useController();
@@ -20,4 +20,4 @@ export const ZoomButtonsGroup = ({ labels, render }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(ZoomButton, { ref: zoomInRef, key: ACTION_ZOOM_IN, zoomIn: true, labels: labels, render: render, onLoseFocus: focusZoomOut }),
         React.createElement(ZoomButton, { ref: zoomOutRef, key: ACTION_ZOOM_OUT, labels: labels, render: render, onLoseFocus: focusZoomIn })));
-};
+}

package/dist/plugins/zoom/ZoomContainer.d.ts

@@ -1,8 +1,9 @@
-import * as React from "react";
+/// <reference types="react" />
 import { ContainerRect, LightboxProps, Slide } from "../../types.js";
-/** Zoom container */
-export declare const ZoomContainer: React.FC<Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation" | "on"> & {
+export type ZoomContainerProps = Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation" | "on"> & {
     slide: Slide;
     offset: number;
     rect: ContainerRect;
-}>;
+};
+/** Zoom container */
+export declare function ZoomContainer({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on, }: ZoomContainerProps): JSX.Element | null;

package/dist/plugins/zoom/ZoomContainer.js

@@ -4,7 +4,7 @@ import { useZoom } from "./ZoomContext.js";
 import { defaultZoomProps } from "./Zoom.js";
 import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
 import { isResponsiveImageSlide, ResponsiveImage } from "./ResponsiveImage.js";
-const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+function getSlideRects(slide, cover, maxZoomPixelRatio, rect) {
     var _a, _b;
     let slideRect = { width: 0, height: 0 };
     let maxSlideRect = { width: 0, height: 0 };
@@ -34,9 +34,11 @@ const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
         }
     }
     return { slideRect, maxSlideRect };
-};
-const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
-export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on }) => {
+}
+function distance(pointerA, pointerB) {
+    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+}
+export function ZoomContainer({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on, }) {
     var _a;
     const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
     const { currentIndex } = useLightboxState().state;
@@ -96,12 +98,10 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
         if (zoomAnimationStart.current && containerRef.current) {
             zoomAnimation.current = (_c = (_b = containerRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, [
                 { transform: zoomAnimationStart.current },
-                {
-                    transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)`,
-                },
+                { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` },
             ], {
-                duration: reduceMotion ? 0 : (_d = animation.zoom) !== null && _d !== void 0 ? _d : 500,
-                easing: zoomAnimation ? "ease-out" : "ease-in-out",
+                duration: !reduceMotion ? (_d = animation.zoom) !== null && _d !== void 0 ? _d : 500 : 0,
+                easing: zoomAnimation.current ? "ease-out" : "ease-in-out",
             });
             zoomAnimationStart.current = undefined;
             if (zoomAnimation.current) {
@@ -319,4 +319,4 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
     return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), ...(offset === 0
             ? { style: { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` } }
             : null) }, rendered)) : null;
-};
+}

package/dist/plugins/zoom/ZoomContext.d.ts

@@ -1,5 +1,6 @@
-import { Component } from "../../types.js";
-type ZoomContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type ZoomContextType = {
     isMinZoom: boolean;
     isMaxZoom: boolean;
     isZoomSupported: boolean;
@@ -7,5 +8,4 @@ type ZoomContextType = {
     setIsMaxZoom: (value: boolean) => void;
 };
 export declare const useZoom: () => ZoomContextType;
-export declare const ZoomContextProvider: Component;
-export {};
+export declare function ZoomContextProvider({ slides, children }: ComponentProps): JSX.Element;

package/dist/plugins/zoom/ZoomContext.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { isImageSlide, makeUseContext, useEventCallback, useLayoutEffect, useLightboxState } from "../../core/index.js";
 const ZoomContext = React.createContext(null);
 export const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
-export const ZoomContextProvider = ({ slides, children }) => {
+export function ZoomContextProvider({ slides, children }) {
     const [isMinZoom, setIsMinZoom] = React.useState(false);
     const [isMaxZoom, setIsMaxZoom] = React.useState(false);
     const [isZoomSupported, setIsZoomSupported] = React.useState(false);
@@ -17,4 +17,4 @@ export const ZoomContextProvider = ({ slides, children }) => {
         setIsMaxZoom,
     }), [isMinZoom, isMaxZoom, isZoomSupported]);
     return React.createElement(ZoomContext.Provider, { value: context }, children);
-};
+}

package/dist/plugins/zoom/index.d.ts

@@ -1,16 +1,7 @@
 import * as React from "react";
-import { LightboxProps } from "../../types.js";
 import { Zoom } from "./Zoom.js";
 export declare const ACTION_ZOOM_IN = "zoom-in";
 export declare const ACTION_ZOOM_OUT = "zoom-out";
-/** Custom zoom button render function */
-type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBlur, }: Pick<LightboxProps, "labels"> & {
-    ref: React.ForwardedRef<HTMLButtonElement>;
-    disabled: boolean;
-    onClick: () => void;
-    onFocus: () => void;
-    onBlur: () => void;
-}) => React.ReactNode;
 declare module "../../types" {
     interface LightboxProps {
         /** Zoom plugin settings */
@@ -39,15 +30,23 @@ declare module "../../types" {
         /** zoom animation duration */
         zoom?: number;
     }
+    /** `render.buttonZoomIn` and `render.buttonZoomOut` render function props */
+    type RenderZoomButtonProps = Pick<LightboxProps, "labels"> & {
+        ref: React.ForwardedRef<HTMLButtonElement>;
+        disabled: boolean;
+        onClick: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
     interface Render {
         /** render custom Zoom in button */
-        buttonZoomIn?: RenderZoomButton;
+        buttonZoomIn?: RenderFunction<RenderZoomButtonProps>;
         /** render custom Zoom in button */
-        buttonZoomOut?: RenderZoomButton;
+        buttonZoomOut?: RenderFunction<RenderZoomButtonProps>;
         /** render custom Zoom in icon */
-        iconZoomIn?: () => React.ReactNode;
+        iconZoomIn?: RenderFunction;
         /** render custom Zoom out icon */
-        iconZoomOut?: () => React.ReactNode;
+        iconZoomOut?: RenderFunction;
     }
     interface Callbacks {
         zoom?: (level: number) => void;

package/dist/props.d.ts

@@ -1,2 +1,6 @@
 import { LightboxProps } from "./types.js";
+export declare const AnimationDefaultProps: {
+    fade: number;
+    swipe: number;
+};
 export declare const LightboxDefaultProps: LightboxProps;

package/dist/props.js

@@ -1,4 +1,8 @@
 import { ACTION_CLOSE, IMAGE_FIT_CONTAIN } from "./core/consts.js";
+export const AnimationDefaultProps = {
+    fade: 330,
+    swipe: 500,
+};
 export const LightboxDefaultProps = {
     open: false,
     close: () => { },
@@ -8,10 +12,7 @@ export const LightboxDefaultProps = {
     plugins: [],
     toolbar: { buttons: [ACTION_CLOSE] },
     labels: {},
-    animation: {
-        fade: 330,
-        swipe: 500,
-    },
+    animation: AnimationDefaultProps,
     carousel: {
         finite: false,
         preload: 2,

package/dist/styles.css

@@ -59,6 +59,7 @@
 .yarl__slide {
   flex: 1;
   position: relative;
+  overflow: hidden;
   padding: calc(var(--yarl__carousel_padding_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (var(--yarl__carousel_slides_count) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_padding_percent, 0) * 1%);
 }
 [dir=rtl] .yarl__slide {