yet-another-react-lightbox-lite 1.0.0 → 1.2.0

package/README.md

@@ -2,14 +2,14 @@
 
 Lightweight React lightbox component. This is a trimmed-down version of the
 [yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox)
-that provides essential lightbox features and slick UX with just 2.8KB bundle
+that provides essential lightbox features and slick UX with just 3KB bundle
 size.
 
 ## Overview
 
-[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox-lite.svg?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox-lite.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
-[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox-lite.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox-lite.svg?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox-lite)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox-lite.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox-lite)
+[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox-lite.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox-lite/blob/main/LICENSE)
 
 - **Built for React:** works with React 18+
 - **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
@@ -110,7 +110,6 @@ with `next/image` with the following `render.slide` render function.
 
 ```tsx
 <Lightbox
-  // ...
   render={{
     slide: ({ slide, rect }) => {
       const width =
@@ -147,6 +146,7 @@ with `next/image` with the following `render.slide` render function.
       );
     },
   }}
+  // ...
 />
 ```
 
@@ -203,6 +203,63 @@ Custom UI labels / translations.
 />
 ```
 
+### toolbar
+
+Type: `object`
+
+Toolbar settings.
+
+- `buttons` - custom toolbar buttons (type: `ReactNode[]`)
+- `fixed` - if `true`, the toolbar is positioned statically above the carousel
+
+Usage example:
+
+```tsx
+<Lightbox
+  toolbar={{
+    fixed: true,
+    buttons: [
+      <button
+        type="button"
+        className="yarll__button"
+        onClick={() => {
+          // ...
+        }}
+      >
+        <ButtonIcon />
+      </button>,
+    ],
+  }}
+  // ...
+/>
+```
+
+### controller
+
+Type: `object`
+
+Controller settings.
+
+- `closeOnPullUp` - if `true`, close the lightbox on pull-up gesture (default:
+  `true`)
+- `closeOnPullDown` - if `true`, close the lightbox on pull-down gesture
+  (default: `true`)
+- `closeOnBackdropClick` - if `true`, close the lightbox when the backdrop is
+  clicked (default: `true`)
+
+Usage example:
+
+```tsx
+<Lightbox
+  controller={{
+    closeOnPullUp: false,
+    closeOnPullDown: false,
+    closeOnBackdropClick: false,
+  }}
+  // ...
+/>
+```
+
 ### render
 
 Type: `object`
@@ -268,7 +325,6 @@ slides counter.
 
 ```tsx
 <Lightbox
-  // ...
   render={{
     controls: () =>
       index !== undefined && (
@@ -277,29 +333,7 @@ slides counter.
         </div>
       ),
   }}
-/>
-```
-
-You can also use the `render.controls` render function to add custom buttons to
-the toolbar.
-
-```tsx
-<Lightbox
   // ...
-  render={{
-    controls: () => (
-      <button
-        type="button"
-        className="yarll__button"
-        style={{ position: "absolute", top: 8, right: 64 }}
-        onClick={() => {
-          // ...
-        }}
-      >
-        <ButtonIcon />
-      </button>
-    ),
-  }}
 />
 ```
 
@@ -315,6 +349,42 @@ Render custom `Next` icon.
 
 Render custom `Close` icon.
 
+### styles
+
+Type: `{ [key in Slot]?: SlotCSSProperties }`
+
+Customization slots styles allow you to specify custom CSS styles or override
+`--yarll__*` CSS variables by passing your custom styles through to the
+corresponding lightbox elements.
+
+Supported customization slots:
+
+- `portal` - lightbox portal (root)
+- `carousel` - lightbox carousel
+- `slide` - lightbox slide
+- `image` - lightbox slide image
+- `toolbar` - lightbox toolbar
+- `button` - lightbox button
+- `icon` - lightbox icon
+
+Usage example:
+
+```tsx
+<Lightbox
+  styles={{
+    portal: { "--yarll__backdrop_color": "rgba(0, 0, 0, 0.6)" },
+  }}
+  // ...
+/>
+```
+
+### className
+
+Type: `string`
+
+CSS class of the lightbox root element. You can use this class name to provide
+module-scoped style overrides.
+
 ## Custom Slide Attributes
 
 You can add custom slide attributes with the following module augmentation.
@@ -420,6 +490,31 @@ export default function App() {
 }
 ```
 
