yet-another-react-lightbox 2.5.1 → 2.6.1

package/dist/core/modules/Controller.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cleanup, clsx, cssClass, cssVar, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
+import { cleanup, clsx, cssClass, cssVar, getAnimationEasing, getNavigationAnimationDuration, getSwipeAnimationDuration, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
 import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
@@ -8,7 +8,7 @@ import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER
 const cssContainerPrefix = makeComposePrefix("container");
 const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
-export const Controller = ({ children, ...props }) => {
+export function Controller({ children, ...props }) {
     const { carousel, slides, animation, controller, on, styles } = props;
     const { state, dispatch } = useLightboxState();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
@@ -48,16 +48,20 @@ export const Controller = ({ children, ...props }) => {
                     { transform: "translateX(0)" },
                 ],
                 duration: state.animation.duration,
+                easing: state.animation.easing,
             };
         }
         return undefined;
     });
     const swipe = useEventCallback((action) => {
-        var _a, _b;
+        var _a;
         const currentSwipeOffset = action.offset || 0;
-        const swipeDuration = (_a = (!currentSwipeOffset ? animation.navigation : undefined)) !== null && _a !== void 0 ? _a : animation.swipe;
+        const swipeDuration = !currentSwipeOffset
+            ? getNavigationAnimationDuration(animation)
+            : getSwipeAnimationDuration(animation);
+        const swipeEasing = getAnimationEasing(!currentSwipeOffset ? animation.navigation : animation.swipe);
         let { direction } = action;
-        const count = (_b = action.count) !== null && _b !== void 0 ? _b : 1;
+        const count = (_a = action.count) !== null && _a !== void 0 ? _a : 1;
         let newSwipeState = SwipeState.ANIMATION;
         let newSwipeAnimationDuration = swipeDuration * count;
         if (!direction) {
@@ -75,13 +79,11 @@ export const Controller = ({ children, ...props }) => {
                     newSwipeAnimationDuration =
                         (swipeDuration / containerWidth) * (containerWidth - Math.abs(currentSwipeOffset));
                 }
+                direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
             }
             else {
                 newSwipeAnimationDuration = swipeDuration / 2;
             }
-            if (count !== 0) {
-                direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
-            }
         }
         let increment = 0;
         if (direction === ACTION_PREV) {
@@ -114,7 +116,7 @@ export const Controller = ({ children, ...props }) => {
             });
         }
         setSwipeState(newSwipeState);
-        publish(ACTION_SWIPE, { increment, duration: newSwipeAnimationDuration });
+        publish(ACTION_SWIPE, { increment, duration: newSwipeAnimationDuration, easing: swipeEasing });
     });
     React.useEffect(() => {
         var _a, _b;
@@ -126,7 +128,7 @@ export const Controller = ({ children, ...props }) => {
         subscribeSensors,
         isSwipeValid,
         (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || 0,
-        animation.swipe,
+        getSwipeAnimationDuration(animation),
         () => setSwipeState(SwipeState.SWIPE),
         (offset) => setSwipeOffset(offset),
         (offset, duration) => swipe({ offset, duration, count: 1 }),
@@ -174,5 +176,5 @@ export const Controller = ({ children, ...props }) => {
                 : null),
             ...styles.container,
         }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && React.createElement(ControllerContext.Provider, { value: context }, children)));
-};
+}
 export const ControllerModule = createModule(MODULE_CONTROLLER, Controller);

package/dist/core/modules/Core.d.ts

@@ -1,3 +1,4 @@
-import { Component } from "../../types.js";
-export declare const Core: Component;
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export declare function Core({ slides, index, children }: ComponentProps): JSX.Element;
 export declare const CoreModule: import("../../types.js").Module;

package/dist/core/modules/Core.js

@@ -2,7 +2,9 @@ import * as React from "react";
 import { createModule } from "../config.js";
 import { EventsProvider, LightboxStateProvider, TimeoutsProvider } from "../contexts/index.js";
 import { MODULE_CORE } from "../consts.js";
-export const Core = ({ slides, index, children }) => (React.createElement(TimeoutsProvider, null,
-    React.createElement(EventsProvider, null,
-        React.createElement(LightboxStateProvider, { slidesCount: slides.length, initialIndex: index }, children))));
+export function Core({ slides, index, children }) {
+    return (React.createElement(TimeoutsProvider, null,
+        React.createElement(EventsProvider, null,
+            React.createElement(LightboxStateProvider, { slidesCount: slides.length, initialIndex: index }, children))));
+}
 export const CoreModule = createModule(MODULE_CORE, Core);

