yet-another-react-lightbox 3.32.2 → 3.33.0

package/README.md

@@ -151,6 +151,8 @@ The following plugins are bundled in the package:
   support for fullscreen mode
 - [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms
   the lightbox into an image carousel
+- [Rotate](https://yet-another-react-lightbox.com/plugins/rotate) - adds image
+  rotation control
 - [Share](https://yet-another-react-lightbox.com/plugins/share) - adds sharing
   button
 - [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LightboxExternalProps, LightboxProps, ToolbarSettings, CarouselSettings, Slide, ContainerRect, LengthOrPercentage, SlideImage, Labels, Label, Component, Module, Node as Node$1, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerSettings, ControllerRef, Callback, RenderFunction } from './types.js';
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, Callbacks, ClickCallbackProps, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, 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, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageProps, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, NoScrollSettings, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, Callbacks, ClickCallbackProps, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, 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, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageProps, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, NoScrollSettings, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_ROTATE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
 
 /** Lightbox component */
 declare function Lightbox({ carousel, animation, render, toolbar, controller, noScroll, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;
@@ -34,6 +34,8 @@ declare function computeSlideRect(containerRect: ContainerRect, padding: LengthO
     width: number;
     height: number;
 };
+/** normalize rotation to a quarter turn in the [0, 360) range (non-finite values resolve to 0) */
+declare function normalizeRotation(rotation: number): number;
 declare function devicePixelRatio(): number;
 declare function getSlideIndex(index: number, slidesCount: number): number;
 declare function hasSlides(slides: readonly Slide[]): slides is [Slide, ...Slide[]];
@@ -183,6 +185,11 @@ type RTLContextProviderProps = React.PropsWithChildren & {
 };
 declare function RTLContextProvider({ isRTL, children }: RTLContextProviderProps): React.JSX.Element;
 
+type SlideRotationContextType = (slide: Slide) => number;
+declare const SlideRotationContext: React.Context<SlideRotationContextType | null>;
+/** clockwise rotation of the given slide in degrees (0, 90, 180 or 270; always `0` unless provided by a plugin) */
+declare function useSlideRotation(slide?: Slide): number;
+
 type TimeoutsContextType = {
     setTimeout: (fn: () => void, delay?: number) => number;
     clearTimeout: (id?: number) => void;
@@ -232,12 +239,14 @@ type ImageSlideProps = Partial<Pick<CarouselSettings, "imageFit" | "imageProps">
     offset?: number;
     render?: Render;
     rect?: ContainerRect;
+    /** clockwise rotation in degrees (multiples of 90) */
+    rotation?: number;
     onClick?: () => void;
     onLoad?: (image: HTMLImageElement) => void;
     onError?: () => void;
     style?: React.CSSProperties;
 };
-declare function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, onError, style, }: ImageSlideProps): React.JSX.Element;
+declare function ImageSlide({ slide: image, offset, render, rect, rotation: rotationProp, imageFit, imageProps, onClick, onLoad, onError, style, }: ImageSlideProps): React.JSX.Element;
 
 declare const LightboxRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
@@ -310,5 +319,5 @@ declare const RootModule: Module;
 declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: Module;
 
-export { A11yContext, A11yContextProvider, Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ContainerRect, Controller, ControllerContext, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, ErrorIcon, EventTypes, EventsContext, EventsProvider, IconButton, ImageSlide, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxState, LightboxStateContext, LightboxStateProvider, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, Portal, PortalModule, PreviousIcon, RTLContext, RTLContextProvider, Render, RenderFunction, Root, RootModule, Slide, SlideImage, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useRTLContext, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
-export type { A11yContextType, ComputeAnimation, ControllerContextType, DocumentContextProviderProps, DocumentContextType, Event, EventCallback, EventsContextType, IconButtonProps, ImageSlideProps, KeyboardEventType, LightboxDispatchContextType, LightboxPropsContextType, LightboxStateAction, LightboxStateContextType, LightboxStateProviderProps, NavigationButtonProps, PointerEventType, Publish, RTLContextProviderProps, RTLContextType, ReactEventType, RegisterSensors, SensorCallback, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContextType, Topic, Unsubscribe, UseSensors, WheelEventType };
+export { A11yContext, A11yContextProvider, Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ContainerRect, Controller, ControllerContext, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, ErrorIcon, EventTypes, EventsContext, EventsProvider, IconButton, ImageSlide, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxState, LightboxStateContext, LightboxStateProvider, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, Portal, PortalModule, PreviousIcon, RTLContext, RTLContextProvider, Render, RenderFunction, Root, RootModule, Slide, SlideImage, SlideRotationContext, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, normalizeRotation, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useRTLContext, useSensors, useSlideRotation, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export type { A11yContextType, ComputeAnimation, ControllerContextType, DocumentContextProviderProps, DocumentContextType, Event, EventCallback, EventsContextType, IconButtonProps, ImageSlideProps, KeyboardEventType, LightboxDispatchContextType, LightboxPropsContextType, LightboxStateAction, LightboxStateContextType, LightboxStateProviderProps, NavigationButtonProps, PointerEventType, Publish, RTLContextProviderProps, RTLContextType, ReactEventType, RegisterSensors, SensorCallback, SlideRotationContextType, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContextType, Topic, Unsubscribe, UseSensors, WheelEventType };

package/dist/index.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { IMAGE_FIT_COVER, IMAGE_FIT_CONTAIN, ACTION_CLOSE, MODULE_CONTROLLER, UNKNOWN_ACTION_TYPE, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_WHEEL, EVENT_ON_KEY_UP, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_DOWN, SLIDE_STATUS_LOADING, activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_PLACEHOLDER, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, ACTION_PREV, ACTION_NEXT, ACTION_SWIPE, MODULE_PORTAL, CLASS_FLEX_CENTER, MODULE_CAROUSEL, VK_ARROW_RIGHT, VK_ARROW_LEFT, VK_ESCAPE, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, MODULE_ROOT, MODULE_TOOLBAR } from './types.js';
 import { createPortal } from 'react-dom';
-export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FULLSIZE, CLASS_SLIDE_WRAPPER_INTERACTIVE, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
+export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FULLSIZE, CLASS_SLIDE_WRAPPER_INTERACTIVE, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_ROTATE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
 
 const cssPrefix$3 = "yarl__";
 function clsx(...classes) {
@@ -82,6 +82,9 @@ function computeSlideRect(containerRect, padding) {
         height: Math.max(containerRect.height - 2 * paddingPixels, 0),
     };
 }
+function normalizeRotation(rotation) {
+    return Number.isFinite(rotation) ? (((Math.round(rotation / 90) * 90) % 360) + 360) % 360 : 0;
+}
 function devicePixelRatio() {
     return (hasWindow() ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
 }
@@ -402,6 +405,12 @@ function RTLContextProvider({ isRTL, children }) {
     return React.createElement(RTLContext.Provider, { value: context }, children);
 }
 
+const SlideRotationContext = React.createContext(null);
+function useSlideRotation(slide) {
+    const getRotation = React.useContext(SlideRotationContext);
+    return slide && getRotation ? normalizeRotation(getRotation(slide)) : 0;
+}
+
 const TimeoutsContext = React.createContext(null);
 const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
 function TimeoutsProvider({ children }) {
@@ -673,7 +682,7 @@ function useThrottle(callback, delay) {
 
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
-function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, onError, style, }) {
+function ImageSlide({ slide: image, offset, render, rect, rotation: rotationProp = 0, imageFit, imageProps, onClick, onLoad, onError, style, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const { publish } = useEvents();
@@ -711,24 +720,51 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
         onError === null || onError === void 0 ? void 0 : onError();
     });
     const cover = isImageFitCover(image, imageFit);
+    const rotation = normalizeRotation(rotationProp);
+    const rotated = rotation % 180 !== 0;
+    const imageRect = rect && rotated ? { width: rect.height, height: rect.width } : rect;
+    const widthLimit = rotated && imageRect ? `${imageRect.width}px` : "100%";
+    const heightLimit = rotated && imageRect ? `${imageRect.height}px` : "100%";
     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] : []).filter(Boolean)), ((_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] : []).filter(Boolean)), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
     const defaultStyle = maxWidth && maxHeight
         ? {
-            maxWidth: `min(${maxWidth}px, 100%)`,
-            maxHeight: `min(${maxHeight}px, 100%)`,
+            maxWidth: `min(${maxWidth}px, ${widthLimit})`,
+            maxHeight: `min(${maxHeight}px, ${heightLimit})`,
         }
         : {
-            maxWidth: "100%",
-            maxHeight: "100%",
+            maxWidth: widthLimit,
+            maxHeight: heightLimit,
         };
+    const fitScale = imageRect && maxWidth && maxHeight ? Math.min(imageRect.width / maxWidth, imageRect.height / maxHeight, 1) : 0;
+    const rotatedSize = rotated && imageRect
+        ? cover
+            ? { width: imageRect.width, height: imageRect.height }
+            : fitScale
+                ? { width: maxWidth * fitScale, height: maxHeight * fitScale }
+                : null
+        : null;
     const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.slice().sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
-    const estimateActualWidth = () => rect && !cover && image.width && image.height ? (rect.height / image.height) * image.width : Number.MAX_VALUE;
-    const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
+    const estimateActualWidth = () => {
+        if (!imageRect)
+            return undefined;
+        if (!image.width || !image.height)
+            return imageRect.width;
+        return (cover ? Math.max : Math.min)((imageRect.height / image.height) * image.width, imageRect.width);
+    };
+    const actualWidth = estimateActualWidth();
+    const sizes = srcSet && actualWidth !== undefined && hasWindow() ? `${Math.round(actualWidth)}px` : undefined;
     const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = (typeof imageProps === "function" ? imageProps(image) : imageProps) || {};
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: handleOnError, onClick: onClick, draggable: false, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")), imagePropsClassName), style: { ...defaultStyle, ...style, ...imagePropsStyle }, ...restImageProps, alt: (_h = image.alt) !== null && _h !== void 0 ? _h : "", sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: handleOnError, onClick: onClick, draggable: false, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")), imagePropsClassName), style: {
+                ...defaultStyle,
+                ...(rotation ? { rotate: `${rotation}deg` } : null),
+                ...(rotated ? { flexShrink: 0 } : null),
+                ...rotatedSize,
+                ...style,
+                ...imagePropsStyle,
+            }, ...restImageProps, alt: (_h = image.alt) !== null && _h !== void 0 ? _h : "", sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),
@@ -1294,6 +1330,7 @@ function CarouselSlide({ slide, offset }) {
     const { slideRect, focus } = useController();
     const { render, carousel: { imageFit, imageProps }, on: { click: onClick }, styles: { slide: style }, labels, } = useLightboxProps();
     const { getOwnerDocument } = useDocumentContext();
+    const rotation = useSlideRotation(slide);
     const offscreen = offset !== 0;
     React.useEffect(() => {
         var _a;
@@ -1305,7 +1342,7 @@ function CarouselSlide({ slide, offset }) {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, { slide, offset, rect: slideRect });
         if (!rendered && isImageSlide(slide)) {
-            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: slideRect, imageFit: imageFit, imageProps: imageProps, onClick: !offscreen ? () => onClick === null || onClick === void 0 ? void 0 : onClick({ index: currentIndex }) : undefined }));
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: slideRect, rotation: rotation, imageFit: imageFit, imageProps: imageProps, onClick: !offscreen ? () => onClick === null || onClick === void 0 ? void 0 : onClick({ index: currentIndex }) : undefined }));
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
             _b.call(render, { slide }),
