react-pic-gallery 2.0.1 → 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,16 +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 about **5.9 KB gzipped** (4.0 KB JS + 1.9 KB CSS).
+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; ~5.9 KB gzipped total.
+- **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
 
@@ -53,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:
@@ -116,7 +135,7 @@ The lightbox uses the native modal `<dialog>` element and includes:
 - Instagram-Stories-style edge taps on touch screens: tap the right edge of the image to go forward, the left edge to go back (navigation buttons are hidden on small screens where tap zones take over).
 - Reduced-motion support, safe-area padding, rounded image surfaces, and animated transitions.
 
-The thumbnail grid supports arrow-key navigation with a roving tabindex: Tab once to enter the grid, then move with Arrow keys (Left/Right step, Up/Down jump a row, Home/End jump to the ends), Enter to open, and focus is restored to the same tile when the lightbox closes.
+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.
 
@@ -134,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
 
@@ -143,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,295 +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
-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;
+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 } : {}
+	};
+	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;
-		r !== null && r !== t && (e.preventDefault(), v(r));
+		n !== null && n !== t && (e.preventDefault(), j(n));
 	}, [
-		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,
+		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}-${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;
+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 b(e) {
-	if (!p.has(e)) {
-		if (p.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;
-			m = {
+			S = {
 				overflow: e.style.overflow,
 				paddingRight: e.style.paddingRight
 			}, e.style.overflow = "hidden", t > 0 && (e.style.paddingRight = `${n + t}px`);
 		}
-		p.add(e);
+		x.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 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 S(e) {
+function A(e) {
 	let t = e.trim();
 	return t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : 0;
 }
-function ee(e) {
+function j(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);
+	return Math.max(...n.map((e, t) => A(e) + A(r[t % r.length] ?? "0s")), 0);
 }
-function C() {
-	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 w({ 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 T(...e) {
+function P(...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) {
+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) {
-				O.current(null);
+				y.current(null);
 				return;
 			}
-			A.current = { index: e }, M.current = !0, z(!0);
+			x.current = { index: e }, C.current = !0, B(!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);
+		let e = S.current;
+		!C.current && e !== null && e > 0 && y.current(e - 1);
 	}, []), J = t(() => {
-		let e = j.current;
-		M.current || e === null || e === 0 || (V("previous"), O.current(e - 1));
+		let e = S.current;
+		!C.current && e !== null && e < I.current.length - 1 && y.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;
+		let e = S.current;
+		C.current || e === null || e === 0 || (H("previous"), y.current(e - 1));
+	}, []), X = t(() => {
+		let e = S.current;
+		C.current || e === null || e >= I.current.length - 1 || (H("next"), y.current(e + 1));
+	}, []), ee = t((e) => {
+		e.preventDefault(), K();
+	}, [K]), Z = t(() => {
+		let e = x.current;
 		if (e) {
-			if (j.current !== e.index) {
-				W(), M.current = !1, z(!1);
+			if (S.current !== e.index) {
+				G(), C.current = !1, B(!1);
 				return;
 			}
-			W(), M.current = !1, z(!1), O.current(null);
+			G(), C.current = !1, B(!1), y.current(null);
 		}
-	}, [W]), ne = t((e) => {
+	}, [G]), te = 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;
+		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];
-		I.current = {
+		L.current = {
 			x: t.clientX,
 			y: t.clientY
 		};
-	}, []), ie = t((e) => {
-		let t = I.current;
-		if (I.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 ? Y() : J());
-	}, [Y, J]), ae = t(() => {
-		I.current = null;
+		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 && 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]);
+		e.target === e.currentTarget && e.animationName === "react-pic-gallery-fade-out" && Z();
+	}, [Z]), se = t(() => {
+		A.current || (G(), C.current = !1, B(!1), S.current !== null && y.current(null));
+	}, [G]);
 	if (n(() => {
-		let e = 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);
+		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);
 		};
-	}, [X, R]), n(() => {
-		if (H === null) return;
-		let e = D.current;
+	}, [Z, z]), n(() => {
+		if (U === null) return;
+		let e = v.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();
+		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();
 		};
-	}, [H !== null, W]), H === null || !U || typeof document > "u") return null;
-	let Z = {
-		image: U,
-		index: H,
+	}, [U !== null, G]), U === null || !W || typeof document > "u") return null;
+	let Q = {
+		image: W,
+		index: U,
 		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();
+		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: 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,
+	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: [
-					U.alt,
+					W.alt,
 					", image ",
-					H + 1,
+					U + 1,
 					" of ",
 					e.length
 				]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "react-pic-gallery__lightbox-content",
 				children: [
-					m ? /* @__PURE__ */ o("div", {
+					m ? /* @__PURE__ */ c("div", {
 						className: "react-pic-gallery__custom-controls",
-						children: m(Z)
-					}) : /* @__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: [h && /* @__PURE__ */ s("span", {
+							children: [h && /* @__PURE__ */ l("span", {
 								"aria-live": "polite",
 								children: [
-									H + 1,
+									U + 1,
 									" / ",
 									e.length
 								]
-							}), f?.(Z)]
-						}), /* @__PURE__ */ o("button", {
+							}), f?.(Q)]
+						}), /* @__PURE__ */ c("button", {
 							className: "react-pic-gallery__control",
 							type: "button",
-							onClick: G,
+							onClick: K,
 							"aria-label": "Close image viewer",
-							children: /* @__PURE__ */ o(C, {})
+							children: /* @__PURE__ */ c(M, {})
 						})]
 					}),
