@moduix/react 2.1.0 → 2.2.4

package/dist/components/input-group/InputGroup.js

@@ -1,76 +1,74 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { Button } from "../button/Button.js";
-import { Input } from "../input/Input.js";
-import InputGroup_module_default from "./InputGroup.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/input-group/InputGroup.tsx
-const InputGroupSizeContext = createContext("md");
-const InputGroupRoot = forwardRef(function InputGroupRoot({ children, className, size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(InputGroupSizeContext.Provider, {
-		value: size,
-		children: /* @__PURE__ */ jsx(ark.div, {
-			ref,
-			"data-scope": "input-group",
-			"data-part": "root",
-			"data-slot": "input-group-root",
-			"data-size": size,
-			className: clsx(InputGroup_module_default.root, normalizeClassName(className)),
-			...props,
-			children
-		})
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { Button } from "../button/index.js";
+import { Input } from "../input/index.js";
+import InputGroup_module from "./InputGroup.module.js";
+const InputGroupSizeContext = /*#__PURE__*/ createContext('md');
+const InputGroup_InputGroupRoot = /*#__PURE__*/ forwardRef(function({ children, className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(InputGroupSizeContext.Provider, {
+        value: size,
+        children: /*#__PURE__*/ jsx(ark.div, {
+            ref: ref,
+            "data-scope": "input-group",
+            "data-part": "root",
+            "data-slot": "input-group-root",
+            "data-size": size,
+            className: clsx(InputGroup_module.root, normalizeClassName(className)),
+            ...props,
+            children: 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: clsx(InputGroup_module_default.input, normalizeClassName(className)),
-		size: size ?? groupSize,
-		...props
-	});
+const InputGroup_InputGroupInput = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    const groupSize = useContext(InputGroupSizeContext);
+    return /*#__PURE__*/ jsx(Input, {
+        ref: ref,
+        className: clsx(InputGroup_module.input, normalizeClassName(className)),
+        size: size ?? groupSize,
+        ...props
+    });
 });
-const InputGroupAddon = forwardRef(function InputGroupAddon({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.span, {
-		ref,
-		"data-scope": "input-group",
-		"data-part": "addon",
-		"data-slot": "input-group-addon",
-		className: clsx(InputGroup_module_default.addon, normalizeClassName(className)),
-		...props
-	});
+const InputGroup_InputGroupAddon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "input-group",
+        "data-part": "addon",
+        "data-slot": "input-group-addon",
+        className: clsx(InputGroup_module.addon, normalizeClassName(className)),
+        ...props
+    });
 });
-const InputGroupText = forwardRef(function InputGroupText({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.span, {
-		ref,
-		"data-scope": "input-group",
-		"data-part": "text",
-		"data-slot": "input-group-text",
-		className: clsx(InputGroup_module_default.text, normalizeClassName(className)),
-		...props
-	});
+const InputGroup_InputGroupText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "input-group",
+        "data-part": "text",
+        "data-slot": "input-group-text",
+        className: clsx(InputGroup_module.text, normalizeClassName(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: clsx(InputGroup_module_default.button, normalizeClassName(className)),
-		variant,
-		size: size ?? groupSize,
-		type,
-		...props
-	});
+const InputGroup_InputGroupButton = /*#__PURE__*/ forwardRef(function({ className, variant = 'ghost', size, type = 'button', ...props }, ref) {
+    const groupSize = useContext(InputGroupSizeContext);
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        "data-slot": "input-group-button",
+        className: clsx(InputGroup_module.button, normalizeClassName(className)),
+        variant: variant,
+        size: size ?? groupSize,
+        type: type,
+        ...props
+    });
 });
-const InputGroup = Object.assign(InputGroupRoot, {
-	Root: InputGroupRoot,
-	Input: InputGroupInput,
-	Addon: InputGroupAddon,
-	Text: InputGroupText,
-	Button: InputGroupButton
+const InputGroup = Object.assign(InputGroup_InputGroupRoot, {
+    Root: InputGroup_InputGroupRoot,
+    Input: InputGroup_InputGroupInput,
+    Addon: InputGroup_InputGroupAddon,
+    Text: InputGroup_InputGroupText,
+    Button: InputGroup_InputGroupButton
 });
-//#endregion
 export { InputGroup };

package/dist/components/input-group/InputGroup.module.js

@@ -1,11 +1,9 @@
-import './InputGroup.css';
-//#region src/components/input-group/InputGroup.module.css
-var InputGroup_module_default = {
-	"addon": "n0dHIa_addon",
-	"button": "n0dHIa_button",
-	"input": "n0dHIa_input",
-	"root": "n0dHIa_root",
-	"text": "n0dHIa_text"
+import "./InputGroup_module.css";
+const InputGroup_module = {
+    root: "root-d8xZ48",
+    input: "input-wp70LY",
+    addon: "addon-fzXIzw",
+    text: "text-Vdvy5j",
+    button: "button-LVoA_q"
 };
-//#endregion
-export { InputGroup_module_default as default };
+export default InputGroup_module;

package/dist/components/input-group/InputGroup_module.css

@@ -0,0 +1,162 @@
+@layer moduix.components {
+  .root-d8xZ48 {
+    box-sizing: border-box;
+    width: var(--moduix-input-group-width, 100%);
+    max-width: var(--moduix-input-group-max-width, none);
+    min-height: var(--moduix-input-group-height, var(--moduix-input-group-height-md, var(--moduix-size-md)));
+    border: var(--moduix-input-group-border-width, var(--moduix-border-width-sm))
+      var(--moduix-input-group-border-style, solid)
+      var(--moduix-input-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-input-group-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-input-group-bg, var(--moduix-color-background));
+    color: var(--moduix-input-group-color, var(--moduix-color-foreground));
+    outline: var(--moduix-input-group-focus-ring-width, var(--moduix-input-group-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+      solid transparent;
+    outline-offset: var(--moduix-input-group-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    transition: border-color var(--moduix-input-group-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-input-group-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-input-group-transition, var(--moduix-transition-default));
+    align-items: stretch;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .root-d8xZ48:focus-within {
+    outline-color: var(--moduix-input-group-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .root-d8xZ48:has([data-slot="input-root"][data-invalid], [data-slot="input-root"][aria-invalid="true"]) {
+    border-color: var(--moduix-input-group-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .root-d8xZ48:has([data-slot="input-root"][data-invalid], [data-slot="input-root"][aria-invalid="true"]):focus-within {
+    outline-color: var(--moduix-input-group-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .root-d8xZ48:has([data-slot="input-root"][data-disabled], [data-slot="input-root"]:disabled) {
+    opacity: var(--moduix-input-group-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .root-d8xZ48:has([data-slot="input-root"][data-readonly], [data-slot="input-root"]:read-only) {
+    border-color: var(--moduix-input-group-readonly-border-color, var(--moduix-input-group-border-color, var(--moduix-color-border)));
+    background-color: var(--moduix-input-group-readonly-bg, var(--moduix-input-group-bg, var(--moduix-color-background)));
+    color: var(--moduix-input-group-readonly-color, var(--moduix-input-group-color, var(--moduix-color-foreground)));
+  }
+
+  .root-d8xZ48[data-size="xs"] {
+    --moduix-input-group-height: var(--moduix-input-group-height-xs, var(--moduix-size-xs));
+    --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-xs, var(--moduix-spacing-2-5));
+    --moduix-input-group-font-size: var(--moduix-input-group-font-size-xs, var(--moduix-text-xs));
+    --moduix-input-group-line-height: var(--moduix-input-group-line-height-xs, var(--moduix-line-height-text-xs));
+    --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-xs, var(--moduix-spacing-2-5));
+    --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-xs, var(--moduix-spacing-0-5));
+  }
+
+  .root-d8xZ48[data-size="sm"] {
+    --moduix-input-group-height: var(--moduix-input-group-height-sm, var(--moduix-size-sm));
+    --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-sm, var(--moduix-spacing-3));
+    --moduix-input-group-font-size: var(--moduix-input-group-font-size-sm, var(--moduix-text-sm));
+    --moduix-input-group-line-height: var(--moduix-input-group-line-height-sm, var(--moduix-line-height-text-sm));
+    --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-sm, var(--moduix-spacing-3));
+    --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-sm, .3125rem);
+  }
+
+  .root-d8xZ48[data-size="md"] {
+    --moduix-input-group-height: var(--moduix-input-group-height-md, var(--moduix-size-md));
+    --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-md, var(--moduix-spacing-3-5));
+    --moduix-input-group-font-size: var(--moduix-input-group-font-size-md, var(--moduix-text-md));
+    --moduix-input-group-line-height: var(--moduix-input-group-line-height-md, var(--moduix-line-height-text-md));
+    --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-md, var(--moduix-spacing-3-5));
+    --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-md, var(--moduix-spacing-1));
+  }
+
+  .root-d8xZ48[data-size="lg"] {
+    --moduix-input-group-height: var(--moduix-input-group-height-lg, var(--moduix-size-lg));
+    --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-lg, var(--moduix-spacing-4));
+    --moduix-input-group-font-size: var(--moduix-input-group-font-size-lg, var(--moduix-text-lg));
+    --moduix-input-group-line-height: var(--moduix-input-group-line-height-lg, var(--moduix-line-height-text-lg));
+    --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-lg, var(--moduix-spacing-4));
+    --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-lg, var(--moduix-spacing-1));
+  }
+
+  .root-d8xZ48[data-size="xl"] {
+    --moduix-input-group-height: var(--moduix-input-group-height-xl, var(--moduix-size-xl));
+    --moduix-input-group-addon-padding-x: var(--moduix-input-group-addon-padding-x-xl, var(--moduix-spacing-4-5));
+    --moduix-input-group-font-size: var(--moduix-input-group-font-size-xl, var(--moduix-text-lg));
+    --moduix-input-group-line-height: var(--moduix-input-group-line-height-xl, var(--moduix-line-height-text-lg));
+    --moduix-input-group-input-padding-x: var(--moduix-input-group-input-padding-x-xl, var(--moduix-spacing-4-5));
+    --moduix-input-group-input-padding-y: var(--moduix-input-group-input-padding-y-xl, var(--moduix-spacing-2));
+  }
+
+  .input-wp70LY {
+    min-width: 0;
+    min-height: 0;
+    font-size: var(--moduix-input-group-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-input-group-line-height, var(--moduix-line-height-text-md));
+    padding-block: var(--moduix-input-group-input-padding-y, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-input-group-input-padding-x, var(--moduix-spacing-3-5));
+    background-color: #0000;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    flex: auto;
+  }
+
+  .addon-fzXIzw, .text-Vdvy5j {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-input-group-addon-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    padding-inline: var(--moduix-input-group-addon-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-input-group-addon-bg, var(--moduix-color-muted));
+    color: var(--moduix-input-group-addon-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-input-group-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-input-group-line-height, var(--moduix-line-height-text-md));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  :is(.addon-fzXIzw, .text-Vdvy5j) > svg {
+    width: var(--moduix-input-group-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-input-group-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+  }
+
+  .addon-fzXIzw {
+    border-inline: var(--moduix-input-group-separator-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-input-group-separator-color, var(--moduix-color-border));
+  }
+
+  .addon-fzXIzw:first-child {
+    border-inline-start: 0;
+  }
+
+  .addon-fzXIzw:last-child {
+    border-inline-end: 0;
+  }
+
+  .text-Vdvy5j {
+    background-color: #0000;
+  }
+
+  .button-LVoA_q {
+    height: auto;
+    min-height: auto;
+    padding-block: 0;
+    padding-inline: var(--moduix-input-group-addon-padding-x, var(--moduix-spacing-3-5));
+    color: var(--moduix-input-group-button-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-input-group-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-input-group-line-height, var(--moduix-line-height-text-sm));
+    border: 0;
+    border-radius: 0;
+    align-self: stretch;
+  }
+
+  .button-LVoA_q:focus-visible {
+    outline-offset: var(--moduix-input-group-button-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+}
+

package/dist/components/input-group/index.d.ts

@@ -1,2 +1 @@
-import { InputGroup } from "./InputGroup.js";
-export { InputGroup };
+export { InputGroup } from './InputGroup.js';

package/dist/components/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup } from "./InputGroup.js";

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

@@ -1,7 +1,5 @@
-//#region src/components/kbd/Kbd.d.ts
 declare const Kbd: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
-  Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
 };
-//#endregion
-export { Kbd };
+export { Kbd };

package/dist/components/kbd/Kbd.js

@@ -1,33 +1,31 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Kbd_module_default from "./Kbd.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/kbd/Kbd.tsx
-const KbdRoot = forwardRef(function KbdRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.kbd, {
-		ref,
-		"data-scope": "kbd",
-		"data-part": "root",
-		"data-slot": "kbd-root",
-		className: clsx(Kbd_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Kbd_module from "./Kbd.module.js";
+const Kbd_KbdRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.kbd, {
+        ref: ref,
+        "data-scope": "kbd",
+        "data-part": "root",
+        "data-slot": "kbd-root",
+        className: clsx(Kbd_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const KbdGroupPart = forwardRef(function KbdGroupPart({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.kbd, {
-		ref,
-		"data-scope": "kbd",
-		"data-part": "group",
-		"data-slot": "kbd-group",
-		className: clsx(Kbd_module_default.group, normalizeClassName(className)),
-		...props
-	});
+const Kbd_KbdGroupPart = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "kbd",
+        "data-part": "group",
+        "data-slot": "kbd-group",
+        className: clsx(Kbd_module.group, normalizeClassName(className)),
+        ...props
+    });
 });
-const Kbd = Object.assign(KbdRoot, {
-	Root: KbdRoot,
-	Group: KbdGroupPart
+const Kbd = Object.assign(Kbd_KbdRoot, {
+    Root: Kbd_KbdRoot,
+    Group: Kbd_KbdGroupPart
 });
-//#endregion
 export { Kbd };

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

@@ -1,8 +1,6 @@
-import './Kbd.css';
-//#region src/components/kbd/Kbd.module.css
-var Kbd_module_default = {
-	"group": "VpuRJG_group",
-	"root": "VpuRJG_root"
+import "./Kbd_module.css";
+const Kbd_module = {
+    root: "root-wOrSS2",
+    group: "group-EgI1Yb"
 };
-//#endregion
-export { Kbd_module_default as default };
+export default Kbd_module;

package/dist/components/kbd/Kbd_module.css

@@ -0,0 +1,46 @@
+@layer moduix.components {
+  .root-wOrSS2[data-scope="kbd"][data-part="root"] {
+    box-sizing: border-box;
+    min-width: var(--moduix-kbd-min-width, var(--moduix-kbd-height, var(--moduix-size-xs)));
+    max-width: 100%;
+    min-height: var(--moduix-kbd-height, var(--moduix-size-xs));
+    border: var(--moduix-kbd-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-kbd-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-kbd-radius, var(--moduix-radius-sm));
+    padding: var(--moduix-kbd-padding-y, 0) var(--moduix-kbd-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-kbd-bg, var(--moduix-color-muted));
+    box-shadow: var(--moduix-kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--moduix-color-foreground) 12%, transparent));
+    color: var(--moduix-kbd-color, var(--moduix-color-foreground));
+    font-family: var(--moduix-kbd-font-family, var(--moduix-font-mono)), monospace;
+    font-size: var(--moduix-kbd-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-kbd-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-kbd-line-height, var(--moduix-line-height-text-xs));
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    vertical-align: middle;
+    overflow-wrap: anywhere;
+    -webkit-user-select: none;
+    user-select: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .group-EgI1Yb[data-scope="kbd"][data-part="group"] {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--moduix-kbd-group-gap, var(--moduix-spacing-1));
+    max-width: 100%;
+    box-shadow: none;
+    color: var(--moduix-kbd-group-separator-color, var(--moduix-color-muted-foreground));
+    font: inherit;
+    vertical-align: middle;
+    background: none;
+    border: 0;
+    flex-wrap: wrap;
+    padding: 0;
+    display: inline-flex;
+  }
+}
+

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

@@ -0,0 +1 @@
+export * from './Kbd.js';

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export * from "./Kbd.js";

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

@@ -1,73 +1,49 @@
-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 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 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: 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;
 };
-//#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 };