@@ -1620,4 +1657,4 @@ function Lightbox({ carousel, animation, render, toolbar, controller, noScroll,
                     React.createElement(A11yContextProvider, null, renderNode(createNode(RootModule, config), props)))))));
 }
 
-export { A11yContext, A11yContextProvider, ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, DocumentContext, DocumentContextProvider, ELEMENT_BUTTON, ELEMENT_ICON, 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, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, RTLContext, RTLContextProvider, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useRTLContext, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { A11yContext, A11yContextProvider, ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, DocumentContext, DocumentContextProvider, ELEMENT_BUTTON, ELEMENT_ICON, 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, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, RTLContext, RTLContextProvider, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SlideRotationContext, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, normalizeRotation, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useRTLContext, useSensors, useSlideRotation, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/plugins/captions/captions.css

@@ -1 +1 @@
-.yarl__slide_captions_container{position:absolute;left:var(--yarl__slide_captions_container_left,0);right:var(--yarl__slide_captions_container_right,0);padding:var(--yarl__slide_captions_container_padding,16px);background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{overflow:hidden;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);text-align:var(--yarl__slide_description_text_align,start);color:var(--yarl__slide_description_color,#fff)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}
+.yarl__slide_captions_container{position:absolute;left:var(--yarl__slide_captions_container_left,0);right:var(--yarl__slide_captions_container_right,0);padding:var(--yarl__slide_captions_container_padding,16px);background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width,0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{overflow:hidden;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);text-align:var(--yarl__slide_description_text_align,start);color:var(--yarl__slide_description_color,#fff)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}

package/dist/plugins/index.d.ts

@@ -3,6 +3,7 @@ export { default as Counter } from './counter/index.js';
 export { default as Download } from './download/index.js';
 export { default as Fullscreen } from './fullscreen/index.js';
 export { default as Inline } from './inline/index.js';
+export { default as Rotate } from './rotate/index.js';
 export { default as Share } from './share/index.js';
 export { default as Slideshow } from './slideshow/index.js';
 export { default as Thumbnails } from './thumbnails/index.js';

package/dist/plugins/index.js

@@ -3,6 +3,7 @@ export { default as Counter } from './counter/index.js';
 export { default as Download } from './download/index.js';
 export { default as Fullscreen } from './fullscreen/index.js';
 export { default as Inline } from './inline/index.js';
+export { default as Rotate } from './rotate/index.js';
 export { default as Share } from './share/index.js';
 export { default as Slideshow } from './slideshow/index.js';
 export { default as Thumbnails } from './thumbnails/index.js';

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { PluginProps, PLUGIN_ROTATE, Callback, RenderFunction } from '../../types.js';
+
+/** Rotate plugin */
+declare function Rotate({ augment, addParent }: PluginProps): void;
+
+declare module "yet-another-react-lightbox" {
+    interface LightboxProps {
+        /** Rotate plugin settings */
+        rotate?: {
+            /** Rotate plugin ref */
+            ref?: React.ForwardedRef<RotateRef>;
+            /** toolbar buttons to display (default: "both") */
+            buttons?: "clockwise" | "counterclockwise" | "both";
+        };
+    }
+    interface SlideImage {
+        /** initial clockwise image rotation in degrees (multiples of 90) */
+        rotation?: number;
+    }
+    interface Render {
+        /** render custom Rotate control in the toolbar */
+        buttonRotate?: RenderFunction<RotateRef>;
+        /** render custom Rotate Clockwise icon */
+        iconRotateClockwise?: RenderFunction;
+        /** render custom Rotate Counterclockwise icon */
+        iconRotateCounterClockwise?: RenderFunction;
+    }
+    interface Labels {
+        /** `Rotate clockwise` button title */
+        "Rotate clockwise"?: string;
+        /** `Rotate counterclockwise` button title */
+        "Rotate counterclockwise"?: string;
+    }
+    interface Callbacks {
+        /** rotate callback */
+        rotate?: Callback<RotateCallbackProps>;
+    }
+    /** Rotate callback props */
+    interface RotateCallbackProps {
+        /** index of the rotated slide */
+        index: number;
+        /** new clockwise rotation in degrees */
+        rotation: number;
+    }
+    interface ToolbarButtonKeys {
+        [PLUGIN_ROTATE]: null;
+    }
+    /** Rotate plugin ref */
+    interface RotateRef {
+        /** clockwise rotation of the current slide in degrees (0, 90, 180 or 270) */
+        rotation: number;
+        /** if `true`, rotation is unavailable for the current slide */
+        disabled: boolean;
+        /** rotate the current slide 90 degrees clockwise */
+        rotateClockwise: Callback;
+        /** rotate the current slide 90 degrees counterclockwise */
+        rotateCounterClockwise: Callback;
+    }
+}
+
+export { Rotate as default };

package/dist/plugins/rotate/index.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useLightboxProps, makeUseContext, useLightboxState, getSlideKey, isImageSlide, normalizeRotation, useEventCallback, SlideRotationContext, createIcon, useController, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { PLUGIN_ROTATE } from '../../types.js';
+
+const defaultRotateProps = {
+    ref: null,
+    buttons: "both",
+};
+function resolveRotateProps(rotate) {
+    return { ...defaultRotateProps, ...rotate };
+}
+function useRotateProps() {
+    const { rotate } = useLightboxProps();
+    return resolveRotateProps(rotate);
+}
+
+const RotateContext = React.createContext(null);
+const useRotate = makeUseContext("useRotate", "RotateContext", RotateContext);
+function RotateContextProvider({ children }) {
+    const [rotations, setRotations] = React.useState(() => new Map());
+    const lastRotation = React.useRef(undefined);
+    const { currentSlide, currentIndex } = useLightboxState();
+    const { on } = useLightboxProps();
+    const { ref } = useRotateProps();
+    const getRotation = React.useCallback((slide) => {
+        var _a, _b;
+        const key = getSlideKey(slide);
+        if (!key || !isImageSlide(slide))
+            return 0;
+        return normalizeRotation((_b = (_a = rotations.get(key)) !== null && _a !== void 0 ? _a : slide.rotation) !== null && _b !== void 0 ? _b : 0);
+    }, [rotations]);
+    const currentKey = currentSlide && isImageSlide(currentSlide) ? getSlideKey(currentSlide) : undefined;
+    const rotation = currentSlide ? getRotation(currentSlide) : 0;
+    const disabled = !currentKey;
+    const rotateBy = useEventCallback((delta) => {
+        var _a, _b;
+        if (!currentKey)
+            return;
+        const baseRotation = ((_a = lastRotation.current) === null || _a === void 0 ? void 0 : _a.key) === currentKey ? lastRotation.current.rotation : rotation;
+        const newRotation = normalizeRotation(baseRotation + delta);
+        lastRotation.current = { key: currentKey, rotation: newRotation };
+        setRotations((prev) => new Map(prev).set(currentKey, newRotation));
+        (_b = on.rotate) === null || _b === void 0 ? void 0 : _b.call(on, { index: currentIndex, rotation: newRotation });
+    });
+    const rotateClockwise = React.useCallback(() => rotateBy(90), [rotateBy]);
+    const rotateCounterClockwise = React.useCallback(() => rotateBy(-90), [rotateBy]);
+    const context = React.useMemo(() => ({ rotation, disabled, rotateClockwise, rotateCounterClockwise }), [rotation, disabled, rotateClockwise, rotateCounterClockwise]);
+    React.useImperativeHandle(ref, () => context, [context]);
+    return (React.createElement(SlideRotationContext.Provider, { value: getRotation },
+        React.createElement(RotateContext.Provider, { value: context }, children)));
+}
+
+const RotateClockwiseIcon = createIcon("RotateClockwise", React.createElement("path", { d: "M15.55 5.55 11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42 1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z" }));
+const RotateCounterClockwiseIcon = createIcon("RotateCounterClockwise", React.createElement("path", { d: "M7.11 8.53 5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z" }));
+function RotateButton({ counterClockwise }) {
+    const focused = React.useRef(false);
+    const { render } = useLightboxProps();
+    const { focus } = useController();
+    const { disabled, rotateClockwise, rotateCounterClockwise } = useRotate();
+    React.useEffect(() => {
+        if (disabled && focused.current) {
+            focused.current = false;
+            focus();
+        }
+    }, [disabled, focus]);
+    return (React.createElement(IconButton, { disabled: disabled, label: counterClockwise ? "Rotate counterclockwise" : "Rotate clockwise", icon: counterClockwise ? RotateCounterClockwiseIcon : RotateClockwiseIcon, renderIcon: counterClockwise ? render.iconRotateCounterClockwise : render.iconRotateClockwise, onClick: counterClockwise ? rotateCounterClockwise : rotateClockwise, onFocus: () => {
+            focused.current = true;
+        }, onBlur: () => {
+            focused.current = false;
+        } }));
+}
+
+function RotateToolbarControl() {
+    const { render } = useLightboxProps();
+    const { buttons } = useRotateProps();
+    const rotateRef = useRotate();
+    if (render.buttonRotate) {
+        return React.createElement(React.Fragment, null, render.buttonRotate(rotateRef));
+    }
+    return (React.createElement(React.Fragment, null,
+        buttons !== "clockwise" && React.createElement(RotateButton, { counterClockwise: true }),
+        buttons !== "counterclockwise" && React.createElement(RotateButton, null)));
+}
+
+function Rotate({ augment, addParent }) {
+    augment(({ rotate, toolbar, ...restProps }) => ({
+        rotate: resolveRotateProps(rotate),
+        toolbar: addToolbarButton(toolbar, PLUGIN_ROTATE, React.createElement(RotateToolbarControl, null)),
+        ...restProps,
+    }));
+    addParent("", createModule(PLUGIN_ROTATE, RotateContextProvider));
+}
+
+export { Rotate as default };

package/dist/plugins/thumbnails/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useLightboxState, useDocumentContext, useEventCallback, translateSlideCounter, cssVar, clsx, getSlideKey, useRTL, useEvents, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, translateLabel, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useLightboxState, useDocumentContext, useSlideRotation, useEventCallback, translateSlideCounter, cssVar, clsx, getSlideKey, useRTL, useEvents, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, translateLabel, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
 const defaultThumbnailsProps = {
@@ -30,13 +30,13 @@ const cssThumbnailPrefix = (value) => cssPrefix(composePrefix("thumbnail", value
 
 const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
 const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
-function renderThumbnail({ slide, render, rect, imageFit }) {
+function renderThumbnail({ slide, render, rect, imageFit, rotation }) {
     var _a;
     const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
     if (customThumbnail) {
         return customThumbnail;
     }
-    const imageSlideProps = { render, rect, imageFit };
+    const imageSlideProps = { render, rect, imageFit, rotation };
     if (slide.thumbnail) {
         return React.createElement(ImageSlide, { slide: { src: slide.thumbnail }, ...imageSlideProps });
     }
@@ -64,6 +64,7 @@ function Thumbnail({ slide, index, onClick, fadeIn, fadeOut, placeholder, onLose
     const { getOwnerDocument } = useDocumentContext();
     const { width, height, imageFit } = useThumbnailsProps();
     const rect = { width, height };
+    const rotation = useSlideRotation(slide !== null && slide !== void 0 ? slide : undefined);
     const active = index === globalIndex;
     const onLoseFocusCallback = useEventCallback(onLoseFocus);
     React.useEffect(() => {
@@ -85,7 +86,7 @@ function Thumbnail({ slide, index, onClick, fadeIn, fadeOut, placeholder, onLose
                 }
                 : null),
             ...styles.thumbnail,
-        }, onClick: onClick, "aria-current": active ? true : undefined, "aria-label": translateSlideCounter(labels, slides, index) }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+        }, onClick: onClick, "aria-current": active ? true : undefined, "aria-label": translateSlideCounter(labels, slides, index) }, slide && renderThumbnail({ slide, render, rect, imageFit, rotation })));
 }
 
 function isHorizontal(position) {

package/dist/plugins/thumbnails/thumbnails.css

@@ -1 +1 @@
-.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{flex:0 0 auto;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));padding:var(--yarl__thumbnails_container_padding,16px);position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__thumbnails_vignette{position:absolute;pointer-events:none;--yarl__thumbnails_vignette_size:12%}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{height:100%;left:0;right:0;background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{width:100%;top:0;bottom:0;background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_track{outline:none;gap:var(--yarl__thumbnails_thumbnail_gap,16px)}.yarl__thumbnails_thumbnail{flex:0 0 auto;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-width:var(--yarl__thumbnails_thumbnail_border,1px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);outline:none;width:var(--yarl__thumbnails_thumbnail_width,120px);height:var(--yarl__thumbnails_thumbnail_height,80px);box-sizing:content-box}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{opacity:0;animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{visibility:hidden;cursor:unset}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px);height:var(--yarl__thumbnails_thumbnail_icon_size,32px)}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}
+.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{flex:0 0 auto;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));padding:var(--yarl__thumbnails_container_padding,16px);position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__thumbnails_vignette{position:absolute;pointer-events:none;--yarl__thumbnails_vignette_size:12%}@media(min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media(min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{height:100%;left:0;right:0;background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size,12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{width:100%;top:0;bottom:0;background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size,12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_track{outline:none;gap:var(--yarl__thumbnails_thumbnail_gap,16px)}.yarl__thumbnails_thumbnail{flex:0 0 auto;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-width:var(--yarl__thumbnails_thumbnail_border,1px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);outline:none;width:var(--yarl__thumbnails_thumbnail_width,120px);height:var(--yarl__thumbnails_thumbnail_height,80px);box-sizing:content-box}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{opacity:0;animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{visibility:hidden;cursor:unset}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px);height:var(--yarl__thumbnails_thumbnail_icon_size,32px)}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}

package/dist/plugins/zoom/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useDocumentContext, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, useSlideRotation, isImageSlide, isImageFitCover, round, useDocumentContext, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, PLUGIN_ZOOM } from '../../types.js';
 
 const defaultZoomProps = {
@@ -88,14 +88,18 @@ function useZoomImageRect(slideRect, imageDimensions) {
     let imageRect = { width: 0, height: 0 };
     let maxImageRect = { width: 0, height: 0 };
     const { currentSlide } = useLightboxState();
+    const rotation = useSlideRotation(currentSlide);
     const { imageFit } = useLightboxProps().carousel;
     const { maxZoomPixelRatio, maxZoom: maxZoomInProps } = useZoomProps();
     if (slideRect && currentSlide) {
         const slide = { ...currentSlide, ...imageDimensions };
         if (isImageSlide(slide)) {
             const cover = isImageFitCover(slide, imageFit);
-            const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
-            const height = Math.max(...(((_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height)) || []).concat(slide.height ? [slide.height] : []));
+            const sourceWidth = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
+            const sourceHeight = Math.max(...(((_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height)) || []).concat(slide.height ? [slide.height] : []));
+            const rotated = rotation % 180 !== 0;
+            const width = rotated ? sourceHeight : sourceWidth;
+            const height = rotated ? sourceWidth : sourceHeight;
             if (width > 0 && height > 0 && slideRect.width > 0 && slideRect.height > 0) {
                 maxImageRect = cover
                     ? {
@@ -144,7 +148,7 @@ function distance(pointerA, pointerB) {
 function scaleZoom(value, delta, factor = 100, clamp = 2) {
     return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
 }
-function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapperRef) {
+function useZoomSensors(getZoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapperRef) {
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
     const pinchZoom = React.useRef(undefined);
@@ -162,6 +166,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         return [];
     }, [containerRef, getOwnerWindow]);
     const onKeyDown = useEventCallback((event) => {
+        const zoom = getZoom();
         const { key, metaKey, ctrlKey } = event;
         const meta = metaKey || ctrlKey;
         const preventDefault = () => {
@@ -200,6 +205,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         }
     });
     const onWheel = useEventCallback((event) => {
+        const zoom = getZoom();
         if (event.ctrlKey || scrollToZoom) {
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
                 event.stopPropagation();
@@ -225,6 +231,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
     }, [clearPointer]);
     const onPointerDown = useEventCallback((event) => {
         var _a;
+        const zoom = getZoom();
         const pointers = activePointers.current;
         if ((event.pointerType === "mouse" && event.buttons > 1) ||
             !((_a = zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
@@ -260,6 +267,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         }
     });
     const onPointerMove = useEventCallback((event) => {
+        const zoom = getZoom();
         const pointers = activePointers.current;
         const activePointer = pointers.find((p) => p.pointerId === event.pointerId);
         if (pointers.length === 2 && pinchZoom.current) {
@@ -312,37 +320,46 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const [zoom, setZoom] = React.useState(1);
     const [offsetX, setOffsetX] = React.useState(0);
     const [offsetY, setOffsetY] = React.useState(0);
+    const latest = React.useRef({ zoom, offsetX, offsetY });
     const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
     const { currentSlide, globalIndex } = useLightboxState();
     const { containerRect, slideRect } = useController();
     const { minZoom, zoomInMultiplier } = useZoomProps();
     const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
+    const rotation = useSlideRotation(currentSlide);
     const disabled = !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     useLayoutEffect(() => {
+        latest.current = { zoom: 1, offsetX: 0, offsetY: 0 };
         setZoom(1);
         setOffsetX(0);
         setOffsetY(0);
-    }, [globalIndex, currentSource]);
+    }, [globalIndex, currentSource, rotation]);
     const changeOffsets = React.useCallback((dx, dy, targetZoom) => {
-        const newZoom = targetZoom || zoom;
-        const newOffsetX = offsetX - (dx || 0);
-        const newOffsetY = offsetY - (dy || 0);
+        const newZoom = targetZoom || latest.current.zoom;
+        const newOffsetX = latest.current.offsetX - (dx || 0);
+        const newOffsetY = latest.current.offsetY - (dy || 0);
         const maxOffsetX = (imageRect.width * newZoom - slideRect.width) / 2 / newZoom;
         const maxOffsetY = (imageRect.height * newZoom - slideRect.height) / 2 / newZoom;
-        setOffsetX(Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX));
-        setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
-    }, [zoom, offsetX, offsetY, slideRect, imageRect.width, imageRect.height]);
+        latest.current.offsetX = Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX);
+        latest.current.offsetY = Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY);
+        setOffsetX(latest.current.offsetX);
+        setOffsetY(latest.current.offsetY);
+    }, [slideRect, imageRect.width, imageRect.height]);
     const changeZoom = React.useCallback((targetZoom, rapid, dx, dy) => {
         const newZoom = round(targetZoom + 0.01 < maxZoom ? (targetZoom - 0.01 > minZoom ? targetZoom : minZoom) : maxZoom, 5);
         if (!rapid) {
             animate();
         }
-        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        const { zoom: currentZoom } = latest.current;
+        changeOffsets(dx ? dx * (1 / currentZoom - 1 / newZoom) : 0, dy ? dy * (1 / currentZoom - 1 / newZoom) : 0, newZoom);
+        latest.current.zoom = newZoom;
         setZoom(newZoom);
-    }, [zoom, minZoom, maxZoom, changeOffsets, animate]);
+    }, [minZoom, maxZoom, changeOffsets, animate]);
+    const getZoom = React.useCallback(() => latest.current.zoom, []);
     const handleControllerRectChange = useEventCallback(() => {
-        if (zoom > 1) {
-            if (zoom > maxZoom) {
+        const currentZoom = getZoom();
+        if (currentZoom > 1) {
+            if (currentZoom > maxZoom) {
                 changeZoom(maxZoom, true);
             }
             changeOffsets();
@@ -350,14 +367,16 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     });
     useLayoutEffect(handleControllerRectChange, [containerRect.width, containerRect.height, handleControllerRectChange]);
     const zoomIn = React.useCallback(() => {
-        const targetZoom = zoom * zoomInMultiplier;
-        changeZoom(zoom < 1 && targetZoom > 1 ? 1 : targetZoom);
-    }, [zoom, zoomInMultiplier, changeZoom]);
+        const currentZoom = getZoom();
+        const targetZoom = currentZoom * zoomInMultiplier;
+        changeZoom(currentZoom < 1 && targetZoom > 1 ? 1 : targetZoom);
+    }, [zoomInMultiplier, getZoom, changeZoom]);
     const zoomOut = React.useCallback(() => {
-        const targetZoom = zoom / zoomInMultiplier;
-        changeZoom(zoom > 1 && targetZoom < 1 ? 1 : targetZoom);
-    }, [zoom, zoomInMultiplier, changeZoom]);
-    return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
+        const currentZoom = getZoom();
+        const targetZoom = currentZoom / zoomInMultiplier;
+        changeZoom(currentZoom > 1 && targetZoom < 1 ? 1 : targetZoom);
+    }, [zoomInMultiplier, getZoom, changeZoom]);
+    return { zoom, offsetX, offsetY, disabled, getZoom, changeOffsets, changeZoom, zoomIn, zoomOut };
 }
 
 const ZoomControllerContext = React.createContext(null);
@@ -367,9 +386,9 @@ function ZoomContextProvider({ children }) {
     const { slideRect } = useController();
     const { ref, minZoom } = useZoomProps();
     const { imageRect, maxZoom } = useZoomImageRect(slideRect, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.imageDimensions);
-    const { zoom, offsetX, offsetY, disabled, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    const { zoom, offsetX, offsetY, disabled, getZoom, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
     useZoomCallback(zoom, disabled);
-    useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    useZoomSensors(getZoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
     const zoomRef = React.useMemo(() => ({ zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
     React.useImperativeHandle(ref, () => zoomRef, [zoomRef]);
     const context = React.useMemo(() => ({ ...zoomRef, setZoomWrapper }), [zoomRef, setZoomWrapper]);
@@ -453,13 +472,15 @@ function reducer({ current, preload }, { type, source }) {
 function ResponsiveImage(props) {
     var _a, _b;
     const [{ current, preload }, dispatch] = React.useReducer(reducer, {});
-    const { slide: image, rect, imageFit, render, interactive } = props;
+    const { slide: image, rect, rotation = 0, imageFit, render, interactive, zoom = 1 } = props;
+    const rotated = rotation % 180 !== 0;
+    const imageRect = rotated ? { width: rect.height, height: rect.width } : rect;
     const srcSet = image.srcSet.sort((a, b) => a.width - b.width);
     const width = (_a = image.width) !== null && _a !== void 0 ? _a : srcSet[srcSet.length - 1].width;
     const height = (_b = image.height) !== null && _b !== void 0 ? _b : srcSet[srcSet.length - 1].height;
     const cover = isImageFitCover(image, imageFit);
     const maxWidth = Math.max(...srcSet.map((x) => x.width));
-    const targetWidth = Math.min((cover ? Math.max : Math.min)(rect.width, width * (rect.height / height)), maxWidth);
+    const targetWidth = Math.min((cover ? Math.max : Math.min)(imageRect.width, width * (imageRect.height / height)) * zoom, maxWidth);
     const pixelDensity = devicePixelRatio();
     const handleResize = useEventCallback(() => {
         var _a;
@@ -468,13 +489,15 @@ function ResponsiveImage(props) {
             dispatch({ type: "fetch", source: targetSource.src });
         }
     });
-    useLayoutEffect(handleResize, [rect.width, rect.height, pixelDensity, handleResize]);
+    useLayoutEffect(handleResize, [targetWidth, pixelDensity, handleResize]);
     const handlePreload = useEventCallback((currentPreload) => dispatch({ type: "done", source: currentPreload }));
     const style = {
         WebkitTransform: !interactive ? "translateZ(0)" : "initial",
     };
     if (!cover) {
-        Object.assign(style, rect.width / rect.height < width / height ? { width: "100%", height: "auto" } : { width: "auto", height: "100%" });
+        Object.assign(style, imageRect.width / imageRect.height < width / height
+            ? { width: rotated ? `${imageRect.width}px` : "100%", height: "auto" }
+            : { width: "auto", height: rotated ? `${imageRect.height}px` : "100%" });
     }
     return (React.createElement(React.Fragment, null,
         preload && preload !== current && (React.createElement(ImageSlide, { key: "preload", ...props, offset: undefined, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
@@ -490,6 +513,7 @@ function ZoomWrapper({ render, slide, offset, rect }) {
     const [imageDimensions, setImageDimensions] = React.useState();
     const zoomWrapperRef = React.useRef(null);
     const isImage = isImageSlide(slide);
+    const rotation = useSlideRotation(slide);
     const { zoom, maxZoom, offsetX, offsetY, setZoomWrapper } = useZoom();
     const interactive = zoom > 1;
     const { carousel, on } = useLightboxProps();
@@ -533,12 +557,13 @@ function ZoomWrapper({ render, slide, offset, rect }) {
             slide,
             offset,
             rect,
+            rotation,
             render,
             imageFit: carousel.imageFit,
             imageProps: carousel.imageProps,
             onClick: offset === 0 ? () => { var _a; return (_a = on.click) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex }); } : undefined,
         };
-        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, interactive: interactive, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, interactive: interactive, zoom: offset === 0 ? zoom : 1 })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
     }
     if (!rendered)
         return null;

package/dist/styles.css

@@ -1 +1 @@
-.yarl__fullsize{width:100%;height:100%}.yarl__relative{position:relative}.yarl__portal{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;overflow:hidden;z-index:var(--yarl__portal_zindex,9999);transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);pointer-events:auto}.yarl__portal_open{opacity:1}.yarl__container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:var(--yarl__controller_touch_action,none);overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain)}.yarl__carousel{display:flex;flex:0 0 auto;height:100%;align-content:center;justify-content:center;align-items:stretch;width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%));transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));opacity:var(--yarl__pull_opacity,1)}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{display:flex;justify-content:center;align-content:center;align-items:center}.yarl__slide{flex:1;position:relative;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%)}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);line-height:0}.yarl__slide_loading{color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));animation:yarl__delayed_fadein 1s linear}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{width:var(--yarl__slide_icon_error_size,48px);height:var(--yarl__slide_icon_error_size,48px);color:var(--yarl__slide_icon_error_color,red)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{position:absolute;top:0;right:0;bottom:auto;left:auto;display:flex;justify-content:flex-end;padding:var(--yarl__toolbar_padding,8px)}[dir=rtl] .yarl__toolbar{top:0;right:auto;bottom:auto;left:0}.yarl__icon{width:var(--yarl__icon_size,32px);height:var(--yarl__icon_size,32px)}.yarl__button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);margin:var(--yarl__button_margin,0);outline:none;line-height:0;padding:var(--yarl__button_padding,8px);color:var(--yarl__color_button,hsla(0,0%,100%,.8));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{position:absolute;top:50%;transform:translateY(-50%);padding:var(--yarl__navigation_button_padding,24px 16px)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
+.yarl__fullsize{width:100%;height:100%}.yarl__relative{position:relative}.yarl__portal{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;overflow:hidden;z-index:var(--yarl__portal_zindex,9999);transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);pointer-events:auto}.yarl__portal_open{opacity:1}.yarl__container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:var(--yarl__controller_touch_action,none);overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain)}.yarl__carousel{display:flex;flex:0 0 auto;height:100%;align-content:center;justify-content:center;align-items:stretch;width:calc(100% + (-1 + var(--yarl__carousel_slides_count)) * (100% + var(--yarl__carousel_spacing_px,0) * 1px + var(--yarl__carousel_spacing_percent,0) * 1%));transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));opacity:var(--yarl__pull_opacity,1)}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px,0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (-1 + var(--yarl__carousel_slides_count)) * var(--yarl__carousel_spacing_percent,0)) * var(--yarl__carousel_spacing_percent,0) * 1%);column-gap:calc(var(--yarl__carousel_spacing_px,0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (-1 + var(--yarl__carousel_slides_count)) * var(--yarl__carousel_spacing_percent,0)) * var(--yarl__carousel_spacing_percent,0) * 1%)}.yarl__flex_center{display:flex;justify-content:center;align-content:center;align-items:center}.yarl__slide{flex:1;position:relative;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px,0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (-1 + var(--yarl__carousel_slides_count)) * var(--yarl__carousel_spacing_percent,0)) * var(--yarl__carousel_padding_percent,0) * 1%)}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);line-height:0}.yarl__slide_loading{color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));animation:yarl__delayed_fadein 1s linear}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{width:var(--yarl__slide_icon_error_size,48px);height:var(--yarl__slide_icon_error_size,48px);color:var(--yarl__slide_icon_error_color,red)}@media(prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{position:absolute;top:0;right:0;bottom:auto;left:auto;display:flex;justify-content:flex-end;padding:var(--yarl__toolbar_padding,8px)}[dir=rtl] .yarl__toolbar{top:0;right:auto;bottom:auto;left:0}.yarl__icon{width:var(--yarl__icon_size,32px);height:var(--yarl__icon_size,32px)}.yarl__button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);margin:var(--yarl__button_margin,0);outline:none;line-height:0;padding:var(--yarl__button_padding,8px);color:var(--yarl__color_button,hsla(0,0%,100%,.8));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media(hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{position:absolute;top:50%;transform:translateY(-50%);padding:var(--yarl__navigation_button_padding,24px 16px)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}

package/dist/types.d.ts

@@ -12,6 +12,7 @@ declare const PLUGIN_COUNTER = "counter";
 declare const PLUGIN_DOWNLOAD = "download";
 declare const PLUGIN_FULLSCREEN = "fullscreen";
 declare const PLUGIN_INLINE = "inline";
+declare const PLUGIN_ROTATE = "rotate";
 declare const PLUGIN_SHARE = "share";
 declare const PLUGIN_SLIDESHOW = "slideshow";
 declare const PLUGIN_THUMBNAILS = "thumbnails";
@@ -459,5 +460,5 @@ type DeepPartialValue<T, E extends string = never> = T extends readonly any[] ?
     [P in keyof T]?: P extends E ? T[P] : DeepPartialValue<T[P], E>;
 } : T;
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, ELEMENT_BUTTON, ELEMENT_ICON, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, ELEMENT_BUTTON, ELEMENT_ICON, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_ROTATE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };
 export type { AnimationSettings, Augmentation, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepPartial, DeepPartialValue, EventTypes, GenericSlide, ImageFit, ImageProps, ImageSource, Label, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, Module, NavigationAction, NoScrollSettings, Node, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, ViewCallbackProps };

