@mantine/lightbox 9.5.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Vitaly Rtishchev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @mantine/lightbox
+
+[![npm](https://img.shields.io/npm/dm/@mantine/lightbox)](https://www.npmjs.com/package/@mantine/lightbox)
+
+Full-screen media lightbox with carousel navigation
+
+[View documentation](https://mantine.dev/)
+
+## Installation
+
+```bash
+# With yarn
+yarn add @mantine/lightbox @mantine/core @mantine/hooks embla-carousel embla-carousel-react
+
+# With npm
+npm install @mantine/lightbox @mantine/core @mantine/hooks embla-carousel embla-carousel-react
+```
+
+## License
+
+MIT

package/cjs/Lightbox.cjs

@@ -0,0 +1,56 @@
+"use client";
+const require_lightbox_store = require("./lightbox.store.cjs");
+const require_Lightbox_module = require("./Lightbox.module.cjs");
+const require_LightboxCaption = require("./LightboxCaption/LightboxCaption.cjs");
+const require_LightboxCloseButton = require("./LightboxCloseButton/LightboxCloseButton.cjs");
+const require_LightboxNavigation = require("./LightboxNavigation/LightboxNavigation.cjs");
+const require_LightboxProvider = require("./LightboxProvider/LightboxProvider.cjs");
+const require_LightboxRoot = require("./LightboxRoot/LightboxRoot.cjs");
+const require_LightboxSlide = require("./LightboxSlide/LightboxSlide.cjs");
+const require_LightboxSlides = require("./LightboxSlides/LightboxSlides.cjs");
+const require_LightboxThumbnails = require("./LightboxThumbnails/LightboxThumbnails.cjs");
+const require_LightboxToolbar = require("./LightboxToolbar/LightboxToolbar.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/lightbox/src/Lightbox.tsx
+const defaultProps = {
+	...require_LightboxRoot.lightboxRootDefaultProps,
+	withNavigation: true
+};
+const Lightbox = (0, _mantine_core.factory)((_props) => {
+	const { slides, toolbarItems, withNavigation, children, ...others } = (0, _mantine_core.useProps)("Lightbox", defaultProps, _props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxRoot.LightboxRoot, {
+		...others,
+		slides,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxToolbar.LightboxToolbar, { toolbarItems }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxSlides.LightboxSlides, { children: slides.map((slide, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxSlide.LightboxSlide, {
+				slide,
+				index
+			}, index)) }),
+			withNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxNavigation.LightboxNavigation, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxCaption.LightboxCaption, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxThumbnails.LightboxThumbnails, {})
+		] })
+	});
+});
+Lightbox.classes = require_Lightbox_module.default;
+Lightbox.displayName = "@mantine/lightbox/Lightbox";
+Lightbox.Root = require_LightboxRoot.LightboxRoot;
+Lightbox.Toolbar = require_LightboxToolbar.LightboxToolbar;
+Lightbox.Slides = require_LightboxSlides.LightboxSlides;
+Lightbox.Slide = require_LightboxSlide.LightboxSlide;
+Lightbox.Thumbnails = require_LightboxThumbnails.LightboxThumbnails;
+Lightbox.Navigation = require_LightboxNavigation.LightboxNavigation;
+Lightbox.Caption = require_LightboxCaption.LightboxCaption;
+Lightbox.CloseButton = require_LightboxCloseButton.LightboxCloseButton;
+Lightbox.Provider = require_LightboxProvider.LightboxProviderComponent;
+Lightbox.open = require_lightbox_store.lightbox.open;
+Lightbox.close = require_lightbox_store.lightbox.close;
+Lightbox.next = require_lightbox_store.lightbox.next;
+Lightbox.prev = require_lightbox_store.lightbox.prev;
+Lightbox.setIndex = require_lightbox_store.lightbox.setIndex;
+//#endregion
+exports.Lightbox = Lightbox;
+
+//# sourceMappingURL=Lightbox.cjs.map

