react-pic-gallery 1.5.16 → 2.0.0

package/dist/react-pic-gallery.js

@@ -0,0 +1,405 @@
+import { memo as e, useCallback as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+//#region src/lib/Image.tsx
+function l({ src: e, alt: t, className: r = "", imageClassName: c = "", style: l, imageStyle: u, onAnimationEnd: d, eager: f = !1, objectFit: p = "cover", width: m, height: h }) {
+	let g = i(null), [_, v] = a("loading");
+	return n(() => {
+		v("loading");
+		let e = g.current;
+		e?.complete && v(e.naturalWidth > 0 ? "loaded" : "error");
+	}, [e]), /* @__PURE__ */ s("span", {
+		className: `react-pic-gallery__image ${r}`.trim(),
+		style: l,
+		"aria-busy": _ === "loading",
+		onAnimationEnd: d,
+		children: [
+			/* @__PURE__ */ o("img", {
+				ref: g,
+				src: e,
+				alt: t,
+				className: `react-pic-gallery__image-element ${c}`.trim(),
+				style: {
+					objectFit: p,
+					...u
+				},
+				loading: f ? "eager" : "lazy",
+				decoding: "async",
+				width: m,
+				height: h,
+				onLoad: () => v("loaded"),
+				onError: () => v("error")
+			}),
+			_ === "loading" && /* @__PURE__ */ o("span", {
+				className: "react-pic-gallery__image-loader",
+				role: "progressbar",
+				"aria-label": "Loading image"
+			}),
+			_ === "error" && /* @__PURE__ */ o("span", {
+				className: "react-pic-gallery__image-error",
+				role: "status",
+				children: "Unable to load image"
+			})
+		]
+	});
+}
+//#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 } : {}
+	};
+	return /* @__PURE__ */ o("div", {
+		className: `react-pic-gallery__grid ${i}`.trim(),
+		style: c,
+		"data-testid": "react-pic-gallery-grid",
+		children: e.map((e, n) => /* @__PURE__ */ o("button", {
+			className: "react-pic-gallery__tile",
+			type: "button",
+			disabled: !t,
+			onClick: () => t?.(n),
+			"aria-label": `Open ${e.alt}`,
+			children: /* @__PURE__ */ o(l, {
+				src: e.thumbnailSrc ?? e.src,
+				alt: e.alt,
+				objectFit: "cover",
+				width: e.width,
+				height: e.height
+			})
+		}, e.id ?? `${e.src}-${n}`))
+	});
+}
+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);
+}
+function ee(e) {
+	if (!f.has(e)) {
+		if (f.size === 0) {
+			let e = document.body, t = window.innerWidth - document.documentElement.clientWidth, n = Number.parseFloat(window.getComputedStyle(e).paddingRight) || 0;
+			p = {
+				overflow: e.style.overflow,
+				paddingRight: e.style.paddingRight
+			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
+		}
+		f.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 y(e) {
+	let t = e.trim();
+	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
+}
+function ne(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);
+}
+function re() {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ o("path", { d: "M6 6l12 12M18 6L6 18" })
+	});
+}
+function b({ direction: e }) {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ o("path", { d: e === "left" ? "M14.5 5l-7 7 7 7" : "M9.5 5l7 7-7 7" })
+	});
+}
+function x(...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) {
+			if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+				T.current(null);
+				return;
+			}
+			D.current = { index: e }, k.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;
+		if (e) {
+			if (O.current !== e.index) {
+				J(), k.current = !1, z(!1);
+				return;
+			}
+			J(), k.current = !1, z(!1), T.current(null);
+		}
+	}, [J]), ue = 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;
+			return;
+		}
+		let t = e.touches[0];
+		N.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;
+		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) => {
+		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]);
+	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);
+		};
+	}, [Q, R]), n(() => {
+		if (K === null) return;
+		let e = w.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();
+		};
+	}, [K !== null, J]), K === null || !q || typeof document > "u") return null;
+	let $ = {
+		image: q,
+		index: K,
+		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();
+	};
+	return c(/* @__PURE__ */ s("dialog", {
+		ref: w,
+		className: x("react-pic-gallery__lightbox", R ? "react-pic-gallery__lightbox--closing" : void 0, ie),
+		"aria-labelledby": L,
+		onAnimationEnd: ve,
+		onClose: ye,
+		onMouseDown: Ce,
+		onCancel: le,
+		onKeyDown: ue,
+		children: [
+			/* @__PURE__ */ o("h2", {
+				className: "react-pic-gallery__sr-only",
+				id: L,
+				children: "Image viewer"
+			}),
+			/* @__PURE__ */ s("p", {
+				className: "react-pic-gallery__sr-only",
+				"aria-live": "polite",
+				children: [
+					q.alt,
+					", image ",
+					K + 1,
+					" of ",
+					e.length
+				]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "react-pic-gallery__lightbox-content",
+				children: [
+					y ? /* @__PURE__ */ o("div", {
+						className: "react-pic-gallery__custom-controls",
+						children: y($)
+					}) : /* @__PURE__ */ s("div", {
+						className: "react-pic-gallery__toolbar",
+						children: [/* @__PURE__ */ s("div", {
+							className: "react-pic-gallery__toolbar-actions",
+							children: [S && /* @__PURE__ */ s("span", {
+								"aria-live": "polite",
+								children: [
+									K + 1,
+									" / ",
+									e.length
+								]
+							}), f?.($)]
+						}), /* @__PURE__ */ o("button", {
+							className: "react-pic-gallery__control",
+							type: "button",
+							onClick: Y,
+							"aria-label": "Close image viewer",
+							children: /* @__PURE__ */ o(re, {})
+						})]
+					}),
+					/* @__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,
+						children: [
+							be && /* @__PURE__ */ o("button", {
+								className: "react-pic-gallery__control react-pic-gallery__control--previous",
+								type: "button",
+								onClick: X,
+								"aria-label": "Previous image",
+								children: /* @__PURE__ */ o(b, { direction: "left" })
+							}),
+							/* @__PURE__ */ o(l, {
+								src: q.src,
+								alt: q.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: "react-pic-gallery__control react-pic-gallery__control--next",
+								type: "button",
+								onClick: Z,
+								"aria-label": "Next image",
+								children: /* @__PURE__ */ o(b, { direction: "right" })
+							})
+						]
+					}),
+					(p || q.caption) && /* @__PURE__ */ o("div", {
+						className: "react-pic-gallery__caption",
+						children: p ? p($) : q.caption
+					})
+				]
+			})
+		]
+	}), document.body);
+}
+//#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 }) {
+	let [h, g] = a(null);
+	return /* @__PURE__ */ s("div", {
+		className: `react-pic-gallery ${r ?? ""}`.trim(),
+		style: c,
+		children: [/* @__PURE__ */ o(d, {
+			images: e,
+			columns: t,
+			rowHeight: n,
+			className: i,
+			onImageClick: g
+		}), /* @__PURE__ */ o(S, {
+			images: e,
+			index: h,
+			onIndexChange: g,
+			renderActions: l,
+			renderCaption: u,
+			renderControls: f,
+			showCounter: p,
+			showNavigation: m
+		})]
+	});
+}
+//#endregion
+export { d as Gallery, S as Lightbox, C as PicGallery, C as default };