package/dist/core/modules/Navigation.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Component, Labels } from "../../types.js";
+import { ComponentProps, Labels } from "../../types.js";
 export type NavigationButtonProps = {
     labels?: Labels;
     label: string;
@@ -9,6 +9,6 @@ export type NavigationButtonProps = {
     onClick: () => void;
     disabled?: boolean;
 };
-export declare const NavigationButton: ({ labels, label, icon, renderIcon, action, onClick, disabled, }: NavigationButtonProps) => JSX.Element;
-export declare const Navigation: Component;
+export declare function NavigationButton({ labels, label, icon, renderIcon, action, onClick, disabled, }: NavigationButtonProps): JSX.Element;
+export declare function Navigation({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): JSX.Element;
 export declare const NavigationModule: import("../../types.js").Module;

package/dist/core/modules/Navigation.js

@@ -1,20 +1,22 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
-import { cssClass, label as translateLabel } from "../utils.js";
+import { cssClass, getNavigationAnimationDuration, label as translateLabel } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { useController } from "./Controller.js";
 import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js";
-export const NavigationButton = ({ labels, label, icon, renderIcon, action, onClick, disabled, }) => (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
-export const Navigation = ({ slides, carousel: { finite }, animation: { swipe, navigation }, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
+export function NavigationButton({ labels, label, icon, renderIcon, action, onClick, disabled, }) {
+    return (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
+}
+export function Navigation({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
     const { currentIndex } = useLightboxState().state;
     const { subscribeSensors } = useController();
     const { publish } = useEvents();
     const isRTL = useRTL();
     const prevDisabled = slides.length === 0 || (finite && currentIndex === 0);
     const nextDisabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
-    const publishThrottled = useThrottle((action) => publish(action), (navigation !== null && navigation !== void 0 ? navigation : swipe) / 2);
+    const publishThrottled = useThrottle((action) => publish(action), getNavigationAnimationDuration(animation) / 2);
     const handleKeyDown = useEventCallback((event) => {
         if (event.key === VK_ARROW_LEFT && !(isRTL ? nextDisabled : prevDisabled)) {
             publishThrottled(isRTL ? ACTION_NEXT : ACTION_PREV);
@@ -27,5 +29,5 @@ export const Navigation = ({ slides, carousel: { finite }, animation: { swipe, n
     return (React.createElement(React.Fragment, null,
         buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, labels: labels, onClick: () => publish(ACTION_PREV) })),
         buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, labels: labels, onClick: () => publish(ACTION_NEXT) }))));
-};
+}
 export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);

package/dist/core/modules/NoScroll.d.ts

@@ -1,3 +1,4 @@
-import { Component } from "../../types.js";
-export declare const NoScroll: Component;
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export declare function NoScroll({ children }: ComponentProps): JSX.Element;
 export declare const NoScrollModule: import("../../types.js").Module;

package/dist/core/modules/NoScroll.js

@@ -5,8 +5,10 @@ import { useLayoutEffect, useRTL } from "../hooks/index.js";
 import { CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL } from "../consts.js";
 const noScroll = cssClass(CLASS_NO_SCROLL);
 const noScrollPadding = cssClass(CLASS_NO_SCROLL_PADDING);
-const isHTMLElement = (element) => "style" in element;
-const padScrollbar = (element, padding, rtl) => {
+function isHTMLElement(element) {
+    return "style" in element;
+}
+function padScrollbar(element, padding, rtl) {
     const styles = window.getComputedStyle(element);
     const property = rtl ? "padding-left" : "padding-right";
     const computedValue = rtl ? styles.paddingLeft : styles.paddingRight;
@@ -20,8 +22,8 @@ const padScrollbar = (element, padding, rtl) => {
             element.style.removeProperty(property);
         }
     };
-};
-export const NoScroll = ({ children }) => {
+}
+export function NoScroll({ children }) {
     const rtl = useRTL();
     useLayoutEffect(() => {
         const cleanup = [];
@@ -46,5 +48,5 @@ export const NoScroll = ({ children }) => {
         };
     }, [rtl]);
     return React.createElement(React.Fragment, null, children);
-};
+}
 export const NoScrollModule = createModule(MODULE_NO_SCROLL, NoScroll);

package/dist/core/modules/Portal.d.ts

@@ -1,3 +1,4 @@
-import { Component } from "../../types.js";
-export declare const Portal: Component;
+import * as React from "react";
+import { ComponentProps } from "../../types.js";
+export declare function Portal({ children, animation, styles, className, on, close }: ComponentProps): React.ReactPortal | null;
 export declare const PortalModule: import("../../types.js").Module;

package/dist/core/modules/Portal.js

@@ -2,12 +2,14 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { LightboxDefaultProps } from "../../props.js";
 import { createModule } from "../config.js";
-import { clsx, composePrefix, cssClass, cssVar } from "../utils.js";
+import { clsx, composePrefix, cssClass, cssVar, getAnimationEasing, getFadeAnimationDuration } from "../utils.js";
 import { useEventCallback, useMotionPreference } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ACTION_CLOSE, CLASS_NO_SCROLL_PADDING, MODULE_PORTAL } from "../consts.js";
-const cssPrefix = (value) => composePrefix(MODULE_PORTAL, value);
-const setAttribute = (element, attribute, value) => {
+function cssPrefix(value) {
+    return composePrefix(MODULE_PORTAL, value);
+}
+function setAttribute(element, attribute, value) {
     const previousValue = element.getAttribute(attribute);
     element.setAttribute(attribute, value);
     return () => {
@@ -18,14 +20,16 @@ const setAttribute = (element, attribute, value) => {
             element.removeAttribute(attribute);
         }
     };
-};
-export const Portal = ({ children, animation, styles, className, on, close }) => {
+}
+export function Portal({ children, animation, styles, className, on, close }) {
     const [mounted, setMounted] = React.useState(false);
     const [visible, setVisible] = React.useState(false);
     const cleanup = React.useRef([]);
     const { setTimeout } = useTimeouts();
     const { subscribe } = useEvents();
-    const fadeAnimationDuration = !useMotionPreference() ? animation.fade : 0;
+    const reduceMotion = useMotionPreference();
+    const animationDuration = !reduceMotion ? getFadeAnimationDuration(animation) : 0;
+    const animationEasing = !reduceMotion ? getAnimationEasing(animation.fade) : undefined;
     React.useEffect(() => {
         setMounted(true);
         return () => {
@@ -41,7 +45,7 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
             var _a;
             (_a = on.exited) === null || _a === void 0 ? void 0 : _a.call(on);
             close();
-        }, fadeAnimationDuration);
+        }, animationDuration);
     });
     React.useEffect(() => subscribe(ACTION_CLOSE, handleClose), [subscribe, handleClose]);
     const handleEnter = useEventCallback((node) => {
@@ -60,7 +64,7 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
         setTimeout(() => {
             var _a;
             (_a = on.entered) === null || _a === void 0 ? void 0 : _a.call(on);
-        }, fadeAnimationDuration);
+        }, animationDuration);
     });
     const handleExit = useEventCallback(() => {
         cleanup.current.forEach((clean) => clean());
@@ -77,12 +81,11 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
     return mounted
         ? ReactDOM.createPortal(React.createElement("div", { ref: handleRef, className: clsx(className, cssClass("root"), cssClass(cssPrefix()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix("open"))), role: "presentation", "aria-live": "polite", style: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
-                    ? {
-                        [cssVar("fade_animation_duration")]: `${fadeAnimationDuration}ms`,
-                    }
+                    ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),
+                ...(animationEasing ? { [cssVar("fade_animation_timing_function")]: animationEasing } : null),
                 ...styles.root,
             } }, children), document.body)
         : null;