package/dist/types.js

@@ -10,6 +10,7 @@ const PLUGIN_COUNTER = "counter";
 const PLUGIN_DOWNLOAD = "download";
 const PLUGIN_FULLSCREEN = "fullscreen";
 const PLUGIN_INLINE = "inline";
+const PLUGIN_ROTATE = "rotate";
 const PLUGIN_SHARE = "share";
 const PLUGIN_SLIDESHOW = "slideshow";
 const PLUGIN_THUMBNAILS = "thumbnails";
@@ -52,4 +53,4 @@ const IMAGE_FIT_CONTAIN = "contain";
 const IMAGE_FIT_COVER = "cover";
 const UNKNOWN_ACTION_TYPE = "Unknown action type";
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, ELEMENT_BUTTON, ELEMENT_ICON, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, ELEMENT_BUTTON, ELEMENT_ICON, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_ROTATE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.32.2",
+  "version": "3.33.0",
   "description": "Modern React lightbox component",
   "repository": "github:igordanchenko/yet-another-react-lightbox",
   "homepage": "https://yet-another-react-lightbox.com",
@@ -44,6 +44,10 @@
       "types": "./dist/plugins/inline/index.d.ts",
       "default": "./dist/plugins/inline/index.js"
     },
+    "./plugins/rotate": {
+      "types": "./dist/plugins/rotate/index.d.ts",
+      "default": "./dist/plugins/rotate/index.js"
+    },
     "./plugins/share": {
       "types": "./dist/plugins/share/index.d.ts",
       "default": "./dist/plugins/share/index.js"
@@ -95,6 +99,9 @@
       "plugins/inline": [
         "dist/plugins/inline/index.d.ts"
       ],
+      "plugins/rotate": [
+        "dist/plugins/rotate/index.d.ts"
+      ],
       "plugins/share": [
         "dist/plugins/share/index.d.ts"
       ],
@@ -144,5 +151,5 @@
     "react image lightbox",
     "react photo lightbox"
   ],
-  "bundleSize": "10.6 kB"
+  "bundleSize": "11 kB"
 }