package/cjs/Lightbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.cjs","names":["lightboxRootDefaultProps","factory","useProps","LightboxRoot","LightboxToolbar","LightboxSlides","LightboxSlide","LightboxNavigation","LightboxCaption","LightboxThumbnails","classes","LightboxCloseButton","LightboxProviderComponent","lightbox"],"sources":["../src/Lightbox.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '@mantine/core';\nimport { lightbox } from './lightbox.store';\nimport type { ToolbarItems } from './lightbox.types';\nimport { LightboxCaption } from './LightboxCaption/LightboxCaption';\nimport { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';\nimport { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';\nimport { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';\nimport {\n  LightboxRoot,\n  lightboxRootDefaultProps,\n  LightboxRootProps,\n  LightboxRootStylesNames,\n} from './LightboxRoot/LightboxRoot';\nimport { LightboxSlide } from './LightboxSlide/LightboxSlide';\nimport { LightboxSlides } from './LightboxSlides/LightboxSlides';\nimport { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';\nimport { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';\nimport classes from './Lightbox.module.css';\n\nexport type LightboxStylesNames = LightboxRootStylesNames;\n\nexport interface LightboxProps extends Omit<LightboxRootProps, 'children'> {\n  /** Custom toolbar items, overrides default toolbar. Can be a function that receives the current lightbox state and handlers. */\n  toolbarItems?: ToolbarItems;\n\n  /** Shows previous/next navigation arrows @default true */\n  withNavigation?: boolean;\n\n  /** Custom lightbox layout, overrides the default layout built from compound components */\n  children?: React.ReactNode;\n}\n\nexport type LightboxFactory = Factory<{\n  props: LightboxProps;\n  ref: HTMLDivElement;\n  stylesNames: LightboxStylesNames;\n  staticComponents: {\n    Root: typeof LightboxRoot;\n    Toolbar: typeof LightboxToolbar;\n    Slides: typeof LightboxSlides;\n    Slide: typeof LightboxSlide;\n    Thumbnails: typeof LightboxThumbnails;\n    Navigation: typeof LightboxNavigation;\n    Caption: typeof LightboxCaption;\n    CloseButton: typeof LightboxCloseButton;\n    Provider: typeof LightboxProviderComponent;\n    open: typeof lightbox.open;\n    close: typeof lightbox.close;\n    next: typeof lightbox.next;\n    prev: typeof lightbox.prev;\n    setIndex: typeof lightbox.setIndex;\n  };\n}>;\n\nconst defaultProps = {\n  ...lightboxRootDefaultProps,\n  withNavigation: true,\n} satisfies Partial<LightboxProps>;\n\nexport const Lightbox = factory<LightboxFactory>((_props) => {\n  const props = useProps('Lightbox', defaultProps, _props);\n  const { slides, toolbarItems, withNavigation, children, ...others } = props;\n\n  return (\n    <LightboxRoot {...others} slides={slides}>\n      {children ?? (\n        <>\n          <LightboxToolbar toolbarItems={toolbarItems} />\n\n          <LightboxSlides>\n            {slides.map((slide, index) => (\n              <LightboxSlide key={index} slide={slide} index={index} />\n            ))}\n          </LightboxSlides>\n\n          {withNavigation && <LightboxNavigation />}\n          <LightboxCaption />\n          <LightboxThumbnails />\n        </>\n      )}\n    </LightboxRoot>\n  );\n});\n\nLightbox.classes = classes;\nLightbox.displayName = '@mantine/lightbox/Lightbox';\nLightbox.Root = LightboxRoot;\nLightbox.Toolbar = LightboxToolbar;\nLightbox.Slides = LightboxSlides;\nLightbox.Slide = LightboxSlide;\nLightbox.Thumbnails = LightboxThumbnails;\nLightbox.Navigation = LightboxNavigation;\nLightbox.Caption = LightboxCaption;\nLightbox.CloseButton = LightboxCloseButton;\nLightbox.Provider = LightboxProviderComponent;\nLightbox.open = lightbox.open;\nLightbox.close = lightbox.close;\nLightbox.next = lightbox.next;\nLightbox.prev = lightbox.prev;\nLightbox.setIndex = lightbox.setIndex;\n"],"mappings":";;;;;;;;;;;;;;;AAsDA,MAAM,eAAe;CACnB,GAAGA,qBAAAA;CACH,gBAAgB;AAClB;AAEA,MAAa,YAAA,GAAWC,cAAAA,QAAAA,EAA0B,WAAW;CAE3D,MAAM,EAAE,QAAQ,cAAc,gBAAgB,UAAU,GAAG,YAAA,GAD7CC,cAAAA,SAAAA,CAAS,YAAY,cAAc,MACyB;CAE1E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EAAc,GAAI;EAAgB;EAC/B,UAAA,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD,EAA+B,aAAe,CAAA;GAE9C,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;IAAkC;IAAc;GAAQ,GAApC,KAAoC,CACzD,EACa,CAAA;GAEf,kBAAkB,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD,CAAqB,CAAA;GACxC,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD,CAAkB,CAAA;GAClB,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD,CAAqB,CAAA;EACrB,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC;AAED,SAAS,UAAUC,wBAAAA;AACnB,SAAS,cAAc;AACvB,SAAS,OAAOP,qBAAAA;AAChB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,SAASC,uBAAAA;AAClB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,aAAaG,2BAAAA;AACtB,SAAS,aAAaF,2BAAAA;AACtB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,cAAcG,4BAAAA;AACvB,SAAS,WAAWC,yBAAAA;AACpB,SAAS,OAAOC,uBAAAA,SAAS;AACzB,SAAS,QAAQA,uBAAAA,SAAS;AAC1B,SAAS,OAAOA,uBAAAA,SAAS;AACzB,SAAS,OAAOA,uBAAAA,SAAS;AACzB,SAAS,WAAWA,uBAAAA,SAAS"}

package/cjs/Lightbox.module.cjs

@@ -0,0 +1,30 @@
+"use client";
+//#region packages/@mantine/lightbox/src/Lightbox.module.css
+var Lightbox_module_default = {
+	"root": "m_4f1afa9a",
+	"overlay": "m_143cf98",
+	"content": "m_7b06bfc1",
+	"toolbar": "m_fe5b16c3",
+	"toolbarGroup": "m_9e01b17c",
+	"toolbarButton": "m_19d8cbd5",
+	"counter": "m_7b66e144",
+	"slides": "m_f5ce649a",
+	"slidesViewport": "m_7f838760",
+	"slidesContainer": "m_b5439507",
+	"slide": "m_9450faf9",
+	"slideImage": "m_e659b1e2",
+	"slideVideo": "m_e70f1d02",
+	"thumbnails": "m_411d1cbf",
+	"thumbnailsViewport": "m_3a7e4a85",
+	"thumbnailsContainer": "m_59a13682",
+	"thumbnail": "m_3be82a34",
+	"thumbnailImage": "m_fd95cf87",
+	"navigation": "m_15a759cc",
+	"navigationButton": "m_a5bee41e",
+	"caption": "m_633f252e",
+	"closeButton": "m_1ae53e92"
+};
+//#endregion
+exports.default = Lightbox_module_default;
+
+//# sourceMappingURL=Lightbox.module.cjs.map

package/cjs/Lightbox.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.module.cjs","names":[],"sources":["../src/Lightbox.module.css"],"sourcesContent":[".root {\n  --lightbox-transition-duration: 200ms;\n  --lightbox-overlay-color: rgba(0, 0, 0, 0.9);\n  --lightbox-z-index: 400;\n  --lightbox-toolbar-height: 56px;\n  --lightbox-thumbnails-height: 100px;\n\n  display: contents;\n}\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--lightbox-z-index);\n  background-color: var(--lightbox-overlay-color);\n}\n\n.content {\n  position: fixed;\n  inset: 0;\n  z-index: var(--lightbox-z-index);\n  display: flex;\n  flex-direction: column;\n  color: var(--mantine-color-white);\n  outline: none;\n}\n\n.toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--lightbox-toolbar-height);\n  padding: 0 var(--mantine-spacing-md);\n  flex-shrink: 0;\n  z-index: 1;\n}\n\n.toolbarGroup {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n}\n\n.toolbarButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mantine-radius-sm);\n  color: var(--mantine-color-white);\n  opacity: 0.8;\n  transition:\n    opacity var(--lightbox-transition-duration) ease,\n    background-color var(--lightbox-transition-duration) ease;\n\n  @mixin hover {\n    opacity: 1;\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.counter {\n  font-size: var(--mantine-font-size-sm);\n  color: var(--mantine-color-white);\n  opacity: 0.8;\n  user-select: none;\n}\n\n.slides {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.slidesViewport {\n  height: 100%;\n  overflow: hidden;\n}\n\n.slidesContainer {\n  display: flex;\n  height: 100%;\n}\n\n.slide {\n  position: relative;\n  flex: 0 0 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mantine-spacing-md);\n  min-width: 0;\n}\n\n.slideImage {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  user-select: none;\n  -webkit-user-drag: none;\n  transition: transform var(--lightbox-transition-duration) ease;\n\n  &[data-zoom-enabled] {\n    touch-action: none;\n  }\n\n  &[data-zoomed] {\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  &[data-dragging] {\n    transition: none;\n  }\n\n  &[data-zoom-enabled]:not([data-zoomed]) {\n    cursor: zoom-in;\n  }\n}\n\n.slideVideo {\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n.thumbnails {\n  display: block;\n  padding: 0 var(--mantine-spacing-md);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.thumbnailsViewport {\n  width: fit-content;\n  max-width: 100%;\n  margin-inline: auto;\n  height: var(--lightbox-thumbnails-height);\n  overflow: hidden;\n}\n\n.thumbnailsContainer {\n  display: flex;\n  gap: var(--mantine-spacing-xs);\n  height: 100%;\n  align-items: center;\n}\n\n.thumbnail {\n  flex: 0 0 auto;\n  width: 64px;\n  height: 64px;\n  border-radius: var(--mantine-radius-sm);\n  overflow: hidden;\n  opacity: 0.5;\n  border: 2px solid transparent;\n  cursor: pointer;\n  transition:\n    opacity var(--lightbox-transition-duration) ease,\n    border-color var(--lightbox-transition-duration) ease;\n  padding: 0;\n  background: none;\n\n  @mixin hover {\n    opacity: 0.8;\n  }\n\n  &[data-active] {\n    opacity: 1;\n    border-color: var(--mantine-primary-color-filled);\n  }\n}\n\n.thumbnailImage {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.navigation {\n  position: absolute;\n  top: 50%;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0 var(--mantine-spacing-md);\n  pointer-events: none;\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.navigationButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  color: var(--mantine-color-white);\n  pointer-events: all;\n  opacity: 0.7;\n  transition: opacity var(--lightbox-transition-duration) ease;\n\n  @mixin hover {\n    opacity: 1;\n  }\n\n  &[data-inactive] {\n    opacity: 0.3;\n    pointer-events: none;\n  }\n}\n\n.caption {\n  text-align: center;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  font-size: var(--mantine-font-size-sm);\n  color: var(--mantine-color-white);\n  opacity: 0.8;\n  flex-shrink: 0;\n}\n\n.closeButton {\n  color: var(--mantine-color-white);\n}\n"],"mappings":""}

package/cjs/LightboxCaption/LightboxCaption.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_lightbox_context = require("../lightbox.context.cjs");
+const require_Lightbox_module = require("../Lightbox.module.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/lightbox/src/LightboxCaption/LightboxCaption.tsx
+const LightboxCaption = (0, _mantine_core.factory)((props) => {
+	const { classNames, className, style, styles, vars, children, ...others } = (0, _mantine_core.useProps)("LightboxCaption", null, props);
+	const ctx = require_lightbox_context.useLightboxContext();
+	const currentSlide = ctx.slides[ctx.currentIndex];
+	const caption = children ?? currentSlide?.caption;
+	if (!caption) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+		...ctx.getStyles("caption", {
+			className,
+			style,
+			classNames,
+			styles
+		}),
+		mod: "reduce-motion",
+		...others,
+		children: caption
+	});
+});
+LightboxCaption.classes = require_Lightbox_module.default;
+LightboxCaption.displayName = "@mantine/lightbox/LightboxCaption";
+//#endregion
+exports.LightboxCaption = LightboxCaption;
+
+//# sourceMappingURL=LightboxCaption.cjs.map

package/cjs/LightboxCaption/LightboxCaption.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxCaption.cjs","names":["factory","useProps","useLightboxContext","Box","classes"],"sources":["../../src/LightboxCaption/LightboxCaption.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 classes from '../Lightbox.module.css';\n\nexport type LightboxCaptionStylesNames = 'caption';\n\nexport interface LightboxCaptionProps\n  extends BoxProps, CompoundStylesApiProps<LightboxCaptionFactory>, ElementProps<'div'> {\n  /** Custom caption content, overrides slide caption */\n  children?: React.ReactNode;\n}\n\nexport type LightboxCaptionFactory = Factory<{\n  props: LightboxCaptionProps;\n  ref: HTMLDivElement;\n  stylesNames: LightboxCaptionStylesNames;\n  compound: true;\n}>;\n\nexport const LightboxCaption = factory<LightboxCaptionFactory>((props) => {\n  const { classNames, className, style, styles, vars, children, ...others } = useProps(\n    'LightboxCaption',\n    null,\n    props\n  );\n\n  const ctx = useLightboxContext();\n  const currentSlide = ctx.slides[ctx.currentIndex];\n  const caption = children ?? currentSlide?.caption;\n\n  if (!caption) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...ctx.getStyles('caption', { className, style, classNames, styles })}\n      mod=\"reduce-motion\"\n      {...others}\n    >\n      {caption}\n    </Box>\n  );\n});\n\nLightboxCaption.classes = classes;\nLightboxCaption.displayName = '@mantine/lightbox/LightboxCaption';\n"],"mappings":";;;;;;AA2BA,MAAa,mBAAA,GAAkBA,cAAAA,QAAAA,EAAiC,UAAU;CACxE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,GAAG,YAAA,GAAWC,cAAAA,SAAAA,CAC1E,mBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,eAAe,IAAI,OAAO,IAAI;CACpC,MAAM,UAAU,YAAY,cAAc;CAE1C,IAAI,CAAC,SACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACrE,KAAI;EACJ,GAAI;EAEH,UAAA;CACE,CAAA;AAET,CAAC;AAED,gBAAgB,UAAUC,wBAAAA;AAC1B,gBAAgB,cAAc"}

package/cjs/LightboxCloseButton/LightboxCloseButton.cjs

@@ -0,0 +1,32 @@
+"use client";
+const require_lightbox_context = require("../lightbox.context.cjs");
+const require_Lightbox_module = require("../Lightbox.module.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/lightbox/src/LightboxCloseButton/LightboxCloseButton.tsx
+const LightboxCloseButton = (0, _mantine_core.factory)((props) => {
+	const { classNames, className, style, styles, vars, onClick, ...others } = (0, _mantine_core.useProps)("LightboxCloseButton", null, props);
+	const ctx = require_lightbox_context.useLightboxContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.CloseButton, {
+		...ctx.getStyles("closeButton", {
+			className,
+			style,
+			classNames,
+			styles
+		}),
+		"aria-label": ctx.labels.closeLabel,
+		variant: "subtle",
+		size: "lg",
+		...others,
+		onClick: (event) => {
+			onClick?.(event);
+			ctx.onClose();
+		}
+	});
+});
+LightboxCloseButton.classes = require_Lightbox_module.default;
+LightboxCloseButton.displayName = "@mantine/lightbox/LightboxCloseButton";
+//#endregion
+exports.LightboxCloseButton = LightboxCloseButton;
+
+//# sourceMappingURL=LightboxCloseButton.cjs.map

package/cjs/LightboxCloseButton/LightboxCloseButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxCloseButton.cjs","names":["factory","useProps","useLightboxContext","CloseButton","classes"],"sources":["../../src/LightboxCloseButton/LightboxCloseButton.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CloseButton,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxCloseButtonStylesNames = 'closeButton';\n\nexport interface LightboxCloseButtonProps\n  extends BoxProps, CompoundStylesApiProps<LightboxCloseButtonFactory>, ElementProps<'button'> {}\n\nexport type LightboxCloseButtonFactory = Factory<{\n  props: LightboxCloseButtonProps;\n  ref: HTMLButtonElement;\n  stylesNames: LightboxCloseButtonStylesNames;\n  compound: true;\n}>;\n\nexport const LightboxCloseButton = factory<LightboxCloseButtonFactory>((props) => {\n  const { classNames, className, style, styles, vars, onClick, ...others } = useProps(\n    'LightboxCloseButton',\n    null,\n    props\n  );\n\n  const ctx = useLightboxContext();\n\n  return (\n    <CloseButton\n      {...ctx.getStyles('closeButton', { className, style, classNames, styles })}\n      aria-label={ctx.labels.closeLabel}\n      variant=\"subtle\"\n      size=\"lg\"\n      {...others}\n      onClick={(event) => {\n        onClick?.(event);\n        ctx.onClose();\n      }}\n    />\n  );\n});\n\nLightboxCloseButton.classes = classes;\nLightboxCloseButton.displayName = '@mantine/lightbox/LightboxCloseButton';\n"],"mappings":";;;;;;AAwBA,MAAa,uBAAA,GAAsBA,cAAAA,QAAAA,EAAqC,UAAU;CAChF,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,SAAS,GAAG,YAAA,GAAWC,cAAAA,SAAAA,CACzE,uBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,aAAD;EACE,GAAI,IAAI,UAAU,eAAe;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACzE,cAAY,IAAI,OAAO;EACvB,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,QAAQ;EACd;CACD,CAAA;AAEL,CAAC;AAED,oBAAoB,UAAUC,wBAAAA;AAC9B,oBAAoB,cAAc"}

package/cjs/LightboxNavigation/LightboxNavigation.cjs

@@ -0,0 +1,105 @@
+"use client";
+const require_lightbox_context = require("../lightbox.context.cjs");
+const require_Lightbox_module = require("../Lightbox.module.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region packages/@mantine/lightbox/src/LightboxNavigation/LightboxNavigation.tsx
+function ChevronLeft() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		width: "36",
+		height: "36",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "15 18 9 12 15 6" })
+	});
+}
+function ChevronRight() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		width: "36",
+		height: "36",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 18 15 12 9 6" })
+	});
+}
+const LightboxNavigation = (0, _mantine_core.factory)((props) => {
+	const { classNames, className, style, styles, vars, ...others } = (0, _mantine_core.useProps)("LightboxNavigation", null, props);
+	const ctx = require_lightbox_context.useLightboxContext();
+	const stylesApiProps = {
+		classNames,
+		styles
+	};
+	const { dir } = (0, _mantine_core.useDirection)();
+	const PrevIcon = dir === "rtl" ? ChevronRight : ChevronLeft;
+	const NextIcon = dir === "rtl" ? ChevronLeft : ChevronRight;
+	const fallbackCanPrev = ctx.loop ? ctx.slides.length > 1 : ctx.currentIndex > 0;
+	const fallbackCanNext = ctx.loop ? ctx.slides.length > 1 : ctx.currentIndex < ctx.slides.length - 1;
+	const [scrollState, setScrollState] = (0, react.useState)(null);
+	const { embla } = ctx;
+	(0, react.useEffect)(() => {
+		if (!embla) {
+			setScrollState(null);
+			return;
+		}
+		const update = () => setScrollState({
+			canPrev: embla.canScrollPrev(),
+			canNext: embla.canScrollNext()
+		});
+		update();
+		embla.on("select", update);
+		embla.on("reInit", update);
+		embla.on("settle", update);
+		return () => {
+			embla.off("select", update);
+			embla.off("reInit", update);
+			embla.off("settle", update);
+		};
+	}, [embla]);
+	const canPrev = scrollState ? scrollState.canPrev : fallbackCanPrev;
+	const canNext = scrollState ? scrollState.canNext : fallbackCanNext;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...ctx.getStyles("navigation", {
+			className,
+			style,
+			classNames,
+			styles
+		}),
+		...others,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+			...ctx.getStyles("navigationButton", stylesApiProps),
+			"aria-label": ctx.labels.previousSlideLabel,
+			"aria-disabled": !canPrev || void 0,
+			"data-inactive": !canPrev || void 0,
+			mod: "reduce-motion",
+			tabIndex: canPrev ? 0 : -1,
+			onClick: ctx.prev,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrevIcon, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+			...ctx.getStyles("navigationButton", stylesApiProps),
+			"aria-label": ctx.labels.nextSlideLabel,
+			"aria-disabled": !canNext || void 0,
+			"data-inactive": !canNext || void 0,
+			mod: "reduce-motion",
+			tabIndex: canNext ? 0 : -1,
+			onClick: ctx.next,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NextIcon, {})
+		})]
+	});
+});
+LightboxNavigation.classes = require_Lightbox_module.default;
+LightboxNavigation.displayName = "@mantine/lightbox/LightboxNavigation";
+//#endregion
+exports.LightboxNavigation = LightboxNavigation;
+
+//# sourceMappingURL=LightboxNavigation.cjs.map

