@moduix/react 2.2.0 → 2.2.5

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

@@ -1,73 +1,46 @@
-import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps, RefObject } from "react";
-import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
-
-//#region src/components/lightbox/Lightbox.d.ts
+import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/react/dialog';
+import type { ComponentProps, RefObject } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal';
 type LightboxImageSelectDetails = {
-  alt?: string;
-  element: HTMLImageElement;
-  src: string;
+    alt?: string;
+    element: HTMLImageElement;
+    src: string;
 };
 type LightboxImageProps = ComponentProps<'img'> & {
-  closeOnClick?: boolean;
+    closeOnClick?: boolean;
 };
-type LightboxRootProps = ComponentProps<typeof Dialog.Root> & OverlayPortalProps;
-type LightboxRootProviderProps = ComponentProps<typeof Dialog.RootProvider> & OverlayPortalProps;
+type LightboxRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPortalProps;
+type LightboxRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
 type LightboxBindProps = {
-  onImageSelect: (details: LightboxImageSelectDetails) => void;
-  selector?: string;
-  rootRef?: RefObject<HTMLElement | null>;
-  rootSelector?: string;
+    onImageSelect: (details: LightboxImageSelectDetails) => void;
+    selector: string;
+    rootRef?: RefObject<HTMLElement | null>;
+    rootSelector?: string;
 };
