react-pic-gallery 1.5.16 → 2.0.1

package/dist/react-pic-gallery.js

@@ -0,0 +1,368 @@
+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
+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 ${c}`.trim(),
+		style: x,
+		"data-testid": "react-pic-gallery-grid",
+		children: e.map((e, t) => /* @__PURE__ */ o("button", {
+			className: "react-pic-gallery__tile",
+			type: "button",
+			disabled: !n,
+			tabIndex: t === _ ? 0 : -1,
+			ref: (e) => {
+				f.current[t] = e;
+			},
+			onKeyDown: (e) => y(e, t),
+			onClick: () => {
+				m(t), n?.(t);
+			},
+			"aria-label": `Open ${e.alt}`,
+			children: /* @__PURE__ */ o(l, {
+				src: e.thumbnailSrc ?? e.src,
+				alt: e.alt,
+				objectFit: "cover",
+				width: e.width,
+				height: e.height
+			})
+		}, e.id ?? `${e.src}-${t}`))
+	});
+}
+var f = e(d), p = /* @__PURE__ */ new Set(), m = null, h = "a[href], button, input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", g = "input, select, textarea, [role=\"combobox\"], [role=\"menu\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"tab\"]", _ = "(max-width: 600px), (pointer: coarse)", v = .3;
+function y(e) {
+	return e instanceof Element && e.closest(h) !== null;
+}
+function b(e) {
+	if (!p.has(e)) {
+		if (p.size === 0) {
+			let e = document.body, t = window.innerWidth - document.documentElement.clientWidth, n = Number.parseFloat(window.getComputedStyle(e).paddingRight) || 0;
+			m = {
+				overflow: e.style.overflow,
+				paddingRight: e.style.paddingRight
+			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
+		}
+		p.add(e);
+	}
+}
+function x(e) {
+	return p.delete(e), p.size > 0 || !m ? !1 : (document.body.style.overflow = m.overflow, document.body.style.paddingRight = m.paddingRight, m = null, !0);
+}
+function S(e) {
+	let t = e.trim();
+	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
+}
+function ee(e) {
+	let t = window.getComputedStyle(e), n = t.animationDuration.split(","), r = t.animationDelay.split(",");
+	return Math.max(...n.map((e, t) => S(e) + S(r[t % r.length] ?? "0s")), 0);
+}
+function C() {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ o("path", { d: "M6 6l12 12M18 6L6 18" })
+	});
+}
+function w({ direction: e }) {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ o("path", { d: e === "left" ? "M14.5 5l-7 7 7 7" : "M9.5 5l7 7-7 7" })
+	});
+}
+function T(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function E({ images: e, index: u, onIndexChange: d, renderActions: f, renderCaption: p, renderControls: m, showCounter: h = !0, showNavigation: S = !0, className: E }) {
+	let D = i(null), O = i(d), k = i(null), A = i(null), j = i(null), M = i(!1), N = i(!1), P = i({}), F = i(e), I = i(null), L = r(), [R, z] = a(!1), [B, V] = a(null), H = u !== null && u >= 0 && u < e.length ? u : null, U = H === null ? void 0 : e[H];
+	O.current = d, j.current = H, M.current = R, F.current = e;
+	let W = t(() => {
+		k.current !== null && (window.clearTimeout(k.current), k.current = null), A.current = null;
+	}, []), G = t(() => {
+		let e = j.current;
+		if (e !== null && A.current === null) {
+			if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+				O.current(null);
+				return;
+			}
+			A.current = { index: e }, M.current = !0, z(!0);
+		}
+	}, []), K = t(() => {
+		let e = j.current;
+		!M.current && e !== null && e > 0 && O.current(e - 1);
+	}, []), q = t(() => {
+		let e = j.current;
+		!M.current && e !== null && e < F.current.length - 1 && O.current(e + 1);
+	}, []), J = t(() => {
+		let e = j.current;
+		M.current || e === null || e === 0 || (V("previous"), O.current(e - 1));
+	}, []), Y = t(() => {
+		let e = j.current;
+		M.current || e === null || e >= F.current.length - 1 || (V("next"), O.current(e + 1));
+	}, []), te = t((e) => {
+		e.preventDefault(), G();
+	}, [G]), X = t(() => {
+		let e = A.current;
+		if (e) {
+			if (j.current !== e.index) {
+				W(), M.current = !1, z(!1);
+				return;
+			}
+			W(), M.current = !1, z(!1), O.current(null);
+		}
+	}, [W]), ne = t((e) => {
+		if (e.defaultPrevented) return;
+		let t = e.target;
+		t instanceof HTMLElement && (t.isContentEditable || t.closest(g)) || (e.key === "ArrowLeft" ? (e.preventDefault(), K()) : e.key === "ArrowRight" && (e.preventDefault(), q()));
+	}, [q, K]), re = t((e) => {
+		if (e.touches.length !== 1 || y(e.target)) {
+			I.current = null;
+			return;
+		}
+		let t = e.touches[0];
+		I.current = {
+			x: t.clientX,
+			y: t.clientY
+		};
+	}, []), ie = t((e) => {
+		let t = I.current;
+		if (I.current = null, !t || e.changedTouches.length === 0) return;
+		let n = e.changedTouches[0], r = n.clientX - t.x, i = n.clientY - t.y, a = Math.abs(r);
+		a < 48 || a <= Math.abs(i) || (r < 0 ? Y() : J());
+	}, [Y, J]), ae = t(() => {
+		I.current = null;
+	}, []), oe = t((e) => {
+		e.target === e.currentTarget && V(null);
+	}, []), se = t((e) => {
+		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && X();
+	}, [X]), ce = t(() => {
+		N.current || (W(), M.current = !1, z(!1), j.current !== null && O.current(null));
+	}, [W]);
+	if (n(() => {
+		let e = A.current;
+		e && H !== e.index && (W(), M.current = !1, z(!1));
+	}, [H, W]), n(() => {
+		if (!R || !A.current || !D.current) return;
+		let e = ee(D.current);
+		return k.current = window.setTimeout(X, e), () => {
+			k.current !== null && (window.clearTimeout(k.current), k.current = null);
+		};
+	}, [X, R]), n(() => {
+		if (H === null) return;
+		let e = D.current;
+		if (!e) return;
+		let t = document.activeElement;
+		return b(P.current), e.open || e.showModal(), () => {
+			W(), N.current = !0, e.open && e.close(), N.current = !1, x(P.current) && t?.isConnected && t.focus();
+		};
+	}, [H !== null, W]), H === null || !U || typeof document > "u") return null;
+	let Z = {
+		image: U,
+		index: H,
+		count: e.length,
+		close: G,
+		next: q,
+		previous: K,
+		canGoNext: H < e.length - 1,
+		canGoPrevious: H > 0
+	}, le = S && !m && Z.canGoPrevious, ue = S && !m && Z.canGoNext, Q = S && !m && e.length > 1, $ = (e) => {
+		e.target === e.currentTarget && G();
+	};
+	return c(/* @__PURE__ */ s("dialog", {
+		ref: D,
+		className: T("react-pic-gallery__lightbox", R ? "react-pic-gallery__lightbox--closing" : void 0, E),
+		"aria-labelledby": L,
+		onAnimationEnd: se,
+		onClose: ce,
+		onMouseDown: $,
+		onCancel: te,
+		onKeyDown: ne,
+		children: [
+			/* @__PURE__ */ o("h2", {
+				className: "react-pic-gallery__sr-only",
+				id: L,
+				children: "Image viewer"
+			}),
+			/* @__PURE__ */ s("p", {
+				className: "react-pic-gallery__sr-only",
+				"aria-live": "polite",
+				children: [
+					U.alt,
+					", image ",
+					H + 1,
+					" of ",
+					e.length
+				]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "react-pic-gallery__lightbox-content",
+				children: [
+					m ? /* @__PURE__ */ o("div", {
+						className: "react-pic-gallery__custom-controls",
+						children: m(Z)
+					}) : /* @__PURE__ */ s("div", {
+						className: "react-pic-gallery__toolbar",
+						children: [/* @__PURE__ */ s("div", {
+							className: "react-pic-gallery__toolbar-actions",
+							children: [h && /* @__PURE__ */ s("span", {
+								"aria-live": "polite",
+								children: [
+									H + 1,
+									" / ",
+									e.length
+								]
+							}), f?.(Z)]
+						}), /* @__PURE__ */ o("button", {
+							className: "react-pic-gallery__control",
+							type: "button",
+							onClick: G,
+							"aria-label": "Close image viewer",
+							children: /* @__PURE__ */ o(C, {})
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: T("react-pic-gallery__viewport", Q ? "react-pic-gallery__viewport--has-navigation" : void 0),
+						onMouseDown: $,
+						onClick: (e) => {
+							if (!Q || M.current || !(e.target instanceof Element) || e.target.closest("button") || window.matchMedia?.(_)?.matches !== !0) return;
+							let t = e.currentTarget.getBoundingClientRect();
+							if (t.width <= 0) return;
+							let n = (e.clientX - t.left) / t.width;
+							n < v ? K() : n > .7 && q();
+						},
+						onTouchCancel: ae,
+						onTouchEnd: ie,
+						onTouchStart: re,
+						children: [
+							le && /* @__PURE__ */ o("button", {
+								className: "react-pic-gallery__control react-pic-gallery__control--previous",
+								type: "button",
+								onClick: K,
+								"aria-label": "Previous image",
+								children: /* @__PURE__ */ o(w, { direction: "left" })
+							}),
+							/* @__PURE__ */ o(l, {
+								src: U.src,
+								alt: U.alt,
+								eager: !0,
+								objectFit: "contain",
+								className: T("react-pic-gallery__lightbox-image", B ? `react-pic-gallery__lightbox-image--swipe-${B}` : void 0),
+								onAnimationEnd: oe
+							}, U.src),
+							ue && /* @__PURE__ */ o("button", {
+								className: "react-pic-gallery__control react-pic-gallery__control--next",
+								type: "button",
+								onClick: q,
+								"aria-label": "Next image",
+								children: /* @__PURE__ */ o(w, { direction: "right" })
+							})
+						]
+					}),
+					(p || U.caption) && /* @__PURE__ */ o("div", {
+						className: "react-pic-gallery__caption",
+						children: p ? p(Z) : U.caption
+					})
+				]
+			})
+		]
+	}), document.body);
+}
+//#endregion
+//#region src/lib/PicGallery.tsx
+function D({ images: e, columns: t, rowHeight: n, className: r, galleryClassName: i, style: c, renderActions: l, renderCaption: u, renderControls: d, showCounter: p, showNavigation: m }) {
+	let [h, g] = a(null);
+	return /* @__PURE__ */ s("div", {
+		className: `react-pic-gallery ${r ?? ""}`.trim(),
+		style: c,
+		children: [/* @__PURE__ */ o(f, {
+			images: e,
+			columns: t,
+			rowHeight: n,
+			className: i,
+			onImageClick: g
+		}), /* @__PURE__ */ o(E, {
+			images: e,
+			index: h,
+			onIndexChange: g,
+			renderActions: l,
+			renderCaption: u,
+			renderControls: d,
+			showCounter: p,
+			showNavigation: m
+		})]
+	});
+}
+//#endregion
+export { f as Gallery, E as Lightbox, D as PicGallery, D 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: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/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.1",
+  "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 --dotfiles",
+    "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;

package/dist/lib/main.d.ts

@@ -1,15 +0,0 @@
-import { ImageObject, Options } from './models/models';
-declare function PicGallery(props: {
-    imgList: ImageObject[];
-    options?: Options;
-    topCustomContent?: (props: {
-        imgObject: ImageObject;
-        closeLightbox: () => void;
-    }) => JSX.Element;
-    bottomCustomContent?: (props: {
-        imgObject: ImageObject;
-        closeLightbox: () => void;
-    }) => JSX.Element;
-    setExtLightboxChildren?: (imgLightbox: JSX.Element | undefined) => void;
-}): JSX.Element;
-export default PicGallery;

package/dist/lib/models/models.d.ts

@@ -1,18 +0,0 @@
-export interface ImageObject {
-    fullSrc: string;
-    thumbnailSrc: string;
-    [key: string]: string;
-}
-export interface Options {
-    externalLightbox?: boolean;
-    customLoadComponent?: () => JSX.Element;
-    hidePagination?: boolean;
-    rowHeight?: string | number;
-    /** Number of Pictures per row. Default: 3 */
-    picsPerRow?: number;
-}
-export declare const defaultOptions: {
-    downloadBtnDisplay: boolean;
-    descriptionBoxDisplay: boolean;
-    navigation: boolean;
-};

package/dist/lib/styles.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-declare let styles: {
-    [key: string]: React.CSSProperties;
-};
-export default styles;