@mantine-vue/lightbox 3.3.0

package/cjs/index.cjs

@@ -0,0 +1,1482 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let _mantine_vue_core = require("@mantine-vue/core");
+let vue = require("vue");
+let embla_carousel_vue = require("embla-carousel-vue");
+embla_carousel_vue = __toESM(embla_carousel_vue);
+//#region src/lightbox.context.ts
+var [provideLightboxContext, useLightboxContext] = (0, _mantine_vue_core.createSafeContext)("Lightbox component was not found in tree");
+//#endregion
+//#region src/LightboxCaption/LightboxCaption.vue
+var LightboxCaption_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxCaption",
+	inheritAttrs: false,
+	__name: "LightboxCaption",
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		const caption = (0, vue.computed)(() => ctx.slides[ctx.currentIndex]?.caption);
+		return (_ctx, _cache) => {
+			return caption.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, {
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("caption")
+			})), {
+				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => caption.value)))]),
+				_: 1
+			}, 16)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+//#endregion
+//#region src/LightboxNavigation/LightboxNavigation.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	width: "36",
+	height: "36",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+var _hoisted_2$2 = ["points"];
+var _hoisted_3$1 = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	width: "36",
+	height: "36",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = ["points"];
+//#endregion
+//#region src/LightboxNavigation/LightboxNavigation.vue
+var LightboxNavigation_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxNavigation",
+	inheritAttrs: false,
+	__name: "LightboxNavigation",
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		const { dir } = (0, _mantine_vue_core.useDirection)();
+		const canPrev = (0, vue.computed)(() => ctx.loop ? ctx.slides.length > 1 : ctx.currentIndex > 0);
+		const canNext = (0, vue.computed)(() => ctx.loop ? ctx.slides.length > 1 : ctx.currentIndex < ctx.slides.length - 1);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.guardReactiveProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("navigation")
+			})), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(ctx).getStyles("navigationButton"), {
+					"data-inactive": !canPrev.value || void 0,
+					"aria-disabled": !canPrev.value || void 0,
+					"aria-label": (0, vue.unref)(ctx).labels.previousSlideLabel,
+					tabindex: canPrev.value ? 0 : -1,
+					onClick: (0, vue.unref)(ctx).prev
+				}), {
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$3, [(0, vue.createElementVNode)("polyline", { points: (0, vue.unref)(dir) === "rtl" ? "9 18 15 12 9 6" : "15 18 9 12 15 6" }, null, 8, _hoisted_2$2)]))]),
+					_: 1
+				}, 16, [
+					"data-inactive",
+					"aria-disabled",
+					"aria-label",
+					"tabindex",
+					"onClick"
+				]), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(ctx).getStyles("navigationButton"), {
+					"data-inactive": !canNext.value || void 0,
+					"aria-disabled": !canNext.value || void 0,
+					"aria-label": (0, vue.unref)(ctx).labels.nextSlideLabel,
+					tabindex: canNext.value ? 0 : -1,
+					onClick: (0, vue.unref)(ctx).next
+				}), {
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$1, [(0, vue.createElementVNode)("polyline", { points: (0, vue.unref)(dir) === "rtl" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" }, null, 8, _hoisted_4)]))]),
+					_: 1
+				}, 16, [
+					"data-inactive",
+					"aria-disabled",
+					"aria-label",
+					"tabindex",
+					"onClick"
+				])]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/default-labels.ts
+var DEFAULT_LABELS = {
+	lightboxLabel: "Gallery",
+	slideLabel: (index, total) => `Slide ${index} of ${total}`,
+	slidesLabel: "Slides",
+	previousSlideLabel: "Previous slide",
+	nextSlideLabel: "Next slide",
+	thumbnailLabel: (index) => `Go to slide ${index}`,
+	enterFullscreenLabel: "Enter fullscreen",
+	exitFullscreenLabel: "Exit fullscreen",
+	showThumbnailsLabel: "Show thumbnails",
+	hideThumbnailsLabel: "Hide thumbnails",
+	downloadLabel: "Download",
+	closeLabel: "Close"
+};
+//#endregion
+//#region src/hooks/use-lightbox-zoom.ts
+var INITIAL_ZOOM_STATE = {
+	scale: 1,
+	translateX: 0,
+	translateY: 0,
+	isZoomed: false
+};
+function clampTranslate(state, image) {
+	if (!image) return state;
+	const maxX = image.offsetWidth * (state.scale - 1) / 2;
+	const maxY = image.offsetHeight * (state.scale - 1) / 2;
+	return {
+		...state,
+		translateX: Math.max(-maxX, Math.min(maxX, state.translateX)),
+		translateY: Math.max(-maxY, Math.min(maxY, state.translateY))
+	};
+}
+function useLightboxZoom({ enabled, maxScale, currentIndex }) {
+	const state = (0, vue.reactive)({ ...INITIAL_ZOOM_STATE });
+	const imageRef = (0, vue.ref)(null);
+	const isDragging = (0, vue.ref)(false);
+	const isAdjusting = (0, vue.ref)(false);
+	const didDrag = (0, vue.ref)(false);
+	const dragStart = {
+		x: 0,
+		y: 0
+	};
+	const translateStart = {
+		x: 0,
+		y: 0
+	};
+	const lastPinchDistance = (0, vue.ref)(null);
+	const lastPointerType = (0, vue.ref)("mouse");
+	const lastClickPointerType = (0, vue.ref)("mouse");
+	let adjustTimeout = -1;
+	const setState = (next) => Object.assign(state, next);
+	const resetZoom = () => {
+		setState(INITIAL_ZOOM_STATE);
+		isDragging.value = false;
+	};
+	const beginAdjust = () => {
+		isAdjusting.value = true;
+		window.clearTimeout(adjustTimeout);
+		adjustTimeout = window.setTimeout(() => {
+			isAdjusting.value = false;
+		}, 120);
+	};
+	const toggleZoom = () => {
+		if (!enabled()) return;
+		setState(state.isZoomed ? INITIAL_ZOOM_STATE : {
+			scale: Math.min(2, maxScale()),
+			translateX: 0,
+			translateY: 0,
+			isZoomed: true
+		});
+	};
+	const zoomAtPoint = (deltaScale, clientX, clientY) => {
+		const nextScale = Math.max(1, Math.min(maxScale(), state.scale + deltaScale));
+		if (nextScale === 1) {
+			resetZoom();
+			return;
+		}
+		const image = imageRef.value;
+		let translateX = state.translateX;
+		let translateY = state.translateY;
+		if (image && clientX !== void 0 && clientY !== void 0) {
+			const rect = image.getBoundingClientRect();
+			const scaleRatio = nextScale / state.scale;
+			const offsetX = clientX - (rect.left + rect.width / 2) + state.translateX;
+			const offsetY = clientY - (rect.top + rect.height / 2) + state.translateY;
+			translateX = offsetX * (1 - scaleRatio) + state.translateX * scaleRatio;
+			translateY = offsetY * (1 - scaleRatio) + state.translateY * scaleRatio;
+		}
+		setState(clampTranslate({
+			scale: nextScale,
+			translateX,
+			translateY,
+			isZoomed: true
+		}, image));
+	};
+	const panZoom = (deltaX, deltaY) => {
+		if (!state.isZoomed) return false;
+		setState(clampTranslate({
+			...state,
+			translateX: state.translateX + deltaX,
+			translateY: state.translateY + deltaY
+		}, imageRef.value));
+		return true;
+	};
+	const handleWheel = (event) => {
+		if (event.deltaY === 0) return;
+		event.preventDefault();
+		beginAdjust();
+		zoomAtPoint(event.deltaY > 0 ? -.2 : .2, event.clientX, event.clientY);
+	};
+	const setImageRef = (node) => {
+		imageRef.value?.removeEventListener("wheel", handleWheel);
+		imageRef.value = node instanceof HTMLImageElement ? node : null;
+		imageRef.value?.addEventListener("wheel", handleWheel, { passive: false });
+	};
+	const handlePointerDown = (event) => {
+		lastPointerType.value = event.pointerType || "mouse";
+		if (!state.isZoomed || !enabled()) return;
+		isDragging.value = true;
+		didDrag.value = false;
+		dragStart.x = event.clientX;
+		dragStart.y = event.clientY;
+		translateStart.x = state.translateX;
+		translateStart.y = state.translateY;
+		if (typeof event.target?.setPointerCapture === "function") event.target.setPointerCapture(event.pointerId);
+	};
+	const handlePointerMove = (event) => {
+		if (!isDragging.value || !enabled()) return;
+		const dx = event.clientX - dragStart.x;
+		const dy = event.clientY - dragStart.y;
+		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didDrag.value = true;
+		setState(clampTranslate({
+			...state,
+			translateX: translateStart.x + dx,
+			translateY: translateStart.y + dy
+		}, imageRef.value));
+	};
+	const handlePointerUp = () => {
+		isDragging.value = false;
+	};
+	const handlePointerCancel = () => {
+		isDragging.value = false;
+		didDrag.value = false;
+		lastPinchDistance.value = null;
+	};
+	const handleTouchMove = (event) => {
+		if (!enabled() || event.touches.length !== 2) {
+			lastPinchDistance.value = null;
+			return;
+		}
+		const [touch1, touch2] = event.touches;
+		const distance = Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY);
+		if (lastPinchDistance.value !== null) {
+			beginAdjust();
+			zoomAtPoint((distance - lastPinchDistance.value) * .01, (touch1.clientX + touch2.clientX) / 2, (touch1.clientY + touch2.clientY) / 2);
+		}
+		lastPinchDistance.value = distance;
+	};
+	const handleTouchEnd = () => {
+		lastPinchDistance.value = null;
+	};
+	const handleClick = (event) => {
+		if (!enabled() || event.detail > 1) return;
+		if (didDrag.value) {
+			didDrag.value = false;
+			return;
+		}
+		const pointerType = lastPointerType.value;
+		lastPointerType.value = "mouse";
+		lastClickPointerType.value = pointerType;
+		if (pointerType !== "touch") toggleZoom();
+	};
+	const handleDoubleClick = () => {
+		if (enabled() && lastClickPointerType.value === "touch") toggleZoom();
+	};
+	const imageStyle = (0, vue.computed)(() => ({ transform: `scale(${state.scale}) translate(${state.translateX / state.scale}px, ${state.translateY / state.scale}px)` }));
+	const publicState = (0, vue.computed)(() => ({
+		scale: state.scale,
+		isZoomed: state.isZoomed
+	}));
+	const getImageProps = () => ({
+		ref: setImageRef,
+		style: imageStyle.value,
+		"data-zoom-enabled": enabled() || void 0,
+		"data-zoomed": state.isZoomed || void 0,
+		"data-dragging": isDragging.value || isAdjusting.value || void 0,
+		onPointerdown: handlePointerDown,
+		onPointermove: handlePointerMove,
+		onPointerup: handlePointerUp,
+		onPointercancel: handlePointerCancel,
+		onLostpointercapture: handlePointerUp,
+		onClick: handleClick,
+		onDblclick: handleDoubleClick,
+		onTouchmove: handleTouchMove,
+		onTouchend: handleTouchEnd
+	});
+	(0, vue.watch)([currentIndex, enabled], ([, isEnabled]) => {
+		if (!isEnabled || state.isZoomed) resetZoom();
+		if (!isEnabled) {
+			lastPinchDistance.value = null;
+			didDrag.value = false;
+		}
+	});
+	(0, vue.onBeforeUnmount)(() => {
+		window.clearTimeout(adjustTimeout);
+		imageRef.value?.removeEventListener("wheel", handleWheel);
+	});
+	return {
+		zoomState: publicState,
+		toggleZoom,
+		resetZoom,
+		panZoom,
+		getImageProps
+	};
+}
+var Lightbox_module_default = {
+	root: "_root_13vd4_1",
+	overlay: "_overlay_13vd4_9",
+	content: "_content_13vd4_15",
+	toolbar: "_toolbar_13vd4_24",
+	toolbarGroup: "_toolbarGroup_13vd4_33",
+	toolbarButton: "_toolbarButton_13vd4_38",
+	counter: "_counter_13vd4_55",
+	slides: "_slides_13vd4_61",
+	slidesViewport: "_slidesViewport_13vd4_67",
+	slidesContainer: "_slidesContainer_13vd4_72",
+	slide: "_slide_13vd4_61",
+	slideImage: "_slideImage_13vd4_85",
+	slideVideo: "_slideVideo_13vd4_108",
+	thumbnails: "_thumbnails_13vd4_115",
+	thumbnailsViewport: "_thumbnailsViewport_13vd4_121",
+	thumbnailsContainer: "_thumbnailsContainer_13vd4_128",
+	thumbnail: "_thumbnail_13vd4_115",
+	thumbnailImage: "_thumbnailImage_13vd4_156",
+	navigation: "_navigation_13vd4_161",
+	navigationButton: "_navigationButton_13vd4_172",
+	caption: "_caption_13vd4_190",
+	closeButton: "_closeButton_13vd4_198"
+};
+//#endregion
+//#region src/LightboxRoot/LightboxRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["aria-label"];
+var _hoisted_2$1 = {
+	key: 0,
+	"data-autofocus": "",
+	tabindex: "0",
+	style: {
+		"position": "fixed",
+		"width": "1px",
+		"height": "1px",
+		"overflow": "hidden"
+	}
+};
+var lightboxRootDefaultProps = {
+	withZoom: false,
+	withThumbnails: false,
+	withFullscreen: false,
+	withDownload: false,
+	loop: false,
+	closeOnClickOutside: false,
+	closeOnSwipeDown: true,
+	withKeyboardEvents: true,
+	returnFocus: true,
+	withInitialFocusPlaceholder: true,
+	withinPortal: true,
+	transitionDuration: 200,
+	zoomMaxScale: 3,
+	withSlideTransition: false
+};
+//#endregion
+//#region src/LightboxRoot/LightboxRoot.vue
+var LightboxRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxRoot",
+	inheritAttrs: false,
+	__name: "LightboxRoot",
+	props: {
+		opened: { type: Boolean },
+		slides: {},
+		currentIndex: { default: void 0 },
+		labels: { default: void 0 },
+		withZoom: {
+			type: Boolean,
+			default: void 0
+		},
+		withThumbnails: {
+			type: Boolean,
+			default: void 0
+		},
+		withFullscreen: {
+			type: Boolean,
+			default: void 0
+		},
+		withDownload: {
+			type: Boolean,
+			default: void 0
+		},
+		loop: {
+			type: Boolean,
+			default: void 0
+		},
+		closeOnClickOutside: {
+			type: Boolean,
+			default: void 0
+		},
+		closeOnSwipeDown: {
+			type: Boolean,
+			default: void 0
+		},
+		withKeyboardEvents: {
+			type: Boolean,
+			default: void 0
+		},
+		returnFocus: {
+			type: Boolean,
+			default: void 0
+		},
+		withInitialFocusPlaceholder: {
+			type: Boolean,
+			default: void 0
+		},
+		withinPortal: {
+			type: Boolean,
+			default: void 0
+		},
+		zIndex: { default: void 0 },
+		transitionDuration: { default: void 0 },
+		transitionProps: { default: void 0 },
+		emblaOptions: { default: void 0 },
+		zoomMaxScale: { default: void 0 },
+		withSlideTransition: {
+			type: Boolean,
+			default: void 0
+		},
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"close",
+		"update:opened",
+		"indexChange",
+		"update:currentIndex"
+	],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const props = (0, _mantine_vue_core.useProps)("LightboxRoot", lightboxRootDefaultProps, rawProps);
+		const attrs = (0, vue.useAttrs)();
+		const contentRef = (0, vue.ref)(null);
+		const internalIndex = (0, vue.ref)(props.currentIndex ?? 0);
+		const thumbnailsVisible = (0, vue.ref)(Boolean(props.withThumbnails));
+		const isFullscreen = (0, vue.ref)(false);
+		const ownsFullscreen = (0, vue.ref)(false);
+		const { dir } = (0, _mantine_vue_core.useDirection)();
+		let previousActive = null;
+		let previousOverflow = "";
+		const labels = (0, vue.computed)(() => ({
+			...DEFAULT_LABELS,
+			...props.labels
+		}));
+		const currentIndex = (0, vue.computed)(() => props.currentIndex ?? internalIndex.value);
+		const currentSlideLabel = (0, vue.computed)(() => {
+			const slide = props.slides[currentIndex.value];
+			if (!slide || slide.type === "custom") return void 0;
+			return slide.type === "video" ? slide.label : slide.alt;
+		});
+		const zoom = useLightboxZoom({
+			enabled: () => props.withZoom,
+			maxScale: () => props.zoomMaxScale,
+			currentIndex: () => currentIndex.value
+		});
+		const getStyles = (0, _mantine_vue_core.useStyles)({
+			name: "Lightbox",
+			props,
+			classes: Lightbox_module_default,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			vars: props.vars
+		});
+		const rootStyle = (0, vue.computed)(() => ({
+			"--lightbox-transition-duration": `${props.transitionDuration}ms`,
+			"--lightbox-z-index": props.zIndex == null ? void 0 : String(props.zIndex)
+		}));
+		const contentTransition = (0, vue.computed)(() => ({
+			transition: {
+				common: { transformOrigin: "center center" },
+				in: {
+					opacity: 1,
+					transform: "scale(1)"
+				},
+				out: {
+					opacity: 0,
+					transform: "scale(0.95)"
+				},
+				transitionProperty: "transform, opacity"
+			},
+			duration: props.transitionDuration,
+			timingFunction: "ease",
+			...props.transitionProps
+		}));
+		const overlayTransition = (0, vue.computed)(() => ({
+			transition: "fade",
+			duration: contentTransition.value.duration,
+			exitDuration: contentTransition.value.exitDuration,
+			timingFunction: contentTransition.value.timingFunction,
+			enterDelay: contentTransition.value.enterDelay,
+			exitDelay: contentTransition.value.exitDelay,
+			keepMounted: contentTransition.value.keepMounted
+		}));
+		const setIndex = (index) => {
+			const next = Math.max(0, Math.min(Math.round(index), Math.max(0, props.slides.length - 1)));
+			if (next === currentIndex.value) return;
+			internalIndex.value = next;
+			emit("update:currentIndex", next);
+			emit("indexChange", next);
+		};
+		const next = () => setIndex(currentIndex.value + 1 < props.slides.length ? currentIndex.value + 1 : props.loop && props.slides.length ? 0 : currentIndex.value);
+		const prev = () => setIndex(currentIndex.value > 0 ? currentIndex.value - 1 : props.loop && props.slides.length ? props.slides.length - 1 : 0);
+		const close = () => {
+			emit("update:opened", false);
+			emit("close");
+		};
+		const toggleThumbnails = () => {
+			thumbnailsVisible.value = !thumbnailsVisible.value;
+		};
+		const toggleFullscreen = async () => {
+			if (!props.withFullscreen || typeof document === "undefined") return;
+			if (document.fullscreenElement) {
+				ownsFullscreen.value = false;
+				await document.exitFullscreen?.();
+			} else {
+				await contentRef.value?.requestFullscreen?.();
+				ownsFullscreen.value = document.fullscreenElement === contentRef.value;
+			}
+			isFullscreen.value = Boolean(document.fullscreenElement);
+		};
+		const handleKeydown = (event) => {
+			if (!props.opened) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				close();
+				return;
+			}
+			if (!props.withKeyboardEvents || event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return;
+			if (event.target instanceof Element) {
+				if (event.target.closest("input, textarea, select, video, audio, [contenteditable]")) return;
+				if (event.target.closest("[data-lightbox-slide]") && event.target.closest("button, a[href], [role=\"button\"], [role=\"link\"], [role=\"slider\"], [role=\"textbox\"], [role=\"combobox\"], [role=\"listbox\"], [role=\"menu\"], [role=\"tablist\"], [role=\"tree\"], [role=\"grid\"]")) return;
+			}
+			const leading = dir.value === "rtl" ? next : prev;
+			const trailing = dir.value === "rtl" ? prev : next;
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				if (!zoom.panZoom(50, 0)) leading();
+			}
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
+				if (!zoom.panZoom(-50, 0)) trailing();
+			}
+			if (event.key === "ArrowUp" && zoom.panZoom(0, 50)) event.preventDefault();
+			if (event.key === "ArrowDown" && zoom.panZoom(0, -50)) event.preventDefault();
+			if (event.key.toLowerCase() === "f" && props.withFullscreen) {
+				event.preventDefault();
+				toggleFullscreen();
+			}
+			if (event.key.toLowerCase() === "t" && props.withThumbnails) {
+				event.preventDefault();
+				toggleThumbnails();
+			}
+			if (event.key.toLowerCase() === "z" && props.withZoom) {
+				event.preventDefault();
+				zoom.toggleZoom();
+			}
+		};
+		const handleFullscreen = () => {
+			isFullscreen.value = Boolean(document.fullscreenElement);
+			if (!document.fullscreenElement) ownsFullscreen.value = false;
+		};
+		(0, vue.watch)(() => props.currentIndex, (value) => {
+			if (value != null) internalIndex.value = value;
+		});
+		(0, vue.watch)(() => props.withThumbnails, (value) => {
+			thumbnailsVisible.value = Boolean(value);
+		});
+		(0, vue.watch)(() => props.slides.length, (length) => {
+			if (length > 0 && currentIndex.value > length - 1) setIndex(length - 1);
+		});
+		(0, vue.watch)(() => props.opened, async (opened) => {
+			if (typeof document === "undefined") return;
+			if (opened) {
+				previousActive = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				previousOverflow = document.body.style.overflow;
+				document.body.style.overflow = "hidden";
+				document.addEventListener("keydown", handleKeydown);
+				document.addEventListener("fullscreenchange", handleFullscreen);
+				await (0, vue.nextTick)();
+				contentRef.value?.focus({ preventScroll: true });
+			} else {
+				zoom.resetZoom();
+				thumbnailsVisible.value = Boolean(props.withThumbnails);
+				if (ownsFullscreen.value && document.fullscreenElement) {
+					ownsFullscreen.value = false;
+					document.exitFullscreen?.().catch(() => {});
+				}
+				document.body.style.overflow = previousOverflow;
+				document.removeEventListener("keydown", handleKeydown);
+				document.removeEventListener("fullscreenchange", handleFullscreen);
+				if (props.returnFocus) previousActive?.focus({ preventScroll: true });
+			}
+		}, { immediate: true });
+		(0, vue.onBeforeUnmount)(() => {
+			if (typeof document !== "undefined") {
+				if (ownsFullscreen.value && document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
+				document.body.style.overflow = previousOverflow;
+				document.removeEventListener("keydown", handleKeydown);
+				document.removeEventListener("fullscreenchange", handleFullscreen);
+			}
+		});
+		provideLightboxContext({
+			getStyles,
+			get labels() {
+				return labels.value;
+			},
+			get opened() {
+				return props.opened;
+			},
+			get slides() {
+				return props.slides;
+			},
+			get currentIndex() {
+				return currentIndex.value;
+			},
+			setIndex,
+			next,
+			prev,
+			close,
+			get thumbnailsVisible() {
+				return thumbnailsVisible.value;
+			},
+			toggleThumbnails,
+			get isFullscreen() {
+				return isFullscreen.value;
+			},
+			toggleFullscreen,
+			get zoomed() {
+				return zoom.zoomState.value.isZoomed;
+			},
+			toggleZoom: zoom.toggleZoom,
+			get zoomScale() {
+				return zoom.zoomState.value.scale;
+			},
+			panZoom: zoom.panZoom,
+			getImageZoomProps: zoom.getImageProps,
+			get withZoom() {
+				return props.withZoom;
+			},
+			get withThumbnails() {
+				return props.withThumbnails;
+			},
+			get withFullscreen() {
+				return props.withFullscreen;
+			},
+			get withDownload() {
+				return props.withDownload;
+			},
+			get loop() {
+				return props.loop;
+			},
+			get closeOnSwipeDown() {
+				return props.closeOnSwipeDown;
+			},
+			get closeOnClickOutside() {
+				return props.closeOnClickOutside;
+			},
+			get withSlideTransition() {
+				return props.withSlideTransition;
+			},
+			get transitionDuration() {
+				return props.transitionDuration;
+			},
+			get emblaOptions() {
+				return props.emblaOptions;
+			}
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+				to: "body",
+				disabled: !(0, vue.unref)(props).withinPortal
+			}, [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)((0, vue.unref)(getStyles)("root"), { style: rootStyle.value }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Transition), (0, vue.mergeProps)({ mounted: (0, vue.unref)(props).opened }, overlayTransition.value), {
+					default: (0, vue.withCtx)((transitionStyles) => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)((0, vue.unref)(getStyles)("overlay", { style: transitionStyles }), { onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(props).closeOnClickOutside ? close() : void 0) }), null, 16)]),
+					_: 1
+				}, 16, ["mounted"]), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Transition), (0, vue.mergeProps)({ mounted: (0, vue.unref)(props).opened }, contentTransition.value), {
+					default: (0, vue.withCtx)((transitionStyles) => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.FocusTrap), { active: (0, vue.unref)(props).opened }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+							ref_key: "contentRef",
+							ref: contentRef
+						}, {
+							...(0, vue.unref)(attrs),
+							...(0, vue.unref)(getStyles)("content", { style: transitionStyles })
+						}, {
+							role: "dialog",
+							"aria-modal": "true",
+							"aria-label": labels.value.lightboxLabel,
+							tabindex: "-1",
+							onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)(($event) => (0, vue.unref)(props).closeOnClickOutside ? close() : void 0, ["self"]))
+						}), [
+							(0, vue.unref)(props).withInitialFocusPlaceholder ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$1)) : (0, vue.createCommentVNode)("", true),
+							(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.VisuallyHidden), {
+								role: "status",
+								"aria-live": "polite",
+								"aria-atomic": "true"
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.unref)(props).slides.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labels.value.slideLabel(currentIndex.value + 1, (0, vue.unref)(props).slides.length)), 1), currentSlideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)(": " + (0, vue.toDisplayString)(currentSlideLabel.value), 1)], 64)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true)]),
+								_: 1
+							}),
+							(0, vue.renderSlot)(_ctx.$slots, "default")
+						], 16, _hoisted_1$2)]),
+						_: 2
+					}, 1032, ["active"])]),
+					_: 3
+				}, 16, ["mounted"])]),
+				_: 3
+			}, 16, ["style"])], 8, ["disabled"]);
+		};
+	}
+});
+//#endregion
+//#region src/LightboxSlide/LightboxSlide.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = [
+	"src",
+	"poster",
+	"aria-label",
+	"autoplay",
+	"tabindex"
+];
+var _hoisted_2 = [
+	"src",
+	"kind",
+	"srclang",
+	"label",
+	"default"
+];
+var _hoisted_3 = [
+	"src",
+	"alt",
+	"srcset",
+	"sizes",
+	"loading"
+];
+//#endregion
+//#region src/LightboxSlide/LightboxSlide.vue
+var LightboxSlide_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxSlide",
+	inheritAttrs: false,
+	__name: "LightboxSlide",
+	props: {
+		slide: {},
+		index: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		const active = (0, vue.computed)(() => props.index === ctx.currentIndex);
+		const image = (0, vue.computed)(() => props.slide);
+		const video = (0, vue.computed)(() => props.slide);
+		const custom = (0, vue.computed)(() => props.slide);
+		const videoRef = (0, vue.ref)(null);
+		(0, vue.watch)(active, (isActive) => {
+			if (!videoRef.value) return;
+			if (!isActive) videoRef.value.pause();
+			else if (video.value.autoPlay) videoRef.value.play().catch(() => {});
+		}, { flush: "post" });
+		function handleClick(event) {
+			if (ctx.closeOnClickOutside && !event.defaultPrevented && event.target === event.currentTarget) ctx.close();
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("slide")
+			}, {
+				role: "group",
+				"aria-roledescription": "slide",
+				"data-lightbox-slide": "",
+				"aria-label": (0, vue.unref)(ctx).labels.slideLabel(__props.index + 1, (0, vue.unref)(ctx).slides.length),
+				"aria-hidden": !active.value || void 0,
+				inert: !active.value || void 0,
+				onClick: handleClick
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
+					slide: __props.slide,
+					active: active.value
+				}, () => [__props.slide.type === "custom" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => custom.value.render({ active: active.value })), { key: 0 })) : __props.slide.type === "video" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("video", (0, vue.mergeProps)({
+					key: 1,
+					ref_key: "videoRef",
+					ref: videoRef
+				}, (0, vue.unref)(ctx).getStyles("slideVideo"), {
+					src: video.value.src,
+					poster: video.value.poster,
+					"aria-label": video.value.label,
+					autoplay: video.value.autoPlay && active.value,
+					controls: "",
+					tabindex: active.value ? 0 : -1
+				}), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(video.value.tracks, (track) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("track", {
+						key: `${track.src}-${track.srcLang}`,
+						src: track.src,
+						kind: track.kind ?? "subtitles",
+						srclang: track.srcLang,
+						label: track.label,
+						default: track.default
+					}, null, 8, _hoisted_2);
+				}), 128))], 16, _hoisted_1$1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", (0, vue.mergeProps)({ key: 2 }, {
+					...(0, vue.unref)(ctx).getStyles("slideImage"),
+					...active.value && (0, vue.unref)(ctx).withZoom ? (0, vue.unref)(ctx).getImageZoomProps() : {}
+				}, {
+					src: image.value.src,
+					alt: image.value.alt ?? "",
+					srcset: image.value.srcSet,
+					sizes: image.value.sizes,
+					loading: image.value.loading ?? (active.value ? "eager" : "lazy"),
+					draggable: "false"
+				}), null, 16, _hoisted_3))])]),
+				_: 3
+			}, 16, [
+				"aria-label",
+				"aria-hidden",
+				"inert"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/LightboxSlides/LightboxSlides.vue
+var LightboxSlides_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxSlides",
+	inheritAttrs: false,
+	__name: "LightboxSlides",
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		const { dir } = (0, _mantine_vue_core.useDirection)();
+		const swipeStart = (0, vue.ref)(null);
+		const startIndex = ctx.currentIndex;
+		const [emblaNode, emblaApi] = (0, embla_carousel_vue.default)((0, vue.computed)(() => {
+			const userWatchDrag = ctx.emblaOptions?.watchDrag;
+			return {
+				align: "center",
+				containScroll: false,
+				direction: dir.value,
+				...ctx.emblaOptions,
+				axis: "x",
+				loop: ctx.loop,
+				startIndex,
+				watchDrag: (api, event) => {
+					if (ctx.zoomed) return false;
+					return typeof userWatchDrag === "function" ? userWatchDrag(api, event) : userWatchDrag ?? true;
+				}
+			};
+		}), (0, vue.computed)(() => []));
+		function handleSelect(api) {
+			const index = api.selectedScrollSnap();
+			if (index !== ctx.currentIndex) ctx.setIndex(index);
+		}
+		(0, vue.watch)(emblaApi, (api, previousApi) => {
+			previousApi?.off("select", handleSelect);
+			api?.on("select", handleSelect);
+		}, { immediate: true });
+		(0, vue.watch)(() => ctx.currentIndex, (index) => {
+			const api = emblaApi.value;
+			if (api && api.selectedScrollSnap() !== index) api.scrollTo(index, !ctx.withSlideTransition);
+		});
+		function handlePointerDown(event) {
+			swipeStart.value = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		}
+		function handlePointerUp(event) {
+			if (!swipeStart.value || !ctx.closeOnSwipeDown || ctx.zoomed) return;
+			const x = event.clientX - swipeStart.value.x;
+			const y = event.clientY - swipeStart.value.y;
+			swipeStart.value = null;
+			if (y > 80 && y > Math.abs(x)) ctx.close();
+		}
+		(0, vue.onBeforeUnmount)(() => emblaApi.value?.off("select", handleSelect));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("slides")
+			}, {
+				role: "region",
+				"aria-roledescription": "carousel",
+				"aria-label": (0, vue.unref)(ctx).labels.slidesLabel
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+					ref_key: "emblaNode",
+					ref: emblaNode
+				}, (0, vue.unref)(ctx).getStyles("slidesViewport"), {
+					onPointerdown: handlePointerDown,
+					onPointerup: handlePointerUp,
+					onPointercancel: _cache[0] || (_cache[0] = ($event) => swipeStart.value = null)
+				}), [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("slidesContainer"))), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16)], 16)]),
+				_: 3
+			}, 16, ["aria-label"]);
+		};
+	}
+});
+//#endregion
+//#region src/LightboxThumbnails/LightboxThumbnails.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src"];
+//#endregion
+//#region src/LightboxThumbnails/LightboxThumbnails.vue
+var LightboxThumbnails_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxThumbnails",
+	inheritAttrs: false,
+	__name: "LightboxThumbnails",
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		const { dir } = (0, _mantine_vue_core.useDirection)();
+		const [emblaNode, emblaApi] = (0, embla_carousel_vue.default)((0, vue.computed)(() => ({
+			containScroll: "keepSnaps",
+			dragFree: true,
+			direction: dir.value,
+			active: ctx.withThumbnails
+		})), (0, vue.computed)(() => []));
+		function getThumbnailSource(slide) {
+			return slide.thumbSrc ?? (slide.type === "video" ? slide.poster : void 0) ?? (slide.type !== "custom" ? slide.src : void 0);
+		}
+		(0, vue.watch)([emblaApi, () => ctx.currentIndex], ([api, index]) => api?.scrollTo(index), { immediate: true });
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(ctx).withThumbnails ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Collapse), (0, vue.mergeProps)({
+				key: 0,
+				expanded: (0, vue.unref)(ctx).thumbnailsVisible,
+				"transition-duration": (0, vue.unref)(ctx).transitionDuration,
+				"keep-mounted": false
+			}, {
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("thumbnails")
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+					ref_key: "emblaNode",
+					ref: emblaNode
+				}, (0, vue.unref)(ctx).getStyles("thumbnailsViewport")), [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("thumbnailsContainer"))), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).slides, (slide, index) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ key: index }, { ref_for: true }, (0, vue.unref)(ctx).getStyles("thumbnail"), {
+						"data-active": index === (0, vue.unref)(ctx).currentIndex || void 0,
+						"aria-label": (0, vue.unref)(ctx).labels.thumbnailLabel(index + 1, (0, vue.unref)(ctx).slides.length),
+						"aria-current": index === (0, vue.unref)(ctx).currentIndex || void 0,
+						onClick: ($event) => (0, vue.unref)(ctx).setIndex(index)
+					}), {
+						default: (0, vue.withCtx)(() => [slide.type === "custom" && slide.renderThumb ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => slide.renderThumb?.()), { key: 0 })) : getThumbnailSource(slide) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", (0, vue.mergeProps)({
+							key: 1,
+							ref_for: true
+						}, (0, vue.unref)(ctx).getStyles("thumbnailImage"), {
+							src: getThumbnailSource(slide),
+							alt: "",
+							loading: "lazy",
+							draggable: "false"
+						}), null, 16, _hoisted_1)) : (0, vue.createCommentVNode)("", true)]),
+						_: 2
+					}, 1040, [
+						"data-active",
+						"aria-label",
+						"aria-current",
+						"onClick"
+					]);
+				}), 128))], 16)], 16)]),
+				_: 1
+			}, 16, ["expanded", "transition-duration"])) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+//#endregion
+//#region src/LightboxToolbar/toolbar-items.ts
+var ALLOWED_DOWNLOAD_PROTOCOLS = [
+	"http:",
+	"https:",
+	"blob:",
+	"data:"
+];
+var downloadsInProgress = /* @__PURE__ */ new Set();
+var icon = (path) => (0, vue.h)("svg", {
+	viewBox: "0 0 24 24",
+	width: 20,
+	height: 20,
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, [(0, vue.h)("path", { d: path })]);
+function parseDownloadUrl(src) {
+	try {
+		const url = new URL(src, window.location.href);
+		return ALLOWED_DOWNLOAD_PROTOCOLS.includes(url.protocol) ? url : null;
+	} catch {
+		return null;
+	}
+}
+function getDownloadFileName(url) {
+	if (url.protocol === "data:") return "download";
+	const lastSegment = url.pathname.split("/").pop() || "";
+	try {
+		return decodeURIComponent(lastSegment) || "download";
+	} catch {
+		return lastSegment || "download";
+	}
+}
+function openInNewTab(src) {
+	const link = document.createElement("a");
+	link.href = src;
+	link.target = "_blank";
+	link.rel = "noopener noreferrer";
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+}
+function downloadFile(src) {
+	const url = parseDownloadUrl(src);
+	if (!url || downloadsInProgress.has(src)) return;
+	if ((url.protocol === "http:" || url.protocol === "https:") && url.origin !== window.location.origin) {
+		openInNewTab(src);
+		return;
+	}
+	downloadsInProgress.add(src);
+	fetch(src).then((response) => {
+		if (!response.ok) throw new Error(`Failed to download ${src}: ${response.status}`);
+		return response.blob();
+	}).then((blob) => {
+		const objectUrl = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = objectUrl;
+		link.download = getDownloadFileName(url);
+		document.body.appendChild(link);
+		link.click();
+		link.remove();
+		window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1e3);
+	}).catch(() => openInNewTab(src)).finally(() => downloadsInProgress.delete(src));
+}
+function createFullscreenToolbarItem(toggle, isFullscreen, labels = DEFAULT_LABELS) {
+	return {
+		key: "fullscreen",
+		icon: icon(isFullscreen ? "M9 3v6H3V7h4V3h2zm6 0h2v4h4v2h-6V3zM3 15h6v6H7v-4H3v-2zm12 0h6v2h-4v4h-2v-6z" : "M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm18 0v6h-6v-2h4v-4h2z"),
+		label: isFullscreen ? labels.exitFullscreenLabel : labels.enterFullscreenLabel,
+		onClick: toggle,
+		position: "right"
+	};
+}
+function createThumbnailsToolbarItem(toggle, visible, labels = DEFAULT_LABELS) {
+	return {
+		key: "thumbnails",
+		icon: icon("M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"),
+		label: visible ? labels.hideThumbnailsLabel : labels.showThumbnailsLabel,
+		onClick: toggle,
+		position: "left"
+	};
+}
+function createDownloadToolbarItem(src, labels = DEFAULT_LABELS) {
+	return {
+		key: "download",
+		icon: icon("M12 16l-6-6h4V4h4v6h4l-6 6zm-8 2h16v2H4v-2z"),
+		label: labels.downloadLabel,
+		position: "right",
+		onClick: () => downloadFile(src)
+	};
+}
+function createCloseToolbarItem(onClose, labels = DEFAULT_LABELS) {
+	return {
+		key: "close",
+		icon: icon("M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7a1 1 0 0 0-1.4 1.4L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4z"),
+		label: labels.closeLabel,
+		onClick: onClose,
+		position: "right"
+	};
+}
+//#endregion
+//#region src/LightboxToolbar/LightboxToolbar.vue
+var LightboxToolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxToolbar",
+	inheritAttrs: false,
+	__name: "LightboxToolbar",
+	props: { toolbarItems: { type: [Array, Function] } },
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		const payload = (0, vue.computed)(() => ({
+			slides: ctx.slides,
+			currentIndex: ctx.currentIndex,
+			setIndex: ctx.setIndex,
+			next: ctx.next,
+			prev: ctx.prev,
+			close: ctx.close,
+			thumbnailsVisible: ctx.thumbnailsVisible,
+			toggleThumbnails: ctx.toggleThumbnails,
+			isFullscreen: ctx.isFullscreen,
+			toggleFullscreen: ctx.toggleFullscreen,
+			zoomed: ctx.zoomed,
+			toggleZoom: ctx.toggleZoom,
+			labels: ctx.labels
+		}));
+		const items = (0, vue.computed)(() => {
+			if (typeof props.toolbarItems === "function") return props.toolbarItems(payload.value);
+			if (props.toolbarItems) return props.toolbarItems;
+			const result = [];
+			if (ctx.withThumbnails) result.push(createThumbnailsToolbarItem(ctx.toggleThumbnails, ctx.thumbnailsVisible, ctx.labels));
+			if (ctx.withFullscreen) result.push(createFullscreenToolbarItem(ctx.toggleFullscreen, ctx.isFullscreen, ctx.labels));
+			const slide = ctx.slides[ctx.currentIndex];
+			if (ctx.withDownload && slide && slide.type !== "custom") result.push(createDownloadToolbarItem(slide.src, ctx.labels));
+			result.push(createCloseToolbarItem(ctx.close, ctx.labels));
+			return result;
+		});
+		const left = (0, vue.computed)(() => items.value.filter((item) => item.position === "left"));
+		const right = (0, vue.computed)(() => items.value.filter((item) => item.position !== "left"));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.guardReactiveProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("toolbar")
+			})), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("toolbarGroup"))), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(left.value, (item) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ key: item.key }, { ref_for: true }, (0, vue.unref)(ctx).getStyles("toolbarButton"), {
+							"aria-label": item.label,
+							onClick: item.onClick
+						}), {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => item.icon)))]),
+							_: 2
+						}, 1040, ["aria-label", "onClick"]);
+					}), 128))], 16),
+					(0, vue.createElementVNode)("span", (0, vue.mergeProps)((0, vue.unref)(ctx).getStyles("counter"), { "aria-hidden": "true" }), (0, vue.toDisplayString)((0, vue.unref)(ctx).slides.length ? `${(0, vue.unref)(ctx).currentIndex + 1} / ${(0, vue.unref)(ctx).slides.length}` : ""), 17),
+					(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(ctx).getStyles("toolbarGroup"))), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(right.value, (item) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ key: item.key }, { ref_for: true }, (0, vue.unref)(ctx).getStyles("toolbarButton"), {
+							"aria-label": item.label,
+							onClick: item.onClick
+						}), {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => item.icon)))]),
+							_: 2
+						}, 1040, ["aria-label", "onClick"]);
+					}), 128))], 16)
+				]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/Lightbox.vue
+var Lightbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "Lightbox",
+	inheritAttrs: false,
+	__name: "Lightbox",
+	props: {
+		opened: { type: Boolean },
+		slides: {},
+		currentIndex: {},
+		labels: {},
+		withZoom: {
+			type: Boolean,
+			default: void 0
+		},
+		withThumbnails: {
+			type: Boolean,
+			default: void 0
+		},
+		withFullscreen: {
+			type: Boolean,
+			default: void 0
+		},
+		withDownload: {
+			type: Boolean,
+			default: void 0
+		},
+		loop: {
+			type: Boolean,
+			default: void 0
+		},
+		closeOnClickOutside: {
+			type: Boolean,
+			default: void 0
+		},
+		closeOnSwipeDown: {
+			type: Boolean,
+			default: void 0
+		},
+		withKeyboardEvents: {
+			type: Boolean,
+			default: void 0
+		},
+		returnFocus: {
+			type: Boolean,
+			default: void 0
+		},
+		withInitialFocusPlaceholder: {
+			type: Boolean,
+			default: void 0
+		},
+		withinPortal: {
+			type: Boolean,
+			default: void 0
+		},
+		zIndex: {},
+		transitionDuration: {},
+		transitionProps: {},
+		emblaOptions: {},
+		zoomMaxScale: {},
+		withSlideTransition: {
+			type: Boolean,
+			default: void 0
+		},
+		toolbarItems: {},
+		withNavigation: {
+			type: Boolean,
+			default: true
+		},
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"close",
+		"update:opened",
+		"indexChange",
+		"update:currentIndex"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const attrs = (0, vue.useAttrs)();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LightboxRoot_default), (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...props
+			}, {
+				onClose: _cache[0] || (_cache[0] = ($event) => emit("close")),
+				"onUpdate:opened": _cache[1] || (_cache[1] = ($event) => emit("update:opened", $event)),
+				onIndexChange: _cache[2] || (_cache[2] = ($event) => emit("indexChange", $event)),
+				"onUpdate:currentIndex": _cache[3] || (_cache[3] = ($event) => emit("update:currentIndex", $event))
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [
+					(0, vue.createVNode)((0, vue.unref)(LightboxToolbar_default), { "toolbar-items": props.toolbarItems }, null, 8, ["toolbar-items"]),
+					(0, vue.createVNode)((0, vue.unref)(LightboxSlides_default), null, {
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.slides, (slide, index) => {
+							return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LightboxSlide_default), {
+								key: index,
+								slide,
+								index
+							}, (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(slots).slide ? {
+								name: "default",
+								fn: (0, vue.withCtx)((payload) => [(0, vue.renderSlot)(_ctx.$slots, "slide", (0, vue.mergeProps)({ ref_for: true }, {
+									...payload,
+									index
+								}))]),
+								key: "0"
+							} : void 0]), 1032, ["slide", "index"]);
+						}), 128))]),
+						_: 3
+					}),
+					props.withNavigation ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LightboxNavigation_default), { key: 0 })) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createVNode)((0, vue.unref)(LightboxCaption_default)),
+					(0, vue.createVNode)((0, vue.unref)(LightboxThumbnails_default))
+				])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/lightbox.store.ts
+var clampIndex = (index, count) => Math.max(0, Math.min(Number.isFinite(index) ? Math.round(index) : 0, Math.max(0, count - 1)));
+var createLightboxStore = () => {
+	const state = (0, vue.shallowReactive)({
+		opened: false,
+		slides: [],
+		currentIndex: 0,
+		loop: false
+	});
+	return {
+		state,
+		getState: () => state,
+		setState: (next) => Object.assign(state, next)
+	};
+};
+var useLightboxStore = (store) => store.state;
+function updateLightboxStateAction(update, store) {
+	const state = store.getState();
+	store.setState({
+		...state,
+		...update(state)
+	});
+}
+var openLightboxAction = (payload, store) => updateLightboxStateAction(() => ({
+	opened: true,
+	slides: payload.slides,
+	currentIndex: clampIndex(payload.startIndex ?? 0, payload.slides.length)
+}), store);
+var closeLightboxAction = (store) => updateLightboxStateAction(() => ({ opened: false }), store);
+var nextLightboxAction = (store) => {
+	updateLightboxStateAction((state) => {
+		const next = state.currentIndex + 1;
+		return { currentIndex: next < state.slides.length ? next : state.loop && state.slides.length ? 0 : state.currentIndex };
+	}, store);
+};
+var prevLightboxAction = (store) => {
+	updateLightboxStateAction((state) => {
+		const prev = state.currentIndex - 1;
+		return { currentIndex: prev >= 0 ? prev : state.loop && state.slides.length ? state.slides.length - 1 : 0 };
+	}, store);
+};
+var setLightboxIndexAction = (index, store) => {
+	updateLightboxStateAction((state) => ({ currentIndex: clampIndex(index, state.slides.length) }), store);
+};
+var lightboxActions = {
+	open: openLightboxAction,
+	close: closeLightboxAction,
+	next: nextLightboxAction,
+	prev: prevLightboxAction,
+	setIndex: setLightboxIndexAction,
+	updateState: updateLightboxStateAction
+};
+function createLightbox() {
+	const store = createLightboxStore();
+	return [store, {
+		open: (payload) => openLightboxAction(payload, store),
+		close: () => closeLightboxAction(store),
+		next: () => nextLightboxAction(store),
+		prev: () => prevLightboxAction(store),
+		setIndex: (index) => setLightboxIndexAction(index, store)
+	}];
+}
+var [lightboxStore, lightbox] = createLightbox();
+//#endregion
+//#region src/LightboxCloseButton/LightboxCloseButton.vue
+var LightboxCloseButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxCloseButton",
+	inheritAttrs: false,
+	__name: "LightboxCloseButton",
+	setup(__props) {
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useLightboxContext();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(ctx).getStyles("closeButton")
+			}, {
+				"aria-label": (0, vue.unref)(ctx).labels.closeLabel,
+				onClick: (0, vue.unref)(ctx).close
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = (0, vue.createTextVNode)("×", -1))])]),
+				_: 3
+			}, 16, ["aria-label", "onClick"]);
+		};
+	}
+});
+//#endregion
+//#region src/LightboxProvider/LightboxProvider.vue
+var LightboxProvider_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "LightboxProvider",
+	__name: "LightboxProvider",
+	props: {
+		store: { default: () => lightboxStore },
+		loop: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const state = useLightboxStore(props.store);
+		(0, vue.watch)(() => props.loop, (loop) => props.store.setState({
+			...props.store.getState(),
+			loop: Boolean(loop)
+		}), { immediate: true });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(Lightbox_default, (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				loop: props.loop
+			}, {
+				opened: (0, vue.unref)(state).opened,
+				slides: (0, vue.unref)(state).slides,
+				"current-index": (0, vue.unref)(state).currentIndex,
+				onClose: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(lightboxActions).close(props.store)),
+				onIndexChange: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(lightboxActions).setIndex($event, props.store))
+			}), null, 16, [
+				"opened",
+				"slides",
+				"current-index"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/Lightbox.ts
+var Lightbox = (0, _mantine_vue_core.factory)(Lightbox_default, {
+	classes: Lightbox_module_default,
+	Root: LightboxRoot_default,
+	Toolbar: LightboxToolbar_default,
+	Slides: LightboxSlides_default,
+	Slide: LightboxSlide_default,
+	Thumbnails: LightboxThumbnails_default,
+	Navigation: LightboxNavigation_default,
+	Caption: LightboxCaption_default,
+	CloseButton: LightboxCloseButton_default,
+	Provider: LightboxProvider_default,
+	open: lightbox.open,
+	close: lightbox.close,
+	next: lightbox.next,
+	prev: lightbox.prev,
+	setIndex: lightbox.setIndex
+});
+//#endregion
+exports.DEFAULT_LABELS = DEFAULT_LABELS;
+exports.Lightbox = Lightbox;
+exports.LightboxCaption = LightboxCaption_default;
+exports.LightboxCloseButton = LightboxCloseButton_default;
+exports.LightboxNavigation = LightboxNavigation_default;
+exports.LightboxProviderComponent = LightboxProvider_default;
+exports.LightboxRoot = LightboxRoot_default;
+exports.LightboxSlide = LightboxSlide_default;
+exports.LightboxSlides = LightboxSlides_default;
+exports.LightboxThumbnails = LightboxThumbnails_default;
+exports.LightboxToolbar = LightboxToolbar_default;
+exports.closeLightboxAction = closeLightboxAction;
+exports.createCloseToolbarItem = createCloseToolbarItem;
+exports.createDownloadToolbarItem = createDownloadToolbarItem;
+exports.createFullscreenToolbarItem = createFullscreenToolbarItem;
+exports.createLightbox = createLightbox;
+exports.createLightboxStore = createLightboxStore;
+exports.createThumbnailsToolbarItem = createThumbnailsToolbarItem;
+exports.lightbox = lightbox;
+exports.lightboxActions = lightboxActions;
+exports.lightboxRootDefaultProps = lightboxRootDefaultProps;
+exports.lightboxStore = lightboxStore;
+exports.nextLightboxAction = nextLightboxAction;
+exports.openLightboxAction = openLightboxAction;
+exports.prevLightboxAction = prevLightboxAction;
+exports.setLightboxIndexAction = setLightboxIndexAction;
+exports.updateLightboxStateAction = updateLightboxStateAction;
+exports.useLightboxStore = useLightboxStore;
+
+//# sourceMappingURL=index.cjs.map