react-pic-gallery 2.0.0 → 2.0.1

package/README.md

@@ -20,7 +20,16 @@ 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 roughly 6 KB gzipped.
+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).
+
+## Why react-pic-gallery
+
+- **Tiny by design** — no runtime dependencies, no context providers, no polyfills; ~5.9 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`, …).
 
 ## Quick start
 
@@ -104,9 +113,11 @@ The lightbox uses the native modal `<dialog>` element and includes:
 - Backdrop closing with stable page width while scrolling is locked.
 - Native lazy loading for thumbnails and explicit image loading/error states.
 - Horizontal swipe navigation on touch devices.
-- Pinch zoom up to 3x with one-finger panning while zoomed.
+- 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.
+
 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.
 
 ## Styling

package/dist/react-pic-gallery.js

@@ -45,21 +45,49 @@ function l({ src: e, alt: t, className: r = "", imageClassName: c = "", style: l
 }
 //#endregion
 //#region src/lib/Gallery.tsx
-function u({ images: e, onImageClick: t, columns: n, rowHeight: r, className: i = "", style: a }) {
-	let s = typeof r == "number" ? `${r}px` : r, c = {
-		...a,
-		...n ? { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` } : {},
-		...s ? { "--gallery-row-height": s } : {}
+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;
+		else return;
+		r !== null && r !== t && (e.preventDefault(), v(r));
+	}, [
+		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 ${i}`.trim(),
-		style: c,
+		className: `react-pic-gallery__grid ${c}`.trim(),
+		style: x,
 		"data-testid": "react-pic-gallery-grid",
-		children: e.map((e, n) => /* @__PURE__ */ o("button", {
+		children: e.map((e, t) => /* @__PURE__ */ o("button", {
 			className: "react-pic-gallery__tile",
 			type: "button",
-			disabled: !t,
-			onClick: () => t?.(n),
+			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,
@@ -68,40 +96,37 @@ function u({ images: e, onImageClick: t, columns: n, rowHeight: r, className: i
 				width: e.width,
 				height: e.height
 			})
-		}, e.id ?? `${e.src}-${n}`))
+		}, e.id ?? `${e.src}-${t}`))
 	});
 }
-var d = e(u), f = /* @__PURE__ */ new Set(), p = null, m = "a[href], button, input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", h = ".react-pic-gallery__image-element", g = 3;
-function _(e) {
-	return e instanceof Element && e.closest(m) !== null;
-}
-function v(e, t, n) {
-	return Math.min(Math.max(e, t), n);
+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 ee(e) {
-	if (!f.has(e)) {
-		if (f.size === 0) {
+function b(e) {
+	if (!p.has(e)) {
+		if (p.size === 0) {
 			let e = document.body, t = window.innerWidth - document.documentElement.clientWidth, n = Number.parseFloat(window.getComputedStyle(e).paddingRight) || 0;
-			p = {
+			m = {
 				overflow: e.style.overflow,
 				paddingRight: e.style.paddingRight
 			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
 		}
-		f.add(e);
+		p.add(e);
 	}
 }
-function te(e) {
-	return f.delete(e), f.size > 0 || !p ? !1 : (document.body.style.overflow = p.overflow, document.body.style.paddingRight = p.paddingRight, p = null, !0);
+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 y(e) {
+function S(e) {
 	let t = e.trim();
 	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
 }
-function ne(e) {
+function ee(e) {
 	let t = window.getComputedStyle(e), n = t.animationDuration.split(","), r = t.animationDelay.split(",");
-	return Math.max(...n.map((e, t) => y(e) + y(r[t % r.length] ?? "0s")), 0);
+	return Math.max(...n.map((e, t) => S(e) + S(r[t % r.length] ?? "0s")), 0);
 }
-function re() {
+function C() {
 	return /* @__PURE__ */ o("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -109,7 +134,7 @@ function re() {
 		children: /* @__PURE__ */ o("path", { d: "M6 6l12 12M18 6L6 18" })
 	});
 }
-function b({ direction: e }) {
+function w({ direction: e }) {
 	return /* @__PURE__ */ o("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -117,171 +142,113 @@ function b({ direction: e }) {
 		children: /* @__PURE__ */ o("path", { d: e === "left" ? "M14.5 5l-7 7 7 7" : "M9.5 5l7 7-7 7" })
 	});
 }
-function x(...e) {
+function T(...e) {
 	return e.filter(Boolean).join(" ");
 }
-function S({ images: e, index: u, onIndexChange: d, renderActions: f, renderCaption: p, renderControls: y, showCounter: S = !0, showNavigation: C = !0, className: ie }) {
-	let w = i(null), T = i(d), E = i(null), D = i(null), O = i(null), k = i(!1), A = i(!1), j = i({}), M = i(e), N = i(null), P = i(/* @__PURE__ */ new Map()), F = i(null), I = i(null), L = r(), [R, z] = a(!1), [B, V] = a(null), [H, U] = a(1), [W, G] = a({
-		x: 0,
-		y: 0
-	}), [ae, oe] = a("50% 50%"), K = u !== null && u >= 0 && u < e.length ? u : null, q = K === null ? void 0 : e[K];
-	T.current = d, O.current = K, k.current = R, M.current = e;
-	let J = t(() => {
-		E.current !== null && (window.clearTimeout(E.current), E.current = null), D.current = null;
-	}, []), Y = t(() => {
-		let e = O.current;
-		if (e !== null && D.current === null) {
+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) {
 			if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-				T.current(null);
+				O.current(null);
 				return;
 			}
-			D.current = { index: e }, k.current = !0, z(!0);
+			A.current = { index: e }, M.current = !0, z(!0);
 		}
-	}, []), X = t(() => {
-		let e = O.current;
-		!k.current && e !== null && e > 0 && T.current(e - 1);
-	}, []), Z = t(() => {
-		let e = O.current;
-		!k.current && e !== null && e < M.current.length - 1 && T.current(e + 1);
-	}, []), se = t(() => {
-		let e = O.current;
-		k.current || e === null || e === 0 || (V("previous"), T.current(e - 1));
-	}, []), ce = t(() => {
-		let e = O.current;
-		k.current || e === null || e >= M.current.length - 1 || (V("next"), T.current(e + 1));
-	}, []), le = t((e) => {
-		e.preventDefault(), Y();
-	}, [Y]), Q = t(() => {
-		let e = D.current;
+	}, []), 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;
 		if (e) {
-			if (O.current !== e.index) {
-				J(), k.current = !1, z(!1);
+			if (j.current !== e.index) {
+				W(), M.current = !1, z(!1);
 				return;
 			}
-			J(), k.current = !1, z(!1), T.current(null);
+			W(), M.current = !1, z(!1), O.current(null);
 		}
-	}, [J]), ue = t((e) => {
+	}, [W]), ne = t((e) => {
 		if (e.defaultPrevented) return;
 		let t = e.target;
-		t instanceof HTMLElement && (t.isContentEditable || t.closest(m)) || (e.key === "ArrowLeft" ? (e.preventDefault(), X()) : e.key === "ArrowRight" && (e.preventDefault(), Z()));
-	}, [Z, X]), de = t((e) => {
-		if (H > 1 || e.touches.length !== 1 || _(e.target)) {
-			N.current = null;
+		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;
 		}
 		let t = e.touches[0];
-		N.current = {
+		I.current = {
 			x: t.clientX,
 			y: t.clientY
 		};
-	}, [H]), fe = t((e) => {
-		let t = N.current;
-		if (N.current = null, !t || e.changedTouches.length === 0) return;
+	}, []), 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 ? ce() : se());
-	}, [
-		ce,
-		se,
-		H
-	]), pe = t(() => {
-		N.current = null;
-	}, []), me = t((e) => {
-		if (!(e.target instanceof Element) || e.target.closest(h) === null || e.pointerType === "mouse" && e.button !== 0) return;
-		let t = P.current;
-		if (t.set(e.pointerId, {
-			x: e.clientX,
-			y: e.clientY
-		}), e.currentTarget.setPointerCapture?.(e.pointerId), t.size === 2) {
-			let [n, r] = [...t.values()], i = Math.hypot(r.x - n.x, r.y - n.y), a = e.currentTarget.querySelector(h)?.getBoundingClientRect(), o = (n.x + r.x) / 2, s = (n.y + r.y) / 2;
-			a && a.width > 0 && a.height > 0 && oe(`${v((o - a.left) / a.width * 100, 0, 100)}% ${v((s - a.top) / a.height * 100, 0, 100)}%`), F.current = {
-				distance: Math.max(i, 1),
-				scale: H,
-				offset: W
-			}, I.current = null;
-		} else H > 1 && (I.current = {
-			x: e.clientX,
-			y: e.clientY,
-			offset: W
-		});
-	}, [W, H]), he = t((e) => {
-		let t = P.current;
-		if (t.has(e.pointerId)) {
-			if (t.set(e.pointerId, {
-				x: e.clientX,
-				y: e.clientY
-			}), t.size >= 2 && F.current) {
-				let [n, r] = [...t.values()], i = Math.max(Math.hypot(r.x - n.x, r.y - n.y), 1), a = v(F.current.scale * (i / F.current.distance), 1, g);
-				U(a), G(F.current.offset), e.preventDefault();
-				return;
-			}
-			if (t.size === 1 && I.current && H > 1) {
-				let t = e.currentTarget.querySelector(h), n = t?.clientWidth ?? 0, r = t?.clientHeight ?? 0, i = Math.max(0, n * (H - 1) / 2), a = Math.max(0, r * (H - 1) / 2), o = I.current.offset.x + e.clientX - I.current.x, s = I.current.offset.y + e.clientY - I.current.y;
-				G({
-					x: v(o, -i, i),
-					y: v(s, -a, a)
-				}), e.preventDefault();
-			}
-		}
-	}, [H]), ge = t((e) => {
-		if (P.current.delete(e.pointerId), e.currentTarget.hasPointerCapture?.(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), P.current.size < 2 && (F.current = null), P.current.size === 1 && H > 1) {
-			let [e] = [...P.current.values()];
-			I.current = {
-				x: e.x,
-				y: e.y,
-				offset: W
-			};
-		} else I.current = null;
-	}, [W, H]), _e = t((e) => {
+		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);
-	}, []), ve = t((e) => {
-		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && Q();
-	}, [Q]), ye = t(() => {
-		A.current || (J(), k.current = !1, z(!1), O.current !== null && T.current(null));
-	}, [J]);
+	}, []), 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(() => {
-		U(1), G({
-			x: 0,
-			y: 0
-		}), oe("50% 50%"), P.current.clear(), F.current = null, I.current = null;
-	}, [K]), n(() => {
-		let e = D.current;
-		e && K !== e.index && (J(), k.current = !1, z(!1));
-	}, [K, J]), n(() => {
-		if (!R || !D.current || !w.current) return;
-		let e = ne(w.current);
-		return E.current = window.setTimeout(Q, e), () => {
-			E.current !== null && (window.clearTimeout(E.current), E.current = null);
+		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);
 		};
-	}, [Q, R]), n(() => {
-		if (K === null) return;
-		let e = w.current;
+	}, [X, R]), n(() => {
+		if (H === null) return;
+		let e = D.current;
 		if (!e) return;
 		let t = document.activeElement;
-		return ee(j.current), e.open || e.showModal(), () => {
-			J(), A.current = !0, e.open && e.close(), A.current = !1, te(j.current) && t?.isConnected && t.focus();
+		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();
 		};
-	}, [K !== null, J]), K === null || !q || typeof document > "u") return null;
-	let $ = {
-		image: q,
-		index: K,
+	}, [H !== null, W]), H === null || !U || typeof document > "u") return null;
+	let Z = {
+		image: U,
+		index: H,
 		count: e.length,
-		close: Y,
-		next: Z,
-		previous: X,
-		canGoNext: K < e.length - 1,
-		canGoPrevious: K > 0
-	}, be = C && !y && $.canGoPrevious, xe = C && !y && $.canGoNext, Se = C && !y && e.length > 1, Ce = (e) => {
-		e.target === e.currentTarget && Y();
+		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: w,
-		className: x("react-pic-gallery__lightbox", R ? "react-pic-gallery__lightbox--closing" : void 0, ie),
+		ref: D,
+		className: T("react-pic-gallery__lightbox", R ? "react-pic-gallery__lightbox--closing" : void 0, E),
 		"aria-labelledby": L,
-		onAnimationEnd: ve,
-		onClose: ye,
-		onMouseDown: Ce,
-		onCancel: le,
-		onKeyDown: ue,
+		onAnimationEnd: se,
+		onClose: ce,
+		onMouseDown: $,
+		onCancel: te,
+		onKeyDown: ne,
 		children: [
 			/* @__PURE__ */ o("h2", {
 				className: "react-pic-gallery__sr-only",
@@ -292,9 +259,9 @@ function S({ images: e, index: u, onIndexChange: d, renderActions: f, renderCapt
 				className: "react-pic-gallery__sr-only",
 				"aria-live": "polite",
 				children: [
-					q.alt,
+					U.alt,
 					", image ",
-					K + 1,
+					H + 1,
 					" of ",
 					e.length
 				]
@@ -302,74 +269,70 @@ function S({ images: e, index: u, onIndexChange: d, renderActions: f, renderCapt
 			/* @__PURE__ */ s("div", {
 				className: "react-pic-gallery__lightbox-content",
 				children: [
-					y ? /* @__PURE__ */ o("div", {
+					m ? /* @__PURE__ */ o("div", {
 						className: "react-pic-gallery__custom-controls",
-						children: y($)
+						children: m(Z)
 					}) : /* @__PURE__ */ s("div", {
 						className: "react-pic-gallery__toolbar",
 						children: [/* @__PURE__ */ s("div", {
 							className: "react-pic-gallery__toolbar-actions",
-							children: [S && /* @__PURE__ */ s("span", {
+							children: [h && /* @__PURE__ */ s("span", {
 								"aria-live": "polite",
 								children: [
-									K + 1,
+									H + 1,
 									" / ",
 									e.length
 								]
-							}), f?.($)]
+							}), f?.(Z)]
 						}), /* @__PURE__ */ o("button", {
 							className: "react-pic-gallery__control",
 							type: "button",
-							onClick: Y,
+							onClick: G,
 							"aria-label": "Close image viewer",
-							children: /* @__PURE__ */ o(re, {})
+							children: /* @__PURE__ */ o(C, {})
 						})]
 					}),
 					/* @__PURE__ */ s("div", {
-						className: x("react-pic-gallery__viewport", Se ? "react-pic-gallery__viewport--has-navigation" : void 0),
-						onMouseDown: Ce,
-						onPointerCancel: ge,
-						onPointerDown: me,
-						onPointerMove: he,
-						onPointerUp: ge,
-						onTouchCancel: pe,
-						onTouchEnd: fe,
-						onTouchStart: de,
+						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: [
-							be && /* @__PURE__ */ o("button", {
+							le && /* @__PURE__ */ o("button", {
 								className: "react-pic-gallery__control react-pic-gallery__control--previous",
 								type: "button",
-								onClick: X,
+								onClick: K,
 								"aria-label": "Previous image",
-								children: /* @__PURE__ */ o(b, { direction: "left" })
+								children: /* @__PURE__ */ o(w, { direction: "left" })
 							}),
 							/* @__PURE__ */ o(l, {
-								src: q.src,
-								alt: q.alt,
+								src: U.src,
+								alt: U.alt,
 								eager: !0,
 								objectFit: "contain",
-								width: q.width,
-								height: q.height,
-								className: x("react-pic-gallery__lightbox-image", B ? `react-pic-gallery__lightbox-image--swipe-${B}` : void 0),
-								imageStyle: {
-									transform: `translate3d(${W.x}px, ${W.y}px, 0) scale(${H})`,
-									transformOrigin: ae,
-									transition: P.current.size > 0 ? "none" : void 0
-								},
-								onAnimationEnd: _e
-							}, q.src),
-							xe && /* @__PURE__ */ o("button", {
+								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: Z,
+								onClick: q,
 								"aria-label": "Next image",
-								children: /* @__PURE__ */ o(b, { direction: "right" })
+								children: /* @__PURE__ */ o(w, { direction: "right" })
 							})
 						]
 					}),
-					(p || q.caption) && /* @__PURE__ */ o("div", {
+					(p || U.caption) && /* @__PURE__ */ o("div", {
 						className: "react-pic-gallery__caption",
-						children: p ? p($) : q.caption
+						children: p ? p(Z) : U.caption
 					})
 				]
 			})
@@ -378,28 +341,28 @@ function S({ images: e, index: u, onIndexChange: d, renderActions: f, renderCapt
 }
 //#endregion
 //#region src/lib/PicGallery.tsx
-function C({ images: e, columns: t, rowHeight: n, className: r, galleryClassName: i, style: c, renderActions: l, renderCaption: u, renderControls: f, showCounter: p, showNavigation: m }) {
+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(d, {
+		children: [/* @__PURE__ */ o(f, {
 			images: e,
 			columns: t,
 			rowHeight: n,
 			className: i,
 			onImageClick: g
-		}), /* @__PURE__ */ o(S, {
+		}), /* @__PURE__ */ o(E, {
 			images: e,
 			index: h,
 			onIndexChange: g,
 			renderActions: l,
 			renderCaption: u,
-			renderControls: f,
+			renderControls: d,
 			showCounter: p,
 			showNavigation: m
 		})]
 	});
 }
 //#endregion
-export { d as Gallery, S as Lightbox, C as PicGallery, C as default };
+export { f as Gallery, E as Lightbox, D as PicGallery, D 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:100%;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{width:min(100%,90rem);height:min(100%,54rem);min-height:0;animation:react-pic-gallery-rise-in var(--gallery-motion) ease both;grid-template-rows:auto minmax(0,1fr) auto;display:grid}.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;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;transform:translateY(-1px)}.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;place-items:center;min-height:0;padding:.75rem;display:grid;position:relative}.react-pic-gallery__viewport--has-navigation{padding-inline:3.5rem}.react-pic-gallery__lightbox-image{pointer-events:none;border-radius:var(--gallery-radius);width:min(100%,82rem);min-width:0;height:100%;min-height:0;animation:react-pic-gallery-image-in var(--gallery-motion) ease both;background:0 0;place-items:center;display:grid;overflow:visible}.react-pic-gallery__lightbox-image .react-pic-gallery__image-element{pointer-events:auto;touch-action:none;border-radius:inherit;object-fit:contain;background:0 0;width:auto;max-width:100%;height:auto;max-height:100%}.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:hover,.react-pic-gallery__control--next:hover{transform:translateY(calc(-50% - 1px))}.react-pic-gallery__control--previous{left:0}.react-pic-gallery__control--next{right:0}.react-pic-gallery__caption{color:#cbd5e1;text-align:center;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}.react-pic-gallery__lightbox-content{height:100%}.react-pic-gallery__viewport{padding-inline:.25rem}.react-pic-gallery__viewport--has-navigation{padding-inline:2.75rem}.react-pic-gallery__control--previous{left:-.25rem}.react-pic-gallery__control--next{right:-.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__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}}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pic-gallery",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Small, accessible React image gallery and lightbox.",
   "author": "marcelrsoub",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "dev:docs": "astro dev --config docs-site/astro.config.mjs",
     "build:docs": "astro build --config docs-site/astro.config.mjs",
     "preview:docs": "astro preview --config docs-site/astro.config.mjs",
-    "github-pages": "npm run build:docs && gh-pages -d build",
+    "github-pages": "npm run build:docs && gh-pages -d build --dotfiles",
     "prepack": "npm run build"
   },
   "devDependencies": {