moduix 0.11.0 → 0.11.1

package/dist/components/Lightbox/Lightbox.cjs

@@ -0,0 +1,220 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_CloseButton = require("../CloseButton/CloseButton.cjs");
+const require_Lightbox_module = require("./Lightbox.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let react = require("react");
+let _base_ui_react_dialog = require("@base-ui/react/dialog");
+//#region src/components/Lightbox/Lightbox.tsx
+const DEFAULT_CLOSE_LABEL = "Close image";
+const createLightboxHandle = _base_ui_react_dialog.Dialog.createHandle;
+const LightboxImageContext = (0, react.createContext)(null);
+const LightboxSetImageContext = (0, react.createContext)(null);
+const isSameImage = (currentImage, nextImage) => {
+	return currentImage?.src === nextImage.src && currentImage?.fullSrc === nextImage.fullSrc && currentImage?.alt === nextImage.alt;
+};
+const getGalleryRoot = (rootRef, rootSelector) => {
+	return rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
+};
+const getGalleryImage = (target, selector) => {
+	if (!(target instanceof Element)) return null;
+	const matchedNode = target.closest(selector);
+	if (!matchedNode) return null;
+	const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector("img");
+	if (!(imageNode instanceof HTMLImageElement)) return null;
+	const source = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
+	if (!source) return null;
+	return {
+		src: source,
+		alt: imageNode.alt
+	};
+};
+function Lightbox(props) {
+	const [image, setImage] = (0, react.useState)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxSetImageContext.Provider, {
+		value: setImage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxImageContext.Provider, {
+			value: image,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, { ...props })
+		})
+	});
+}
+function LightboxTrigger({ className, render, ...props }) {
+	const triggerClassName = render ? className : require_mergeClassName.mergeClassName(className, require_Lightbox_module.default.trigger);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Trigger, {
+		"data-slot": "lightbox-trigger",
+		className: triggerClassName,
+		render,
+		...props
+	});
+}
+function LightboxPortal({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Portal, {
+		"data-slot": "lightbox-portal",
+		className,
+		...props
+	});
+}
+function LightboxBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+		"data-slot": "lightbox-backdrop",
+		className: require_mergeClassName.mergeClassName(className, require_Lightbox_module.default.backdrop),
+		...props
+	});
+}
+function LightboxViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+		"data-slot": "lightbox-viewport",
+		className: require_mergeClassName.mergeClassName(className, require_Lightbox_module.default.viewport),
+		...props
+	});
+}
+function LightboxPopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+		"data-slot": "lightbox-popup",
+		className: require_mergeClassName.mergeClassName(className, require_Lightbox_module.default.popup),
+		...props
+	});
+}
+function LightboxClose({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+		"data-slot": "lightbox-close",
+		className,
+		...props
+	});
+}
+function LightboxCloseButton({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, render, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+		"data-slot": "lightbox-close-button",
+		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CloseButton.CloseButton, {
+			"aria-label": ariaLabel,
+			children
+		}),
+		className: require_mergeClassName.mergeClassName(className, require_Lightbox_module.default.closeButton),
+		...props
+	});
+}
+function LightboxFrame({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "lightbox-frame",
+		className: (0, clsx.clsx)(require_Lightbox_module.default.frame, className),
+		...props
+	});
+}
+function LightboxImage({ src, fullSrc, alt, className, onClick, ...props }) {
+	const setImage = (0, react.useContext)(LightboxSetImageContext);
+	const image = {
+		src,
+		fullSrc,
+		alt
+	};
+	(0, react.useEffect)(() => {
+		setImage?.(image);
+		return () => {
+			setImage?.((currentImage) => isSameImage(currentImage, image) ? null : currentImage);
+		};
+	}, [
+		alt,
+		fullSrc,
+		setImage,
+		src
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxTrigger, {
+		nativeButton: false,
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			"data-slot": "lightbox-image",
+			src,
+			alt,
+			className: (0, clsx.clsx)(require_Lightbox_module.default.trigger, className),
+			"data-lightbox-src": fullSrc,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) setImage?.(image);
+			},
+			...props
+		})
+	});
+}
+function LightboxContent({ className, showCloseButton = true, closeOnContentClick = true, closeLabel = DEFAULT_CLOSE_LABEL, children, ...props }) {
+	const image = (0, react.useContext)(LightboxImageContext);
+	const contentChildren = children ?? (image ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		"data-slot": "lightbox-content-image",
+		src: image.fullSrc ?? image.src,
+		alt: image.alt ?? ""
+	}) : null);
+	const content = closeOnContentClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxClose, {
+		className: require_Lightbox_module.default.contentClose,
+		nativeButton: false,
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}),
+		children: contentChildren
+	}) : contentChildren;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LightboxPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxBackdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LightboxViewport, { children: [showCloseButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxCloseButton, { "aria-label": closeLabel }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxPopup, {
+		className,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxFrame, { children: content })
+	})] })] });
+}
+function LightboxGallery({ selector = "img", rootRef, rootSelector, className, closeLabel, showCloseButton, closeOnContentClick }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [image, setImage] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		const rootNode = getGalleryRoot(rootRef, rootSelector);
+		if (!rootNode) return;
+		const handleOpen = (target) => {
+			const nextImage = getGalleryImage(target, selector);
+			if (!nextImage) return false;
+			setImage(nextImage);
+			setOpen(true);
+			return true;
+		};
+		const handleClick = (event) => {
+			handleOpen(event.target);
+		};
+		const handleKeyDown = (event) => {
+			if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.key !== "Enter" && event.key !== " ") return;
+			if (handleOpen(event.target)) event.preventDefault();
+		};
+		rootNode.addEventListener("click", handleClick);
+		rootNode.addEventListener("keydown", handleKeyDown);
+		return () => {
+			rootNode.removeEventListener("click", handleClick);
+			rootNode.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		rootRef,
+		rootSelector,
+		selector
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+		open,
+		onOpenChange: setOpen,
+		onOpenChangeComplete: (nextOpen) => {
+			if (!nextOpen) setImage(null);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LightboxContent, {
+			className,
+			closeLabel,
+			showCloseButton,
+			closeOnContentClick,
+			children: image ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				"data-slot": "lightbox-content-image",
+				src: image.src,
+				alt: image.alt ?? ""
+			}) : null
+		})
+	});
+}
+//#endregion
+exports.Lightbox = Lightbox;
+exports.LightboxBackdrop = LightboxBackdrop;
+exports.LightboxClose = LightboxClose;
+exports.LightboxCloseButton = LightboxCloseButton;
+exports.LightboxContent = LightboxContent;
+exports.LightboxFrame = LightboxFrame;
+exports.LightboxGallery = LightboxGallery;
+exports.LightboxImage = LightboxImage;
+exports.LightboxPopup = LightboxPopup;
+exports.LightboxPortal = LightboxPortal;
+exports.LightboxTrigger = LightboxTrigger;
+exports.LightboxViewport = LightboxViewport;
+exports.createLightboxHandle = createLightboxHandle;

