@mantine/lightbox 9.5.2

package/esm/hooks/use-lightbox-keyboard.mjs

@@ -0,0 +1,107 @@
+"use client";
+import { useEffect } from "react";
+//#region packages/@mantine/lightbox/src/hooks/use-lightbox-keyboard.ts
+/** Elements that consume typing wherever they are, including the lightbox chrome */
+const TEXT_ENTRY_SELECTOR = "input, textarea, select, video, audio, [contenteditable]:not([contenteditable=\"false\"])";
+/**
+* Elements that consume arrow keys and letter shortcuts only inside slide content – the
+* lightbox toolbar and navigation are buttons too, and keyboard shortcuts have to keep
+* working while one of them has focus.
+*/
+const SLIDE_WIDGET_SELECTOR = [
+	"button",
+	"a[href]",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"radio\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"option\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]",
+	"[role=\"switch\"]",
+	"[role=\"tab\"]",
+	"[role=\"textbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"listbox\"]",
+	"[role=\"menu\"]",
+	"[role=\"menubar\"]",
+	"[role=\"tablist\"]",
+	"[role=\"tree\"]",
+	"[role=\"treeitem\"]",
+	"[role=\"grid\"]",
+	"[role=\"gridcell\"]"
+].join(", ");
+const ZOOM_PAN_STEP = 50;
+function useLightboxKeyboard({ opened, enabled, dir, onClose, onNext, onPrev, onToggleFullscreen, onToggleThumbnails, onToggleZoom, onZoomPan }) {
+	useEffect(() => {
+		if (!opened) return;
+		const onLeadingArrow = dir === "rtl" ? onNext : onPrev;
+		const onTrailingArrow = dir === "rtl" ? onPrev : onNext;
+		const handler = (event) => {
+			if (event.defaultPrevented) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+				return;
+			}
+			if (!enabled || event.ctrlKey || event.metaKey || event.altKey) return;
+			if (event.target instanceof Element) {
+				if (event.target.closest(TEXT_ENTRY_SELECTOR)) return;
+				if (event.target.closest("[data-lightbox-slide]") && event.target.closest(SLIDE_WIDGET_SELECTOR)) return;
+			}
+			switch (event.key) {
+				case "ArrowLeft":
+					event.preventDefault();
+					if (!onZoomPan?.(ZOOM_PAN_STEP, 0)) onLeadingArrow();
+					break;
+				case "ArrowRight":
+					event.preventDefault();
+					if (!onZoomPan?.(-50, 0)) onTrailingArrow();
+					break;
+				case "ArrowUp":
+					if (onZoomPan?.(0, ZOOM_PAN_STEP)) event.preventDefault();
+					break;
+				case "ArrowDown":
+					if (onZoomPan?.(0, -50)) event.preventDefault();
+					break;
+				case "f":
+				case "F":
+					if (onToggleFullscreen) {
+						event.preventDefault();
+						onToggleFullscreen();
+					}
+					break;
+				case "t":
+				case "T":
+					if (onToggleThumbnails) {
+						event.preventDefault();
+						onToggleThumbnails();
+					}
+					break;
+				case "z":
+				case "Z": if (onToggleZoom) {
+					event.preventDefault();
+					onToggleZoom();
+				}
+			}
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [
+		opened,
+		enabled,
+		dir,
+		onClose,
+		onNext,
+		onPrev,
+		onToggleFullscreen,
+		onToggleThumbnails,
+		onToggleZoom,
+		onZoomPan
+	]);
+}
+//#endregion
+export { useLightboxKeyboard };
+
+//# sourceMappingURL=use-lightbox-keyboard.mjs.map

package/esm/hooks/use-lightbox-keyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lightbox-keyboard.mjs","names":[],"sources":["../../src/hooks/use-lightbox-keyboard.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ninterface UseLightboxKeyboardInput {\n  opened: boolean;\n  enabled: boolean;\n  /** Text direction of the lightbox, arrow keys follow it the same way the navigation buttons do */\n  dir: 'ltr' | 'rtl';\n  onClose: () => void;\n  onNext: () => void;\n  onPrev: () => void;\n  onToggleFullscreen?: () => void;\n  onToggleThumbnails?: () => void;\n  onToggleZoom?: () => void;\n  onZoomPan?: (deltaX: number, deltaY: number) => boolean;\n}\n\n/** Elements that consume typing wherever they are, including the lightbox chrome */\nconst TEXT_ENTRY_SELECTOR =\n  'input, textarea, select, video, audio, [contenteditable]:not([contenteditable=\"false\"])';\n\n/**\n * Elements that consume arrow keys and letter shortcuts only inside slide content – the\n * lightbox toolbar and navigation are buttons too, and keyboard shortcuts have to keep\n * working while one of them has focus.\n */\nconst SLIDE_WIDGET_SELECTOR = [\n  'button',\n  'a[href]',\n  '[role=\"button\"]',\n  '[role=\"link\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"radio\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"option\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  '[role=\"textbox\"]',\n  '[role=\"combobox\"]',\n  '[role=\"listbox\"]',\n  '[role=\"menu\"]',\n  '[role=\"menubar\"]',\n  '[role=\"tablist\"]',\n  '[role=\"tree\"]',\n  '[role=\"treeitem\"]',\n  '[role=\"grid\"]',\n  '[role=\"gridcell\"]',\n].join(', ');\n\nconst ZOOM_PAN_STEP = 50;\n\nexport function useLightboxKeyboard({\n  opened,\n  enabled,\n  dir,\n  onClose,\n  onNext,\n  onPrev,\n  onToggleFullscreen,\n  onToggleThumbnails,\n  onToggleZoom,\n  onZoomPan,\n}: UseLightboxKeyboardInput) {\n  useEffect(() => {\n    if (!opened) {\n      return undefined;\n    }\n\n    // Slides advance along the reading direction, so in RTL the next slide is the one to the\n    // left – the arrow keys follow the same rule as the navigation chevrons, which are\n    // already mirrored. Zoom panning stays physical: an arrow always moves the image the way\n    // it points.\n    const onLeadingArrow = dir === 'rtl' ? onNext : onPrev;\n    const onTrailingArrow = dir === 'rtl' ? onPrev : onNext;\n\n    const handler = (event: KeyboardEvent) => {\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose();\n        return;\n      }\n\n      if (!enabled || event.ctrlKey || event.metaKey || event.altKey) {\n        return;\n      }\n\n      if (event.target instanceof Element) {\n        if (event.target.closest(TEXT_ENTRY_SELECTOR)) {\n          return;\n        }\n\n        if (\n          event.target.closest('[data-lightbox-slide]') &&\n          event.target.closest(SLIDE_WIDGET_SELECTOR)\n        ) {\n          return;\n        }\n      }\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (!onZoomPan?.(ZOOM_PAN_STEP, 0)) {\n            onLeadingArrow();\n          }\n          break;\n        case 'ArrowRight':\n          event.preventDefault();\n          if (!onZoomPan?.(-ZOOM_PAN_STEP, 0)) {\n            onTrailingArrow();\n          }\n          break;\n        case 'ArrowUp':\n          if (onZoomPan?.(0, ZOOM_PAN_STEP)) {\n            event.preventDefault();\n          }\n          break;\n        case 'ArrowDown':\n          if (onZoomPan?.(0, -ZOOM_PAN_STEP)) {\n            event.preventDefault();\n          }\n          break;\n        case 'f':\n        case 'F':\n          if (onToggleFullscreen) {\n            event.preventDefault();\n            onToggleFullscreen();\n          }\n          break;\n        case 't':\n        case 'T':\n          if (onToggleThumbnails) {\n            event.preventDefault();\n            onToggleThumbnails();\n          }\n          break;\n        case 'z':\n        case 'Z':\n          if (onToggleZoom) {\n            event.preventDefault();\n            onToggleZoom();\n          }\n          break;\n        default:\n          break;\n      }\n    };\n\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [\n    opened,\n    enabled,\n    dir,\n    onClose,\n    onNext,\n    onPrev,\n    onToggleFullscreen,\n    onToggleThumbnails,\n    onToggleZoom,\n    onZoomPan,\n  ]);\n}\n"],"mappings":";;;;AAiBA,MAAM,sBACJ;;;;;;AAOF,MAAM,wBAAwB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,IAAI;AAEX,MAAM,gBAAgB;AAEtB,SAAgB,oBAAoB,EAClC,QACA,SACA,KACA,SACA,QACA,QACA,oBACA,oBACA,cACA,aAC2B;CAC3B,gBAAgB;EACd,IAAI,CAAC,QACH;EAOF,MAAM,iBAAiB,QAAQ,QAAQ,SAAS;EAChD,MAAM,kBAAkB,QAAQ,QAAQ,SAAS;EAEjD,MAAM,WAAW,UAAyB;GACxC,IAAI,MAAM,kBACR;GAGF,IAAI,MAAM,QAAQ,UAAU;IAC1B,MAAM,eAAe;IACrB,QAAQ;IACR;GACF;GAEA,IAAI,CAAC,WAAW,MAAM,WAAW,MAAM,WAAW,MAAM,QACtD;GAGF,IAAI,MAAM,kBAAkB,SAAS;IACnC,IAAI,MAAM,OAAO,QAAQ,mBAAmB,GAC1C;IAGF,IACE,MAAM,OAAO,QAAQ,uBAAuB,KAC5C,MAAM,OAAO,QAAQ,qBAAqB,GAE1C;GAEJ;GAEA,QAAQ,MAAM,KAAd;IACE,KAAK;KACH,MAAM,eAAe;KACrB,IAAI,CAAC,YAAY,eAAe,CAAC,GAC/B,eAAe;KAEjB;IACF,KAAK;KACH,MAAM,eAAe;KACrB,IAAI,CAAC,YAAY,KAAgB,CAAC,GAChC,gBAAgB;KAElB;IACF,KAAK;KACH,IAAI,YAAY,GAAG,aAAa,GAC9B,MAAM,eAAe;KAEvB;IACF,KAAK;KACH,IAAI,YAAY,GAAG,GAAc,GAC/B,MAAM,eAAe;KAEvB;IACF,KAAK;IACL,KAAK;KACH,IAAI,oBAAoB;MACtB,MAAM,eAAe;MACrB,mBAAmB;KACrB;KACA;IACF,KAAK;IACL,KAAK;KACH,IAAI,oBAAoB;MACtB,MAAM,eAAe;MACrB,mBAAmB;KACrB;KACA;IACF,KAAK;IACL,KAAK,KACH,IAAI,cAAc;KAChB,MAAM,eAAe;KACrB,aAAa;IACf;GAIJ;EACF;EAEA,SAAS,iBAAiB,WAAW,OAAO;EAC5C,aAAa,SAAS,oBAAoB,WAAW,OAAO;CAC9D,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

package/esm/hooks/use-lightbox-lock-scroll.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { useMantineTheme } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "@mantine/hooks";
+//#region packages/@mantine/lightbox/src/hooks/use-lightbox-lock-scroll.ts
+function useLightboxLockScroll({ opened, exitDuration, exitDelay }) {
+	const [unlocked, setUnlocked] = useState(!opened);
+	const [prevOpened, setPrevOpened] = useState(opened);
+	const timeout = useRef(-1);
+	const theme = useMantineTheme();
+	const shouldReduceMotion = useReducedMotion();
+	const unlockDelay = exitDelay + ((theme.respectReducedMotion ? shouldReduceMotion : false) ? 0 : exitDuration);
+	if (opened !== prevOpened) {
+		setPrevOpened(opened);
+		if (opened) setUnlocked(false);
+	}
+	useEffect(() => {
+		if (opened || unlockDelay === 0) {
+			window.clearTimeout(timeout.current);
+			return;
+		}
+		timeout.current = window.setTimeout(() => setUnlocked(true), unlockDelay);
+		return () => window.clearTimeout(timeout.current);
+	}, [opened, unlockDelay]);
+	return opened || !unlocked && unlockDelay > 0;
+}
+//#endregion
+export { useLightboxLockScroll };
+
+//# sourceMappingURL=use-lightbox-lock-scroll.mjs.map

package/esm/hooks/use-lightbox-lock-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lightbox-lock-scroll.mjs","names":[],"sources":["../../src/hooks/use-lightbox-lock-scroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useMantineTheme } from '@mantine/core';\nimport { useReducedMotion } from '@mantine/hooks';\n\ninterface UseLightboxLockScrollInput {\n  opened: boolean;\n  exitDuration: number;\n  exitDelay: number;\n}\n\nexport function useLightboxLockScroll({\n  opened,\n  exitDuration,\n  exitDelay,\n}: UseLightboxLockScrollInput) {\n  const [unlocked, setUnlocked] = useState(!opened);\n  const [prevOpened, setPrevOpened] = useState(opened);\n  const timeout = useRef<number>(-1);\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const unlockDelay = exitDelay + (reduceMotion ? 0 : exitDuration);\n\n  // Opening arms the lock in the same render rather than one commit later, so the page\n  // cannot scroll in the frame between mounting the lightbox and the effect running.\n  if (opened !== prevOpened) {\n    setPrevOpened(opened);\n    if (opened) {\n      setUnlocked(false);\n    }\n  }\n\n  useEffect(() => {\n    if (opened || unlockDelay === 0) {\n      window.clearTimeout(timeout.current);\n      return undefined;\n    }\n\n    // The lock is released only after the exit transition has played out, otherwise the\n    // page jumps by the scrollbar width while the lightbox is still fading out.\n    timeout.current = window.setTimeout(() => setUnlocked(true), unlockDelay);\n    return () => window.clearTimeout(timeout.current);\n  }, [opened, unlockDelay]);\n\n  return opened || (!unlocked && unlockDelay > 0);\n}\n"],"mappings":";;;;;AAUA,SAAgB,sBAAsB,EACpC,QACA,cACA,aAC6B;CAC7B,MAAM,CAAC,UAAU,eAAe,SAAS,CAAC,MAAM;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,UAAU,OAAe,EAAE;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,cAAc,cADC,MAAM,uBAAuB,qBAAqB,SACvB,IAAI;CAIpD,IAAI,WAAW,YAAY;EACzB,cAAc,MAAM;EACpB,IAAI,QACF,YAAY,KAAK;CAErB;CAEA,gBAAgB;EACd,IAAI,UAAU,gBAAgB,GAAG;GAC/B,OAAO,aAAa,QAAQ,OAAO;GACnC;EACF;EAIA,QAAQ,UAAU,OAAO,iBAAiB,YAAY,IAAI,GAAG,WAAW;EACxE,aAAa,OAAO,aAAa,QAAQ,OAAO;CAClD,GAAG,CAAC,QAAQ,WAAW,CAAC;CAExB,OAAO,UAAW,CAAC,YAAY,cAAc;AAC/C"}

package/esm/hooks/use-lightbox-swipe-close.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { useCallback, useRef } from "react";
+//#region packages/@mantine/lightbox/src/hooks/use-lightbox-swipe-close.ts
+const SWIPE_THRESHOLD = 100;
+function useLightboxSwipeClose({ enabled, onClose, isZoomed }) {
+	const touchStart = useRef(null);
+	return {
+		handleTouchStart: useCallback((event) => {
+			if (!enabled || isZoomed) return;
+			if (event.touches.length !== 1) {
+				touchStart.current = null;
+				return;
+			}
+			touchStart.current = {
+				x: event.touches[0].clientX,
+				y: event.touches[0].clientY
+			};
+		}, [enabled, isZoomed]),
+		handleTouchEnd: useCallback((event) => {
+			if (!enabled || isZoomed || !touchStart.current || event.changedTouches.length !== 1) {
+				touchStart.current = null;
+				return;
+			}
+			const deltaY = event.changedTouches[0].clientY - touchStart.current.y;
+			const deltaX = Math.abs(event.changedTouches[0].clientX - touchStart.current.x);
+			if (deltaY > SWIPE_THRESHOLD && deltaX < deltaY) onClose();
+			touchStart.current = null;
+		}, [
+			enabled,
+			isZoomed,
+			onClose
+		])
+	};
+}
+//#endregion
+export { useLightboxSwipeClose };
+
+//# sourceMappingURL=use-lightbox-swipe-close.mjs.map

package/esm/hooks/use-lightbox-swipe-close.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lightbox-swipe-close.mjs","names":[],"sources":["../../src/hooks/use-lightbox-swipe-close.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\ninterface UseLightboxSwipeCloseInput {\n  enabled: boolean;\n  onClose: () => void;\n  isZoomed: boolean;\n}\n\nconst SWIPE_THRESHOLD = 100;\n\nexport function useLightboxSwipeClose({ enabled, onClose, isZoomed }: UseLightboxSwipeCloseInput) {\n  const touchStart = useRef<{ x: number; y: number } | null>(null);\n\n  const handleTouchStart = useCallback(\n    (event: React.TouchEvent) => {\n      if (!enabled || isZoomed) {\n        return;\n      }\n      if (event.touches.length !== 1) {\n        touchStart.current = null;\n        return;\n      }\n      touchStart.current = {\n        x: event.touches[0].clientX,\n        y: event.touches[0].clientY,\n      };\n    },\n    [enabled, isZoomed]\n  );\n\n  const handleTouchEnd = useCallback(\n    (event: React.TouchEvent) => {\n      if (!enabled || isZoomed || !touchStart.current || event.changedTouches.length !== 1) {\n        touchStart.current = null;\n        return;\n      }\n\n      const deltaY = event.changedTouches[0].clientY - touchStart.current.y;\n      const deltaX = Math.abs(event.changedTouches[0].clientX - touchStart.current.x);\n\n      if (deltaY > SWIPE_THRESHOLD && deltaX < deltaY) {\n        onClose();\n      }\n\n      touchStart.current = null;\n    },\n    [enabled, isZoomed, onClose]\n  );\n\n  return { handleTouchStart, handleTouchEnd };\n}\n"],"mappings":";;;AAQA,MAAM,kBAAkB;AAExB,SAAgB,sBAAsB,EAAE,SAAS,SAAS,YAAwC;CAChG,MAAM,aAAa,OAAwC,IAAI;CAsC/D,OAAO;EAAE,kBApCgB,aACtB,UAA4B;GAC3B,IAAI,CAAC,WAAW,UACd;GAEF,IAAI,MAAM,QAAQ,WAAW,GAAG;IAC9B,WAAW,UAAU;IACrB;GACF;GACA,WAAW,UAAU;IACnB,GAAG,MAAM,QAAQ,EAAE,CAAC;IACpB,GAAG,MAAM,QAAQ,EAAE,CAAC;GACtB;EACF,GACA,CAAC,SAAS,QAAQ,CAsBI;EAAG,gBAnBJ,aACpB,UAA4B;GAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,WAAW,WAAW,MAAM,eAAe,WAAW,GAAG;IACpF,WAAW,UAAU;IACrB;GACF;GAEA,MAAM,SAAS,MAAM,eAAe,EAAE,CAAC,UAAU,WAAW,QAAQ;GACpE,MAAM,SAAS,KAAK,IAAI,MAAM,eAAe,EAAE,CAAC,UAAU,WAAW,QAAQ,CAAC;GAE9E,IAAI,SAAS,mBAAmB,SAAS,QACvC,QAAQ;GAGV,WAAW,UAAU;EACvB,GACA;GAAC;GAAS;GAAU;EAAO,CAGW;CAAE;AAC5C"}

package/esm/hooks/use-lightbox-zoom.mjs

@@ -0,0 +1,257 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region packages/@mantine/lightbox/src/hooks/use-lightbox-zoom.ts
+const 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 [zoomState, setZoomState] = useState(INITIAL_ZOOM_STATE);
+	const [isDragging, setIsDragging] = useState(false);
+	const imageRef = useRef(null);
+	const isZoomedRef = useRef(false);
+	const didDrag = useRef(false);
+	const dragStart = useRef({
+		x: 0,
+		y: 0
+	});
+	const translateStart = useRef({
+		x: 0,
+		y: 0
+	});
+	const lastPinchDistance = useRef(null);
+	const lastPointerType = useRef("mouse");
+	const lastClickPointerType = useRef("mouse");
+	const [isAdjusting, setIsAdjusting] = useState(false);
+	const adjustTimeout = useRef(-1);
+	useEffect(() => {
+		isZoomedRef.current = zoomState.isZoomed;
+	}, [zoomState.isZoomed]);
+	const beginAdjust = useCallback(() => {
+		setIsAdjusting(true);
+		window.clearTimeout(adjustTimeout.current);
+		adjustTimeout.current = window.setTimeout(() => setIsAdjusting(false), 120);
+	}, []);
+	const beginAdjustRef = useRef(beginAdjust);
+	useEffect(() => {
+		beginAdjustRef.current = beginAdjust;
+	}, [beginAdjust]);
+	useEffect(() => () => window.clearTimeout(adjustTimeout.current), []);
+	const resetZoom = useCallback(() => {
+		setZoomState(INITIAL_ZOOM_STATE);
+		setIsDragging(false);
+	}, []);
+	const [prevIndex, setPrevIndex] = useState(currentIndex);
+	const [prevEnabled, setPrevEnabled] = useState(enabled);
+	if (currentIndex !== prevIndex || enabled !== prevEnabled) {
+		setPrevIndex(currentIndex);
+		setPrevEnabled(enabled);
+		if (currentIndex !== prevIndex || !enabled) {
+			setZoomState(INITIAL_ZOOM_STATE);
+			setIsDragging(false);
+		}
+	}
+	useEffect(() => {
+		if (!enabled) {
+			lastPinchDistance.current = null;
+			didDrag.current = false;
+		}
+	}, [enabled]);
+	const toggleZoom = useCallback(() => {
+		if (!enabled) return;
+		setZoomState((prev) => prev.isZoomed ? INITIAL_ZOOM_STATE : {
+			scale: Math.min(2, maxScale),
+			translateX: 0,
+			translateY: 0,
+			isZoomed: true
+		});
+	}, [enabled, maxScale]);
+	const zoomAtPoint = useCallback((deltaScale, clientX, clientY) => {
+		setZoomState((prev) => {
+			const nextScale = Math.max(1, Math.min(maxScale, prev.scale + deltaScale));
+			if (nextScale === 1) return INITIAL_ZOOM_STATE;
+			const image = imageRef.current;
+			let translateX = prev.translateX;
+			let translateY = prev.translateY;
+			if (image && clientX !== void 0 && clientY !== void 0) {
+				const rect = image.getBoundingClientRect();
+				const scaleRatio = nextScale / prev.scale;
+				const offsetX = clientX - (rect.left + rect.width / 2) + prev.translateX;
+				const offsetY = clientY - (rect.top + rect.height / 2) + prev.translateY;
+				translateX = offsetX * (1 - scaleRatio) + prev.translateX * scaleRatio;
+				translateY = offsetY * (1 - scaleRatio) + prev.translateY * scaleRatio;
+			}
+			return clampTranslate({
+				scale: nextScale,
+				translateX,
+				translateY,
+				isZoomed: true
+			}, image);
+		});
+	}, [maxScale]);
+	const panZoom = useCallback((deltaX, deltaY) => {
+		if (!isZoomedRef.current) return false;
+		setZoomState((prev) => clampTranslate({
+			...prev,
+			translateX: prev.translateX + deltaX,
+			translateY: prev.translateY + deltaY
+		}, imageRef.current));
+		return true;
+	}, []);
+	const zoomAtPointRef = useRef(zoomAtPoint);
+	useEffect(() => {
+		zoomAtPointRef.current = zoomAtPoint;
+	}, [zoomAtPoint]);
+	const handleNativeWheel = useRef((event) => {
+		if (event.deltaY === 0) return;
+		event.preventDefault();
+		beginAdjustRef.current();
+		zoomAtPointRef.current(event.deltaY > 0 ? -.2 : .2, event.clientX, event.clientY);
+	});
+	const setImageRef = useCallback((node) => {
+		imageRef.current?.removeEventListener("wheel", handleNativeWheel.current);
+		imageRef.current = node;
+		node?.addEventListener("wheel", handleNativeWheel.current, { passive: false });
+	}, []);
+	const handlePointerDown = useCallback((event) => {
+		lastPointerType.current = event.pointerType;
+		if (!zoomState.isZoomed || !enabled) return;
+		setIsDragging(true);
+		didDrag.current = false;
+		dragStart.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		translateStart.current = {
+			x: zoomState.translateX,
+			y: zoomState.translateY
+		};
+		const target = event.target;
+		if (typeof target?.setPointerCapture === "function") target.setPointerCapture(event.pointerId);
+	}, [
+		zoomState.isZoomed,
+		zoomState.translateX,
+		zoomState.translateY,
+		enabled
+	]);
+	const handlePointerMove = useCallback((event) => {
+		if (!isDragging || !enabled) return;
+		const dx = event.clientX - dragStart.current.x;
+		const dy = event.clientY - dragStart.current.y;
+		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didDrag.current = true;
+		setZoomState((prev) => clampTranslate({
+			...prev,
+			translateX: translateStart.current.x + dx,
+			translateY: translateStart.current.y + dy
+		}, imageRef.current));
+	}, [isDragging, enabled]);
+	const handlePointerUp = useCallback(() => {
+		setIsDragging(false);
+	}, []);
+	const handlePointerCancel = useCallback(() => {
+		setIsDragging(false);
+		didDrag.current = false;
+		lastPinchDistance.current = null;
+	}, []);
+	const handleTouchMove = useCallback((event) => {
+		if (!enabled || event.touches.length !== 2) {
+			lastPinchDistance.current = null;
+			return;
+		}
+		const touch1 = event.touches[0];
+		const touch2 = event.touches[1];
+		const distance = Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY);
+		if (lastPinchDistance.current !== null) {
+			beginAdjust();
+			const delta = (distance - lastPinchDistance.current) * .01;
+			zoomAtPoint(delta, (touch1.clientX + touch2.clientX) / 2, (touch1.clientY + touch2.clientY) / 2);
+		}
+		lastPinchDistance.current = distance;
+	}, [
+		enabled,
+		zoomAtPoint,
+		beginAdjust
+	]);
+	const handleTouchEnd = useCallback(() => {
+		lastPinchDistance.current = null;
+	}, []);
+	const handleClick = useCallback((event) => {
+		if (!enabled || event.detail > 1) return;
+		if (didDrag.current) {
+			didDrag.current = false;
+			return;
+		}
+		const pointerType = lastPointerType.current;
+		lastPointerType.current = "mouse";
+		lastClickPointerType.current = pointerType;
+		if (pointerType === "touch") return;
+		toggleZoom();
+	}, [enabled, toggleZoom]);
+	const handleDoubleClick = useCallback(() => {
+		if (!enabled || lastClickPointerType.current !== "touch") return;
+		toggleZoom();
+	}, [enabled, toggleZoom]);
+	const getImageProps = useCallback(() => ({
+		ref: setImageRef,
+		style: { transform: `scale(${zoomState.scale}) translate(${zoomState.translateX / zoomState.scale}px, ${zoomState.translateY / zoomState.scale}px)` },
+		"data-zoom-enabled": enabled || void 0,
+		"data-zoomed": zoomState.isZoomed || void 0,
+		"data-dragging": isDragging || isAdjusting || void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		onLostPointerCapture: handlePointerUp,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		onTouchMove: handleTouchMove,
+		onTouchEnd: handleTouchEnd
+	}), [
+		zoomState,
+		isDragging,
+		isAdjusting,
+		enabled,
+		setImageRef,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		handlePointerCancel,
+		handleClick,
+		handleDoubleClick,
+		handleTouchMove,
+		handleTouchEnd
+	]);
+	const publicZoomState = useMemo(() => ({
+		scale: zoomState.scale,
+		isZoomed: zoomState.isZoomed
+	}), [zoomState.scale, zoomState.isZoomed]);
+	return useMemo(() => ({
+		zoomState: publicZoomState,
+		toggleZoom,
+		resetZoom,
+		panZoom,
+		getImageProps
+	}), [
+		publicZoomState,
+		toggleZoom,
+		resetZoom,
+		panZoom,
+		getImageProps
+	]);
+}
+//#endregion
+export { useLightboxZoom };
+
+//# sourceMappingURL=use-lightbox-zoom.mjs.map