-					/* @__PURE__ */ s("div", {
-						className: T("react-pic-gallery__viewport", Q ? "react-pic-gallery__viewport--has-navigation" : void 0),
-						onMouseDown: $,
+					/* @__PURE__ */ l("div", {
+						className: P("react-pic-gallery__viewport", $ ? "react-pic-gallery__viewport--has-navigation" : void 0),
+						onMouseDown: ue,
 						onClick: (e) => {
-							if (!Q || M.current || !(e.target instanceof Element) || e.target.closest("button") || window.matchMedia?.(_)?.matches !== !0) return;
+							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 < v ? K() : n > .7 && q();
+							n < E ? q() : n > .7 && J();
 						},
-						onTouchCancel: ae,
-						onTouchEnd: ie,
-						onTouchStart: re,
+						onTouchCancel: ie,
+						onTouchEnd: re,
+						onTouchStart: ne,
 						children: [
-							le && /* @__PURE__ */ o("button", {
+							ce && /* @__PURE__ */ c("button", {
 								className: "react-pic-gallery__control react-pic-gallery__control--previous",
 								type: "button",
-								onClick: K,
+								onClick: q,
 								"aria-label": "Previous image",
-								children: /* @__PURE__ */ o(w, { direction: "left" })
+								children: /* @__PURE__ */ c(N, { direction: "left" })
 							}),
-							/* @__PURE__ */ o(l, {
-								src: U.src,
-								alt: U.alt,
+							/* @__PURE__ */ c(d, {
+								src: W.src,
+								alt: W.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: 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: q,
+								onClick: J,
 								"aria-label": "Next image",
-								children: /* @__PURE__ */ o(w, { direction: "right" })
+								children: /* @__PURE__ */ c(N, { direction: "right" })
 							})
 						]
 					}),
-					(p || U.caption) && /* @__PURE__ */ o("div", {
+					(p || W.caption) && /* @__PURE__ */ c("div", {
 						className: "react-pic-gallery__caption",
-						children: p ? p(Z) : U.caption
+						children: p ? p(Q) : W.caption
 					})
 				]
 			})
@@ -341,28 +458,29 @@ function E({ images: e, index: u, onIndexChange: d, renderActions: f, renderCapt
 }
 //#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, {
+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(E, {
+		}), /* @__PURE__ */ c(F, {
 			images: e,
 			index: h,
 			onIndexChange: g,
-			renderActions: l,
-			renderCaption: u,
-			renderControls: d,
+			renderActions: u,
+			renderCaption: d,
+			renderControls: f,
 			showCounter: p,
 			showNavigation: m
 		})]
 	});
 }
 //#endregion
-export { f as Gallery, E as Lightbox, D as PicGallery, D 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: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}}
+: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.1",
+  "version": "2.0.2",
   "description": "Small, accessible React image gallery and lightbox.",
   "author": "marcelrsoub",
   "license": "MIT",