-};
+}
 export const PortalModule = createModule(MODULE_PORTAL, Portal);

package/dist/core/modules/Toolbar.d.ts

@@ -1,9 +1,10 @@
-import { Component } from "../../types.js";
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
 import { YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
 declare module "../" {
     interface EventTypes {
         [YARL_EVENT_TOOLBAR_WIDTH]: number;
     }
 }
-export declare const Toolbar: Component;
+export declare function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
 export declare const ToolbarModule: import("../../types.js").Module;

package/dist/core/modules/Toolbar.js

@@ -5,8 +5,10 @@ import { useEvents } from "../contexts/index.js";
 import { CloseIcon, IconButton } from "../components/index.js";
 import { useContainerRect } from "../hooks/useContainerRect.js";
 import { ACTION_CLOSE, MODULE_TOOLBAR, YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
-const cssPrefix = (value) => composePrefix(MODULE_TOOLBAR, value);
-export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) => {
+function cssPrefix(value) {
+    return composePrefix(MODULE_TOOLBAR, value);
+}
+export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) {
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
     React.useEffect(() => {
@@ -16,5 +18,5 @@ export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, i
     }, [publish, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
     const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => publish(ACTION_CLOSE) }));
     return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
-};
+}
 export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);

package/dist/core/modules/controller/usePointerSwipe.d.ts