package/cjs/LightboxNavigation/LightboxNavigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxNavigation.cjs","names":["factory","useProps","useLightboxContext","useDirection","useState","Box","UnstyledButton","classes"],"sources":["../../src/LightboxNavigation/LightboxNavigation.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  UnstyledButton,\n  useDirection,\n  useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxNavigationStylesNames = 'navigation' | 'navigationButton';\n\nexport interface LightboxNavigationProps\n  extends BoxProps, CompoundStylesApiProps<LightboxNavigationFactory>, ElementProps<'div'> {}\n\nexport type LightboxNavigationFactory = Factory<{\n  props: LightboxNavigationProps;\n  ref: HTMLDivElement;\n  stylesNames: LightboxNavigationStylesNames;\n  compound: true;\n}>;\n\nfunction ChevronLeft() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width=\"36\"\n      height=\"36\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"15 18 9 12 15 6\" />\n    </svg>\n  );\n}\n\nfunction ChevronRight() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width=\"36\"\n      height=\"36\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"9 18 15 12 9 6\" />\n    </svg>\n  );\n}\n\nexport const LightboxNavigation = factory<LightboxNavigationFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'LightboxNavigation',\n    null,\n    props\n  );\n\n  const ctx = useLightboxContext();\n  const stylesApiProps = { classNames, styles };\n  const { dir } = useDirection();\n\n  // Embla is direction-aware, so \"previous\" is the leading edge of the reading direction –\n  // the chevrons have to follow it rather than always pointing left/right.\n  const PrevIcon = dir === 'rtl' ? ChevronRight : ChevronLeft;\n  const NextIcon = dir === 'rtl' ? ChevronLeft : ChevronRight;\n\n  const fallbackCanPrev = ctx.loop ? ctx.slides.length > 1 : ctx.currentIndex > 0;\n  const fallbackCanNext = ctx.loop\n    ? ctx.slides.length > 1\n    : ctx.currentIndex < ctx.slides.length - 1;\n\n  const [scrollState, setScrollState] = useState<{ canPrev: boolean; canNext: boolean } | null>(\n    null\n  );\n\n  const { embla } = ctx;\n\n  useEffect(() => {\n    if (!embla) {\n      setScrollState(null);\n      return undefined;\n    }\n\n    const update = () =>\n      setScrollState({ canPrev: embla.canScrollPrev(), canNext: embla.canScrollNext() });\n\n    update();\n    embla.on('select', update);\n    embla.on('reInit', update);\n    embla.on('settle', update);\n\n    return () => {\n      embla.off('select', update);\n      embla.off('reInit', update);\n      embla.off('settle', update);\n    };\n  }, [embla]);\n\n  const canPrev = scrollState ? scrollState.canPrev : fallbackCanPrev;\n  const canNext = scrollState ? scrollState.canNext : fallbackCanNext;\n\n  return (\n    <Box {...ctx.getStyles('navigation', { className, style, classNames, styles })} {...others}>\n      <UnstyledButton\n        {...ctx.getStyles('navigationButton', stylesApiProps)}\n        aria-label={ctx.labels.previousSlideLabel}\n        aria-disabled={!canPrev || undefined}\n        data-inactive={!canPrev || undefined}\n        mod=\"reduce-motion\"\n        tabIndex={canPrev ? 0 : -1}\n        onClick={ctx.prev}\n      >\n        <PrevIcon />\n      </UnstyledButton>\n\n      <UnstyledButton\n        {...ctx.getStyles('navigationButton', stylesApiProps)}\n        aria-label={ctx.labels.nextSlideLabel}\n        aria-disabled={!canNext || undefined}\n        data-inactive={!canNext || undefined}\n        mod=\"reduce-motion\"\n        tabIndex={canNext ? 0 : -1}\n        onClick={ctx.next}\n      >\n        <NextIcon />\n      </UnstyledButton>\n    </Box>\n  );\n});\n\nLightboxNavigation.classes = classes;\nLightboxNavigation.displayName = '@mantine/lightbox/LightboxNavigation';\n"],"mappings":"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"}

