yet-another-react-lightbox 2.6.2 → 3.0.0

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -1,33 +1,36 @@
 import * as React from "react";
-import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, clsx, cssClass, cssVar, getSlide, useAnimation, useEventCallback, useEvents, useLightboxState, useRTL, } from "../../core/index.js";
+import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, clsx, cssClass, cssVar, getSlide, useAnimation, useEventCallback, useEvents, useLightboxProps, useLightboxState, useRTL, } from "../../core/index.js";
 import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
 import { Thumbnail } from "./Thumbnail.js";
-import { defaultThumbnailsProps } from "./Thumbnails.js";
+import { defaultThumbnailsProps, useThumbnailsProps } from "./props.js";
 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, }) {
+export function ThumbnailsTrack({ containerRef }) {
     const track = React.useRef(null);
-    const { globalIndex, animation } = useLightboxState().state;
+    const { carousel, styles } = useLightboxProps();
+    const { slides, globalIndex, animation } = useLightboxState().state;
     const { publish, subscribe } = useEvents();
     const isRTL = useRTL();
+    const thumbnails = useThumbnailsProps();
+    const { position, width, height, border, borderRadius, padding, gap, vignette } = thumbnails;
     const index = globalIndex;
     const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
     const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
-    const animate = useAnimation(track, (snapshot) => ({
-        keyframes: isHorizontal(thumbnails.position)
+    const { prepareAnimation } = useAnimation(track, (snapshot) => ({
+        keyframes: isHorizontal(position)
             ? [
                 {
-                    transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, thumbnails.width, true) * offset + snapshot}px)`,
+                    transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, width, true) * offset + snapshot}px)`,
                 },
                 { transform: "translateX(0)" },
             ]
             : [
                 {
-                    transform: `translateY(${boxSize(thumbnails, thumbnails.height, true) * offset + snapshot}px)`,
+                    transform: `translateY(${boxSize(thumbnails, height, true) * offset + snapshot}px)`,
                 },
                 { transform: "translateY(0)" },
             ],
@@ -36,17 +39,17 @@ export function ThumbnailsTrack({ container, slides, carousel, render, thumbnail
     }));
     const handleControllerSwipe = useEventCallback(() => {
         let animationOffset;
-        if (container.current && track.current) {
-            const containerRect = container.current.getBoundingClientRect();
+        if (containerRef.current && track.current) {
+            const containerRect = containerRef.current.getBoundingClientRect();
             const trackRect = track.current.getBoundingClientRect();
-            animationOffset = isHorizontal(thumbnails.position)
+            animationOffset = isHorizontal(position)
                 ? trackRect.left - containerRect.left - (containerRect.width - trackRect.width) / 2
                 : trackRect.top - containerRect.top - (containerRect.height - trackRect.height) / 2;
         }
         else {
             animationOffset = 0;
         }
-        animate(animationOffset);
+        prepareAnimation(animationOffset);
     });
     React.useEffect(() => cleanup(subscribe(ACTION_SWIPE, handleControllerSwipe)), [subscribe, handleControllerSwipe]);
     const { finite } = carousel;
@@ -89,7 +92,6 @@ export function ThumbnailsTrack({ container, slides, carousel, render, thumbnail
             publish(ACTION_PREV, { count: index - slideIndex });
         }
     };
-    const { width, height, border, borderRadius, padding, gap, imageFit, vignette } = thumbnails;
     return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
             ...(width !== defaultThumbnailsProps.width
                 ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
@@ -130,7 +132,7 @@ export function ThumbnailsTrack({ container, slides, carousel, render, thumbnail
                         : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            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 }));
+            return (React.createElement(Thumbnail, { key: slideIndex, slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
         })),
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
 }

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

@@ -1,6 +1,6 @@
 import { Thumbnails } from "./Thumbnails.js";
 type Position = "top" | "bottom" | "start" | "end";
-declare module "../../types" {
+declare module "../../types.js" {
     interface LightboxProps {
         /** Thumbnails plugin settings */
         thumbnails?: {
@@ -24,6 +24,10 @@ declare module "../../types" {
             vignette?: boolean;
         };
     }
+    interface Render {
+        /** render custom thumbnail */
+        thumbnail?: RenderFunction<RenderThumbnailProps>;
+    }
     /** `render.thumbnail` render function props */
     type RenderThumbnailProps = {
         slide: Slide;
@@ -31,10 +35,6 @@ declare module "../../types" {
         render: Render;
         imageFit: ImageFit;
     };
-    interface Render {
-        /** render custom thumbnail */
-        thumbnail?: RenderFunction<RenderThumbnailProps>;
-    }
     interface SlotType {
         /** thumbnail customization slot */
         thumbnail: "thumbnail";

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

@@ -0,0 +1,34 @@
+import { LightboxProps } from "../../types.js";
+export declare const defaultThumbnailsProps: {
+    position: "bottom";
+    width: number;
+    height: number;
+    border: number;
+    borderRadius: number;
+    padding: number;
+    gap: number;
+    imageFit: "contain";
+    vignette: boolean;
+};
+export declare const resolveThumbnailsProps: (thumbnails: LightboxProps["thumbnails"]) => {
+    position: "end" | "start" | "bottom" | "top";
+    width: number;
+    height: number;
+    border: number;
+    borderRadius: number;
+    padding: number;
+    gap: number;
+    imageFit: import("../../types.js").ImageFit;
+    vignette: boolean;
+};
+export declare function useThumbnailsProps(): {
+    position: "end" | "start" | "bottom" | "top";
+    width: number;
+    height: number;
+    border: number;
+    borderRadius: number;
+    padding: number;
+    gap: number;
+    imageFit: import("../../types.js").ImageFit;
+    vignette: boolean;
+};

package/dist/plugins/thumbnails/props.js

@@ -0,0 +1,20 @@
+import { useLightboxProps } from "../../core/index.js";
+export const defaultThumbnailsProps = {
+    position: "bottom",
+    width: 120,
+    height: 80,
+    border: 1,
+    borderRadius: 4,
+    padding: 4,
+    gap: 16,
+    imageFit: "contain",
+    vignette: true,
+};
+export const resolveThumbnailsProps = (thumbnails) => ({
+    ...defaultThumbnailsProps,
+    ...thumbnails,
+});
+export function useThumbnailsProps() {
+    const { thumbnails } = useLightboxProps();
+    return resolveThumbnailsProps(thumbnails);
+}

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

@@ -1,7 +1,3 @@
-import { Plugin } from "../../types.js";
-export declare const defaultVideoProps: {
-    controls: boolean;
-    playsInline: boolean;
-};
+import { PluginProps } from "../../types.js";
 /** Video plugin */
-export declare const Video: Plugin;
+export declare function Video({ augment }: PluginProps): void;

package/dist/plugins/video/Video.js

@@ -1,21 +1,21 @@
 import * as React from "react";
+import { resolveVideoProps } from "./props.js";
 import { VideoSlide } from "./VideoSlide.js";
-export const defaultVideoProps = {
-    controls: true,
-    playsInline: true,
-};
-export const Video = ({ augment }) => {
-    augment(({ render: { slide: renderSlide, ...restRender }, video: videoProps, ...restProps }) => ({
+function isVideoSlide(slide) {
+    return slide.type === "video";
+}
+export function Video({ augment }) {
+    augment(({ render: { slide: renderSlide, ...restRender }, video, ...restProps }) => ({
         render: {
-            slide: (slide, offset, rect) => {
-                if (slide.type === "video") {
+            slide: ({ slide, offset, rect }) => {
+                if (isVideoSlide(slide)) {
                     return (React.createElement(VideoSlide, { key: `${slide.sources.map((source) => source.src).join(" ")}`, slide: slide, offset: offset }));
                 }
-                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide, offset, rect);
+                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect });
             },
             ...restRender,
         },
-        video: { ...defaultVideoProps, ...videoProps },
+        video: resolveVideoProps(video),
         ...restProps,
     }));
-};
+}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SlideVideo } from "./index.js";
+import { SlideVideo } from "../../types.js";
 export type VideoSlideProps = {
     slide: SlideVideo;
     offset: number;

package/dist/plugins/video/VideoSlide.js

@@ -1,11 +1,11 @@
 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";
+import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, clsx, cssClass, useContainerRect, useEventCallback, useEvents, } from "../../core/index.js";
+import { useVideoProps } from "./props.js";
 export function VideoSlide({ slide, offset }) {
+    const video = useVideoProps();
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
     const videoRef = React.useRef(null);
-    const video = { ...defaultVideoProps, ...useController().getLightboxProps().video };
     React.useEffect(() => {
         if (offset !== 0 && videoRef.current && !videoRef.current.paused) {
             videoRef.current.pause();

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

@@ -1,55 +1,52 @@
-import { GenericSlide } from "../../types.js";
 import { Video } from "./Video.js";
 import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING } from "../../core/consts.js";
-/** Video slide attributes */
-export interface SlideVideo extends GenericSlide {
-    /** video slide type marker */
-    type: "video";
-    /** video placeholder image */
-    poster?: string;
-    /** video width in pixels */
-    width?: number;
-    /** video height in pixels */
-    height?: number;
-    /** if `true`, the video automatically begins to play */
-    autoPlay?: boolean;
-    /** if `true`, the browser will offer controls to allow the user to control video playback */
-    controls?: boolean;
-    /** indicates what controls to show */
-    controlsList?: string;
-    /** indicates whether to use CORS to fetch the related video */
-    crossOrigin?: string;
-    /** video preload setting */
-    preload?: string;
-    /** if `true`, the browser will automatically seek back to the start upon reaching the end of the video */
-    loop?: boolean;
-    /** the default setting of the audio contained in the video */
-    muted?: boolean;
-    /** if `true`, the video is to be played "inline", that is within the element's playback area */
-    playsInline?: boolean;
-    /** prevents the browser from suggesting a Picture-in-Picture context menu */
-    disablePictureInPicture?: boolean;
-    /** disables the capability of remote playback */
-    disableRemotePlayback?: boolean;
-    /** an array of video files */
-    sources: {
-        /** video source URL */
-        src: string;
-        /** video source type (e.g., `video/mp4`) */
-        type: string;
-    }[];
-}
-declare module "../../types" {
+declare module "../../types.js" {
     interface SlideTypes {
         /** video slide type */
-        SlideVideo: SlideVideo;
+        video: SlideVideo;
+    }
+    /** Video slide attributes */
+    interface SlideVideo extends GenericSlide {
+        /** video placeholder image */
+        poster?: string;
+        /** video width in pixels */
+        width?: number;
+        /** video height in pixels */
+        height?: number;
+        /** if `true`, the video automatically begins to play */
+        autoPlay?: boolean;
+        /** if `true`, the browser will offer controls to allow the user to control video playback */
+        controls?: boolean;
+        /** indicates what controls to show */
+        controlsList?: string;
+        /** indicates whether to use CORS to fetch the related video */
+        crossOrigin?: string;
+        /** video preload setting */
+        preload?: string;
+        /** if `true`, the browser will automatically seek back to the start upon reaching the end of the video */
+        loop?: boolean;
+        /** the default setting of the audio contained in the video */
+        muted?: boolean;
+        /** if `true`, the video is to be played "inline", that is within the element's playback area */
+        playsInline?: boolean;
+        /** prevents the browser from suggesting a Picture-in-Picture context menu */
+        disablePictureInPicture?: boolean;
+        /** disables the capability of remote playback */
+        disableRemotePlayback?: boolean;
+        /** an array of video files */
+        sources: {
+            /** video source URL */
+            src: string;
+            /** video source type (e.g., `video/mp4`) */
+            type: string;
+        }[];
     }
     interface LightboxProps {
         /** video plugin settings */
         video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
     }
 }
-declare module "../../core" {
+declare module "../../core/index.js" {
     interface EventTypes {
         [ACTIVE_SLIDE_LOADING]: void;
         [ACTIVE_SLIDE_PLAYING]: void;

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

@@ -0,0 +1,29 @@
+import { LightboxProps } from "../../types.js";
+export declare const defaultVideoProps: {
+    controls: boolean;
+    playsInline: boolean;
+};
+export declare const resolveVideoProps: (video: LightboxProps["video"]) => {
+    autoPlay?: boolean | undefined;
+    controls: boolean;
+    controlsList?: string | undefined;
+    crossOrigin?: string | undefined;
+    preload?: string | undefined;
+    loop?: boolean | undefined;
+    muted?: boolean | undefined;
+    playsInline: boolean;
+    disablePictureInPicture?: boolean | undefined;
+    disableRemotePlayback?: boolean | undefined;
+};
+export declare function useVideoProps(): {
+    autoPlay?: boolean | undefined;
+    controls: boolean;
+    controlsList?: string | undefined;
+    crossOrigin?: string | undefined;
+    preload?: string | undefined;
+    loop?: boolean | undefined;
+    muted?: boolean | undefined;
+    playsInline: boolean;
+    disablePictureInPicture?: boolean | undefined;
+    disableRemotePlayback?: boolean | undefined;
+};

package/dist/plugins/video/props.js

@@ -0,0 +1,13 @@
+import { useLightboxProps } from "../../core/index.js";
+export const defaultVideoProps = {
+    controls: true,
+    playsInline: true,
+};
+export const resolveVideoProps = (video) => ({
+    ...defaultVideoProps,
+    ...video,
+});
+export function useVideoProps() {
+    const { video } = useLightboxProps();
+    return resolveVideoProps(video);
+}

package/dist/plugins/zoom/ResponsiveImage.js

@@ -1,13 +1,28 @@
 import * as React from "react";
-import { devicePixelRatio, ImageSlide, isImageFitCover, useEventCallback, useLayoutEffect, } from "../../core/index.js";
+import { devicePixelRatio, ImageSlide, isImageFitCover, UNKNOWN_ACTION_TYPE, useEventCallback, useLayoutEffect, } from "../../core/index.js";
 export function isResponsiveImageSlide(slide) {
     var _a;
     return (((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
 }
+function reducer({ current, preload }, { type, source }) {
+    switch (type) {
+        case "fetch":
+            if (!current) {
+                return { current: source };
+            }
+            return { current, preload: source };
+        case "done":
+            if (source === preload) {
+                return { current: source };
+            }
+            return { current, preload };
+        default:
+            throw new Error(UNKNOWN_ACTION_TYPE);
+    }
+}
 export function ResponsiveImage(props) {
     var _a, _b;
-    const [state, setState] = React.useState({});
-    const { current, preload } = state;
+    const [{ current, preload }, dispatch] = React.useReducer(reducer, {});
     const { slide: image, rect, imageFit, render } = props;
     const srcSet = image.srcSet.sort((a, b) => a.width - b.width);
     const width = (_a = image.width) !== null && _a !== void 0 ? _a : srcSet[srcSet.length - 1].width;
@@ -16,22 +31,15 @@ export function ResponsiveImage(props) {
     const maxWidth = Math.max(...srcSet.map((x) => x.width));
     const targetWidth = Math.min((cover ? Math.max : Math.min)(rect.width, width * (rect.height / height)), maxWidth);
     const pixelDensity = devicePixelRatio();
-    const handleSourceChange = useEventCallback(() => {
+    const handleResize = useEventCallback(() => {
         var _a;
         const targetSource = (_a = srcSet.find((x) => x.width >= targetWidth * pixelDensity)) !== null && _a !== void 0 ? _a : srcSet[srcSet.length - 1];
-        if (!current) {
-            setState((prev) => ({ ...prev, current: targetSource.src }));
-        }
-        else if (srcSet.findIndex((x) => x.src === current) < srcSet.findIndex((x) => x === targetSource)) {
-            setState((prev) => ({ ...prev, preload: targetSource.src }));
-        }
-    });
-    useLayoutEffect(handleSourceChange, [rect === null || rect === void 0 ? void 0 : rect.width, rect === null || rect === void 0 ? void 0 : rect.height, pixelDensity, image.src, handleSourceChange]);
-    const handlePreload = useEventCallback((currentPreload) => {
-        if (currentPreload === preload) {
-            setState((prev) => ({ ...prev, current: preload, preload: undefined }));
+        if (!current || srcSet.findIndex((x) => x.src === current) < srcSet.findIndex((x) => x === targetSource)) {
+            dispatch({ type: "fetch", source: targetSource.src });
         }
     });
+    useLayoutEffect(handleResize, [rect.width, rect.height, pixelDensity, handleResize]);
+    const handlePreload = useEventCallback((currentPreload) => dispatch({ type: "done", source: currentPreload }));
     const style = {
         WebkitTransform: "translateZ(0)",
     };

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

@@ -1,14 +1,3 @@
 import { Plugin } from "../../types.js";
-export declare const defaultZoomProps: {
-    maxZoomPixelRatio: number;
-    zoomInMultiplier: number;
-    doubleTapDelay: number;
-    doubleClickDelay: number;
-    doubleClickMaxStops: number;
-    keyboardMoveDistance: number;
-    wheelZoomDistanceFactor: number;
-    pinchZoomDistanceFactor: number;
-    scrollToZoom: boolean;
-};
 /** Zoom plugin */
 export declare const Zoom: Plugin;

package/dist/plugins/zoom/Zoom.js

@@ -1,40 +1,18 @@
 import * as React from "react";
-import { createModule, isImageSlide, MODULE_CONTROLLER, PLUGIN_ZOOM } from "../../core/index.js";
-import { ZoomContextProvider } from "./ZoomContext.js";
-import { ZoomButtonsGroup } from "./ZoomButtonsGroup.js";
-import { ZoomContainer } from "./ZoomContainer.js";
-export const defaultZoomProps = {
-    maxZoomPixelRatio: 1,
-    zoomInMultiplier: 2,
-    doubleTapDelay: 300,
-    doubleClickDelay: 500,
-    doubleClickMaxStops: 2,
-    keyboardMoveDistance: 50,
-    wheelZoomDistanceFactor: 100,
-    pinchZoomDistanceFactor: 100,
-    scrollToZoom: false,
-};
-export const Zoom = ({ augment, append }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, on, ...restProps }) => ({
-        toolbar: {
-            buttons: [React.createElement(ZoomButtonsGroup, { key: PLUGIN_ZOOM, labels: restProps.labels, render: render }), ...buttons],
-            ...restToolbar,
-        },
+import { createModule, isImageSlide, PLUGIN_ZOOM } from "../../core/index.js";
+import { resolveZoomProps } from "./props.js";
+import { ZoomContextProvider } from "./ZoomController.js";
+import { ZoomToolbarControl } from "./ZoomToolbarControl.js";
+import { ZoomWrapper } from "./ZoomWrapper.js";
+export const Zoom = ({ augment, addModule }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, render, zoom, ...restProps }) => ({
+        zoom: resolveZoomProps(zoom),
+        toolbar: { buttons: [React.createElement(ZoomToolbarControl, { key: PLUGIN_ZOOM }), ...buttons], ...restToolbar },
         render: {
             ...render,
-            slide: (slide, offset, rect) => {
-                var _a;
-                return isImageSlide(slide) ? (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom, on: on })) : ((_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect));
-            },
-        },
-        zoom: {
-            ...defaultZoomProps,
-            ...zoom,
+            slide: (props) => { var _a; return isImageSlide(props.slide) ? React.createElement(ZoomWrapper, { render: render, ...props }) : (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, props); },
         },
-        carousel,
-        animation,
-        on,
         ...restProps,
     }));
-    append(MODULE_CONTROLLER, createModule(PLUGIN_ZOOM, ZoomContextProvider));
+    addModule(createModule(PLUGIN_ZOOM, ZoomContextProvider));
 };

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

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { LightboxProps } from "../../types.js";
-/** Zoom button */
-export declare const ZoomButton: React.ForwardRefExoticComponent<Pick<LightboxProps, "render" | "labels"> & {
-    zoomIn?: boolean | undefined;
+/** Zoom button props */
+export type ZoomButtonProps = {
+    zoomIn?: boolean;
     onLoseFocus: () => void;
-} & React.RefAttributes<HTMLButtonElement>>;
+};
+/** Zoom button */
+export declare const ZoomButton: React.ForwardRefExoticComponent<ZoomButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/plugins/zoom/ZoomButton.js

@@ -1,24 +1,16 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useEvents } from "../../core/index.js";
-import { useZoom } from "./ZoomContext.js";
-import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
+import { createIcon, IconButton, label, useLightboxProps } from "../../core/index.js";
+import { useZoom } from "./ZoomController.js";
 const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null,
     React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
     React.createElement("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })));
 const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" }));
-export const ZoomButton = React.forwardRef(({ labels, render, zoomIn, onLoseFocus }, ref) => {
+export const ZoomButton = React.forwardRef(({ zoomIn, onLoseFocus }, ref) => {
     const wasEnabled = React.useRef(false);
     const wasFocused = React.useRef(false);
-    const { isMinZoom, isMaxZoom, isZoomSupported } = useZoom();
-    const { publish } = useEvents();
-    const disabled = !isZoomSupported || (zoomIn ? isMaxZoom : isMinZoom);
-    const onClick = () => publish(zoomIn ? ACTION_ZOOM_IN : ACTION_ZOOM_OUT);
-    const onFocus = React.useCallback(() => {
-        wasFocused.current = true;
-    }, []);
-    const onBlur = React.useCallback(() => {
-        wasFocused.current = false;
-    }, []);
+    const { zoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled } = useZoom();
+    const { render, labels } = useLightboxProps();
+    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= 1);
     React.useEffect(() => {
         if (disabled && wasEnabled.current && wasFocused.current) {
             onLoseFocus();
@@ -27,24 +19,10 @@ export const ZoomButton = React.forwardRef(({ labels, render, zoomIn, onLoseFocu
             wasEnabled.current = true;
         }
     }, [disabled, onLoseFocus]);
-    if (zoomIn && render.buttonZoomIn)
-        return (React.createElement(React.Fragment, null, render.buttonZoomIn({
-            ref,
-            labels,
-            disabled,
-            onClick,
-            onFocus,
-            onBlur,
-        })));
-    if (!zoomIn && render.buttonZoomOut)
-        return (React.createElement(React.Fragment, null, render.buttonZoomOut({
-            ref,
-            labels,
-            disabled,
-            onClick,
-            onFocus,
-            onBlur,
-        })));
-    return (React.createElement(IconButton, { ref: ref, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur }));
+    return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: () => (zoomIn ? zoomInCallback : zoomOutCallback)(), onFocus: () => {
+            wasFocused.current = true;
+        }, onBlur: () => {
+            wasFocused.current = false;
+        } }));
 });
 ZoomButton.displayName = "ZoomButton";

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

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

package/dist/plugins/zoom/ZoomButtonsGroup.js

@@ -1,23 +1,22 @@
 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 function ZoomButtonsGroup({ labels, render }) {
+export default function ZoomButtonsGroup() {
     const zoomInRef = React.useRef(null);
     const zoomOutRef = React.useRef(null);
-    const { transferFocus } = useController();
+    const { focus } = useController();
     const focusSibling = React.useCallback((sibling) => {
         var _a, _b;
         if (!((_a = sibling.current) === null || _a === void 0 ? void 0 : _a.disabled)) {
             (_b = sibling.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
         else {
-            transferFocus();
+            focus();
         }
-    }, [transferFocus]);
+    }, [focus]);
     const focusZoomIn = React.useCallback(() => focusSibling(zoomInRef), [focusSibling]);
     const focusZoomOut = React.useCallback(() => focusSibling(zoomOutRef), [focusSibling]);
     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 })));
+        React.createElement(ZoomButton, { zoomIn: true, ref: zoomInRef, onLoseFocus: focusZoomOut }),
+        React.createElement(ZoomButton, { ref: zoomOutRef, onLoseFocus: focusZoomIn })));
 }

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ComponentProps, ContainerRect, ZoomRef } from "../../types.js";
+export type ActiveZoomWrapper = {
+    zoomWrapperRef: React.RefObject<HTMLDivElement>;
+    imageDimensions?: ContainerRect;
+};
+export type ZoomControllerContextType = ZoomRef & {
+    setZoomWrapper: React.Dispatch<React.SetStateAction<ActiveZoomWrapper | undefined>>;
+};
+export declare const ZoomControllerContext: React.Context<ZoomControllerContextType | null>;
+export declare const useZoom: () => NonNullable<ZoomControllerContextType>;
+export declare function ZoomContextProvider({ children }: ComponentProps): JSX.Element;