package/dist/components/Lightbox/Lightbox.css

@@ -0,0 +1,114 @@
+@layer ui.components {
+  .LTYCWG_trigger {
+    cursor: zoom-in;
+  }
+
+  .LTYCWG_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--lightbox-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--lightbox-backdrop-blur, 4px)));
+    transition: opacity var(--lightbox-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--lightbox-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  .LTYCWG_viewport {
+    box-sizing: border-box;
+    z-index: var(--z-modal);
+    padding: var(--lightbox-viewport-padding, var(--spacing-4));
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .LTYCWG_popup {
+    box-sizing: border-box;
+    width: auto;
+    max-width: min(var(--lightbox-max-width, 80vw),
+      var(--available-width, calc(100vw - var(--spacing-8))));
+    max-height: min(var(--lightbox-max-height, 80dvh),
+      var(--available-height, calc(100dvh - var(--spacing-8))));
+    transition: opacity var(--lightbox-transition, .22s ease),
+      transform var(--lightbox-transition, .22s ease);
+    background: none;
+    border: 0;
+    outline: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--lightbox-scale, .82));
+    }
+  }
+
+  .LTYCWG_frame {
+    width: fit-content;
+    max-width: min(var(--lightbox-width, 80vw), 100%);
+    height: min(var(--lightbox-height, 80dvh), 100%);
+    max-height: min(var(--lightbox-height, 80dvh), 100%);
+    animation: LTYCWG_lightbox-image-enter var(--lightbox-image-enter-duration, .24s) ease;
+    place-items: center;
+    display: grid;
+    position: relative;
+  }
+
+  .LTYCWG_closeButton {
+    --close-button-size: var(--lightbox-close-size, 2rem);
+    --close-button-radius: var(--lightbox-close-radius, var(--radius-sm));
+    --close-button-icon-size: var(--lightbox-close-icon-size, .875rem);
+    --close-button-color: var(--lightbox-close-color, var(--color-foreground));
+    --close-button-color-hover: var(--lightbox-close-color-hover, var(--color-foreground));
+    --close-button-bg: var(--lightbox-close-bg, var(--color-background));
+    --close-button-bg-hover: var(--lightbox-close-bg-hover, var(--color-muted));
+    --close-button-focus-ring-color: var(--lightbox-focus-ring-color, var(--color-ring));
+    top: var(--lightbox-close-offset-top, var(--spacing-4));
+    right: var(--lightbox-close-offset-right, var(--spacing-4));
+    z-index: 1;
+    opacity: 1;
+    transition: opacity var(--lightbox-backdrop-transition, var(--transition-default));
+    border: 0;
+    padding: 0;
+    position: fixed;
+  }
+
+  .LTYCWG_viewport[data-starting-style] > .LTYCWG_closeButton, .LTYCWG_viewport[data-ending-style] > .LTYCWG_closeButton {
+    opacity: 0;
+  }
+
+  .LTYCWG_frame img, .LTYCWG_frame picture > img {
+    width: auto;
+    height: auto;
+    max-width: min(var(--lightbox-image-max-width, 80vw), 100%);
+    max-height: min(var(--lightbox-image-max-height, 80dvh), 100%);
+    object-fit: contain;
+    border-radius: var(--lightbox-image-radius, var(--radius-md));
+    box-shadow: var(--lightbox-image-shadow, var(--shadow-lg));
+    user-select: none;
+    display: block;
+  }
+
+  .LTYCWG_contentClose {
+    cursor: zoom-out;
+    display: contents;
+  }
+
+  @keyframes LTYCWG_lightbox-image-enter {
+    from {
+      opacity: .35;
+      transform: scale(var(--lightbox-image-enter-scale, .9));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

package/dist/components/Lightbox/Lightbox.d.ts

@@ -1,31 +1,84 @@
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-import { ComponentProps, RefObject } from 'react';
-declare const createLightboxHandle: typeof DialogPrimitive.createHandle;
-declare function Lightbox<Payload = unknown>(props: DialogPrimitive.Root.Props<Payload>): import("react").JSX.Element;
-declare function LightboxTrigger({ className, render, ...props }: DialogPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function LightboxPortal({ className, ...props }: DialogPrimitive.Portal.Props): import("react").JSX.Element;
-declare function LightboxBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function LightboxViewport({ className, ...props }: DialogPrimitive.Viewport.Props): import("react").JSX.Element;
-declare function LightboxPopup({ className, ...props }: DialogPrimitive.Popup.Props): import("react").JSX.Element;
-declare function LightboxClose({ className, ...props }: DialogPrimitive.Close.Props): import("react").JSX.Element;
-declare function LightboxCloseButton({ className, children, 'aria-label': ariaLabel, render, ...props }: DialogPrimitive.Close.Props): import("react").JSX.Element;
-declare function LightboxFrame({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function LightboxImage({ src, fullSrc, alt, className, onClick, ...props }: Omit<ComponentProps<'img'>, 'src'> & {
-    src: string;
-    fullSrc?: string;
+import { ComponentProps, RefObject } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/Lightbox/Lightbox.d.ts
+declare const createLightboxHandle: typeof Dialog.createHandle;
+declare function Lightbox<Payload = unknown>(props: Dialog.Root.Props<Payload>): import("react").JSX.Element;
+declare function LightboxTrigger({
+  className,
+  render,
+  ...props
+}: Dialog.Trigger.Props): import("react").JSX.Element;
+declare function LightboxPortal({
+  className,
+  ...props
+}: Dialog.Portal.Props): import("react").JSX.Element;
+declare function LightboxBackdrop({
+  className,
+  ...props
+}: Dialog.Backdrop.Props): import("react").JSX.Element;
+declare function LightboxViewport({
+  className,
+  ...props
+}: Dialog.Viewport.Props): import("react").JSX.Element;
+declare function LightboxPopup({
+  className,
+  ...props
+}: Dialog.Popup.Props): import("react").JSX.Element;
+declare function LightboxClose({
+  className,
+  ...props
+}: Dialog.Close.Props): import("react").JSX.Element;
+declare function LightboxCloseButton({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  render,
+  ...props
+}: Dialog.Close.Props): import("react").JSX.Element;
+declare function LightboxFrame({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function LightboxImage({
+  src,
+  fullSrc,
+  alt,
+  className,
+  onClick,
+  ...props
+}: Omit<ComponentProps<'img'>, 'src'> & {
+  src: string;
+  fullSrc?: string;
 }): import("react").JSX.Element;
-declare function LightboxContent({ className, showCloseButton, closeOnContentClick, closeLabel, children, ...props }: DialogPrimitive.Popup.Props & {
-    showCloseButton?: boolean;
-    closeLabel?: string;
-    closeOnContentClick?: boolean;
+declare function LightboxContent({
+  className,
+  showCloseButton,
+  closeOnContentClick,
+  closeLabel,
+  children,
+  ...props
+}: Dialog.Popup.Props & {
+  showCloseButton?: boolean;
+  closeLabel?: string;
+  closeOnContentClick?: boolean;
 }): import("react").JSX.Element;
-declare function LightboxGallery({ selector, rootRef, rootSelector, className, closeLabel, showCloseButton, closeOnContentClick, }: {
-    selector?: string;
-    rootRef?: RefObject<HTMLElement | null>;
-    rootSelector?: string;
-    className?: DialogPrimitive.Popup.Props['className'];
-    closeLabel?: string;
-    showCloseButton?: boolean;
-    closeOnContentClick?: boolean;
+declare function LightboxGallery({
+  selector,
+  rootRef,
+  rootSelector,
+  className,
+  closeLabel,
+  showCloseButton,
+  closeOnContentClick
+}: {
+  selector?: string;
+  rootRef?: RefObject<HTMLElement | null>;
+  rootSelector?: string;
+  className?: Dialog.Popup.Props['className'];
+  closeLabel?: string;
+  showCloseButton?: boolean;
+  closeOnContentClick?: boolean;
 }): import("react").JSX.Element;
-export { Lightbox, createLightboxHandle, LightboxTrigger, LightboxPortal, LightboxBackdrop, LightboxViewport, LightboxPopup, LightboxContent, LightboxClose, LightboxCloseButton, LightboxFrame, LightboxImage, LightboxGallery, };
+//#endregion
+export { Lightbox, LightboxBackdrop, LightboxClose, LightboxCloseButton, LightboxContent, LightboxFrame, LightboxGallery, LightboxImage, LightboxPopup, LightboxPortal, LightboxTrigger, LightboxViewport, createLightboxHandle };

package/dist/components/Lightbox/Lightbox.js

@@ -0,0 +1,208 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import { CloseButton } from "../CloseButton/CloseButton.js";
+import Lightbox_module_default from "./Lightbox.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Lightbox/Lightbox.tsx
+const DEFAULT_CLOSE_LABEL = "Close image";
+const createLightboxHandle = Dialog.createHandle;
+const LightboxImageContext = createContext(null);
+const LightboxSetImageContext = createContext(null);
+const isSameImage = (currentImage, nextImage) => {
+	return currentImage?.src === nextImage.src && currentImage?.fullSrc === nextImage.fullSrc && currentImage?.alt === nextImage.alt;
+};
+const getGalleryRoot = (rootRef, rootSelector) => {
+	return rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
+};
+const getGalleryImage = (target, selector) => {
+	if (!(target instanceof Element)) return null;
+	const matchedNode = target.closest(selector);
+	if (!matchedNode) return null;
+	const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector("img");
+	if (!(imageNode instanceof HTMLImageElement)) return null;
+	const source = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
+	if (!source) return null;
+	return {
+		src: source,
+		alt: imageNode.alt
+	};
+};
+function Lightbox(props) {
+	const [image, setImage] = useState(null);
+	return /* @__PURE__ */ jsx(LightboxSetImageContext.Provider, {
+		value: setImage,
+		children: /* @__PURE__ */ jsx(LightboxImageContext.Provider, {
+			value: image,
+			children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
+		})
+	});
+}
+function LightboxTrigger({ className, render, ...props }) {
+	const triggerClassName = render ? className : mergeClassName(className, Lightbox_module_default.trigger);
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "lightbox-trigger",
+		className: triggerClassName,
+		render,
+		...props
+	});
+}
+function LightboxPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "lightbox-portal",
+		className,
+		...props
+	});
+}
+function LightboxBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "lightbox-backdrop",
+		className: mergeClassName(className, Lightbox_module_default.backdrop),
+		...props
+	});
+}
+function LightboxViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		"data-slot": "lightbox-viewport",
+		className: mergeClassName(className, Lightbox_module_default.viewport),
+		...props
+	});
+}
+function LightboxPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-slot": "lightbox-popup",
+		className: mergeClassName(className, Lightbox_module_default.popup),
+		...props
+	});
+}
+function LightboxClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "lightbox-close",
+		className,
+		...props
+	});
+}
+function LightboxCloseButton({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, render, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "lightbox-close-button",
+		render: render ?? /* @__PURE__ */ jsx(CloseButton, {
+			"aria-label": ariaLabel,
+			children
+		}),
+		className: mergeClassName(className, Lightbox_module_default.closeButton),
+		...props
+	});
+}
+function LightboxFrame({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "lightbox-frame",
+		className: clsx(Lightbox_module_default.frame, className),
+		...props
+	});
+}
+function LightboxImage({ src, fullSrc, alt, className, onClick, ...props }) {
+	const setImage = useContext(LightboxSetImageContext);
+	const image = {
+		src,
+		fullSrc,
+		alt
+	};
+	useEffect(() => {
+		setImage?.(image);
+		return () => {
+			setImage?.((currentImage) => isSameImage(currentImage, image) ? null : currentImage);
+		};
+	}, [
+		alt,
+		fullSrc,
+		setImage,
+		src
+	]);
+	return /* @__PURE__ */ jsx(LightboxTrigger, {
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("img", {
+			"data-slot": "lightbox-image",
+			src,
+			alt,
+			className: clsx(Lightbox_module_default.trigger, className),
+			"data-lightbox-src": fullSrc,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) setImage?.(image);
+			},
+			...props
+		})
+	});
+}
+function LightboxContent({ className, showCloseButton = true, closeOnContentClick = true, closeLabel = DEFAULT_CLOSE_LABEL, children, ...props }) {
+	const image = useContext(LightboxImageContext);
+	const contentChildren = children ?? (image ? /* @__PURE__ */ jsx("img", {
+		"data-slot": "lightbox-content-image",
+		src: image.fullSrc ?? image.src,
+		alt: image.alt ?? ""
+	}) : null);
+	const content = closeOnContentClick ? /* @__PURE__ */ jsx(LightboxClose, {
+		className: Lightbox_module_default.contentClose,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("div", {}),
+		children: contentChildren
+	}) : contentChildren;
+	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(LightboxBackdrop, {}), /* @__PURE__ */ jsxs(LightboxViewport, { children: [showCloseButton ? /* @__PURE__ */ jsx(LightboxCloseButton, { "aria-label": closeLabel }) : null, /* @__PURE__ */ jsx(LightboxPopup, {
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(LightboxFrame, { children: content })
+	})] })] });
+}
+function LightboxGallery({ selector = "img", rootRef, rootSelector, className, closeLabel, showCloseButton, closeOnContentClick }) {
+	const [open, setOpen] = useState(false);
+	const [image, setImage] = useState(null);
+	useEffect(() => {
+		const rootNode = getGalleryRoot(rootRef, rootSelector);
+		if (!rootNode) return;
+		const handleOpen = (target) => {
+			const nextImage = getGalleryImage(target, selector);
+			if (!nextImage) return false;
+			setImage(nextImage);
+			setOpen(true);
+			return true;
+		};
+		const handleClick = (event) => {
+			handleOpen(event.target);
+		};
+		const handleKeyDown = (event) => {
+			if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.key !== "Enter" && event.key !== " ") return;
+			if (handleOpen(event.target)) event.preventDefault();
+		};
+		rootNode.addEventListener("click", handleClick);
+		rootNode.addEventListener("keydown", handleKeyDown);
+		return () => {
+			rootNode.removeEventListener("click", handleClick);
+			rootNode.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		rootRef,
+		rootSelector,
+		selector
+	]);
+	return /* @__PURE__ */ jsx(Lightbox, {
+		open,
+		onOpenChange: setOpen,
+		onOpenChangeComplete: (nextOpen) => {
+			if (!nextOpen) setImage(null);
+		},
+		children: /* @__PURE__ */ jsx(LightboxContent, {
+			className,
+			closeLabel,
+			showCloseButton,
+			closeOnContentClick,
+			children: image ? /* @__PURE__ */ jsx("img", {
+				"data-slot": "lightbox-content-image",
+				src: image.src,
+				alt: image.alt ?? ""
+			}) : null
+		})
+	});
+}
+//#endregion
+export { Lightbox, LightboxBackdrop, LightboxClose, LightboxCloseButton, LightboxContent, LightboxFrame, LightboxGallery, LightboxImage, LightboxPopup, LightboxPortal, LightboxTrigger, LightboxViewport, createLightboxHandle };