+## Body Scroll Lock
+
+By default, the lightbox hides the browser window scrollbar and prevents
+document `<body>` from scrolling underneath the lightbox by assigning the
+`height: 100%; overflow: hidden;` styles to the document `<body>` element.
+
+If this behavior causes undesired side effects in your case, and you prefer not
+to use this feature, you can turn it off by assigning the
+`yarll__no_scroll_lock` class to the lightbox.
+
+```tsx
+<Lightbox
+  className="yarll__no_scroll_lock"
+  // ...
+/>
+```
+
+However, if you keep the body scroll lock feature on, you may notice a visual
+layout shift of some fixed-positioned page elements when the lightbox opens. To
+address this, you can assign the `yarll__fixed` CSS class to your
+fixed-positioned elements to keep them in place. Please note that the
+fixed-positioned element container should not have its own border or padding
+styles. If that's the case, you can always add an extra wrapper that just
+defines the fixed position without visual styles.
+
 ## License
 
 MIT © 2024 [Igor Danchenko](https://github.com/igordanchenko)

package/dist/index.d.ts

@@ -13,6 +13,14 @@ interface LightboxProps {
     labels?: Labels;
     /** custom render functions */
     render?: Render;
+    /** toolbar settings */
+    toolbar?: ToolbarSettings;
+    /** controller settings */
+    controller?: ControllerSettings;
+    /** customization slots styles */
+    styles?: SlotStyles;
+    /** CSS class of the lightbox root element */
+    className?: string;
 }
 /** Slide */
 type Slide = SlideTypes[SlideTypeKey];
@@ -88,6 +96,49 @@ interface RenderSlideProps {
     /** if `true`, the slide is the current slide in the viewport */
     current: boolean;
 }
+/** Toolbar settings */
+interface ToolbarSettings {
+    /** custom toolbar buttons */
+    buttons?: React.ReactNode[];
+    /** if `true`, the toolbar is positioned statically above the carousel */
+    fixed?: boolean;
+}
+/** Controller settings */
+interface ControllerSettings {
+    /** if `true`, close the lightbox on pull-up gesture (default: `true`) */
+    closeOnPullUp?: boolean;
+    /** if `true`, close the lightbox on pull-down gesture (default: `true`) */
+    closeOnPullDown?: boolean;
+    /** if `true`, close the lightbox when the backdrop is clicked (default: `true`) */
+    closeOnBackdropClick?: boolean;
+}
+/** Customization slots */
+interface SlotType {
+    /** lightbox portal (root) customization slot */
+    portal: "portal";
+    /** lightbox carousel customization slot */
+    carousel: "carousel";
+    /** lightbox slide customization slot */
+    slide: "slide";
+    /** lightbox slide image customization slot */
+    image: "image";
+    /** lightbox toolbar customization slot */
+    toolbar: "toolbar";
+    /** lightbox button customization slot */
+    button: "button";
+    /** lightbox icon customization slot */
+    icon: "icon";
+}
+/** Customization slots */
+type Slot = SlotType[keyof SlotType];
+/** Customization slot CSS properties */
+interface SlotCSSProperties extends React.CSSProperties {
+    [key: `--yarll__${string}`]: string | number;
+}
+/** Customization slots styles */
+type SlotStyles = {
+    [key in Slot]?: SlotCSSProperties;
+};
 /** Rect */
 type Rect = {
     width: number;
@@ -100,4 +151,4 @@ type RenderFunction<T = void> = [T] extends [void] ? () => React.ReactNode : (pr
 
 declare function Lightbox({ slides, index, setIndex, ...rest }: LightboxProps): react_jsx_runtime.JSX.Element | null;
 
-export { type Callback, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, Lightbox as default };
+export { type Callback, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, Lightbox as default };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect, isValidElement, cloneElement } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 
 const cssPrefix = "yarll__";
@@ -41,6 +41,7 @@ function LightboxContextProvider({ children, ...props }) {
 }
 
 function ImageSlide({ slide, rect }) {
+    const { styles } = useLightboxContext();
     const { width, height } = slide.srcSet?.[0] ?? slide;
     const imageAspectRatio = width && height ? width / height : undefined;
     const srcSet = slide.srcSet
@@ -50,11 +51,11 @@ function ImageSlide({ slide, rect }) {
     const sizes = imageAspectRatio
         ? `${imageAspectRatio < rect.width / rect.height ? Math.round(imageAspectRatio * rect.height) : rect.width}px`
         : undefined;
-    return (jsx("img", { draggable: false, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, src: slide.src, alt: slide.alt }));
+    return (jsx("img", { draggable: false, style: styles?.image, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, src: slide.src, alt: slide.alt }));
 }
 
 function Carousel() {
-    const { slides, index, render: { slide: renderSlide, slideHeader, slideFooter } = {} } = useLightboxContext();
+    const { slides, index, styles, render: { slide: renderSlide, slideHeader, slideFooter } = {} } = useLightboxContext();
     const [rect, setRect] = useState();
     const observer = useRef();
     const handleRef = useCallback((node) => {
@@ -69,7 +70,7 @@ function Carousel() {
             updateRect();
         }
     }, []);
-    return (jsx("div", { ref: handleRef, className: cssClass("carousel"), children: rect &&
+    return (jsx("div", { ref: handleRef, style: styles?.carousel, className: cssClass("carousel"), children: rect &&
             Array.from({ length: 5 }).map((_, i) => {
                 const slideIndex = index - 2 + i;
                 if (slideIndex < 0 || slideIndex >= slides.length)
@@ -77,7 +78,7 @@ function Carousel() {
                 const slide = slides[slideIndex];
                 const current = slideIndex === index;
                 const context = { slide, rect, current };
-                return (jsxs("div", { role: "group", "aria-roledescription": "slide", className: cssClass("slide"), hidden: !current, children: [slideHeader?.(context), renderSlide?.(context) ?? jsx(ImageSlide, { ...context }), slideFooter?.(context)] }, slide.key ?? `${slideIndex}-${slide.src}`));
+                return (jsxs("div", { role: "group", "aria-roledescription": "slide", className: cssClass("slide"), hidden: !current, style: styles?.slide, children: [slideHeader?.(context), renderSlide?.(context) ?? jsx(ImageSlide, { ...context }), slideFooter?.(context)] }, slide.key ?? `${slideIndex}-${slide.src}`));
             }) }));
 }
 
@@ -115,9 +116,9 @@ function Controller({ setIndex, children }) {
 }
 
 function Button({ icon: Icon, renderIcon, label, onClick, disabled, className }) {
-    const { labels } = useLightboxContext();
+    const { labels, styles } = useLightboxContext();
     const buttonLabel = translateLabel(labels, label);
-    return (jsx("button", { type: "button", title: buttonLabel, "aria-label": buttonLabel, onClick: onClick, disabled: disabled, className: clsx(cssClass("button"), className), children: renderIcon?.() ?? jsx(Icon, { className: cssClass("icon") }) }));
+    return (jsx("button", { type: "button", title: buttonLabel, "aria-label": buttonLabel, onClick: onClick, disabled: disabled, style: styles?.button, className: clsx(cssClass("button"), className), children: renderIcon?.() ?? jsx(Icon, { style: styles?.icon, className: cssClass("icon") }) }));
 }
 
 function svgIcon(name, children) {
@@ -136,9 +137,9 @@ const Next = createIcon("Next", jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58
 const Previous = createIcon("Previous", jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
 
 function Navigation() {
-    const { slides, index, render: { iconPrev, iconNext, iconClose, controls } = {} } = useLightboxContext();
-    const { prev, next, close } = useController();
-    return (jsxs(Fragment, { children: [slides.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { label: "Previous", icon: Previous, renderIcon: iconPrev, onClick: prev, className: cssClass("button_prev"), disabled: index <= 0 }), jsx(Button, { label: "Next", icon: Next, renderIcon: iconNext, onClick: next, className: cssClass("button_next"), disabled: index >= slides.length - 1 })] })), jsx(Button, { label: "Close", icon: Close, renderIcon: iconClose, onClick: close, className: cssClass("button_close") }), controls?.()] }));
+    const { slides, index, render: { iconPrev, iconNext, controls } = {} } = useLightboxContext();
+    const { prev, next } = useController();
+    return (jsxs(Fragment, { children: [slides.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { label: "Previous", icon: Previous, renderIcon: iconPrev, onClick: prev, className: cssClass("button_prev"), disabled: index <= 0 }), jsx(Button, { label: "Next", icon: Next, renderIcon: iconNext, onClick: next, className: cssClass("button_next"), disabled: index >= slides.length - 1 })] })), controls?.()] }));
 }
 
 function useSensors() {
@@ -147,6 +148,12 @@ function useSensors() {
     const wheelCooldownMomentum = useRef(null);
     const activePointer = useRef(null);
     const { prev, next, close } = useController();
+    const { closeOnPullUp, closeOnPullDown, closeOnBackdropClick } = {
+        closeOnPullUp: true,
+        closeOnPullDown: true,
+        closeOnBackdropClick: true,
+        ...useLightboxContext().controller,
+    };
     return useMemo(() => {
         const onKeyDown = (event) => {
             switch (event.key) {
@@ -173,8 +180,9 @@ function useSensors() {
         const onPointerUp = (event) => {
             if (event.pointerId === activePointer.current?.pointerId) {
                 const dx = event.clientX - activePointer.current.clientX;
+                const dy = event.clientY - activePointer.current.clientY;
                 const deltaX = Math.abs(dx);
-                const deltaY = Math.abs(event.clientY - activePointer.current.clientY);
+                const deltaY = Math.abs(dy);
                 if (deltaX > 50 && deltaX > 1.2 * deltaY) {
                     if (dx > 0) {
                         prev();
@@ -183,9 +191,10 @@ function useSensors() {
                         next();
                     }
                 }
-                else if ((deltaY > 50 && deltaY > 1.2 * deltaX) ||
-                    (activePointer.current.target instanceof HTMLElement &&
-                        activePointer.current.target.className.split(" ").includes(cssClass("slide")))) {
+                else if ((deltaY > 50 && deltaY > 1.2 * deltaX && ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
+                    (closeOnBackdropClick &&
+                        activePointer.current.target instanceof Element &&
+                        Array.from(activePointer.current.target.classList).some((className) => [cssClass("slide"), cssClass("portal")].includes(className)))) {
                     close();
                 }
                 activePointer.current = null;
@@ -229,7 +238,7 @@ function useSensors() {
             onPointerCancel: onPointerUp,
             onWheel,
         };
-    }, [prev, next, close]);
+    }, [prev, next, close, closeOnPullUp, closeOnPullDown, closeOnBackdropClick]);
 }
 
 function setAttribute(element, attribute, value) {
@@ -245,6 +254,7 @@ function setAttribute(element, attribute, value) {
     };
 }
 function Portal({ children }) {
+    const { styles, className } = useLightboxContext();
     const cleanup = useRef([]);
     const [mounted, setMounted] = useState(false);
     const [visible, setVisible] = useState(false);
@@ -307,7 +317,7 @@ function Portal({ children }) {
         }
     }, [handleCleanup]);
     return mounted
-        ? createPortal(jsx("div", { "aria-modal": true, role: "dialog", "aria-roledescription": "carousel", tabIndex: -1, ref: handleRef, className: clsx(cssClass("portal"), !visible && cssClass("portal_closed")), onTransitionEnd: onTransitionEnd.current, onFocus: (event) => {
+        ? createPortal(jsx("div", { "aria-modal": true, role: "dialog", "aria-roledescription": "carousel", tabIndex: -1, ref: handleRef, style: styles?.portal, className: clsx(cssClass("portal"), !visible && cssClass("portal_closed"), className), onTransitionEnd: onTransitionEnd.current, onFocus: (event) => {
                 if (!restoreFocus.current) {
                     restoreFocus.current = event.relatedTarget;
                 }
@@ -315,10 +325,16 @@ function Portal({ children }) {
         : null;
 }
 
+function Toolbar() {
+    const { render: { iconClose } = {}, toolbar: { buttons, fixed } = {}, styles } = useLightboxContext();
+    const { close } = useController();
+    return (jsxs("div", { style: styles?.toolbar, className: clsx(cssClass("toolbar"), fixed && cssClass("toolbar_fixed")), children: [buttons?.map((button, key) => (isValidElement(button) && !button.key ? cloneElement(button, { key }) : button)), jsx(Button, { label: "Close", icon: Close, renderIcon: iconClose, onClick: close })] }));
+}
+
 function Lightbox({ slides, index, setIndex, ...rest }) {
     if (!Array.isArray(slides) || index === undefined || index < 0 || index >= slides.length)
         return null;
-    return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsxs(Portal, { children: [jsx(Carousel, {}), jsx(Navigation, {})] }) }) }));
+    return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsxs(Portal, { children: [jsx(Toolbar, {}), jsx(Carousel, {}), jsx(Navigation, {})] }) }) }));
 }
 
 export { Lightbox as default };

package/dist/styles.css

@@ -1 +1 @@
-body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal):not(.yarll__no_scroll_lock){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;flex:1;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_close{position:absolute;right:8px;top:8px}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);width:var(--yarll__icon_size,32px)}
+body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll_fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;flex:1;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static;z-index:unset}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);width:var(--yarll__icon_size,32px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",