-declare function LightboxRoot({
-  portalled,
-  portalRef,
-  ...props
-}: LightboxRootProps): import("react").JSX.Element;
-declare function LightboxRootProvider({
-  portalled,
-  portalRef,
-  ...props
-}: LightboxRootProviderProps): import("react").JSX.Element;
+declare function LightboxRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: LightboxRootProps): import("react").JSX.Element;
+declare function LightboxRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: LightboxRootProviderProps): import("react").JSX.Element;
 declare const LightboxImage: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-declare const LightboxGallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare function LightboxHeader({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function LightboxBody({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function LightboxFooter({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function LightboxBind({
-  onImageSelect,
-  selector,
-  rootRef,
-  rootSelector
-}: LightboxBindProps): null;
+declare const LightboxGallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+declare function LightboxBind({ onImageSelect, selector, rootRef, rootSelector }: LightboxBindProps): null;
 declare const Lightbox: typeof LightboxRoot & {
-  Root: typeof LightboxRoot;
-  RootProvider: typeof LightboxRootProvider;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Backdrop: import("react").ForwardRefExoticComponent<Omit<Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Positioner: import("react").ForwardRefExoticComponent<Omit<Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Title: import("react").ForwardRefExoticComponent<Omit<Dialog.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-  Description: import("react").ForwardRefExoticComponent<Omit<Dialog.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Header: typeof LightboxHeader;
-  Body: typeof LightboxBody;
-  Footer: typeof LightboxFooter;
-  Image: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-  Gallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Bind: typeof LightboxBind;
-  useLightbox: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
-  useLightboxContext: () => import("@ark-ui/react/dialog").UseDialogContext;
+    Root: typeof LightboxRoot;
+    RootProvider: typeof LightboxRootProvider;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CloseTrigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Image: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    Gallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Bind: typeof LightboxBind;
+    useLightbox: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
+    useLightboxContext: () => import("@ark-ui/react/dialog").UseDialogContext;
 };
-//#endregion
-export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog as useLightbox, useDialogContext as useLightboxContext, };
+export type { LightboxBindProps, LightboxImageSelectDetails };

package/dist/components/lightbox/Lightbox.js

@@ -1,221 +1,234 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { CloseButton } from "../close-button/CloseButton.js";
-import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
-import Lightbox_module_default from "./Lightbox.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
-//#region src/components/lightbox/Lightbox.tsx
-const DEFAULT_CLOSE_LABEL = "Close image";
-const preloadedImageSources = /* @__PURE__ */ new Set();
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+import Lightbox_module from "./Lightbox.module.js";
+const DEFAULT_CLOSE_LABEL = 'Close image';
 function preloadImage(src) {
-	if (!src || typeof Image === "undefined" || preloadedImageSources.has(src)) return;
-	preloadedImageSources.add(src);
-	const image = new Image();
-	image.src = src;
+    if (!src || "u" < typeof Image) return;
+    const image = new Image();
+    image.src = src;
 }
 function resolveImage(target, selector, rootNode) {
-	if (!(target instanceof Element)) return null;
-	const matchedNode = target.closest(selector);
-	if (!matchedNode || !rootNode.contains(matchedNode)) return null;
-	const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector("img");
-	if (!(imageNode instanceof HTMLImageElement)) return null;
-	const src = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
-	if (!src) return null;
-	return {
-		src,
-		alt: imageNode.alt || void 0,
-		element: imageNode
-	};
+    if (!(target instanceof Element)) return null;
+    const matchedNode = target.closest(selector);
+    if (!matchedNode || !rootNode.contains(matchedNode)) return null;
+    const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector('img');
+    if (!(imageNode instanceof HTMLImageElement)) return null;
+    const src = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
+    if (!src) return null;
+    return {
+        src,
+        alt: imageNode.alt || void 0,
+        element: imageNode
+    };
 }
-function LightboxRoot({ portalled, portalRef, ...props }) {
-	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
-		portalled,
-		portalRef,
-		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
-	});
+function LightboxRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.Root, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
 }
-function LightboxRootProvider({ portalled, portalRef, ...props }) {
-	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
-		portalled,
-		portalRef,
-		children: /* @__PURE__ */ jsx(Dialog.RootProvider, { ...props })
-	});
+function LightboxRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.RootProvider, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
 }
-const LightboxTrigger = forwardRef(function LightboxTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
-		ref,
-		"data-slot": "lightbox-trigger",
-		className: clsx(Lightbox_module_default.trigger, normalizeClassName(className)),
-		...props
-	});
+const Lightbox_LightboxTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ref: ref,
+        "data-slot": "lightbox-trigger",
+        className: clsx(Lightbox_module.trigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const LightboxBackdrop = forwardRef(function LightboxBackdrop({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Backdrop, {
-		ref,
-		"data-slot": "lightbox-backdrop",
-		className: clsx(Lightbox_module_default.backdrop, normalizeClassName(className)),
-		...props
-	}) });
+const Lightbox_LightboxBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
+            ref: ref,
+            "data-slot": "lightbox-backdrop",
+            className: clsx(Lightbox_module.backdrop, normalizeClassName(className)),
+            ...props
+        })
+    });
 });
-const LightboxPositioner = forwardRef(function LightboxPositioner({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Positioner, {
-		ref,
-		"data-slot": "lightbox-positioner",
-		className: clsx(Lightbox_module_default.positioner, normalizeClassName(className)),
-		...props
-	}) });
+const Lightbox_LightboxPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Positioner, {
+            ref: ref,
+            "data-slot": "lightbox-positioner",
+            className: clsx(Lightbox_module.positioner, normalizeClassName(className)),
+            ...props
+        })
+    });
 });
-const LightboxContent = forwardRef(function LightboxContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Content, {
-		ref,
-		"data-slot": "lightbox-content",
-		className: clsx(Lightbox_module_default.content, normalizeClassName(className)),
-		...props
-	});
+const Lightbox_LightboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Content, {
+        ref: ref,
+        "data-slot": "lightbox-content",
+        className: clsx(Lightbox_module.content, normalizeClassName(className)),
+        ...props
+    });
 });
-const LightboxTitle = forwardRef(function LightboxTitle({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Title, {
-		ref,
-		"data-slot": "lightbox-title",
-		className: clsx(Lightbox_module_default.title, normalizeClassName(className)),
-		...props
-	});
+const Lightbox_LightboxTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Title, {
+        ref: ref,
+        "data-slot": "lightbox-title",
+        className: clsx(Lightbox_module.title, normalizeClassName(className)),
+        ...props
+    });
 });