package/esm/hooks/use-lightbox-zoom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lightbox-zoom.mjs","names":[],"sources":["../../src/hooks/use-lightbox-zoom.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\ninterface UseLightboxZoomInput {\n  enabled: boolean;\n  maxScale: number;\n  currentIndex: number;\n}\n\ninterface ZoomState {\n  scale: number;\n  translateX: number;\n  translateY: number;\n  isZoomed: boolean;\n}\n\nconst INITIAL_ZOOM_STATE: ZoomState = {\n  scale: 1,\n  translateX: 0,\n  translateY: 0,\n  isZoomed: false,\n};\n\nfunction clampTranslate(state: ZoomState, image: HTMLImageElement | null): ZoomState {\n  if (!image) {\n    return state;\n  }\n\n  const maxX = (image.offsetWidth * (state.scale - 1)) / 2;\n  const maxY = (image.offsetHeight * (state.scale - 1)) / 2;\n\n  return {\n    ...state,\n    translateX: Math.max(-maxX, Math.min(maxX, state.translateX)),\n    translateY: Math.max(-maxY, Math.min(maxY, state.translateY)),\n  };\n}\n\nexport function useLightboxZoom({ enabled, maxScale, currentIndex }: UseLightboxZoomInput) {\n  const [zoomState, setZoomState] = useState<ZoomState>(INITIAL_ZOOM_STATE);\n  const [isDragging, setIsDragging] = useState(false);\n  const imageRef = useRef<HTMLImageElement>(null);\n  const isZoomedRef = useRef(false);\n  const didDrag = useRef(false);\n  const dragStart = useRef({ x: 0, y: 0 });\n  const translateStart = useRef({ x: 0, y: 0 });\n  const lastPinchDistance = useRef<number | null>(null);\n  const lastPointerType = useRef<string>('mouse');\n  const lastClickPointerType = useRef<string>('mouse');\n  const [isAdjusting, setIsAdjusting] = useState(false);\n  const adjustTimeout = useRef<number>(-1);\n\n  useEffect(() => {\n    isZoomedRef.current = zoomState.isZoomed;\n  }, [zoomState.isZoomed]);\n\n  const beginAdjust = useCallback(() => {\n    setIsAdjusting(true);\n    window.clearTimeout(adjustTimeout.current);\n    adjustTimeout.current = window.setTimeout(() => setIsAdjusting(false), 120);\n  }, []);\n\n  const beginAdjustRef = useRef(beginAdjust);\n\n  useEffect(() => {\n    beginAdjustRef.current = beginAdjust;\n  }, [beginAdjust]);\n\n  useEffect(() => () => window.clearTimeout(adjustTimeout.current), []);\n\n  const resetZoom = useCallback(() => {\n    setZoomState(INITIAL_ZOOM_STATE);\n    setIsDragging(false);\n  }, []);\n\n  const [prevIndex, setPrevIndex] = useState(currentIndex);\n  const [prevEnabled, setPrevEnabled] = useState(enabled);\n\n  // Reset during render rather than from an effect: the new slide is then painted at scale\n  // 1 in the same commit instead of flashing the previous slide's zoom for one frame.\n  //\n  // Turning zoom off has to clear the state as well – the image loses its handlers, but a\n  // lingering `isZoomed` keeps the carousel's `watchDrag` guard rejecting drags, so the\n  // lightbox would silently stop being swipeable.\n  if (currentIndex !== prevIndex || enabled !== prevEnabled) {\n    setPrevIndex(currentIndex);\n    setPrevEnabled(enabled);\n\n    if (currentIndex !== prevIndex || !enabled) {\n      setZoomState(INITIAL_ZOOM_STATE);\n      setIsDragging(false);\n    }\n  }\n\n  useEffect(() => {\n    if (!enabled) {\n      lastPinchDistance.current = null;\n      didDrag.current = false;\n    }\n  }, [enabled]);\n\n  const toggleZoom = useCallback(() => {\n    if (!enabled) {\n      return;\n    }\n    setZoomState((prev) =>\n      prev.isZoomed\n        ? INITIAL_ZOOM_STATE\n        : { scale: Math.min(2, maxScale), translateX: 0, translateY: 0, isZoomed: true }\n    );\n  }, [enabled, maxScale]);\n\n  const zoomAtPoint = useCallback(\n    (deltaScale: number, clientX?: number, clientY?: number) => {\n      setZoomState((prev) => {\n        const nextScale = Math.max(1, Math.min(maxScale, prev.scale + deltaScale));\n        if (nextScale === 1) {\n          return INITIAL_ZOOM_STATE;\n        }\n\n        const image = imageRef.current;\n        let translateX = prev.translateX;\n        let translateY = prev.translateY;\n\n        if (image && clientX !== undefined && clientY !== undefined) {\n          const rect = image.getBoundingClientRect();\n          const scaleRatio = nextScale / prev.scale;\n          const offsetX = clientX - (rect.left + rect.width / 2) + prev.translateX;\n          const offsetY = clientY - (rect.top + rect.height / 2) + prev.translateY;\n          translateX = offsetX * (1 - scaleRatio) + prev.translateX * scaleRatio;\n          translateY = offsetY * (1 - scaleRatio) + prev.translateY * scaleRatio;\n        }\n\n        return clampTranslate({ scale: nextScale, translateX, translateY, isZoomed: true }, image);\n      });\n    },\n    [maxScale]\n  );\n\n  const panZoom = useCallback((deltaX: number, deltaY: number) => {\n    if (!isZoomedRef.current) {\n      return false;\n    }\n    setZoomState((prev) =>\n      clampTranslate(\n        { ...prev, translateX: prev.translateX + deltaX, translateY: prev.translateY + deltaY },\n        imageRef.current\n      )\n    );\n    return true;\n  }, []);\n\n  const zoomAtPointRef = useRef(zoomAtPoint);\n\n  useEffect(() => {\n    zoomAtPointRef.current = zoomAtPoint;\n  }, [zoomAtPoint]);\n\n  const handleNativeWheel = useRef((event: WheelEvent) => {\n    // Horizontal trackpad gestures report deltaY === 0 – zooming on those would both\n    // hijack the gesture and pick a direction at random.\n    if (event.deltaY === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    beginAdjustRef.current();\n    zoomAtPointRef.current(event.deltaY > 0 ? -0.2 : 0.2, event.clientX, event.clientY);\n  });\n\n  const setImageRef = useCallback((node: HTMLImageElement | null) => {\n    imageRef.current?.removeEventListener('wheel', handleNativeWheel.current);\n    imageRef.current = node;\n    node?.addEventListener('wheel', handleNativeWheel.current, { passive: false });\n  }, []);\n\n  const handlePointerDown = useCallback(\n    (event: React.PointerEvent) => {\n      lastPointerType.current = event.pointerType;\n\n      if (!zoomState.isZoomed || !enabled) {\n        return;\n      }\n      setIsDragging(true);\n      didDrag.current = false;\n      dragStart.current = { x: event.clientX, y: event.clientY };\n      translateStart.current = { x: zoomState.translateX, y: zoomState.translateY };\n      const target = event.target as HTMLElement;\n      if (typeof target?.setPointerCapture === 'function') {\n        target.setPointerCapture(event.pointerId);\n      }\n    },\n    [zoomState.isZoomed, zoomState.translateX, zoomState.translateY, enabled]\n  );\n\n  const handlePointerMove = useCallback(\n    (event: React.PointerEvent) => {\n      if (!isDragging || !enabled) {\n        return;\n      }\n      const dx = event.clientX - dragStart.current.x;\n      const dy = event.clientY - dragStart.current.y;\n      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {\n        didDrag.current = true;\n      }\n      setZoomState((prev) =>\n        clampTranslate(\n          {\n            ...prev,\n            translateX: translateStart.current.x + dx,\n            translateY: translateStart.current.y + dy,\n          },\n          imageRef.current\n        )\n      );\n    },\n    [isDragging, enabled]\n  );\n\n  const handlePointerUp = useCallback(() => {\n    setIsDragging(false);\n  }, []);\n\n  const handlePointerCancel = useCallback(() => {\n    setIsDragging(false);\n    didDrag.current = false;\n    lastPinchDistance.current = null;\n  }, []);\n\n  const handleTouchMove = useCallback(\n    (event: React.TouchEvent) => {\n      if (!enabled || event.touches.length !== 2) {\n        lastPinchDistance.current = null;\n        return;\n      }\n      const touch1 = event.touches[0];\n      const touch2 = event.touches[1];\n      const distance = Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY);\n\n      if (lastPinchDistance.current !== null) {\n        beginAdjust();\n        const delta = (distance - lastPinchDistance.current) * 0.01;\n        zoomAtPoint(\n          delta,\n          (touch1.clientX + touch2.clientX) / 2,\n          (touch1.clientY + touch2.clientY) / 2\n        );\n      }\n      lastPinchDistance.current = distance;\n    },\n    [enabled, zoomAtPoint, beginAdjust]\n  );\n\n  const handleTouchEnd = useCallback(() => {\n    lastPinchDistance.current = null;\n  }, []);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (!enabled || event.detail > 1) {\n        return;\n      }\n      if (didDrag.current) {\n        didDrag.current = false;\n        return;\n      }\n\n      // Touch taps are handled by the carousel (swipe) and by double-tap to zoom –\n      // reacting to the synthetic click as well would fight with both. This checks the\n      // input that produced the click rather than whether the device supports touch, so\n      // a mouse still zooms on a touchscreen laptop. The recorded type is consumed here\n      // so a later click without a preceding pointerdown is not treated as a touch.\n      const pointerType = lastPointerType.current;\n      lastPointerType.current = 'mouse';\n      lastClickPointerType.current = pointerType;\n\n      if (pointerType === 'touch') {\n        return;\n      }\n\n      toggleZoom();\n    },\n    [enabled, toggleZoom]\n  );\n\n  const handleDoubleClick = useCallback(() => {\n    if (!enabled || lastClickPointerType.current !== 'touch') {\n      return;\n    }\n\n    toggleZoom();\n  }, [enabled, toggleZoom]);\n\n  const getImageProps = useCallback(\n    () => ({\n      ref: setImageRef,\n      style: {\n        transform: `scale(${zoomState.scale}) translate(${zoomState.translateX / zoomState.scale}px, ${zoomState.translateY / zoomState.scale}px)`,\n      },\n      'data-zoom-enabled': enabled || undefined,\n      'data-zoomed': zoomState.isZoomed || undefined,\n      'data-dragging': isDragging || isAdjusting || undefined,\n      onPointerDown: handlePointerDown,\n      onPointerMove: handlePointerMove,\n      onPointerUp: handlePointerUp,\n      onPointerCancel: handlePointerCancel,\n      onLostPointerCapture: handlePointerUp,\n      onClick: handleClick,\n      onDoubleClick: handleDoubleClick,\n      onTouchMove: handleTouchMove,\n      onTouchEnd: handleTouchEnd,\n    }),\n    [\n      zoomState,\n      isDragging,\n      isAdjusting,\n      enabled,\n      setImageRef,\n      handlePointerDown,\n      handlePointerMove,\n      handlePointerUp,\n      handlePointerCancel,\n      handleClick,\n      handleDoubleClick,\n      handleTouchMove,\n      handleTouchEnd,\n    ]\n  );\n\n  // Both objects are memoized: the lightbox context is built from them, and returning fresh\n  // objects on every render would make that context change identity on every root render,\n  // re-rendering every slide, thumbnail and custom render function along with it.\n  const publicZoomState = useMemo(\n    () => ({ scale: zoomState.scale, isZoomed: zoomState.isZoomed }),\n    [zoomState.scale, zoomState.isZoomed]\n  );\n\n  return useMemo(\n    () => ({\n      zoomState: publicZoomState,\n      toggleZoom,\n      resetZoom,\n      panZoom,\n      getImageProps,\n    }),\n    [publicZoomState, toggleZoom, resetZoom, panZoom, getImageProps]\n  );\n}\n"],"mappings":"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"}

package/esm/index.mjs

@@ -0,0 +1,14 @@
+import { createLightbox, createLightboxStore, lightbox, lightboxStore, useLightboxStore } from "./lightbox.store.mjs";
+import { DEFAULT_LABELS } from "./default-labels.mjs";
+import { LightboxCaption } from "./LightboxCaption/LightboxCaption.mjs";
+import { LightboxCloseButton } from "./LightboxCloseButton/LightboxCloseButton.mjs";
+import { LightboxNavigation } from "./LightboxNavigation/LightboxNavigation.mjs";
+import { LightboxProviderComponent } from "./LightboxProvider/LightboxProvider.mjs";
+import { LightboxRoot } from "./LightboxRoot/LightboxRoot.mjs";
+import { LightboxSlide } from "./LightboxSlide/LightboxSlide.mjs";
+import { LightboxSlides } from "./LightboxSlides/LightboxSlides.mjs";
+import { LightboxThumbnails } from "./LightboxThumbnails/LightboxThumbnails.mjs";
+import { createCloseToolbarItem, createDownloadToolbarItem, createFullscreenToolbarItem, createThumbnailsToolbarItem } from "./LightboxToolbar/toolbar-items.mjs";
+import { LightboxToolbar } from "./LightboxToolbar/LightboxToolbar.mjs";
+import { Lightbox } from "./Lightbox.mjs";
+export { DEFAULT_LABELS, Lightbox, LightboxCaption, LightboxCloseButton, LightboxNavigation, LightboxProviderComponent, LightboxRoot, LightboxSlide, LightboxSlides, LightboxThumbnails, LightboxToolbar, createCloseToolbarItem, createDownloadToolbarItem, createFullscreenToolbarItem, createLightbox, createLightboxStore, createThumbnailsToolbarItem, lightbox, lightboxStore, useLightboxStore };

package/esm/lightbox.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "@mantine/core";
+//#region packages/@mantine/lightbox/src/lightbox.context.ts
+const [LightboxContextProvider, useLightboxContext] = createSafeContext("Lightbox component was not found in tree");
+//#endregion
+export { LightboxContextProvider, useLightboxContext };
+
+//# sourceMappingURL=lightbox.context.mjs.map

package/esm/lightbox.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.context.mjs","names":[],"sources":["../src/lightbox.context.ts"],"sourcesContent":["import type { EmblaCarouselType } from 'embla-carousel';\nimport { createSafeContext, GetStylesApi } from '@mantine/core';\nimport type { LightboxLabels, LightboxSlideData } from './lightbox.types';\nimport type { LightboxRootFactory } from './LightboxRoot/LightboxRoot';\n\nexport interface LightboxContextValue {\n  getStyles: GetStylesApi<LightboxRootFactory>;\n  labels: LightboxLabels;\n  opened: boolean;\n  slides: LightboxSlideData[];\n  currentIndex: number;\n  setIndex: (index: number) => void;\n  next: () => void;\n  prev: () => void;\n  embla: EmblaCarouselType | null;\n  emblaRef: React.RefCallback<HTMLDivElement> | null;\n  withZoom: boolean;\n  withThumbnails: boolean;\n  withFullscreen: boolean;\n  withDownload: boolean;\n  thumbnailsVisible: boolean;\n  toggleThumbnails: () => void;\n  isFullscreen: boolean;\n  toggleFullscreen: () => void;\n  zoomState: { scale: number; isZoomed: boolean };\n  toggleZoom: () => void;\n  getImageZoomProps: () => Record<string, any>;\n  onClose: () => void;\n  loop: boolean;\n  closeOnClickOutside: boolean;\n  closeOnSwipeDown: boolean;\n  transitionDuration: number;\n}\n\nexport const [LightboxContextProvider, useLightboxContext] =\n  createSafeContext<LightboxContextValue>('Lightbox component was not found in tree');\n"],"mappings":";;;AAkCA,MAAa,CAAC,yBAAyB,sBACrC,kBAAwC,0CAA0C"}

package/esm/lightbox.store.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { createStore, useStore } from "@mantine/store";
+//#region packages/@mantine/lightbox/src/lightbox.store.ts
+/** Creates a new lightbox store, use to run multiple independent lightboxes */
+const createLightboxStore = () => createStore({
+	opened: false,
+	slides: [],
+	currentIndex: 0,
+	loop: false
+});
+/** Subscribes to the given lightbox store and returns its current state */
+const useLightboxStore = (store) => useStore(store);
+function clampIndex(index, slidesCount) {
+	return Math.max(0, Math.min(Number.isFinite(index) ? Math.round(index) : 0, Math.max(0, slidesCount - 1)));
+}
+function updateLightboxStateAction(update, store) {
+	const state = store.getState();
+	store.setState({
+		...state,
+		...update(state)
+	});
+}
+function openLightboxAction(payload, store) {
+	updateLightboxStateAction(() => ({
+		opened: true,
+		slides: payload.slides,
+		currentIndex: clampIndex(payload.startIndex ?? 0, payload.slides.length)
+	}), store);
+}
+function closeLightboxAction(store) {
+	updateLightboxStateAction(() => ({ opened: false }), store);
+}
+function nextLightboxAction(store) {
+	updateLightboxStateAction((state) => {
+		const nextIndex = state.currentIndex + 1;
+		if (nextIndex < state.slides.length) return { currentIndex: nextIndex };
+		return { currentIndex: state.loop && state.slides.length > 0 ? 0 : state.currentIndex };
+	}, store);
+}
+function prevLightboxAction(store) {
+	updateLightboxStateAction((state) => {
+		const prevIndex = state.currentIndex - 1;
+		if (prevIndex >= 0) return { currentIndex: prevIndex };
+		return { currentIndex: state.loop && state.slides.length > 0 ? state.slides.length - 1 : 0 };
+	}, store);
+}
+function setLightboxIndexAction(index, store) {
+	updateLightboxStateAction((state) => ({ currentIndex: clampIndex(index, state.slides.length) }), store);
+}
+const lightboxActions = {
+	open: openLightboxAction,
+	close: closeLightboxAction,
+	next: nextLightboxAction,
+	prev: prevLightboxAction,
+	setIndex: setLightboxIndexAction,
+	updateState: updateLightboxStateAction
+};
+/** Creates an isolated store and a set of actions bound to it, use to run multiple independent lightboxes */
+function createLightbox() {
+	const store = createLightboxStore();
+	return [store, {
+		/** Opens the lightbox with the given slides, optionally at the given index */
+		open: (payload) => openLightboxAction(payload, store),
+		/** Closes the lightbox */
+		close: () => closeLightboxAction(store),
+		/** Navigates to the next slide */
+		next: () => nextLightboxAction(store),
+		/** Navigates to the previous slide */
+		prev: () => prevLightboxAction(store),
+		/** Sets the current slide index, the value is clamped to the slides range */
+		setIndex: (index) => setLightboxIndexAction(index, store)
+	}];
+}
+/** Default lightbox store (`lightboxStore`) and actions bound to it (`lightbox`), used by `Lightbox.Provider` and static `Lightbox.open/close/next/prev/setIndex` methods */
+const [lightboxStore, lightbox] = createLightbox();
+//#endregion
+export { closeLightboxAction, createLightbox, createLightboxStore, lightbox, lightboxActions, lightboxStore, nextLightboxAction, openLightboxAction, prevLightboxAction, setLightboxIndexAction, updateLightboxStateAction, useLightboxStore };
+
+//# sourceMappingURL=lightbox.store.mjs.map

package/esm/lightbox.store.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.store.mjs","names":[],"sources":["../src/lightbox.store.ts"],"sourcesContent":["import { createStore, MantineStore, useStore } from '@mantine/store';\nimport type { LightboxSlideData } from './lightbox.types';\n\nexport interface LightboxState {\n  /** Controls whether the lightbox is opened */\n  opened: boolean;\n\n  /** Array of slide data objects */\n  slides: LightboxSlideData[];\n\n  /** Index of the current slide */\n  currentIndex: number;\n\n  /** Determines whether `next` and `prev` actions wrap around, synced from the `loop` prop of `Lightbox.Provider` */\n  loop: boolean;\n}\n\nexport type LightboxStore = MantineStore<LightboxState>;\n\n/** Creates a new lightbox store, use to run multiple independent lightboxes */\nexport const createLightboxStore = () =>\n  createStore<LightboxState>({\n    opened: false,\n    slides: [],\n    currentIndex: 0,\n    loop: false,\n  });\n\n/** Subscribes to the given lightbox store and returns its current state */\nexport const useLightboxStore = (store: LightboxStore) => useStore(store);\n\nfunction clampIndex(index: number, slidesCount: number) {\n  const normalized = Number.isFinite(index) ? Math.round(index) : 0;\n  return Math.max(0, Math.min(normalized, Math.max(0, slidesCount - 1)));\n}\n\nexport function updateLightboxStateAction(\n  update: (state: LightboxState) => Partial<LightboxState>,\n  store: LightboxStore\n) {\n  const state = store.getState();\n  store.setState({ ...state, ...update(state) });\n}\n\nexport function openLightboxAction(\n  payload: { slides: LightboxSlideData[]; startIndex?: number },\n  store: LightboxStore\n) {\n  updateLightboxStateAction(\n    () => ({\n      opened: true,\n      slides: payload.slides,\n      currentIndex: clampIndex(payload.startIndex ?? 0, payload.slides.length),\n    }),\n    store\n  );\n}\n\nexport function closeLightboxAction(store: LightboxStore) {\n  updateLightboxStateAction(() => ({ opened: false }), store);\n}\n\nexport function nextLightboxAction(store: LightboxStore) {\n  updateLightboxStateAction((state) => {\n    const nextIndex = state.currentIndex + 1;\n\n    if (nextIndex < state.slides.length) {\n      return { currentIndex: nextIndex };\n    }\n\n    return { currentIndex: state.loop && state.slides.length > 0 ? 0 : state.currentIndex };\n  }, store);\n}\n\nexport function prevLightboxAction(store: LightboxStore) {\n  updateLightboxStateAction((state) => {\n    const prevIndex = state.currentIndex - 1;\n\n    if (prevIndex >= 0) {\n      return { currentIndex: prevIndex };\n    }\n\n    return {\n      currentIndex: state.loop && state.slides.length > 0 ? state.slides.length - 1 : 0,\n    };\n  }, store);\n}\n\nexport function setLightboxIndexAction(index: number, store: LightboxStore) {\n  updateLightboxStateAction(\n    (state) => ({ currentIndex: clampIndex(index, state.slides.length) }),\n    store\n  );\n}\n\nexport const lightboxActions = {\n  open: openLightboxAction,\n  close: closeLightboxAction,\n  next: nextLightboxAction,\n  prev: prevLightboxAction,\n  setIndex: setLightboxIndexAction,\n  updateState: updateLightboxStateAction,\n};\n\n/** Creates an isolated store and a set of actions bound to it, use to run multiple independent lightboxes */\nexport function createLightbox() {\n  const store = createLightboxStore();\n  const actions = {\n    /** Opens the lightbox with the given slides, optionally at the given index */\n    open: (payload: { slides: LightboxSlideData[]; startIndex?: number }) =>\n      openLightboxAction(payload, store),\n\n    /** Closes the lightbox */\n    close: () => closeLightboxAction(store),\n\n    /** Navigates to the next slide */\n    next: () => nextLightboxAction(store),\n\n    /** Navigates to the previous slide */\n    prev: () => prevLightboxAction(store),\n\n    /** Sets the current slide index, the value is clamped to the slides range */\n    setIndex: (index: number) => setLightboxIndexAction(index, store),\n  };\n\n  return [store, actions] as const;\n}\n\n/** Default lightbox store (`lightboxStore`) and actions bound to it (`lightbox`), used by `Lightbox.Provider` and static `Lightbox.open/close/next/prev/setIndex` methods */\nexport const [lightboxStore, lightbox] = createLightbox();\n"],"mappings":";;;;AAoBA,MAAa,4BACX,YAA2B;CACzB,QAAQ;CACR,QAAQ,CAAC;CACT,cAAc;CACd,MAAM;AACR,CAAC;;AAGH,MAAa,oBAAoB,UAAyB,SAAS,KAAK;AAExE,SAAS,WAAW,OAAe,aAAqB;CAEtD,OAAO,KAAK,IAAI,GAAG,KAAK,IADL,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,GACxB,KAAK,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC;AACvE;AAEA,SAAgB,0BACd,QACA,OACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,SAAS;EAAE,GAAG;EAAO,GAAG,OAAO,KAAK;CAAE,CAAC;AAC/C;AAEA,SAAgB,mBACd,SACA,OACA;CACA,iCACS;EACL,QAAQ;EACR,QAAQ,QAAQ;EAChB,cAAc,WAAW,QAAQ,cAAc,GAAG,QAAQ,OAAO,MAAM;CACzE,IACA,KACF;AACF;AAEA,SAAgB,oBAAoB,OAAsB;CACxD,iCAAiC,EAAE,QAAQ,MAAM,IAAI,KAAK;AAC5D;AAEA,SAAgB,mBAAmB,OAAsB;CACvD,2BAA2B,UAAU;EACnC,MAAM,YAAY,MAAM,eAAe;EAEvC,IAAI,YAAY,MAAM,OAAO,QAC3B,OAAO,EAAE,cAAc,UAAU;EAGnC,OAAO,EAAE,cAAc,MAAM,QAAQ,MAAM,OAAO,SAAS,IAAI,IAAI,MAAM,aAAa;CACxF,GAAG,KAAK;AACV;AAEA,SAAgB,mBAAmB,OAAsB;CACvD,2BAA2B,UAAU;EACnC,MAAM,YAAY,MAAM,eAAe;EAEvC,IAAI,aAAa,GACf,OAAO,EAAE,cAAc,UAAU;EAGnC,OAAO,EACL,cAAc,MAAM,QAAQ,MAAM,OAAO,SAAS,IAAI,MAAM,OAAO,SAAS,IAAI,EAClF;CACF,GAAG,KAAK;AACV;AAEA,SAAgB,uBAAuB,OAAe,OAAsB;CAC1E,2BACG,WAAW,EAAE,cAAc,WAAW,OAAO,MAAM,OAAO,MAAM,EAAE,IACnE,KACF;AACF;AAEA,MAAa,kBAAkB;CAC7B,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,aAAa;AACf;;AAGA,SAAgB,iBAAiB;CAC/B,MAAM,QAAQ,oBAAoB;CAmBlC,OAAO,CAAC,OAAO;;EAhBb,OAAO,YACL,mBAAmB,SAAS,KAAK;;EAGnC,aAAa,oBAAoB,KAAK;;EAGtC,YAAY,mBAAmB,KAAK;;EAGpC,YAAY,mBAAmB,KAAK;;EAGpC,WAAW,UAAkB,uBAAuB,OAAO,KAAK;CAG7C,CAAC;AACxB;;AAGA,MAAa,CAAC,eAAe,YAAY,eAAe"}