@mantine/lightbox 9.5.2

package/lib/lightbox.store.d.ts

@@ -0,0 +1,66 @@
+import { MantineStore } from '@mantine/store';
+import type { LightboxSlideData } from './lightbox.types';
+export interface LightboxState {
+    /** Controls whether the lightbox is opened */
+    opened: boolean;
+    /** Array of slide data objects */
+    slides: LightboxSlideData[];
+    /** Index of the current slide */
+    currentIndex: number;
+    /** Determines whether `next` and `prev` actions wrap around, synced from the `loop` prop of `Lightbox.Provider` */
+    loop: boolean;
+}
+export type LightboxStore = MantineStore<LightboxState>;
+/** Creates a new lightbox store, use to run multiple independent lightboxes */
+export declare const createLightboxStore: () => MantineStore<LightboxState>;
+/** Subscribes to the given lightbox store and returns its current state */
+export declare const useLightboxStore: (store: LightboxStore) => LightboxState;
+export declare function updateLightboxStateAction(update: (state: LightboxState) => Partial<LightboxState>, store: LightboxStore): void;
+export declare function openLightboxAction(payload: {
+    slides: LightboxSlideData[];
+    startIndex?: number;
+}, store: LightboxStore): void;
+export declare function closeLightboxAction(store: LightboxStore): void;
+export declare function nextLightboxAction(store: LightboxStore): void;
+export declare function prevLightboxAction(store: LightboxStore): void;
+export declare function setLightboxIndexAction(index: number, store: LightboxStore): void;
+export declare const lightboxActions: {
+    open: typeof openLightboxAction;
+    close: typeof closeLightboxAction;
+    next: typeof nextLightboxAction;
+    prev: typeof prevLightboxAction;
+    setIndex: typeof setLightboxIndexAction;
+    updateState: typeof updateLightboxStateAction;
+};
+/** Creates an isolated store and a set of actions bound to it, use to run multiple independent lightboxes */
+export declare function createLightbox(): readonly [MantineStore<LightboxState>, {
+    /** Opens the lightbox with the given slides, optionally at the given index */
+    open: (payload: {
+        slides: LightboxSlideData[];
+        startIndex?: number;
+    }) => void;
+    /** Closes the lightbox */
+    close: () => void;
+    /** Navigates to the next slide */
+    next: () => void;
+    /** Navigates to the previous slide */
+    prev: () => void;
+    /** Sets the current slide index, the value is clamped to the slides range */
+    setIndex: (index: number) => void;
+}];
+/** Default lightbox store (`lightboxStore`) and actions bound to it (`lightbox`), used by `Lightbox.Provider` and static `Lightbox.open/close/next/prev/setIndex` methods */
+export declare const lightboxStore: MantineStore<LightboxState>, lightbox: {
+    /** Opens the lightbox with the given slides, optionally at the given index */
+    open: (payload: {
+        slides: LightboxSlideData[];
+        startIndex?: number;
+    }) => void;
+    /** Closes the lightbox */
+    close: () => void;
+    /** Navigates to the next slide */
+    next: () => void;
+    /** Navigates to the previous slide */
+    prev: () => void;
+    /** Sets the current slide index, the value is clamped to the slides range */
+    setIndex: (index: number) => void;
+};

