react-pic-gallery 2.0.2 → 2.1.0

package/dist/react-pic-gallery.js

@@ -2,40 +2,62 @@ 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, srcSet: t, sizes: r, alt: i, className: s = "", imageClassName: u = "", style: d, imageStyle: f, onAnimationEnd: p, onClick: m, eager: h = !1, objectFit: g = "cover", width: _, height: v }) {
+	let y = a(null), b = JSON.stringify([
+		e,
+		t ?? null,
+		r ?? null
+	]), [x, S] = o({
+		sourceKey: b,
+		status: "loading"
+	}), C = x.sourceKey === b ? x.status : "loading";
 	return n(() => {
-		v("loading");
-		let e = g.current;
-		e?.complete && v(e.naturalWidth > 0 ? "loaded" : "error");
-	}, [e]), /* @__PURE__ */ l("span", {
-		className: `react-pic-gallery__image ${r}`.trim(),
-		style: s,
-		"aria-busy": _ === "loading",
-		onAnimationEnd: d,
+		S({
+			sourceKey: b,
+			status: "loading"
+		});
+		let e = y.current;
+		e?.complete && S({
+			sourceKey: b,
+			status: e.naturalWidth > 0 ? "loaded" : "error"
+		});
+	}, [b]), /* @__PURE__ */ l("span", {
+		className: `react-pic-gallery__image ${s}`.trim(),
+		style: d,
+		"aria-busy": C === "loading",
+		onAnimationEnd: p,
+		onClick: m,
 		children: [
 			/* @__PURE__ */ c("img", {
-				ref: g,
+				ref: y,
+				sizes: r,
+				srcSet: t,
 				src: e,
-				alt: t,
-				className: `react-pic-gallery__image-element ${i}`.trim(),
+				alt: i,
+				className: `react-pic-gallery__image-element ${u}`.trim(),
 				style: {
-					objectFit: p,
-					...u
+					objectFit: g,
+					...f
 				},
-				loading: f ? "eager" : "lazy",
+				loading: h ? "eager" : "lazy",
 				decoding: "async",
-				width: m,
-				height: h,
-				onLoad: () => v("loaded"),
-				onError: () => v("error")
+				width: _,
+				height: v,
+				onLoad: () => S({
+					sourceKey: b,
+					status: "loaded"
+				}),
+				onError: () => S({
+					sourceKey: b,
+					status: "error"
+				})
 			}),
-			_ === "loading" && /* @__PURE__ */ c("span", {
+			C === "loading" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-loader",
 				role: "progressbar",
 				"aria-label": "Loading image"
 			}),
-			_ === "error" && /* @__PURE__ */ c("span", {
+			C === "error" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-error",
 				role: "status",
 				children: "Unable to load image"
@@ -43,15 +65,235 @@ 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/imageSources.ts
+function _(e) {
+	return {
+		src: e.src,
+		srcSet: e.srcSet,
+		sizes: e.sizes
+	};
+}
+function v(e) {
+	return e.thumbnailSrc === void 0 && e.thumbnailSrcSet === void 0 ? _(e) : {
+		src: e.thumbnailSrc ?? e.src,
+		srcSet: e.thumbnailSrcSet,
+		sizes: e.thumbnailSizes
+	};
+}
+function y(e) {
+	return JSON.stringify([
+		e.src,
+		e.srcSet ?? null,
+		e.sizes ?? null
+	]);
+}
+//#endregion
+//#region src/lib/useAdjacentImagePreload.ts
+var b = 32, x = /* @__PURE__ */ new Map();
+function S(e) {
+	e.image &&= (e.image.removeEventListener("load", e.onLoad), e.image.removeEventListener("error", e.onError), null);
+}
+function C(e) {
+	S(e), x.get(e.key) === e && x.delete(e.key);
+}
+function w() {
+	for (; x.size >= b;) {
+		let e = [...x.values()].find((e) => e.owners.size === 0);
+		if (!e) return !1;
+		C(e);
+	}
+	return !0;
+}
+function T(e) {
+	x.delete(e.key), x.set(e.key, e);
+}
+function E(e, t) {
+	if (!e.src.trim()) return null;
+	let n = y(e), r = x.get(n);
+	if (r) return r.owners.add(t), T(r), r;
+	if (typeof Image > "u" || !w()) return null;
+	let i = new Image(), a = {
+		key: n,
+		status: "pending",
+		image: i,
+		owners: /* @__PURE__ */ new Set([t]),
+		onLoad: () => {},
+		onError: () => {}
+	};
+	a.onLoad = () => {
+		x.get(n) === a && (a.status = "loaded", S(a));
+	}, a.onError = () => {
+		x.get(n) === a && C(a);
+	}, x.set(n, a), i.addEventListener("load", a.onLoad), i.addEventListener("error", a.onError), i.fetchPriority = "low";
+	try {
+		e.sizes !== void 0 && (i.sizes = e.sizes), e.srcSet !== void 0 && (i.srcset = e.srcSet), i.src = e.src;
+	} catch {
+		C(a);
+	}
+	return a;
+}
+function D(e, t) {
+	e.owners.delete(t), e.status === "pending" && e.owners.size === 0 && C(e);
+}
+function O(e, t, r) {
+	n(() => {
+		if (!r || e.length < 2 || t < 0 || t >= e.length) return;
+		let n = Symbol("adjacent-image-preload"), i = /* @__PURE__ */ new Map();
+		for (let n of [t - 1, t + 1]) {
+			if (n < 0 || n >= e.length) continue;
+			let t = _(e[n]);
+			i.set(y(t), t);
+		}
+		let a = [...i.values()].map((e) => E(e, n)).filter((e) => e !== null);
+		return () => {
+			a.forEach((e) => D(e, n));
+		};
+	}, [
+		r,
+		e,
+		t
+	]);
+}
+//#endregion
+//#region src/lib/Carousel.tsx
+function k(e) {
+	let { images: t, index: n, navigation: r, renderActions: i, renderCaption: a, renderControls: o, showCounter: u = !0, showNavigation: f = !0, preloadAdjacent: v = !0, close: y, onEmptyAreaClick: b, onImageClick: x, className: S } = e, C = t[n];
+	O(t, n, v);
+	let w = C ? _(C) : void 0, T = {
+		image: C,
+		index: n,
+		count: t.length,
+		close: y ?? (() => {}),
+		next: r.next,
+		previous: r.previous,
+		canGoNext: n < t.length - 1,
+		canGoPrevious: n > 0
+	}, E = f && t.length > 1, D = f && T.canGoPrevious, k = f && T.canGoNext;
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("p", {
+		className: "react-pic-gallery__sr-only",
+		"aria-live": "polite",
+		children: [
+			C.alt,
+			", image ",
+			n + 1,
+			" of ",
+			t.length
+		]
+	}), /* @__PURE__ */ l("div", {
+		className: g("react-pic-gallery__lightbox-content", S),
+		children: [
+			o ? /* @__PURE__ */ c("div", {
+				className: "react-pic-gallery__custom-controls",
+				children: o(T)
+			}) : /* @__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?.(T)]
+				}), y && /* @__PURE__ */ c("button", {
+					className: "react-pic-gallery__control",
+					type: "button",
+					onClick: y,
+					"aria-label": "Close image viewer",
+					children: /* @__PURE__ */ c(m, {})
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: g("react-pic-gallery__viewport", E ? "react-pic-gallery__viewport--has-navigation" : void 0),
+				onMouseDown: (e) => {
+					e.target === e.currentTarget && b?.();
+				},
+				onClick: r.handleViewportClick,
+				onTouchCancel: r.handleTouchCancel,
+				onTouchEnd: r.handleTouchEnd,
+				onTouchStart: r.handleTouchStart,
+				children: [
+					D && /* @__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, {
+						sizes: w?.sizes,
+						srcSet: w?.srcSet,
+						src: w?.src ?? "",
+						alt: C.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: x ? (e) => {
+							f && t.length > 1 && p(e.clientX, e.currentTarget.parentElement) !== null || x();
+						} : void 0
+					}, w ? JSON.stringify([
+						w.src,
+						w.srcSet,
+						w.sizes
+					]) : n),
+					k && /* @__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 || C.caption) && /* @__PURE__ */ c("div", {
+				className: "react-pic-gallery__caption",
+				children: a ? a(T) : C.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 A = 3 / 2;
+function j(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 : A;
 }
-function m(e, t, n, r) {
+function M(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(j), 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 +312,121 @@ function m(e, t, n, r) {
 	return c;
 }
 //#endregion
+//#region src/lib/useCarouselNavigation.ts
+function N(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 P = 3, F = 192, I = 12, L = typeof window > "u" ? n : i;
+function R(e) {
+	let t = Number.parseFloat(e);
+	return Number.isFinite(t) && t >= 0 ? t : null;
+}
+function z(e) {
+	return Number.isFinite(e) && e > 0;
+}
+function B({ images: e, onImageClick: t, renderCaption: n, showCounter: r, showNavigation: i, preloadAdjacent: a }) {
+	let [s, l] = o(0), u = Math.max(0, Math.min(s, e.length - 1)), d = N({
+		images: e,
+		index: e.length > 0 ? u : null,
+		onIndexChange: (e) => {
+			e !== null && l(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: d.handleKeyDown,
+		children: /* @__PURE__ */ c(k, {
+			images: e,
+			index: u,
+			navigation: d,
+			renderCaption: n,
+			showCounter: r,
+			showNavigation: i,
+			preloadAdjacent: a,
+			onImageClick: () => t?.(u)
+		})
+	});
+}
+function V({ images: e, onImageClick: n, layout: r = "grid", appearance: i = "framed", columns: u, rowHeight: f, className: p = "", style: m, renderCaption: h, showCounter: g, showNavigation: _, preloadAdjacent: y = !0 }) {
+	let b = a([]), x = a(null), S = a(null), [C, w] = o(0), [T, E] = 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 = {
-		...p,
-		...r === "grid" && i !== void 0 && Number.isFinite(i) && i >= 1 ? { gridTemplateColumns: `repeat(${E}, minmax(0, 1fr))` } : {},
-		...k ? { "--gallery-row-height": k } : {}
+		rowHeight: F,
+		gap: I
+	}), D = u !== void 0 && Number.isFinite(u) && u >= 1 ? Math.floor(u) : P, O = e.length - 1, k = Math.min(C, Math.max(O, 0)), A = typeof f == "number" ? `${f}px` : f, j = {
+		...m,
+		...r === "grid" && u !== void 0 && Number.isFinite(u) && u >= 1 ? { gridTemplateColumns: `repeat(${D}, minmax(0, 1fr))` } : {},
+		...A ? { "--gallery-row-height": A } : {}
 	};
-	v(() => {
+	L(() => {
 		if (r !== "justified") return;
-		let e = b.current, t = x.current;
+		let e = x.current, t = S.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(), r = window.getComputedStyle(e), i = (R(r.paddingLeft) ?? 0) + (R(r.paddingRight) ?? 0), a = (R(r.borderLeftWidth) ?? 0) + (R(r.borderRightWidth) ?? 0), o = [n.width - i - a, e.clientWidth - i].find(z) ?? (z(window.innerWidth) ? window.innerWidth : 1024), s = t.getBoundingClientRect(), c = Number.parseFloat(window.getComputedStyle(t).width), l = typeof f == "number" ? f : typeof f == "string" && /^\s*\d+(?:\.\d+)?px\s*$/.test(f) ? Number.parseFloat(f) : null, u = l !== null && z(l) ? l : F, d = z(s.height) ? s.height : u, p = [c, s.width].find((e) => Number.isFinite(e) && e >= 0) ?? I;
+			E((e) => {
 				let t = {
-					width: n,
-					rowHeight: r.height || a,
-					gap: Number.isFinite(i) ? i : r.width || _
+					width: o,
+					rowHeight: d,
+					gap: p
 				};
 				return e.width === t.width && e.rowHeight === t.rowHeight && e.gap === t.gap ? e : t;
 			});
@@ -103,19 +437,20 @@ function y({ images: e, onImageClick: n, layout: r = "grid", columns: i, rowHeig
 			i?.disconnect(), window.removeEventListener("resize", n);
 		};
 	}, [
+		i,
 		r,
-		u,
-		k
+		f,
+		A
 	]);
-	let j = t((e) => {
-		C(e), y.current[e]?.focus();
-	}, []), M = t((t, n) => {
-		let i = y.current[t];
+	let N = t((e) => {
+		w(e), b.current[e]?.focus();
+	}, []), V = t((t, n) => {
+		let i = b.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 (b.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,82 +459,95 @@ 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 b.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]), H = 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 = O;
 		else if (r === "grid") {
 			let r = {
 				ArrowRight: 1,
 				ArrowLeft: -1,
-				ArrowDown: E,
-				ArrowUp: -E
+				ArrowDown: D,
+				ArrowUp: -D
 			}[e.key];
 			if (r !== void 0) {
 				let e = t + r;
-				e >= 0 && e <= D && (n = e);
+				e >= 0 && e <= O && (n = e);
 			}
-		} else if (e.key === "ArrowRight" && t < D) n = t + 1;
+		} else if (e.key === "ArrowRight" && t < O) 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 = V(t, "down");
+		else if (e.key === "ArrowUp") n = V(t, "up");
 		else return;
-		n !== null && n !== t && (e.preventDefault(), j(n));
+		n !== null && n !== t && (e.preventDefault(), N(n));
 	}, [
-		E,
-		M,
 		D,
+		V,
+		O,
 		r,
-		j
-	]), P = (e, t, r = {}) => /* @__PURE__ */ c("button", {
-		className: `react-pic-gallery__tile ${r.className ?? ""}`.trim(),
-		type: "button",
-		disabled: !n,
-		tabIndex: t === O ? 0 : -1,
-		ref: (e) => {
-			y.current[t] = e;
-		},
-		style: r.style,
-		onKeyDown: (e) => N(e, t),
-		onClick: () => {
-			C(t), n?.(t);
-		},
-		"aria-label": `Open ${e.alt}`,
-		children: /* @__PURE__ */ c(d, {
-			src: e.thumbnailSrc ?? e.src,
-			alt: e.alt,
-			objectFit: "cover",
-			width: e.width,
-			height: e.height
-		})
-	}, e.id ?? `${e.src}-${t}`), F = r === "justified" ? m(e, w.width, w.rowHeight, w.gap) : [], I = Array(e.length);
-	return F.forEach((e) => {
+		N
+	]), U = (e, t, r = {}) => {
+		let i = v(e);
+		return /* @__PURE__ */ c("button", {
+			className: `react-pic-gallery__tile ${r.className ?? ""}`.trim(),
+			type: "button",
+			disabled: !n,
+			tabIndex: t === k ? 0 : -1,
+			ref: (e) => {
+				b.current[t] = e;
+			},
+			style: r.style,
+			onKeyDown: (e) => H(e, t),
+			onClick: () => {
+				w(t), n?.(t);
+			},
+			"aria-label": `Open ${e.alt}`,
+			children: /* @__PURE__ */ c(d, {
+				sizes: i.sizes,
+				srcSet: i.srcSet,
+				src: i.src,
+				alt: e.alt,
+				objectFit: "cover",
+				width: e.width,
+				height: e.height
+			})
+		}, e.id ?? `${e.src}-${t}`);
+	}, W = r === "justified" ? M(e, T.width, T.rowHeight, T.gap) : [], G = Array(e.length);
+	return W.forEach((e) => {
 		e.indices.forEach((t, n) => {
-			I[t] = {
+			G[t] = {
 				width: `${e.widths[n]}px`,
 				height: `${e.height}px`
 			};
 		});
 	}), /* @__PURE__ */ l("div", {
-		ref: b,
-		className: `react-pic-gallery__gallery react-pic-gallery__gallery--${r} ${r === "grid" ? "react-pic-gallery__grid" : ""} ${f}`.trim(),
-		style: A,
+		ref: x,
+		className: `react-pic-gallery__gallery react-pic-gallery__gallery--${r} react-pic-gallery__gallery--${i} ${r === "grid" ? "react-pic-gallery__grid" : ""} ${p}`.trim(),
+		style: j,
 		"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) => U(e, t)),
+			r === "carousel" && /* @__PURE__ */ c(B, {
+				images: e,
+				onImageClick: n,
+				renderCaption: h,
+				showCounter: g,
+				showNavigation: _,
+				preloadAdjacent: y
+			}),
+			r === "justified" && /* @__PURE__ */ l(s, { children: [e.map((e, t) => U(e, t, {
 				className: "react-pic-gallery__tile--justified",
-				style: I[t]
+				style: G[t]
 			})), /* @__PURE__ */ c("span", {
-				ref: x,
+				ref: S,
 				className: "react-pic-gallery__row-height-probe",
 				"aria-hidden": "true"
 			})] }),
@@ -209,278 +557,151 @@ 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 U(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 H = e(V), U = /* @__PURE__ */ new Set(), W = null;
+function G(e) {
+	if (!U.has(e)) {
+		if (U.size === 0) {
 			let e = document.body, t = window.innerWidth - document.documentElement.clientWidth, n = Number.parseFloat(window.getComputedStyle(e).paddingRight) || 0;
-			S = {
+			W = {
 				overflow: e.style.overflow,
 				paddingRight: e.style.paddingRight
 			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
 		}
-		x.add(e);
+		U.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 K(e) {
+	return U.delete(e), U.size > 0 || !W ? !1 : (document.body.style.overflow = W.overflow, document.body.style.paddingRight = W.paddingRight, W = null, !0);
 }
-function A(e) {
+function q(e) {
 	let t = e.trim();
 	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
 }
-function j(e) {
+function J(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" })
-	});
-}
-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(" ");
+	return Math.max(...n.map((e, t) => q(e) + q(r[t % r.length] ?? "0s")), 0);
 }
-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 Y({ images: e, index: i, onIndexChange: s, renderActions: d, renderCaption: f, renderControls: p, showCounter: m = !0, showNavigation: h = !0, preloadAdjacent: _ = !0, className: v }) {
+	let y = a(null), b = a(s), x = a(null), S = a(null), C = a(null), w = a(!1), T = a({}), E = r(), [D, O] = o(!1), A = i !== null && i >= 0 && i < e.length ? i : null, j = A === null ? void 0 : e[A];
+	b.current = s, C.current = A;
+	let M = N({
+		images: e,
+		index: A,
+		onIndexChange: s,
+		disabled: D,
+		showNavigation: h && !p
+	}), P = t(() => {
+		x.current !== null && (window.clearTimeout(x.current), x.current = null), S.current = null;
+	}, []), F = t(() => {
+		let e = C.current;
+		if (e !== null && S.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);
+			S.current = { index: e }, O(!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(() => {
+	}, []), I = t((e) => {
+		e.preventDefault(), F();
+	}, [F]), L = 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;
 		if (e) {
-			if (S.current !== e.index) {
-				G(), C.current = !1, B(!1);
+			if (C.current !== e.index) {
+				P(), O(!1);
 				return;
 			}
-			G(), C.current = !1, B(!1), y.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;
+			P(), O(!1), b.current(null);
 		}
-		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);
+	}, [P]), R = t((e) => {
+		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && L();
+	}, [L]), z = t(() => {
+		w.current || (P(), O(!1), C.current !== null && b.current(null));
+	}, [P]);
+	return n(() => {
+		let e = S.current;
+		e && A !== e.index && (P(), O(!1));
+	}, [A, P]), n(() => {
+		if (!D || !S.current || !y.current) return;
+		let e = J(y.current);
+		return x.current = window.setTimeout(L, e), () => {
+			x.current !== null && (window.clearTimeout(x.current), x.current = null);
 		};
-	}, [Z, z]), n(() => {
-		if (U === null) return;
-		let e = v.current;
+	}, [L, D]), 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 G(T.current), e.open || e.showModal(), () => {
+			P(), w.current = !0, e.open && e.close(), w.current = !1, K(T.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, P]), A === null || !j || typeof document > "u" ? null : u(/* @__PURE__ */ l("dialog", {
+		ref: y,
+		className: g("react-pic-gallery__lightbox", D ? "react-pic-gallery__lightbox--closing" : void 0, v),
+		"aria-labelledby": E,
+		onAnimationEnd: R,
+		onClose: z,
+		onMouseDown: (e) => {
+			e.target === e.currentTarget && F();
+		},
+		onCancel: I,
+		onKeyDown: M.handleKeyDown,
+		children: [/* @__PURE__ */ c("h2", {
+			className: "react-pic-gallery__sr-only",
+			id: E,
+			children: "Image viewer"
+		}), /* @__PURE__ */ c(k, {
+			images: e,
+			index: A,
+			navigation: M,
+			renderActions: d,
+			renderCaption: f,
+			renderControls: p,
+			showCounter: m,
+			showNavigation: h && !p,
+			preloadAdjacent: _,
+			close: F,
+			onEmptyAreaClick: F
+		})]
 	}), document.body);
 }
 //#endregion
 //#region src/lib/PicGallery.tsx
-function I({ images: e, layout: t, columns: n, rowHeight: r, className: i, galleryClassName: a, style: s, renderActions: u, renderCaption: d, renderControls: f, showCounter: p, showNavigation: m }) {
-	let [h, g] = o(null);
+function X({ images: e, layout: t, appearance: n, columns: r, rowHeight: i, className: a, galleryClassName: s, style: u, renderActions: d, renderCaption: f, renderControls: p, showCounter: m, showNavigation: h, preloadAdjacent: g }) {
+	let [_, v] = o(null);
 	return /* @__PURE__ */ l("div", {
-		className: `react-pic-gallery ${i ?? ""}`.trim(),
-		style: s,
-		children: [/* @__PURE__ */ c(b, {
+		className: `react-pic-gallery ${a ?? ""}`.trim(),
+		style: u,
+		children: [/* @__PURE__ */ c(H, {
 			images: e,
 			layout: t,
-			columns: n,
-			rowHeight: r,
-			className: a,
-			onImageClick: g
-		}), /* @__PURE__ */ c(F, {
+			appearance: n,
+			columns: r,
+			rowHeight: i,
+			className: s,
+			onImageClick: v,
+			renderCaption: f,
+			showCounter: m,
+			showNavigation: h,
+			preloadAdjacent: g
+		}), /* @__PURE__ */ c(Y, {
 			images: e,
-			index: h,
-			onIndexChange: g,
-			renderActions: u,
-			renderCaption: d,
-			renderControls: f,
-			showCounter: p,
-			showNavigation: m
+			index: _,
+			onIndexChange: v,
+			renderActions: d,
+			renderCaption: f,
+			renderControls: p,
+			showCounter: m,
+			showNavigation: h,
+			preloadAdjacent: g
 		})]
 	});
 }
 //#endregion
-export { b as Gallery, F as Lightbox, I as PicGallery, I as default };
+export { H as Gallery, Y as Lightbox, X as PicGallery, X as default };