@orvui/vue 0.0.0-stage → 0.1.1

package/dist/image-viewer-BsXLC7p3.js

@@ -0,0 +1,925 @@
+import { o as e, s as t, t as n } from "./composables-BJ1sih_H.js";
+import { l as r, o as i, r as a, t as o } from "./ease-rIvCM4O3.js";
+import { t as s } from "./_plugin-vue_export-helper-Djzt4Yr7.js";
+import { t as c } from "./utils-DIrLOK2M.js";
+import { t as l } from "./RenderContent-CwtJ7hLl.js";
+import { Fragment as u, Teleport as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as _, createVNode as v, defineComponent as y, inject as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, onMounted as E, openBlock as D, provide as O, ref as k, renderList as A, renderSlot as j, resolveDynamicComponent as ee, shallowRef as M, toDisplayString as N, unref as P, useAttrs as F, useId as te, watch as I, withCtx as L } from "vue";
+import { AnimatePresence as ne, LayoutGroup as R, motion as z, motionValue as re } from "motion-v";
+import { ChevronLeft as B, ChevronRight as V, Minus as ie, Plus as ae, X as H } from "lucide-vue-next";
+// src/motion/image-viewer/src/context.ts
+var U = Symbol("ImageViewer");
+function W() {
+	let e = b(U);
+	if (!e) throw Error("ImageViewer parts must be used within ImageViewer.");
+	return e;
+}
+var G = /* @__PURE__ */ new WeakMap();
+function K(e) {
+	let t = G.get(e);
+	return t || (t = {
+		owners: 0,
+		initial: e.inert
+	}, G.set(e, t)), t.owners++, e.inert = !0, () => {
+		--t.owners === 0 && (e.inert = t.initial, G.delete(e));
+	};
+}
+function q(t, n, r, i) {
+	let a = e(t, r, i), o = !1, s = 0, c;
+	function l() {
+		let e = r.value, t = e?.querySelectorAll("a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex=\"-1\"])");
+		(Array.from(t ?? []).find((e) => e.tabIndex >= 0 && !e.closest("[inert]")) ?? e)?.focus({ preventScroll: !0 });
+	}
+	async function u() {
+		let e = ++s;
+		if (c?.(), c = void 0, !o || !t.value) return;
+		await S();
+		let i = n.value;
+		if (!o || e !== s || !t.value || !i || !r.value) return;
+		let u = i.ownerDocument, d = i.inert;
+		i.inert = !1;
+		let f = Array.from(u.body.children).filter((e) => e instanceof HTMLElement && e !== i && !a.containsOwnedPortal(e)).map(K), p = !1;
+		function m(e) {
+			let t = r.value, i = n.value;
+			if (!p && t && i && !i.inert && !(e.composedPath().includes(t) || a.containsHigher(e.target)) && e.target instanceof Node && a.isTop()) {
+				p = !0;
+				try {
+					l();
+				} finally {
+					p = !1;
+				}
+			}
+		}
+		u.addEventListener("focusin", m), c = () => {
+			u.removeEventListener("focusin", m), i.inert = G.has(i) ? !0 : d, f.forEach((e) => e());
+		};
+	}
+	I(t, u, { flush: "sync" }), E(() => {
+		o = !0, u();
+	}), T(() => {
+		o = !1, ++s, c?.(), c = void 0;
+	});
+}
+// src/motion/image-viewer/src/viewer-state.ts
+function J(e, t) {
+	let n = k(e.defaultValue), r = f(() => e.modelValue !== void 0 || e.value !== void 0), i = f({
+		get: () => e.modelValue === void 0 ? e.value === void 0 ? n.value : e.value : e.modelValue,
+		set: (e) => {
+			r.value || (n.value = e), t("update:modelValue", e), t("valueChange", e), t("change", e);
+		}
+	}), a = f(() => e.images.findIndex((e) => e.id === i.value)), o = f(() => e.images[a.value]), s = k(1);
+	I(() => e.images, (e) => {
+		if (new Set(e.map((e) => e.id)).size !== e.length) throw Error("ImageViewer requires unique image ids.");
+		if (e.some((e) => !Number.isFinite(e.width) || !Number.isFinite(e.height) || e.width <= 0 || e.height <= 0)) throw Error("ImageViewer requires positive image dimensions.");
+		!r.value && i.value !== null && a.value < 0 && (n.value = null);
+	}, {
+		immediate: !0,
+		deep: !0
+	});
+	function c(t) {
+		let n = e.images.findIndex((e) => e.id === t);
+		n >= 0 && a.value >= 0 && (s.value = n < a.value ? -1 : 1), i.value = t;
+	}
+	function l(t) {
+		let n = e.images[a.value + t];
+		o.value && n && (s.value = t < 0 ? -1 : 1, c(n.id));
+	}
+	return {
+		value: i,
+		index: a,
+		image: o,
+		direction: s,
+		select: c,
+		move: l
+	};
+}
+// src/motion/image-viewer/src/ImageViewerGallery.vue?vue&type=script&setup=true&lang.ts
+var oe = ["aria-label"], Y = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerGallery",
+	setup(e) {
+		let t = W(), n = F(), r = f(() => String(n["aria-label"] ?? t.label.value));
+		return (e, t) => (D(), h("section", x(P(n), {
+			"aria-label": r.value,
+			class: P(c)("grid w-full grid-cols-2 gap-3 sm:grid-cols-3", P(n).class)
+		}), [j(e.$slots, "default")], 16, oe));
+	}
+}), se = {
+	type: "tween",
+	duration: .46,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+}, X = /* @__PURE__ */ new WeakMap(), ce = /* @__PURE__ */ new WeakMap();
+function le(e) {
+	let t = ce.get(e);
+	return t || (t = M(), ce.set(e, t)), t;
+}
+function ue(e, t) {
+	X.set(e, t);
+}
+function de(e) {
+	return X.get(e);
+}
+function fe(e, t) {
+	X.get(e) === t && X.delete(e);
+}
+// src/motion/image-viewer/src/ImageViewerThumbnail.vue?vue&type=script&setup=true&lang.ts
+var pe = [
+	"src",
+	"alt",
+	"width",
+	"height"
+], me = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerThumbnail",
+	props: {
+		imageId: {},
+		imageClassName: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let i = e, a = t, o = W(), s = le(o), l = f(() => o.images.value.find((e) => e.id === i.imageId));
+		I(l, (e) => {
+			if (!e) throw Error(`ImageViewerThumbnail: unknown image id "${i.imageId}".`);
+		}, { immediate: !0 });
+		let u = null;
+		function d(e) {
+			a("click", e), !(e.defaultPrevented || i.disabled) && (u = n(e.currentTarget), u && ue(o, u), o.select(i.imageId));
+		}
+		return T(() => {
+			u && fe(o, u);
+		}), (t, n) => l.value ? (D(), p(P(z).button, x({
+			key: 0,
+			"data-orvui-viewer-id": P(o).id,
+			"data-orvui-image-id": e.imageId
+		}, t.$attrs, {
+			type: "button",
+			disabled: e.disabled,
+			"aria-label": String(t.$attrs["aria-label"] ?? `Open ${l.value.alt}`),
+			"aria-haspopup": "dialog",
+			"aria-expanded": l.value.id === P(o).value.value,
+			"while-press": P(o).reduce.value ? void 0 : { scale: .98 },
+			transition: P(r),
+			class: P(c)("relative overflow-hidden rounded-2xl bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", t.$attrs.class),
+			onClick: d
+		}), {
+			default: L(() => [g("img", {
+				style: w({ opacity: P(s)?.imageId === l.value.id ? 0 : void 0 }),
+				src: l.value.src,
+				alt: l.value.alt,
+				width: l.value.width,
+				height: l.value.height,
+				loading: "lazy",
+				draggable: !1,
+				class: C(P(c)("block h-auto w-full", e.imageClassName))
+			}, null, 14, pe), j(t.$slots, "default", { image: l.value })]),
+			_: 3
+		}, 16, [
+			"data-orvui-viewer-id",
+			"data-orvui-image-id",
+			"disabled",
+			"aria-label",
+			"aria-expanded",
+			"while-press",
+			"transition",
+			"class"
+		])) : m("", !0);
+	}
+});
+// src/motion/image-viewer/src/geometry.ts
+function he(e, t, n, r) {
+	let i = (e, t) => Math.max(0, e - t / 2);
+	return {
+		x: i(e, n),
+		y: i(t, r)
+	};
+}
+function Z(e, t) {
+	return e > t ? t : e < -t ? -t : e;
+}
+function ge(e, t) {
+	let n = t.x - e.x;
+	return Math.abs(n) <= 50 || Math.abs(n) <= Math.abs(t.y - e.y) * 1.5 ? null : n < 0 ? 1 : -1;
+}
+// src/motion/image-viewer/src/ImageViewerSlide.vue
+var _e = /* @__PURE__ */ y({
+	__name: "ImageViewerSlide",
+	props: {
+		image: {},
+		zoom: { type: Boolean },
+		present: { type: Boolean },
+		direction: {},
+		x: {},
+		y: {},
+		pan: {}
+	},
+	emits: ["swipe", "failed"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, s = W(), c = f(() => n.present && s.image.value?.id === n.image.id && s.image.value.src === n.image.src), l;
+		I(c, (e) => {
+			e || (l = void 0);
+		});
+		function u(e, t) {
+			let n = e, r = n.reduce ? {
+				duration: .1,
+				ease: a
+			} : {
+				type: "tween",
+				duration: .28,
+				ease: o
+			};
+			return {
+				opacity: n.reduce && t !== "visible" ? 0 : 1,
+				x: `${n.reduce || t === "visible" ? 0 : n.direction * (t === "exit" ? -100 : 100)}%`,
+				...t === "enter" ? {} : { transition: r }
+			};
+		}
+		let d = {
+			enter: (e) => u(e, "enter"),
+			visible: (e) => u(e, "visible"),
+			exit: (e) => u(e, "exit")
+		};
+		function m(e) {
+			e.preventDefault(), !n.zoom && e.isPrimary && c.value && (l = {
+				x: e.clientX,
+				y: e.clientY
+			});
+		}
+		function h(e) {
+			let t = l;
+			if (l = void 0, !t || n.zoom || !c.value) return;
+			let i = ge(t, {
+				x: e.clientX,
+				y: e.clientY
+			});
+			i !== null && r("swipe", i);
+		}
+		function g() {
+			l = void 0;
+		}
+		return (t, n) => (D(), p(P(z).div, {
+			inert: !c.value,
+			"aria-hidden": !c.value || void 0,
+			style: w({ pointerEvents: c.value ? "auto" : "none" }),
+			custom: {
+				direction: e.direction,
+				reduce: P(s).reduce.value
+			},
+			variants: d,
+			initial: "enter",
+			animate: "visible",
+			exit: "exit",
+			class: "absolute inset-0"
+		}, {
+			default: L(() => [v(P(z).img, {
+				src: e.image.src,
+				alt: e.image.alt,
+				width: e.image.width,
+				height: e.image.height,
+				draggable: !1,
+				drag: !0,
+				"drag-listener": e.zoom,
+				"drag-constraints": {
+					left: -e.pan.x,
+					right: e.pan.x,
+					top: -e.pan.y,
+					bottom: e.pan.y
+				},
+				"drag-elastic": .08,
+				"drag-momentum": !1,
+				animate: {
+					scale: e.zoom && e.present ? 2 : 1,
+					...e.present ? {} : {
+						x: 0,
+						y: 0
+					}
+				},
+				transition: P(s).reduce.value ? { duration: 0 } : P(i),
+				class: "block h-full w-full select-none object-contain",
+				style: w({
+					x: e.x,
+					y: e.y,
+					touchAction: e.zoom ? "none" : "pan-y",
+					cursor: e.zoom ? "grab" : void 0
+				}),
+				onError: n[0] ||= (e) => c.value && r("failed"),
+				onPointerdown: m,
+				onPointerup: h,
+				onPointercancel: g
+			}, null, 8, [
+				"src",
+				"alt",
+				"width",
+				"height",
+				"drag-listener",
+				"drag-constraints",
+				"animate",
+				"transition",
+				"style"
+			])]),
+			_: 1
+		}, 8, [
+			"inert",
+			"aria-hidden",
+			"style",
+			"custom"
+		]));
+	}
+}), ve = { class: "relative flex min-h-0 flex-1 items-center justify-center" }, ye = {
+	key: 0,
+	role: "status",
+	class: "absolute inset-0 flex items-center justify-center bg-neutral-900 p-4 text-center text-sm text-white"
+}, be = ["id"], xe = /* @__PURE__ */ s(/* @__PURE__ */ y({
+	__name: "ImageViewerFrame",
+	props: {
+		image: {},
+		index: {},
+		present: { type: Boolean }
+	},
+	setup(e) {
+		let t = e, r = W(), i = le(r), a = Symbol("viewer-frame");
+		function o() {
+			t.present && !r.reduce.value ? i.value = {
+				owner: a,
+				imageId: t.image.id
+			} : i.value?.owner === a && (i.value = void 0);
+		}
+		I(() => [
+			t.present,
+			t.image.id,
+			r.reduce.value
+		], o, { flush: "post" });
+		let s = k(!1), c = k(!1), l = k(null), u = k(null), d = k({
+			x: 0,
+			y: 0
+		}), _ = re(0), y = re(0), b = f(() => `${t.image.id}-${t.image.src}`), x = k(1), O = te(), A = t.index, j, M = !1;
+		function N() {
+			_.jump(0), y.jump(0);
+		}
+		let F, R;
+		I(b, () => {
+			R?.cancel(), R = void 0, x.value = t.index < A ? -1 : 1, A = t.index, s.value = !1, c.value = !1, N();
+		}, { flush: "pre" });
+		function B() {
+			let e = (e) => e.isConnected && e.dataset.orvuiViewerId === r.id && e.dataset.orvuiImageId === t.image.id, n = de(r);
+			return n && e(n) ? n : Array.from(V()?.ownerDocument.querySelectorAll("[data-orvui-viewer-id]") ?? []).find(e);
+		}
+		function V() {
+			return n(u.value);
+		}
+		function H(e) {
+			let t = e.querySelector("img") ?? e, n = t.style.transform;
+			t.style.transform = "none";
+			let r = t.getBoundingClientRect();
+			return t.style.transform = n, r;
+		}
+		function U(e, t, n) {
+			if (typeof e.animate == "function") try {
+				let r = e.animate(t, n);
+				return r.finished?.catch(() => void 0), r;
+			} catch {
+				return;
+			}
+		}
+		I(() => t.present, (e) => {
+			if (e) return;
+			let t = n(u.value);
+			if (!t) return;
+			let i = t.getBoundingClientRect();
+			R?.cancel(), R = void 0, F?.cancel(), F = void 0;
+			let a = (e) => {
+				F = U(t, [{ opacity: 1 }, { opacity: 0 }], {
+					duration: e,
+					fill: "forwards"
+				}), F || (t.style.opacity = "0");
+			};
+			if (r.reduce.value) {
+				a(100);
+				return;
+			}
+			let o = B();
+			if (!o) {
+				a(160);
+				return;
+			}
+			let s = t.style.transform;
+			t.style.transform = "none";
+			let c = t.getBoundingClientRect();
+			t.style.transform = s;
+			let l = H(o);
+			if (!c.width || !c.height || !l.width || !l.height) {
+				a(160);
+				return;
+			}
+			let d = (e) => `translate(${e.x - c.x}px, ${e.y - c.y}px) scale(${e.width / c.width}, ${e.height / c.height})`;
+			t.style.transformOrigin = "0 0", t.style.overflow = "hidden", F = U(t, [{
+				transform: d(i),
+				transformOrigin: "0px 0px",
+				borderRadius: "0px"
+			}, {
+				transform: d(l),
+				transformOrigin: "0px 0px",
+				borderRadius: getComputedStyle(o).borderRadius
+			}], {
+				duration: 420,
+				easing: "cubic-bezier(.4,0,.2,1)",
+				fill: "forwards"
+			}), F || (t.style.opacity = "0");
+		}, { flush: "post" });
+		function G() {
+			let e = n(u.value), t = l.value;
+			e && t && (d.value = he(e.clientWidth, e.clientHeight, t.clientWidth, t.clientHeight), _.set(Z(_.get(), d.value.x)), y.set(Z(y.get(), d.value.y)));
+		}
+		function K() {
+			N(), s.value = !s.value;
+		}
+		function q(e) {
+			if (!s.value) return;
+			let t = {
+				ArrowLeft: [-40, 0],
+				ArrowRight: [40, 0],
+				ArrowUp: [0, -40],
+				ArrowDown: [0, 40]
+			}[e.key];
+			t && (e.preventDefault(), e.stopPropagation(), _.set(Z(_.get() + t[0], d.value.x)), y.set(Z(y.get() + t[1], d.value.y)));
+		}
+		function J() {
+			let e = V();
+			if (!e || !t.present) return;
+			if (r.reduce.value) {
+				R = U(e, [{ opacity: 0 }, { opacity: 1 }], { duration: 100 });
+				return;
+			}
+			let n = B();
+			if (!n) return;
+			let i = H(n), a = e.getBoundingClientRect();
+			i.width && i.height && a.width && a.height && (e.style.transformOrigin = "0 0", e.style.overflow = "hidden", R = U(e, [{
+				transform: `translate(${i.x - a.x}px, ${i.y - a.y}px) scale(${i.width / a.width}, ${i.height / a.height})`,
+				borderRadius: getComputedStyle(n).borderRadius
+			}, {
+				transform: "none",
+				borderRadius: "0px"
+			}], {
+				duration: se.duration * 1e3,
+				easing: `cubic-bezier(${se.ease.join(",")})`,
+				fill: "both"
+			}));
+		}
+		return E(async () => {
+			if (o(), await S(), !M && (G(), J(), typeof ResizeObserver < "u")) {
+				j = new ResizeObserver(G);
+				for (let e of [l.value, n(u.value)]) e && j.observe(e);
+			}
+		}), T(() => {
+			i.value?.owner === a && (i.value = void 0), R?.cancel(), F?.cancel(), M = !0, j?.disconnect(), _.destroy(), y.destroy();
+		}), (t, n) => (D(), h("div", ve, [
+			g("div", {
+				ref_key: "bounds",
+				ref: l,
+				class: "flex h-full w-full items-center justify-center overflow-hidden rounded-lg"
+			}, [v(P(z).div, {
+				ref_key: "imageBox",
+				ref: u,
+				"data-lightbox-content": "",
+				class: "relative flex max-h-full max-w-full items-center justify-center",
+				style: w({
+					aspectRatio: `${e.image.width} / ${e.image.height}`,
+					width: `min(100%, calc((100dvh - 160px) * ${e.image.width / e.image.height}))`
+				})
+			}, {
+				default: L(() => [g("div", { class: C(["absolute inset-0", !s.value && "overflow-hidden"]) }, [v(P(ne), {
+					initial: !1,
+					custom: {
+						direction: x.value,
+						reduce: P(r).reduce.value
+					}
+				}, {
+					default: L(() => [(D(), p(_e, {
+						key: b.value,
+						image: e.image,
+						zoom: s.value,
+						present: e.present,
+						direction: x.value,
+						x: P(_),
+						y: P(y),
+						pan: d.value,
+						onFailed: n[0] ||= (e) => c.value = !0,
+						onSwipe: P(r).move
+					}, null, 8, [
+						"image",
+						"zoom",
+						"present",
+						"direction",
+						"x",
+						"y",
+						"pan",
+						"onSwipe"
+					]))]),
+					_: 1
+				}, 8, ["custom"])], 2), c.value ? (D(), h("p", ye, "Unable to load this image.")) : m("", !0)]),
+				_: 1
+			}, 8, ["style"])], 512),
+			v(P(z).button, {
+				initial: { opacity: 0 },
+				animate: { opacity: +!!e.present },
+				exit: {
+					opacity: 0,
+					transition: {
+						duration: .08,
+						delay: 0
+					}
+				},
+				transition: {
+					duration: P(r).reduce.value ? .1 : e.present ? .18 : .08,
+					delay: P(r).reduce.value || !e.present ? 0 : .16
+				},
+				type: "button",
+				"aria-label": s.value ? "Zoom out" : "Zoom in",
+				"aria-pressed": s.value,
+				"aria-describedby": P(O),
+				class: "orvui-image-viewer-zoom absolute bottom-3 right-3 inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30",
+				onClick: K,
+				onKeydown: q
+			}, {
+				default: L(() => [(D(), p(ee(s.value ? P(ie) : P(ae)), {
+					size: 18,
+					"aria-hidden": "true"
+				}))]),
+				_: 1
+			}, 8, [
+				"animate",
+				"transition",
+				"aria-label",
+				"aria-pressed",
+				"aria-describedby"
+			]),
+			g("span", {
+				id: P(O),
+				class: "sr-only"
+			}, "When zoomed in, drag the image to pan, or keep this control focused and use the arrow keys.", 8, be)
+		]));
+	}
+}), [["__scopeId", "data-v-20a044fa"]]), Se = {
+	"aria-live": "polite",
+	class: "text-xs tabular-nums"
+}, Ce = /* @__PURE__ */ y({
+	__name: "ImageViewerCounter",
+	setup(e) {
+		let t = W(), n = f(() => `${t.index.value + 1} / ${t.images.value.length}`);
+		return (e, t) => (D(), h("span", Se, N(n.value), 1));
+	}
+}), we = ["aria-label", "disabled"], Te = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerClose",
+	props: { disabled: { type: Boolean } },
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let n = t, r = W();
+		function i(e) {
+			n("click", e), e.defaultPrevented || r.select(null);
+		}
+		return (t, n) => (D(), h("button", x(t.$attrs, {
+			type: "button",
+			"aria-label": String(t.$attrs["aria-label"] ?? "Close viewer"),
+			disabled: e.disabled,
+			onClick: i,
+			class: P(c)("inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30", t.$attrs.class)
+		}), [j(t.$slots, "default", {}, () => [v(P(H), {
+			size: 18,
+			"aria-hidden": "true"
+		})])], 16, we));
+	}
+}), Ee = ["aria-label", "disabled"], De = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerPrevious",
+	props: { disabled: { type: Boolean } },
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let n = t, r = W();
+		function i(e) {
+			n("click", e), e.defaultPrevented || r.move(-1);
+		}
+		return (t, n) => (D(), h("button", x(t.$attrs, {
+			type: "button",
+			"aria-label": String(t.$attrs["aria-label"] ?? "Previous image"),
+			disabled: e.disabled || P(r).index.value <= 0,
+			onClick: i,
+			class: P(c)("inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30", t.$attrs.class)
+		}), [j(t.$slots, "default", {}, () => [v(P(B), {
+			size: 18,
+			"aria-hidden": "true"
+		})])], 16, Ee));
+	}
+}), Oe = ["aria-label", "disabled"], Q = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerNext",
+	props: { disabled: { type: Boolean } },
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let n = t, r = W();
+		function i(e) {
+			n("click", e), e.defaultPrevented || r.move(1);
+		}
+		return (t, n) => (D(), h("button", x(t.$attrs, {
+			type: "button",
+			"aria-label": String(t.$attrs["aria-label"] ?? "Next image"),
+			disabled: e.disabled || P(r).index.value < 0 || P(r).index.value >= P(r).images.value.length - 1,
+			onClick: i,
+			class: P(c)("inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30", t.$attrs.class)
+		}), [j(t.$slots, "default", {}, () => [v(P(V), {
+			size: 18,
+			"aria-hidden": "true"
+		})])], 16, Oe));
+	}
+}), ke = {
+	"aria-live": "polite",
+	"data-lightbox-content": "",
+	class: "min-w-0 text-center text-sm"
+}, Ae = /* @__PURE__ */ y({
+	__name: "ImageViewerCaption",
+	setup(e) {
+		let t = W(), n = f(() => {
+			let e = t.image.value;
+			return e ? t.renderCaption ? t.renderCaption(e) : e.caption ?? e.alt : null;
+		});
+		return (e, r) => (D(), h("div", ke, [j(e.$slots, "default", { image: P(t).image.value }, () => [v(P(l), { node: n.value }, null, 8, ["node"])])]));
+	}
+}), je = ["inert"], Me = ["aria-label", "aria-hidden"], Ne = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerSurface",
+	props: {
+		image: {},
+		index: {},
+		setPanel: { type: Function }
+	},
+	setup(e) {
+		let t = e, n = W(), r = f(() => !!n.image.value);
+		function i(e) {
+			e.target instanceof Element && !e.target.closest("button,a,input,select,textarea,[data-lightbox-content]") && (e.preventDefault(), n.select(null));
+		}
+		function o(e) {
+			e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target instanceof Element && e.target.closest("input,textarea,select,[contenteditable=\"true\"]") || (e.key === "ArrowLeft" || e.key === "ArrowRight") && (e.preventDefault(), n.move(e.key === "ArrowLeft" ? -1 : 1));
+		}
+		return (s, l) => (D(), p(P(z).div, {
+			class: "contents",
+			initial: !1,
+			animate: { opacity: 1 },
+			exit: { opacity: 1 },
+			transition: { duration: P(n).reduce.value ? .1 : .48 }
+		}, {
+			default: L(() => [v(P(z).button, {
+				type: "button",
+				tabindex: "-1",
+				"aria-hidden": "true",
+				inert: !r.value,
+				style: w({ pointerEvents: r.value ? "auto" : "none" }),
+				class: "fixed inset-0 z-[100] h-full w-full cursor-default bg-black/90",
+				initial: {
+					opacity: 0,
+					backdropFilter: "blur(0px)"
+				},
+				animate: {
+					opacity: +!!r.value,
+					backdropFilter: r.value && !P(n).reduce.value ? "blur(6px)" : "blur(0px)"
+				},
+				exit: {
+					opacity: 0,
+					backdropFilter: "blur(0px)",
+					transition: {
+						duration: P(n).reduce.value ? .1 : .46,
+						ease: [
+							.4,
+							0,
+							.6,
+							1
+						]
+					}
+				},
+				transition: {
+					duration: P(n).reduce.value ? .1 : r.value ? .28 : .46,
+					ease: r.value ? P(a) : [
+						.4,
+						0,
+						.6,
+						1
+					]
+				},
+				onClick: l[0] ||= (e) => P(n).select(null)
+			}, null, 8, [
+				"inert",
+				"style",
+				"animate",
+				"exit",
+				"transition"
+			]), g("div", {
+				inert: !r.value,
+				class: "pointer-events-none fixed inset-3 z-[101] sm:inset-6"
+			}, [g("div", x(s.$attrs, {
+				ref: (e) => t.setPanel(e),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": P(n).label.value,
+				tabindex: "-1",
+				"aria-hidden": !r.value || void 0,
+				style: { pointerEvents: r.value ? "auto" : "none" },
+				class: P(c)("flex h-full flex-col outline-none", s.$attrs.class),
+				onPointerdownCapture: i,
+				onKeydown: o
+			}), [
+				g("div", {
+					"data-lightbox-content": "",
+					style: w({ opacity: +!!r.value }),
+					class: "flex items-center justify-between gap-3 pb-3 text-white"
+				}, [j(s.$slots, "header", {}, () => [v(Ce), v(Te)])], 4),
+				v(xe, {
+					image: e.image,
+					index: e.index,
+					present: r.value
+				}, null, 8, [
+					"image",
+					"index",
+					"present"
+				]),
+				v(P(z).div, {
+					"data-lightbox-content": "",
+					class: "flex items-center justify-between gap-3 pt-3 text-white",
+					initial: {
+						opacity: 0,
+						y: P(n).reduce.value ? 0 : 6
+					},
+					animate: {
+						opacity: +!!r.value,
+						y: r.value || P(n).reduce.value ? 0 : 4
+					},
+					exit: {
+						opacity: 0,
+						y: P(n).reduce.value ? 0 : 4,
+						transition: {
+							duration: .08,
+							delay: 0
+						}
+					},
+					transition: {
+						duration: P(n).reduce.value ? .1 : r.value ? .18 : .08,
+						delay: P(n).reduce.value || !r.value ? 0 : .12,
+						ease: P(a)
+					}
+				}, {
+					default: L(() => [j(s.$slots, "default", {}, () => [
+						v(De),
+						v(Ae),
+						v(Q)
+					])]),
+					_: 3
+				}, 8, [
+					"initial",
+					"animate",
+					"exit",
+					"transition"
+				])
+			], 16, Me)], 8, je)]),
+			_: 3
+		}, 8, ["transition"]));
+	}
+}), Pe = ["inert"], $ = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewerContent",
+	setup(e) {
+		let t = W(), n = k(!1), r = k(null), i = k(null), a = f(() => n.value && !!t.image.value);
+		q(a, r, i, () => t.select(null));
+		let o = M(t.image.value), s = k(t.index.value);
+		I(() => [t.image.value, t.index.value], ([e, t]) => {
+			e && (o.value = e, s.value = t);
+		}, {
+			immediate: !0,
+			flush: "sync"
+		});
+		let c = k(0), l;
+		I(a, (e, r) => {
+			l !== void 0 && (clearTimeout(l), l = void 0), n.value && (e && !r && (++c.value, i.value = null), !e && r && (l = setTimeout(() => {
+				l = void 0, a.value || (o.value = void 0, ++c.value, i.value = null);
+			}, t.reduce.value ? 120 : 540)));
+		}, { flush: "sync" });
+		let u = 0;
+		I(() => t.image.value?.id, async (e, t) => {
+			let r = ++u;
+			if (!n.value || !e || !t || (await S(), !n.value || r !== u)) return;
+			let a = i.value?.ownerDocument.activeElement;
+			(!i.value?.contains(a ?? null) || a instanceof HTMLButtonElement && a.disabled) && (i.value?.querySelector("button:not(:disabled)") ?? i.value)?.focus({ preventScroll: !0 });
+		}), E(() => n.value = !0), T(() => {
+			n.value = !1, ++u, l !== void 0 && (clearTimeout(l), l = void 0);
+		});
+		function y(e) {
+			return (t) => {
+				e === c.value && (i.value = t);
+			};
+		}
+		return (e, t) => n.value ? (D(), p(d, {
+			key: 0,
+			to: "body"
+		}, [g("div", {
+			ref_key: "portal",
+			ref: r,
+			"data-image-viewer-portal": "",
+			inert: !a.value
+		}, [(D(), h("div", {
+			key: c.value,
+			class: "contents"
+		}, [v(P(ne), null, {
+			default: L(() => [o.value ? (D(), p(Ne, x({ key: 0 }, e.$attrs, {
+				image: o.value,
+				index: s.value,
+				"set-panel": y(c.value)
+			}), _({ _: 2 }, [e.$slots.header ? {
+				name: "header",
+				fn: L(() => [j(e.$slots, "header")]),
+				key: "0"
+			} : void 0, e.$slots.default ? {
+				name: "default",
+				fn: L(() => [j(e.$slots, "default")]),
+				key: "1"
+			} : void 0]), 1040, [
+				"image",
+				"index",
+				"set-panel"
+			])) : m("", !0)]),
+			_: 3
+		})]))], 8, Pe)])) : m("", !0);
+	}
+}), Fe = /* @__PURE__ */ y({
+	inheritAttrs: !1,
+	__name: "ImageViewer",
+	props: {
+		images: {},
+		modelValue: {},
+		value: {},
+		defaultValue: { default: null },
+		label: { default: "Image gallery" },
+		thumbnailClassName: {},
+		className: {},
+		renderCaption: {}
+	},
+	emits: [
+		"update:modelValue",
+		"valueChange",
+		"change"
+	],
+	setup(e, { emit: n }) {
+		let r = e, i = J(r, n), { select: a } = i, o = te(), s = t();
+		return O(U, {
+			...i,
+			images: f(() => r.images),
+			id: o,
+			label: f(() => r.label),
+			reduce: s,
+			get renderCaption() {
+				return r.renderCaption;
+			}
+		}), (t, n) => (D(), p(P(R), { id: P(o) }, {
+			default: L(() => [j(t.$slots, "default", {
+				images: e.images,
+				select: P(a)
+			}, () => [v(Y, x(t.$attrs, { class: P(c)(e.className, t.$attrs.class) }), {
+				default: L(() => [(D(!0), h(u, null, A(e.images, (t) => (D(), p(me, {
+					key: t.id,
+					"image-id": t.id,
+					class: C(e.thumbnailClassName)
+				}, null, 8, ["image-id", "class"]))), 128))]),
+				_: 1
+			}, 16, ["class"]), v($)])]),
+			_: 3
+		}, 8, ["id"]));
+	}
+});
+// src/motion/image-viewer/src/useImageViewer.ts
+function Ie() {
+	let e = W();
+	function t() {
+		e.select(null);
+	}
+	function n() {
+		e.move(-1);
+	}
+	function r() {
+		e.move(1);
+	}
+	return {
+		images: e.images,
+		value: e.value,
+		image: e.image,
+		index: e.index,
+		select: e.select,
+		close: t,
+		previous: n,
+		next: r,
+		hasPrevious: f(() => e.index.value > 0),
+		hasNext: f(() => e.index.value >= 0 && e.index.value + 1 < e.images.value.length)
+	};
+}
+export { Q as a, Ce as c, Ae as i, me as l, Fe as n, De as o, $ as r, Te as s, Ie as t, Y as u };
+
+//# sourceMappingURL=image-viewer-BsXLC7p3.js.map