@moduix/react 1.1.0 → 2.0.0

package/dist/components/hover-card/HoverCard.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { HoverCard } from "@ark-ui/react/hover-card";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/react/hover-card";
 
 //#region src/components/hover-card/HoverCard.d.ts
 type HoverCardRootProps = ComponentProps<typeof HoverCard.Root> & OverlayPortalProps;
@@ -23,6 +23,7 @@ declare const HoverCard$1: typeof HoverCardRoot & {
   Content: import("react").ForwardRefExoticComponent<Omit<HoverCard.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Arrow: import("react").ForwardRefExoticComponent<Omit<HoverCard.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ArrowTip: import("react").ForwardRefExoticComponent<Omit<HoverCard.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: HoverCard.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { HoverCard$1 as HoverCard };
+export { HoverCard$1 as HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/hover-card/HoverCard.js

@@ -1,10 +1,10 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import HoverCard_module_default from "./HoverCard.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { HoverCard } from "@ark-ui/react/hover-card";
+import { jsx } from "react/jsx-runtime";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/HoverCard.tsx
 function HoverCardRoot({ portalled, portalRef, ...props }) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -75,7 +75,8 @@ const HoverCard$1 = Object.assign(HoverCardRoot, {
 	Positioner: HoverCardPositioner,
 	Content: HoverCardContent,
 	Arrow: HoverCardArrow,
-	ArrowTip: HoverCardArrowTip
+	ArrowTip: HoverCardArrowTip,
+	Context: HoverCard.Context
 });
 //#endregion
-export { HoverCard$1 as HoverCard };
+export { HoverCard$1 as HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/hover-card/HoverCard.module.js

@@ -1,13 +1,13 @@
 import './HoverCard.css';
 //#region src/components/hover-card/HoverCard.module.css
 var HoverCard_module_default = {
-	"arrow": "a1hKKW_arrow",
-	"arrowTip": "a1hKKW_arrowTip",
-	"content": "a1hKKW_content",
-	"hover-card-enter": "a1hKKW_hover-card-enter",
-	"hover-card-exit": "a1hKKW_hover-card-exit",
-	"positioner": "a1hKKW_positioner",
-	"trigger": "a1hKKW_trigger"
+	"arrow": "_0VaKFG_arrow",
+	"arrowTip": "_0VaKFG_arrowTip",
+	"content": "_0VaKFG_content",
+	"hover-card-enter": "_0VaKFG_hover-card-enter",
+	"hover-card-exit": "_0VaKFG_hover-card-exit",
+	"positioner": "_0VaKFG_positioner",
+	"trigger": "_0VaKFG_trigger"
 };
 //#endregion
 export { HoverCard_module_default as default };

package/dist/components/hover-card/index.d.ts

@@ -1,2 +1,2 @@
-import { HoverCard } from "./HoverCard.js";
-export { HoverCard };
+import { HoverCard, useHoverCard, useHoverCardContext } from "./HoverCard.js";
+export { HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/image/Image.css

@@ -0,0 +1,7 @@
+@layer ui.components {
+  .gMmqtq_root {
+    box-sizing: border-box;
+    border-radius: var(--image-radius, var(--radius-md));
+    display: block;
+  }
+}

package/dist/components/image/Image.d.ts

@@ -0,0 +1,12 @@
+import { ImageProps, SourceProps } from "@unpic/react";
+
+//#region src/components/image/Image.d.ts
+type ImageSourceProps = SourceProps & {
+  'data-slot'?: string;
+};
+declare const Image$1: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+  Source: import("react").ForwardRefExoticComponent<ImageSourceProps & import("react").RefAttributes<HTMLSourceElement>>;
+};
+//#endregion
+export { Image$1 as Image };

package/dist/components/image/Image.js

@@ -0,0 +1,28 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Image_module_default from "./Image.module.js";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Image, Source } from "@unpic/react";
+//#region src/components/image/Image.tsx
+const ImageRoot = forwardRef(function ImageRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Image, {
+		ref,
+		"data-slot": "image-root",
+		className: clsx(Image_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ImageSource = forwardRef(function ImageSource(props, ref) {
+	return /* @__PURE__ */ jsx(Source, {
+		ref,
+		"data-slot": "image-source",
+		...props
+	});
+});
+const Image$1 = Object.assign(ImageRoot, {
+	Root: ImageRoot,
+	Source: ImageSource
+});
+//#endregion
+export { Image$1 as Image };

package/dist/components/image/Image.module.js

@@ -0,0 +1,5 @@
+import './Image.css';
+//#region src/components/image/Image.module.css
+var Image_module_default = { "root": "gMmqtq_root" };
+//#endregion
+export { Image_module_default as default };

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

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

package/dist/components/image-cropper/ImageCropper.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .ZvbaOq_root {
+  .Bk909a_root {
     box-sizing: border-box;
     width: var(--image-cropper-width, 32rem);
     max-width: var(--image-cropper-max-width, 100%);
@@ -12,7 +12,7 @@
     }
   }
 
-  .ZvbaOq_viewport {
+  .Bk909a_viewport {
     box-sizing: border-box;
     width: 100%;
     height: var(--image-cropper-viewport-height, var(--image-cropper-viewport-min-height, 20rem));
@@ -51,7 +51,7 @@
     }
   }
 
-  .ZvbaOq_image {
+  .Bk909a_image {
     object-fit: contain;
     transform-origin: center;
     backface-visibility: hidden;
@@ -62,7 +62,7 @@
     inset: 0;
   }
 
-  .ZvbaOq_selection {
+  .Bk909a_selection {
     box-sizing: content-box;
     border: var(--image-cropper-selection-border-width, var(--border-width-md)) solid
       var(--image-cropper-selection-border-color, var(--color-primary));
@@ -96,7 +96,7 @@
     }
   }
 
-  .ZvbaOq_grid {
+  .Bk909a_grid {
     pointer-events: none;
 
     &[data-axis="horizontal"] {
@@ -110,7 +110,7 @@
     }
   }
 
-  .ZvbaOq_handle {
+  .Bk909a_handle {
     z-index: 1;
     box-sizing: border-box;
     width: var(--image-cropper-handle-size, .75rem);

package/dist/components/image-cropper/ImageCropper.d.ts

@@ -1,15 +1,20 @@
-import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { ImageCropper, useImageCropper } from "@ark-ui/react/image-cropper";
 
 //#region src/components/image-cropper/ImageCropper.d.ts
 declare const ImageCropper$1: import("react").ForwardRefExoticComponent<Omit<ImageCropper.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<ImageCropper.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<ImageCropper.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: ImageCropper.ContextProps) => import("react").ReactNode;
   Viewport: import("react").ForwardRefExoticComponent<Omit<ImageCropper.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Image: import("react").ForwardRefExoticComponent<Omit<ImageCropper.ImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
   Selection: import("react").ForwardRefExoticComponent<Omit<ImageCropper.SelectionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Grid: import("react").ForwardRefExoticComponent<Omit<ImageCropper.GridProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Handle: import("react").ForwardRefExoticComponent<Omit<ImageCropper.HandleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CropArea: import("react").ForwardRefExoticComponent<Omit<ImageCropper.SelectionProps & import("react").RefAttributes<HTMLDivElement> & {
+    gridClassName?: string;
+    handleClassName?: string;
+  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   handles: ImageCropper.HandlePosition[];
 };
 //#endregion
-export { ImageCropper$1 as ImageCropper };
+export { ImageCropper$1 as ImageCropper, useImageCropper };

package/dist/components/image-cropper/ImageCropper.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import ImageCropper_module_default from "./ImageCropper.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageCropper, useImageCropper } from "@ark-ui/react/image-cropper";
 //#region src/components/image-cropper/ImageCropper.tsx
 const ImageCropperRoot = forwardRef(function ImageCropperRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ImageCropper.Root, {
@@ -61,15 +61,37 @@ const ImageCropperHandle = forwardRef(function ImageCropperHandle({ className, .
 		...props
 	});
 });
+const ImageCropperCropArea = forwardRef(function ImageCropperCropArea({ gridClassName, handleClassName, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(ImageCropperSelection, {
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ImageCropperGrid, {
+				axis: "horizontal",
+				className: gridClassName
+			}),
+			/* @__PURE__ */ jsx(ImageCropperGrid, {
+				axis: "vertical",
+				className: gridClassName
+			}),
+			ImageCropper.handles.map((position) => /* @__PURE__ */ jsx(ImageCropperHandle, {
+				position,
+				className: handleClassName
+			}, position))
+		]
+	});
+});
 const ImageCropper$1 = Object.assign(ImageCropperRoot, {
 	Root: ImageCropperRoot,
 	RootProvider: ImageCropperRootProvider,
+	Context: ImageCropper.Context,
 	Viewport: ImageCropperViewport,
 	Image: ImageCropperImage,
 	Selection: ImageCropperSelection,
 	Grid: ImageCropperGrid,
 	Handle: ImageCropperHandle,
+	CropArea: ImageCropperCropArea,
 	handles: ImageCropper.handles
 });
 //#endregion
-export { ImageCropper$1 as ImageCropper };
+export { ImageCropper$1 as ImageCropper, useImageCropper };

package/dist/components/image-cropper/ImageCropper.module.js

@@ -1,12 +1,12 @@
 import './ImageCropper.css';
 //#region src/components/image-cropper/ImageCropper.module.css
 var ImageCropper_module_default = {
-	"grid": "ZvbaOq_grid",
-	"handle": "ZvbaOq_handle",
-	"image": "ZvbaOq_image",
-	"root": "ZvbaOq_root",
-	"selection": "ZvbaOq_selection",
-	"viewport": "ZvbaOq_viewport"
+	"grid": "Bk909a_grid",
+	"handle": "Bk909a_handle",
+	"image": "Bk909a_image",
+	"root": "Bk909a_root",
+	"selection": "Bk909a_selection",
+	"viewport": "Bk909a_viewport"
 };
 //#endregion
 export { ImageCropper_module_default as default };

package/dist/components/image-cropper/index.d.ts

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

package/dist/components/input/Input.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .m4smHW_root {
+  .wmyYha_root {
     box-sizing: border-box;
     width: var(--input-width, 100%);
     max-width: var(--input-max-width, none);

package/dist/components/input/Input.js

@@ -1,8 +1,8 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Input_module_default from "./Input.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
 //#region src/components/input/Input.tsx
 const InputRoot = forwardRef(function InputRoot({ className, size = "md", htmlSize, ...props }, ref) {

package/dist/components/input/Input.module.js

@@ -1,5 +1,5 @@
 import './Input.css';
 //#region src/components/input/Input.module.css
-var Input_module_default = { "root": "m4smHW_root" };
+var Input_module_default = { "root": "wmyYha_root" };
 //#endregion
 export { Input_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .nnf1CW_root {
+  .n0dHIa_root {
     box-sizing: border-box;
     width: var(--input-group-width, 100%);
     max-width: var(--input-group-max-width, none);
@@ -87,7 +87,7 @@
     }
   }
 
-  .nnf1CW_input {
+  .n0dHIa_input {
     min-width: 0;
     min-height: 0;
     font-size: var(--input-group-font-size, var(--text-md));
@@ -101,7 +101,7 @@
     flex: auto;
   }
 
-  .nnf1CW_addon, .nnf1CW_text {
+  .n0dHIa_addon, .n0dHIa_text {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -122,7 +122,7 @@
     }
   }
 
-  .nnf1CW_addon {
+  .n0dHIa_addon {
     border-inline: var(--input-group-separator-width, var(--border-width-sm)) solid
       var(--input-group-separator-color, var(--color-border));
 
@@ -135,11 +135,11 @@
     }
   }
 
-  .nnf1CW_text {
+  .n0dHIa_text {
     background-color: #0000;
   }
 
-  .nnf1CW_button {
+  .n0dHIa_button {
     height: auto;
     min-height: auto;
     padding-block: 0;

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

@@ -16,8 +16,11 @@ declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import(
   Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
   Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
   Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    loading?: boolean;
     variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
+    'data-scope'?: string;
+    'data-part'?: string;
     'data-slot'?: string;
   } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };

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

@@ -2,10 +2,10 @@ 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";
-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) {

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

@@ -1,11 +1,11 @@
 import './InputGroup.css';
 //#region src/components/input-group/InputGroup.module.css
 var InputGroup_module_default = {
-	"addon": "nnf1CW_addon",
-	"button": "nnf1CW_button",
-	"input": "nnf1CW_input",
-	"root": "nnf1CW_root",
-	"text": "nnf1CW_text"
+	"addon": "n0dHIa_addon",
+	"button": "n0dHIa_button",
+	"input": "n0dHIa_input",
+	"root": "n0dHIa_root",
+	"text": "n0dHIa_text"
 };
 //#endregion
 export { InputGroup_module_default as default };

package/dist/components/kbd/Kbd.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .-gSPbW_root[data-scope="kbd"][data-part="root"] {
+  .VpuRJG_root[data-scope="kbd"][data-part="root"] {
     box-sizing: border-box;
     min-width: var(--kbd-min-width, var(--kbd-height, 1.5rem));
     max-width: 100%;
@@ -27,7 +27,7 @@
     overflow: hidden;
   }
 
-  .-gSPbW_group[data-scope="kbd"][data-part="group"] {
+  .VpuRJG_group[data-scope="kbd"][data-part="group"] {
     box-sizing: border-box;
     align-items: center;
     gap: var(--kbd-group-gap, var(--spacing-1));

package/dist/components/kbd/Kbd.js

@@ -1,9 +1,9 @@
 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, {

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

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

package/dist/components/lightbox/Lightbox.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Jmwb8W_trigger {
+  .BCq4HG_trigger {
     cursor: zoom-in;
 
     &:focus-visible {
@@ -9,7 +9,7 @@
     }
   }
 
-  .Jmwb8W_backdrop {
+  .BCq4HG_backdrop {
     z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
     background-color: var(--lightbox-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -18,16 +18,16 @@
     inset: 0;
 
     &[data-state="open"] {
-      animation: Jmwb8W_lightbox-backdrop-in var(--lightbox-backdrop-transition, var(--transition-default));
+      animation: BCq4HG_lightbox-backdrop-in var(--lightbox-backdrop-transition, var(--transition-default));
     }
 
     &[data-state="closed"] {
-      animation: Jmwb8W_lightbox-backdrop-out
+      animation: BCq4HG_lightbox-backdrop-out
         var(--lightbox-backdrop-transition, var(--transition-default));
     }
   }
 
-  .Jmwb8W_positioner {
+  .BCq4HG_positioner {
     box-sizing: border-box;
     z-index: calc(var(--z-modal) + var(--layer-index, 0));
     overscroll-behavior: contain;
@@ -39,7 +39,7 @@
     overflow: hidden;
   }
 
-  .Jmwb8W_content {
+  .BCq4HG_content {
     box-sizing: border-box;
     gap: var(--lightbox-content-gap, var(--spacing-3));
     width: fit-content;
@@ -52,15 +52,17 @@
     position: relative;
 
     &[data-state="open"] {
-      animation: Jmwb8W_lightbox-content-in var(--lightbox-transition, .22s ease);
+      animation: BCq4HG_lightbox-content-in
+        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--popup-motion-easing, ease));
     }
 
     &[data-state="closed"] {
-      animation: Jmwb8W_lightbox-content-out var(--lightbox-transition, .22s ease);
+      animation: BCq4HG_lightbox-content-out
+        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--popup-motion-easing, ease));
     }
   }
 
-  .Jmwb8W_title {
+  .BCq4HG_title {
     color: var(--lightbox-title-color, var(--color-foreground));
     font-size: var(--lightbox-title-font-size, var(--text-md));
     font-weight: var(--lightbox-title-font-weight, var(--weight-semibold));
@@ -68,24 +70,24 @@
     margin: 0;
   }
 
-  .Jmwb8W_description {
+  .BCq4HG_description {
     color: var(--lightbox-description-color, var(--color-muted-foreground));
     font-size: var(--lightbox-description-font-size, var(--text-sm));
     line-height: var(--lightbox-description-line-height, var(--line-height-text-sm));
     margin: 0;
   }
 
-  .Jmwb8W_header {
+  .BCq4HG_header {
     gap: var(--lightbox-header-gap, var(--spacing-1));
     display: grid;
   }
 
-  .Jmwb8W_body {
+  .BCq4HG_body {
     gap: var(--lightbox-body-gap, var(--spacing-3));
     display: grid;
   }
 
-  .Jmwb8W_footer {
+  .BCq4HG_footer {
     align-items: center;
     justify-content: var(--lightbox-footer-justify, flex-end);
     gap: var(--lightbox-footer-gap, var(--spacing-2));
@@ -95,7 +97,7 @@
     display: flex;
   }
 
-  .Jmwb8W_image {
+  .BCq4HG_image {
     max-width: min(var(--lightbox-media-max-width, 80vw), 100%);
     max-height: min(var(--lightbox-media-max-height, 80dvh), 100%);
     object-fit: contain;
@@ -109,7 +111,7 @@
     }
   }
 
-  .Jmwb8W_gallery {
+  .BCq4HG_gallery {
     --carousel-gap: var(--lightbox-gallery-gap, var(--spacing-4));
     width: auto;
     max-width: min(var(--lightbox-gallery-max-width, 72rem),
@@ -182,7 +184,7 @@
     }
   }
 
-  .Jmwb8W_closeIcon {
+  .BCq4HG_closeIcon {
     --close-button-size: var(--lightbox-close-icon-size, 2rem);
     --close-button-radius: var(--lightbox-close-icon-radius, var(--radius-sm));
     --close-button-icon-size: var(--lightbox-close-icon-glyph-size, .875rem);
@@ -208,35 +210,35 @@
     }
   }
 
-  @keyframes Jmwb8W_lightbox-backdrop-in {
+  @keyframes BCq4HG_lightbox-backdrop-in {
     from {
       opacity: var(--lightbox-backdrop-starting-opacity, 0);
       backdrop-filter: var(--lightbox-backdrop-starting-blur, none);
     }
   }
 
-  @keyframes Jmwb8W_lightbox-backdrop-out {
+  @keyframes BCq4HG_lightbox-backdrop-out {
     to {
       opacity: var(--lightbox-backdrop-ending-opacity, 0);
       backdrop-filter: var(--lightbox-backdrop-ending-blur, none);
     }
   }
 
-  @keyframes Jmwb8W_lightbox-content-in {
+  @keyframes BCq4HG_lightbox-content-in {
     from {
-      opacity: var(--lightbox-content-starting-opacity, 0);
-      translate: var(--lightbox-content-starting-translate-x, 0)
-        var(--lightbox-content-starting-translate-y, 0);
-      scale: var(--lightbox-content-starting-scale, .82);
+      opacity: var(--lightbox-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--lightbox-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--lightbox-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--lightbox-content-starting-scale, var(--popup-motion-starting-scale, .82));
     }
   }
 
-  @keyframes Jmwb8W_lightbox-content-out {
+  @keyframes BCq4HG_lightbox-content-out {
     to {
-      opacity: var(--lightbox-content-ending-opacity, 0);
-      translate: var(--lightbox-content-ending-translate-x, 0)
-        var(--lightbox-content-ending-translate-y, 0);
-      scale: var(--lightbox-content-ending-scale, .82);
+      opacity: var(--lightbox-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--lightbox-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--lightbox-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--lightbox-content-ending-scale, var(--popup-motion-ending-scale, .82));
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps, RefObject } from "react";
-import { Dialog } from "@ark-ui/react/dialog";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 
 //#region src/components/lightbox/Lightbox.d.ts
 type LightboxImageSelectDetails = {
@@ -66,6 +66,8 @@ declare const Lightbox: typeof LightboxRoot & {
   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 };
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };