@jfrader/ui 0.5.1 → 0.6.0

package/dist/lightbox-gallery-D0YaSTut.js

@@ -0,0 +1,777 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./button-C6OV0C7J.js";
+import { i as c, r as ee, t as te } from "./use-native-dialog-FB0p7lkg.js";
+import { c as ne, i as l, o as u, r as d, t as f } from "./overlay-motion-Cr77ihn2.js";
+import { useEffect as p, useId as re, useLayoutEffect as ie, useMemo as ae, useRef as m, useState as h } from "react";
+import { vars as g } from "@jfrader/tokens/vars";
+import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+import { MotionConfig as oe, animate as b, motion as se, useMotionValue as x, useReducedMotion as S } from "motion/react";
+import { useMergeRefs as ce } from "@floating-ui/react";
+//#region src/components/lightbox-gallery/lightbox-gallery.tsx
+var le = 150, ue = 4, C = .5, w = .1, T = .25, de = .2, fe = 800, pe = 8, me = .002, he = {
+	type: "spring",
+	stiffness: 360,
+	damping: 36
+}, E = {
+	open: "Open image",
+	close: "Close viewer",
+	previous: "Previous image",
+	next: "Next image",
+	zoom: "Toggle zoom",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	reset: "Reset zoom",
+	panLeft: "Pan left",
+	panRight: "Pan right",
+	panUp: "Pan up",
+	panDown: "Pan down",
+	empty: "No images",
+	unavailable: "Image unavailable",
+	imageUnavailable: "Image unavailable",
+	loading: "Loading image",
+	thumbnails: "Choose image",
+	position: (e, t) => `${e} / ${t}`,
+	zoomPercent: (e) => e
+}, ge = e({
+	label: "lightbox-gallery",
+	minInlineSize: 0,
+	color: g.color.text,
+	fontFamily: g.font.sans,
+	"&:focus-visible": t
+}), _e = e({
+	display: "grid",
+	gridTemplateColumns: "repeat(var(--lightbox-columns, 1), minmax(0, 1fr))",
+	gridAutoRows: "1px",
+	gap: "var(--lightbox-gap)",
+	padding: 0,
+	margin: 0,
+	listStyle: "none"
+}), D = e({
+	position: "relative",
+	display: "block",
+	inlineSize: "100%",
+	minBlockSize: g.space[8],
+	padding: 0,
+	border: `1px solid ${g.color.borderControl}`,
+	borderRadius: g.radius.md,
+	background: "transparent",
+	cursor: "pointer",
+	overflow: "hidden",
+	"&:focus-visible": t
+}), ve = e({
+	position: "relative",
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	objectFit: "contain",
+	userSelect: "none"
+}), O = {
+	backgroundColor: "transparent",
+	borderColor: "transparent"
+}, k = {
+	opacity: 0,
+	scale: String(f)
+}, ye = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	maxInlineSize: "100%",
+	blockSize: "100dvh",
+	maxBlockSize: "100dvh",
+	margin: 0,
+	border: `1px solid ${g.color.borderControl}`,
+	background: g.color.bg,
+	color: g.color.text,
+	padding: `max(${g.space[4]}, env(safe-area-inset-top)) max(${g.space[4]}, env(safe-area-inset-right)) max(${g.space[4]}, env(safe-area-inset-bottom)) max(${g.space[4]}, env(safe-area-inset-left))`,
+	overflow: "auto",
+	fontFamily: g.font.sans,
+	"&::backdrop": { background: g.color.scrim },
+	transitionProperty: "background-color, border-color",
+	...d,
+	"@starting-style": O,
+	"&[data-state=\"closing\"]": {
+		...O,
+		...l
+	},
+	[r]: { "&, &[data-state=\"closing\"]": { transitionDuration: "0s" } },
+	[n]: { boxShadow: "none" }
+}, u), A = ":not([data-ui=\"lightbox-gallery-stage\"])", be = e({
+	display: "flex",
+	flexDirection: "column",
+	gap: g.space[3],
+	minBlockSize: "100%",
+	[`& > ${A}`]: {
+		transitionProperty: "opacity",
+		...d,
+		"@starting-style": { opacity: 0 }
+	},
+	[`&[data-state="closing"] > ${A}`]: {
+		opacity: 0,
+		...l
+	},
+	[r]: { [`& > ${A}, &[data-state="closing"] > ${A}`]: { transitionDuration: "0s" } }
+}), xe = e({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: g.space[3]
+}), Se = e({
+	margin: 0,
+	fontSize: g.textSize.lg,
+	overflowWrap: "anywhere"
+}), j = e({
+	position: "relative",
+	display: "grid",
+	placeItems: "center",
+	flex: "1 0 auto",
+	blockSize: "50dvh",
+	minBlockSize: g.space[12],
+	overflow: "hidden",
+	touchAction: "none",
+	borderRadius: g.radius.md,
+	"&:focus-visible": t
+}), Ce = e({
+	position: "absolute",
+	pointerEvents: "none",
+	display: "grid",
+	placeItems: "center",
+	transitionProperty: "opacity, scale",
+	...d,
+	"@starting-style": k,
+	"&[data-exit=\"fade\"]": {
+		...k,
+		...l
+	},
+	[r]: { "&, &[data-exit=\"fade\"]": { transitionDuration: "0s" } }
+}), we = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: g.space[2],
+	alignItems: "center",
+	background: g.color.bg
+}), M = e({
+	whiteSpace: "normal",
+	blockSize: "auto",
+	minBlockSize: g.space[8],
+	overflowWrap: "anywhere"
+}), Te = e({
+	margin: 0,
+	fontSize: g.textSize.sm,
+	color: g.color.textMuted,
+	overflowWrap: "anywhere"
+}), Ee = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: g.space[2]
+}), De = e({
+	...t,
+	outline: "none",
+	inlineSize: g.space[12],
+	blockSize: g.space[12],
+	padding: 0,
+	border: `1px solid ${g.color.borderControl}`,
+	borderRadius: g.radius.md,
+	background: "transparent",
+	"&:focus-visible": t,
+	"&[aria-current=\"true\"]": {
+		outline: `2px solid ${g.color.accentText}`,
+		outlineOffset: "2px"
+	},
+	[n]: { "&[aria-current=\"true\"]": { outlineColor: "Highlight" } }
+}), N = e({
+	position: "absolute",
+	inset: 0,
+	display: "grid",
+	placeItems: "center",
+	padding: g.space[3],
+	color: g.color.textMuted,
+	textAlign: "center",
+	overflowWrap: "anywhere"
+}), Oe = e({
+	fontSize: g.textSize.sm,
+	color: g.color.textMuted,
+	overflowWrap: "anywhere"
+}), P = e({
+	opacity: 0,
+	transitionProperty: "opacity",
+	transitionDuration: g.motion.duration.base,
+	"&[data-image-state=\"loaded\"]": { opacity: 1 },
+	[r]: { transitionDuration: "0s" }
+}), ke = e({
+	position: "fixed",
+	pointerEvents: "none",
+	transformOrigin: "top left",
+	zIndex: 1,
+	overflow: "hidden",
+	borderRadius: g.radius.md
+});
+function F(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function I(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function L(e, t) {
+	return Number.isFinite(e) && e > 0 ? e : t;
+}
+function Ae({ image: e, decorative: t = !1, labels: n, slot: r }) {
+	let [i, a] = h(e.src ? "loading" : "error"), { onLoad: o, onError: s, ...c } = r ?? {};
+	return /* @__PURE__ */ y(_, { children: [i !== "loaded" && /* @__PURE__ */ v("span", {
+		css: N,
+		"aria-hidden": t || void 0,
+		"data-image-state": i,
+		children: t ? "▧" : i === "error" ? n.imageUnavailable : n.loading
+	}), i !== "error" && /* @__PURE__ */ v("img", {
+		...c,
+		css: [
+			ve,
+			P,
+			r?.css
+		],
+		src: e.src,
+		srcSet: e.srcSet,
+		sizes: e.sizes,
+		alt: t ? "" : e.alt,
+		"aria-hidden": t || c["aria-hidden"],
+		width: e.width,
+		height: e.height,
+		loading: t ? "lazy" : "eager",
+		decoding: "async",
+		draggable: !1,
+		"data-image-state": i,
+		onLoad: (e) => {
+			o?.(e), a("loaded");
+		},
+		onError: (e) => {
+			s?.(e), a("error");
+		}
+	})] });
+}
+function R({ ref: e, register: t, ...n }) {
+	let r = ce([e, t]);
+	return /* @__PURE__ */ v("button", {
+		...n,
+		ref: r
+	});
+}
+function z({ images: e, selected: t, label: n, controller: r, select: i, restore: a, launch: c, labels: l, locale: u, maxZoom: d, slots: f, returnFlight: g, reduced: _ }) {
+	let oe = re(), S = ae(() => new Intl.NumberFormat(u), [u]), le = ae(() => new Intl.NumberFormat(u, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}), [u]), ue = m(null), E = m(null), ge = ce([E, f?.stage?.ref]), { withDescription: _e = !0, ...D } = te(f?.viewer ?? {}), O = m(null), k = () => {
+		let e = c.current, t = O.current;
+		if (!_ && R && e?.isConnected && t?.width && V.width && V.height) {
+			let n = e.getBoundingClientRect();
+			n.width && n.height && g({
+				image: R,
+				from: {
+					left: t.left + (t.width - V.width) / 2,
+					top: t.top + (t.height - V.height) / 2,
+					...V
+				},
+				to: n
+			});
+		}
+		a();
+	}, A = ee(r, {
+		onCancel: D.onCancel,
+		onClick: D.onClick,
+		onClose: (e) => {
+			D.onClose?.(e), k();
+		}
+	}, D.ref, ue, ne), N = A["data-state"], [P, ke] = h(!1), L = e.findIndex((e) => e.id === t), R = e[L], [z, B] = h(1), [V, je] = h({
+		width: 0,
+		height: 0
+	}), H = x(0), U = x(0), W = x(1), G = x(0), K = x(0), q = x(1), J = m(/* @__PURE__ */ new Map()), Y = m(null), X = m(!1), Me = f?.title?.id ?? `${oe}-title`, Ne = f?.caption?.id ?? `${oe}-caption`, Pe = R && o(R.caption) && R.caption !== "", Fe = R ? l.position(S.format(L + 1), S.format(e.length)) : l.unavailable, Ie = l.zoomPercent(le.format(z)), Le = (e = W.get()) => ({
+		x: Math.max(0, (V.width * e - (E.current?.clientWidth ?? 0)) / 2),
+		y: Math.max(0, (V.height * e - (E.current?.clientHeight ?? 0)) / 2)
+	}), Z = (e, t, n = W.get()) => {
+		let r = Le(n);
+		H.set(I(e, -r.x, r.x)), U.set(I(t, -r.y, r.y));
+	}, Q = (e, t = 0, n = 0) => {
+		let r = I(e, 1, d), i = r / W.get(), a = t - (t - H.get()) * i, o = n - (n - U.get()) * i;
+		W.set(r), B(r), Z(a, o, r);
+	}, Re = (t) => {
+		let n = e[t];
+		n && i(n.id);
+	};
+	ie(() => {
+		let e = E.current;
+		if (!e || !R || !r.open) return;
+		let t = () => {
+			e.clientWidth && e.clientHeight && (O.current = e.getBoundingClientRect());
+			let t = Math.min(e.clientWidth / R.width, e.clientHeight / R.height), n = R.width * t, r = R.height * t;
+			je({
+				width: n,
+				height: r
+			}), H.set(I(H.get(), -Math.max(0, (n * W.get() - e.clientWidth) / 2), Math.max(0, (n * W.get() - e.clientWidth) / 2))), U.set(I(U.get(), -Math.max(0, (r * W.get() - e.clientHeight) / 2), Math.max(0, (r * W.get() - e.clientHeight) / 2)));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		n.observe(e);
+		let i = ue.current, a = () => {
+			O.current = e.getBoundingClientRect();
+		};
+		i?.addEventListener("scroll", a);
+		let o = e.ownerDocument.defaultView?.visualViewport;
+		return o?.addEventListener("resize", t), () => {
+			n.disconnect(), i?.removeEventListener("scroll", a), o?.removeEventListener("resize", t);
+		};
+	}, [
+		r.open,
+		R,
+		H,
+		U,
+		W
+	]), p(() => {
+		B(1), H.jump(0), U.jump(0), W.jump(1), J.current.clear(), Y.current = null;
+	}, [
+		t,
+		r.open,
+		H,
+		U,
+		W
+	]), p(() => {
+		W.get() > d && Q(d);
+	}, [d]), p(() => {
+		if (G.jump(0), K.jump(0), q.jump(1), !r.open || _ || !c.current?.isConnected || c.current.dataset.imageId !== t) return;
+		let e = E.current?.getBoundingClientRect(), n = c.current.getBoundingClientRect();
+		if (!e?.width || !e.height || !n.width || !R) return;
+		let i = Math.min(e.width / R.width, e.height / R.height);
+		G.set(n.left + n.width / 2 - e.left - e.width / 2), K.set(n.top + n.height / 2 - e.top - e.height / 2), q.set(n.width / (R.width * i));
+		let a = [
+			b(G, 0, he),
+			b(K, 0, he),
+			b(q, 1, he)
+		];
+		return () => a.forEach((e) => e.stop());
+	}, [
+		r.open,
+		r.repairToken,
+		_,
+		G,
+		K,
+		q
+	]), p(() => {
+		r.open && ke(!_ && !!c.current?.isConnected);
+	}, [
+		r.open,
+		_,
+		c
+	]), p(() => {
+		let e = E.current;
+		if (!e || !r.open || !R) return;
+		let t = (t) => {
+			if (!t.ctrlKey || t.defaultPrevented) return;
+			t.preventDefault();
+			let n = e.getBoundingClientRect();
+			Q(W.get() * Math.exp(-t.deltaY * me), t.clientX - n.left - n.width / 2, t.clientY - n.top - n.height / 2);
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	}, [
+		r.open,
+		R,
+		d
+	]);
+	let ze = (t) => {
+		if (t.defaultPrevented || t.target !== t.currentTarget || !R) return;
+		let n = t.currentTarget.matches(":dir(rtl)") ? -1 : 1, r = {
+			ArrowLeft: [1, 0],
+			ArrowRight: [-1, 0],
+			ArrowUp: [0, 1],
+			ArrowDown: [0, -1]
+		}[t.key];
+		if (z > 1 && r) {
+			t.preventDefault(), Z(H.get() + r[0] * t.currentTarget.clientWidth * w, U.get() + r[1] * t.currentTarget.clientHeight * w);
+			return;
+		}
+		let i = {
+			ArrowLeft: L - n,
+			ArrowRight: L + n,
+			Home: 0,
+			End: e.length - 1
+		};
+		i[t.key] !== void 0 && (z === 1 || t.key === "Home" || t.key === "End") && (t.preventDefault(), Re(i[t.key])), (t.key === "+" || t.key === "=") && (t.preventDefault(), Q(z + C)), t.key === "-" && (t.preventDefault(), Q(z - C)), t.key === "0" && (t.preventDefault(), Q(1));
+	}, Be = () => {
+		J.current.clear(), Y.current = null, W.set(z), Z(H.get(), U.get(), z);
+	}, Ve = (e) => {
+		if (e.defaultPrevented || !R || e.button !== 0) return;
+		J.current.size || (X.current = !1), J.current.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		}), e.currentTarget.setPointerCapture(e.pointerId);
+		let t = [...J.current.values()], n = e.currentTarget.getBoundingClientRect();
+		Y.current = {
+			originX: e.clientX,
+			originY: e.clientY,
+			x: H.get(),
+			y: U.get(),
+			time: e.timeStamp,
+			zoom: W.get(),
+			pinched: t.length > 1,
+			distance: t.length === 2 ? Math.hypot(t[1].x - t[0].x, t[1].y - t[0].y) : void 0,
+			focalX: t.reduce((e, t) => e + t.x, 0) / t.length - n.left - n.width / 2,
+			focalY: t.reduce((e, t) => e + t.y, 0) / t.length - n.top - n.height / 2
+		};
+	}, He = (e) => {
+		let t = Y.current;
+		if (e.defaultPrevented || !t || !J.current.has(e.pointerId)) return;
+		J.current.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		let n = [...J.current.values()], r = e.clientX - t.originX, i = e.clientY - t.originY;
+		if ((Math.hypot(r, i) > pe || n.length > 1) && (X.current = !0), n.length === 2 && t.distance) {
+			let e = I(t.zoom * Math.hypot(n[1].x - n[0].x, n[1].y - n[0].y) / t.distance, 1, d);
+			W.set(e), Z(t.focalX - (t.focalX - t.x) * e / t.zoom, t.focalY - (t.focalY - t.y) * e / t.zoom, e);
+		} else t.zoom > 1 ? Z(t.x + r, t.y + i) : !_ && !t.pinched && (H.set(r), U.set(i));
+	}, Ue = (e) => {
+		let t = Y.current;
+		if (J.current.delete(e.pointerId), t) {
+			if (t.pinched) B(W.get()), J.current.size || (Y.current = null);
+			else {
+				if (Y.current = null, !e.defaultPrevented && t.zoom === 1) {
+					let n = e.clientX - t.originX, i = e.clientY - t.originY, a = i / Math.max(1, e.timeStamp - t.time) * 1e3;
+					i > 0 && Math.abs(i) > Math.abs(n) && (i > e.currentTarget.clientHeight * T || a > fe) ? r.requestClose() : Math.abs(n) > e.currentTarget.clientWidth * de && Math.abs(n) > Math.abs(i) && Re(L + (n < 0 ? 1 : -1) * (e.currentTarget.matches(":dir(rtl)") ? -1 : 1));
+				}
+				Z(H.get(), U.get());
+			}
+		}
+	}, $ = (e, t, n = !1) => /* @__PURE__ */ v(s, {
+		size: "sm",
+		css: M,
+		disabled: n,
+		onClick: t,
+		children: e
+	});
+	return /* @__PURE__ */ v("dialog", {
+		...D,
+		...A,
+		"data-ui": "lightbox-gallery-viewer",
+		"aria-modal": "true",
+		"aria-label": D["aria-label"] ?? n,
+		"aria-labelledby": F(D["aria-labelledby"], Me),
+		"aria-describedby": F(D["aria-describedby"], _e && !!Pe && Ne),
+		css: [ye, D.css],
+		onCancel: (e) => {
+			e.target === e.currentTarget && A.onCancel(e);
+		},
+		onClose: (e) => {
+			e.target === e.currentTarget && A.onClose(e);
+		},
+		children: /* @__PURE__ */ y("div", {
+			css: be,
+			"data-state": N,
+			children: [
+				/* @__PURE__ */ y("div", {
+					css: xe,
+					children: [/* @__PURE__ */ y("h2", {
+						...f?.title,
+						id: Me,
+						css: [Se, f?.title?.css],
+						children: [n, R?.title ? ` — ${R.title}` : ""]
+					}), /* @__PURE__ */ v(s, {
+						size: "sm",
+						css: M,
+						ref: (e) => {
+							e?.setAttribute("autofocus", "");
+						},
+						onClick: r.requestClose,
+						children: l.close
+					})]
+				}),
+				/* @__PURE__ */ v("div", {
+					...f?.stage,
+					ref: ge,
+					role: "group",
+					"aria-label": f?.stage?.["aria-label"] ?? R?.alt ?? l.unavailable,
+					tabIndex: 0,
+					"data-ui": "lightbox-gallery-stage",
+					"data-zoom": z,
+					"data-reduced-motion": _,
+					css: [j, f?.stage?.css],
+					onKeyDown: (e) => {
+						f?.stage?.onKeyDown?.(e), ze(e);
+					},
+					onPointerDown: (e) => {
+						f?.stage?.onPointerDown?.(e), Ve(e);
+					},
+					onPointerMove: (e) => {
+						f?.stage?.onPointerMove?.(e), He(e);
+					},
+					onPointerUp: (e) => {
+						f?.stage?.onPointerUp?.(e), Ue(e);
+					},
+					onPointerCancel: (e) => {
+						f?.stage?.onPointerCancel?.(e), Be();
+					},
+					onLostPointerCapture: (e) => {
+						f?.stage?.onLostPointerCapture?.(e), J.current.has(e.pointerId) && Be();
+					},
+					onClick: (e) => {
+						X.current ? (e.preventDefault(), e.stopPropagation(), X.current = !1) : f?.stage?.onClick?.(e);
+					},
+					onDoubleClick: (e) => {
+						f?.stage?.onDoubleClick?.(e), !e.defaultPrevented && !X.current && Q(z > 1 ? 1 : 2);
+					},
+					children: N !== "closed" && R && /* @__PURE__ */ v(se.div, {
+						css: Ce,
+						"data-exit": N === "closing" ? P ? "home" : "fade" : void 0,
+						style: {
+							width: V.width,
+							height: V.height,
+							x: G,
+							y: K,
+							scale: q
+						},
+						children: /* @__PURE__ */ v(se.div, {
+							css: ve,
+							style: {
+								x: H,
+								y: U,
+								scale: W
+							},
+							children: /* @__PURE__ */ v(Ae, {
+								image: R,
+								labels: l,
+								slot: f?.image
+							}, `${R.id}\u0000${R.src}\u0000${R.srcSet ?? ""}`)
+						})
+					})
+				}),
+				/* @__PURE__ */ y("div", {
+					...f?.controls,
+					css: [we, f?.controls?.css],
+					children: [
+						$(l.previous, () => Re(L - 1), L <= 0),
+						$(l.next, () => Re(L + 1), L >= e.length - 1),
+						/* @__PURE__ */ v(s, {
+							size: "sm",
+							css: M,
+							"aria-pressed": z > 1,
+							disabled: d === 1,
+							onClick: () => Q(z > 1 ? 1 : 2),
+							children: l.zoom
+						}),
+						$(l.zoomIn, () => Q(z + C), z >= d),
+						$(l.zoomOut, () => Q(z - C), z <= 1),
+						$(l.reset, () => Q(1), z === 1),
+						$(l.panLeft, () => Z(H.get() + (E.current?.clientWidth ?? 0) * w, U.get()), z === 1),
+						$(l.panRight, () => Z(H.get() - (E.current?.clientWidth ?? 0) * w, U.get()), z === 1),
+						$(l.panUp, () => Z(H.get(), U.get() + (E.current?.clientHeight ?? 0) * w), z === 1),
+						$(l.panDown, () => Z(H.get(), U.get() - (E.current?.clientHeight ?? 0) * w), z === 1),
+						/* @__PURE__ */ v("span", {
+							css: Oe,
+							children: Ie
+						})
+					]
+				}),
+				Pe && /* @__PURE__ */ v("p", {
+					...f?.caption,
+					id: Ne,
+					css: [Te, f?.caption?.css],
+					children: R.caption
+				}),
+				/* @__PURE__ */ v("div", {
+					...f?.thumbnails,
+					role: "group",
+					"aria-label": f?.thumbnails?.["aria-label"] ?? l.thumbnails,
+					css: [Ee, f?.thumbnails?.css],
+					children: e.map((n, r) => /* @__PURE__ */ v("button", {
+						type: "button",
+						"aria-current": n.id === t ? "true" : void 0,
+						"aria-label": `${n.title || n.alt}, ${l.position(S.format(r + 1), S.format(e.length))}`,
+						css: De,
+						onClick: () => i(n.id),
+						children: /* @__PURE__ */ v(Ae, {
+							image: n,
+							decorative: !0,
+							labels: l
+						}, `${n.id}\u0000${n.src}`)
+					}, n.id))
+				}),
+				/* @__PURE__ */ v("div", {
+					...f?.status,
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: [Oe, f?.status?.css],
+					children: Fe
+				})
+			]
+		})
+	});
+}
+function B({ ref: e, images: t, label: n, minColumnWidth: o = le, gap: s = "2", value: ee, defaultValue: te, onValueChange: ne, open: l, defaultOpen: u = !1, onOpenChange: d, maxZoom: f = ue, labels: re, locale: _, slotProps: b, className: x, sx: C, ...w }) {
+	let [T, de] = a(ee, te === void 0 ? t[0]?.id ?? null : te, ne), [fe, pe] = a(l, u, d), [me, O] = h(null), [k, ye] = h(null), A = S(), [be, xe] = h(A ?? !1), Se = t.some((e) => e.id === T), j = !!fe && Se && (me === null || me === T), Ce = c(j, pe), we = m(null), M = m(null), Ee = ce([e, we]), De = ce([b?.grid?.ref, M]), N = m(/* @__PURE__ */ new Map()), P = m(null), F = {
+		...E,
+		...re
+	}, [I, B] = h({
+		columns: 1,
+		width: le,
+		gap: 0
+	}), V = L(o, le), je = Math.max(1, L(f, ue)), H = ae(() => new Intl.NumberFormat(_), [_]);
+	p(() => {
+		let e = we.current?.ownerDocument.defaultView?.matchMedia(r.replace("@media ", ""));
+		if (!e) return;
+		let t = () => xe(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), p(() => {
+		me === T && O(null);
+	}, [me, T]), ie(() => {
+		let e = M.current;
+		if (!e) return;
+		let t = () => {
+			let t = Number.parseFloat(getComputedStyle(e).columnGap) || 0, n = Math.max(1, Math.floor((e.clientWidth + t) / (V + t)));
+			B({
+				columns: n,
+				width: Math.max(0, (e.clientWidth - t * (n - 1)) / n),
+				gap: t
+			});
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		V,
+		s,
+		t.length === 0
+	]);
+	let U = () => {
+		(P.current?.isConnected ? P.current : N.current.get(T ?? "") ?? we.current)?.focus({ preventScroll: !0 });
+	};
+	return /* @__PURE__ */ v(oe, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ v(i, {
+			className: x,
+			styles: ge,
+			sx: C,
+			children: (e) => /* @__PURE__ */ y("div", {
+				...w,
+				ref: Ee,
+				"data-ui": "lightbox-gallery",
+				className: e,
+				role: "region",
+				tabIndex: w.tabIndex ?? -1,
+				"aria-label": w["aria-label"] ?? n,
+				"data-columns": I.columns,
+				children: [
+					t.length ? /* @__PURE__ */ v("ul", {
+						...b?.grid,
+						ref: De,
+						css: [_e, b?.grid?.css],
+						style: {
+							...b?.grid?.style,
+							"--lightbox-columns": I.columns,
+							"--lightbox-gap": g.space[s]
+						},
+						children: t.map((e, n) => {
+							let r = I.width * e.height / e.width, i = Math.max(1, Math.ceil((r + I.gap) / (1 + I.gap)));
+							return /* @__PURE__ */ v("li", {
+								style: {
+									gridRowEnd: `span ${i}`,
+									minInlineSize: 0
+								},
+								children: /* @__PURE__ */ v(R, {
+									...b?.tile,
+									register: (t) => (t && N.current.set(e.id, t), () => {
+										N.current.delete(e.id);
+									}),
+									"data-ui": "lightbox-gallery-tile",
+									"data-image-id": e.id,
+									type: "button",
+									"aria-haspopup": "dialog",
+									"aria-expanded": j && e.id === T,
+									"aria-label": b?.tile?.["aria-label"] ?? `${e.title || e.alt}, ${F.position(H.format(n + 1), H.format(t.length))}, ${F.open}`,
+									css: [D, b?.tile?.css],
+									style: {
+										...b?.tile?.style,
+										aspectRatio: `${e.width} / ${e.height}`,
+										blockSize: "100%"
+									},
+									onClick: (t) => {
+										b?.tile?.onClick?.(t), t.defaultPrevented || (P.current = t.currentTarget, O(e.id), de(e.id), Ce.setOpen(!0));
+									},
+									children: /* @__PURE__ */ v(Ae, {
+										image: e,
+										decorative: !0,
+										labels: F,
+										slot: b?.image
+									}, `${e.id}\u0000${e.src}\u0000${e.srcSet ?? ""}`)
+								})
+							}, e.id);
+						})
+					}) : /* @__PURE__ */ v("p", {
+						css: Te,
+						children: F.empty
+					}),
+					!!fe && t.length > 0 && !Se && /* @__PURE__ */ v("p", {
+						role: "status",
+						css: Oe,
+						children: F.unavailable
+					}),
+					/* @__PURE__ */ v(z, {
+						images: t,
+						selected: T,
+						label: n,
+						controller: {
+							...Ce,
+							open: j
+						},
+						select: de,
+						restore: U,
+						launch: P,
+						labels: F,
+						locale: _,
+						maxZoom: je,
+						slots: b,
+						returnFlight: ye,
+						reduced: be
+					}),
+					k && !be && !j && /* @__PURE__ */ v(se.div, {
+						"aria-hidden": "true",
+						inert: !0,
+						css: ke,
+						style: {
+							left: k.from.left,
+							top: k.from.top,
+							width: k.from.width,
+							height: k.from.height
+						},
+						initial: {
+							x: 0,
+							y: 0,
+							scaleX: 1,
+							scaleY: 1,
+							opacity: 1
+						},
+						animate: {
+							x: k.to.left - k.from.left,
+							y: k.to.top - k.from.top,
+							scaleX: k.to.width / k.from.width,
+							scaleY: k.to.height / k.from.height,
+							opacity: 0
+						},
+						transition: he,
+						onAnimationComplete: () => ye(null),
+						children: /* @__PURE__ */ v("img", {
+							src: k.image.src,
+							srcSet: k.image.srcSet,
+							sizes: k.image.sizes,
+							alt: "",
+							css: ve
+						})
+					}, k.image.id)
+				]
+			})
+		})
+	});
+}
+B.displayName = "LightboxGallery";
+//#endregion
+export { B as t };