-const LightboxDescription = forwardRef(function LightboxDescription({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Description, {
-		ref,
-		"data-slot": "lightbox-description",
-		className: clsx(Lightbox_module_default.description, normalizeClassName(className)),
-		...props
-	});
+const Lightbox_LightboxDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        ref: ref,
+        "data-slot": "lightbox-description",
+        className: clsx(Lightbox_module.description, normalizeClassName(className)),
+        ...props
+    });
 });
-const LightboxCloseTrigger = forwardRef(function LightboxCloseTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		ref,
-		"data-slot": "lightbox-close-trigger",
-		className: normalizeClassName(className),
-		...props
-	});
+const Lightbox_LightboxCloseTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        ref: ref,
+        "data-slot": "lightbox-close-trigger",
+        className: normalizeClassName(className),
+        ...props
+    });
 });
-const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
-	const dialog = useDialogContext$1();
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		asChild: true,
-		...props,
-		children: /* @__PURE__ */ jsx(CloseButton.Root, {
-			ref,
-			"data-slot": "lightbox-close-icon",
-			"data-state": dialog.open ? "open" : "closed",
-			"aria-label": ariaLabel,
-			className: clsx(Lightbox_module_default.closeIcon, normalizeClassName(className)),
-			children
-		})
-	});
+const Lightbox_LightboxCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
+    const dialog = useDialogContext();
+    return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        asChild: true,
+        ...props,
+        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+            ref: ref,
+            "data-slot": "lightbox-close-icon",
+            "data-state": dialog.open ? 'open' : 'closed',
+            "aria-label": ariaLabel,
+            className: clsx(Lightbox_module.closeIcon, normalizeClassName(className)),
+            children: children
+        })
+    });
 });
-const LightboxImage = forwardRef(function LightboxImage({ className, closeOnClick = false, onClick, ...props }, ref) {
-	const dialog = useDialogContext$1();
-	const handleClick = (event) => {
-		onClick?.(event);
-		if (closeOnClick && !event.defaultPrevented) dialog.setOpen(false);
-	};
-	return /* @__PURE__ */ jsx("img", {
-		ref,
-		"data-slot": "lightbox-image",
-		"data-close-on-click": closeOnClick ? "" : void 0,
-		className: clsx(Lightbox_module_default.image, normalizeClassName(className)),
-		onClick: handleClick,
-		...props
-	});
+const Lightbox_LightboxImage = /*#__PURE__*/ forwardRef(function({ className, closeOnClick = false, onClick, ...props }, ref) {
+    const dialog = useDialogContext();
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (closeOnClick && !event.defaultPrevented) dialog.setOpen(false);
+    };
+    return /*#__PURE__*/ jsx("img", {
+        ref: ref,
+        "data-slot": "lightbox-image",
+        "data-close-on-click": closeOnClick ? '' : void 0,
+        className: clsx(Lightbox_module.image, normalizeClassName(className)),
+        onClick: handleClick,
+        ...props
+    });
 });
-const LightboxGallery = forwardRef(function LightboxGallery({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		"data-slot": "lightbox-gallery",
-		className: clsx(Lightbox_module_default.gallery, normalizeClassName(className)),
-		...props
-	});
+const Lightbox_LightboxGallery = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "lightbox-gallery",
+        className: clsx(Lightbox_module.gallery, normalizeClassName(className)),
+        ...props
+    });
 });
