react-pic-gallery 2.0.2 → 2.0.3

package/README.md

@@ -3,7 +3,7 @@
 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/7.7%20KB/blue)](https://bundlephobia.com/package/react-pic-gallery@2.0.2)
+[![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/)
 
@@ -23,11 +23,11 @@ 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 and React is a peer dependency. The built JavaScript and CSS together are about **7.7 KB gzipped** (5.55 KB JS + 2.16 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; ~7.7 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.

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, layout, 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/react-pic-gallery.js

@@ -2,40 +2,41 @@ import { memo as e, useCallback as t, useEffect as n, useId as r, useLayoutEffec
 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 d({ src: e, alt: t, className: r = "", imageClassName: i = "", style: s, imageStyle: u, onAnimationEnd: d, eager: f = !1, objectFit: p = "cover", width: m, height: h }) {
-	let g = a(null), [_, v] = o("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");
+		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: s,
-		"aria-busy": _ === "loading",
+		"aria-busy": v === "loading",
 		onAnimationEnd: d,
+		onClick: f,
 		children: [
 			/* @__PURE__ */ c("img", {
-				ref: g,
+				ref: _,
 				src: e,
 				alt: t,
 				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__ */ c("span", {
+			v === "loading" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-loader",
 				role: "progressbar",
 				"aria-label": "Loading image"
 			}),
-			_ === "error" && /* @__PURE__ */ c("span", {
+			v === "error" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-error",
 				role: "status",
 				children: "Unable to load image"
@@ -43,15 +44,137 @@ function d({ src: e, alt: t, className: r = "", imageClassName: i = "", style: s
 		]
 	});
 }
+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 f = 3 / 2;
-function p(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 : f;
+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 m(e, t, n, r) {
+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(p), c = [], l = 0;
+	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) {
@@ -70,29 +193,113 @@ function m(e, t, n, r) {
 	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 h = 3, g = 192, _ = 12, v = typeof window > "u" ? n : i;
-function y({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeight: u, className: f = "", style: p }) {
-	let y = a([]), b = a(null), x = a(null), [S, C] = o(0), [w, T] = o({
+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: g,
-		gap: _
-	}), E = i !== void 0 && Number.isFinite(i) && i >= 1 ? Math.floor(i) : h, D = e.length - 1, O = Math.min(S, Math.max(D, 0)), k = typeof u == "number" ? `${u}px` : u, A = {
+		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(${E}, minmax(0, 1fr))` } : {},
-		...k ? { "--gallery-row-height": k } : {}
+		...r === "grid" && i !== void 0 && Number.isFinite(i) && i >= 1 ? { gridTemplateColumns: `repeat(${A}, minmax(0, 1fr))` } : {},
+		...N ? { "--gallery-row-height": N } : {}
 	};
-	v(() => {
+	T(() => {
 		if (r !== "justified") return;
-		let e = b.current, t = x.current;
+		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) : g;
-			T((e) => {
+			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 || _
+					gap: Number.isFinite(i) ? i : r.width || w
 				};
 				return e.width === t.width && e.rowHeight === t.rowHeight && e.gap === t.gap ? e : t;
 			});
@@ -105,17 +312,17 @@ function y({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeig
 	}, [
 		r,
 		u,
-		k
+		N
 	]);
-	let j = t((e) => {
-		C(e), y.current[e]?.focus();
-	}, []), M = t((t, n) => {
-		let i = y.current[t];
+	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 (y.current.slice(0, e.length).forEach((e, i) => {
+			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;
@@ -124,52 +331,52 @@ function y({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeig
 			}), c !== null) return c;
 		}
 		let o = null, s = Infinity;
-		return y.current.slice(0, e.length).forEach((e, r) => {
+		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]), N = t((e, t) => {
+	}, [e.length, r]), L = t((e, t) => {
 		let n = null;
 		if (e.key === "Home") n = 0;
-		else if (e.key === "End") n = D;
+		else if (e.key === "End") n = j;
 		else if (r === "grid") {
 			let r = {
 				ArrowRight: 1,
 				ArrowLeft: -1,
-				ArrowDown: E,
-				ArrowUp: -E
+				ArrowDown: A,
+				ArrowUp: -A
 			}[e.key];
 			if (r !== void 0) {
 				let e = t + r;
-				e >= 0 && e <= D && (n = e);
+				e >= 0 && e <= j && (n = e);
 			}
-		} else if (e.key === "ArrowRight" && t < D) n = t + 1;
+		} 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 = M(t, "down");
-		else if (e.key === "ArrowUp") n = M(t, "up");
+		else if (e.key === "ArrowDown") n = I(t, "down");
+		else if (e.key === "ArrowUp") n = I(t, "up");
 		else return;
-		n !== null && n !== t && (e.preventDefault(), j(n));
+		n !== null && n !== t && (e.preventDefault(), F(n));
 	}, [
-		E,
-		M,
-		D,
+		A,
+		I,
+		j,
 		r,
-		j
-	]), P = (e, t, r = {}) => /* @__PURE__ */ c("button", {
+		F
+	]), R = (e, t, r = {}) => /* @__PURE__ */ c("button", {
 		className: `react-pic-gallery__tile ${r.className ?? ""}`.trim(),
 		type: "button",
 		disabled: !n,
-		tabIndex: t === O ? 0 : -1,
+		tabIndex: t === M ? 0 : -1,
 		ref: (e) => {
-			y.current[t] = e;
+			_.current[t] = e;
 		},
 		style: r.style,
-		onKeyDown: (e) => N(e, t),
+		onKeyDown: (e) => L(e, t),
 		onClick: () => {
-			C(t), n?.(t);
+			D(t), n?.(t);
 		},
 		"aria-label": `Open ${e.alt}`,
 		children: /* @__PURE__ */ c(d, {
@@ -179,27 +386,34 @@ function y({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeig
 			width: e.width,
 			height: e.height
 		})
-	}, e.id ?? `${e.src}-${t}`), F = r === "justified" ? m(e, w.width, w.rowHeight, w.gap) : [], I = Array(e.length);
-	return F.forEach((e) => {
+	}, 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) => {
-			I[t] = {
+			B[t] = {
 				width: `${e.widths[n]}px`,
 				height: `${e.height}px`
 			};
 		});
 	}), /* @__PURE__ */ l("div", {
-		ref: b,
+		ref: v,
 		className: `react-pic-gallery__gallery react-pic-gallery__gallery--${r} ${r === "grid" ? "react-pic-gallery__grid" : ""} ${f}`.trim(),
-		style: A,
+		style: P,
 		"data-testid": r === "grid" ? "react-pic-gallery-grid" : void 0,
 		"data-layout": r,
 		children: [
-			r === "grid" && e.map((e, t) => P(e, t)),
-			r === "justified" && /* @__PURE__ */ l(s, { children: [e.map((e, t) => P(e, t, {
+			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: I[t]
+				style: B[t]
 			})), /* @__PURE__ */ c("span", {
-				ref: x,
+				ref: y,
 				className: "react-pic-gallery__row-height-probe",
 				"aria-hidden": "true"
 			})] }),
@@ -209,251 +423,117 @@ function y({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeig
 					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 P(e, n, { className: `react-pic-gallery__tile--mosaic react-pic-gallery__tile--mosaic-${a}` });
+						return R(e, n, { className: `react-pic-gallery__tile--mosaic react-pic-gallery__tile--mosaic-${a}` });
 					})
 				}, `mosaic-${r}`);
 			})
 		]
 	});
 }
-var b = e(y), x = /* @__PURE__ */ new Set(), S = null, C = "a[href], button, input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", w = "input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", T = "(max-width: 600px), (pointer: coarse)", E = .3;
-function D(e) {
-	return e instanceof Element && e.closest(C) !== null;
-}
-function O(e) {
-	if (!x.has(e)) {
-		if (x.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;
-			S = {
+			A = {
 				overflow: e.style.overflow,
 				paddingRight: e.style.paddingRight
 			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
 		}
-		x.add(e);
+		k.add(e);
 	}
 }
-function k(e) {
-	return x.delete(e), x.size > 0 || !S ? !1 : (document.body.style.overflow = S.overflow, document.body.style.paddingRight = S.paddingRight, S = 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 A(e) {
+function N(e) {
 	let t = e.trim();
 	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
 }
-function j(e) {
+function P(e) {
 	let t = window.getComputedStyle(e), n = t.animationDuration.split(","), r = t.animationDelay.split(",");
-	return Math.max(...n.map((e, t) => A(e) + A(r[t % r.length] ?? "0s")), 0);
-}
-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" })
-	});
+	return Math.max(...n.map((e, t) => N(e) + N(r[t % r.length] ?? "0s")), 0);
 }
-function N({ 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 P(...e) {
-	return e.filter(Boolean).join(" ");
-}
-function F({ images: e, index: i, onIndexChange: s, renderActions: f, renderCaption: p, renderControls: m, showCounter: h = !0, showNavigation: g = !0, className: _ }) {
-	let v = a(null), y = a(s), b = a(null), x = a(null), S = a(null), C = a(!1), A = a(!1), F = a({}), I = a(e), L = a(null), R = r(), [z, B] = o(!1), [V, H] = o(null), U = i !== null && i >= 0 && i < e.length ? i : null, W = U === null ? void 0 : e[U];
-	y.current = s, S.current = U, C.current = z, I.current = e;
-	let G = t(() => {
-		b.current !== null && (window.clearTimeout(b.current), b.current = null), x.current = null;
-	}, []), K = t(() => {
-		let e = S.current;
-		if (e !== null && x.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) {
-				y.current(null);
+				b.current(null);
 				return;
 			}
-			x.current = { index: e }, C.current = !0, B(!0);
+			C.current = { index: e }, k(!0);
 		}
-	}, []), q = t(() => {
-		let e = S.current;
-		!C.current && e !== null && e > 0 && y.current(e - 1);
-	}, []), J = t(() => {
-		let e = S.current;
-		!C.current && e !== null && e < I.current.length - 1 && y.current(e + 1);
-	}, []), Y = t(() => {
-		let e = S.current;
-		C.current || e === null || e === 0 || (H("previous"), y.current(e - 1));
-	}, []), X = t(() => {
-		let e = S.current;
-		C.current || e === null || e >= I.current.length - 1 || (H("next"), y.current(e + 1));
-	}, []), ee = t((e) => {
-		e.preventDefault(), K();
-	}, [K]), Z = t(() => {
-		let e = x.current;
+	}, []), R = t((e) => {
+		e.preventDefault(), L();
+	}, [L]), z = t(() => {
+		let e = C.current;
 		if (e) {
-			if (S.current !== e.index) {
-				G(), C.current = !1, B(!1);
+			if (w.current !== e.index) {
+				I(), k(!1);
 				return;
 			}
-			G(), C.current = !1, B(!1), y.current(null);
+			I(), k(!1), b.current(null);
 		}
-	}, [G]), te = t((e) => {
-		if (e.defaultPrevented) return;
-		let t = e.target;
-		t instanceof HTMLElement && (t.isContentEditable || t.closest(w)) || (e.key === "ArrowLeft" ? (e.preventDefault(), q()) : e.key === "ArrowRight" && (e.preventDefault(), J()));
-	}, [J, q]), ne = t((e) => {
-		if (e.touches.length !== 1 || D(e.target)) {
-			L.current = null;
-			return;
-		}
-		let t = e.touches[0];
-		L.current = {
-			x: t.clientX,
-			y: t.clientY
-		};
-	}, []), re = t((e) => {
-		let t = L.current;
-		if (L.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 ? X() : Y());
-	}, [X, Y]), ie = t(() => {
-		L.current = null;
-	}, []), ae = t((e) => {
-		e.target === e.currentTarget && H(null);
-	}, []), oe = t((e) => {
-		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && Z();
-	}, [Z]), se = t(() => {
-		A.current || (G(), C.current = !1, B(!1), S.current !== null && y.current(null));
-	}, [G]);
-	if (n(() => {
-		let e = x.current;
-		e && U !== e.index && (G(), C.current = !1, B(!1));
-	}, [U, G]), n(() => {
-		if (!z || !x.current || !v.current) return;
-		let e = j(v.current);
-		return b.current = window.setTimeout(Z, e), () => {
-			b.current !== null && (window.clearTimeout(b.current), b.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);
 		};
-	}, [Z, z]), n(() => {
-		if (U === null) return;
-		let e = v.current;
+	}, [z, O]), n(() => {
+		if (A === null) return;
+		let e = y.current;
 		if (!e) return;
 		let t = document.activeElement;
-		return O(F.current), e.open || e.showModal(), () => {
-			G(), A.current = !0, e.open && e.close(), A.current = !1, k(F.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();
 		};
-	}, [U !== null, G]), U === null || !W || typeof document > "u") return null;
-	let Q = {
-		image: W,
-		index: U,
-		count: e.length,
-		close: K,
-		next: J,
-		previous: q,
-		canGoNext: U < e.length - 1,
-		canGoPrevious: U > 0
-	}, ce = g && !m && Q.canGoPrevious, le = g && !m && Q.canGoNext, $ = g && !m && e.length > 1, ue = (e) => {
-		e.target === e.currentTarget && K();
-	};
-	return u(/* @__PURE__ */ l("dialog", {
-		ref: v,
-		className: P("react-pic-gallery__lightbox", z ? "react-pic-gallery__lightbox--closing" : void 0, _),
-		"aria-labelledby": R,
-		onAnimationEnd: oe,
-		onClose: se,
-		onMouseDown: ue,
-		onCancel: ee,
-		onKeyDown: te,
-		children: [
-			/* @__PURE__ */ c("h2", {
-				className: "react-pic-gallery__sr-only",
-				id: R,
-				children: "Image viewer"
-			}),
-			/* @__PURE__ */ l("p", {
-				className: "react-pic-gallery__sr-only",
-				"aria-live": "polite",
-				children: [
-					W.alt,
-					", image ",
-					U + 1,
-					" of ",
-					e.length
-				]
-			}),
-			/* @__PURE__ */ l("div", {
-				className: "react-pic-gallery__lightbox-content",
-				children: [
-					m ? /* @__PURE__ */ c("div", {
-						className: "react-pic-gallery__custom-controls",
-						children: m(Q)
-					}) : /* @__PURE__ */ l("div", {
-						className: "react-pic-gallery__toolbar",
-						children: [/* @__PURE__ */ l("div", {
-							className: "react-pic-gallery__toolbar-actions",
-							children: [h && /* @__PURE__ */ l("span", {
-								"aria-live": "polite",
-								children: [
-									U + 1,
-									" / ",
-									e.length
-								]
-							}), f?.(Q)]
-						}), /* @__PURE__ */ c("button", {
-							className: "react-pic-gallery__control",
-							type: "button",
-							onClick: K,
-							"aria-label": "Close image viewer",
-							children: /* @__PURE__ */ c(M, {})
-						})]
-					}),
-					/* @__PURE__ */ l("div", {
-						className: P("react-pic-gallery__viewport", $ ? "react-pic-gallery__viewport--has-navigation" : void 0),
-						onMouseDown: ue,
-						onClick: (e) => {
-							if (!$ || C.current || !(e.target instanceof Element) || e.target.closest("button") || window.matchMedia?.(T)?.matches !== !0) return;
-							let t = e.currentTarget.getBoundingClientRect();
-							if (t.width <= 0) return;
-							let n = (e.clientX - t.left) / t.width;
-							n < E ? q() : n > .7 && J();
-						},
-						onTouchCancel: ie,
-						onTouchEnd: re,
-						onTouchStart: ne,
-						children: [
-							ce && /* @__PURE__ */ c("button", {
-								className: "react-pic-gallery__control react-pic-gallery__control--previous",
-								type: "button",
-								onClick: q,
-								"aria-label": "Previous image",
-								children: /* @__PURE__ */ c(N, { direction: "left" })
-							}),
-							/* @__PURE__ */ c(d, {
-								src: W.src,
-								alt: W.alt,
-								eager: !0,
-								objectFit: "contain",
-								className: P("react-pic-gallery__lightbox-image", V ? `react-pic-gallery__lightbox-image--swipe-${V}` : void 0),
-								onAnimationEnd: ae
-							}, W.src),
-							le && /* @__PURE__ */ c("button", {
-								className: "react-pic-gallery__control react-pic-gallery__control--next",
-								type: "button",
-								onClick: J,
-								"aria-label": "Next image",
-								children: /* @__PURE__ */ c(N, { direction: "right" })
-							})
-						]
-					}),
-					(p || W.caption) && /* @__PURE__ */ c("div", {
-						className: "react-pic-gallery__caption",
-						children: p ? p(Q) : W.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
@@ -463,13 +543,16 @@ function I({ images: e, layout: t, columns: n, rowHeight: r, className: i, galle
 	return /* @__PURE__ */ l("div", {
 		className: `react-pic-gallery ${i ?? ""}`.trim(),
 		style: s,
-		children: [/* @__PURE__ */ c(b, {
+		children: [/* @__PURE__ */ c(O, {
 			images: e,
 			layout: t,
 			columns: n,
 			rowHeight: r,
 			className: a,
-			onImageClick: g
+			onImageClick: g,
+			renderCaption: d,
+			showCounter: p,
+			showNavigation: m
 		}), /* @__PURE__ */ c(F, {
 			images: e,
 			index: h,
@@ -483,4 +566,4 @@ function I({ images: e, layout: t, columns: n, rowHeight: r, className: i, galle
 	});
 }
 //#endregion
-export { b as Gallery, F as Lightbox, I as PicGallery, I 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__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:#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,.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{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,.18s) ease, opacity var(--gallery-motion,.18s) 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,#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}: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}}
+: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,7 +8,7 @@ export type GalleryImage = {
     width?: number;
     height?: number;
 };
-export type GalleryLayout = 'grid' | 'justified' | 'mosaic';
+export type GalleryLayout = 'grid' | 'justified' | 'mosaic' | 'carousel';
 export type LightboxContext<T extends GalleryImage = GalleryImage> = {
     image: T;
     index: number;
@@ -26,6 +26,9 @@ export type GalleryProps<T extends GalleryImage = GalleryImage> = {
     layout?: GalleryLayout;
     columns?: number;
     rowHeight?: CSSProperties['height'];
+    renderCaption?: LightboxRenderer<T>;
+    showCounter?: boolean;
+    showNavigation?: boolean;
     className?: string;
     style?: CSSProperties;
 };

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.2",
+  "version": "2.0.3",
   "description": "Small, accessible React image gallery and lightbox.",
   "author": "marcelrsoub",
   "license": "MIT",