@mantine/lightbox 9.5.2

package/cjs/LightboxRoot/LightboxRoot.cjs

@@ -0,0 +1,407 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_default_labels = require("../default-labels.cjs");
+const require_lightbox_context = require("../lightbox.context.cjs");
+const require_Lightbox_module = require("../Lightbox.module.cjs");
+const require_use_lightbox_keyboard = require("../hooks/use-lightbox-keyboard.cjs");
+const require_use_lightbox_lock_scroll = require("../hooks/use-lightbox-lock-scroll.cjs");
+const require_use_lightbox_zoom = require("../hooks/use-lightbox-zoom.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let embla_carousel_react = require("embla-carousel-react");
+embla_carousel_react = require_runtime.__toESM(embla_carousel_react);
+let _mantine_hooks = require("@mantine/hooks");
+//#region packages/@mantine/lightbox/src/LightboxRoot/LightboxRoot.tsx
+const 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
+};
+function createBreakpointWatchDrag(query, zoomIsActive, watchDragRef) {
+	return (emblaApi, event) => {
+		if (zoomIsActive.current) return false;
+		const option = watchDragRef.current[query];
+		if (typeof option === "function") return option(emblaApi, event);
+		return option ?? true;
+	};
+}
+const defaultContentTransition = {
+	common: { transformOrigin: "center center" },
+	in: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	out: {
+		opacity: 0,
+		transform: "scale(0.95)"
+	},
+	transitionProperty: "transform, opacity"
+};
+function exitDocumentFullscreen() {
+	const _document = document;
+	const exit = _document.exitFullscreen || _document.msExitFullscreen || _document.webkitExitFullscreen || _document.mozCancelFullScreen;
+	if (typeof exit === "function") Promise.resolve(exit.call(_document)).catch(() => {});
+}
+const varsResolver = (0, _mantine_core.createVarsResolver)((_, { transitionDuration, zIndex }) => ({ root: {
+	"--lightbox-transition-duration": `${transitionDuration}ms`,
+	"--lightbox-overlay-color": void 0,
+	"--lightbox-z-index": zIndex !== void 0 ? `${zIndex}` : void 0,
+	"--lightbox-toolbar-height": void 0,
+	"--lightbox-thumbnails-height": void 0
+} }));
+const LightboxRoot = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("LightboxRoot", lightboxRootDefaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, opened, onClose, children, slides, currentIndex, onIndexChange, labels, withZoom, withThumbnails, withFullscreen, withDownload, loop, closeOnClickOutside, closeOnSwipeDown, withKeyboardEvents, returnFocus, withInitialFocusPlaceholder, withinPortal, zIndex, transitionDuration, transitionProps, emblaOptions, zoomMaxScale, withSlideTransition, attributes, mod, onClick, ref, ...others } = props;
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: "Lightbox",
+		classes: require_Lightbox_module.default,
+		props,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const _labels = (0, react.useMemo)(() => ({
+		...require_default_labels.DEFAULT_LABELS,
+		...labels
+	}), [labels]);
+	const getStylesRef = (0, react.useRef)(getStyles);
+	getStylesRef.current = getStyles;
+	const stableGetStyles = (0, react.useCallback)((...args) => getStylesRef.current(...args), []);
+	const [_currentIndex, setCurrentIndex] = (0, _mantine_hooks.useUncontrolled)({
+		value: currentIndex,
+		defaultValue: 0,
+		finalValue: 0,
+		onChange: onIndexChange
+	});
+	const zoomIsActive = (0, react.useRef)(false);
+	const currentIndexRef = (0, react.useRef)(_currentIndex);
+	const setCurrentIndexRef = (0, react.useRef)(setCurrentIndex);
+	const suppressSelectRef = (0, react.useRef)(null);
+	const fullscreenRequestedRef = (0, react.useRef)(false);
+	const ownsFullscreenRef = (0, react.useRef)(false);
+	const pendingFullscreenRef = (0, react.useRef)(null);
+	const exitOnSettleRef = (0, react.useRef)(false);
+	const emblaOptionsRef = (0, react.useRef)(emblaOptions);
+	const [startIndex, setStartIndex] = (0, react.useState)(_currentIndex);
+	const [prevOpened, setPrevOpened] = (0, react.useState)(opened);
+	if (opened !== prevOpened) {
+		setPrevOpened(opened);
+		if (opened) setStartIndex(_currentIndex);
+	}
+	const { dir } = (0, _mantine_core.useDirection)();
+	const breakpointWatchDragRef = (0, react.useRef)({});
+	const resolvedEmblaOptions = (0, react.useMemo)(() => {
+		if (!emblaOptions?.breakpoints) {
+			breakpointWatchDragRef.current = {};
+			return emblaOptions;
+		}
+		const watchDragOptions = {};
+		const breakpoints = Object.fromEntries(Object.entries(emblaOptions.breakpoints).map(([query, value]) => {
+			const { loop: _loop, startIndex: _startIndex, watchDrag, ...rest } = value ?? {};
+			watchDragOptions[query] = watchDrag;
+			return [query, watchDrag === void 0 ? rest : {
+				...rest,
+				watchDrag: createBreakpointWatchDrag(query, zoomIsActive, breakpointWatchDragRef)
+			}];
+		}));
+		breakpointWatchDragRef.current = watchDragOptions;
+		return {
+			...emblaOptions,
+			breakpoints
+		};
+	}, [emblaOptions]);
+	const [emblaRef, embla] = (0, embla_carousel_react.default)({
+		direction: dir,
+		...resolvedEmblaOptions,
+		loop,
+		startIndex,
+		watchDrag: (emblaApi, event) => {
+			if (zoomIsActive.current) return false;
+			const userWatchDrag = emblaOptionsRef.current?.watchDrag;
+			if (typeof userWatchDrag === "function") return userWatchDrag(emblaApi, event);
+			return userWatchDrag ?? true;
+		}
+	});
+	const [thumbnailsVisible, setThumbnailsVisible] = (0, react.useState)(!!withThumbnails);
+	const [prevWithThumbnails, setPrevWithThumbnails] = (0, react.useState)(withThumbnails);
+	if (withThumbnails !== prevWithThumbnails) {
+		setPrevWithThumbnails(withThumbnails);
+		setThumbnailsVisible(!!withThumbnails);
+	}
+	const { toggle: toggleFullscreenFn, fullscreen: isFullscreen } = (0, _mantine_hooks.useFullscreenDocument)();
+	const toggleThumbnails = (0, react.useCallback)(() => {
+		setThumbnailsVisible((prev) => !prev);
+	}, []);
+	const toggleFullscreen = (0, react.useCallback)(() => {
+		fullscreenRequestedRef.current = !isFullscreen;
+		if (isFullscreen) ownsFullscreenRef.current = false;
+		const request = toggleFullscreenFn().then(() => {
+			if (pendingFullscreenRef.current === request && exitOnSettleRef.current) {
+				exitOnSettleRef.current = false;
+				exitDocumentFullscreen();
+			}
+		}).catch(() => {
+			fullscreenRequestedRef.current = false;
+			exitOnSettleRef.current = false;
+		}).finally(() => {
+			if (pendingFullscreenRef.current === request) pendingFullscreenRef.current = null;
+		});
+		pendingFullscreenRef.current = request;
+	}, [toggleFullscreenFn, isFullscreen]);
+	(0, react.useEffect)(() => {
+		if (!isFullscreen) {
+			fullscreenRequestedRef.current = false;
+			ownsFullscreenRef.current = false;
+		} else if (fullscreenRequestedRef.current) {
+			fullscreenRequestedRef.current = false;
+			ownsFullscreenRef.current = true;
+		}
+	}, [isFullscreen]);
+	const exitOwnedFullscreen = (0, react.useCallback)(() => {
+		if (!ownsFullscreenRef.current && !fullscreenRequestedRef.current) return;
+		if (pendingFullscreenRef.current !== null && fullscreenRequestedRef.current) exitOnSettleRef.current = true;
+		fullscreenRequestedRef.current = false;
+		ownsFullscreenRef.current = false;
+		exitDocumentFullscreen();
+	}, []);
+	const zoom = require_use_lightbox_zoom.useLightboxZoom({
+		enabled: !!withZoom,
+		maxScale: zoomMaxScale,
+		currentIndex: _currentIndex
+	});
+	(0, react.useEffect)(() => {
+		currentIndexRef.current = _currentIndex;
+		setCurrentIndexRef.current = setCurrentIndex;
+		zoomIsActive.current = zoom.zoomState.isZoomed;
+		emblaOptionsRef.current = emblaOptions;
+	});
+	const { resetZoom } = zoom;
+	(0, react.useEffect)(() => {
+		if (!opened) {
+			resetZoom();
+			setThumbnailsVisible(!!withThumbnails);
+			exitOwnedFullscreen();
+		}
+	}, [
+		opened,
+		resetZoom,
+		withThumbnails,
+		exitOwnedFullscreen
+	]);
+	(0, react.useEffect)(() => exitOwnedFullscreen, [exitOwnedFullscreen]);
+	const theme = (0, _mantine_core.useMantineTheme)();
+	const shouldReduceMotion = (0, _mantine_hooks.useReducedMotion)();
+	const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
+	const animateSlides = !!withSlideTransition && !reduceMotion;
+	const handleNext = (0, react.useCallback)(() => {
+		embla?.scrollNext(!animateSlides);
+	}, [embla, animateSlides]);
+	const handlePrev = (0, react.useCallback)(() => {
+		embla?.scrollPrev(!animateSlides);
+	}, [embla, animateSlides]);
+	require_use_lightbox_keyboard.useLightboxKeyboard({
+		opened,
+		enabled: withKeyboardEvents,
+		dir,
+		onClose,
+		onNext: handleNext,
+		onPrev: handlePrev,
+		onToggleFullscreen: withFullscreen ? toggleFullscreen : void 0,
+		onToggleThumbnails: withThumbnails ? toggleThumbnails : void 0,
+		onToggleZoom: withZoom ? zoom.toggleZoom : void 0,
+		onZoomPan: withZoom ? zoom.panZoom : void 0
+	});
+	(0, react.useEffect)(() => {
+		if (!embla) return;
+		const onSelect = () => {
+			const selected = embla.selectedScrollSnap();
+			if (selected !== suppressSelectRef.current) setCurrentIndexRef.current(selected);
+		};
+		const onReInit = () => {
+			if (embla.selectedScrollSnap() !== currentIndexRef.current) {
+				suppressSelectRef.current = currentIndexRef.current;
+				embla.scrollTo(currentIndexRef.current, true);
+				suppressSelectRef.current = null;
+			}
+		};
+		embla.on("select", onSelect);
+		embla.on("reInit", onReInit);
+		return () => {
+			embla.off("select", onSelect);
+			embla.off("reInit", onReInit);
+		};
+	}, [embla]);
+	(0, react.useEffect)(() => {
+		if (embla && opened && embla.selectedScrollSnap() !== _currentIndex) {
+			suppressSelectRef.current = _currentIndex;
+			embla.scrollTo(_currentIndex, !animateSlides);
+			suppressSelectRef.current = null;
+		}
+	}, [
+		_currentIndex,
+		embla,
+		opened,
+		animateSlides
+	]);
+	(0, react.useEffect)(() => {
+		if (slides.length > 0 && _currentIndex > slides.length - 1) setCurrentIndexRef.current(slides.length - 1);
+	}, [slides.length, _currentIndex]);
+	(0, _mantine_hooks.useFocusReturn)({
+		opened,
+		shouldReturnFocus: returnFocus
+	});
+	const shouldLockScroll = require_use_lightbox_lock_scroll.useLightboxLockScroll({
+		opened,
+		exitDuration: typeof transitionProps?.exitDuration === "number" ? transitionProps.exitDuration : typeof transitionProps?.duration === "number" ? transitionProps.duration : transitionDuration,
+		exitDelay: typeof transitionProps?.exitDelay === "number" ? transitionProps.exitDelay : 0
+	});
+	const transition = {
+		transition: defaultContentTransition,
+		duration: transitionDuration,
+		timingFunction: "ease",
+		...transitionProps
+	};
+	const overlayTransition = {
+		transition: "fade",
+		duration: transition.duration,
+		exitDuration: transition.exitDuration,
+		timingFunction: transition.timingFunction,
+		enterDelay: transition.enterDelay,
+		exitDelay: transition.exitDelay,
+		keepMounted: transition.keepMounted
+	};
+	const setIndex = (0, react.useCallback)((index) => {
+		setCurrentIndexRef.current(index);
+		suppressSelectRef.current = index;
+		embla?.scrollTo(index, !animateSlides);
+		suppressSelectRef.current = null;
+	}, [embla, animateSlides]);
+	const currentSlide = slides[_currentIndex];
+	const currentSlideLabel = currentSlide?.type === "video" ? currentSlide.label : currentSlide?.type === "custom" ? void 0 : currentSlide?.alt;
+	const contextValue = (0, react.useMemo)(() => ({
+		getStyles: stableGetStyles,
+		labels: _labels,
+		opened,
+		slides,
+		currentIndex: _currentIndex,
+		setIndex,
+		next: handleNext,
+		prev: handlePrev,
+		embla: embla ?? null,
+		emblaRef,
+		withZoom: !!withZoom,
+		withThumbnails: !!withThumbnails,
+		withFullscreen: !!withFullscreen,
+		withDownload: !!withDownload,
+		thumbnailsVisible,
+		toggleThumbnails,
+		isFullscreen,
+		toggleFullscreen,
+		zoomState: zoom.zoomState,
+		toggleZoom: zoom.toggleZoom,
+		getImageZoomProps: zoom.getImageProps,
+		onClose,
+		loop: !!loop,
+		closeOnClickOutside: !!closeOnClickOutside,
+		closeOnSwipeDown: !!closeOnSwipeDown,
+		transitionDuration
+	}), [
+		stableGetStyles,
+		_labels,
+		opened,
+		slides,
+		_currentIndex,
+		setIndex,
+		handleNext,
+		handlePrev,
+		embla,
+		emblaRef,
+		withZoom,
+		withThumbnails,
+		withFullscreen,
+		withDownload,
+		thumbnailsVisible,
+		toggleThumbnails,
+		isFullscreen,
+		toggleFullscreen,
+		zoom,
+		onClose,
+		loop,
+		closeOnClickOutside,
+		closeOnSwipeDown,
+		transitionDuration
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.OptionalPortal, {
+		withinPortal,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lightbox_context.LightboxContextProvider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.RemoveScroll, {
+				enabled: shouldLockScroll,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+					...getStyles("root"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Transition, {
+						mounted: opened,
+						...overlayTransition,
+						children: (overlayStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...getStyles("overlay", { style: overlayStyles }) })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Transition, {
+						mounted: opened,
+						...transition,
+						children: (contentStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.FocusTrap, {
+							active: opened,
+							innerRef: ref,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+								...getStyles("content", {
+									className,
+									style: style ? [style, contentStyles] : contentStyles
+								}),
+								role: "dialog",
+								"aria-modal": "true",
+								"aria-label": _labels.lightboxLabel,
+								tabIndex: -1,
+								...others,
+								mod,
+								onClick: (event) => {
+									onClick?.(event);
+									if (closeOnClickOutside && event.target === event.currentTarget) onClose();
+								},
+								children: [
+									withInitialFocusPlaceholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.FocusTrap.InitialFocus, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.VisuallyHidden, {
+										role: "status",
+										"aria-live": "polite",
+										"aria-atomic": "true",
+										children: slides.length > 0 ? `${_labels.slideLabel(_currentIndex + 1, slides.length)}${currentSlideLabel ? `: ${currentSlideLabel}` : ""}` : null
+									}),
+									children
+								]
+							})
+						})
+					})]
+				})
+			})
+		})
+	});
+});
+LightboxRoot.classes = require_Lightbox_module.default;
+LightboxRoot.varsResolver = varsResolver;
+LightboxRoot.displayName = "@mantine/lightbox/LightboxRoot";
+//#endregion
+exports.LightboxRoot = LightboxRoot;
+exports.lightboxRootDefaultProps = lightboxRootDefaultProps;
+
+//# sourceMappingURL=LightboxRoot.cjs.map