@@ -1,2 +1,2 @@
 import { UseSensors } from "../../hooks/useSensors.js";
-export declare const usePointerSwipe: <T extends Element = Element>(subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void) => void;
+export declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;

package/dist/core/modules/controller/usePointerSwipe.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { cleanup } from "../../utils.js";
 import { useEventCallback } from "../../hooks/useEventCallback.js";
 import { EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, } from "../../consts.js";
-export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) => {
+export function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
     const offset = React.useRef(0);
     const pointers = React.useRef([]);
     const activePointer = React.useRef();
@@ -69,4 +69,4 @@ export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth,
         }
     });
     React.useEffect(() => cleanup(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)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
-};
+}

package/dist/core/modules/controller/usePreventSwipeNavigation.d.ts

@@ -1,3 +1,3 @@
 /** prevent browser back/forward navigation on touchpad left/right swipe (especially noticeable in Safari)
  * this has to be done via non-passive native event handler */
-export declare const usePreventSwipeNavigation: <T extends HTMLElement = HTMLElement>() => (node: T | null) => void;
+export declare function usePreventSwipeNavigation<T extends HTMLElement = HTMLElement>(): (node: T | null) => void;

package/dist/core/modules/controller/usePreventSwipeNavigation.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 const WHEEL = "wheel";
-const preventDefault = (event) => {
+function preventDefault(event) {
     if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
         event.preventDefault();
     }
-};
-export const usePreventSwipeNavigation = () => {
+}
+export function usePreventSwipeNavigation() {
     const ref = React.useRef(null);
     return React.useCallback((node) => {
         var _a;
@@ -17,4 +17,4 @@ export const usePreventSwipeNavigation = () => {
         }
         ref.current = node;
     }, []);
-};
+}

package/dist/core/modules/controller/useWheelSwipe.d.ts

@@ -1,3 +1,3 @@
 import { UseSensors } from "../../hooks/index.js";
 import { SwipeState } from "./index.js";
-export declare const useWheelSwipe: <T extends Element = Element>(swipeState: SwipeState, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void) => void;
+export declare function useWheelSwipe<T extends Element = Element>(swipeState: SwipeState, subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;

package/dist/core/modules/controller/useWheelSwipe.js

@@ -3,7 +3,7 @@ import { useEventCallback } from "../../hooks/index.js";
 import { useTimeouts } from "../../contexts/index.js";
 import { SwipeState } from "./index.js";
 import { EVENT_ON_WHEEL } from "../../consts.js";
-export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) => {
+export function useWheelSwipe(swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
     const offset = React.useRef(0);
     const intent = React.useRef(0);
     const intentCleanup = React.useRef();
@@ -89,4 +89,4 @@ export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, contai
         }
     });
     React.useEffect(() => subscribeSensors(EVENT_ON_WHEEL, onWheel), [subscribeSensors, onWheel]);
-};
+}

package/dist/core/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Labels, Slide, SlideImage } from "../types.js";
+import { AnimationSettings, AnimationSpec, Labels, Slide, SlideImage } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
 export declare const cssClass: (name: string) => string;
 export declare const cssVar: (name: string) => string;
@@ -23,3 +23,8 @@ export declare const parseLengthPercentage: (input: unknown) => {
 export declare const devicePixelRatio: () => number;
 export declare const getSlideIndex: (index: number, slidesCount: number) => number;
 export declare const getSlide: (slides: Slide[], index: number) => Slide;
+export declare const getAnimationEasing: (animationSpec: AnimationSpec | undefined) => string | undefined;
+export declare const getAnimationDuration: (animationSpec: AnimationSpec | undefined, defaultDuration: number) => number;
+export declare const getFadeAnimationDuration: (animation: AnimationSettings) => number;
+export declare const getSwipeAnimationDuration: (animation: AnimationSettings) => number;
+export declare const getNavigationAnimationDuration: (animation: AnimationSettings) => number;

package/dist/core/utils.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AnimationDefaultProps } from "../props.js";
 export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
 const cssPrefix = "yarl__";
 export const cssClass = (name) => `${cssPrefix}${name}`;
@@ -36,8 +37,11 @@ export const parseLengthPercentage = (input) => {
     }
     return { pixel: 0 };
 };