package/lib/lightbox.types.d.ts

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react';
+export interface LightboxImageSlide {
+    /** Slide type, `'image'` by default */
+    type?: 'image';
+    /** Image URL */
+    src: string;
+    /** Image alt text for accessibility */
+    alt?: string;
+    /** Custom thumbnail URL, if not set `src` is used */
+    thumbSrc?: string;
+    /** Caption displayed below the slide */
+    caption?: ReactNode;
+    /** Image `srcset` attribute for responsive images */
+    srcSet?: string;
+    /** Image `sizes` attribute for responsive images */
+    sizes?: string;
+    /** Image `loading` attribute, `'eager'` for the active slide and `'lazy'` for all other slides by default */
+    loading?: 'eager' | 'lazy';
+}
+export interface LightboxVideoSlideTrack {
+    /** WebVTT track source URL */
+    src: string;
+    /** Track kind, `'subtitles'` by default */
+    kind?: string;
+    /** Track language code, for example `'en'` */
+    srcLang?: string;
+    /** Track label displayed in the video player captions menu */
+    label?: string;
+    /** Whether the track should be enabled by default */
+    default?: boolean;
+}
+export interface LightboxVideoSlide {
+    /** Slide type, must be `'video'` */
+    type: 'video';
+    /** Video source URL */
+    src: string;
+    /** Video accessible label, announced by screen readers */
+    label?: string;
+    /** Custom thumbnail URL */
+    thumbSrc?: string;
+    /** Caption displayed below the slide */
+    caption?: ReactNode;
+    /** Whether the video should auto-play when the slide becomes active */
+    autoPlay?: boolean;
+    /** Video poster image URL */
+    poster?: string;
+    /** Subtitle/caption tracks rendered as `<track>` elements */
+    tracks?: LightboxVideoSlideTrack[];
+}
+export interface LightboxCustomSlide {
+    /** Slide type, must be `'custom'` */
+    type: 'custom';
+    /** Render function for custom slide content, receives `{ active }` prop */
+    render: (props: {
+        active: boolean;
+    }) => ReactNode;
+    /** Render function for custom thumbnail content */
+    renderThumb?: () => ReactNode;
+    /** Custom thumbnail URL, used if `renderThumb` is not set */
+    thumbSrc?: string;
+    /** Caption displayed below the slide */
+    caption?: ReactNode;
+}
+export type LightboxSlideData = LightboxImageSlide | LightboxVideoSlide | LightboxCustomSlide;
+export interface LightboxLabels {
+    /** Accessible label of the lightbox dialog */
+    lightboxLabel: string;
+    /** Accessible label of a slide, called with 1-based slide index and total number of slides */
+    slideLabel: (index: number, total: number) => string;
+    /** Accessible label of the slides carousel region */
+    slidesLabel: string;
+    /** Accessible label of the previous slide button */
+    previousSlideLabel: string;
+    /** Accessible label of the next slide button */
+    nextSlideLabel: string;
+    /** Accessible label of a thumbnail, called with 1-based slide index and total number of slides */
+    thumbnailLabel: (index: number, total: number) => string;
+    /** Label of the fullscreen toolbar button when the document is not in fullscreen mode */
+    enterFullscreenLabel: string;
+    /** Label of the fullscreen toolbar button when the document is in fullscreen mode */
+    exitFullscreenLabel: string;
+    /** Label of the thumbnails toolbar button when the thumbnails strip is hidden */
+    showThumbnailsLabel: string;
+    /** Label of the thumbnails toolbar button when the thumbnails strip is visible */
+    hideThumbnailsLabel: string;
+    /** Label of the download toolbar button */
+    downloadLabel: string;
+    /** Label of the close toolbar button */
+    closeLabel: string;
+}
+export interface ToolbarItem {
+    /** Unique key for the toolbar item */
+    key: string;
+    /** Icon element displayed in the button */
+    icon: ReactNode;
+    /** Accessible label for the button */
+    label: string;
+    /** Called when the button is clicked */
+    onClick: () => void;
+    /** Position in the toolbar, `'right'` by default */
+    position?: 'left' | 'right';
+}
+export interface ToolbarItemsPayload {
+    /** Array of slide data objects */
+    slides: LightboxSlideData[];
+    /** Index of the currently displayed slide */
+    currentIndex: number;
+    /** Sets the current slide index */
+    setIndex: (index: number) => void;
+    /** Navigates to the next slide */
+    next: () => void;
+    /** Navigates to the previous slide */
+    prev: () => void;
+    /** Closes the lightbox */
+    close: () => void;
+    /** Determines whether the thumbnails strip is currently visible */
+    thumbnailsVisible: boolean;
+    /** Toggles thumbnails strip visibility */
+    toggleThumbnails: () => void;
+    /** Determines whether the document is currently displayed in fullscreen mode */
+    isFullscreen: boolean;
+    /** Toggles fullscreen mode */
+    toggleFullscreen: () => void;
+    /** Determines whether the current image is zoomed in */
+    zoomed: boolean;
+    /** Toggles zoom of the current image */
+    toggleZoom: () => void;
+    /** Labels of the lightbox, `labels` prop merged with the default labels */
+    labels: LightboxLabels;
+}
+export type ToolbarItems = ToolbarItem[] | ((payload: ToolbarItemsPayload) => ToolbarItem[]);

package/lib/test-utils.d.ts