package/cjs/LightboxRoot/LightboxRoot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxRoot.cjs","names":["createVarsResolver","factory","useProps","useStyles","useMemo","DEFAULT_LABELS","useRef","useCallback","useUncontrolled","useState","useDirection","useEmblaCarousel","useFullscreenDocument","useLightboxZoom","useMantineTheme","useReducedMotion","useLightboxLockScroll","OptionalPortal","LightboxContextProvider","RemoveScroll","Box","Transition","FocusTrap","VisuallyHidden","classes"],"sources":["../../src/LightboxRoot/LightboxRoot.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { EmblaOptionsType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  FocusTrap,\n  MantineTransition,\n  OptionalPortal,\n  RemoveScroll,\n  StylesApiProps,\n  Transition,\n  TransitionOverride,\n  useDirection,\n  useMantineTheme,\n  useProps,\n  useStyles,\n  VisuallyHidden,\n} from '@mantine/core';\nimport {\n  useFocusReturn,\n  useFullscreenDocument,\n  useReducedMotion,\n  useUncontrolled,\n} from '@mantine/hooks';\nimport { DEFAULT_LABELS } from '../default-labels';\nimport { useLightboxKeyboard } from '../hooks/use-lightbox-keyboard';\nimport { useLightboxLockScroll } from '../hooks/use-lightbox-lock-scroll';\nimport { useLightboxZoom } from '../hooks/use-lightbox-zoom';\nimport { LightboxContextProvider } from '../lightbox.context';\nimport type { LightboxLabels, LightboxSlideData } from '../lightbox.types';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxRootStylesNames =\n  | 'root'\n  | 'overlay'\n  | 'content'\n  | 'toolbar'\n  | 'toolbarGroup'\n  | 'toolbarButton'\n  | 'counter'\n  | 'slides'\n  | 'slidesViewport'\n  | 'slidesContainer'\n  | 'slide'\n  | 'slideImage'\n  | 'slideVideo'\n  | 'thumbnails'\n  | 'thumbnailsViewport'\n  | 'thumbnailsContainer'\n  | 'thumbnail'\n  | 'thumbnailImage'\n  | 'navigation'\n  | 'navigationButton'\n  | 'caption'\n  | 'closeButton';\n\nexport type LightboxCssVariables = {\n  root:\n    | '--lightbox-transition-duration'\n    | '--lightbox-overlay-color'\n    | '--lightbox-z-index'\n    | '--lightbox-toolbar-height'\n    | '--lightbox-thumbnails-height';\n};\n\nexport interface LightboxRootProps\n  extends BoxProps, StylesApiProps<LightboxRootFactory>, ElementProps<'div', 'children'> {\n  /** Controls whether the lightbox is opened */\n  opened: boolean;\n\n  /** Called when the lightbox is closed */\n  onClose: () => void;\n\n  /** Lightbox content (compound components) */\n  children: React.ReactNode;\n\n  /** Array of slide data objects */\n  slides: LightboxSlideData[];\n\n  /** Controlled current slide index */\n  currentIndex?: number;\n\n  /** Called when the current slide index changes */\n  onIndexChange?: (index: number) => void;\n\n  /** Labels used in the component, used for accessibility and localization */\n  labels?: Partial<LightboxLabels>;\n\n  /** Enables image zoom on click/pinch @default false */\n  withZoom?: boolean;\n\n  /** Shows bottom thumbnail strip @default false */\n  withThumbnails?: boolean;\n\n  /** Adds fullscreen toggle to toolbar @default false */\n  withFullscreen?: boolean;\n\n  /** Adds download button to toolbar @default false */\n  withDownload?: boolean;\n\n  /** Enables infinite loop navigation @default false */\n  loop?: boolean;\n\n  /** Closes lightbox when the empty space around the slide content is clicked @default false */\n  closeOnClickOutside?: boolean;\n\n  /** Closes lightbox when swiping down on mobile @default true */\n  closeOnSwipeDown?: boolean;\n\n  /** Determines whether keyboard shortcuts (arrows, `F`/`T`/`Z`) are active, `Escape` always closes the lightbox @default true */\n  withKeyboardEvents?: boolean;\n\n  /** Determines whether focus should be returned to the last active element when the lightbox is closed @default true */\n  returnFocus?: boolean;\n\n  /** Adds a hidden focusable element at the start of the lightbox content – prevents the first toolbar button from receiving visible focus when the lightbox is opened with a pointer. Set to `false` if you need custom focus management. @default true */\n  withInitialFocusPlaceholder?: boolean;\n\n  /** Determines whether the lightbox should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** `z-index` of the overlay and content elements, `400` by default */\n  zIndex?: string | number;\n\n  /** Transition duration in milliseconds @default 200 */\n  transitionDuration?: number;\n\n  /** Props passed down to the `Transition` component that animates the content, the overlay always fades. By default, the content is scaled from 95% to 100% while fading in. */\n  transitionProps?: TransitionOverride;\n\n  /** Additional Embla carousel options. `loop` and `startIndex` are controlled by the\n   * `loop` and `currentIndex` props and cannot be set here, at the top level or in\n   * `breakpoints`; a `watchDrag` option is still honored at both levels, but dragging is\n   * always disabled while the image is zoomed. */\n  emblaOptions?: EmblaOptionsType;\n\n  /** Maximum zoom scale @default 3 */\n  zoomMaxScale?: number;\n\n  /** Enables animated slide transitions for programmatic navigation @default false */\n  withSlideTransition?: boolean;\n}\n\nexport type LightboxRootFactory = Factory<{\n  props: LightboxRootProps;\n  ref: HTMLDivElement;\n  stylesNames: LightboxRootStylesNames;\n  vars: LightboxCssVariables;\n}>;\n\nexport const lightboxRootDefaultProps = {\n  withZoom: false,\n  withThumbnails: false,\n  withFullscreen: false,\n  withDownload: false,\n  loop: false,\n  closeOnClickOutside: false,\n  closeOnSwipeDown: true,\n  withKeyboardEvents: true,\n  returnFocus: true,\n  withInitialFocusPlaceholder: true,\n  withinPortal: true,\n  transitionDuration: 200,\n  zoomMaxScale: 3,\n  withSlideTransition: false,\n} satisfies Partial<LightboxRootProps>;\n\ntype WatchDragOption = EmblaOptionsType['watchDrag'];\n\nfunction createBreakpointWatchDrag(\n  query: string,\n  zoomIsActive: React.RefObject<boolean>,\n  watchDragRef: React.RefObject<Record<string, WatchDragOption>>\n): WatchDragOption {\n  return (emblaApi, event) => {\n    if (zoomIsActive.current) {\n      return false;\n    }\n\n    const option = watchDragRef.current[query];\n\n    if (typeof option === 'function') {\n      return option(emblaApi, event);\n    }\n\n    return option ?? true;\n  };\n}\n\nconst defaultContentTransition: MantineTransition = {\n  common: { transformOrigin: 'center center' },\n  in: { opacity: 1, transform: 'scale(1)' },\n  out: { opacity: 0, transform: 'scale(0.95)' },\n  transitionProperty: 'transform, opacity',\n};\n\nfunction exitDocumentFullscreen() {\n  const _document = document as any;\n  const exit =\n    _document.exitFullscreen ||\n    _document.msExitFullscreen ||\n    _document.webkitExitFullscreen ||\n    _document.mozCancelFullScreen;\n\n  if (typeof exit === 'function') {\n    Promise.resolve(exit.call(_document)).catch(() => {});\n  }\n}\n\nconst varsResolver = createVarsResolver<LightboxRootFactory>(\n  (_, { transitionDuration, zIndex }) => ({\n    root: {\n      '--lightbox-transition-duration': `${transitionDuration}ms`,\n      '--lightbox-overlay-color': undefined,\n      '--lightbox-z-index': zIndex !== undefined ? `${zIndex}` : undefined,\n      '--lightbox-toolbar-height': undefined,\n      '--lightbox-thumbnails-height': undefined,\n    },\n  })\n);\n\nexport const LightboxRoot = factory<LightboxRootFactory>((_props) => {\n  const props = useProps('LightboxRoot', lightboxRootDefaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    opened,\n    onClose,\n    children,\n    slides,\n    currentIndex,\n    onIndexChange,\n    labels,\n    withZoom,\n    withThumbnails,\n    withFullscreen,\n    withDownload,\n    loop,\n    closeOnClickOutside,\n    closeOnSwipeDown,\n    withKeyboardEvents,\n    returnFocus,\n    withInitialFocusPlaceholder,\n    withinPortal,\n    zIndex,\n    transitionDuration,\n    transitionProps,\n    emblaOptions,\n    zoomMaxScale,\n    withSlideTransition,\n    attributes,\n    mod,\n    onClick,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<LightboxRootFactory>({\n    name: 'Lightbox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);\n\n  const getStylesRef = useRef(getStyles);\n  getStylesRef.current = getStyles;\n\n  const stableGetStyles = useCallback<typeof getStyles>(\n    (...args) => getStylesRef.current(...args),\n    []\n  );\n\n  const [_currentIndex, setCurrentIndex] = useUncontrolled({\n    value: currentIndex,\n    defaultValue: 0,\n    finalValue: 0,\n    onChange: onIndexChange,\n  });\n\n  const zoomIsActive = useRef(false);\n  const currentIndexRef = useRef(_currentIndex);\n  const setCurrentIndexRef = useRef(setCurrentIndex);\n\n  // Embla emits `select` synchronously from `scrollTo`. When the scroll was requested for\n  // an index the consumer already knows about, that echo is suppressed for the duration\n  // of the call so `onIndexChange` is not reported twice for one navigation.\n  const suppressSelectRef = useRef<number | null>(null);\n  const fullscreenRequestedRef = useRef(false);\n  const ownsFullscreenRef = useRef(false);\n\n  // A `requestFullscreen` that is still in flight, and whether it should be undone as soon\n  // as it settles because the lightbox closed in the meantime.\n  const pendingFullscreenRef = useRef<Promise<void> | null>(null);\n  const exitOnSettleRef = useRef(false);\n\n  // Embla compares options by function source, so the `watchDrag` closure above must stay\n  // textually stable – the current user options are read through this ref instead.\n  const emblaOptionsRef = useRef(emblaOptions);\n\n  const [startIndex, setStartIndex] = useState(_currentIndex);\n  const [prevOpened, setPrevOpened] = useState(opened);\n\n  if (opened !== prevOpened) {\n    setPrevOpened(opened);\n    if (opened) {\n      setStartIndex(_currentIndex);\n    }\n  }\n\n  const { dir } = useDirection();\n\n  const breakpointWatchDragRef = useRef<Record<string, WatchDragOption>>({});\n\n  const resolvedEmblaOptions = useMemo(() => {\n    if (!emblaOptions?.breakpoints) {\n      breakpointWatchDragRef.current = {};\n      return emblaOptions;\n    }\n\n    const watchDragOptions: Record<string, WatchDragOption> = {};\n\n    const breakpoints = Object.fromEntries(\n      Object.entries(emblaOptions.breakpoints).map(([query, value]) => {\n        const { loop: _loop, startIndex: _startIndex, watchDrag, ...rest } = value ?? {};\n        watchDragOptions[query] = watchDrag;\n\n        return [\n          query,\n          watchDrag === undefined\n            ? rest\n            : {\n                ...rest,\n                watchDrag: createBreakpointWatchDrag(query, zoomIsActive, breakpointWatchDragRef),\n              },\n        ];\n      })\n    );\n\n    breakpointWatchDragRef.current = watchDragOptions;\n    return { ...emblaOptions, breakpoints };\n  }, [emblaOptions]);\n\n  const [emblaRef, embla] = useEmblaCarousel({\n    // Placed before the user options so `emblaOptions.direction` can still override it,\n    // the same way `@mantine/carousel` wires direction up.\n    direction: dir,\n    ...resolvedEmblaOptions,\n    loop,\n    startIndex,\n    watchDrag: (emblaApi, event) => {\n      // The zoom gesture lock always wins – dragging a zoomed image pans it\n      // instead of changing the slide.\n      if (zoomIsActive.current) {\n        return false;\n      }\n\n      const userWatchDrag = emblaOptionsRef.current?.watchDrag;\n      if (typeof userWatchDrag === 'function') {\n        return userWatchDrag(emblaApi, event);\n      }\n\n      return userWatchDrag ?? true;\n    },\n  });\n\n  const [thumbnailsVisible, setThumbnailsVisible] = useState(!!withThumbnails);\n  const [prevWithThumbnails, setPrevWithThumbnails] = useState(withThumbnails);\n\n  // Toggling the feature while the lightbox is open used to leave the strip expanded with\n  // no way to collapse it – the toolbar button that toggles it is only rendered while\n  // `withThumbnails` is set.\n  if (withThumbnails !== prevWithThumbnails) {\n    setPrevWithThumbnails(withThumbnails);\n    setThumbnailsVisible(!!withThumbnails);\n  }\n\n  const { toggle: toggleFullscreenFn, fullscreen: isFullscreen } = useFullscreenDocument();\n\n  const toggleThumbnails = useCallback(() => {\n    setThumbnailsVisible((prev) => !prev);\n  }, []);\n\n  const toggleFullscreen = useCallback(() => {\n    fullscreenRequestedRef.current = !isFullscreen;\n    if (isFullscreen) {\n      ownsFullscreenRef.current = false;\n    }\n\n    const request = toggleFullscreenFn()\n      .then(() => {\n        // Closing while `requestFullscreen` is still pending cannot exit anything yet – the\n        // browser has not entered fullscreen. The exit has to be retried once the request\n        // settles, or the page is left fullscreen with no lightbox on top of it.\n        if (pendingFullscreenRef.current === request && exitOnSettleRef.current) {\n          exitOnSettleRef.current = false;\n          exitDocumentFullscreen();\n        }\n      })\n      .catch(() => {\n        fullscreenRequestedRef.current = false;\n        exitOnSettleRef.current = false;\n      })\n      .finally(() => {\n        if (pendingFullscreenRef.current === request) {\n          pendingFullscreenRef.current = null;\n        }\n      });\n\n    pendingFullscreenRef.current = request;\n  }, [toggleFullscreenFn, isFullscreen]);\n\n  useEffect(() => {\n    if (!isFullscreen) {\n      fullscreenRequestedRef.current = false;\n      ownsFullscreenRef.current = false;\n    } else if (fullscreenRequestedRef.current) {\n      fullscreenRequestedRef.current = false;\n      ownsFullscreenRef.current = true;\n    }\n  }, [isFullscreen]);\n\n  const exitOwnedFullscreen = useCallback(() => {\n    if (!ownsFullscreenRef.current && !fullscreenRequestedRef.current) {\n      return;\n    }\n\n    // A request that has not settled yet cannot be exited now – it is exited when it does.\n    if (pendingFullscreenRef.current !== null && fullscreenRequestedRef.current) {\n      exitOnSettleRef.current = true;\n    }\n\n    fullscreenRequestedRef.current = false;\n    ownsFullscreenRef.current = false;\n    exitDocumentFullscreen();\n  }, []);\n\n  const zoom = useLightboxZoom({\n    enabled: !!withZoom,\n    maxScale: zoomMaxScale!,\n    currentIndex: _currentIndex,\n  });\n\n  useEffect(() => {\n    currentIndexRef.current = _currentIndex;\n    setCurrentIndexRef.current = setCurrentIndex;\n    zoomIsActive.current = zoom.zoomState.isZoomed;\n    emblaOptionsRef.current = emblaOptions;\n  });\n\n  const { resetZoom } = zoom;\n\n  useEffect(() => {\n    if (!opened) {\n      resetZoom();\n      setThumbnailsVisible(!!withThumbnails);\n      exitOwnedFullscreen();\n    }\n  }, [opened, resetZoom, withThumbnails, exitOwnedFullscreen]);\n\n  useEffect(() => exitOwnedFullscreen, [exitOwnedFullscreen]);\n\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const animateSlides = !!withSlideTransition && !reduceMotion;\n\n  const handleNext = useCallback(() => {\n    embla?.scrollNext(!animateSlides);\n  }, [embla, animateSlides]);\n\n  const handlePrev = useCallback(() => {\n    embla?.scrollPrev(!animateSlides);\n  }, [embla, animateSlides]);\n\n  useLightboxKeyboard({\n    opened,\n    enabled: withKeyboardEvents!,\n    dir,\n    onClose,\n    onNext: handleNext,\n    onPrev: handlePrev,\n    onToggleFullscreen: withFullscreen ? toggleFullscreen : undefined,\n    onToggleThumbnails: withThumbnails ? toggleThumbnails : undefined,\n    onToggleZoom: withZoom ? zoom.toggleZoom : undefined,\n    onZoomPan: withZoom ? zoom.panZoom : undefined,\n  });\n\n  useEffect(() => {\n    if (!embla) {\n      return undefined;\n    }\n\n    const onSelect = () => {\n      const selected = embla.selectedScrollSnap();\n\n      if (selected !== suppressSelectRef.current) {\n        setCurrentIndexRef.current(selected);\n      }\n    };\n\n    const onReInit = () => {\n      if (embla.selectedScrollSnap() !== currentIndexRef.current) {\n        suppressSelectRef.current = currentIndexRef.current;\n        embla.scrollTo(currentIndexRef.current, true);\n        suppressSelectRef.current = null;\n      }\n    };\n\n    embla.on('select', onSelect);\n    embla.on('reInit', onReInit);\n    return () => {\n      embla.off('select', onSelect);\n      embla.off('reInit', onReInit);\n    };\n  }, [embla]);\n\n  useEffect(() => {\n    if (embla && opened && embla.selectedScrollSnap() !== _currentIndex) {\n      // `_currentIndex` is already what the consumer asked for – do not echo it back\n      suppressSelectRef.current = _currentIndex;\n      embla.scrollTo(_currentIndex, !animateSlides);\n      suppressSelectRef.current = null;\n    }\n  }, [_currentIndex, embla, opened, animateSlides]);\n\n  // Slides can be replaced or shortened while the lightbox is open – without this the\n  // index can point past the end, leaving no active slide and a counter like \"3 / 2\".\n  useEffect(() => {\n    if (slides.length > 0 && _currentIndex > slides.length - 1) {\n      setCurrentIndexRef.current(slides.length - 1);\n    }\n  }, [slides.length, _currentIndex]);\n\n  useFocusReturn({ opened, shouldReturnFocus: returnFocus });\n\n  const shouldLockScroll = useLightboxLockScroll({\n    opened,\n    exitDuration:\n      typeof transitionProps?.exitDuration === 'number'\n        ? transitionProps.exitDuration\n        : typeof transitionProps?.duration === 'number'\n          ? transitionProps.duration\n          : transitionDuration,\n    exitDelay: typeof transitionProps?.exitDelay === 'number' ? transitionProps.exitDelay : 0,\n  });\n\n  const transition: TransitionOverride = {\n    transition: defaultContentTransition,\n    duration: transitionDuration,\n    timingFunction: 'ease',\n    ...transitionProps,\n  };\n\n  const overlayTransition: TransitionOverride = {\n    transition: 'fade',\n    duration: transition.duration,\n    exitDuration: transition.exitDuration,\n    timingFunction: transition.timingFunction,\n    enterDelay: transition.enterDelay,\n    exitDelay: transition.exitDelay,\n    keepMounted: transition.keepMounted,\n  };\n\n  const setIndex = useCallback(\n    (index: number) => {\n      setCurrentIndexRef.current(index);\n      suppressSelectRef.current = index;\n      embla?.scrollTo(index, !animateSlides);\n      suppressSelectRef.current = null;\n    },\n    [embla, animateSlides]\n  );\n\n  const currentSlide = slides[_currentIndex];\n  const currentSlideLabel =\n    currentSlide?.type === 'video'\n      ? currentSlide.label\n      : currentSlide?.type === 'custom'\n        ? undefined\n        : currentSlide?.alt;\n\n  const contextValue = useMemo(\n    () => ({\n      getStyles: stableGetStyles,\n      labels: _labels,\n      opened,\n      slides,\n      currentIndex: _currentIndex,\n      setIndex,\n      next: handleNext,\n      prev: handlePrev,\n      embla: embla ?? null,\n      emblaRef,\n      withZoom: !!withZoom,\n      withThumbnails: !!withThumbnails,\n      withFullscreen: !!withFullscreen,\n      withDownload: !!withDownload,\n      thumbnailsVisible,\n      toggleThumbnails,\n      isFullscreen,\n      toggleFullscreen,\n      zoomState: zoom.zoomState,\n      toggleZoom: zoom.toggleZoom,\n      getImageZoomProps: zoom.getImageProps,\n      onClose,\n      loop: !!loop,\n      closeOnClickOutside: !!closeOnClickOutside,\n      closeOnSwipeDown: !!closeOnSwipeDown,\n      transitionDuration: transitionDuration!,\n    }),\n    [\n      stableGetStyles,\n      _labels,\n      opened,\n      slides,\n      _currentIndex,\n      setIndex,\n      handleNext,\n      handlePrev,\n      embla,\n      emblaRef,\n      withZoom,\n      withThumbnails,\n      withFullscreen,\n      withDownload,\n      thumbnailsVisible,\n      toggleThumbnails,\n      isFullscreen,\n      toggleFullscreen,\n      zoom,\n      onClose,\n      loop,\n      closeOnClickOutside,\n      closeOnSwipeDown,\n      transitionDuration,\n    ]\n  );\n\n  return (\n    <OptionalPortal withinPortal={withinPortal}>\n      <LightboxContextProvider value={contextValue}>\n        <RemoveScroll enabled={shouldLockScroll}>\n          <Box {...getStyles('root')}>\n            <Transition mounted={opened} {...overlayTransition}>\n              {(overlayStyles) => <Box {...getStyles('overlay', { style: overlayStyles })} />}\n            </Transition>\n\n            <Transition mounted={opened} {...transition}>\n              {(contentStyles) => (\n                <FocusTrap active={opened} innerRef={ref}>\n                  <Box\n                    {...getStyles('content', {\n                      className,\n                      style: style ? [style, contentStyles] : contentStyles,\n                    })}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={_labels.lightboxLabel}\n                    tabIndex={-1}\n                    {...others}\n                    mod={mod}\n                    onClick={(event) => {\n                      onClick?.(event);\n                      if (closeOnClickOutside && event.target === event.currentTarget) {\n                        onClose();\n                      }\n                    }}\n                  >\n                    {withInitialFocusPlaceholder && <FocusTrap.InitialFocus />}\n\n                    <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n                      {slides.length > 0\n                        ? `${_labels.slideLabel(_currentIndex + 1, slides.length)}${currentSlideLabel ? `: ${currentSlideLabel}` : ''}`\n                        : null}\n                    </VisuallyHidden>\n                    {children}\n                  </Box>\n                </FocusTrap>\n              )}\n            </Transition>\n          </Box>\n        </RemoveScroll>\n      </LightboxContextProvider>\n    </OptionalPortal>\n  );\n});\n\nLightboxRoot.classes = classes;\nLightboxRoot.varsResolver = varsResolver;\nLightboxRoot.displayName = '@mantine/lightbox/LightboxRoot';\n"],"mappings":"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"}

package/cjs/LightboxSlide/ImageSlide.cjs

@@ -0,0 +1,27 @@
+"use client";
+const require_lightbox_context = require("../lightbox.context.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/lightbox/src/LightboxSlide/ImageSlide.tsx
+function ImageSlide({ slide, active, stylesApiProps }) {
+	const ctx = require_lightbox_context.useLightboxContext();
+	const { style: zoomStyle, ...zoomProps } = active && ctx.withZoom ? ctx.getImageZoomProps() : { style: void 0 };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		...ctx.getStyles("slideImage", {
+			...stylesApiProps,
+			style: zoomStyle
+		}),
+		src: slide.src,
+		alt: slide.alt ?? "",
+		srcSet: slide.srcSet,
+		sizes: slide.sizes,
+		loading: slide.loading ?? (active ? "eager" : "lazy"),
+		draggable: false,
+		"data-reduce-motion": "true",
+		...zoomProps
+	});
+}
+ImageSlide.displayName = "@mantine/lightbox/ImageSlide";
+//#endregion
+exports.ImageSlide = ImageSlide;
+
+//# sourceMappingURL=ImageSlide.cjs.map

package/cjs/LightboxSlide/ImageSlide.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSlide.cjs","names":["useLightboxContext"],"sources":["../../src/LightboxSlide/ImageSlide.tsx"],"sourcesContent":["import { useLightboxContext } from '../lightbox.context';\nimport type { LightboxImageSlide } from '../lightbox.types';\nimport type { LightboxSlideStylesApiProps } from './LightboxSlide';\n\ninterface ImageSlideProps {\n  slide: LightboxImageSlide;\n  active: boolean;\n  stylesApiProps?: LightboxSlideStylesApiProps;\n}\n\nexport function ImageSlide({ slide, active, stylesApiProps }: ImageSlideProps) {\n  const ctx = useLightboxContext();\n  const { style: zoomStyle, ...zoomProps } =\n    active && ctx.withZoom ? ctx.getImageZoomProps() : { style: undefined };\n\n  return (\n    <img\n      {...ctx.getStyles('slideImage', { ...stylesApiProps, style: zoomStyle })}\n      src={slide.src}\n      alt={slide.alt ?? ''}\n      srcSet={slide.srcSet}\n      sizes={slide.sizes}\n      loading={slide.loading ?? (active ? 'eager' : 'lazy')}\n      draggable={false}\n      data-reduce-motion=\"true\"\n      {...zoomProps}\n    />\n  );\n}\n\nImageSlide.displayName = '@mantine/lightbox/ImageSlide';\n"],"mappings":";;;;AAUA,SAAgB,WAAW,EAAE,OAAO,QAAQ,kBAAmC;CAC7E,MAAM,MAAMA,yBAAAA,mBAAmB;CAC/B,MAAM,EAAE,OAAO,WAAW,GAAG,cAC3B,UAAU,IAAI,WAAW,IAAI,kBAAkB,IAAI,EAAE,OAAO,KAAA,EAAU;CAExE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI,IAAI,UAAU,cAAc;GAAE,GAAG;GAAgB,OAAO;EAAU,CAAC;EACvE,KAAK,MAAM;EACX,KAAK,MAAM,OAAO;EAClB,QAAQ,MAAM;EACd,OAAO,MAAM;EACb,SAAS,MAAM,YAAY,SAAS,UAAU;EAC9C,WAAW;EACX,sBAAmB;EACnB,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/cjs/LightboxSlide/LightboxSlide.cjs

@@ -0,0 +1,55 @@
+"use client";
+const require_lightbox_context = require("../lightbox.context.cjs");
+const require_Lightbox_module = require("../Lightbox.module.cjs");
+const require_ImageSlide = require("./ImageSlide.cjs");
+const require_VideoSlide = require("./VideoSlide.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/lightbox/src/LightboxSlide/LightboxSlide.tsx
+const LightboxSlide = (0, _mantine_core.factory)((props) => {
+	const { classNames, className, style, styles, vars, slide, index, onClick, ...others } = (0, _mantine_core.useProps)("LightboxSlide", null, props);
+	const ctx = require_lightbox_context.useLightboxContext();
+	const active = ctx.currentIndex === index;
+	const stylesApiProps = {
+		classNames,
+		styles
+	};
+	const renderContent = () => {
+		if (slide.type === "video") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VideoSlide.VideoSlide, {
+			slide,
+			active,
+			stylesApiProps
+		});
+		if (slide.type === "custom") return slide.render({ active });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageSlide.ImageSlide, {
+			slide,
+			active,
+			stylesApiProps
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+		...ctx.getStyles("slide", {
+			className,
+			style,
+			classNames,
+			styles
+		}),
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-lightbox-slide": true,
+		"aria-label": ctx.labels.slideLabel(index + 1, ctx.slides.length),
+		inert: !active,
+		...others,
+		onClick: (event) => {
+			onClick?.(event);
+			if (ctx.closeOnClickOutside && !event.defaultPrevented && event.target === event.currentTarget) ctx.onClose();
+		},
+		children: renderContent()
+	});
+});
+LightboxSlide.classes = require_Lightbox_module.default;
+LightboxSlide.displayName = "@mantine/lightbox/LightboxSlide";
+//#endregion
+exports.LightboxSlide = LightboxSlide;
+
+//# sourceMappingURL=LightboxSlide.cjs.map

package/cjs/LightboxSlide/LightboxSlide.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxSlide.cjs","names":["factory","useProps","useLightboxContext","VideoSlide","ImageSlide","Box","classes"],"sources":["../../src/LightboxSlide/LightboxSlide.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport type { LightboxSlideData } from '../lightbox.types';\nimport { ImageSlide } from './ImageSlide';\nimport { VideoSlide } from './VideoSlide';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxSlideStylesNames = 'slide' | 'slideImage' | 'slideVideo';\n\nexport interface LightboxSlideStylesApiProps {\n  classNames?: CompoundStylesApiProps<LightboxSlideFactory>['classNames'];\n  styles?: CompoundStylesApiProps<LightboxSlideFactory>['styles'];\n}\n\nexport interface LightboxSlideProps\n  extends BoxProps, CompoundStylesApiProps<LightboxSlideFactory>, ElementProps<'div'> {\n  /** Slide data object */\n  slide: LightboxSlideData;\n\n  /** Index of the slide in the slides array */\n  index: number;\n}\n\nexport type LightboxSlideFactory = Factory<{\n  props: LightboxSlideProps;\n  ref: HTMLDivElement;\n  stylesNames: LightboxSlideStylesNames;\n  compound: true;\n}>;\n\nexport const LightboxSlide = factory<LightboxSlideFactory>((props) => {\n  const { classNames, className, style, styles, vars, slide, index, onClick, ...others } = useProps(\n    'LightboxSlide',\n    null,\n    props\n  );\n\n  const ctx = useLightboxContext();\n  const active = ctx.currentIndex === index;\n\n  const stylesApiProps = { classNames, styles };\n\n  const renderContent = () => {\n    if (slide.type === 'video') {\n      return <VideoSlide slide={slide} active={active} stylesApiProps={stylesApiProps} />;\n    }\n\n    if (slide.type === 'custom') {\n      return slide.render({ active });\n    }\n\n    return <ImageSlide slide={slide} active={active} stylesApiProps={stylesApiProps} />;\n  };\n\n  return (\n    <Box\n      {...ctx.getStyles('slide', { className, style, classNames, styles })}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-lightbox-slide\n      aria-label={ctx.labels.slideLabel(index + 1, ctx.slides.length)}\n      inert={!active}\n      {...others}\n      onClick={(event) => {\n        onClick?.(event);\n        if (\n          ctx.closeOnClickOutside &&\n          !event.defaultPrevented &&\n          event.target === event.currentTarget\n        ) {\n          ctx.onClose();\n        }\n      }}\n    >\n      {renderContent()}\n    </Box>\n  );\n});\n\nLightboxSlide.classes = classes;\nLightboxSlide.displayName = '@mantine/lightbox/LightboxSlide';\n"],"mappings":";;;;;;;;AAsCA,MAAa,iBAAA,GAAgBA,cAAAA,QAAAA,EAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,OAAO,OAAO,SAAS,GAAG,YAAA,GAAWC,cAAAA,SAAAA,CACvF,iBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,SAAS,IAAI,iBAAiB;CAEpC,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,MAAM,sBAAsB;EAC1B,IAAI,MAAM,SAAS,SACjB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GAAmB;GAAe;GAAwB;EAAiB,CAAA;EAGpF,IAAI,MAAM,SAAS,UACjB,OAAO,MAAM,OAAO,EAAE,OAAO,CAAC;EAGhC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GAAmB;GAAe;GAAwB;EAAiB,CAAA;CACpF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACnE,MAAK;EACL,wBAAqB;EACrB,uBAAA;EACA,cAAY,IAAI,OAAO,WAAW,QAAQ,GAAG,IAAI,OAAO,MAAM;EAC9D,OAAO,CAAC;EACR,GAAI;EACJ,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IACE,IAAI,uBACJ,CAAC,MAAM,oBACP,MAAM,WAAW,MAAM,eAEvB,IAAI,QAAQ;EAEhB;EAEC,UAAA,cAAc;CACZ,CAAA;AAET,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}

package/cjs/LightboxSlide/VideoSlide.cjs

@@ -0,0 +1,42 @@
+"use client";
+const require_lightbox_context = require("../lightbox.context.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region packages/@mantine/lightbox/src/LightboxSlide/VideoSlide.tsx
+function VideoSlide({ slide, active, stylesApiProps }) {
+	const ctx = require_lightbox_context.useLightboxContext();
+	const videoRef = (0, react.useRef)(null);
+	const playing = active && ctx.opened;
+	(0, react.useEffect)(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		if (!playing) {
+			video.pause();
+			return;
+		}
+		if (slide.autoPlay) video.play().catch(() => {});
+	}, [playing, slide.autoPlay]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+		ref: videoRef,
+		...ctx.getStyles("slideVideo", stylesApiProps),
+		src: slide.src,
+		poster: slide.poster,
+		"aria-label": slide.label,
+		autoPlay: playing && slide.autoPlay,
+		"data-active": active || void 0,
+		controls: true,
+		playsInline: true,
+		children: slide.tracks?.map((track, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("track", {
+			src: track.src,
+			kind: track.kind ?? "subtitles",
+			srcLang: track.srcLang,
+			label: track.label,
+			default: track.default
+		}, index))
+	});
+}
+VideoSlide.displayName = "@mantine/lightbox/VideoSlide";
+//#endregion
+exports.VideoSlide = VideoSlide;
+
+//# sourceMappingURL=VideoSlide.cjs.map

package/cjs/LightboxSlide/VideoSlide.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoSlide.cjs","names":["useLightboxContext","useRef"],"sources":["../../src/LightboxSlide/VideoSlide.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useLightboxContext } from '../lightbox.context';\nimport type { LightboxVideoSlide } from '../lightbox.types';\nimport type { LightboxSlideStylesApiProps } from './LightboxSlide';\n\ninterface VideoSlideProps {\n  slide: LightboxVideoSlide;\n  active: boolean;\n  stylesApiProps?: LightboxSlideStylesApiProps;\n}\n\nexport function VideoSlide({ slide, active, stylesApiProps }: VideoSlideProps) {\n  const ctx = useLightboxContext();\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  // With `transitionProps.keepMounted` the slides stay mounted while the lightbox is\n  // closed, so playback has to follow `opened` as well – otherwise a hidden autoplay video\n  // starts on its own and keeps playing after the lightbox is dismissed.\n  const playing = active && ctx.opened;\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    if (!playing) {\n      video.pause();\n      return;\n    }\n\n    // All slides are mounted up front, so the `autoPlay` attribute only ever fires for the\n    // slide that happens to be active on mount – playback has to be started explicitly\n    // when an already mounted video becomes the current slide.\n    if (slide.autoPlay) {\n      video.play().catch(() => {});\n    }\n  }, [playing, slide.autoPlay]);\n\n  return (\n    /* eslint-disable jsx-a11y/media-has-caption */\n    <video\n      ref={videoRef}\n      {...ctx.getStyles('slideVideo', stylesApiProps)}\n      src={slide.src}\n      poster={slide.poster}\n      aria-label={slide.label}\n      autoPlay={playing && slide.autoPlay}\n      data-active={active || undefined}\n      controls\n      playsInline\n    >\n      {slide.tracks?.map((track, index) => (\n        <track\n          key={index}\n          src={track.src}\n          kind={track.kind ?? 'subtitles'}\n          srcLang={track.srcLang}\n          label={track.label}\n          default={track.default}\n        />\n      ))}\n    </video>\n    /* eslint-enable jsx-a11y/media-has-caption */\n  );\n}\n\nVideoSlide.displayName = '@mantine/lightbox/VideoSlide';\n"],"mappings":";;;;;AAWA,SAAgB,WAAW,EAAE,OAAO,QAAQ,kBAAmC;CAC7E,MAAM,MAAMA,yBAAAA,mBAAmB;CAC/B,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAK9C,MAAM,UAAU,UAAU,IAAI;CAE9B,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,OACH;EAGF,IAAI,CAAC,SAAS;GACZ,MAAM,MAAM;GACZ;EACF;EAKA,IAAI,MAAM,UACR,MAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;CAE/B,GAAG,CAAC,SAAS,MAAM,QAAQ,CAAC;CAE5B,OAEE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,KAAK;EACL,GAAI,IAAI,UAAU,cAAc,cAAc;EAC9C,KAAK,MAAM;EACX,QAAQ,MAAM;EACd,cAAY,MAAM;EAClB,UAAU,WAAW,MAAM;EAC3B,eAAa,UAAU,KAAA;EACvB,UAAA;EACA,aAAA;EAEC,UAAA,MAAM,QAAQ,KAAK,OAAO,UACzB,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAEE,KAAK,MAAM;GACX,MAAM,MAAM,QAAQ;GACpB,SAAS,MAAM;GACf,OAAO,MAAM;GACb,SAAS,MAAM;EAChB,GANM,KAMN,CACF;CACI,CAAA;AAGX;AAEA,WAAW,cAAc"}