package/dist/styles.css

@@ -0,0 +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}}
+/*$vite$:1*/

package/dist/types.d.ts

@@ -0,0 +1,53 @@
+import { CSSProperties, ReactNode } from 'react';
+export type GalleryImage = {
+    id?: string;
+    src: string;
+    thumbnailSrc?: string;
+    alt: string;
+    caption?: ReactNode;
+    width?: number;
+    height?: number;
+};
+export type LightboxContext<T extends GalleryImage = GalleryImage> = {
+    image: T;
+    index: number;
+    count: number;
+    close: () => void;
+    next: () => void;
+    previous: () => void;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+};
+export type LightboxRenderer<T extends GalleryImage = GalleryImage> = (context: LightboxContext<T>) => ReactNode;
+export type GalleryProps<T extends GalleryImage = GalleryImage> = {
+    images: readonly T[];
+    onImageClick?: (index: number) => void;
+    columns?: number;
+    rowHeight?: CSSProperties['height'];
+    className?: string;
+    style?: CSSProperties;
+};
+export type LightboxProps<T extends GalleryImage = GalleryImage> = {
+    images: readonly T[];
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+    renderActions?: LightboxRenderer<T>;
+    renderCaption?: LightboxRenderer<T>;
+    renderControls?: LightboxRenderer<T>;
+    showCounter?: boolean;
+    showNavigation?: boolean;
+    className?: string;
+};
+export type PicGalleryProps<T extends GalleryImage = GalleryImage> = {
+    images: readonly T[];
+    columns?: number;
+    rowHeight?: CSSProperties['height'];
+    className?: string;
+    galleryClassName?: string;
+    style?: CSSProperties;
+    renderActions?: LightboxRenderer<T>;
+    renderCaption?: LightboxRenderer<T>;
+    renderControls?: LightboxRenderer<T>;
+    showCounter?: boolean;
+    showNavigation?: boolean;
+};

package/package.json

