@mantine/lightbox 9.5.2

package/lib/Lightbox.d.ts

@@ -0,0 +1,63 @@
+import { Factory } from '@mantine/core';
+import { lightbox } from './lightbox.store';
+import type { ToolbarItems } from './lightbox.types';
+import { LightboxCaption } from './LightboxCaption/LightboxCaption';
+import { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';
+import { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';
+import { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';
+import { LightboxRoot, LightboxRootProps, LightboxRootStylesNames } from './LightboxRoot/LightboxRoot';
+import { LightboxSlide } from './LightboxSlide/LightboxSlide';
+import { LightboxSlides } from './LightboxSlides/LightboxSlides';
+import { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';
+import { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';
+export type LightboxStylesNames = LightboxRootStylesNames;
+export interface LightboxProps extends Omit<LightboxRootProps, 'children'> {
+    /** Custom toolbar items, overrides default toolbar. Can be a function that receives the current lightbox state and handlers. */
+    toolbarItems?: ToolbarItems;
+    /** Shows previous/next navigation arrows @default true */
+    withNavigation?: boolean;
+    /** Custom lightbox layout, overrides the default layout built from compound components */
+    children?: React.ReactNode;
+}
+export type LightboxFactory = Factory<{
+    props: LightboxProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxStylesNames;
+    staticComponents: {
+        Root: typeof LightboxRoot;
+        Toolbar: typeof LightboxToolbar;
+        Slides: typeof LightboxSlides;
+        Slide: typeof LightboxSlide;
+        Thumbnails: typeof LightboxThumbnails;
+        Navigation: typeof LightboxNavigation;
+        Caption: typeof LightboxCaption;
+        CloseButton: typeof LightboxCloseButton;
+        Provider: typeof LightboxProviderComponent;
+        open: typeof lightbox.open;
+        close: typeof lightbox.close;
+        next: typeof lightbox.next;
+        prev: typeof lightbox.prev;
+        setIndex: typeof lightbox.setIndex;
+    };
+}>;
+export declare const Lightbox: import("@mantine/core").MantineComponent<{
+    props: LightboxProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxStylesNames;
+    staticComponents: {
+        Root: typeof LightboxRoot;
+        Toolbar: typeof LightboxToolbar;
+        Slides: typeof LightboxSlides;
+        Slide: typeof LightboxSlide;
+        Thumbnails: typeof LightboxThumbnails;
+        Navigation: typeof LightboxNavigation;
+        Caption: typeof LightboxCaption;
+        CloseButton: typeof LightboxCloseButton;
+        Provider: typeof LightboxProviderComponent;
+        open: typeof lightbox.open;
+        close: typeof lightbox.close;
+        next: typeof lightbox.next;
+        prev: typeof lightbox.prev;
+        setIndex: typeof lightbox.setIndex;
+    };
+}>;

package/lib/LightboxCaption/LightboxCaption.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+export type LightboxCaptionStylesNames = 'caption';
+export interface LightboxCaptionProps extends BoxProps, CompoundStylesApiProps<LightboxCaptionFactory>, ElementProps<'div'> {
+    /** Custom caption content, overrides slide caption */
+    children?: React.ReactNode;
+}
+export type LightboxCaptionFactory = Factory<{
+    props: LightboxCaptionProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxCaptionStylesNames;
+    compound: true;
+}>;
+export declare const LightboxCaption: import("@mantine/core").MantineComponent<{
+    props: LightboxCaptionProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxCaptionStylesNames;
+    compound: true;
+}>;

package/lib/LightboxCloseButton/LightboxCloseButton.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+export type LightboxCloseButtonStylesNames = 'closeButton';
+export interface LightboxCloseButtonProps extends BoxProps, CompoundStylesApiProps<LightboxCloseButtonFactory>, ElementProps<'button'> {
+}
+export type LightboxCloseButtonFactory = Factory<{
+    props: LightboxCloseButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: LightboxCloseButtonStylesNames;
+    compound: true;
+}>;
+export declare const LightboxCloseButton: import("@mantine/core").MantineComponent<{
+    props: LightboxCloseButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: LightboxCloseButtonStylesNames;
+    compound: true;
+}>;

package/lib/LightboxNavigation/LightboxNavigation.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+export type LightboxNavigationStylesNames = 'navigation' | 'navigationButton';
+export interface LightboxNavigationProps extends BoxProps, CompoundStylesApiProps<LightboxNavigationFactory>, ElementProps<'div'> {
+}
+export type LightboxNavigationFactory = Factory<{
+    props: LightboxNavigationProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxNavigationStylesNames;
+    compound: true;
+}>;
+export declare const LightboxNavigation: import("@mantine/core").MantineComponent<{
+    props: LightboxNavigationProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxNavigationStylesNames;
+    compound: true;
+}>;

package/lib/LightboxProvider/LightboxProvider.d.ts

@@ -0,0 +1,19 @@
+import { Factory } from '@mantine/core';
+import { LightboxProps } from '../Lightbox';
+import { LightboxStore } from '../lightbox.store';
+export interface LightboxProviderProps extends Omit<LightboxProps, 'opened' | 'onClose' | 'slides' | 'currentIndex' | 'onIndexChange'> {
+    /** Lightbox store, can be used to create multiple instances @default lightboxStore */
+    store?: LightboxStore;
+}
+export type LightboxProviderFactory = Factory<{
+    props: LightboxProviderProps;
+    ref: HTMLDivElement;
+    stylesNames: never;
+    compound: true;
+}>;
+export declare const LightboxProviderComponent: import("@mantine/core").MantineComponent<{
+    props: LightboxProviderProps;
+    ref: HTMLDivElement;
+    stylesNames: never;
+    compound: true;
+}>;

package/lib/LightboxRoot/LightboxRoot.d.ts

@@ -0,0 +1,88 @@
+import type { EmblaOptionsType } from 'embla-carousel';
+import { BoxProps, ElementProps, Factory, StylesApiProps, TransitionOverride } from '@mantine/core';
+import type { LightboxLabels, LightboxSlideData } from '../lightbox.types';
+export type LightboxRootStylesNames = 'root' | 'overlay' | 'content' | 'toolbar' | 'toolbarGroup' | 'toolbarButton' | 'counter' | 'slides' | 'slidesViewport' | 'slidesContainer' | 'slide' | 'slideImage' | 'slideVideo' | 'thumbnails' | 'thumbnailsViewport' | 'thumbnailsContainer' | 'thumbnail' | 'thumbnailImage' | 'navigation' | 'navigationButton' | 'caption' | 'closeButton';
+export type LightboxCssVariables = {
+    root: '--lightbox-transition-duration' | '--lightbox-overlay-color' | '--lightbox-z-index' | '--lightbox-toolbar-height' | '--lightbox-thumbnails-height';
+};
+export interface LightboxRootProps extends BoxProps, StylesApiProps<LightboxRootFactory>, ElementProps<'div', 'children'> {
+    /** Controls whether the lightbox is opened */
+    opened: boolean;
+    /** Called when the lightbox is closed */
+    onClose: () => void;
+    /** Lightbox content (compound components) */
+    children: React.ReactNode;
+    /** Array of slide data objects */
+    slides: LightboxSlideData[];
+    /** Controlled current slide index */
+    currentIndex?: number;
+    /** Called when the current slide index changes */
+    onIndexChange?: (index: number) => void;
+    /** Labels used in the component, used for accessibility and localization */
+    labels?: Partial<LightboxLabels>;
+    /** Enables image zoom on click/pinch @default false */
+    withZoom?: boolean;
+    /** Shows bottom thumbnail strip @default false */
+    withThumbnails?: boolean;
+    /** Adds fullscreen toggle to toolbar @default false */
+    withFullscreen?: boolean;
+    /** Adds download button to toolbar @default false */
+    withDownload?: boolean;
+    /** Enables infinite loop navigation @default false */
+    loop?: boolean;
+    /** Closes lightbox when the empty space around the slide content is clicked @default false */
+    closeOnClickOutside?: boolean;
+    /** Closes lightbox when swiping down on mobile @default true */
+    closeOnSwipeDown?: boolean;
+    /** Determines whether keyboard shortcuts (arrows, `F`/`T`/`Z`) are active, `Escape` always closes the lightbox @default true */
+    withKeyboardEvents?: boolean;
+    /** Determines whether focus should be returned to the last active element when the lightbox is closed @default true */
+    returnFocus?: boolean;
+    /** 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 */
+    withInitialFocusPlaceholder?: boolean;
+    /** Determines whether the lightbox should be rendered inside `Portal` @default true */
+    withinPortal?: boolean;
+    /** `z-index` of the overlay and content elements, `400` by default */
+    zIndex?: string | number;
+    /** Transition duration in milliseconds @default 200 */
+    transitionDuration?: number;
+    /** 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. */
+    transitionProps?: TransitionOverride;
+    /** Additional Embla carousel options. `loop` and `startIndex` are controlled by the
+     * `loop` and `currentIndex` props and cannot be set here, at the top level or in
+     * `breakpoints`; a `watchDrag` option is still honored at both levels, but dragging is
+     * always disabled while the image is zoomed. */
+    emblaOptions?: EmblaOptionsType;
+    /** Maximum zoom scale @default 3 */
+    zoomMaxScale?: number;
+    /** Enables animated slide transitions for programmatic navigation @default false */
+    withSlideTransition?: boolean;
+}
+export type LightboxRootFactory = Factory<{
+    props: LightboxRootProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxRootStylesNames;
+    vars: LightboxCssVariables;
+}>;
+export declare 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: number;
+    zoomMaxScale: number;
+    withSlideTransition: false;
+};
+export declare const LightboxRoot: import("@mantine/core").MantineComponent<{
+    props: LightboxRootProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxRootStylesNames;
+    vars: LightboxCssVariables;
+}>;

package/lib/LightboxSlide/ImageSlide.d.ts

@@ -0,0 +1,12 @@
+import type { LightboxImageSlide } from '../lightbox.types';
+import type { LightboxSlideStylesApiProps } from './LightboxSlide';
+interface ImageSlideProps {
+    slide: LightboxImageSlide;
+    active: boolean;
+    stylesApiProps?: LightboxSlideStylesApiProps;
+}
+export declare function ImageSlide({ slide, active, stylesApiProps }: ImageSlideProps): import("react").JSX.Element;
+export declare namespace ImageSlide {
+    var displayName: string;
+}
+export {};

package/lib/LightboxSlide/LightboxSlide.d.ts

@@ -0,0 +1,25 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+import type { LightboxSlideData } from '../lightbox.types';
+export type LightboxSlideStylesNames = 'slide' | 'slideImage' | 'slideVideo';
+export interface LightboxSlideStylesApiProps {
+    classNames?: CompoundStylesApiProps<LightboxSlideFactory>['classNames'];
+    styles?: CompoundStylesApiProps<LightboxSlideFactory>['styles'];
+}
+export interface LightboxSlideProps extends BoxProps, CompoundStylesApiProps<LightboxSlideFactory>, ElementProps<'div'> {
+    /** Slide data object */
+    slide: LightboxSlideData;
+    /** Index of the slide in the slides array */
+    index: number;
+}
+export type LightboxSlideFactory = Factory<{
+    props: LightboxSlideProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxSlideStylesNames;
+    compound: true;
+}>;
+export declare const LightboxSlide: import("@mantine/core").MantineComponent<{
+    props: LightboxSlideProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxSlideStylesNames;
+    compound: true;
+}>;

package/lib/LightboxSlide/VideoSlide.d.ts

@@ -0,0 +1,12 @@
+import type { LightboxVideoSlide } from '../lightbox.types';
+import type { LightboxSlideStylesApiProps } from './LightboxSlide';
+interface VideoSlideProps {
+    slide: LightboxVideoSlide;
+    active: boolean;
+    stylesApiProps?: LightboxSlideStylesApiProps;
+}
+export declare function VideoSlide({ slide, active, stylesApiProps }: VideoSlideProps): import("react").JSX.Element;
+export declare namespace VideoSlide {
+    var displayName: string;
+}
+export {};

package/lib/LightboxSlides/LightboxSlides.d.ts

@@ -0,0 +1,20 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+export type LightboxSlidesStylesNames = 'slides' | 'slidesViewport' | 'slidesContainer';
+export interface LightboxSlidesProps extends BoxProps, CompoundStylesApiProps<LightboxSlidesFactory>, ElementProps<'div'> {
+    /** Embla carousel ref callback */
+    emblaRef?: React.RefCallback<HTMLDivElement>;
+    /** Slide components */
+    children: React.ReactNode;
+}
+export type LightboxSlidesFactory = Factory<{
+    props: LightboxSlidesProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxSlidesStylesNames;
+    compound: true;
+}>;
+export declare const LightboxSlides: import("@mantine/core").MantineComponent<{
+    props: LightboxSlidesProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxSlidesStylesNames;
+    compound: true;
+}>;

package/lib/LightboxThumbnails/LightboxThumbnails.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+export type LightboxThumbnailsStylesNames = 'thumbnails' | 'thumbnailsViewport' | 'thumbnailsContainer' | 'thumbnail' | 'thumbnailImage';
+export interface LightboxThumbnailsProps extends BoxProps, CompoundStylesApiProps<LightboxThumbnailsFactory>, ElementProps<'div', 'onTransitionEnd' | 'onTransitionStart'> {
+}
+export type LightboxThumbnailsFactory = Factory<{
+    props: LightboxThumbnailsProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxThumbnailsStylesNames;
+    compound: true;
+}>;
+export declare const LightboxThumbnails: import("@mantine/core").MantineComponent<{
+    props: LightboxThumbnailsProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxThumbnailsStylesNames;
+    compound: true;
+}>;

package/lib/LightboxToolbar/LightboxToolbar.d.ts

@@ -0,0 +1,19 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '@mantine/core';
+import type { ToolbarItems } from '../lightbox.types';
+export type LightboxToolbarStylesNames = 'toolbar' | 'toolbarGroup' | 'toolbarButton' | 'counter';
+export interface LightboxToolbarProps extends BoxProps, CompoundStylesApiProps<LightboxToolbarFactory>, ElementProps<'div'> {
+    /** Custom toolbar items, overrides default toolbar actions. Can be a function that receives the current lightbox state and handlers. */
+    toolbarItems?: ToolbarItems;
+}
+export type LightboxToolbarFactory = Factory<{
+    props: LightboxToolbarProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxToolbarStylesNames;
+    compound: true;
+}>;
+export declare const LightboxToolbar: import("@mantine/core").MantineComponent<{
+    props: LightboxToolbarProps;
+    ref: HTMLDivElement;
+    stylesNames: LightboxToolbarStylesNames;
+    compound: true;
+}>;

package/lib/LightboxToolbar/toolbar-items.d.ts

@@ -0,0 +1,5 @@
+import type { LightboxLabels, ToolbarItem } from '../lightbox.types';
+export declare function createFullscreenToolbarItem(toggle: () => void, isFullscreen: boolean, labels?: LightboxLabels): ToolbarItem;
+export declare function createThumbnailsToolbarItem(toggle: () => void, visible: boolean, labels?: LightboxLabels): ToolbarItem;
+export declare function createDownloadToolbarItem(src: string, labels?: LightboxLabels): ToolbarItem;
+export declare function createCloseToolbarItem(onClose: () => void, labels?: LightboxLabels): ToolbarItem;

package/lib/default-labels.d.ts

@@ -0,0 +1,2 @@
+import type { LightboxLabels } from './lightbox.types';
+export declare const DEFAULT_LABELS: LightboxLabels;

package/lib/hooks/use-lightbox-keyboard.d.ts

@@ -0,0 +1,15 @@
+interface UseLightboxKeyboardInput {
+    opened: boolean;
+    enabled: boolean;
+    /** Text direction of the lightbox, arrow keys follow it the same way the navigation buttons do */
+    dir: 'ltr' | 'rtl';
+    onClose: () => void;
+    onNext: () => void;
+    onPrev: () => void;
+    onToggleFullscreen?: () => void;
+    onToggleThumbnails?: () => void;
+    onToggleZoom?: () => void;
+    onZoomPan?: (deltaX: number, deltaY: number) => boolean;
+}
+export declare function useLightboxKeyboard({ opened, enabled, dir, onClose, onNext, onPrev, onToggleFullscreen, onToggleThumbnails, onToggleZoom, onZoomPan, }: UseLightboxKeyboardInput): void;
+export {};

package/lib/hooks/use-lightbox-lock-scroll.d.ts

@@ -0,0 +1,7 @@
+interface UseLightboxLockScrollInput {
+    opened: boolean;
+    exitDuration: number;
+    exitDelay: number;
+}
+export declare function useLightboxLockScroll({ opened, exitDuration, exitDelay, }: UseLightboxLockScrollInput): boolean;
+export {};

package/lib/hooks/use-lightbox-swipe-close.d.ts

@@ -0,0 +1,10 @@
+interface UseLightboxSwipeCloseInput {
+    enabled: boolean;
+    onClose: () => void;
+    isZoomed: boolean;
+}
+export declare function useLightboxSwipeClose({ enabled, onClose, isZoomed }: UseLightboxSwipeCloseInput): {
+    handleTouchStart: (event: React.TouchEvent) => void;
+    handleTouchEnd: (event: React.TouchEvent) => void;
+};
+export {};

package/lib/hooks/use-lightbox-zoom.d.ts

@@ -0,0 +1,33 @@
+interface UseLightboxZoomInput {
+    enabled: boolean;
+    maxScale: number;
+    currentIndex: number;
+}
+export declare function useLightboxZoom({ enabled, maxScale, currentIndex }: UseLightboxZoomInput): {
+    zoomState: {
+        scale: number;
+        isZoomed: boolean;
+    };
+    toggleZoom: () => void;
+    resetZoom: () => void;
+    panZoom: (deltaX: number, deltaY: number) => boolean;
+    getImageProps: () => {
+        ref: (node: HTMLImageElement | null) => void;
+        style: {
+            transform: string;
+        };
+        'data-zoom-enabled': true | undefined;
+        'data-zoomed': true | undefined;
+        'data-dragging': true | undefined;
+        onPointerDown: (event: React.PointerEvent) => void;
+        onPointerMove: (event: React.PointerEvent) => void;
+        onPointerUp: () => void;
+        onPointerCancel: () => void;
+        onLostPointerCapture: () => void;
+        onClick: (event: React.MouseEvent) => void;
+        onDoubleClick: () => void;
+        onTouchMove: (event: React.TouchEvent) => void;
+        onTouchEnd: () => void;
+    };
+};
+export {};

package/lib/index.d.mts

@@ -0,0 +1,67 @@
+import type { LightboxFactory, LightboxProps, LightboxStylesNames } from './Lightbox';
+import type { LightboxCaptionProps, LightboxCaptionStylesNames } from './LightboxCaption/LightboxCaption';
+import type { LightboxCloseButtonProps, LightboxCloseButtonStylesNames } from './LightboxCloseButton/LightboxCloseButton';
+import type { LightboxNavigationProps, LightboxNavigationStylesNames } from './LightboxNavigation/LightboxNavigation';
+import type { LightboxProviderProps } from './LightboxProvider/LightboxProvider';
+import type { LightboxCssVariables, LightboxRootProps, LightboxRootStylesNames } from './LightboxRoot/LightboxRoot';
+import type { LightboxSlideProps, LightboxSlideStylesNames } from './LightboxSlide/LightboxSlide';
+import type { LightboxSlidesProps, LightboxSlidesStylesNames } from './LightboxSlides/LightboxSlides';
+import type { LightboxThumbnailsProps, LightboxThumbnailsStylesNames } from './LightboxThumbnails/LightboxThumbnails';
+import type { LightboxToolbarProps, LightboxToolbarStylesNames } from './LightboxToolbar/LightboxToolbar';
+export { lightbox, createLightbox, createLightboxStore, useLightboxStore, lightboxStore, } from './lightbox.store.js';
+export type { LightboxState, LightboxStore } from './lightbox.store.js';
+export type { LightboxSlideData, LightboxImageSlide, LightboxVideoSlide, LightboxVideoSlideTrack, LightboxCustomSlide, LightboxLabels, ToolbarItem, ToolbarItems, ToolbarItemsPayload, } from './lightbox.types.js';
+export { DEFAULT_LABELS } from './default-labels.js';
+export { Lightbox } from './Lightbox.js';
+export { LightboxRoot } from './LightboxRoot/LightboxRoot.js';
+export { LightboxToolbar } from './LightboxToolbar/LightboxToolbar.js';
+export { LightboxSlides } from './LightboxSlides/LightboxSlides.js';
+export { LightboxSlide } from './LightboxSlide/LightboxSlide.js';
+export { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails.js';
+export { LightboxNavigation } from './LightboxNavigation/LightboxNavigation.js';
+export { LightboxCaption } from './LightboxCaption/LightboxCaption.js';
+export { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton.js';
+export { LightboxProviderComponent } from './LightboxProvider/LightboxProvider.js';
+export { createFullscreenToolbarItem, createThumbnailsToolbarItem, createDownloadToolbarItem, createCloseToolbarItem, } from './LightboxToolbar/toolbar-items.js';
+export type { LightboxProps, LightboxStylesNames, LightboxFactory, LightboxCssVariables, LightboxRootProps, LightboxRootStylesNames, LightboxToolbarProps, LightboxToolbarStylesNames, LightboxSlidesProps, LightboxSlidesStylesNames, LightboxSlideProps, LightboxSlideStylesNames, LightboxThumbnailsProps, LightboxThumbnailsStylesNames, LightboxNavigationProps, LightboxNavigationStylesNames, LightboxCaptionProps, LightboxCaptionStylesNames, LightboxCloseButtonProps, LightboxCloseButtonStylesNames, LightboxProviderProps, };
+export declare namespace Lightbox {
+    type Props = LightboxProps;
+    type StylesNames = LightboxStylesNames;
+    type Factory = LightboxFactory;
+    type CssVariables = LightboxCssVariables;
+    namespace Root {
+        type Props = LightboxRootProps;
+        type StylesNames = LightboxRootStylesNames;
+    }
+    namespace Toolbar {
+        type Props = LightboxToolbarProps;
+        type StylesNames = LightboxToolbarStylesNames;
+    }
+    namespace Slides {
+        type Props = LightboxSlidesProps;
+        type StylesNames = LightboxSlidesStylesNames;
+    }
+    namespace Slide {
+        type Props = LightboxSlideProps;
+        type StylesNames = LightboxSlideStylesNames;
+    }
+    namespace Thumbnails {
+        type Props = LightboxThumbnailsProps;
+        type StylesNames = LightboxThumbnailsStylesNames;
+    }
+    namespace Navigation {
+        type Props = LightboxNavigationProps;
+        type StylesNames = LightboxNavigationStylesNames;
+    }
+    namespace Caption {
+        type Props = LightboxCaptionProps;
+        type StylesNames = LightboxCaptionStylesNames;
+    }
+    namespace CloseButton {
+        type Props = LightboxCloseButtonProps;
+        type StylesNames = LightboxCloseButtonStylesNames;
+    }
+    namespace Provider {
+        type Props = LightboxProviderProps;
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,67 @@
+import type { LightboxFactory, LightboxProps, LightboxStylesNames } from './Lightbox';
+import type { LightboxCaptionProps, LightboxCaptionStylesNames } from './LightboxCaption/LightboxCaption';
+import type { LightboxCloseButtonProps, LightboxCloseButtonStylesNames } from './LightboxCloseButton/LightboxCloseButton';
+import type { LightboxNavigationProps, LightboxNavigationStylesNames } from './LightboxNavigation/LightboxNavigation';
+import type { LightboxProviderProps } from './LightboxProvider/LightboxProvider';
+import type { LightboxCssVariables, LightboxRootProps, LightboxRootStylesNames } from './LightboxRoot/LightboxRoot';
+import type { LightboxSlideProps, LightboxSlideStylesNames } from './LightboxSlide/LightboxSlide';
+import type { LightboxSlidesProps, LightboxSlidesStylesNames } from './LightboxSlides/LightboxSlides';
+import type { LightboxThumbnailsProps, LightboxThumbnailsStylesNames } from './LightboxThumbnails/LightboxThumbnails';
+import type { LightboxToolbarProps, LightboxToolbarStylesNames } from './LightboxToolbar/LightboxToolbar';
+export { lightbox, createLightbox, createLightboxStore, useLightboxStore, lightboxStore, } from './lightbox.store.js';
+export type { LightboxState, LightboxStore } from './lightbox.store.js';
+export type { LightboxSlideData, LightboxImageSlide, LightboxVideoSlide, LightboxVideoSlideTrack, LightboxCustomSlide, LightboxLabels, ToolbarItem, ToolbarItems, ToolbarItemsPayload, } from './lightbox.types.js';
+export { DEFAULT_LABELS } from './default-labels.js';
+export { Lightbox } from './Lightbox.js';
+export { LightboxRoot } from './LightboxRoot/LightboxRoot.js';
+export { LightboxToolbar } from './LightboxToolbar/LightboxToolbar.js';
+export { LightboxSlides } from './LightboxSlides/LightboxSlides.js';
+export { LightboxSlide } from './LightboxSlide/LightboxSlide.js';
+export { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails.js';
+export { LightboxNavigation } from './LightboxNavigation/LightboxNavigation.js';
+export { LightboxCaption } from './LightboxCaption/LightboxCaption.js';
+export { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton.js';
+export { LightboxProviderComponent } from './LightboxProvider/LightboxProvider.js';
+export { createFullscreenToolbarItem, createThumbnailsToolbarItem, createDownloadToolbarItem, createCloseToolbarItem, } from './LightboxToolbar/toolbar-items.js';
+export type { LightboxProps, LightboxStylesNames, LightboxFactory, LightboxCssVariables, LightboxRootProps, LightboxRootStylesNames, LightboxToolbarProps, LightboxToolbarStylesNames, LightboxSlidesProps, LightboxSlidesStylesNames, LightboxSlideProps, LightboxSlideStylesNames, LightboxThumbnailsProps, LightboxThumbnailsStylesNames, LightboxNavigationProps, LightboxNavigationStylesNames, LightboxCaptionProps, LightboxCaptionStylesNames, LightboxCloseButtonProps, LightboxCloseButtonStylesNames, LightboxProviderProps, };
+export declare namespace Lightbox {
+    type Props = LightboxProps;
+    type StylesNames = LightboxStylesNames;
+    type Factory = LightboxFactory;
+    type CssVariables = LightboxCssVariables;
+    namespace Root {
+        type Props = LightboxRootProps;
+        type StylesNames = LightboxRootStylesNames;
+    }
+    namespace Toolbar {
+        type Props = LightboxToolbarProps;
+        type StylesNames = LightboxToolbarStylesNames;
+    }
+    namespace Slides {
+        type Props = LightboxSlidesProps;
+        type StylesNames = LightboxSlidesStylesNames;
+    }
+    namespace Slide {
+        type Props = LightboxSlideProps;
+        type StylesNames = LightboxSlideStylesNames;
+    }
+    namespace Thumbnails {
+        type Props = LightboxThumbnailsProps;
+        type StylesNames = LightboxThumbnailsStylesNames;
+    }
+    namespace Navigation {
+        type Props = LightboxNavigationProps;
+        type StylesNames = LightboxNavigationStylesNames;
+    }
+    namespace Caption {
+        type Props = LightboxCaptionProps;
+        type StylesNames = LightboxCaptionStylesNames;
+    }
+    namespace CloseButton {
+        type Props = LightboxCloseButtonProps;
+        type StylesNames = LightboxCloseButtonStylesNames;
+    }
+    namespace Provider {
+        type Props = LightboxProviderProps;
+    }
+}

package/lib/lightbox.context.d.ts

@@ -0,0 +1,36 @@
+import type { EmblaCarouselType } from 'embla-carousel';
+import { GetStylesApi } from '@mantine/core';
+import type { LightboxLabels, LightboxSlideData } from './lightbox.types';
+import type { LightboxRootFactory } from './LightboxRoot/LightboxRoot';
+export interface LightboxContextValue {
+    getStyles: GetStylesApi<LightboxRootFactory>;
+    labels: LightboxLabels;
+    opened: boolean;
+    slides: LightboxSlideData[];
+    currentIndex: number;
+    setIndex: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+    embla: EmblaCarouselType | null;
+    emblaRef: React.RefCallback<HTMLDivElement> | null;
+    withZoom: boolean;
+    withThumbnails: boolean;
+    withFullscreen: boolean;
+    withDownload: boolean;
+    thumbnailsVisible: boolean;
+    toggleThumbnails: () => void;
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+    zoomState: {
+        scale: number;
+        isZoomed: boolean;
+    };
+    toggleZoom: () => void;
+    getImageZoomProps: () => Record<string, any>;
+    onClose: () => void;
+    loop: boolean;
+    closeOnClickOutside: boolean;
+    closeOnSwipeDown: boolean;
+    transitionDuration: number;
+}
+export declare const LightboxContextProvider: import("react").Context<LightboxContextValue | null>, useLightboxContext: () => LightboxContextValue;