react-pic-gallery 2.0.0 → 2.0.2

package/README.md

@@ -3,9 +3,12 @@
 Small, accessible React image gallery and lightbox with a polished default UI and typed escape hatches for custom controls.
 
 [![NPM](https://img.shields.io/npm/v/react-pic-gallery.svg)](https://www.npmjs.com/package/react-pic-gallery)
+[![Minified + gzip size](https://badgen.net/static/minified%20%2B%20gzip/7.7%20KB/blue)](https://bundlephobia.com/package/react-pic-gallery@2.0.2)
 
 [Live playground and docs](https://marcelrsoub.github.io/react-pic-gallery/)
 
+![react-pic-gallery displaying a three-column gallery of landscape photos](screenshot.png)
+
 ## Install
 
 ```bash
@@ -20,7 +23,17 @@ bun add react-pic-gallery
 
 React 18.3+ and React 19 are supported. The [Quick start docs](https://marcelrsoub.github.io/react-pic-gallery/docs/getting-started/) provide these commands in a package-manager switcher.
 
-The package is intentionally lightweight: it has no runtime dependencies, React is a peer dependency, and the built JavaScript and CSS together are roughly 6 KB gzipped.
+The package is intentionally lightweight: it has no runtime dependencies and React is a peer dependency. The built JavaScript and CSS together are about **7.7 KB gzipped** (5.55 KB JS + 2.16 KB CSS).
+
+## Why react-pic-gallery
+
+- **Tiny by design** — no runtime dependencies, no context providers, no polyfills; ~7.7 KB gzipped total.
+- **Simple by default** — one component, one stylesheet import, sensible accessible defaults.
+- **Yours when needed** — typed `renderActions`, `renderCaption`, and `renderControls` callbacks let you add custom UI without rebuilding the lightbox; extra fields on your image objects flow through fully typed.
+- **Accessible** — native modal `<dialog>`, focus containment and restoration, Escape to close, screen-reader announcements, `prefers-reduced-motion` support.
+- **Keyboard and touch friendly** — arrow-key navigation in the grid (roving tabindex) and in the lightbox, Enter to open, swipe navigation on touch devices.
+- **Themeable** — namespaced classes and CSS variables (`--gallery-accent`, `--gallery-overlay`, `--gallery-motion`, …).
+- **Three layouts** — choose a uniform grid, proportional justified rows, or an editorial mosaic.
 
 ## Quick start
 
@@ -44,6 +57,21 @@ export function App() {
 
 `src` and `alt` are required. `id`, `thumbnailSrc`, `caption`, `width`, and `height` are optional. Image objects can include application-specific fields; those fields remain available in renderer callbacks when using TypeScript generics.
 
+## Gallery layouts
+
+The default is the existing three-column grid. Choose another layout with `layout`:
+
+```tsx
+<PicGallery images={images} layout='justified' />
+<PicGallery images={images} layout='mosaic' />
+```
+
+- **`grid`** — consistent tiles with a configurable fixed column count.
+- **`justified`** — proportional photos arranged in aligned rows; the final row stays left-aligned.
+- **`mosaic`** — alternating featured photos and smaller supporting tiles.
+
+Image `width` and `height` are recommended, but optional. Justified rows use them when supplied and fall back to 3:2 when either dimension is missing or invalid. Accurate dimensions give the most faithful layout and help reserve space while images load. `rowHeight` sets the tile height for the grid, the base row height for the mosaic, and the target row height for justified galleries. `columns` applies to the grid only.
+
 ## Custom UI
 
 Add actions without rebuilding the lightbox:
@@ -104,9 +132,11 @@ The lightbox uses the native modal `<dialog>` element and includes:
 - Backdrop closing with stable page width while scrolling is locked.
 - Native lazy loading for thumbnails and explicit image loading/error states.
 - Horizontal swipe navigation on touch devices.
-- Pinch zoom up to 3x with one-finger panning while zoomed.
+- Instagram-Stories-style edge taps on touch screens: tap the right edge of the image to go forward, the left edge to go back (navigation buttons are hidden on small screens where tap zones take over).
 - Reduced-motion support, safe-area padding, rounded image surfaces, and animated transitions.
 
+Gallery tiles use roving focus. Left/Right follow image order; in the grid, Up/Down jump a row, and in justified and mosaic layouts they follow the nearest tile position. Home/End move to the first/last image. Enter opens the lightbox, and focus returns to the same tile when it closes.
+
 Native modal behavior targets modern browsers: Chrome 37+, Edge 79+, Firefox 98+, and Safari/iOS 15.4+. The package does not ship a dialog polyfill.
 
 ## Styling
@@ -123,7 +153,7 @@ The stylesheet uses namespaced classes and CSS variables. Import it once, then o
 }
 ```
 
-The default gallery uses three columns. Pass `columns` for a different fixed count; `rowHeight` accepts CSS height values or numeric pixels.
+The default grid uses three columns. Pass `columns` for a different fixed count. `rowHeight` accepts CSS height values or numeric pixels; its meaning depends on the selected layout as described above.
 
 ## API
 
@@ -132,15 +162,16 @@ The default gallery uses three columns. Pass `columns` for a different fixed cou
 | Prop | Type | Description |
 | --- | --- | --- |
 | `images` | `readonly GalleryImage[]` | Images to display. |
-| `columns` | `number` | Optional fixed column count. The default is three columns. |
-| `rowHeight` | `CSSProperties['height']` | Thumbnail height. |
+| `layout` | `'grid' \| 'justified' \| 'mosaic'` | Defaults to `'grid'`. |
+| `columns` | `number` | Optional fixed grid column count. Defaults to three; only applies to `grid`. |
+| `rowHeight` | `CSSProperties['height']` | Grid tile height, mosaic base row height, or justified target row height. |
 | `renderActions` | `LightboxRenderer` | Adds controls to the default toolbar. |
 | `renderCaption` | `LightboxRenderer` | Replaces the current caption. |
 | `renderControls` | `LightboxRenderer` | Replaces the complete default control layer. |
 | `showCounter` | `boolean` | Shows the current image count. Defaults to `true`. |
 | `showNavigation` | `boolean` | Shows previous/next controls. Defaults to `true`. |
 
-`Gallery` accepts `images`, `onImageClick`, `columns`, `rowHeight`, `className`, and `style`.
+`Gallery` accepts `images`, `onImageClick`, `layout`, `columns`, `rowHeight`, `className`, and `style`.
 
 `Lightbox` accepts `images`, controlled `index`, `onIndexChange`, the renderer props, `showCounter`, `showNavigation`, and `className`.
 

package/dist/Gallery.d.ts

@@ -1,4 +1,4 @@
 import { GalleryImage, GalleryProps } from './types';
-declare function GalleryComponent<T extends GalleryImage>({ images, onImageClick, columns, rowHeight, className, style }: GalleryProps<T>): import('react').JSX.Element;
+declare function GalleryComponent<T extends GalleryImage>({ images, onImageClick, layout, columns, rowHeight, className, style }: GalleryProps<T>): import('react').JSX.Element;
 export declare const Gallery: typeof GalleryComponent;
 export {};

package/dist/PicGallery.d.ts

@@ -1,2 +1,2 @@
 import { GalleryImage, PicGalleryProps } from './types';
-export declare function PicGallery<T extends GalleryImage>({ images, columns, rowHeight, className, galleryClassName, style, renderActions, renderCaption, renderControls, showCounter, showNavigation }: PicGalleryProps<T>): import('react').JSX.Element;
+export declare function PicGallery<T extends GalleryImage>({ images, layout, columns, rowHeight, className, galleryClassName, style, renderActions, renderCaption, renderControls, showCounter, showNavigation }: PicGalleryProps<T>): import('react').JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { Gallery } from './Gallery';
 export { Lightbox } from './Lightbox';
 export { PicGallery } from './PicGallery';
-export type { GalleryImage, GalleryProps, LightboxContext, LightboxProps, LightboxRenderer, PicGalleryProps } from './types';
+export type { GalleryImage, GalleryLayout, GalleryProps, LightboxContext, LightboxProps, LightboxRenderer, PicGalleryProps } from './types';
 export { PicGallery as default } from './PicGallery';

package/dist/layout.d.ts

@@ -0,0 +1,9 @@
+import { GalleryImage } from './types';
+export declare const FALLBACK_ASPECT_RATIO: number;
+export type JustifiedRow = {
+    indices: number[];
+    widths: number[];
+    height: number;
+};
+export declare function getAspectRatio(image: Pick<GalleryImage, 'width' | 'height'>): number;
+export declare function buildJustifiedRows(images: readonly Pick<GalleryImage, 'width' | 'height'>[], containerWidth: number, targetHeight: number, gap: number): JustifiedRow[];

package/dist/react-pic-gallery.js

@@ -1,24 +1,24 @@
-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";
+import { memo as e, useCallback as t, useEffect as n, useId as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+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 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");
+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");
 	return n(() => {
 		v("loading");
 		let e = g.current;
 		e?.complete && v(e.naturalWidth > 0 ? "loaded" : "error");
-	}, [e]), /* @__PURE__ */ s("span", {
+	}, [e]), /* @__PURE__ */ l("span", {
 		className: `react-pic-gallery__image ${r}`.trim(),
-		style: l,
+		style: s,
 		"aria-busy": _ === "loading",
 		onAnimationEnd: d,
 		children: [
-			/* @__PURE__ */ o("img", {
+			/* @__PURE__ */ c("img", {
 				ref: g,
 				src: e,
 				alt: t,
-				className: `react-pic-gallery__image-element ${c}`.trim(),
+				className: `react-pic-gallery__image-element ${i}`.trim(),
 				style: {
 					objectFit: p,
 					...u
@@ -30,12 +30,12 @@ function l({ src: e, alt: t, className: r = "", imageClassName: c = "", style: l
 				onLoad: () => v("loaded"),
 				onError: () => v("error")
 			}),
-			_ === "loading" && /* @__PURE__ */ o("span", {
+			_ === "loading" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-loader",
 				role: "progressbar",
 				"aria-label": "Loading image"
 			}),
-			_ === "error" && /* @__PURE__ */ o("span", {
+			_ === "error" && /* @__PURE__ */ c("span", {
 				className: "react-pic-gallery__image-error",
 				role: "status",
 				children: "Unable to load image"
@@ -44,332 +44,412 @@ function l({ src: e, alt: t, className: r = "", imageClassName: c = "", style: l
 	});
 }
 //#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;
+}
+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;
+	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) {
+			let e = u + s[c], d = (i - o * (c - l + 1 - 1)) / e, f = Math.abs(d - a);
+			if (f < r) t = c + 1, n = d, r = f;
+			else if (d < a) break;
+			u = e;
+		}
+		let d = t - l, f = s.slice(l, t).reduce((e, t) => e + t, 0), p = t === e.length ? Math.min(a, (i - o * (d - 1)) / f) : n;
+		c.push({
+			indices: Array.from({ length: d }, (e, t) => l + t),
+			widths: s.slice(l, t).map((e) => e * p),
+			height: p
+		}), l = t;
+	}
+	return c;
+}
+//#endregion
 //#region src/lib/Gallery.tsx
-function u({ images: e, onImageClick: t, columns: n, rowHeight: r, className: i = "", style: a }) {
-	let s = typeof r == "number" ? `${r}px` : r, c = {
-		...a,
-		...n ? { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` } : {},
-		...s ? { "--gallery-row-height": s } : {}
+var 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({
+		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 } : {}
 	};
-	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
+	v(() => {
+		if (r !== "justified") return;
+		let e = b.current, t = x.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 t = {
+					width: n,
+					rowHeight: r.height || a,
+					gap: Number.isFinite(i) ? i : r.width || _
+				};
+				return e.width === t.width && e.rowHeight === t.rowHeight && e.gap === t.gap ? e : t;
+			});
+		};
+		n();
+		let i = typeof ResizeObserver > "u" ? null : new ResizeObserver(n);
+		return i?.observe(e), i?.observe(t), window.addEventListener("resize", n), () => {
+			i?.disconnect(), window.removeEventListener("resize", n);
+		};
+	}, [
+		r,
+		u,
+		k
+	]);
+	let j = t((e) => {
+		C(e), y.current[e]?.focus();
+	}, []), M = t((t, n) => {
+		let i = y.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 (!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;
+				let p = f + Math.abs(u - o);
+				p < l && (l = p, c = i);
+			}), c !== null) return c;
+		}
+		let o = null, s = Infinity;
+		return y.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) => {
+		let n = null;
+		if (e.key === "Home") n = 0;
+		else if (e.key === "End") n = D;
+		else if (r === "grid") {
+			let r = {
+				ArrowRight: 1,
+				ArrowLeft: -1,
+				ArrowDown: E,
+				ArrowUp: -E
+			}[e.key];
+			if (r !== void 0) {
+				let e = t + r;
+				e >= 0 && e <= D && (n = e);
+			}
+		} else if (e.key === "ArrowRight" && t < D) 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 return;
+		n !== null && n !== t && (e.preventDefault(), j(n));
+	}, [
+		E,
+		M,
+		D,
+		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) => {
+		e.indices.forEach((t, n) => {
+			I[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,
+		"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, {
+				className: "react-pic-gallery__tile--justified",
+				style: I[t]
+			})), /* @__PURE__ */ c("span", {
+				ref: x,
+				className: "react-pic-gallery__row-height-probe",
+				"aria-hidden": "true"
+			})] }),
+			r === "mosaic" && Array.from({ length: Math.ceil(e.length / 3) }, (t, n) => {
+				let r = n * 3, i = e.slice(r, r + 3), a = n % 2 == 0 ? "left" : "top";
+				return /* @__PURE__ */ c("div", {
+					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}` });
+					})
+				}, `mosaic-${r}`);
 			})
-		}, 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);
+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 ee(e) {
-	if (!f.has(e)) {
-		if (f.size === 0) {
+function O(e) {
+	if (!x.has(e)) {
+		if (x.size === 0) {
 			let e = document.body, t = window.innerWidth - document.documentElement.clientWidth, n = Number.parseFloat(window.getComputedStyle(e).paddingRight) || 0;
-			p = {
+			S = {
 				overflow: e.style.overflow,
 				paddingRight: e.style.paddingRight
 			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
 		}
-		f.add(e);
+		x.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 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 y(e) {
+function A(e) {
 	let t = e.trim();
 	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
 }
-function ne(e) {
+function j(e) {
 	let t = window.getComputedStyle(e), n = t.animationDuration.split(","), r = t.animationDelay.split(",");
-	return Math.max(...n.map((e, t) => y(e) + y(r[t % r.length] ?? "0s")), 0);
+	return Math.max(...n.map((e, t) => A(e) + A(r[t % r.length] ?? "0s")), 0);
 }
-function re() {
-	return /* @__PURE__ */ o("svg", {
+function M() {
+	return /* @__PURE__ */ c("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
 		focusable: "false",
-		children: /* @__PURE__ */ o("path", { d: "M6 6l12 12M18 6L6 18" })
+		children: /* @__PURE__ */ c("path", { d: "M6 6l12 12M18 6L6 18" })
 	});
 }
-function b({ direction: e }) {
-	return /* @__PURE__ */ o("svg", {
+function N({ direction: e }) {
+	return /* @__PURE__ */ c("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" })
+		children: /* @__PURE__ */ c("path", { d: e === "left" ? "M14.5 5l-7 7 7 7" : "M9.5 5l7 7-7 7" })
 	});
 }
-function x(...e) {
+function P(...e) {
 	return e.filter(Boolean).join(" ");
 }
-function S({ images: e, index: u, onIndexChange: d, renderActions: f, renderCaption: p, renderControls: y, showCounter: S = !0, showNavigation: C = !0, className: ie }) {
-	let w = i(null), T = i(d), E = i(null), D = i(null), O = i(null), k = i(!1), A = i(!1), j = i({}), M = i(e), N = i(null), P = i(/* @__PURE__ */ new Map()), F = i(null), I = i(null), L = r(), [R, z] = a(!1), [B, V] = a(null), [H, U] = a(1), [W, G] = a({
-		x: 0,
-		y: 0
-	}), [ae, oe] = a("50% 50%"), K = u !== null && u >= 0 && u < e.length ? u : null, q = K === null ? void 0 : e[K];
-	T.current = d, O.current = K, k.current = R, M.current = e;
-	let J = t(() => {
-		E.current !== null && (window.clearTimeout(E.current), E.current = null), D.current = null;
-	}, []), Y = t(() => {
-		let e = O.current;
-		if (e !== null && D.current === null) {
+function 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) {
 			if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-				T.current(null);
+				y.current(null);
 				return;
 			}
-			D.current = { index: e }, k.current = !0, z(!0);
+			x.current = { index: e }, C.current = !0, B(!0);
 		}
+	}, []), q = t(() => {
+		let e = S.current;
+		!C.current && e !== null && e > 0 && y.current(e - 1);
+	}, []), J = t(() => {
+		let e = S.current;
+		!C.current && e !== null && e < I.current.length - 1 && y.current(e + 1);
+	}, []), Y = t(() => {
+		let e = S.current;
+		C.current || e === null || e === 0 || (H("previous"), y.current(e - 1));
 	}, []), X = t(() => {
-		let e = 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;
+		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 (O.current !== e.index) {
-				J(), k.current = !1, z(!1);
+			if (S.current !== e.index) {
+				G(), C.current = !1, B(!1);
 				return;
 			}
-			J(), k.current = !1, z(!1), T.current(null);
+			G(), C.current = !1, B(!1), y.current(null);
 		}
-	}, [J]), ue = t((e) => {
+	}, [G]), te = t((e) => {
 		if (e.defaultPrevented) return;
 		let t = e.target;
-		t instanceof HTMLElement && (t.isContentEditable || t.closest(m)) || (e.key === "ArrowLeft" ? (e.preventDefault(), X()) : e.key === "ArrowRight" && (e.preventDefault(), Z()));
-	}, [Z, X]), de = t((e) => {
-		if (H > 1 || e.touches.length !== 1 || _(e.target)) {
-			N.current = null;
+		t instanceof HTMLElement && (t.isContentEditable || t.closest(w)) || (e.key === "ArrowLeft" ? (e.preventDefault(), q()) : e.key === "ArrowRight" && (e.preventDefault(), J()));
+	}, [J, q]), ne = t((e) => {
+		if (e.touches.length !== 1 || D(e.target)) {
+			L.current = null;
 			return;
 		}
 		let t = e.touches[0];
-		N.current = {
+		L.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;
+	}, []), 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 ? 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]);
+		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(() => {
-		U(1), G({
-			x: 0,
-			y: 0
-		}), oe("50% 50%"), P.current.clear(), F.current = null, I.current = null;
-	}, [K]), n(() => {
-		let e = D.current;
-		e && K !== e.index && (J(), k.current = !1, z(!1));
-	}, [K, J]), n(() => {
-		if (!R || !D.current || !w.current) return;
-		let e = ne(w.current);
-		return E.current = window.setTimeout(Q, e), () => {
-			E.current !== null && (window.clearTimeout(E.current), E.current = null);
+		let e = 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);
 		};
-	}, [Q, R]), n(() => {
-		if (K === null) return;
-		let e = w.current;
+	}, [Z, z]), n(() => {
+		if (U === null) return;
+		let e = v.current;
 		if (!e) return;
 		let t = document.activeElement;
-		return ee(j.current), e.open || e.showModal(), () => {
-			J(), A.current = !0, e.open && e.close(), A.current = !1, te(j.current) && t?.isConnected && t.focus();
+		return 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();
 		};
-	}, [K !== null, J]), K === null || !q || typeof document > "u") return null;
-	let $ = {
-		image: q,
-		index: K,
+	}, [U !== null, G]), U === null || !W || typeof document > "u") return null;
+	let Q = {
+		image: W,
+		index: U,
 		count: e.length,
-		close: Y,
-		next: Z,
-		previous: X,
-		canGoNext: K < e.length - 1,
-		canGoPrevious: K > 0
-	}, be = C && !y && $.canGoPrevious, xe = C && !y && $.canGoNext, Se = C && !y && e.length > 1, Ce = (e) => {
-		e.target === e.currentTarget && Y();
+		close: 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 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,
+	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__ */ o("h2", {
+			/* @__PURE__ */ c("h2", {
 				className: "react-pic-gallery__sr-only",
-				id: L,
+				id: R,
 				children: "Image viewer"
 			}),
-			/* @__PURE__ */ s("p", {
+			/* @__PURE__ */ l("p", {
 				className: "react-pic-gallery__sr-only",
 				"aria-live": "polite",
 				children: [
-					q.alt,
+					W.alt,
 					", image ",
-					K + 1,
+					U + 1,
 					" of ",
 					e.length
 				]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "react-pic-gallery__lightbox-content",
 				children: [
-					y ? /* @__PURE__ */ o("div", {
+					m ? /* @__PURE__ */ c("div", {
 						className: "react-pic-gallery__custom-controls",
-						children: y($)
-					}) : /* @__PURE__ */ s("div", {
+						children: m(Q)
+					}) : /* @__PURE__ */ l("div", {
 						className: "react-pic-gallery__toolbar",
-						children: [/* @__PURE__ */ s("div", {
+						children: [/* @__PURE__ */ l("div", {
 							className: "react-pic-gallery__toolbar-actions",
-							children: [S && /* @__PURE__ */ s("span", {
+							children: [h && /* @__PURE__ */ l("span", {
 								"aria-live": "polite",
 								children: [
-									K + 1,
+									U + 1,
 									" / ",
 									e.length
 								]
-							}), f?.($)]
-						}), /* @__PURE__ */ o("button", {
+							}), f?.(Q)]
+						}), /* @__PURE__ */ c("button", {
 							className: "react-pic-gallery__control",
 							type: "button",
-							onClick: Y,
+							onClick: K,
 							"aria-label": "Close image viewer",
-							children: /* @__PURE__ */ o(re, {})
+							children: /* @__PURE__ */ c(M, {})
 						})]
 					}),
-					/* @__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,
+					/* @__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: [
-							be && /* @__PURE__ */ o("button", {
+							ce && /* @__PURE__ */ c("button", {
 								className: "react-pic-gallery__control react-pic-gallery__control--previous",
 								type: "button",
-								onClick: X,
+								onClick: q,
 								"aria-label": "Previous image",
-								children: /* @__PURE__ */ o(b, { direction: "left" })
+								children: /* @__PURE__ */ c(N, { direction: "left" })
 							}),
-							/* @__PURE__ */ o(l, {
-								src: q.src,
-								alt: q.alt,
+							/* @__PURE__ */ c(d, {
+								src: W.src,
+								alt: W.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: 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: Z,
+								onClick: J,
 								"aria-label": "Next image",
-								children: /* @__PURE__ */ o(b, { direction: "right" })
+								children: /* @__PURE__ */ c(N, { direction: "right" })
 							})
 						]
 					}),
-					(p || q.caption) && /* @__PURE__ */ o("div", {
+					(p || W.caption) && /* @__PURE__ */ c("div", {
 						className: "react-pic-gallery__caption",
-						children: p ? p($) : q.caption
+						children: p ? p(Q) : W.caption
 					})
 				]
 			})
@@ -378,23 +458,24 @@ function S({ images: e, index: u, onIndexChange: d, renderActions: f, renderCapt
 }
 //#endregion
 //#region src/lib/PicGallery.tsx
-function C({ images: e, columns: t, rowHeight: n, className: r, galleryClassName: i, style: c, renderActions: l, renderCaption: u, renderControls: f, showCounter: p, showNavigation: m }) {
-	let [h, g] = a(null);
-	return /* @__PURE__ */ s("div", {
-		className: `react-pic-gallery ${r ?? ""}`.trim(),
-		style: c,
-		children: [/* @__PURE__ */ o(d, {
+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);
+	return /* @__PURE__ */ l("div", {
+		className: `react-pic-gallery ${i ?? ""}`.trim(),
+		style: s,
+		children: [/* @__PURE__ */ c(b, {
 			images: e,
-			columns: t,
-			rowHeight: n,
-			className: i,
+			layout: t,
+			columns: n,
+			rowHeight: r,
+			className: a,
 			onImageClick: g
-		}), /* @__PURE__ */ o(S, {
+		}), /* @__PURE__ */ c(F, {
 			images: e,
 			index: h,
 			onIndexChange: g,
-			renderActions: l,
-			renderCaption: u,
+			renderActions: u,
+			renderCaption: d,
 			renderControls: f,
 			showCounter: p,
 			showNavigation: m
@@ -402,4 +483,4 @@ function C({ images: e, columns: t, rowHeight: n, className: r, galleryClassName
 	});
 }
 //#endregion
-export { d as Gallery, S as Lightbox, C as PicGallery, C as default };
+export { b as Gallery, F as Lightbox, I as PicGallery, I as default };

package/dist/styles.css

@@ -1,2 +1,2 @@
-:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.75rem;--gallery-radius:1rem;--gallery-row-height:12rem;--gallery-accent:#9ef01a;--gallery-overlay:#070b10f0;--gallery-control-size:2.75rem;--gallery-motion:.18s;color:#f8fafc}.react-pic-gallery{width:100%;min-width:0}.react-pic-gallery__grid{gap:var(--gallery-gap);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.react-pic-gallery__tile{min-width:0;height:var(--gallery-row-height);cursor:pointer;border-radius:var(--gallery-radius);isolation:isolate;background:#e2e8f0;border:0;padding:0;position:relative;overflow:hidden}.react-pic-gallery__tile:after{content:"";pointer-events:none;border-radius:inherit;transition:border-color var(--gallery-motion) ease;border:2px solid #0000;position:absolute;inset:0}.react-pic-gallery__tile:hover .react-pic-gallery__image-element,.react-pic-gallery__tile:focus-visible .react-pic-gallery__image-element{transform:scale(1.04)}.react-pic-gallery__tile:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}.react-pic-gallery__tile:focus-visible:after{border-color:var(--gallery-accent)}.react-pic-gallery__tile:disabled{cursor:default}.react-pic-gallery__image{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);width:100%;height:100%;display:block;position:relative;overflow:hidden}.react-pic-gallery__image-element{width:100%;height:100%;transition:transform var(--gallery-motion) ease, opacity var(--gallery-motion) ease;display:block}.react-pic-gallery__image-loader,.react-pic-gallery__image-error{place-items:center;display:grid;position:absolute;inset:0}.react-pic-gallery__image-loader:after{content:"";border:2px solid #0f172a29;border-top-color:var(--gallery-accent);border-radius:50%;width:1.5rem;height:1.5rem;animation:.7s linear infinite react-pic-gallery-spin}.react-pic-gallery__image-error{color:#475569;text-align:center;background:#e2e8f0e6;padding:1rem;font-size:.875rem}:where(dialog.react-pic-gallery__lightbox){z-index:1000;box-sizing:border-box;width:100%;max-width:none;height:100%;max-height:none;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));color:#f8fafc;background:var(--gallery-overlay);animation:react-pic-gallery-fade-in var(--gallery-motion) ease both;border:0;place-items:center;margin:0;display:grid;position:fixed;inset:0;overflow:hidden}dialog.react-pic-gallery__lightbox:not([open]){display:none}dialog.react-pic-gallery__lightbox::backdrop{background:0 0}.react-pic-gallery__lightbox--closing{animation:react-pic-gallery-fade-out var(--gallery-motion) ease both}.react-pic-gallery__lightbox-content{width:min(100%,90rem);height:min(100%,54rem);min-height:0;animation:react-pic-gallery-rise-in var(--gallery-motion) ease both;grid-template-rows:auto minmax(0,1fr) auto;display:grid}.react-pic-gallery__lightbox--closing .react-pic-gallery__lightbox-content{animation:react-pic-gallery-rise-out var(--gallery-motion) ease both}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;display:flex}.react-pic-gallery__toolbar-actions{color:#cbd5e1;align-items:center;gap:.75rem;min-width:0;font-size:.875rem;display:flex}.react-pic-gallery__control{width:var(--gallery-control-size);height:var(--gallery-control-size);color:#f8fafc;cursor:pointer;transition:background var(--gallery-motion) ease, color var(--gallery-motion) ease, transform var(--gallery-motion) ease;background:0 0;border:0;border-radius:.7rem;flex:none;place-items:center;padding:0;font-size:1.4rem;line-height:1;display:inline-grid}.react-pic-gallery__control:hover{background:#f8fafc24;transform:translateY(-1px)}.react-pic-gallery__control:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}.react-pic-gallery__control svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:1.25rem;height:1.25rem}.react-pic-gallery__viewport{touch-action:pan-y;place-items:center;min-height:0;padding:.75rem;display:grid;position:relative}.react-pic-gallery__viewport--has-navigation{padding-inline:3.5rem}.react-pic-gallery__lightbox-image{pointer-events:none;border-radius:var(--gallery-radius);width:min(100%,82rem);min-width:0;height:100%;min-height:0;animation:react-pic-gallery-image-in var(--gallery-motion) ease both;background:0 0;place-items:center;display:grid;overflow:visible}.react-pic-gallery__lightbox-image .react-pic-gallery__image-element{pointer-events:auto;touch-action:none;border-radius:inherit;object-fit:contain;background:0 0;width:auto;max-width:100%;height:auto;max-height:100%}.react-pic-gallery__lightbox-image .react-pic-gallery__image-loader{pointer-events:none;background:0 0}.react-pic-gallery__lightbox-image .react-pic-gallery__image-error{pointer-events:none}.react-pic-gallery__lightbox-image--swipe-next{animation-name:react-pic-gallery-slide-in-from-right}.react-pic-gallery__lightbox-image--swipe-previous{animation-name:react-pic-gallery-slide-in-from-left}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{z-index:1;position:absolute;top:50%;transform:translateY(-50%)}.react-pic-gallery__control--previous:hover,.react-pic-gallery__control--next:hover{transform:translateY(calc(-50% - 1px))}.react-pic-gallery__control--previous{left:0}.react-pic-gallery__control--next{right:0}.react-pic-gallery__caption{color:#cbd5e1;text-align:center;max-height:8rem;padding:.75rem 0 0;font-size:.95rem;line-height:1.4;overflow:hidden}.react-pic-gallery__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes react-pic-gallery-spin{to{transform:rotate(360deg)}}@keyframes react-pic-gallery-fade-in{0%{opacity:0}to{opacity:1}}@keyframes react-pic-gallery-fade-out{0%{opacity:1}to{opacity:0}}@keyframes react-pic-gallery-rise-in{0%{opacity:0;transform:translateY(.5rem)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes react-pic-gallery-rise-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(.5rem)scale(.99)}}@keyframes react-pic-gallery-image-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes react-pic-gallery-slide-in-from-right{0%{opacity:0;transform:translate(18%)}to{opacity:1;transform:translate(0)}}@keyframes react-pic-gallery-slide-in-from-left{0%{opacity:0;transform:translate(-18%)}to{opacity:1;transform:translate(0)}}@media (width<=600px){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.5rem;--gallery-radius:.75rem;--gallery-row-height:8rem}.react-pic-gallery__lightbox-content{height:100%}.react-pic-gallery__viewport{padding-inline:.25rem}.react-pic-gallery__viewport--has-navigation{padding-inline:2.75rem}.react-pic-gallery__control--previous{left:-.25rem}.react-pic-gallery__control--next{right:-.25rem}}@media (prefers-reduced-motion:reduce){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-motion:0s}.react-pic-gallery__image-loader:after{animation:none}}
+:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.75rem;--gallery-radius:1rem;--gallery-row-height:12rem;--gallery-accent:#9ef01a;--gallery-overlay:#070b10f0;--gallery-control-size:2.75rem;--gallery-motion:.18s;color:#f8fafc}.react-pic-gallery{width:100%;min-width:0}.react-pic-gallery__gallery{width:100%;min-width:0;position:relative}.react-pic-gallery__grid{gap:var(--gallery-gap,.75rem);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.react-pic-gallery__gallery--justified{align-content:flex-start;gap:var(--gallery-gap,.75rem);flex-wrap:wrap;display:flex}.react-pic-gallery__gallery--justified>.react-pic-gallery__tile--justified{flex:none;height:auto}.react-pic-gallery__row-height-probe{width:var(--gallery-gap,.75rem);height:var(--gallery-row-height,12rem);visibility:hidden;pointer-events:none;position:absolute;overflow:hidden}.react-pic-gallery__gallery--mosaic{gap:var(--gallery-gap,.75rem);display:grid}.react-pic-gallery__mosaic-group{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2, minmax(0, var(--gallery-row-height,12rem)));gap:var(--gallery-gap,.75rem);min-width:0;display:grid}.react-pic-gallery__mosaic-group--top{grid-template-columns:repeat(2,minmax(0,1fr))}.react-pic-gallery__mosaic-group .react-pic-gallery__tile--mosaic{min-width:0;height:auto}.react-pic-gallery__mosaic-group--left .react-pic-gallery__tile--mosaic-featured{grid-area:1/1/span 2}.react-pic-gallery__mosaic-group--top .react-pic-gallery__tile--mosaic-featured{grid-area:1/1/auto/-1}.react-pic-gallery__mosaic-group--count-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0, var(--gallery-row-height,12rem))}.react-pic-gallery__mosaic-group--count-1{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0, var(--gallery-row-height,12rem))}.react-pic-gallery__tile{min-width:0;height:var(--gallery-row-height,12rem);cursor:pointer;border-radius:var(--gallery-radius,1rem);isolation:isolate;background:#e2e8f0;border:0;padding:0;position:relative;overflow:hidden}.react-pic-gallery__tile:after{content:"";pointer-events:none;border-radius:inherit;transition:border-color var(--gallery-motion,.18s) ease;border:2px solid #0000;position:absolute;inset:0}.react-pic-gallery__tile:hover .react-pic-gallery__image-element,.react-pic-gallery__tile:focus-visible .react-pic-gallery__image-element{transform:scale(1.04)}.react-pic-gallery__tile:focus-visible{outline:3px solid var(--gallery-accent,#9ef01a);outline-offset:3px}.react-pic-gallery__tile:focus-visible:after{border-color:var(--gallery-accent,#9ef01a)}.react-pic-gallery__tile:disabled{cursor:default}.react-pic-gallery__image{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);width:100%;height:100%;display:block;position:relative;overflow:hidden}.react-pic-gallery__image-element{width:100%;height:100%;transition:transform var(--gallery-motion,.18s) ease, opacity var(--gallery-motion,.18s) ease;display:block}.react-pic-gallery__image-loader,.react-pic-gallery__image-error{place-items:center;display:grid;position:absolute;inset:0}.react-pic-gallery__image-loader:after{content:"";border:2px solid #0f172a29;border-top-color:var(--gallery-accent,#9ef01a);border-radius:50%;width:1.5rem;height:1.5rem;animation:.7s linear infinite react-pic-gallery-spin}.react-pic-gallery__image-error{color:#475569;text-align:center;background:#e2e8f0e6;padding:1rem;font-size:.875rem}:where(dialog.react-pic-gallery__lightbox){z-index:1000;box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));color:#f8fafc;background:var(--gallery-overlay);animation:react-pic-gallery-fade-in var(--gallery-motion) ease both;border:0;place-items:center;margin:0;display:grid;position:fixed;inset:0;overflow:hidden}dialog.react-pic-gallery__lightbox:not([open]){display:none}dialog.react-pic-gallery__lightbox::backdrop{background:0 0}.react-pic-gallery__lightbox--closing{animation:react-pic-gallery-fade-out var(--gallery-motion) ease both}.react-pic-gallery__lightbox-content{box-sizing:border-box;width:min(90rem,100vw - 2rem);min-width:0;max-width:100%;height:min(54rem,100dvh - 2rem);min-height:0;max-height:100%;animation:react-pic-gallery-rise-in var(--gallery-motion) ease both;flex-direction:column;display:flex}.react-pic-gallery__lightbox--closing .react-pic-gallery__lightbox-content{animation:react-pic-gallery-rise-out var(--gallery-motion) ease both}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;display:flex}.react-pic-gallery__toolbar-actions{color:#cbd5e1;align-items:center;gap:.75rem;min-width:0;font-size:.875rem;display:flex}.react-pic-gallery__control{width:var(--gallery-control-size);height:var(--gallery-control-size);color:#f8fafc;cursor:pointer;transition:background var(--gallery-motion) ease, color var(--gallery-motion) ease, transform var(--gallery-motion) ease;background:0 0;border:0;border-radius:.7rem;flex:none;place-items:center;padding:0;font-size:1.4rem;line-height:1;display:inline-grid}.react-pic-gallery__control:hover{background:#f8fafc24}.react-pic-gallery__control:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}.react-pic-gallery__control svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:1.25rem;height:1.25rem}.react-pic-gallery__viewport{touch-action:pan-y pinch-zoom;flex:1 1 0;place-items:center;min-width:0;min-height:0;padding:.75rem;display:grid;position:relative;overflow:hidden}.react-pic-gallery__viewport--has-navigation{padding-inline:3.5rem}.react-pic-gallery__viewport--has-navigation .react-pic-gallery__lightbox-image{inset-inline:3.5rem}.react-pic-gallery__lightbox-image{pointer-events:none;width:auto;min-width:0;max-width:82rem;height:auto;min-height:0;max-height:none;animation:react-pic-gallery-image-in var(--gallery-motion) ease both;background:0 0;border-radius:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;margin-inline:auto;display:grid;position:absolute;inset:.75rem;overflow:visible}.react-pic-gallery__lightbox-image .react-pic-gallery__image-element{pointer-events:auto;touch-action:inherit;border-radius:var(--gallery-radius);background:0 0;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain!important}.react-pic-gallery__lightbox-image .react-pic-gallery__image-loader{pointer-events:none;background:0 0}.react-pic-gallery__lightbox-image .react-pic-gallery__image-error{pointer-events:none}.react-pic-gallery__lightbox-image--swipe-next{animation-name:react-pic-gallery-slide-in-from-right}.react-pic-gallery__lightbox-image--swipe-previous{animation-name:react-pic-gallery-slide-in-from-left}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{z-index:1;position:absolute;top:50%;transform:translateY(-50%)}.react-pic-gallery__control--previous{left:0}.react-pic-gallery__control--next{right:0}.react-pic-gallery__caption{color:#cbd5e1;text-align:center;flex:none;max-height:8rem;padding:.75rem 0 0;font-size:.95rem;line-height:1.4;overflow:hidden}.react-pic-gallery__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes react-pic-gallery-spin{to{transform:rotate(360deg)}}@keyframes react-pic-gallery-fade-in{0%{opacity:0}to{opacity:1}}@keyframes react-pic-gallery-fade-out{0%{opacity:1}to{opacity:0}}@keyframes react-pic-gallery-rise-in{0%{opacity:0;transform:translateY(.5rem)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes react-pic-gallery-rise-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(.5rem)scale(.99)}}@keyframes react-pic-gallery-image-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes react-pic-gallery-slide-in-from-right{0%{opacity:0;transform:translate(18%)}to{opacity:1;transform:translate(0)}}@keyframes react-pic-gallery-slide-in-from-left{0%{opacity:0;transform:translate(-18%)}to{opacity:1;transform:translate(0)}}@media (width<=600px){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-gap:.5rem;--gallery-radius:.75rem;--gallery-row-height:8rem}:where(dialog.react-pic-gallery__lightbox){padding:max(.375rem, env(safe-area-inset-top)) max(.375rem, env(safe-area-inset-right)) max(.375rem, env(safe-area-inset-bottom)) max(.375rem, env(safe-area-inset-left))}.react-pic-gallery__mosaic-group--count-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(8rem, var(--gallery-row-height,12rem)) minmax(5rem, .65fr)}.react-pic-gallery__mosaic-group--count-3 .react-pic-gallery__tile--mosaic-featured{grid-area:1/1/auto/-1}.react-pic-gallery__lightbox-content{width:min(90rem,100vw - .75rem);height:min(54rem,100dvh - .75rem)}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{min-height:3rem}.react-pic-gallery__viewport{padding:.25rem}.react-pic-gallery__lightbox-image{inset:.25rem}.react-pic-gallery__viewport--has-navigation .react-pic-gallery__lightbox-image{inset-inline:.25rem}.react-pic-gallery__control--previous,.react-pic-gallery__control--next{display:none}}@media (height<=600px){:where(dialog.react-pic-gallery__lightbox){padding:max(.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left))}.react-pic-gallery__lightbox-content{height:min(54rem,100dvh - .5rem)}.react-pic-gallery__toolbar,.react-pic-gallery__custom-controls{min-height:2.25rem}.react-pic-gallery__caption{max-height:4rem;padding:.35rem 0 0;font-size:.85rem}.react-pic-gallery__viewport{padding:.25rem}.react-pic-gallery__lightbox-image{inset:.25rem}}@media (prefers-reduced-motion:reduce){:where(.react-pic-gallery,.react-pic-gallery__lightbox){--gallery-motion:0s}.react-pic-gallery__image-loader:after{animation:none}}
 /*$vite$:1*/

package/dist/types.d.ts

@@ -8,6 +8,7 @@ export type GalleryImage = {
     width?: number;
     height?: number;
 };
+export type GalleryLayout = 'grid' | 'justified' | 'mosaic';
 export type LightboxContext<T extends GalleryImage = GalleryImage> = {
     image: T;
     index: number;
@@ -22,6 +23,7 @@ export type LightboxRenderer<T extends GalleryImage = GalleryImage> = (context:
 export type GalleryProps<T extends GalleryImage = GalleryImage> = {
     images: readonly T[];
     onImageClick?: (index: number) => void;
+    layout?: GalleryLayout;
     columns?: number;
     rowHeight?: CSSProperties['height'];
     className?: string;
@@ -40,6 +42,7 @@ export type LightboxProps<T extends GalleryImage = GalleryImage> = {
 };
 export type PicGalleryProps<T extends GalleryImage = GalleryImage> = {
     images: readonly T[];
+    layout?: GalleryLayout;
     columns?: number;
     rowHeight?: CSSProperties['height'];
     className?: string;

package/package.json

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