@@ -1,51 +1,65 @@
-{
-  "name": "react-pic-gallery",
-  "version": "1.5.16",
-  "author": "marcelrsoub",
-  "license": "MIT",
-  "repository": "marcelrsoub/react-pic-gallery",
-  "main": "./dist/react-pic-gallery.umd.js",
-  "module": "./dist/react-pic-gallery.es.js",
-  "types": "./dist/lib/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/react-pic-gallery.es.js",
-      "require": "./dist/react-pic-gallery.umd.js"
-    }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite --config vite.github-pages.config.ts preview",
-    "build-example": "vite --config vite.github-pages.config.ts build",
-    "github-pages": "vite --config vite.github-pages.config.ts build && gh-pages -d build",
-    "publish-patch": "yarn run build && standard-version --release-as patch && git push --follow-tags origin main && npm publish",
-    "publish-minor": "yarn run build && standard-version --release-as minor && git push --follow-tags origin main && npm publish",
-    "publish-major": "yarn run build && standard-version --release-as major && git push --follow-tags origin main && npm publish"
-  },
-  "dependencies": {
-    "react-zoom-pan-pinch": "^2.1.3"
-  },
-  "devDependencies": {
-    "@types/node": "^16.11.12",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "@types/react-syntax-highlighter": "^13.5.2",
-    "@vitejs/plugin-react": "^1.0.7",
-    "gh-pages": "^3.2.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-syntax-highlighter": "^15.4.5",
-    "standard-version": "^9.3.2",
-    "typescript": "^4.4.4",
-    "vite": "^2.7.0",
-    "vite-plugin-dts": "^1.2.0"
-  },
-  "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-  }
-}
+{
+  "name": "react-pic-gallery",
+  "version": "2.0.0",
+  "description": "Small, accessible React image gallery and lightbox.",
+  "author": "marcelrsoub",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marcelrsoub/react-pic-gallery.git"
+  },
+  "type": "module",
+  "module": "./dist/react-pic-gallery.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-pic-gallery.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "dev": "npm run dev:docs",
+    "dev:library": "vite",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "npm run preview:docs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build:demo": "npm run build:docs",
+    "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",
+    "prepack": "npm run build"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^6.0.6",
+    "@astrojs/starlight": "^0.42.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "astro": "^7.3.3",
+    "gh-pages": "^6.3.0",
+    "jsdom": "^30.1.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.1",
+    "vitest": "^5.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  }
+}

package/CHANGELOG.md

@@ -1,23 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-### [1.5.16](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.15...v1.5.16) (2022-05-29)
-
-### [1.5.15](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.14...v1.5.15) (2022-03-23)
-
-### [1.5.14](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.13...v1.5.14) (2022-03-23)
-
-### [1.5.13](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.12...v1.5.13) (2022-03-23)
-
-### [1.5.12](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.11...v1.5.12) (2022-03-23)
-
-### [1.5.11](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.10...v1.5.11) (2022-03-23)
-
-### [1.5.10](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.9...v1.5.10) (2021-12-30)
-
-### [1.5.9](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.8...v1.5.9) (2021-12-22)
-
-### [1.5.8](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.5.7...v1.5.8) (2021-12-16)
-
-### [1.5.7](https://github.com/marcelrsoub/react-pic-gallery/compare/v1.3.9...v1.5.7) (2021-12-16)

package/dist/lib/CircularLoading/CircularLoading.d.ts

@@ -1 +0,0 @@
-export default function CircularLoading(): JSX.Element;

package/dist/lib/ImgGallery/ImgGallery.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ImageObject, Options } from '../models/models';
-declare function ImgGallery(props: {
-    options?: Options;
-    imgList: ImageObject[];
-    onOpen: (index_of_image: number) => void;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ImgGallery>;
-export default _default;

package/dist/lib/ImgLazyLoading.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Options } from './models/models';
-declare const ImgLazyLoading: (props: {
-    imgSrc: string;
-    id?: string;
-    style: React.CSSProperties;
-    options?: Options;
-    onClick?: () => void;
-    lightboxMode?: boolean;
-}) => JSX.Element;
-export default ImgLazyLoading;

package/dist/lib/ImgLightbox/ImgLightbox.d.ts

@@ -1,17 +0,0 @@
-import { ImageObject, Options } from '../models/models';
-declare const ImgLightbox: (props: {
-    imgList: ImageObject[];
-    open: boolean;
-    currentImgIndex: number;
-    options?: Options | undefined;
-    onClose: () => void;
-    topCustomContent?: ((props2: {
-        imgObject: ImageObject;
-        closeLightbox: () => void;
-    }) => JSX.Element) | undefined;
-    bottomCustomContent?: ((props2: {
-        imgObject: ImageObject;
-        closeLightbox: () => void;
-    }) => JSX.Element) | undefined;
-}) => JSX.Element;
-export default ImgLightbox;