yet-another-react-lightbox-lite 1.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 Igor Danchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,425 @@
+# Yet Another React Lightbox Lite
+
+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
+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)
+
+- **Built for React:** works with React 18+
+- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **Performance:** preloads a fixed number of images without compromising
+  performance or UX
+- **Responsive:** responsive images with automatic resolution switching are
+  supported out of the box
+- **Customization:** customize any UI element or add your own custom slides
+- **No bloat:** supports only essential lightbox features
+- **TypeScript:** type definitions come built-in in the package
+
+## Documentation
+
+[https://github.com/igordanchenko/yet-another-react-lightbox-lite](https://github.com/igordanchenko/yet-another-react-lightbox-lite)
+
+## Live Demo
+
+[https://stackblitz.com/edit/yet-another-react-lightbox-lite](https://stackblitz.com/edit/yet-another-react-lightbox-lite)
+
+## Changelog
+
+[https://github.com/igordanchenko/yet-another-react-lightbox-lite/releases](https://github.com/igordanchenko/yet-another-react-lightbox-lite/releases)
+
+## Requirements
+
+- React 18+
+- Node 18+
+- modern ESM-compatible bundler
+
+## Installation
+
+```shell
+npm install yet-another-react-lightbox-lite
+```
+
+## Minimal Setup Example
+
+```tsx
+import { useState } from "react";
+import Lightbox from "yet-another-react-lightbox-lite";
+import "yet-another-react-lightbox-lite/styles.css";
+
+export default function App() {
+  const [index, setIndex] = useState<number>();
+
+  return (
+    <>
+      <button type="button" onClick={() => setIndex(0)}>
+        Open Lightbox
+      </button>
+
+      <Lightbox
+        slides={[
+          { src: "/image1.jpg" },
+          { src: "/image2.jpg" },
+          { src: "/image3.jpg" },
+        ]}
+        index={index}
+        setIndex={setIndex}
+      />
+    </>
+  );
+}
+```
+
+## Responsive Images
+
+To utilize responsive images with automatic resolution switching, provide
+`srcset` images in the slide `srcSet` array.
+
+```tsx
+<Lightbox
+  slides={[
+    {
+      src: "/image1x3840.jpg",
+      srcSet: [
+        { src: "/image1x320.jpg", width: 320, height: 213 },
+        { src: "/image1x640.jpg", width: 640, height: 427 },
+        { src: "/image1x1200.jpg", width: 1200, height: 800 },
+        { src: "/image1x2048.jpg", width: 2048, height: 1365 },
+        { src: "/image1x3840.jpg", width: 3840, height: 2560 },
+      ],
+    },
+    // ...
+  ]}
+  // ...
+/>
+```
+
+## Next.js Image
+
+If your project is based on [Next.js](https://nextjs.org/), you may want to take
+advantage of the
+[next/image](https://nextjs.org/docs/pages/api-reference/components/image)
+component. The `next/image` component provides a more efficient way to handle
+images in your Next.js project. You can replace the standard `<img>` element
+with `next/image` with the following `render.slide` render function.
+
+```tsx
+<Lightbox
+  // ...
+  render={{
+    slide: ({ slide, rect }) => {
+      const width =
+        slide.width && slide.height
+          ? Math.round(
+              Math.min(rect.width, (rect.height / slide.height) * slide.width),
+            )
+          : rect.width;
+
+      const height =
+        slide.width && slide.height
+          ? Math.round(
+              Math.min(rect.height, (rect.width / slide.width) * slide.height),
+            )
+          : rect.height;
+
+      return (
+        <Image
+          src={slide.src}
+          alt={slide.alt || ""}
+          width={width}
+          height={height}
+          loading="eager"
+          draggable={false}
+          blurDataURL={(slide as any).blurDataURL}
+          style={{
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
+          }}
+        />
+      );
+    },
+  }}
+/>
+```
+
+## API
+
+Yet Another React Lightbox Lite comes with CSS stylesheet that needs to be
+imported in your app.
+
+```tsx
+import "yet-another-react-lightbox-lite/styles.css";
+```
+
+The lightbox component accepts the following props.
+
+### slides
+
+Type: `Slide[]`
+
+An array of slides to display in the lightbox. This prop is required. By
+default, the lightbox supports only image slides. You can add support for custom
+slides through a custom render function (see example below).
+
+Image slide props:
+
+- `src` - image source (required)
+- `alt` - image `alt` attribute
+
+### index
+
+Type: `number | undefined`
+
+Current slide index. This prop is required.
+
+### setIndex
+
+Type: `(index: number | undefined) => void`
+
+A callback to update current slide index state. This prop is required.
+
+### labels
+
+Type: `{ [key: string]: string }`
+
+Custom UI labels / translations.
+
+```tsx
+<Lightbox
+  labels={{
+    Previous: t("Previous"),
+    Next: t("Next"),
+    Close: t("Close"),
+  }}
+  // ...
+/>
+```
+
+### render
+
+Type: `object`
+
+An object providing custom render functions.
+
+```tsx
+<Lightbox
+  render={{
+    slide: ({ slide, rect, current }) => (
+      <CustomSlide {...{ slide, rect, current }} />
+    ),
+    slideHeader: ({ slide, rect, current }) => (
+      <SlideHeader {...{ slide, rect, current }} />
+    ),
+    slideFooter: ({ slide, rect, current }) => (
+      <SlideFooter {...{ slide, rect, current }} />
+    ),
+    controls: () => <CustomControls />,
+    iconPrev: () => <IconPrev />,
+    iconNext: () => <IconNext />,
+    iconClose: () => <IconClose />,
+  }}
+  // ...
+/>
+```
+
+#### slide: ({ slide, rect, current }) => ReactNode
+
+Render custom slide type, or override the default image slide implementation.
+
+#### slideHeader: ({ slide, rect, current }) => ReactNode
+
+Render custom elements above each slide.
+
+#### slideFooter: ({ slide, rect, current }) => ReactNode
+
+Render custom elements below or over each slide. By default, the content is
+rendered right under the slide. Alternatively, you can use
+`position: "absolute"` to position the extra elements relative to the slide.
+
+For example, you can use the `slideFooter` render function to add slides
+descriptions.
+
+```tsx
+<Lightbox
+  render={{
+    slideFooter: ({ slide }) => (
+      <div style={{ marginBlockStart: 16 }}>{slide.description}</div>
+    ),
+  }}
+  // ...
+/>
+```
+
+#### controls: () => ReactNode
+
+Render custom controls or additional elements in the lightbox (use absolute
+positioning).
+
+For example, you can use the `render.controls` render function to implement
+slides counter.
+
+```tsx
+<Lightbox
+  // ...
+  render={{
+    controls: () =>
+      index !== undefined && (
+        <div style={{ position: "absolute", top: 16, left: 16 }}>
+          {index + 1} of {slides.length}
+        </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>
+    ),
+  }}
+/>
+```
+
+#### iconPrev: () => ReactNode
+
+Render custom `Previous` icon.
+
+#### iconNext: () => ReactNode
+
+Render custom `Next` icon.
+
+#### iconClose: () => ReactNode
+
+Render custom `Close` icon.
+
+## Custom Slide Attributes
+
+You can add custom slide attributes with the following module augmentation.
+
+```tsx
+declare module "yet-another-react-lightbox-lite" {
+  interface GenericSlide {
+    description?: string;
+  }
+}
+```
+
+## Custom Slides
+
+You can add custom slide types through module augmentation and render them with
+the `render.slide` render function.
+
+Here is an example demonstrating video slides implementation.
+
+```tsx
+declare module "yet-another-react-lightbox-lite" {
+  interface SlideVideo extends GenericSlide {
+    type: "video";
+    src: string;
+    poster: string;
+    width: number;
+    height: number;
+  }
+
+  interface SlideTypes {
+    video: SlideVideo;
+  }
+}
+
+// ...
+
+<Lightbox
+  slides={[
+    {
+      type: "video",
+      src: "/media/video.mp4",
+      poster: "/media/poster.jpg",
+      width: 1280,
+      height: 720,
+    },
+  ]}
+  render={{
+    slide: ({ slide }) =>
+      slide.type === "video" ? (
+        <video
+          controls
+          playsInline
+          poster={slide.poster}
+          width={slide.width}
+          height={slide.height}
+          style={{ maxWidth: "100%", maxHeight: "100%" }}
+        >
+          <source type="video/mp4" src={slide.src} />
+        </video>
+      ) : undefined,
+  }}
+  // ...
+/>;
+```
+
+## Code Splitting (Suspense)
+
+```tsx
+// Lightbox.tsx
+import LightboxComponent, {
+  LightboxProps,
+} from "yet-another-react-lightbox-lite";
+import "yet-another-react-lightbox-lite/styles.css";
+
+export default function Lightbox(props: LightboxProps) {
+  return <LightboxComponent {...props} />;
+}
+```
+
+```tsx
+// App.tsx
+import { lazy, Suspense, useState } from "react";
+import slides from "./slides";
+
+const Lightbox = lazy(() => import("./Lightbox"));
+
+export default function App() {
+  const [index, setIndex] = useState<number>();
+
+  return (
+    <>
+      <button type="button" onClick={() => setIndex(0)}>
+        Open Lightbox
+      </button>
+
+      {index !== undefined && (
+        <Suspense>
+          <Lightbox slides={slides} index={index} setIndex={setIndex} />
+        </Suspense>
+      )}
+    </>
+  );
+}
+```
+
+## License
+
+MIT © 2024 [Igor Danchenko](https://github.com/igordanchenko)

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Lightbox props */
+interface LightboxProps {
+    /** slides to display in the lightbox */
+    slides: Slide[];
+    /** slide index */
+    index: number | undefined;
+    /** slide index change callback */
+    setIndex: (index: number | undefined) => void;
+    /** custom UI labels / translations */
+    labels?: Labels;
+    /** custom render functions */
+    render?: Render;
+}
+/** Slide */
+type Slide = SlideTypes[SlideTypeKey];
+/** Supported slide types */
+interface SlideTypes {
+    /** image slide type */
+    image: SlideImage;
+}
+/** Slide type key */
+type SlideTypeKey = keyof SlideTypes;
+/** Generic slide */
+interface GenericSlide {
+    /** slide key */
+    key?: React.Key;
+    /** slide type */
+    type?: SlideTypeKey;
+}
+/** Image slide properties */
+interface SlideImage extends GenericSlide {
+    /** image slide type */
+    type?: "image";
+    /** image URL */
+    src: string;
+    /** image width in pixels */
+    width?: number;
+    /** image height in pixels */
+    height?: number;
+    /** image 'alt' attribute */
+    alt?: string;
+    /** alternative images to be passed to the 'srcSet' */
+    srcSet?: ImageSource[];
+}
+/** Image source */
+interface ImageSource {
+    /** image URL */
+    src: string;
+    /** image width in pixels */
+    width: number;
+    /** image height in pixels */
+    height: number;
+}
+/** Custom UI labels / translations */
+interface Labels {
+    Previous?: string;
+    Next?: string;
+    Close?: string;
+}
+/** Label key */
+type Label = keyof Labels;
+/** Custom render functions. */
+interface Render {
+    /** render custom slide type, or override the default image slide */
+    slide?: RenderFunction<RenderSlideProps>;
+    /** render custom elements above each slide */
+    slideHeader?: RenderFunction<RenderSlideProps>;
+    /** render custom elements below or over each slide */
+    slideFooter?: RenderFunction<RenderSlideProps>;
+    /** render custom controls or additional elements in the lightbox (use absolute positioning) */
+    controls?: RenderFunction;
+    /** render custom Prev icon */
+    iconPrev?: RenderFunction;
+    /** render custom Next icon */
+    iconNext?: RenderFunction;
+    /** render custom Close icon */
+    iconClose?: RenderFunction;
+}
+/** `render.slide` render function props */
+interface RenderSlideProps {
+    /** slide */
+    slide: Slide;
+    /** slide */
+    rect: Rect;
+    /** if `true`, the slide is the current slide in the viewport */
+    current: boolean;
+}
+/** Rect */
+type Rect = {
+    width: number;
+    height: number;
+};
+/** Generic callback function */
+type Callback<T = void> = () => T;
+/** Render function */
+type RenderFunction<T = void> = [T] extends [void] ? () => React.ReactNode : (props: T) => React.ReactNode;
+
+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 };

package/dist/index.js

@@ -0,0 +1,324 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { flushSync, createPortal } from 'react-dom';
+
+const cssPrefix = "yarll__";
+function cssClass(name) {
+    return `${cssPrefix}${name}`;
+}
+function cssVar(name) {
+    return `--${cssPrefix}${name}`;
+}
+function clsx(...classes) {
+    return [...classes].filter(Boolean).join(" ");
+}
+function transition(callback) {
+    if (document.startViewTransition) {
+        document.startViewTransition(() => {
+            flushSync(callback);
+        });
+    }
+    else {
+        callback();
+    }
+}
+function translateLabel(labels, label) {
+    return labels?.[label] ?? label;
+}
+function makeUseContext(context) {
+    return () => {
+        const ctx = useContext(context);
+        if (!ctx)
+            throw new Error();
+        return ctx;
+    };
+}
+
+const LightboxContext = createContext(null);
+const useLightboxContext = makeUseContext(LightboxContext);
+function LightboxContextProvider({ children, ...props }) {
+    return jsx(LightboxContext.Provider, { value: props, children: children });
+}
+
+function ImageSlide({ slide, rect }) {
+    const { width, height } = slide.srcSet?.[0] ?? slide;
+    const imageAspectRatio = width && height ? width / height : undefined;
+    const srcSet = slide.srcSet
+        ?.sort((a, b) => a.width - b.width)
+        .map((image) => `${image.src} ${image.width}w`)
+        .join(", ");
+    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 }));
+}
+
+function Carousel() {
+    const { slides, index, render: { slide: renderSlide, slideHeader, slideFooter } = {} } = useLightboxContext();
+    const [rect, setRect] = useState();
+    const observer = useRef();
+    const handleRef = useCallback((node) => {
+        observer.current?.disconnect();
+        observer.current = undefined;
+        const updateRect = () => setRect(node ? { width: node.clientWidth, height: node.clientHeight } : undefined);
+        if (node && typeof ResizeObserver !== "undefined") {
+            observer.current = new ResizeObserver(updateRect);
+            observer.current.observe(node);
+        }
+        else {
+            updateRect();
+        }
+    }, []);
+    return (jsx("div", { ref: handleRef, className: cssClass("carousel"), children: rect &&
+            Array.from({ length: 5 }).map((_, i) => {
+                const slideIndex = index - 2 + i;
+                if (slideIndex < 0 || slideIndex >= slides.length)
+                    return null;
+                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}`));
+            }) }));
+}
+
+const ControllerContext = createContext(null);
+const useController = makeUseContext(ControllerContext);
+function Controller({ setIndex, children }) {
+    const { slides, index } = useLightboxContext();
+    const exitHooks = useRef([]);
+    const context = useMemo(() => {
+        const prev = () => {
+            if (index > 0)
+                transition(() => setIndex(index - 1));
+        };
+        const next = () => {
+            if (index < slides.length - 1)
+                transition(() => setIndex(index + 1));
+        };
+        const close = () => {
+            Promise.all(exitHooks.current.map((hook) => hook()))
+                .catch(() => { })
+                .then(() => {
+                exitHooks.current = [];
+                setIndex(-1);
+            });
+        };
+        const addExitHook = (hook) => {
+            exitHooks.current.push(hook);
+            return () => {
+                exitHooks.current.splice(exitHooks.current.indexOf(hook), 1);
+            };
+        };
+        return { prev, next, close, addExitHook };
+    }, [slides.length, index, setIndex]);
+    return jsx(ControllerContext.Provider, { value: context, children: children });
+}
+
+function Button({ icon: Icon, renderIcon, label, onClick, disabled, className }) {
+    const { labels } = 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") }) }));
+}
+
+function svgIcon(name, children) {
+    const icon = (props) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props, children: children }));
+    icon.displayName = name;
+    return icon;
+}
+function createIcon(name, glyph) {
+    return svgIcon(name, jsxs("g", { fill: "currentColor", children: [jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), glyph] }));
+}
+
+const Close = createIcon("Close", jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+
+const Next = createIcon("Next", jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));
+
+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?.()] }));
+}
+
+function useSensors() {
+    const wheelEvents = useRef([]);
+    const wheelCooldown = useRef(null);
+    const wheelCooldownMomentum = useRef(null);
+    const activePointer = useRef(null);
+    const { prev, next, close } = useController();
+    return useMemo(() => {
+        const onKeyDown = (event) => {
+            switch (event.key) {
+                case "Escape":
+                    close();
+                    break;
+                case "ArrowLeft":
+                    prev();
+                    break;
+                case "ArrowRight":
+                    next();
+                    break;
+            }
+        };
+        const onPointerDown = (event) => {
+            if (!activePointer.current) {
+                event.persist();
+                activePointer.current = event;
+            }
+            else {
+                activePointer.current = null;
+            }
+        };
+        const onPointerUp = (event) => {
+            if (event.pointerId === activePointer.current?.pointerId) {
+                const dx = event.clientX - activePointer.current.clientX;
+                const deltaX = Math.abs(dx);
+                const deltaY = Math.abs(event.clientY - activePointer.current.clientY);
+                if (deltaX > 50 && deltaX > 1.2 * deltaY) {
+                    if (dx > 0) {
+                        prev();
+                    }
+                    else {
+                        next();
+                    }
+                }
+                else if ((deltaY > 50 && deltaY > 1.2 * deltaX) ||
+                    (activePointer.current.target instanceof HTMLElement &&
+                        activePointer.current.target.className.split(" ").includes(cssClass("slide")))) {
+                    close();
+                }
+                activePointer.current = null;
+            }
+        };
+        const onWheel = (event) => {
+            if (wheelCooldown.current && wheelCooldownMomentum.current) {
+                if (event.deltaX * wheelCooldownMomentum.current > 0 &&
+                    (event.timeStamp <= wheelCooldown.current + 500 ||
+                        (event.timeStamp <= wheelCooldown.current + 1000 &&
+                            Math.abs(event.deltaX) < 1.2 * Math.abs(wheelCooldownMomentum.current)))) {
+                    wheelCooldownMomentum.current = event.deltaX;
+                    return;
+                }
+                wheelCooldown.current = null;
+                wheelCooldownMomentum.current = null;
+            }
+            event.persist();
+            wheelEvents.current = wheelEvents.current.filter((e) => e.timeStamp > event.timeStamp - 3000);
+            wheelEvents.current.push(event);
+            const dx = wheelEvents.current.map((e) => e.deltaX).reduce((a, b) => a + b, 0);
+            const deltaX = Math.abs(dx);
+            const deltaY = Math.abs(wheelEvents.current.map((e) => e.deltaY).reduce((a, b) => a + b, 0));
+            if (deltaX > 100 && deltaX > 1.2 * deltaY) {
+                if (dx < 0) {
+                    prev();
+                }
+                else {
+                    next();
+                }
+                wheelEvents.current = [];
+                wheelCooldown.current = event.timeStamp;
+                wheelCooldownMomentum.current = event.deltaX;
+            }
+        };
+        return {
+            onKeyDown,
+            onPointerDown,
+            onPointerUp,
+            onPointerLeave: onPointerUp,
+            onPointerCancel: onPointerUp,
+            onWheel,
+        };
+    }, [prev, next, close]);
+}
+
+function setAttribute(element, attribute, value) {
+    const previousValue = element.getAttribute(attribute);
+    element.setAttribute(attribute, value);
+    return () => {
+        if (previousValue) {
+            element.setAttribute(attribute, previousValue);
+        }
+        else {
+            element.removeAttribute(attribute);
+        }
+    };
+}
+function Portal({ children }) {
+    const cleanup = useRef([]);
+    const [mounted, setMounted] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const onTransitionEnd = useRef();
+    const restoreFocus = useRef(null);
+    const sensors = useSensors();
+    const { addExitHook } = useController();
+    const handleCleanup = useCallback(() => {
+        cleanup.current.forEach((cleaner) => cleaner());
+        cleanup.current = [];
+    }, []);
+    useEffect(() => addExitHook(() => new Promise((resolve) => {
+        onTransitionEnd.current = () => {
+            onTransitionEnd.current = undefined;
+            resolve();
+        };
+        handleCleanup();
+        setVisible(false);
+    })), [addExitHook, handleCleanup]);
+    useEffect(() => {
+        const property = cssVar("scrollbar-width");
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarWidth > 0) {
+            document.documentElement.style.setProperty(property, `${scrollbarWidth}px`);
+        }
+        return () => {
+            if (scrollbarWidth > 0) {
+                document.documentElement.style.removeProperty(property);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
+    const handleRef = useCallback((node) => {
+        if (node) {
+            node.focus();
+            const preventWheelDefaults = (event) => event.preventDefault();
+            node.addEventListener("wheel", preventWheelDefaults, { passive: false });
+            cleanup.current.push(() => {
+                node.removeEventListener("wheel", preventWheelDefaults);
+            });
+            const elements = node.parentNode?.children ?? [];
+            for (let i = 0; i < elements.length; i += 1) {
+                const element = elements[i];
+                if (!["TEMPLATE", "SCRIPT", "STYLE"].includes(element.tagName) && element !== node) {
+                    cleanup.current.push(setAttribute(element, "inert", "true"));
+                    cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
+                }
+            }
+            cleanup.current.push(() => {
+                restoreFocus.current?.focus?.();
+                restoreFocus.current = null;
+            });
+            setVisible(true);
+        }
+        else {
+            handleCleanup();
+        }
+    }, [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) => {
+                if (!restoreFocus.current) {
+                    restoreFocus.current = event.relatedTarget;
+                }
+            }, ...sensors, children: children }), document.body)
+        : null;
+}
+
+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, {})] }) }) }));
+}
+
+export { Lightbox as default };

package/dist/styles.css

@@ -0,0 +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)}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: unknown;
+export default styles;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "yet-another-react-lightbox-lite",
+  "version": "1.0.0",
+  "description": "Lightweight React lightbox component",
+  "author": "Igor Danchenko",
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "types": "./dist/styles.css.d.ts",
+      "default": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "homepage": "https://github.com/igordanchenko/yet-another-react-lightbox-lite",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/igordanchenko/yet-another-react-lightbox-lite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/igordanchenko/yet-another-react-lightbox-lite/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "@types/react": ">=18",
+    "@types/react-dom": ">=18",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "react",
+    "lightbox",
+    "react lightbox",
+    "react lightbox lite",
+    "lightweight react lightbox"
+  ]
+}