yet-another-react-lightbox 2.6.0 → 2.6.2

package/dist/core/modules/Navigation.js

@@ -1,13 +1,15 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
-import { cssClass, label as translateLabel, getNavigationAnimationDuration } 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, 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();
@@ -27,5 +29,5 @@ export const Navigation = ({ slides, carousel: { finite }, animation, labels, re
     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

@@ -6,8 +6,10 @@ import { clsx, composePrefix, cssClass, cssVar, getAnimationEasing, getFadeAnima
 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,8 +20,8 @@ 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([]);
@@ -85,5 +87,5 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
                 ...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 { AnimationSettings, AnimationSpec, Labels, Slide, SlideImage } from "../types.js";
+import { AnimationSettings, AnimationSpec, Labels, LightboxProps, 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;
@@ -13,6 +13,7 @@ export declare const isDefined: <T = any>(x: T | undefined) => x is T;
 export declare const isNumber: (value: any) => value is number;
 export declare const round: (value: number, decimals?: number) => number;
 export declare const isImageSlide: (slide: Slide) => slide is SlideImage;
+export declare const isImageFitCover: (image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]) => boolean;
 export declare const parseLengthPercentage: (input: unknown) => {
     pixel: number;
     percent?: undefined;

package/dist/core/utils.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { AnimationDefaultProps } from "../props.js";
+import { IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER } from "./consts.js";
 export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
 const cssPrefix = "yarl__";
 export const cssClass = (name) => `${cssPrefix}${name}`;
@@ -27,6 +28,7 @@ export const round = (value, decimals = 0) => {
     return Math.round((value + Number.EPSILON) * factor) / factor;
 };
 export const isImageSlide = (slide) => !isDefined(slide.type) || slide.type === "image";
+export const isImageFitCover = (image, imageFit) => image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
 export const parseLengthPercentage = (input) => {
     if (typeof input === "number") {
         return { pixel: input };
@@ -37,15 +39,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) => {
-    return getAnimationDuration(animation.navigation, getSwipeAnimationDuration(animation));
-};
+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 {

package/dist/plugins/inline/Inline.js

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

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

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

package/dist/plugins/slideshow/SlideshowButton.js

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

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

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

package/dist/plugins/slideshow/SlideshowContext.js

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

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

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

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

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