yet-another-react-lightbox 1.13.4 → 2.0.0-rc.1

package/dist/plugins/zoom/ZoomContainer.js

@@ -0,0 +1,303 @@
+import * as React from "react";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ImageSlide, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useMotionPreference, } from "../../core/index.js";
+import { useZoom } from "./ZoomContext.js";
+import { defaultZoomProps } from "./Zoom.js";
+import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
+const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+    var _a, _b;
+    let slideRect = { width: 0, height: 0 };
+    let maxSlideRect = { width: 0, height: 0 };
+    if (rect && isImageSlide(slide)) {
+        const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
+        const height = Math.max(...(((_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height)) || []).concat(slide.height ? [slide.height] : []));
+        if (width > 0 && height > 0 && rect.width > 0 && rect.height > 0) {
+            maxSlideRect = cover
+                ? {
+                    width: Math.round(Math.min(width, (rect.width / rect.height) * height)),
+                    height: Math.round(Math.min(height, (rect.height / rect.width) * width)),
+                }
+                : { width, height };
+            maxSlideRect = {
+                width: maxSlideRect.width * maxZoomPixelRatio,
+                height: maxSlideRect.height * maxZoomPixelRatio,
+            };
+            slideRect = cover
+                ? {
+                    width: Math.min(rect.width, maxSlideRect.width),
+                    height: Math.min(rect.height, maxSlideRect.height),
+                }
+                : {
+                    width: Math.round(Math.min(rect.width, (rect.height / height) * width)),
+                    height: Math.round(Math.min(rect.height, (rect.width / width) * height)),
+                };
+        }
+    }
+    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 }) => {
+    var _a;
+    const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
+    const [zoom, setZoom] = React.useState(1);
+    const [offsetX, setOffsetX] = React.useState(0);
+    const [offsetY, setOffsetY] = React.useState(0);
+    const activePointers = React.useRef([]);
+    const lastPointerDown = React.useRef(0);
+    const zoomAnimation = React.useRef();
+    const zoomAnimationStart = React.useRef();
+    const pinchZoomDistance = React.useRef();
+    const { isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom } = useZoom();
+    const { setContainerRef, containerRef, containerRect } = useContainerRect();
+    const { subscribeSensors, containerRef: controllerRef, containerRect: controllerRect } = useController();
+    const { subscribe } = useEvents();
+    const reduceMotion = useMotionPreference();
+    const { slideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects(slide, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, containerRect);
+    const maxZoom = slideRect.width ? Math.max(round(currentMaxSlideRect.width / slideRect.width, 5), 1) : 1;
+    const changeOffsets = useEventCallback((dx, dy, targetZoom) => {
+        const newZoom = targetZoom || zoom;
+        const newOffsetX = offsetX - (dx || 0);
+        const newOffsetY = offsetY - (dy || 0);
+        const maxOffsetX = containerRect ? (slideRect.width * newZoom - containerRect.width) / 2 / newZoom : 0;
+        const maxOffsetY = containerRect ? (slideRect.height * newZoom - containerRect.height) / 2 / newZoom : 0;
+        setOffsetX(Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX));
+        setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
+    });
+    const changeZoom = useEventCallback((value, rapid, dx, dy) => {
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            zoomAnimationStart.current = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setZoom(newZoom);
+    });
+    const handleControllerRectChange = useEventCallback(() => {
+        if (zoom > 1) {
+            if (zoom > maxZoom) {
+                changeZoom(maxZoom, true);
+            }
+            changeOffsets();
+        }
+    });
+    useLayoutEffect(handleControllerRectChange, [
+        controllerRect.width,
+        controllerRect.height,
+        handleControllerRectChange,
+    ]);
+    const handleZoomAndOffsetChange = useEventCallback(() => {
+        var _a, _b, _c, _d;
+        (_a = zoomAnimation.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        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)`,
+                },
+            ], {
+                duration: reduceMotion ? 0 : (_d = animation.zoom) !== null && _d !== void 0 ? _d : 500,
+                easing: zoomAnimation ? "ease-out" : "ease-in-out",
+            });
+            zoomAnimationStart.current = undefined;
+            if (zoomAnimation.current) {
+                zoomAnimation.current.onfinish = () => {
+                    zoomAnimation.current = undefined;
+                };
+            }
+        }
+    });
+    useLayoutEffect(handleZoomAndOffsetChange, [zoom, offsetX, offsetY, handleZoomAndOffsetChange]);
+    useLayoutEffect(() => {
+        if (offset === 0) {
+            const resetZoom = () => {
+                setZoom(1);
+                setOffsetX(0);
+                setOffsetY(0);
+                setIsMinZoom(true);
+                setIsMaxZoom(false);
+            };
+            resetZoom();
+            return () => {
+                resetZoom();
+            };
+        }
+        return () => { };
+    }, [offset, setIsMinZoom, setIsMaxZoom]);
+    useLayoutEffect(() => {
+        if (offset === 0) {
+            const newMinZoom = zoom <= 1;
+            if (newMinZoom !== isMinZoom) {
+                setIsMinZoom(newMinZoom);
+            }
+            const newMaxZoom = zoom >= maxZoom;
+            if (newMaxZoom !== isMaxZoom) {
+                setIsMaxZoom(newMaxZoom);
+            }
+        }
+    }, [offset, zoom, maxZoom, isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom]);
+    const translateCoordinates = React.useCallback((event) => {
+        if (controllerRef.current) {
+            const { pageX, pageY } = event;
+            const { scrollX, scrollY } = window;
+            const { left, top, width, height } = controllerRef.current.getBoundingClientRect();
+            return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
+        }
+        return [];
+    }, [controllerRef]);
+    const onKeyDown = useEventCallback((event) => {
+        const { keyboardMoveDistance, zoomInMultiplier } = zoomProps;
+        const preventDefault = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        if (zoom > 1) {
+            const move = (deltaX, deltaY) => {
+                preventDefault();
+                changeOffsets(deltaX, deltaY);
+            };
+            if (event.key === "ArrowDown") {
+                move(0, keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowUp") {
+                move(0, -keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowLeft") {
+                move(-keyboardMoveDistance, 0);
+            }
+            else if (event.key === "ArrowRight") {
+                move(keyboardMoveDistance, 0);
+            }
+        }
+        const handleChangeZoom = (zoomValue) => {
+            preventDefault();
+            changeZoom(zoomValue);
+        };
+        const hasMeta = () => event.getModifierState("Meta") || event.getModifierState("OS");
+        if (event.key === "+" || (event.key === "=" && hasMeta())) {
+            handleChangeZoom(zoom * zoomInMultiplier);
+        }
+        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
+            handleChangeZoom(zoom / zoomInMultiplier);
+        }
+        else if (event.key === "0" && hasMeta()) {
+            handleChangeZoom(1);
+        }
+    });
+    const onWheel = useEventCallback((event) => {
+        const { wheelZoomDistanceFactor, scrollToZoom } = zoomProps;
+        if (event.ctrlKey || scrollToZoom) {
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                event.stopPropagation();
+                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+                return;
+            }
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (!scrollToZoom) {
+                changeOffsets(event.deltaX, event.deltaY);
+            }
+        }
+    });
+    const clearPointer = React.useCallback((event) => {
+        const pointers = activePointers.current;
+        pointers.splice(0, pointers.length, ...pointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const replacePointer = React.useCallback((event) => {
+        clearPointer(event);
+        activePointers.current.push(event);
+    }, [clearPointer]);
+    const onPointerDown = useEventCallback((event) => {
+        var _a;
+        const { doubleTapDelay, doubleClickDelay, zoomInMultiplier, doubleClickMaxStops } = zoomProps;
+        const pointers = activePointers.current;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+        }
+        const { timeStamp } = event;
+        if (pointers.length === 0 &&
+            timeStamp - lastPointerDown.current < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
+            lastPointerDown.current = 0;
+            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+        }
+        else {
+            lastPointerDown.current = timeStamp;
+        }
+        replacePointer(event);
+        if (pointers.length === 2) {
+            pinchZoomDistance.current = distance(pointers[0], pointers[1]);
+        }
+    });
+    const onPointerMove = useEventCallback((event) => {
+        const pointers = activePointers.current;
+        const activePointer = pointers.find((p) => p.pointerId === event.pointerId);
+        if (pointers.length === 2 && pinchZoomDistance.current) {
+            event.stopPropagation();
+            replacePointer(event);
+            const currentDistance = distance(pointers[0], pointers[1]);
+            const delta = currentDistance - pinchZoomDistance.current;
+            if (Math.abs(delta) > 0) {
+                changeZoom(zoom * (1 + delta / zoomProps.pinchZoomDistanceFactor), true, ...pointers
+                    .map((x) => translateCoordinates(x))
+                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+                pinchZoomDistance.current = currentDistance;
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (activePointer) {
+                if (pointers.length === 1) {
+                    changeOffsets((activePointer.clientX - event.clientX) / zoom, (activePointer.clientY - event.clientY) / zoom);
+                }
+                replacePointer(event);
+            }
+        }
+    });
+    const onPointerUp = React.useCallback((event) => {
+        const pointers = activePointers.current;
+        if (pointers.length === 2 && pointers.find((p) => p.pointerId === event.pointerId)) {
+            pinchZoomDistance.current = undefined;
+        }
+        clearPointer(event);
+    }, [clearPointer]);
+    const handleZoomIn = useEventCallback(() => {
+        changeZoom(zoom * zoomProps.zoomInMultiplier);
+    });
+    const handleZoomOut = useEventCallback(() => {
+        changeZoom(zoom / zoomProps.zoomInMultiplier);
+    });
+    React.useEffect(() => offset === 0
+        ? cleanup(subscribe(ACTION_ZOOM_IN, handleZoomIn), subscribe(ACTION_ZOOM_OUT, handleZoomOut), subscribeSensors(EVENT_ON_KEY_DOWN, onKeyDown), subscribeSensors(EVENT_ON_WHEEL, onWheel), subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp))
+        : () => { }, [
+        offset,
+        subscribe,
+        subscribeSensors,
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onWheel,
+        changeZoom,
+        handleZoomIn,
+        handleZoomOut,
+    ]);
+    const scaledRect = offset === 0
+        ? {
+            width: rect.width * zoom,
+            height: rect.height * zoom,
+        }
+        : rect;
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    if (!rendered && isImageSlide(slide)) {
+        rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, rect: scaledRect, render: render, imageFit: carousel.imageFit }));
+    }
+    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

@@ -0,0 +1,12 @@
+import { Component } from "../../types.js";
+declare type ZoomContextType = {
+    isMinZoom: boolean;
+    isMaxZoom: boolean;
+    isZoomSupported: boolean;
+    setIsMinZoom: (value: boolean) => void;
+    setIsMaxZoom: (value: boolean) => void;
+    setIsZoomSupported: (value: boolean) => void;
+};
+export declare const useZoom: () => ZoomContextType;
+export declare const ZoomContextProvider: Component;
+export {};

package/dist/plugins/zoom/ZoomContext.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { makeUseContext } from "../../core/index.js";
+const ZoomContext = React.createContext(null);
+export const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
+export const ZoomContextProvider = ({ children }) => {
+    const [isMinZoom, setIsMinZoom] = React.useState(false);
+    const [isMaxZoom, setIsMaxZoom] = React.useState(false);
+    const [isZoomSupported, setIsZoomSupported] = React.useState(false);
+    const context = React.useMemo(() => ({
+        isMinZoom,
+        isMaxZoom,
+        isZoomSupported,
+        setIsMinZoom,
+        setIsMaxZoom,
+        setIsZoomSupported,
+    }), [isMinZoom, isMaxZoom, isZoomSupported]);
+    return React.createElement(ZoomContext.Provider, { value: context }, children);
+};

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

@@ -0,0 +1,3 @@
+import { ZoomContainer } from "./ZoomContainer.js";
+/** Zoom slide wrapper */
+export declare const ZoomWrapper: typeof ZoomContainer;

package/dist/plugins/zoom/ZoomWrapper.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { ImageSlide, isImageSlide, useEventCallback } from "../../core/index.js";
+import { ZoomContainer } from "./ZoomContainer.js";
+import { useZoom } from "./ZoomContext.js";
+export const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation, zoom }) => {
+    var _a;
+    const { setIsZoomSupported, isZoomSupported } = useZoom();
+    const zoomSupported = isImageSlide(slide) && (Boolean(slide.srcSet) || Boolean(slide.width && slide.height));
+    const updateIsZoomSupported = useEventCallback(() => {
+        if (offset === 0 && zoomSupported !== isZoomSupported) {
+            setIsZoomSupported(zoomSupported);
+        }
+    });
+    React.useEffect(updateIsZoomSupported, [offset, updateIsZoomSupported]);
+    if (zoomSupported) {
+        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom }));
+    }
+    const rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
+    if (rendered) {
+        return React.createElement(React.Fragment, null, rendered);
+    }
+    if (isImageSlide(slide)) {
+        return React.createElement(ImageSlide, { slide: slide, offset: offset, rect: rect, render: render, imageFit: carousel.imageFit });
+    }
+    return null;
+};

package/dist/plugins/{Zoom.d.ts → zoom/index.d.ts}

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { LightboxProps, Plugin } from "../types.js";
+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 */
 declare type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBlur, }: Pick<LightboxProps, "labels"> & {
     ref: React.ForwardedRef<HTMLButtonElement>;
@@ -8,7 +11,7 @@ declare type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBl
     onFocus: () => void;
     onBlur: () => void;
 }) => React.ReactNode;
-declare module "../types.js" {
+declare module "../../types" {
     interface LightboxProps {
         /** Zoom plugin settings */
         zoom?: {
@@ -47,7 +50,4 @@ declare module "../types.js" {
         iconZoomOut?: () => React.ReactNode;
     }
 }
-export declare const ZoomModule: import("../types.js").Module;
-/** Zoom plugin */
-export declare const Zoom: Plugin;
 export default Zoom;

package/dist/plugins/zoom/index.js

@@ -0,0 +1,4 @@
+import { Zoom } from "./Zoom.js";
+export const ACTION_ZOOM_IN = "zoom-in";
+export const ACTION_ZOOM_OUT = "zoom-out";
+export default Zoom;

package/dist/props.d.ts

@@ -0,0 +1,2 @@
+import { LightboxProps } from "./types.js";
+export declare const LightboxDefaultProps: LightboxProps;

package/dist/props.js

@@ -0,0 +1,31 @@
+import { ACTION_CLOSE, IMAGE_FIT_CONTAIN } from "./core/consts.js";
+export const LightboxDefaultProps = {
+    open: false,
+    close: () => { },
+    index: 0,
+    slides: [],
+    render: {},
+    plugins: [],
+    toolbar: { buttons: [ACTION_CLOSE] },
+    labels: {},
+    animation: {
+        fade: 330,
+        swipe: 500,
+    },
+    carousel: {
+        finite: false,
+        preload: 2,
+        padding: "16px",
+        spacing: "30%",
+        imageFit: IMAGE_FIT_CONTAIN,
+    },
+    controller: {
+        focus: true,
+        aria: false,
+        touchAction: "none",
+        closeOnBackdropClick: false,
+    },
+    on: {},
+    styles: {},
+    className: "",
+};

package/dist/styles.css

@@ -14,21 +14,29 @@
   opacity: 1;
 }
 .yarl__container {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background-color: var(--yarl__container_background_color, var(--yarl__color_backdrop, #000));
+  outline: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   touch-action: var(--yarl__controller_touch_action, none);
 }
-.yarl__container {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--yarl__container_background_color, var(--yarl__color_backdrop, #000));
-  outline: 0;
-}
 .yarl__carousel {
-  position: absolute;
-  overflow: hidden;
-  inset: 0;
+  display: flex;
+  flex: 0 0 auto;
+  height: 100%;
+  align-content: center;
+  justify-content: center;
+  align-items: stretch;
+  width: calc(100% + (var(--yarl__carousel_slides_count, 0) - 1) * (100% + var(--yarl__carousel_spacing_px, 0) * 1px + var(--yarl__carousel_spacing_percent, 0) * 1%));
+  -webkit-column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+     -moz-column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+          column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+  -webkit-transform: translateX(var(--yarl__swipe_offset, 0px));
+          transform: translateX(var(--yarl__swipe_offset, 0px));
 }
 .yarl__flex_center {
   display: flex;
@@ -37,24 +45,13 @@
   align-items: center;
 }
 .yarl__slide {
-  position: absolute;
-  overflow: hidden;
-  inset: 0;
+  flex: 1;
+  position: relative;
   padding: var(--yarl__carousel_padding, 16px);
-  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0);
-          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0);
-  transition: -webkit-transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out);
-  transition: transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out);
-  transition: transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out), -webkit-transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out);
 }
 [dir=rtl] .yarl__slide {
   --yarl__direction: -1;
 }
-.yarl__container_swipe .yarl__slide {
-  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
-          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
-  transition: unset;
-}
 .yarl__slide_image {
   -o-object-fit: contain;
      object-fit: contain;
@@ -62,8 +59,13 @@
        user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+}
+@media screen and (min-width: 800px) {
+  .yarl__slide_image {
+    -webkit-transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+  }
 }
 .yarl__slide_image_cover {
   width: 100%;
@@ -78,8 +80,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate3d(-50%, -50%, 0);
-          transform: translate3d(-50%, -50%, 0);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
   line-height: 0;
 }
 .yarl__slide_loading {

package/dist/types.d.ts

@@ -2,14 +2,16 @@ import * as React from "react";
 import { ContainerRect } from "./core/hooks/useContainerRect.js";
 /** Image fit setting */
 export declare type ImageFit = "contain" | "cover";
+export interface GenericSlide {
+}
 /** Image slide properties */
-export interface SlideImage {
+export interface SlideImage extends GenericSlide {
+    /** slide type */
+    type?: "image";
     /** image URL */
-    src?: string;
+    src: string;
     /** image 'alt' attribute */
     alt?: string;
-    /** @deprecated use `width` and `height` instead */
-    aspectRatio?: number;
     /** image width in pixels */
     width?: number;
     /** image height in pixels */
@@ -23,7 +25,7 @@ export interface SlideImage {
         /** image width in pixels */
         width: number;
         /** image height in pixels */
-        height?: number;
+        height: number;
     }[];
 }
 /** Supported slide types */
@@ -163,22 +165,6 @@ export interface LightboxProps {
     /** CSS class of the lightbox root element */
     className: string;
 }
-export declare const LightboxDefaultProps: {
-    open: boolean;
-    close: () => void;
-    index: number;
-    slides: Slide[];
-    render: Render;
-    plugins: Plugin[];
-    toolbar: ToolbarSettings;
-    labels: Labels;
-    animation: AnimationSettings;
-    carousel: CarouselSettings;
-    controller: ControllerSettings;
-    on: Callbacks;
-    styles: SlotStyles;
-    className: string;
-};
 /** Custom UI labels */
 export declare type Labels = {
     [key: string]: string;
@@ -238,4 +224,4 @@ export declare type DeepNonNullable<T> = NonNullable<{
     [K in keyof T]-?: NonNullable<T[K]>;
 }>;
 /** Lightbox external props */
-export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "controller" | "on">;
+export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "controller" | "toolbar">;

package/dist/types.js

@@ -1,30 +1 @@
-export const LightboxDefaultProps = {
-    open: false,
-    close: () => { },
-    index: 0,
-    slides: [],
-    render: {},
-    plugins: [],
-    toolbar: { buttons: ["close"] },
-    labels: {},
-    animation: {
-        fade: 330,
-        swipe: 500,
-    },
-    carousel: {
-        finite: false,
-        preload: 2,
-        padding: "16px",
-        spacing: "30%",
-        imageFit: "contain",
-    },
-    controller: {
-        focus: true,
-        aria: false,
-        touchAction: "none",
-        closeOnBackdropClick: false,
-    },
-    on: {},
-    styles: {},
-    className: "",
-};
+export {};