-function LightboxHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "lightbox-header",
-		className: clsx(Lightbox_module_default.header, className),
-		...props
-	});
-}
-function LightboxBody({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "lightbox-body",
-		className: clsx(Lightbox_module_default.body, className),
-		...props
-	});
-}
-function LightboxFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "lightbox-footer",
-		className: clsx(Lightbox_module_default.footer, className),
-		...props
-	});
-}
-function LightboxBind({ onImageSelect, selector = "img", rootRef, rootSelector }) {
-	const { setOpen } = useDialogContext$1();
-	useEffect(() => {
-		const rootNode = rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
-		if (!rootNode) return;
-		const handleClick = (event) => {
-			const nextImage = resolveImage(event.target, selector, rootNode);
-			if (!nextImage) return;
-			onImageSelect(nextImage);
-			setOpen(true);
-		};
-		const preloadFromTarget = (target) => {
-			const nextImage = resolveImage(target, selector, rootNode);
-			if (!nextImage) return;
-			preloadImage(nextImage.src);
-		};
-		const handlePointerEnter = (event) => {
-			preloadFromTarget(event.target);
-		};
-		const handleFocusIn = (event) => {
-			preloadFromTarget(event.target);
-		};
-		rootNode.addEventListener("click", handleClick);
-		rootNode.addEventListener("pointerenter", handlePointerEnter, true);
-		rootNode.addEventListener("focusin", handleFocusIn);
-		return () => {
-			rootNode.removeEventListener("click", handleClick);
-			rootNode.removeEventListener("pointerenter", handlePointerEnter, true);
-			rootNode.removeEventListener("focusin", handleFocusIn);
-		};
-	}, [
-		onImageSelect,
-		rootRef,
-		rootSelector,
-		selector,
-		setOpen
-	]);
-	return null;
+const Lightbox_LightboxHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "lightbox-header",
+        className: clsx(Lightbox_module.header, normalizeClassName(className)),
+        ...props
+    });
+});
+const Lightbox_LightboxBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "lightbox-body",
+        className: clsx(Lightbox_module.body, normalizeClassName(className)),
+        ...props
+    });
+});
+const Lightbox_LightboxFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "lightbox-footer",
+        className: clsx(Lightbox_module.footer, normalizeClassName(className)),
+        ...props
+    });
+});
+function LightboxBind({ onImageSelect, selector, rootRef, rootSelector }) {
+    const { setOpen } = useDialogContext();
+    useEffect(()=>{
+        const rootNode = rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
+        if (!rootNode) return;
+        const handleClick = (event)=>{
+            const nextImage = resolveImage(event.target, selector, rootNode);
+            if (!nextImage) return;
+            onImageSelect(nextImage);
+            setOpen(true);
+        };
+        const preloadFromTarget = (target)=>{
+            const nextImage = resolveImage(target, selector, rootNode);
+            if (!nextImage) return;
+            preloadImage(nextImage.src);
+        };
+        const handlePointerEnter = (event)=>{
+            preloadFromTarget(event.target);
+        };
+        const handleFocusIn = (event)=>{
+            preloadFromTarget(event.target);
+        };
+        rootNode.addEventListener('click', handleClick);
+        rootNode.addEventListener('pointerenter', handlePointerEnter, true);
+        rootNode.addEventListener('focusin', handleFocusIn);
+        return ()=>{
+            rootNode.removeEventListener('click', handleClick);
+            rootNode.removeEventListener('pointerenter', handlePointerEnter, true);
+            rootNode.removeEventListener('focusin', handleFocusIn);
+        };
+    }, [
+        onImageSelect,
+        rootRef,
+        rootSelector,
+        selector,
+        setOpen
+    ]);
+    return null;
 }
 const Lightbox = Object.assign(LightboxRoot, {
-	Root: LightboxRoot,
-	RootProvider: LightboxRootProvider,
-	Trigger: LightboxTrigger,
-	Backdrop: LightboxBackdrop,
-	Positioner: LightboxPositioner,
-	Content: LightboxContent,
-	Title: LightboxTitle,
-	Description: LightboxDescription,
-	CloseTrigger: LightboxCloseTrigger,
-	CloseIcon: LightboxCloseIcon,
-	Header: LightboxHeader,
-	Body: LightboxBody,
-	Footer: LightboxFooter,
-	Image: LightboxImage,
-	Gallery: LightboxGallery,
-	Bind: LightboxBind,
-	useLightbox: useDialog$1,
-	useLightboxContext: useDialogContext$1
+    Root: LightboxRoot,
+    RootProvider: LightboxRootProvider,
+    Trigger: Lightbox_LightboxTrigger,
+    Backdrop: Lightbox_LightboxBackdrop,
+    Positioner: Lightbox_LightboxPositioner,
+    Content: Lightbox_LightboxContent,
+    Title: Lightbox_LightboxTitle,
+    Description: Lightbox_LightboxDescription,
+    CloseTrigger: Lightbox_LightboxCloseTrigger,
+    CloseIcon: Lightbox_LightboxCloseIcon,
+    Header: Lightbox_LightboxHeader,
+    Body: Lightbox_LightboxBody,
+    Footer: Lightbox_LightboxFooter,
+    Image: Lightbox_LightboxImage,
+    Gallery: Lightbox_LightboxGallery,
+    Bind: LightboxBind,
+    useLightbox: useDialog,
+    useLightboxContext: useDialogContext
 });