package/cjs/LightboxProvider/LightboxProvider.cjs

@@ -0,0 +1,29 @@
+"use client";
+const require_lightbox_store = require("../lightbox.store.cjs");
+const require_Lightbox = require("../Lightbox.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region packages/@mantine/lightbox/src/LightboxProvider/LightboxProvider.tsx
+const defaultProps = { store: require_lightbox_store.lightboxStore };
+const LightboxProviderComponent = (0, _mantine_core.factory)((_props) => {
+	const { store, loop, ...others } = (0, _mantine_core.useProps)("LightboxProvider", defaultProps, _props);
+	const state = require_lightbox_store.useLightboxStore(store);
+	(0, react.useEffect)(() => {
+		if (store.getState().loop !== !!loop) require_lightbox_store.lightboxActions.updateState(() => ({ loop: !!loop }), store);
+	}, [loop, store]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Lightbox.Lightbox, {
+		...others,
+		loop,
+		opened: state.opened,
+		onClose: () => require_lightbox_store.lightboxActions.close(store),
+		slides: state.slides,
+		currentIndex: state.currentIndex,
+		onIndexChange: (index) => require_lightbox_store.lightboxActions.setIndex(index, store)
+	});
+});
+LightboxProviderComponent.displayName = "@mantine/lightbox/LightboxProvider";
+//#endregion
+exports.LightboxProviderComponent = LightboxProviderComponent;
+
+//# sourceMappingURL=LightboxProvider.cjs.map

package/cjs/LightboxProvider/LightboxProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxProvider.cjs","names":["lightboxStore","factory","useProps","useLightboxStore","Lightbox","lightboxActions"],"sources":["../../src/LightboxProvider/LightboxProvider.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { factory, Factory, useProps } from '@mantine/core';\nimport { Lightbox, LightboxProps } from '../Lightbox';\nimport { lightboxActions, LightboxStore, lightboxStore, useLightboxStore } from '../lightbox.store';\n\nexport interface LightboxProviderProps extends Omit<\n  LightboxProps,\n  'opened' | 'onClose' | 'slides' | 'currentIndex' | 'onIndexChange'\n> {\n  /** Lightbox store, can be used to create multiple instances @default lightboxStore */\n  store?: LightboxStore;\n}\n\nexport type LightboxProviderFactory = Factory<{\n  props: LightboxProviderProps;\n  ref: HTMLDivElement;\n  stylesNames: never;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  store: lightboxStore,\n} satisfies Partial<LightboxProviderProps>;\n\nexport const LightboxProviderComponent = factory<LightboxProviderFactory>((_props) => {\n  const props = useProps('LightboxProvider', defaultProps, _props);\n  const { store, loop, ...others } = props;\n\n  const state = useLightboxStore(store!);\n\n  useEffect(() => {\n    if (store!.getState().loop !== !!loop) {\n      lightboxActions.updateState(() => ({ loop: !!loop }), store!);\n    }\n  }, [loop, store]);\n\n  return (\n    <Lightbox\n      {...others}\n      loop={loop}\n      opened={state.opened}\n      onClose={() => lightboxActions.close(store!)}\n      slides={state.slides}\n      currentIndex={state.currentIndex}\n      onIndexChange={(index) => lightboxActions.setIndex(index, store!)}\n    />\n  );\n});\n\nLightboxProviderComponent.displayName = '@mantine/lightbox/LightboxProvider';\n"],"mappings":";;;;;;;AAoBA,MAAM,eAAe,EACnB,OAAOA,uBAAAA,cACT;AAEA,MAAa,6BAAA,GAA4BC,cAAAA,QAAAA,EAAkC,WAAW;CAEpF,MAAM,EAAE,OAAO,MAAM,GAAG,YAAA,GADVC,cAAAA,SAAAA,CAAS,oBAAoB,cAAc,MAClB;CAEvC,MAAM,QAAQC,uBAAAA,iBAAiB,KAAM;CAErC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,MAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,MAC/B,uBAAA,gBAAgB,mBAAmB,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,KAAM;CAEhE,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;EACE,GAAI;EACE;EACN,QAAQ,MAAM;EACd,eAAeC,uBAAAA,gBAAgB,MAAM,KAAM;EAC3C,QAAQ,MAAM;EACd,cAAc,MAAM;EACpB,gBAAgB,UAAUA,uBAAAA,gBAAgB,SAAS,OAAO,KAAM;CACjE,CAAA;AAEL,CAAC;AAED,0BAA0B,cAAc"}