yet-another-react-lightbox 2.6.0 → 2.6.2

package/README.md

@@ -49,7 +49,7 @@ import * as React from "react";
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
-const App = () => {
+export default function App() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -69,9 +69,7 @@ const App = () => {
       />
     </>
   );
-};
-
-export default App;
+}
 ```
 
 ## Recommended Setup
@@ -86,7 +84,7 @@ import * as React from "react";
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
-const App = () => {
+export default function App() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -117,9 +115,7 @@ const App = () => {
       />
     </>
   );
-};
-
-export default App;
+}
 ```
 
 You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby Image) via a custom render function.

package/dist/Lightbox.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxExternalProps } from "./types.js";
 /** Lightbox component */
-export declare const Lightbox: React.FC<LightboxExternalProps>;
+export declare function Lightbox(props: LightboxExternalProps): JSX.Element | null;

package/dist/Lightbox.js

@@ -1,16 +1,18 @@
 import * as React from "react";
 import { LightboxDefaultProps } from "./props.js";
 import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
-const renderNode = (node, props) => {
+function renderNode(node, props) {
     var _a;
     return React.createElement(node.module.component, { key: node.module.name, ...props }, (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((child) => renderNode(child, props)));
-};
-const fixupIndex = ({ index, slides, ...rest }) => ({
-    index: index >= 0 && index < slides.length ? index : 0,
-    slides,
-    ...rest,
-});
-export const Lightbox = (props) => {
+}
+function fixupIndex({ index, slides, ...rest }) {
+    return {
+        index: index >= 0 && index < slides.length ? index : 0,
+        slides,
+        ...rest,
+    };
+}
+export function Lightbox(props) {
     const { carousel, animation, render, toolbar, controller, on, plugins, ...restProps } = props;
     const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
     const { config, augmentation } = withPlugins([
@@ -37,4 +39,4 @@ export const Lightbox = (props) => {
     if (!augmentedProps.open)
         return null;
     return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
-};
+}

package/dist/core/components/Icons.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare const createIcon: (name: string, glyph: React.ReactNode) => {
+export declare function createIcon(name: string, glyph: React.ReactNode): {
     (props: React.SVGProps<SVGSVGElement>): JSX.Element;
     displayName: string;
 };

package/dist/core/components/Icons.js

@@ -1,12 +1,12 @@
 import * as React from "react";
-export const createIcon = (name, glyph) => {
+export function createIcon(name, glyph) {
     const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props },
         React.createElement("g", { fill: "currentColor" },
             React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
             glyph)));
     icon.displayName = name;
     return icon;
-};
+}
 export const CloseIcon = createIcon("Close", React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 export const PreviousIcon = createIcon("Previous", React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
 export const NextIcon = createIcon("Next", React.createElement("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));

package/dist/core/components/ImageSlide.d.ts

@@ -10,4 +10,4 @@ export type ImageSlideProps = {
     onLoad?: (image: HTMLImageElement) => void;
     style?: React.CSSProperties;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;
+export declare function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }: ImageSlideProps): JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { clsx, cssClass, hasWindow, makeComposePrefix } from "../utils.js";
+import { clsx, cssClass, hasWindow, isImageFitCover, makeComposePrefix } from "../utils.js";
 import { useEventCallback } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-import { activeSlideStatus, ELEMENT_ICON, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
+import { activeSlideStatus, ELEMENT_ICON, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
-export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }) => {
+export function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const { publish } = useEvents();
@@ -45,7 +45,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
     const onError = React.useCallback(() => {
         setStatus(SLIDE_STATUS_ERROR);
     }, []);
-    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
+    const cover = isImageFitCover(image, imageFit);
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
     const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
     const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height)) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
@@ -68,4 +68,4 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),
             status === SLIDE_STATUS_ERROR &&
                 ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
-};
+}

package/dist/core/contexts/Events.d.ts

@@ -13,4 +13,4 @@ export type EventsContextType = {
     publish: Publish;
 };
 export declare const useEvents: () => EventsContextType;
-export declare const EventsProvider: React.FC<React.PropsWithChildren>;
+export declare function EventsProvider({ children }: React.PropsWithChildren): JSX.Element;

package/dist/core/contexts/Events.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { makeUseContext } from "../utils.js";
 const EventsContext = React.createContext(null);
 export const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
-export const EventsProvider = ({ children }) => {
+export function EventsProvider({ children }) {
     const [subscriptions] = React.useState({});
     React.useEffect(() => () => {
         Object.keys(subscriptions).forEach((key) => delete subscriptions[key]);
@@ -26,4 +26,4 @@ export const EventsProvider = ({ children }) => {
         return { publish, subscribe, unsubscribe };
     }, [subscriptions]);
     return React.createElement(EventsContext.Provider, { value: context }, children);
-};
+}

package/dist/core/contexts/LightboxState.d.ts

@@ -15,9 +15,8 @@ export declare const useLightboxState: () => {
     state: LightboxState;
     dispatch: React.Dispatch<LightboxStateAction>;
 };
-type LightboxStateProviderProps = React.PropsWithChildren<{
+export type LightboxStateProviderProps = React.PropsWithChildren<{
     slidesCount: number;
     initialIndex: number;
 }>;
-export declare const LightboxStateProvider: React.FC<LightboxStateProviderProps>;
-export {};
+export declare function LightboxStateProvider({ initialIndex, slidesCount, children }: LightboxStateProviderProps): JSX.Element;

package/dist/core/contexts/LightboxState.js

@@ -14,7 +14,7 @@ const reducer = (slidesCount) => (state, action) => {
         animationDuration,
     };
 };
-export const LightboxStateProvider = ({ initialIndex, slidesCount, children, }) => {
+export function LightboxStateProvider({ initialIndex, slidesCount, children }) {
     const memoizedReducer = React.useMemo(() => reducer(slidesCount), [slidesCount]);
     const [state, dispatch] = React.useReducer(memoizedReducer, {
         currentIndex: initialIndex,
@@ -23,4 +23,4 @@ export const LightboxStateProvider = ({ initialIndex, slidesCount, children, })
     });
     const context = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
     return React.createElement(LightboxStateContext.Provider, { value: context }, children);
-};
+}

package/dist/core/contexts/Timeouts.d.ts

@@ -4,4 +4,4 @@ export type TimeoutsContextType = {
     clearTimeout: (id?: number) => void;
 };
 export declare const useTimeouts: () => TimeoutsContextType;
-export declare const TimeoutsProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
+export declare function TimeoutsProvider({ children }: React.PropsWithChildren): JSX.Element;

package/dist/core/contexts/Timeouts.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { isDefined, makeUseContext } from "../utils.js";
 const TimeoutsContext = React.createContext(null);
 export const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
-export const TimeoutsProvider = ({ children }) => {
+export function TimeoutsProvider({ children }) {
     const [timeouts] = React.useState([]);
     React.useEffect(() => () => {
         timeouts.forEach((tid) => window.clearTimeout(tid));
@@ -29,4 +29,4 @@ export const TimeoutsProvider = ({ children }) => {
         return { setTimeout, clearTimeout };
     }, [timeouts]);
     return React.createElement(TimeoutsContext.Provider, { value: context }, children);
-};
+}

package/dist/core/hooks/useAnimation.d.ts

@@ -9,4 +9,4 @@ export type ComputeAnimation<T> = (snapshot: T, rect: DOMRect, translate: {
     easing?: string;
     onfinish?: () => void;
 } | undefined;
-export declare const useAnimation: <T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>) => (currentSnapshot: T | undefined) => void;
+export declare function useAnimation<T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>): (currentSnapshot: T | undefined) => void;

package/dist/core/hooks/useAnimation.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { useMotionPreference } from "./useMotionPreference.js";
-const currentTransformation = (node) => {
+function currentTransformation(node) {
     let x = 0;
     let y = 0;
     let z = 0;
@@ -20,8 +20,8 @@ const currentTransformation = (node) => {
         }
     }
     return { x, y, z };
-};
-export const useAnimation = (nodeRef, computeAnimation) => {
+}
+export function useAnimation(nodeRef, computeAnimation) {
     const snapshot = React.useRef();
     const animation = React.useRef();
     const reduceMotion = useMotionPreference();
@@ -45,4 +45,4 @@ export const useAnimation = (nodeRef, computeAnimation) => {
     return (currentSnapshot) => {
         snapshot.current = currentSnapshot;
     };
-};
+}

package/dist/core/hooks/useContainerRect.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ContainerRect } from "../../types.js";
-export declare const useContainerRect: <T extends HTMLElement = HTMLElement>() => {
+export declare function useContainerRect<T extends HTMLElement = HTMLElement>(): {
     setContainerRef: (node: T | null) => void;
     containerRef: React.MutableRefObject<T | null>;
     containerRect: ContainerRect | undefined;

package/dist/core/hooks/useContainerRect.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export const useContainerRect = () => {
+export function useContainerRect() {
     const [containerRect, setContainerRect] = React.useState();
     const containerRef = React.useRef(null);
     const observerRef = React.useRef();
@@ -33,4 +33,4 @@ export const useContainerRect = () => {
         containerRef,
         containerRect,
     }), [setContainerRef, containerRef, containerRect]);
-};
+}

package/dist/core/hooks/useDelay.d.ts

@@ -1 +1 @@
-export declare const useDelay: () => (callback: () => void, delay: number) => void;
+export declare function useDelay(): (callback: () => void, delay: number) => void;

package/dist/core/hooks/useDelay.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { useTimeouts } from "../contexts/Timeouts.js";
-export const useDelay = () => {
+export function useDelay() {
     const timeoutId = React.useRef();
     const { setTimeout, clearTimeout } = useTimeouts();
     return React.useCallback((callback, delay) => {
         clearTimeout(timeoutId.current);
         timeoutId.current = setTimeout(callback, delay > 0 ? delay : 0);
     }, [setTimeout, clearTimeout]);
-};
+}

package/dist/core/hooks/useEventCallback.d.ts

@@ -1 +1 @@
-export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;
+export declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;

package/dist/core/hooks/useEventCallback.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
-export const useEventCallback = (fn) => {
+export function useEventCallback(fn) {
     const ref = React.useRef(fn);
     useLayoutEffect(() => {
         ref.current = fn;
     });
     return React.useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
-};
+}

package/dist/core/hooks/useForkRef.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-export declare const setRef: <T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null) => void;
-export declare const useForkRef: <InstanceA, InstanceB>(refA: React.Ref<InstanceA> | undefined, refB: React.Ref<InstanceB> | undefined) => React.Ref<InstanceA & InstanceB>;
+export declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+export declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | null | undefined, refB: React.Ref<InstanceB> | null | undefined): React.Ref<InstanceA & InstanceB> | null;

