moduix 0.11.0 → 0.11.2

package/dist/components/InputGroup/InputGroup.d.ts

@@ -1,10 +1,14 @@
-import { ComponentProps } from 'react';
-import { Input } from '../Input';
-declare const InputGroup: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
-    size?: ComponentProps<typeof Input>["size"];
-}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const InputGroupInput: import('react').ForwardRefExoticComponent<Omit<Omit<import('../Input').InputProps, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
-declare const InputGroupAddon: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-declare const InputGroupText: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-declare const InputGroupButton: import('react').ForwardRefExoticComponent<Omit<Omit<import('../Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { InputGroup, InputGroupInput, InputGroupAddon, InputGroupText, InputGroupButton };
+import { ButtonProps } from "../Button/Button.js";
+import { Input, InputProps } from "../Input/Input.js";
+import { ComponentProps } from "react";
+
+//#region src/components/InputGroup/InputGroup.d.ts
+declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  size?: ComponentProps<typeof Input>["size"];
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const InputGroupInput: import("react").ForwardRefExoticComponent<Omit<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const InputGroupAddon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const InputGroupText: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const InputGroupButton: import("react").ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText };

package/dist/components/InputGroup/InputGroup.js

@@ -0,0 +1,73 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import { Button } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
+import InputGroup_module_default from "./InputGroup.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+//#region src/components/InputGroup/InputGroup.tsx
+const InputGroupSizeContext = createContext("md");
+const InputGroup = forwardRef(function InputGroup({ children, className, onMouseDown, size = "md", ...props }, ref) {
+	const handleMouseDown = (event) => {
+		onMouseDown?.(event);
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		if (target.closest("button, a, input, select, textarea, [role=\"button\"], [role=\"link\"]")) return;
+		const input = event.currentTarget.querySelector("[data-slot=\"input-group-input\"]");
+		if (!(input instanceof HTMLInputElement) || input.disabled || input.readOnly) return;
+		input.focus();
+	};
+	return /* @__PURE__ */ jsx(InputGroupSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "input-group-root",
+			"data-size": size,
+			className: clsx(InputGroup_module_default.root, className),
+			onMouseDown: handleMouseDown,
+			...props,
+			children
+		})
+	});
+});
+const InputGroupInput = forwardRef(function InputGroupInput({ className, size, ...props }, ref) {
+	const groupSize = useContext(InputGroupSizeContext);
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		"data-slot": "input-group-input",
+		className: mergeClassName(className, InputGroup_module_default.input),
+		size: size ?? groupSize,
+		...props
+	});
+});
+const InputGroupAddon = forwardRef(function InputGroupAddon({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "input-group-addon",
+		className: clsx(InputGroup_module_default.addon, className),
+		...props
+	});
+});
+const InputGroupText = forwardRef(function InputGroupText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "input-group-text",
+		className: clsx(InputGroup_module_default.text, className),
+		...props
+	});
+});
+const InputGroupButton = forwardRef(function InputGroupButton({ className, variant = "ghost", size, type = "button", ...props }, ref) {
+	const groupSize = useContext(InputGroupSizeContext);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		"data-slot": "input-group-button",
+		className: mergeClassName(className, InputGroup_module_default.button),
+		variant,
+		size: size ?? groupSize,
+		type,
+		...props
+	});
+});
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText };

package/dist/components/InputGroup/InputGroup.module.js

@@ -0,0 +1,11 @@
+import './InputGroup.css';
+//#region src/components/InputGroup/InputGroup.module.css
+var InputGroup_module_default = {
+	"addon": "jSOrbG_addon",
+	"button": "jSOrbG_button",
+	"input": "jSOrbG_input",
+	"root": "jSOrbG_root",
+	"text": "jSOrbG_text"
+};
+//#endregion
+export { InputGroup_module_default as default };

package/dist/components/InputGroup/index.d.ts

@@ -1 +1 @@
-export { InputGroup, InputGroupInput, InputGroupAddon, InputGroupText, InputGroupButton, } from './InputGroup';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "./InputGroup.js";

package/dist/components/Kbd/Kbd.css

@@ -0,0 +1,49 @@
+@layer ui.components {
+  .qUSm7q_root {
+    box-sizing: border-box;
+    min-width: var(--kbd-min-width, var(--kbd-height, 1.5rem));
+    height: var(--kbd-height, 1.5rem);
+    border: var(--kbd-border-width, var(--border-width-sm)) solid
+      var(--kbd-border-color, var(--color-border));
+    border-radius: var(--kbd-radius, var(--radius-sm));
+    max-width: 100%;
+    padding-block: var(--kbd-padding-y, 0);
+    padding-inline: var(--kbd-padding-x, .4375rem);
+    background-color: var(--kbd-bg, var(--color-muted));
+    box-shadow: var(--kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--color-foreground) 12%, transparent));
+    color: var(--kbd-color, var(--color-foreground));
+    font-family: var(--kbd-font-family, var(--font-mono));
+    font-size: var(--kbd-font-size, var(--text-xs));
+    font-weight: var(--kbd-font-weight, var(--weight-medium));
+    line-height: var(--kbd-line-height, var(--line-height-text-xs));
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    user-select: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .qUSm7q_group {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--kbd-group-gap, .25rem);
+    max-width: 100%;
+    box-shadow: none;
+    color: var(--kbd-group-separator-color, var(--color-muted-foreground));
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    vertical-align: middle;
+    white-space: nowrap;
+    background: none;
+    border: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+}

package/dist/components/Kbd/Kbd.d.ts

@@ -1,4 +1,13 @@
-import { ComponentPropsWithoutRef } from 'react';
-declare function Kbd({ className, ...props }: ComponentPropsWithoutRef<'kbd'>): import("react").JSX.Element;
-declare function KbdGroup({ className, ...props }: ComponentPropsWithoutRef<'kbd'>): import("react").JSX.Element;
-export { Kbd, KbdGroup };
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/components/Kbd/Kbd.d.ts
+declare function Kbd({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'kbd'>): import("react").JSX.Element;
+declare function KbdGroup({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'kbd'>): import("react").JSX.Element;
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,20 @@
+import Kbd_module_default from "./Kbd.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/Kbd/Kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-root",
+		className: clsx$1(Kbd_module_default.root, className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: clsx$1(Kbd_module_default.group, className),
+		...props
+	});
+}
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/Kbd/Kbd.module.js

@@ -0,0 +1,8 @@
+import './Kbd.css';
+//#region src/components/Kbd/Kbd.module.css
+var Kbd_module_default = {
+	"group": "qUSm7q_group",
+	"root": "qUSm7q_root"
+};
+//#endregion
+export { Kbd_module_default as default };

package/dist/components/Kbd/index.d.ts

@@ -1 +1 @@
-export * from './Kbd';
+import { Kbd, KbdGroup } from "./Kbd.js";

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 };