@@ -0,0 +1,7 @@
+import type { LightboxSlideData } from './lightbox.types';
+import { LightboxRootProps } from './LightboxRoot/LightboxRoot';
+export declare const testSlides: LightboxSlideData[];
+export declare const defaultRootProps: LightboxRootProps;
+export declare function LightboxWrapper({ children, ...props }: Partial<LightboxRootProps> & {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@mantine/lightbox",
+  "version": "9.5.2",
+  "description": "Full-screen media lightbox with carousel navigation",
+  "homepage": "https://mantine.dev/",
+  "license": "MIT",
+  "author": "Vitaly Rtishchev <rtivital@gmail.com>",
+  "keywords": [
+    "carousel",
+    "components",
+    "frontend",
+    "gallery",
+    "library",
+    "lightbox",
+    "react",
+    "ui",
+    "ui-kit",
+    "viewer"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
+  },
+  "repository": {
+    "url": "https://github.com/mantinedev/mantine.git",
+    "type": "git",
+    "directory": "packages/@mantine/lightbox"
+  },
+  "peerDependencies": {
+    "@mantine/core": "9.5.2",
+    "@mantine/hooks": "9.5.2",
+    "embla-carousel": ">=8.0.0",
+    "embla-carousel-react": ">=8.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@mantine/store": "9.5.2"
+  },
+  "devDependencies": {
+    "@mantine-tests/core": "workspace:*",
+    "@mantine/core": "workspace:*",
+    "@mantine/hooks": "workspace:*",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  }
+}

package/styles.css

@@ -0,0 +1,262 @@
+.m_4f1afa9a {
+  --lightbox-transition-duration: 200ms;
+  --lightbox-overlay-color: rgba(0, 0, 0, 0.9);
+  --lightbox-z-index: 400;
+  --lightbox-toolbar-height: calc(3.5rem * var(--mantine-scale));
+  --lightbox-thumbnails-height: calc(6.25rem * var(--mantine-scale));
+
+  display: contents;
+}
+
+.m_143cf98 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lightbox-z-index);
+  background-color: var(--lightbox-overlay-color);
+}
+
+.m_7b06bfc1 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lightbox-z-index);
+  display: flex;
+  flex-direction: column;
+  color: var(--mantine-color-white);
+  outline: none;
+}
+
+.m_fe5b16c3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--lightbox-toolbar-height);
+  padding: 0 var(--mantine-spacing-md);
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.m_9e01b17c {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+}
+
+.m_19d8cbd5 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(2.5rem * var(--mantine-scale));
+  height: calc(2.5rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  transition:
+    opacity var(--lightbox-transition-duration) ease,
+    background-color var(--lightbox-transition-duration) ease;
+}
+
+@media (hover: hover) {
+
+  .m_19d8cbd5:hover {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+@media (hover: none) {
+
+  .m_19d8cbd5:active {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.m_7b66e144 {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  user-select: none;
+}
+
+.m_f5ce649a {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.m_7f838760 {
+  height: 100%;
+  overflow: hidden;
+}
+
+.m_b5439507 {
+  display: flex;
+  height: 100%;
+}
+
+.m_9450faf9 {
+  position: relative;
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-md);
+  min-width: 0;
+}
+
+.m_e659b1e2 {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform var(--lightbox-transition-duration) ease;
+}
+
+.m_e659b1e2[data-zoom-enabled] {
+    touch-action: none;
+  }
+
+.m_e659b1e2[data-zoomed] {
+    cursor: grab;
+  }
+
+.m_e659b1e2[data-zoomed]:active {
+      cursor: grabbing;
+    }
+
+.m_e659b1e2[data-dragging] {
+    transition: none;
+  }
+
+.m_e659b1e2[data-zoom-enabled]:not([data-zoomed]) {
+    cursor: zoom-in;
+  }
+
+.m_e70f1d02 {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.m_411d1cbf {
+  display: block;
+  padding: 0 var(--mantine-spacing-md);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.m_3a7e4a85 {
+  width: fit-content;
+  max-width: 100%;
+  margin-inline: auto;
+  height: var(--lightbox-thumbnails-height);
+  overflow: hidden;
+}
+
+.m_59a13682 {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+  height: 100%;
+  align-items: center;
+}
+
+.m_3be82a34 {
+  flex: 0 0 auto;
+  width: calc(4rem * var(--mantine-scale));
+  height: calc(4rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  overflow: hidden;
+  opacity: 0.5;
+  border: calc(0.125rem * var(--mantine-scale)) solid transparent;
+  cursor: pointer;
+  transition:
+    opacity var(--lightbox-transition-duration) ease,
+    border-color var(--lightbox-transition-duration) ease;
+  padding: 0;
+  background: none;
+}
+
+@media (hover: hover) {
+
+  .m_3be82a34:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_3be82a34:active {
+    opacity: 0.8;
+  }
+}
+
+.m_3be82a34[data-active] {
+    opacity: 1;
+    border-color: var(--mantine-primary-color-filled);
+  }
+
+.m_fd95cf87 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.m_15a759cc {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--mantine-spacing-md);
+  pointer-events: none;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.m_a5bee41e {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(3rem * var(--mantine-scale));
+  height: calc(3rem * var(--mantine-scale));
+  color: var(--mantine-color-white);
+  pointer-events: all;
+  opacity: 0.7;
+  transition: opacity var(--lightbox-transition-duration) ease;
+}
+
+@media (hover: hover) {
+
+  .m_a5bee41e:hover {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  .m_a5bee41e:active {
+    opacity: 1;
+  }
+}
+
+.m_a5bee41e[data-inactive] {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+.m_633f252e {
+  text-align: center;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.m_1ae53e92 {
+  color: var(--mantine-color-white);
+}