-//#endregion
-export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };
+export { Lightbox, LightboxBind, Lightbox_LightboxGallery as LightboxGallery, Lightbox_LightboxImage as LightboxImage, useDialog as useLightbox, useDialogContext as useLightboxContext };

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

@@ -1,22 +1,24 @@
-import './Lightbox.css';
-//#region src/components/lightbox/Lightbox.module.css
-var Lightbox_module_default = {
-	"backdrop": "BCq4HG_backdrop",
-	"body": "BCq4HG_body",
-	"closeIcon": "BCq4HG_closeIcon",
-	"content": "BCq4HG_content",
-	"description": "BCq4HG_description",
-	"footer": "BCq4HG_footer",
-	"gallery": "BCq4HG_gallery",
-	"header": "BCq4HG_header",
-	"image": "BCq4HG_image",
-	"lightbox-backdrop-in": "BCq4HG_lightbox-backdrop-in",
-	"lightbox-backdrop-out": "BCq4HG_lightbox-backdrop-out",
-	"lightbox-content-in": "BCq4HG_lightbox-content-in",
-	"lightbox-content-out": "BCq4HG_lightbox-content-out",
-	"positioner": "BCq4HG_positioner",
-	"title": "BCq4HG_title",
-	"trigger": "BCq4HG_trigger"
+import "./Lightbox_module.css";
+const Lightbox_module = {
+    trigger: "trigger-CDcAJQ",
+    backdrop: "backdrop-nZRWDl",
+    "lightbox-backdrop-in": "lightbox-backdrop-in-y5UjxI",
+    lightboxBackdropIn: "lightbox-backdrop-in-y5UjxI",
+    "lightbox-backdrop-out": "lightbox-backdrop-out-LsC2c8",
+    lightboxBackdropOut: "lightbox-backdrop-out-LsC2c8",
+    positioner: "positioner-T47Xit",
+    content: "content-N4c6Zm",
+    "lightbox-content-in": "lightbox-content-in-udHk7o",
+    lightboxContentIn: "lightbox-content-in-udHk7o",
+    "lightbox-content-out": "lightbox-content-out-ZyLTc7",
+    lightboxContentOut: "lightbox-content-out-ZyLTc7",
+    title: "title-nSprhy",
+    description: "description-S7ZYRT",
+    header: "header-Lx40fF",
+    body: "body-M8rV1J",
+    footer: "footer-ZmOqXP",
+    image: "image-P32jHl",
+    gallery: "gallery-d_JY9F",
+    closeIcon: "closeIcon-Xv0OVe"
 };
-//#endregion
-export { Lightbox_module_default as default };
+export default Lightbox_module;