-export const devicePixelRatio = () => {
-    return (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
-};
+export const devicePixelRatio = () => (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
 export const getSlideIndex = (index, slidesCount) => ((index % slidesCount) + slidesCount) % slidesCount;
 export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)];
+export const getAnimationEasing = (animationSpec) => typeof animationSpec === "object" ? animationSpec.easing : undefined;
+export const getAnimationDuration = (animationSpec, defaultDuration) => { var _a; return (_a = (typeof animationSpec === "object" ? animationSpec.duration : animationSpec)) !== null && _a !== void 0 ? _a : defaultDuration; };
+export const getFadeAnimationDuration = (animation) => getAnimationDuration(animation.fade, AnimationDefaultProps.fade);
+export const getSwipeAnimationDuration = (animation) => getAnimationDuration(animation.swipe, AnimationDefaultProps.swipe);
+export const getNavigationAnimationDuration = (animation) => getAnimationDuration(animation.navigation, getSwipeAnimationDuration(animation));

package/dist/plugins/captions/CaptionsContext.d.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
-type CaptionsContextType = {
+export type CaptionsContextType = {
     toolbarWidth?: number;
 };
 export declare const useCaptions: () => CaptionsContextType;
 /** Captions plugin context holder */
-export declare const CaptionsContextProvider: React.FC<React.PropsWithChildren>;
-export {};
+export declare function CaptionsContextProvider({ children }: React.PropsWithChildren): JSX.Element;

package/dist/plugins/captions/CaptionsContext.js

@@ -2,10 +2,10 @@ import * as React from "react";
 import { makeUseContext, useEvents, YARL_EVENT_TOOLBAR_WIDTH } from "../../core/index.js";
 const CaptionsContext = React.createContext(null);
 export const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
-export const CaptionsContextProvider = ({ children }) => {
+export function CaptionsContextProvider({ children }) {
     const { subscribe } = useEvents();
     const [toolbarWidth, setToolbarWidth] = React.useState();
     React.useEffect(() => subscribe(YARL_EVENT_TOOLBAR_WIDTH, (event) => setToolbarWidth(event)), [subscribe]);
     const context = React.useMemo(() => ({ toolbarWidth }), [toolbarWidth]);
     return React.createElement(CaptionsContext.Provider, { value: context }, children);
-};
+}

package/dist/plugins/captions/Description.d.ts

@@ -1,5 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxProps, Slide } from "../../types.js";
-type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
-export declare const Description: React.FC<DescriptionProps>;
-export {};
+export type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
+export declare function Description({ description, descriptionTextAlign, descriptionMaxLines, styles }: DescriptionProps): JSX.Element;

package/dist/plugins/captions/Description.js

@@ -2,16 +2,20 @@ import * as React from "react";
 import { clsx, cssVar } from "../../core/index.js";
 import { defaultCaptionsProps } from "./Captions.js";
 import { cssPrefix } from "./utils.js";
-export const Description = ({ description, descriptionTextAlign, descriptionMaxLines, styles, }) => (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
-    React.createElement("div", { className: cssPrefix("description"), style: {
-            ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||
-                descriptionMaxLines !== defaultCaptionsProps.descriptionMaxLines
-                ? {
-                    [cssVar("slide_description_text_align")]: descriptionTextAlign,
-                    [cssVar("slide_description_max_lines")]: descriptionMaxLines,
-                }
-                : null),
-            ...styles.captionsDescription,
-        } }, typeof description === "string"
-        ? description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
-        : description)));
+export function Description({ description, descriptionTextAlign, descriptionMaxLines, styles }) {
+    return (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
+        React.createElement("div", { className: cssPrefix("description"), style: {
+                ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||
+                    descriptionMaxLines !== defaultCaptionsProps.descriptionMaxLines
+                    ? {
+                        [cssVar("slide_description_text_align")]: descriptionTextAlign,
+                        [cssVar("slide_description_max_lines")]: descriptionMaxLines,
+                    }
+                    : null),
+                ...styles.captionsDescription,
+            } }, typeof description === "string"
+            ? description
+                .split("\n")
+                .flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
+            : description)));
+}

package/dist/plugins/captions/Title.d.ts

@@ -1,5 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxProps, Slide } from "../../types.js";
-type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
-export declare const Title: React.FC<TitleProps>;
-export {};
+export type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
+export declare function Title({ title, styles }: TitleProps): JSX.Element;

package/dist/plugins/captions/Title.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { clsx, cssVar } from "../../core/index.js";
 import { useCaptions } from "./CaptionsContext.js";
 import { cssPrefix } from "./utils.js";
