react-pic-gallery 2.0.1 → 2.0.3

package/README.md

@@ -3,9 +3,12 @@
 Small, accessible React image gallery and lightbox with a polished default UI and typed escape hatches for custom controls.
 
 [![NPM](https://img.shields.io/npm/v/react-pic-gallery.svg)](https://www.npmjs.com/package/react-pic-gallery)
+[![Minified + gzip size](https://badgen.net/static/minified%20%2B%20gzip/8.5%20KB/blue)](https://bundlephobia.com/package/react-pic-gallery)
 
 [Live playground and docs](https://marcelrsoub.github.io/react-pic-gallery/)
 
+![react-pic-gallery displaying a three-column gallery of landscape photos](screenshot.png)
+
 ## Install
 
 ```bash
@@ -20,16 +23,17 @@ bun add react-pic-gallery
 
 React 18.3+ and React 19 are supported. The [Quick start docs](https://marcelrsoub.github.io/react-pic-gallery/docs/getting-started/) provide these commands in a package-manager switcher.
 
-The package is intentionally lightweight: it has no runtime dependencies, React is a peer dependency, and the built JavaScript and CSS together are about **5.9 KB gzipped** (4.0 KB JS + 1.9 KB CSS).
+The package is intentionally lightweight: it has no runtime dependencies and React is a peer dependency. The built JavaScript and CSS together are about **8.5 KB gzipped** (6.13 KB JS + 2.34 KB CSS).
 
 ## Why react-pic-gallery
 
-- **Tiny by design** — no runtime dependencies, no context providers, no polyfills; ~5.9 KB gzipped total.
+- **Tiny by design** — no runtime dependencies, no context providers, no polyfills; ~8.5 KB gzipped total.
 - **Simple by default** — one component, one stylesheet import, sensible accessible defaults.
 - **Yours when needed** — typed `renderActions`, `renderCaption`, and `renderControls` callbacks let you add custom UI without rebuilding the lightbox; extra fields on your image objects flow through fully typed.
 - **Accessible** — native modal `<dialog>`, focus containment and restoration, Escape to close, screen-reader announcements, `prefers-reduced-motion` support.
 - **Keyboard and touch friendly** — arrow-key navigation in the grid (roving tabindex) and in the lightbox, Enter to open, swipe navigation on touch devices.
 - **Themeable** — namespaced classes and CSS variables (`--gallery-accent`, `--gallery-overlay`, `--gallery-motion`, …).
+- **Three layouts** — choose a uniform grid, proportional justified rows, or an editorial mosaic.
 
 ## Quick start
 
@@ -53,6 +57,21 @@ export function App() {
 
 `src` and `alt` are required. `id`, `thumbnailSrc`, `caption`, `width`, and `height` are optional. Image objects can include application-specific fields; those fields remain available in renderer callbacks when using TypeScript generics.
 
+## Gallery layouts
+
+The default is the existing three-column grid. Choose another layout with `layout`:
+
+```tsx
+<PicGallery images={images} layout='justified' />
+<PicGallery images={images} layout='mosaic' />
+```
+
+- **`grid`** — consistent tiles with a configurable fixed column count.
+- **`justified`** — proportional photos arranged in aligned rows; the final row stays left-aligned.
+- **`mosaic`** — alternating featured photos and smaller supporting tiles.
+
+Image `width` and `height` are recommended, but optional. Justified rows use them when supplied and fall back to 3:2 when either dimension is missing or invalid. Accurate dimensions give the most faithful layout and help reserve space while images load. `rowHeight` sets the tile height for the grid, the base row height for the mosaic, and the target row height for justified galleries. `columns` applies to the grid only.
+
 ## Custom UI
 
 Add actions without rebuilding the lightbox:
@@ -116,7 +135,7 @@ The lightbox uses the native modal `<dialog>` element and includes:
 - Instagram-Stories-style edge taps on touch screens: tap the right edge of the image to go forward, the left edge to go back (navigation buttons are hidden on small screens where tap zones take over).
 - Reduced-motion support, safe-area padding, rounded image surfaces, and animated transitions.
 
-The thumbnail grid supports arrow-key navigation with a roving tabindex: Tab once to enter the grid, then move with Arrow keys (Left/Right step, Up/Down jump a row, Home/End jump to the ends), Enter to open, and focus is restored to the same tile when the lightbox closes.
+Gallery tiles use roving focus. Left/Right follow image order; in the grid, Up/Down jump a row, and in justified and mosaic layouts they follow the nearest tile position. Home/End move to the first/last image. Enter opens the lightbox, and focus returns to the same tile when it closes.
 
 Native modal behavior targets modern browsers: Chrome 37+, Edge 79+, Firefox 98+, and Safari/iOS 15.4+. The package does not ship a dialog polyfill.
 
@@ -134,7 +153,7 @@ The stylesheet uses namespaced classes and CSS variables. Import it once, then o
 }
 ```
 
-The default gallery uses three columns. Pass `columns` for a different fixed count; `rowHeight` accepts CSS height values or numeric pixels.
+The default grid uses three columns. Pass `columns` for a different fixed count. `rowHeight` accepts CSS height values or numeric pixels; its meaning depends on the selected layout as described above.
 
 ## API
 
@@ -143,15 +162,16 @@ The default gallery uses three columns. Pass `columns` for a different fixed cou
 | Prop | Type | Description |
 | --- | --- | --- |
 | `images` | `readonly GalleryImage[]` | Images to display. |
-| `columns` | `number` | Optional fixed column count. The default is three columns. |
-| `rowHeight` | `CSSProperties['height']` | Thumbnail height. |
+| `layout` | `'grid' \| 'justified' \| 'mosaic'` | Defaults to `'grid'`. |
+| `columns` | `number` | Optional fixed grid column count. Defaults to three; only applies to `grid`. |
+| `rowHeight` | `CSSProperties['height']` | Grid tile height, mosaic base row height, or justified target row height. |
 | `renderActions` | `LightboxRenderer` | Adds controls to the default toolbar. |
 | `renderCaption` | `LightboxRenderer` | Replaces the current caption. |
 | `renderControls` | `LightboxRenderer` | Replaces the complete default control layer. |
 | `showCounter` | `boolean` | Shows the current image count. Defaults to `true`. |
 | `showNavigation` | `boolean` | Shows previous/next controls. Defaults to `true`. |
 
-`Gallery` accepts `images`, `onImageClick`, `columns`, `rowHeight`, `className`, and `style`.
+`Gallery` accepts `images`, `onImageClick`, `layout`, `columns`, `rowHeight`, `className`, and `style`.
 
 `Lightbox` accepts `images`, controlled `index`, `onIndexChange`, the renderer props, `showCounter`, `showNavigation`, and `className`.
 

package/dist/Carousel.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { GalleryImage, LightboxRenderer } from './types';
+import { UseCarouselNavigationResult } from './useCarouselNavigation';
+export type CarouselProps<T extends GalleryImage = GalleryImage> = {
+    images: readonly T[];
+    index: number;
+    navigation: UseCarouselNavigationResult;
+    renderActions?: LightboxRenderer<T>;
+    renderCaption?: LightboxRenderer<T>;
+    renderControls?: LightboxRenderer<T>;
+    showCounter?: boolean;
+    showNavigation?: boolean;
+    close?: () => void;
+    onEmptyAreaClick?: () => void;
+    onImageClick?: () => void;
+    className?: string;
+};
+export declare function Carousel<T extends GalleryImage>(props: CarouselProps<T>): ReactNode;

package/dist/Gallery.d.ts

@@ -1,4 +1,4 @@
 import { GalleryImage, GalleryProps } from './types';
-declare function GalleryComponent<T extends GalleryImage>({ images, onImageClick, columns, rowHeight, className, style }: GalleryProps<T>): import('react').JSX.Element;
+declare function GalleryComponent<T extends GalleryImage>({ images, onImageClick, layout, columns, rowHeight, className, style, renderCaption, showCounter, showNavigation }: GalleryProps<T>): import('react').JSX.Element;
 export declare const Gallery: typeof GalleryComponent;
 export {};

package/dist/Image.d.ts

@@ -1,4 +1,4 @@
-import { AnimationEventHandler, CSSProperties } from 'react';
+import { AnimationEventHandler, CSSProperties, MouseEventHandler } from 'react';
 type ImageProps = {
     src: string;
     alt: string;
@@ -7,10 +7,11 @@ type ImageProps = {
     style?: CSSProperties;
     imageStyle?: CSSProperties;
     onAnimationEnd?: AnimationEventHandler<HTMLSpanElement>;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
     eager?: boolean;
     objectFit?: 'cover' | 'contain';
     width?: number;
     height?: number;
 };
-export declare function Image({ src, alt, className, imageClassName, style, imageStyle, onAnimationEnd, eager, objectFit, width, height }: ImageProps): import('react').JSX.Element;
+export declare function Image({ src, alt, className, imageClassName, style, imageStyle, onAnimationEnd, onClick, eager, objectFit, width, height }: ImageProps): import('react').JSX.Element;
 export {};

package/dist/PicGallery.d.ts

@@ -1,2 +1,2 @@
 import { GalleryImage, PicGalleryProps } from './types';
-export declare function PicGallery<T extends GalleryImage>({ images, columns, rowHeight, className, galleryClassName, style, renderActions, renderCaption, renderControls, showCounter, showNavigation }: PicGalleryProps<T>): import('react').JSX.Element;
+export declare function PicGallery<T extends GalleryImage>({ images, layout, columns, rowHeight, className, galleryClassName, style, renderActions, renderCaption, renderControls, showCounter, showNavigation }: PicGalleryProps<T>): import('react').JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { Gallery } from './Gallery';
 export { Lightbox } from './Lightbox';
 export { PicGallery } from './PicGallery';
-export type { GalleryImage, GalleryProps, LightboxContext, LightboxProps, LightboxRenderer, PicGalleryProps } from './types';
+export type { GalleryImage, GalleryLayout, GalleryProps, LightboxContext, LightboxProps, LightboxRenderer, PicGalleryProps } from './types';
 export { PicGallery as default } from './PicGallery';

package/dist/layout.d.ts

@@ -0,0 +1,9 @@
+import { GalleryImage } from './types';
+export declare const FALLBACK_ASPECT_RATIO: number;
+export type JustifiedRow = {
+    indices: number[];
+    widths: number[];
+    height: number;
+};
+export declare function getAspectRatio(image: Pick<GalleryImage, 'width' | 'height'>): number;
+export declare function buildJustifiedRows(images: readonly Pick<GalleryImage, 'width' | 'height'>[], containerWidth: number, targetHeight: number, gap: number): JustifiedRow[];

package/dist/react-pic-gallery.js

@@ -1,41 +1,42 @@
-import { memo as e, useCallback as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { createPortal as c } from "react-dom";
+import { memo as e, useCallback as t, useEffect as n, useId as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
 //#region src/lib/Image.tsx
-function l({ src: e, alt: t, className: r = "", imageClassName: c = "", style: l, imageStyle: u, onAnimationEnd: d, eager: f = !1, objectFit: p = "cover", width: m, height: h }) {
-	let g = i(null), [_, v] = a("loading");
+function d({ src: e, alt: t, className: r = "", imageClassName: i = "", style: s, imageStyle: u, onAnimationEnd: d, onClick: f, eager: p = !1, objectFit: m = "cover", width: h, height: g }) {
+	let _ = a(null), [v, y] = o("loading");
 	return n(() => {
-		v("loading");
-		let e = g.current;
-		e?.complete && v(e.naturalWidth > 0 ? "loaded" : "error");
-	}, [e]), /* @__PURE__ */ s("span", {
+		y("loading");
+		let e = _.current;
+		e?.complete && y(e.naturalWidth > 0 ? "loaded" : "error");
+	}, [e]), /* @__PURE__ */ l("span", {
 		className: `react-pic-gallery__image ${r}`.trim(),
-		style: l,
-		"aria-busy": _ === "loading",
+		style: s,
+		"aria-busy": v === "loading",
 		onAnimationEnd: d,
+		onClick: f,
 		children: [
-			/* @__PURE__ */ o("img", {
-				ref: g,
+			/* @__PURE__ */ c("img", {
+				ref: _,
 				src: e,
 				alt: t,
-				className: `react-pic-gallery__image-element ${c}`.trim(),
+				className: `react-pic-gallery__image-element ${i}`.trim(),
 				style: {
-					objectFit: p,
+					objectFit: m,
 					...u
 				},
-				loading: f ? "eager" : "lazy",
+				loading: p ? "eager" : "lazy",
 				decoding: "async",
-				width: m,
-				height: h,
-				onLoad: () => v("loaded"),
-				onError: () => v("error")
+				width: h,
+				height: g,
+				onLoad: () => y("loaded"),
+				onError: () => y("error")
 			}),
-			_ === "loading" && /* @__PURE__ */ o("span", {
+			v === "loading" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-loader",
 				role: "progressbar",
 				"aria-label": "Loading image"
 			}),
-			_ === "error" && /* @__PURE__ */ o("span", {
+			v === "error" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-error",
 				role: "status",
 				children: "Unable to load image"
@@ -43,326 +44,526 @@ function l({ src: e, alt: t, className: r = "", imageClassName: c = "", style: l
 		]
 	});
 }
+function f(e) {
+	return e instanceof Element && e.closest("a[href], button, input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]") !== null;
+}
+function p(e, t) {
+	if (!t || window.matchMedia?.("(max-width: 600px), (pointer: coarse)")?.matches !== !0) return null;
+	let n = t.getBoundingClientRect();
+	if (n.width <= 0) return null;
+	let r = (e - n.left) / n.width;
+	return r < .3 ? "previous" : r > .7 ? "next" : null;
+}
+function m() {
+	return /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ c("path", { d: "M6 6l12 12M18 6L6 18" })
+	});
+}
+function h({ direction: e }) {
+	return /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ c("path", { d: e === "left" ? "M14.5 5l-7 7 7 7" : "M9.5 5l7 7-7 7" })
+	});
+}
+function g(...e) {
+	return e.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/lib/Carousel.tsx
+function _(e) {
+	let { images: t, index: n, navigation: r, renderActions: i, renderCaption: a, renderControls: o, showCounter: u = !0, showNavigation: f = !0, close: _, onEmptyAreaClick: v, onImageClick: y, className: b } = e, x = t[n], S = {
+		image: x,
+		index: n,
+		count: t.length,
+		close: _ ?? (() => {}),
+		next: r.next,
+		previous: r.previous,
+		canGoNext: n < t.length - 1,
+		canGoPrevious: n > 0
+	}, C = f && t.length > 1, w = f && S.canGoPrevious, T = f && S.canGoNext;
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("p", {
+		className: "react-pic-gallery__sr-only",
+		"aria-live": "polite",
+		children: [
+			x.alt,
+			", image ",
+			n + 1,
+			" of ",
+			t.length
+		]
+	}), /* @__PURE__ */ l("div", {
+		className: g("react-pic-gallery__lightbox-content", b),
+		children: [
+			o ? /* @__PURE__ */ c("div", {
+				className: "react-pic-gallery__custom-controls",
+				children: o(S)
+			}) : /* @__PURE__ */ l("div", {
+				className: "react-pic-gallery__toolbar",
+				children: [/* @__PURE__ */ l("div", {
+					className: "react-pic-gallery__toolbar-actions",
+					children: [u && /* @__PURE__ */ l("span", {
+						"aria-live": "polite",
+						children: [
+							n + 1,
+							" / ",
+							t.length
+						]
+					}), i?.(S)]
+				}), _ && /* @__PURE__ */ c("button", {
+					className: "react-pic-gallery__control",
+					type: "button",
+					onClick: _,
+					"aria-label": "Close image viewer",
+					children: /* @__PURE__ */ c(m, {})
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: g("react-pic-gallery__viewport", C ? "react-pic-gallery__viewport--has-navigation" : void 0),
+				onMouseDown: (e) => {
+					e.target === e.currentTarget && v?.();
+				},
+				onClick: r.handleViewportClick,
+				onTouchCancel: r.handleTouchCancel,
+				onTouchEnd: r.handleTouchEnd,
+				onTouchStart: r.handleTouchStart,
+				children: [
+					w && /* @__PURE__ */ c("button", {
+						className: "react-pic-gallery__control react-pic-gallery__control--previous",
+						type: "button",
+						onClick: r.previous,
+						"aria-label": "Previous image",
+						children: /* @__PURE__ */ c(h, { direction: "left" })
+					}),
+					/* @__PURE__ */ c(d, {
+						src: x.src,
+						alt: x.alt,
+						eager: !0,
+						objectFit: "contain",
+						className: g("react-pic-gallery__lightbox-image", r.swipeDirection ? `react-pic-gallery__lightbox-image--swipe-${r.swipeDirection}` : void 0),
+						onAnimationEnd: r.handleImageAnimationEnd,
+						onClick: y ? (e) => {
+							f && t.length > 1 && p(e.clientX, e.currentTarget.parentElement) !== null || y();
+						} : void 0
+					}, x.src),
+					T && /* @__PURE__ */ c("button", {
+						className: "react-pic-gallery__control react-pic-gallery__control--next",
+						type: "button",
+						onClick: r.next,
+						"aria-label": "Next image",
+						children: /* @__PURE__ */ c(h, { direction: "right" })
+					})
+				]
+			}),
+			(a || x.caption) && /* @__PURE__ */ c("div", {
+				className: "react-pic-gallery__caption",
+				children: a ? a(S) : x.caption
+			})
+		]
+	})] });
+}
+//#endregion
+//#region src/lib/layout.ts
+var v = 3 / 2;
+function y(e) {
+	return Number.isFinite(e.width) && Number.isFinite(e.height) && e.width !== void 0 && e.height !== void 0 && e.width > 0 && e.height > 0 ? e.width / e.height : v;
+}
+function b(e, t, n, r) {
+	if (e.length === 0) return [];
+	let i = Math.max(1, t), a = Math.max(1, n), o = Math.max(0, r), s = e.map(y), c = [], l = 0;
+	for (; l < e.length;) {
+		let t = l + 1, n = i / s[l], r = Math.abs(n - a), u = s[l];
+		for (let c = l + 1; c < e.length; c += 1) {
+			let e = u + s[c], d = (i - o * (c - l + 1 - 1)) / e, f = Math.abs(d - a);
+			if (f < r) t = c + 1, n = d, r = f;
+			else if (d < a) break;
+			u = e;
+		}
+		let d = t - l, f = s.slice(l, t).reduce((e, t) => e + t, 0), p = t === e.length ? Math.min(a, (i - o * (d - 1)) / f) : n;
+		c.push({
+			indices: Array.from({ length: d }, (e, t) => l + t),
+			widths: s.slice(l, t).map((e) => e * p),
+			height: p
+		}), l = t;
+	}
+	return c;
+}
+//#endregion
+//#region src/lib/useCarouselNavigation.ts
+function x(e) {
+	let { images: n, index: r, onIndexChange: i, disabled: s = !1, showNavigation: c = !0 } = e, l = a(n), u = a(r), d = a(i), m = a(s), h = a(c), g = a(null), [_, v] = o(null);
+	l.current = n, u.current = r, d.current = i, m.current = s, h.current = c;
+	let y = t(() => {
+		let e = u.current;
+		!m.current && e !== null && e > 0 && d.current(e - 1);
+	}, []), b = t(() => {
+		let e = u.current;
+		!m.current && e !== null && e < l.current.length - 1 && d.current(e + 1);
+	}, []), x = t(() => {
+		let e = u.current;
+		m.current || e === null || e === 0 || (v("previous"), d.current(e - 1));
+	}, []), S = t(() => {
+		let e = u.current;
+		m.current || e === null || e >= l.current.length - 1 || (v("next"), d.current(e + 1));
+	}, []);
+	return {
+		previous: y,
+		next: b,
+		swipeDirection: _,
+		handleKeyDown: t((e) => {
+			if (e.defaultPrevented) return;
+			let t = e.target;
+			t instanceof HTMLElement && (t.isContentEditable || t.closest("input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]")) || (e.key === "ArrowLeft" ? (e.preventDefault(), y()) : e.key === "ArrowRight" && (e.preventDefault(), b()));
+		}, [b, y]),
+		handleTouchStart: t((e) => {
+			if (e.touches.length !== 1 || f(e.target)) {
+				g.current = null;
+				return;
+			}
+			let t = e.touches[0];
+			g.current = {
+				x: t.clientX,
+				y: t.clientY
+			};
+		}, []),
+		handleTouchEnd: t((e) => {
+			let t = g.current;
+			if (g.current = null, m.current || !t || e.changedTouches.length === 0) return;
+			let n = e.changedTouches[0], r = n.clientX - t.x, i = n.clientY - t.y, a = Math.abs(r);
+			a < 48 || a <= Math.abs(i) || (r < 0 ? S() : x());
+		}, [S, x]),
+		handleTouchCancel: t(() => {
+			g.current = null;
+		}, []),
+		handleImageAnimationEnd: t((e) => {
+			e.target === e.currentTarget && v(null);
+		}, []),
+		handleViewportClick: t((e) => {
+			if (!h.current || l.current.length <= 1 || m.current || !(e.target instanceof Element) || e.target.closest("button")) return;
+			let t = p(e.clientX, e.currentTarget);
+			t === "previous" ? y() : t === "next" && b();
+		}, [b, y])
+	};
+}
 //#endregion
 //#region src/lib/Gallery.tsx
-var u = 3;
-function d({ images: e, onImageClick: n, columns: r, rowHeight: s, className: c = "", style: d }) {
-	let f = i([]), [p, m] = a(0), h = r && r > 0 ? r : u, g = e.length - 1, _ = Math.min(p, Math.max(g, 0)), v = t((e) => {
-		m(e), f.current[e]?.focus();
-	}, []), y = t((e, t) => {
-		let n = {
-			ArrowRight: 1,
-			ArrowLeft: -1,
-			ArrowDown: h,
-			ArrowUp: -h
-		}[e.key], r = null;
-		if (n !== void 0) {
-			let e = t + n;
-			e >= 0 && e <= g && (r = e);
-		} else if (e.key === "Home") r = 0;
-		else if (e.key === "End") r = g;
+var S = 3, C = 192, w = 12, T = typeof window > "u" ? n : i;
+function E({ images: e, onImageClick: t, renderCaption: n, showCounter: r, showNavigation: i }) {
+	let [a, s] = o(0), l = Math.max(0, Math.min(a, e.length - 1)), u = x({
+		images: e,
+		index: e.length > 0 ? l : null,
+		onIndexChange: (e) => {
+			e !== null && s(e);
+		},
+		showNavigation: i
+	});
+	return e.length === 0 ? null : /* @__PURE__ */ c("div", {
+		className: "react-pic-gallery__carousel",
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": "Image carousel",
+		tabIndex: 0,
+		onKeyDown: u.handleKeyDown,
+		children: /* @__PURE__ */ c(_, {
+			images: e,
+			index: l,
+			navigation: u,
+			renderCaption: n,
+			showCounter: r,
+			showNavigation: i,
+			onImageClick: () => t?.(l)
+		})
+	});
+}
+function D({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeight: u, className: f = "", style: p, renderCaption: m, showCounter: h, showNavigation: g }) {
+	let _ = a([]), v = a(null), y = a(null), [x, D] = o(0), [O, k] = o({
+		width: 1024,
+		rowHeight: C,
+		gap: w
+	}), A = i !== void 0 && Number.isFinite(i) && i >= 1 ? Math.floor(i) : S, j = e.length - 1, M = Math.min(x, Math.max(j, 0)), N = typeof u == "number" ? `${u}px` : u, P = {
+		...p,
+		...r === "grid" && i !== void 0 && Number.isFinite(i) && i >= 1 ? { gridTemplateColumns: `repeat(${A}, minmax(0, 1fr))` } : {},
+		...N ? { "--gallery-row-height": N } : {}
+	};
+	T(() => {
+		if (r !== "justified") return;
+		let e = v.current, t = y.current;
+		if (!e || !t) return;
+		let n = () => {
+			let n = e.getBoundingClientRect().width || e.clientWidth || window.innerWidth || 1024, r = t.getBoundingClientRect(), i = Number.parseFloat(window.getComputedStyle(t).width), a = typeof u == "number" ? u : typeof u == "string" && /^\s*\d+(?:\.\d+)?px\s*$/.test(u) ? Number.parseFloat(u) : C;
+			k((e) => {
+				let t = {
+					width: n,
+					rowHeight: r.height || a,
+					gap: Number.isFinite(i) ? i : r.width || w
+				};
+				return e.width === t.width && e.rowHeight === t.rowHeight && e.gap === t.gap ? e : t;
+			});
+		};
+		n();
+		let i = typeof ResizeObserver > "u" ? null : new ResizeObserver(n);
+		return i?.observe(e), i?.observe(t), window.addEventListener("resize", n), () => {
+			i?.disconnect(), window.removeEventListener("resize", n);
+		};
+	}, [
+		r,
+		u,
+		N
+	]);
+	let F = t((e) => {
+		D(e), _.current[e]?.focus();
+	}, []), I = t((t, n) => {
+		let i = _.current[t];
+		if (!i) return null;
+		let a = i.getBoundingClientRect();
+		if (r === "mosaic" && i.classList.contains("react-pic-gallery__tile--mosaic-featured")) {
+			let r = i.closest(".react-pic-gallery__mosaic-group"), o = a.left + a.width / 2, s = a.top + a.height / 2, c = null, l = Infinity;
+			if (_.current.slice(0, e.length).forEach((e, i) => {
+				if (!e || i === t || !r?.contains(e)) return;
+				let a = e.getBoundingClientRect(), u = a.left + a.width / 2, d = a.top + a.height / 2, f = n === "up" ? s - d : d - s;
+				if (f <= 0) return;
+				let p = f + Math.abs(u - o);
+				p < l && (l = p, c = i);
+			}), c !== null) return c;
+		}
+		let o = null, s = Infinity;
+		return _.current.slice(0, e.length).forEach((e, r) => {
+			if (!e || r === t) return;
+			let i = e.getBoundingClientRect(), c = n === "up" ? a.top - i.bottom : i.top - a.bottom;
+			if (c < 0) return;
+			let l = c + (i.right < a.left ? a.left - i.right : a.right < i.left ? i.left - a.right : 0);
+			l < s && (s = l, o = r);
+		}), o;
+	}, [e.length, r]), L = t((e, t) => {
+		let n = null;
+		if (e.key === "Home") n = 0;
+		else if (e.key === "End") n = j;
+		else if (r === "grid") {
+			let r = {
+				ArrowRight: 1,
+				ArrowLeft: -1,
+				ArrowDown: A,
+				ArrowUp: -A
+			}[e.key];
+			if (r !== void 0) {
+				let e = t + r;
+				e >= 0 && e <= j && (n = e);
+			}
+		} else if (e.key === "ArrowRight" && t < j) n = t + 1;
+		else if (e.key === "ArrowLeft" && t > 0) n = t - 1;
+		else if (e.key === "ArrowDown") n = I(t, "down");
+		else if (e.key === "ArrowUp") n = I(t, "up");
 		else return;
-		r !== null && r !== t && (e.preventDefault(), v(r));
+		n !== null && n !== t && (e.preventDefault(), F(n));
 	}, [
-		h,
-		g,
-		v
-	]), b = typeof s == "number" ? `${s}px` : s, x = {
-		...d,
-		...r ? { gridTemplateColumns: `repeat(${r}, minmax(0, 1fr))` } : {},
-		...b ? { "--gallery-row-height": b } : {}
-	};
-	return /* @__PURE__ */ o("div", {
-		className: `react-pic-gallery__grid ${c}`.trim(),
-		style: x,
-		"data-testid": "react-pic-gallery-grid",
-		children: e.map((e, t) => /* @__PURE__ */ o("button", {
-			className: "react-pic-gallery__tile",
-			type: "button",
-			disabled: !n,
-			tabIndex: t === _ ? 0 : -1,
-			ref: (e) => {
-				f.current[t] = e;
-			},
-			onKeyDown: (e) => y(e, t),
-			onClick: () => {
-				m(t), n?.(t);
-			},
-			"aria-label": `Open ${e.alt}`,
-			children: /* @__PURE__ */ o(l, {
-				src: e.thumbnailSrc ?? e.src,
-				alt: e.alt,
-				objectFit: "cover",
-				width: e.width,
-				height: e.height
+		A,
+		I,
+		j,
+		r,
+		F
+	]), R = (e, t, r = {}) => /* @__PURE__ */ c("button", {
+		className: `react-pic-gallery__tile ${r.className ?? ""}`.trim(),
+		type: "button",
+		disabled: !n,
+		tabIndex: t === M ? 0 : -1,
+		ref: (e) => {
+			_.current[t] = e;
+		},
+		style: r.style,
+		onKeyDown: (e) => L(e, t),
+		onClick: () => {
+			D(t), n?.(t);
+		},
+		"aria-label": `Open ${e.alt}`,
+		children: /* @__PURE__ */ c(d, {
+			src: e.thumbnailSrc ?? e.src,
+			alt: e.alt,
+			objectFit: "cover",
+			width: e.width,
+			height: e.height
+		})
+	}, e.id ?? `${e.src}-${t}`), z = r === "justified" ? b(e, O.width, O.rowHeight, O.gap) : [], B = Array(e.length);
+	return z.forEach((e) => {
+		e.indices.forEach((t, n) => {
+			B[t] = {
+				width: `${e.widths[n]}px`,
+				height: `${e.height}px`
+			};
+		});
+	}), /* @__PURE__ */ l("div", {
+		ref: v,
+		className: `react-pic-gallery__gallery react-pic-gallery__gallery--${r} ${r === "grid" ? "react-pic-gallery__grid" : ""} ${f}`.trim(),
+		style: P,
+		"data-testid": r === "grid" ? "react-pic-gallery-grid" : void 0,
+		"data-layout": r,
+		children: [
+			r === "grid" && e.map((e, t) => R(e, t)),
+			r === "carousel" && /* @__PURE__ */ c(E, {
+				images: e,
+				onImageClick: n,
+				renderCaption: m,
+				showCounter: h,
+				showNavigation: g
+			}),
+			r === "justified" && /* @__PURE__ */ l(s, { children: [e.map((e, t) => R(e, t, {
+				className: "react-pic-gallery__tile--justified",
+				style: B[t]
+			})), /* @__PURE__ */ c("span", {
+				ref: y,
+				className: "react-pic-gallery__row-height-probe",
+				"aria-hidden": "true"
+			})] }),
+			r === "mosaic" && Array.from({ length: Math.ceil(e.length / 3) }, (t, n) => {
+				let r = n * 3, i = e.slice(r, r + 3), a = n % 2 == 0 ? "left" : "top";
+				return /* @__PURE__ */ c("div", {
+					className: `react-pic-gallery__mosaic-group react-pic-gallery__mosaic-group--${a} react-pic-gallery__mosaic-group--count-${i.length}`,
+					children: i.map((e, t) => {
+						let n = r + t, a = i.length === 3 ? t === 0 ? "featured" : "supporting" : "simple";
+						return R(e, n, { className: `react-pic-gallery__tile--mosaic react-pic-gallery__tile--mosaic-${a}` });
+					})
+				}, `mosaic-${r}`);
 			})
-		}, e.id ?? `${e.src}-${t}`))
+		]
 	});
 }
-var f = e(d), p = /* @__PURE__ */ new Set(), m = null, h = "a[href], button, input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", g = "input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", _ = "(max-width: 600px), (pointer: coarse)", v = .3;
-function y(e) {
-	return e instanceof Element && e.closest(h) !== null;
-}
-function b(e) {
-	if (!p.has(e)) {
-		if (p.size === 0) {
+var O = e(D), k = /* @__PURE__ */ new Set(), A = null;
+function j(e) {
+	if (!k.has(e)) {
+		if (k.size === 0) {
 			let e = document.body, t = window.innerWidth - document.documentElement.clientWidth, n = Number.parseFloat(window.getComputedStyle(e).paddingRight) || 0;
-			m = {
+			A = {
 				overflow: e.style.overflow,
 				paddingRight: e.style.paddingRight
 			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
 		}
-		p.add(e);
+		k.add(e);
 	}
 }
-function x(e) {
-	return p.delete(e), p.size > 0 || !m ? !1 : (document.body.style.overflow = m.overflow, document.body.style.paddingRight = m.paddingRight, m = null, !0);
+function M(e) {
+	return k.delete(e), k.size > 0 || !A ? !1 : (document.body.style.overflow = A.overflow, document.body.style.paddingRight = A.paddingRight, A = null, !0);
 }
-function S(e) {
+function N(e) {
 	let t = e.trim();
 	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
 }
-function ee(e) {
+function P(e) {
 	let t = window.getComputedStyle(e), n = t.animationDuration.split(","), r = t.animationDelay.split(",");
-	return Math.max(...n.map((e, t) => S(e) + S(r[t % r.length] ?? "0s")), 0);
-}
-function C() {
-	return /* @__PURE__ */ o("svg", {
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		focusable: "false",
-		children: /* @__PURE__ */ o("path", { d: "M6 6l12 12M18 6L6 18" })
-	});
+	return Math.max(...n.map((e, t) => N(e) + N(r[t % r.length] ?? "0s")), 0);
 }
-function w({ direction: e }) {
-	return /* @__PURE__ */ o("svg", {
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		focusable: "false",
-		children: /* @__PURE__ */ o("path", { d: e === "left" ? "M14.5 5l-7 7 7 7" : "M9.5 5l7 7-7 7" })
-	});
-}
-function T(...e) {
-	return e.filter(Boolean).join(" ");
-}
-function E({ images: e, index: u, onIndexChange: d, renderActions: f, renderCaption: p, renderControls: m, showCounter: h = !0, showNavigation: S = !0, className: E }) {
-	let D = i(null), O = i(d), k = i(null), A = i(null), j = i(null), M = i(!1), N = i(!1), P = i({}), F = i(e), I = i(null), L = r(), [R, z] = a(!1), [B, V] = a(null), H = u !== null && u >= 0 && u < e.length ? u : null, U = H === null ? void 0 : e[H];
-	O.current = d, j.current = H, M.current = R, F.current = e;
-	let W = t(() => {
-		k.current !== null && (window.clearTimeout(k.current), k.current = null), A.current = null;
-	}, []), G = t(() => {
-		let e = j.current;
-		if (e !== null && A.current === null) {
+function F({ images: e, index: i, onIndexChange: s, renderActions: d, renderCaption: f, renderControls: p, showCounter: m = !0, showNavigation: h = !0, className: v }) {
+	let y = a(null), b = a(s), S = a(null), C = a(null), w = a(null), T = a(!1), E = a({}), D = r(), [O, k] = o(!1), A = i !== null && i >= 0 && i < e.length ? i : null, N = A === null ? void 0 : e[A];
+	b.current = s, w.current = A;
+	let F = x({
+		images: e,
+		index: A,
+		onIndexChange: s,
+		disabled: O,
+		showNavigation: h && !p
+	}), I = t(() => {
+		S.current !== null && (window.clearTimeout(S.current), S.current = null), C.current = null;
+	}, []), L = t(() => {
+		let e = w.current;
+		if (e !== null && C.current === null) {
 			if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-				O.current(null);
+				b.current(null);
 				return;
 			}
-			A.current = { index: e }, M.current = !0, z(!0);
+			C.current = { index: e }, k(!0);
 		}
-	}, []), K = t(() => {
-		let e = j.current;
-		!M.current && e !== null && e > 0 && O.current(e - 1);
-	}, []), q = t(() => {
-		let e = j.current;
-		!M.current && e !== null && e < F.current.length - 1 && O.current(e + 1);
-	}, []), J = t(() => {
-		let e = j.current;
-		M.current || e === null || e === 0 || (V("previous"), O.current(e - 1));
-	}, []), Y = t(() => {
-		let e = j.current;
-		M.current || e === null || e >= F.current.length - 1 || (V("next"), O.current(e + 1));
-	}, []), te = t((e) => {
-		e.preventDefault(), G();
-	}, [G]), X = t(() => {
-		let e = A.current;
+	}, []), R = t((e) => {
+		e.preventDefault(), L();
+	}, [L]), z = t(() => {
+		let e = C.current;
 		if (e) {
-			if (j.current !== e.index) {
-				W(), M.current = !1, z(!1);
+			if (w.current !== e.index) {
+				I(), k(!1);
 				return;
 			}
-			W(), M.current = !1, z(!1), O.current(null);
-		}
-	}, [W]), ne = t((e) => {
-		if (e.defaultPrevented) return;
-		let t = e.target;
-		t instanceof HTMLElement && (t.isContentEditable || t.closest(g)) || (e.key === "ArrowLeft" ? (e.preventDefault(), K()) : e.key === "ArrowRight" && (e.preventDefault(), q()));
-	}, [q, K]), re = t((e) => {
-		if (e.touches.length !== 1 || y(e.target)) {
-			I.current = null;
-			return;
+			I(), k(!1), b.current(null);
 		}
-		let t = e.touches[0];
-		I.current = {
-			x: t.clientX,
-			y: t.clientY
-		};
-	}, []), ie = t((e) => {
-		let t = I.current;
-		if (I.current = null, !t || e.changedTouches.length === 0) return;
-		let n = e.changedTouches[0], r = n.clientX - t.x, i = n.clientY - t.y, a = Math.abs(r);
-		a < 48 || a <= Math.abs(i) || (r < 0 ? Y() : J());
-	}, [Y, J]), ae = t(() => {
-		I.current = null;
-	}, []), oe = t((e) => {
-		e.target === e.currentTarget && V(null);
-	}, []), se = t((e) => {
-		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && X();
-	}, [X]), ce = t(() => {
-		N.current || (W(), M.current = !1, z(!1), j.current !== null && O.current(null));
-	}, [W]);
-	if (n(() => {
-		let e = A.current;
-		e && H !== e.index && (W(), M.current = !1, z(!1));
-	}, [H, W]), n(() => {
-		if (!R || !A.current || !D.current) return;
-		let e = ee(D.current);
-		return k.current = window.setTimeout(X, e), () => {
-			k.current !== null && (window.clearTimeout(k.current), k.current = null);
+	}, [I]), B = t((e) => {
+		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && z();
+	}, [z]), V = t(() => {
+		T.current || (I(), k(!1), w.current !== null && b.current(null));
+	}, [I]);
+	return n(() => {
+		let e = C.current;
+		e && A !== e.index && (I(), k(!1));
+	}, [A, I]), n(() => {
+		if (!O || !C.current || !y.current) return;
+		let e = P(y.current);
+		return S.current = window.setTimeout(z, e), () => {
+			S.current !== null && (window.clearTimeout(S.current), S.current = null);
 		};
-	}, [X, R]), n(() => {
-		if (H === null) return;
-		let e = D.current;
+	}, [z, O]), n(() => {
+		if (A === null) return;
+		let e = y.current;
 		if (!e) return;
 		let t = document.activeElement;
-		return b(P.current), e.open || e.showModal(), () => {
-			W(), N.current = !0, e.open && e.close(), N.current = !1, x(P.current) && t?.isConnected && t.focus();
+		return j(E.current), e.open || e.showModal(), () => {
+			I(), T.current = !0, e.open && e.close(), T.current = !1, M(E.current) && t?.isConnected && t.focus();
 		};
-	}, [H !== null, W]), H === null || !U || typeof document > "u") return null;
-	let Z = {
-		image: U,
-		index: H,
-		count: e.length,
-		close: G,
-		next: q,
-		previous: K,
-		canGoNext: H < e.length - 1,
-		canGoPrevious: H > 0
-	}, le = S && !m && Z.canGoPrevious, ue = S && !m && Z.canGoNext, Q = S && !m && e.length > 1, $ = (e) => {
-		e.target === e.currentTarget && G();
-	};
-	return c(/* @__PURE__ */ s("dialog", {
-		ref: D,
-		className: T("react-pic-gallery__lightbox", R ? "react-pic-gallery__lightbox--closing" : void 0, E),
-		"aria-labelledby": L,
-		onAnimationEnd: se,
-		onClose: ce,
-		onMouseDown: $,
-		onCancel: te,
-		onKeyDown: ne,
-		children: [
-			/* @__PURE__ */ o("h2", {
-				className: "react-pic-gallery__sr-only",
-				id: L,
-				children: "Image viewer"
-			}),
-			/* @__PURE__ */ s("p", {
-				className: "react-pic-gallery__sr-only",
-				"aria-live": "polite",
-				children: [
-					U.alt,
-					", image ",
-					H + 1,
-					" of ",
-					e.length
-				]
-			}),
-			/* @__PURE__ */ s("div", {
-				className: "react-pic-gallery__lightbox-content",
-				children: [
-					m ? /* @__PURE__ */ o("div", {
-						className: "react-pic-gallery__custom-controls",
-						children: m(Z)
-					}) : /* @__PURE__ */ s("div", {
-						className: "react-pic-gallery__toolbar",
-						children: [/* @__PURE__ */ s("div", {
-							className: "react-pic-gallery__toolbar-actions",
-							children: [h && /* @__PURE__ */ s("span", {
-								"aria-live": "polite",
-								children: [
-									H + 1,
-									" / ",
-									e.length
-								]
-							}), f?.(Z)]
-						}), /* @__PURE__ */ o("button", {
-							className: "react-pic-gallery__control",
-							type: "button",
-							onClick: G,
-							"aria-label": "Close image viewer",
-							children: /* @__PURE__ */ o(C, {})
-						})]
-					}),
-					/* @__PURE__ */ s("div", {
-						className: T("react-pic-gallery__viewport", Q ? "react-pic-gallery__viewport--has-navigation" : void 0),
-						onMouseDown: $,
-						onClick: (e) => {
-							if (!Q || M.current || !(e.target instanceof Element) || e.target.closest("button") || window.matchMedia?.(_)?.matches !== !0) return;
-							let t = e.currentTarget.getBoundingClientRect();
-							if (t.width <= 0) return;
-							let n = (e.clientX - t.left) / t.width;
-							n < v ? K() : n > .7 && q();
-						},
-						onTouchCancel: ae,
-						onTouchEnd: ie,
-						onTouchStart: re,
-						children: [
-							le && /* @__PURE__ */ o("button", {
-								className: "react-pic-gallery__control react-pic-gallery__control--previous",
-								type: "button",
-								onClick: K,
-								"aria-label": "Previous image",
-								children: /* @__PURE__ */ o(w, { direction: "left" })
-							}),
-							/* @__PURE__ */ o(l, {
-								src: U.src,
-								alt: U.alt,
-								eager: !0,
-								objectFit: "contain",
-								className: T("react-pic-gallery__lightbox-image", B ? `react-pic-gallery__lightbox-image--swipe-${B}` : void 0),
-								onAnimationEnd: oe
-							}, U.src),
-							ue && /* @__PURE__ */ o("button", {
-								className: "react-pic-gallery__control react-pic-gallery__control--next",
-								type: "button",
-								onClick: q,
-								"aria-label": "Next image",
-								children: /* @__PURE__ */ o(w, { direction: "right" })
-							})
-						]
-					}),
-					(p || U.caption) && /* @__PURE__ */ o("div", {
-						className: "react-pic-gallery__caption",
-						children: p ? p(Z) : U.caption
-					})
-				]
-			})
-		]
+	}, [A !== null, I]), A === null || !N || typeof document > "u" ? null : u(/* @__PURE__ */ l("dialog", {
+		ref: y,
+		className: g("react-pic-gallery__lightbox", O ? "react-pic-gallery__lightbox--closing" : void 0, v),
+		"aria-labelledby": D,
+		onAnimationEnd: B,
+		onClose: V,
+		onMouseDown: (e) => {
+			e.target === e.currentTarget && L();
+		},
+		onCancel: R,
+		onKeyDown: F.handleKeyDown,
+		children: [/* @__PURE__ */ c("h2", {
+			className: "react-pic-gallery__sr-only",
+			id: D,
+			children: "Image viewer"
+		}), /* @__PURE__ */ c(_, {
+			images: e,
+			index: A,
+			navigation: F,
+			renderActions: d,
+			renderCaption: f,
+			renderControls: p,
+			showCounter: m,
+			showNavigation: h && !p,
+			close: L,
+			onEmptyAreaClick: L
+		})]
 	}), document.body);
 }
 //#endregion
 //#region src/lib/PicGallery.tsx
-function D({ images: e, columns: t, rowHeight: n, className: r, galleryClassName: i, style: c, renderActions: l, renderCaption: u, renderControls: d, showCounter: p, showNavigation: m }) {
-	let [h, g] = a(null);
-	return /* @__PURE__ */ s("div", {
-		className: `react-pic-gallery ${r ?? ""}`.trim(),
-		style: c,
-		children: [/* @__PURE__ */ o(f, {
+function I({ images: e, layout: t, columns: n, rowHeight: r, className: i, galleryClassName: a, style: s, renderActions: u, renderCaption: d, renderControls: f, showCounter: p, showNavigation: m }) {
+	let [h, g] = o(null);
+	return /* @__PURE__ */ l("div", {
+		className: `react-pic-gallery ${i ?? ""}`.trim(),
+		style: s,
+		children: [/* @__PURE__ */ c(O, {
 			images: e,
-			columns: t,
-			rowHeight: n,
-			className: i,
-			onImageClick: g
-		}), /* @__PURE__ */ o(E, {
+			layout: t,
+			columns: n,
+			rowHeight: r,
+			className: a,
+			onImageClick: g,
+			renderCaption: d,
+			showCounter: p,
+			showNavigation: m
+		}), /* @__PURE__ */ c(F, {
 			images: e,
 			index: h,
 			onIndexChange: g,
-			renderActions: l,
-			renderCaption: u,
-			renderControls: d,
+			renderActions: u,
+			renderCaption: d,
+			renderControls: f,
 			showCounter: p,
 			showNavigation: m
 		})]
 	});
 }
 //#endregion
-export { f as Gallery, E as Lightbox, D as PicGallery, D as default };
+export { O as Gallery, F as Lightbox, I as PicGallery, I as default };

package/dist/styles.css

@@ -1,2 +1,2 @@
-:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.75rem;--gallery-radius:1rem;--gallery-row-height:12rem;--gallery-accent:#9ef01a;--gallery-overlay:#070b10f0;--gallery-control-size:2.75rem;--gallery-motion:.18s;color:#f8fafc}.react-pic-gallery{width:100%;min-width:0}.react-pic-gallery__grid{gap:var(--gallery-gap);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.react-pic-gallery__tile{min-width:0;height:var(--gallery-row-height);cursor:pointer;border-radius:var(--gallery-radius);isolation:isolate;background:#e2e8f0;border:0;padding:0;position:relative;overflow:hidden}.react-pic-gallery__tile:after{content:"";pointer-events:none;border-radius:inherit;transition:border-color var(--gallery-motion) ease;border:2px solid #0000;position:absolute;inset:0}.react-pic-gallery__tile:hover .react-pic-gallery__image-element,.react-pic-gallery__tile:focus-visible .react-pic-gallery__image-element{transform:scale(1.04)}.react-pic-gallery__tile:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}.react-pic-gallery__tile:focus-visible:after{border-color:var(--gallery-accent)}.react-pic-gallery__tile:disabled{cursor:default}.react-pic-gallery__image{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);width:100%;height:100%;display:block;position:relative;overflow:hidden}.react-pic-gallery__image-element{width:100%;height:100%;transition:transform var(--gallery-motion) ease, opacity var(--gallery-motion) ease;display:block}.react-pic-gallery__image-loader,.react-pic-gallery__image-error{place-items:center;display:grid;position:absolute;inset:0}.react-pic-gallery__image-loader:after{content:"";border:2px solid #0f172a29;border-top-color:var(--gallery-accent);border-radius:50%;width:1.5rem;height:1.5rem;animation:.7s linear infinite react-pic-gallery-spin}.react-pic-gallery__image-error{color:#475569;text-align:center;background:#e2e8f0e6;padding:1rem;font-size:.875rem}:where(dialog.react-pic-gallery__lightbox){z-index:1000;box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));color:#f8fafc;background:var(--gallery-overlay);animation:react-pic-gallery-fade-in var(--gallery-motion) ease both;border:0;place-items:center;margin:0;display:grid;position:fixed;inset:0;overflow:hidden}dialog.react-pic-gallery__lightbox:not([open]){display:none}dialog.react-pic-gallery__lightbox::backdrop{background:0 0}.react-pic-gallery__lightbox--closing{animation:react-pic-gallery-fade-out var(--gallery-motion) ease both}.react-pic-gallery__lightbox-content{box-sizing:border-box;width:min(90rem,100vw - 2rem);min-width:0;max-width:100%;height:min(54rem,100dvh - 2rem);min-height:0;max-height:100%;animation:react-pic-gallery-rise-in var(--gallery-motion) ease both;flex-direction:column;display:flex}.react-pic-gallery__lightbox--closing .react-pic-gallery__lightbox-content{animation:react-pic-gallery-rise-out var(--gallery-motion) ease both}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;display:flex}.react-pic-gallery__toolbar-actions{color:#cbd5e1;align-items:center;gap:.75rem;min-width:0;font-size:.875rem;display:flex}.react-pic-gallery__control{width:var(--gallery-control-size);height:var(--gallery-control-size);color:#f8fafc;cursor:pointer;transition:background var(--gallery-motion) ease, color var(--gallery-motion) ease, transform var(--gallery-motion) ease;background:0 0;border:0;border-radius:.7rem;flex:none;place-items:center;padding:0;font-size:1.4rem;line-height:1;display:inline-grid}.react-pic-gallery__control:hover{background:#f8fafc24}.react-pic-gallery__control:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}.react-pic-gallery__control svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:1.25rem;height:1.25rem}.react-pic-gallery__viewport{touch-action:pan-y pinch-zoom;flex:1 1 0;place-items:center;min-width:0;min-height:0;padding:.75rem;display:grid;position:relative;overflow:hidden}.react-pic-gallery__viewport--has-navigation{padding-inline:3.5rem}.react-pic-gallery__viewport--has-navigation .react-pic-gallery__lightbox-image{inset-inline:3.5rem}.react-pic-gallery__lightbox-image{pointer-events:none;width:auto;min-width:0;max-width:82rem;height:auto;min-height:0;max-height:none;animation:react-pic-gallery-image-in var(--gallery-motion) ease both;background:0 0;border-radius:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;margin-inline:auto;display:grid;position:absolute;inset:.75rem;overflow:visible}.react-pic-gallery__lightbox-image .react-pic-gallery__image-element{pointer-events:auto;touch-action:inherit;border-radius:var(--gallery-radius);background:0 0;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain!important}.react-pic-gallery__lightbox-image .react-pic-gallery__image-loader{pointer-events:none;background:0 0}.react-pic-gallery__lightbox-image .react-pic-gallery__image-error{pointer-events:none}.react-pic-gallery__lightbox-image--swipe-next{animation-name:react-pic-gallery-slide-in-from-right}.react-pic-gallery__lightbox-image--swipe-previous{animation-name:react-pic-gallery-slide-in-from-left}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{z-index:1;position:absolute;top:50%;transform:translateY(-50%)}.react-pic-gallery__control--previous{left:0}.react-pic-gallery__control--next{right:0}.react-pic-gallery__caption{color:#cbd5e1;text-align:center;flex:none;max-height:8rem;padding:.75rem 0 0;font-size:.95rem;line-height:1.4;overflow:hidden}.react-pic-gallery__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes react-pic-gallery-spin{to{transform:rotate(360deg)}}@keyframes react-pic-gallery-fade-in{0%{opacity:0}to{opacity:1}}@keyframes react-pic-gallery-fade-out{0%{opacity:1}to{opacity:0}}@keyframes react-pic-gallery-rise-in{0%{opacity:0;transform:translateY(.5rem)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes react-pic-gallery-rise-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(.5rem)scale(.99)}}@keyframes react-pic-gallery-image-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes react-pic-gallery-slide-in-from-right{0%{opacity:0;transform:translate(18%)}to{opacity:1;transform:translate(0)}}@keyframes react-pic-gallery-slide-in-from-left{0%{opacity:0;transform:translate(-18%)}to{opacity:1;transform:translate(0)}}@media (width<=600px){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.5rem;--gallery-radius:.75rem;--gallery-row-height:8rem}:where(dialog.react-pic-gallery__lightbox){padding:max(.375rem, env(safe-area-inset-top)) max(.375rem, env(safe-area-inset-right)) max(.375rem, env(safe-area-inset-bottom)) max(.375rem, env(safe-area-inset-left))}.react-pic-gallery__lightbox-content{width:min(90rem,100vw - .75rem);height:min(54rem,100dvh - .75rem)}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{min-height:3rem}.react-pic-gallery__viewport{padding:.25rem}.react-pic-gallery__lightbox-image{inset:.25rem}.react-pic-gallery__viewport--has-navigation .react-pic-gallery__lightbox-image{inset-inline:.25rem}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{display:none}}@media (height<=600px){:where(dialog.react-pic-gallery__lightbox){padding:max(.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left))}.react-pic-gallery__lightbox-content{height:min(54rem,100dvh - .5rem)}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{min-height:2.25rem}.react-pic-gallery__caption{max-height:4rem;padding:.35rem 0 0;font-size:.85rem}.react-pic-gallery__viewport{padding:.25rem}.react-pic-gallery__lightbox-image{inset:.25rem}}@media (prefers-reduced-motion:reduce){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-motion:0s}.react-pic-gallery__image-loader:after{animation:none}}
+:where(.react-pic-gallery,.react-pic-gallery__gallery,.react-pic-gallery__carousel,.react-pic-gallery__lightbox){--gallery-gap:.75rem;--gallery-radius:1rem;--gallery-row-height:12rem;--gallery-carousel-height:24rem;--gallery-accent:#9ef01a;--gallery-overlay:#070b10f0;--gallery-control-size:2.75rem;--gallery-motion:.18s;color:#f8fafc;-webkit-user-select:none;user-select:none}.react-pic-gallery{width:100%;min-width:0}.react-pic-gallery__carousel{width:100%;height:var(--gallery-carousel-height,24rem);flex-direction:column;min-width:0;display:flex;position:relative}.react-pic-gallery__carousel:focus-visible{outline:none}.react-pic-gallery__carousel .react-pic-gallery__lightbox-content{width:100%;max-width:none;height:100%;max-height:none}.react-pic-gallery__carousel .react-pic-gallery__toolbar{z-index:1;pointer-events:none;gap:.5rem;min-height:0;position:absolute;top:.75rem;left:.75rem}.react-pic-gallery__carousel .react-pic-gallery__toolbar-actions{background:#070b108c;border-radius:999px;padding:.2rem .55rem}.react-pic-gallery__gallery{width:100%;min-width:0;position:relative}.react-pic-gallery__grid{gap:var(--gallery-gap,.75rem);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.react-pic-gallery__gallery--justified{align-content:flex-start;gap:var(--gallery-gap,.75rem);flex-wrap:wrap;display:flex}.react-pic-gallery__gallery--justified>.react-pic-gallery__tile--justified{flex:none;height:auto}.react-pic-gallery__row-height-probe{width:var(--gallery-gap,.75rem);height:var(--gallery-row-height,12rem);visibility:hidden;pointer-events:none;position:absolute;overflow:hidden}.react-pic-gallery__gallery--mosaic{gap:var(--gallery-gap,.75rem);display:grid}.react-pic-gallery__mosaic-group{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2, minmax(0, var(--gallery-row-height,12rem)));gap:var(--gallery-gap,.75rem);min-width:0;display:grid}.react-pic-gallery__mosaic-group--top{grid-template-columns:repeat(2,minmax(0,1fr))}.react-pic-gallery__mosaic-group .react-pic-gallery__tile--mosaic{min-width:0;height:auto}.react-pic-gallery__mosaic-group--left .react-pic-gallery__tile--mosaic-featured{grid-area:1/1/span 2}.react-pic-gallery__mosaic-group--top .react-pic-gallery__tile--mosaic-featured{grid-area:1/1/auto/-1}.react-pic-gallery__mosaic-group--count-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0, var(--gallery-row-height,12rem))}.react-pic-gallery__mosaic-group--count-1{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0, var(--gallery-row-height,12rem))}.react-pic-gallery__tile{min-width:0;height:var(--gallery-row-height,12rem);cursor:pointer;border-radius:var(--gallery-radius,1rem);isolation:isolate;background:0 0;border:0;padding:0;position:relative;overflow:hidden}.react-pic-gallery__tile:after{content:"";pointer-events:none;border-radius:inherit;transition:border-color var(--gallery-motion,.18s) ease;border:2px solid #0000;position:absolute;inset:0}.react-pic-gallery__tile:hover .react-pic-gallery__image-element,.react-pic-gallery__tile:focus-visible .react-pic-gallery__image-element{transform:scale(1.04)}.react-pic-gallery__tile:focus-visible{outline:3px solid var(--gallery-accent,#9ef01a);outline-offset:3px}.react-pic-gallery__tile:focus-visible:after{border-color:var(--gallery-accent,#9ef01a)}.react-pic-gallery__tile:disabled{cursor:default}.react-pic-gallery__image{border-radius:inherit;width:100%;height:100%;display:block;position:relative;overflow:hidden}.react-pic-gallery__image-element{width:100%;height:100%;transition:transform var(--gallery-motion,.18s) ease, opacity var(--gallery-motion,.18s) ease;display:block}.react-pic-gallery__image-loader,.react-pic-gallery__image-error{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);place-items:center;display:grid;position:absolute;inset:0}.react-pic-gallery__image-loader:after{content:"";border:2px solid #0f172a29;border-top-color:var(--gallery-accent,#9ef01a);border-radius:50%;width:1.5rem;height:1.5rem;animation:.7s linear infinite react-pic-gallery-spin}.react-pic-gallery__image-error{color:#475569;text-align:center;background:#e2e8f0e6;padding:1rem;font-size:.875rem}:where(dialog.react-pic-gallery__lightbox){z-index:1000;box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));color:#f8fafc;background:var(--gallery-overlay);animation:react-pic-gallery-fade-in var(--gallery-motion) ease both;border:0;place-items:center;margin:0;display:grid;position:fixed;inset:0;overflow:hidden}dialog.react-pic-gallery__lightbox:not([open]){display:none}dialog.react-pic-gallery__lightbox::backdrop{background:0 0}.react-pic-gallery__lightbox--closing{animation:react-pic-gallery-fade-out var(--gallery-motion) ease both}.react-pic-gallery__lightbox-content{box-sizing:border-box;width:min(90rem,100vw - 2rem);min-width:0;max-width:100%;height:min(54rem,100dvh - 2rem);min-height:0;max-height:100%;animation:react-pic-gallery-rise-in var(--gallery-motion) ease both;flex-direction:column;display:flex}.react-pic-gallery__lightbox--closing .react-pic-gallery__lightbox-content{animation:react-pic-gallery-rise-out var(--gallery-motion) ease both}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;display:flex}.react-pic-gallery__toolbar-actions{color:#cbd5e1;align-items:center;gap:.75rem;min-width:0;font-size:.875rem;display:flex}.react-pic-gallery__control{width:var(--gallery-control-size);height:var(--gallery-control-size);color:#f8fafc;cursor:pointer;transition:background var(--gallery-motion) ease, color var(--gallery-motion) ease, transform var(--gallery-motion) ease;background:0 0;border:0;border-radius:.7rem;flex:none;place-items:center;padding:0;font-size:1.4rem;line-height:1;display:inline-grid}.react-pic-gallery__control:hover{background:#f8fafc24}.react-pic-gallery__control:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}.react-pic-gallery__control svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:1.25rem;height:1.25rem}.react-pic-gallery__viewport{touch-action:pan-y pinch-zoom;flex:1 1 0;place-items:center;min-width:0;min-height:0;padding:.75rem;display:grid;position:relative;overflow:hidden}.react-pic-gallery__viewport--has-navigation{padding-inline:3.5rem}.react-pic-gallery__viewport--has-navigation .react-pic-gallery__lightbox-image{inset-inline:3.5rem}.react-pic-gallery__lightbox-image{pointer-events:none;width:auto;min-width:0;max-width:82rem;height:auto;min-height:0;max-height:none;animation:react-pic-gallery-image-in var(--gallery-motion) ease both;background:0 0;border-radius:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;margin-inline:auto;display:grid;position:absolute;inset:.75rem;overflow:visible}.react-pic-gallery__lightbox-image .react-pic-gallery__image-element{pointer-events:auto;touch-action:inherit;border-radius:var(--gallery-radius);background:0 0;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain!important}.react-pic-gallery__lightbox-image .react-pic-gallery__image-loader{pointer-events:none;background:0 0}.react-pic-gallery__lightbox-image .react-pic-gallery__image-error{pointer-events:none}.react-pic-gallery__lightbox-image--swipe-next{animation-name:react-pic-gallery-slide-in-from-right}.react-pic-gallery__lightbox-image--swipe-previous{animation-name:react-pic-gallery-slide-in-from-left}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{z-index:1;position:absolute;top:50%;transform:translateY(-50%)}.react-pic-gallery__control--previous{left:0}.react-pic-gallery__control--next{right:0}.react-pic-gallery__caption{color:#cbd5e1;text-align:center;flex:none;max-height:8rem;padding:.75rem 0 0;font-size:.95rem;line-height:1.4;overflow:hidden}.react-pic-gallery__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes react-pic-gallery-spin{to{transform:rotate(360deg)}}@keyframes react-pic-gallery-fade-in{0%{opacity:0}to{opacity:1}}@keyframes react-pic-gallery-fade-out{0%{opacity:1}to{opacity:0}}@keyframes react-pic-gallery-rise-in{0%{opacity:0;transform:translateY(.5rem)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes react-pic-gallery-rise-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(.5rem)scale(.99)}}@keyframes react-pic-gallery-image-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes react-pic-gallery-slide-in-from-right{0%{opacity:0;transform:translate(18%)}to{opacity:1;transform:translate(0)}}@keyframes react-pic-gallery-slide-in-from-left{0%{opacity:0;transform:translate(-18%)}to{opacity:1;transform:translate(0)}}@media (width<=600px){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.5rem;--gallery-radius:.75rem;--gallery-row-height:8rem;--gallery-carousel-height:14rem}:where(dialog.react-pic-gallery__lightbox){padding:max(.375rem, env(safe-area-inset-top)) max(.375rem, env(safe-area-inset-right)) max(.375rem, env(safe-area-inset-bottom)) max(.375rem, env(safe-area-inset-left))}.react-pic-gallery__mosaic-group--count-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(8rem, var(--gallery-row-height,12rem)) minmax(5rem, .65fr)}.react-pic-gallery__mosaic-group--count-3 .react-pic-gallery__tile--mosaic-featured{grid-area:1/1/auto/-1}.react-pic-gallery__lightbox-content{width:min(90rem,100vw - .75rem);height:min(54rem,100dvh - .75rem)}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{min-height:3rem}.react-pic-gallery__viewport{padding:.25rem}.react-pic-gallery__lightbox-image{inset:.25rem}.react-pic-gallery__viewport--has-navigation .react-pic-gallery__lightbox-image{inset-inline:.25rem}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{display:none}}@media (height<=600px){:where(dialog.react-pic-gallery__lightbox){padding:max(.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left))}.react-pic-gallery__lightbox-content{height:min(54rem,100dvh - .5rem)}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{min-height:2.25rem}.react-pic-gallery__caption{max-height:4rem;padding:.35rem 0 0;font-size:.85rem}.react-pic-gallery__viewport{padding:.25rem}.react-pic-gallery__lightbox-image{inset:.25rem}}@media (prefers-reduced-motion:reduce){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-motion:0s}.react-pic-gallery__image-loader:after{animation:none}}
 /*$vite$:1*/

package/dist/types.d.ts

@@ -8,6 +8,7 @@ export type GalleryImage = {
     width?: number;
     height?: number;
 };
+export type GalleryLayout = 'grid' | 'justified' | 'mosaic' | 'carousel';
 export type LightboxContext<T extends GalleryImage = GalleryImage> = {
     image: T;
     index: number;
@@ -22,8 +23,12 @@ export type LightboxRenderer<T extends GalleryImage = GalleryImage> = (context:
 export type GalleryProps<T extends GalleryImage = GalleryImage> = {
     images: readonly T[];
     onImageClick?: (index: number) => void;
+    layout?: GalleryLayout;
     columns?: number;
     rowHeight?: CSSProperties['height'];
+    renderCaption?: LightboxRenderer<T>;
+    showCounter?: boolean;
+    showNavigation?: boolean;
     className?: string;
     style?: CSSProperties;
 };
@@ -40,6 +45,7 @@ export type LightboxProps<T extends GalleryImage = GalleryImage> = {
 };
 export type PicGalleryProps<T extends GalleryImage = GalleryImage> = {
     images: readonly T[];
+    layout?: GalleryLayout;
     columns?: number;
     rowHeight?: CSSProperties['height'];
     className?: string;

package/dist/useCarouselNavigation.d.ts

@@ -0,0 +1,21 @@
+import { AnimationEvent as ReactAnimationEvent, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+import { GalleryImage } from './types';
+export type UseCarouselNavigationOptions<T extends GalleryImage> = {
+    images: readonly T[];
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+    disabled?: boolean;
+    showNavigation?: boolean;
+};
+export type UseCarouselNavigationResult = {
+    previous: () => void;
+    next: () => void;
+    swipeDirection: 'next' | 'previous' | null;
+    handleKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void;
+    handleTouchStart: (event: ReactTouchEvent<HTMLElement>) => void;
+    handleTouchEnd: (event: ReactTouchEvent<HTMLElement>) => void;
+    handleTouchCancel: () => void;
+    handleImageAnimationEnd: (event: ReactAnimationEvent<HTMLElement>) => void;
+    handleViewportClick: (event: ReactMouseEvent<HTMLElement>) => void;
+};
+export declare function useCarouselNavigation<T extends GalleryImage>(options: UseCarouselNavigationOptions<T>): UseCarouselNavigationResult;

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const interactiveControlSelector = "a[href], button, input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]";
+export declare const keyboardInteractiveControlSelector = "input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]";
+export declare const edgeTapMediaQuery = "(max-width: 600px), (pointer: coarse)";
+export declare const edgeTapZoneRatio = 0.3;
+export declare function isInteractiveTarget(target: EventTarget | null): boolean;
+export declare function getEdgeTapZone(clientX: number, viewport: HTMLElement | null): "next" | "previous" | null;
+export declare function CloseIcon(): import('react').JSX.Element;
+export declare function ChevronIcon({ direction }: {
+    direction: 'left' | 'right';
+}): import('react').JSX.Element;
+export declare function joinClassNames(...names: Array<string | undefined>): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pic-gallery",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Small, accessible React image gallery and lightbox.",
   "author": "marcelrsoub",
   "license": "MIT",