package/dist/components/Lightbox/Lightbox.module.cjs

@@ -0,0 +1,14 @@
+import './Lightbox.css';
+//#region src/components/Lightbox/Lightbox.module.css
+var Lightbox_module_default = {
+	"backdrop": "LTYCWG_backdrop",
+	"closeButton": "LTYCWG_closeButton",
+	"contentClose": "LTYCWG_contentClose",
+	"frame": "LTYCWG_frame",
+	"lightbox-image-enter": "LTYCWG_lightbox-image-enter",
+	"popup": "LTYCWG_popup",
+	"trigger": "LTYCWG_trigger",
+	"viewport": "LTYCWG_viewport"
+};
+//#endregion
+exports.default = Lightbox_module_default;

package/dist/components/Lightbox/Lightbox.module.js

@@ -0,0 +1,14 @@
+import './Lightbox.css';
+//#region src/components/Lightbox/Lightbox.module.css
+var Lightbox_module_default = {
+	"backdrop": "LTYCWG_backdrop",
+	"closeButton": "LTYCWG_closeButton",
+	"contentClose": "LTYCWG_contentClose",
+	"frame": "LTYCWG_frame",
+	"lightbox-image-enter": "LTYCWG_lightbox-image-enter",
+	"popup": "LTYCWG_popup",
+	"trigger": "LTYCWG_trigger",
+	"viewport": "LTYCWG_viewport"
+};
+//#endregion
+export { Lightbox_module_default as default };