-export const Title = ({ title, styles }) => {
+export function Title({ title, styles }) {
     const { toolbarWidth } = useCaptions();
     return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
         React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
-};
+}

package/dist/plugins/captions/utils.d.ts

@@ -1 +1 @@
-export declare const cssPrefix: (className: string) => string;
+export declare function cssPrefix(className: string): string;

package/dist/plugins/captions/utils.js

@@ -1,2 +1,4 @@
 import { cssClass } from "../../core/index.js";
-export const cssPrefix = (className) => cssClass(`slide_${className}`);
+export function cssPrefix(className) {
+    return cssClass(`slide_${className}`);
+}

package/dist/plugins/fullscreen/FullscreenButton.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
+/// <reference types="react" />
 /** Fullscreen button */
-export declare const FullscreenButton: React.FC;
+export declare function FullscreenButton(): JSX.Element | null;

package/dist/plugins/fullscreen/FullscreenButton.js

@@ -3,11 +3,11 @@ import { createIcon, IconButton, label, useController } from "../../core/index.j
 import { useFullscreen } from "./FullscreenContext.js";
 const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
-export const FullscreenButton = () => {
+export function FullscreenButton() {
     var _a;
     const { labels, render } = useController().getLightboxProps();
     const { fullscreen, fullscreenEnabled, toggleFullscreen } = useFullscreen();
     if (!fullscreenEnabled)
         return null;
     return render.buttonFullscreen ? (React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, fullscreenEnabled, toggleFullscreen }))) : (React.createElement(IconButton, { disabled: !fullscreenEnabled, label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
-};
+}

package/dist/plugins/fullscreen/FullscreenContext.d.ts

@@ -1,9 +1,9 @@
-import { Component } from "../../types.js";
-type FullscreenContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type FullscreenContextType = {
     fullscreen: boolean;
     fullscreenEnabled?: boolean;
     toggleFullscreen: () => void;
 };
 export declare const useFullscreen: () => FullscreenContextType;
-export declare const FullscreenContextProvider: Component;
-export {};
+export declare function FullscreenContextProvider({ fullscreen: auto, children }: ComponentProps): JSX.Element;

package/dist/plugins/fullscreen/FullscreenContext.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { CLASS_FULLSIZE, clsx, cssClass, makeUseContext, PLUGIN_FULLSCREEN, useEventCallback, useLayoutEffect, } from "../../core/index.js";
 const FullscreenContext = React.createContext(null);
 export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-export const FullscreenContextProvider = ({ fullscreen: auto, children }) => {
+export function FullscreenContextProvider({ fullscreen: auto, children }) {
     const containerRef = React.useRef(null);
     const [fullscreen, setFullscreen] = React.useState(false);
     const [fullscreenEnabled, setFullscreenEnabled] = React.useState();
@@ -100,4 +100,4 @@ export const FullscreenContextProvider = ({ fullscreen: auto, children }) => {
     }), [fullscreen, fullscreenEnabled, toggleFullscreen]);
     return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },
         React.createElement(FullscreenContext.Provider, { value: context }, children)));
-};
+}

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

@@ -1,21 +1,22 @@
-import * as React from "react";
 import { Fullscreen } from "./Fullscreen.js";
 declare module "../../types" {
     interface LightboxProps {
         /** if `true`, enter fullscreen mode automatically when the lightbox opens */
         fullscreen?: boolean;
     }
+    /** `render.buttonFullscreen` render function props */
+    type RenderFullscreenButtonProps = {
+        fullscreen: boolean;
+        fullscreenEnabled: boolean | undefined;
+        toggleFullscreen: () => void;
+    };
     interface Render {
         /** render custom Enter/Exit Fullscreen button */
-        buttonFullscreen?: ({ fullscreen, fullscreenEnabled, toggleFullscreen, }: {
-            fullscreen: boolean;
-            fullscreenEnabled: boolean | undefined;
-            toggleFullscreen: () => void;
-        }) => React.ReactNode;
+        buttonFullscreen?: RenderFunction<RenderFullscreenButtonProps>;
         /** render custom Enter Fullscreen icon */
-        iconEnterFullscreen?: () => React.ReactNode;
+        iconEnterFullscreen?: RenderFunction;
         /** render custom Exit Fullscreen icon */
-        iconExitFullscreen?: () => React.ReactNode;
+        iconExitFullscreen?: RenderFunction;
     }
 }
 declare global {