package/dist/core/hooks/useForkRef.js

@@ -1,15 +1,17 @@
 import * as React from "react";
-export const setRef = (ref, value) => {
+export function setRef(ref, value) {
     if (typeof ref === "function") {
         ref(value);
     }
     else if (ref) {
         ref.current = value;
     }
-};
-export const useForkRef = (refA, refB) => React.useMemo(() => refA == null && refB == null
-    ? null
-    : (refValue) => {
-        setRef(refA, refValue);
-        setRef(refB, refValue);
-    }, [refA, refB]);
+}
+export function useForkRef(refA, refB) {
+    return React.useMemo(() => refA == null && refB == null
+        ? null
+        : (refValue) => {
+            setRef(refA, refValue);
+            setRef(refB, refValue);
+        }, [refA, refB]);
+}

package/dist/core/hooks/useLoseFocus.d.ts

@@ -1,4 +1,4 @@
-export declare const useLoseFocus: (disabled?: boolean) => {
+export declare function useLoseFocus(disabled?: boolean): {
     onFocus: () => void;
     onBlur: () => void;
 };

package/dist/core/hooks/useLoseFocus.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { useController } from "../modules/Controller.js";
-export const useLoseFocus = (disabled = false) => {
+export function useLoseFocus(disabled = false) {
     const focused = React.useRef(disabled);
     const { transferFocus } = useController();
     useLayoutEffect(() => {
@@ -16,4 +16,4 @@ export const useLoseFocus = (disabled = false) => {
         focused.current = false;
     }, []);
     return { onFocus, onBlur };
-};
+}

package/dist/core/hooks/useMotionPreference.d.ts

@@ -1 +1 @@
-export declare const useMotionPreference: () => boolean;
+export declare function useMotionPreference(): boolean;

package/dist/core/hooks/useMotionPreference.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export const useMotionPreference = () => {
+export function useMotionPreference() {
     const [reduceMotion, setReduceMotion] = React.useState(false);
     React.useEffect(() => {
         var _a, _b;
@@ -10,4 +10,4 @@ export const useMotionPreference = () => {
         return () => { var _a; return (_a = mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(mediaQuery, "change", listener); };
     }, []);
     return reduceMotion;
-};
+}

package/dist/core/hooks/useRTL.d.ts

@@ -1 +1 @@
-export declare const useRTL: () => boolean;
+export declare function useRTL(): boolean;

package/dist/core/hooks/useRTL.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
-export const useRTL = () => {
+export function useRTL() {
     const [isRTL, setIsRTL] = React.useState(false);
     useLayoutEffect(() => {
         setIsRTL(window.getComputedStyle(window.document.documentElement).direction === "rtl");
     }, []);
     return isRTL;
-};
+}

package/dist/core/hooks/useSensors.d.ts

@@ -11,4 +11,4 @@ export type UseSensors<T> = {
     registerSensors: RegisterSensors<T>;
     subscribeSensors: SubscribeSensors<T>;
 };
-export declare const useSensors: <T extends Element>() => UseSensors<T>;
+export declare function useSensors<T extends Element>(): UseSensors<T>;

package/dist/core/hooks/useSensors.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, } from "../consts.js";
-export const useSensors = () => {
+export function useSensors() {
     const [subscribers] = React.useState({});
     return React.useMemo(() => {
         const notifySubscribers = (type, event) => {
@@ -35,4 +35,4 @@ export const useSensors = () => {
             },
         };
     }, [subscribers]);
-};
+}

package/dist/core/hooks/useThrottle.d.ts

@@ -1 +1 @@
-export declare const useThrottle: (callback: (...args: any[]) => void, delay: number) => (...args: any[]) => void;
+export declare function useThrottle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;

package/dist/core/hooks/useThrottle.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useDelay } from "./useDelay.js";
 import { useEventCallback } from "./useEventCallback.js";
-export const useThrottle = (callback, delay) => {
+export function useThrottle(callback, delay) {
     const lastCallbackTime = React.useRef(0);
     const delayCallback = useDelay();
     const executeCallback = useEventCallback((...args) => {
@@ -13,4 +13,4 @@ export const useThrottle = (callback, delay) => {
             executeCallback(args);
         }, delay - (Date.now() - lastCallbackTime.current));
     }, [delay, executeCallback, delayCallback]);
-};
+}

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

@@ -1,3 +1,4 @@
-import { Component } from "../../types.js";
-export declare const Carousel: Component;
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export declare function Carousel({ slides, carousel: { finite, preload, padding, spacing } }: ComponentProps): JSX.Element;
 export declare const CarouselModule: import("../../types.js").Module;

package/dist/core/modules/Carousel.js

@@ -1,20 +1,23 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { useContainerRect } from "../hooks/index.js";
 import { clsx, composePrefix, cssClass, cssVar, isImageSlide, parseLengthPercentage } from "../utils.js";
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
 import { useEvents } from "../contexts/Events.js";
 import { useLightboxState } from "../contexts/LightboxState.js";
 import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, MODULE_CAROUSEL, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
-const cssPrefix = (value) => composePrefix(MODULE_CAROUSEL, value);
-const cssSlidePrefix = (value) => composePrefix("slide", value);
-const CarouselSlide = ({ slide, offset }) => {
-    const { setContainerRef, containerRect, containerRef } = useContainerRect();
+function cssPrefix(value) {
+    return composePrefix(MODULE_CAROUSEL, value);
+}
+function cssSlidePrefix(value) {
+    return composePrefix("slide", value);
+}
+function CarouselSlide({ slide, offset, rect }) {
+    const containerRef = React.useRef(null);
     const { publish } = useEvents();
     const { currentIndex } = useLightboxState().state;
     const { render, carousel: { imageFit }, on: { click: onClick }, } = useController().getLightboxProps();
-    const renderSlide = (rect) => {
+    const renderSlide = () => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
         if (!rendered && isImageSlide(slide)) {
@@ -36,24 +39,31 @@ const CarouselSlide = ({ slide, offset }) => {
             publish(YARL_EVENT_BACKDROP_CLICK);
         }
     };
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, containerRect && renderSlide(containerRect)));
-};
-const Placeholder = () => React.createElement("div", { className: cssClass("slide") });
-export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, renderSlide()));
+}
+function Placeholder() {
+    return React.createElement("div", { className: cssClass("slide") });
+}
+export function Carousel({ slides, carousel: { finite, preload, padding, spacing } }) {
     const { currentIndex, globalIndex } = useLightboxState().state;
-    const { setCarouselRef } = useController();
+    const { setCarouselRef, containerRect } = useController();
     const spacingValue = parseLengthPercentage(spacing);
     const paddingValue = parseLengthPercentage(padding);
+    const paddingPixels = paddingValue.percent !== undefined ? (containerRect.width / 100) * paddingValue.percent : paddingValue.pixel;
+    const rect = {
+        width: Math.max(containerRect.width - 2 * paddingPixels, 0),
+        height: Math.max(containerRect.height - 2 * paddingPixels, 0),
+    };
     const items = [];
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
         for (let i = currentIndex - preload; i < currentIndex; i += 1) {
             const key = globalIndex + i - currentIndex;
-            items.push(!finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+            items.push(!finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], rect: rect, offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
-        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], rect: rect, offset: 0 }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
             const key = globalIndex + i - currentIndex;
-            items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+            items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], rect: rect, offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
     }
     return (React.createElement("div", { ref: setCarouselRef, className: clsx(cssClass(cssPrefix()), items.length > 0 && cssClass(cssPrefix("with_slides"))), style: {
@@ -63,5 +73,5 @@ export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing
             [`${cssVar(cssPrefix("padding_px"))}`]: paddingValue.pixel || 0,
             [`${cssVar(cssPrefix("padding_percent"))}`]: paddingValue.percent || 0,
         } }, items));
-};
+}
 export const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Component, ComponentProps, ContainerRect } from "../../types.js";
+import { ComponentProps, ContainerRect } from "../../types.js";
 import { SubscribeSensors } from "../hooks/index.js";
 import { LightboxStateAction } from "../contexts/index.js";
 import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
@@ -24,5 +24,5 @@ export type ControllerContextType = {
     setCarouselRef: React.Ref<HTMLDivElement>;
 };
 export declare const useController: () => ControllerContextType;
-export declare const Controller: Component;
+export declare function Controller({ children, ...props }: ComponentProps): JSX.Element;
 export declare const ControllerModule: import("../../types.js").Module;

package/dist/core/modules/Controller.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);
@@ -176,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;