@moduix/react 1.1.1 → 2.1.0

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/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

@@ -3,19 +3,19 @@
     box-sizing: border-box;
     width: var(--input-width, 100%);
     max-width: var(--input-max-width, none);
-    min-height: var(--input-height, var(--input-height-md, var(--size-lg)));
+    min-height: var(--input-height, var(--input-height-md, var(--size-md)));
     border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
       var(--input-border-color, var(--color-border));
     border-radius: var(--input-radius, var(--radius-md));
-    padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-2)))
+    padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1)))
       var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3)));
     background-color: var(--input-bg, var(--color-background));
     color: var(--input-color, var(--color-foreground));
     font: inherit;
     font-size: var(--input-font-size, var(--input-font-size-md, var(--text-md)));
     line-height: var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
-      transparent;
+    outline: var(--input-focus-ring-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
+      solid transparent;
     outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
     transition: border-color var(--input-transition, var(--transition-default)),
       outline-color var(--input-transition, var(--transition-default)),
@@ -51,7 +51,7 @@
     &[data-size="xs"] {
       --input-height: var(--input-height-xs, var(--size-xs));
       --input-padding-x: var(--input-padding-x-xs, var(--spacing-2));
-      --input-padding-y: var(--input-padding-y-xs, var(--spacing-1));
+      --input-padding-y: var(--input-padding-y-xs, var(--spacing-0-5));
       --input-font-size: var(--input-font-size-xs, var(--text-xs));
       --input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
     }
@@ -65,17 +65,17 @@
     }
 
     &[data-size="lg"] {
-      --input-height: var(--input-height-lg, var(--size-xl));
+      --input-height: var(--input-height-lg, var(--size-lg));
       --input-padding-x: var(--input-padding-x-lg, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-lg, var(--spacing-2));
+      --input-padding-y: var(--input-padding-y-lg, var(--spacing-1));
       --input-font-size: var(--input-font-size-lg, var(--text-lg));
       --input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
     }
 
     &[data-size="xl"] {
-      --input-height: var(--input-height-xl, 3.5rem);
+      --input-height: var(--input-height-xl, var(--size-xl));
       --input-padding-x: var(--input-padding-x-xl, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-xl, var(--spacing-3));
+      --input-padding-y: var(--input-padding-y-xl, var(--spacing-2));
       --input-font-size: var(--input-font-size-xl, var(--text-lg));
       --input-line-height: var(--input-line-height-xl, var(--line-height-text-lg));
     }

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-group/InputGroup.css

@@ -3,15 +3,15 @@
     box-sizing: border-box;
     width: var(--input-group-width, 100%);
     max-width: var(--input-group-max-width, none);
-    min-height: var(--input-group-height, var(--input-group-height-md, var(--size-lg)));
+    min-height: var(--input-group-height, var(--input-group-height-md, var(--size-md)));
     border: var(--input-group-border-width, var(--border-width-sm))
       var(--input-group-border-style, solid) var(--input-group-border-color, var(--color-border));
     border-radius: var(--input-group-radius, var(--radius-md));
     background-color: var(--input-group-bg, var(--color-background));
     color: var(--input-group-color, var(--color-foreground));
-    outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--border-width-sm)))
+    outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--input-group-focus-ring-offset, -1px);
+    outline-offset: var(--input-group-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--input-group-transition, var(--transition-default)),
       outline-color var(--input-group-transition, var(--transition-default)),
       opacity var(--input-group-transition, var(--transition-default));
@@ -42,48 +42,48 @@
     }
 
     &[data-size="xs"] {
-      --input-group-height: var(--input-group-height-xs, var(--size-sm));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, .625rem);
+      --input-group-height: var(--input-group-height-xs, var(--size-xs));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, var(--spacing-2-5));
       --input-group-font-size: var(--input-group-font-size-xs, var(--text-xs));
       --input-group-line-height: var(--input-group-line-height-xs, var(--line-height-text-xs));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-xs, .625rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-xs, .25rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-xs, var(--spacing-2-5));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-xs, var(--spacing-0-5));
     }
 
     &[data-size="sm"] {
-      --input-group-height: var(--input-group-height-sm, 2rem);
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, .75rem);
+      --input-group-height: var(--input-group-height-sm, var(--size-sm));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, var(--spacing-3));
       --input-group-font-size: var(--input-group-font-size-sm, var(--text-sm));
       --input-group-line-height: var(--input-group-line-height-sm, var(--line-height-text-sm));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-sm, .75rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-sm, var(--spacing-3));
       --input-group-input-padding-y: var(--input-group-input-padding-y-sm, .3125rem);
     }
 
     &[data-size="md"] {
-      --input-group-height: var(--input-group-height-md, var(--size-lg));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-md, .875rem);
+      --input-group-height: var(--input-group-height-md, var(--size-md));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-md, var(--spacing-3-5));
       --input-group-font-size: var(--input-group-font-size-md, var(--text-md));
       --input-group-line-height: var(--input-group-line-height-md, var(--line-height-text-md));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-md, .875rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-md, .5rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-md, var(--spacing-3-5));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-md, var(--spacing-1));
     }
 
     &[data-size="lg"] {
-      --input-group-height: var(--input-group-height-lg, var(--size-xl));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, 1rem);
+      --input-group-height: var(--input-group-height-lg, var(--size-lg));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, var(--spacing-4));
       --input-group-font-size: var(--input-group-font-size-lg, var(--text-lg));
       --input-group-line-height: var(--input-group-line-height-lg, var(--line-height-text-lg));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-lg, 1rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-lg, .625rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-lg, var(--spacing-4));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-lg, var(--spacing-1));
     }
 
     &[data-size="xl"] {
-      --input-group-height: var(--input-group-height-xl, 3rem);
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, 1.125rem);
+      --input-group-height: var(--input-group-height-xl, var(--size-xl));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, var(--spacing-4-5));
       --input-group-font-size: var(--input-group-font-size-xl, var(--text-lg));
       --input-group-line-height: var(--input-group-line-height-xl, var(--line-height-text-lg));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-xl, 1.125rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-xl, .75rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-xl, var(--spacing-4-5));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-xl, var(--spacing-2));
     }
   }
 
@@ -92,8 +92,8 @@
     min-height: 0;
     font-size: var(--input-group-font-size, var(--text-md));
     line-height: var(--input-group-line-height, var(--line-height-text-md));
-    padding-block: var(--input-group-input-padding-y, .5rem);
-    padding-inline: var(--input-group-input-padding-x, .875rem);
+    padding-block: var(--input-group-input-padding-y, var(--spacing-2));
+    padding-inline: var(--input-group-input-padding-x, var(--spacing-3-5));
     background-color: #0000;
     border: 0;
     border-radius: 0;
@@ -107,7 +107,7 @@
     align-items: center;
     gap: var(--input-group-addon-gap, var(--spacing-2));
     min-width: max-content;
-    padding-inline: var(--input-group-addon-padding-x, .875rem);
+    padding-inline: var(--input-group-addon-padding-x, var(--spacing-3-5));
     background-color: var(--input-group-addon-bg, var(--color-muted));
     color: var(--input-group-addon-color, var(--color-muted-foreground));
     font-size: var(--input-group-font-size, var(--text-md));
@@ -116,8 +116,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--input-group-icon-size, 1rem);
-      height: var(--input-group-icon-size, 1rem);
+      width: var(--input-group-icon-size, var(--spacing-4));
+      height: var(--input-group-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
   }
@@ -143,7 +143,7 @@
     height: auto;
     min-height: auto;
     padding-block: 0;
-    padding-inline: var(--input-group-addon-padding-x, .875rem);
+    padding-inline: var(--input-group-addon-padding-x, var(--spacing-3-5));
     color: var(--input-group-button-color, var(--color-foreground));
     font-size: var(--input-group-font-size, var(--text-sm));
     line-height: var(--input-group-line-height, var(--line-height-text-sm));
@@ -152,7 +152,7 @@
     align-self: stretch;
 
     &:focus-visible {
-      outline-offset: var(--input-group-button-focus-ring-offset, -1px);
+      outline-offset: var(--input-group-button-focus-ring-offset, var(--focus-ring-inset-offset));
     }
   }
 }

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/kbd/Kbd.css

@@ -1,9 +1,9 @@
 @layer ui.components {
   .VpuRJG_root[data-scope="kbd"][data-part="root"] {
     box-sizing: border-box;
-    min-width: var(--kbd-min-width, var(--kbd-height, 1.5rem));
+    min-width: var(--kbd-min-width, var(--kbd-height, var(--size-xs)));
     max-width: 100%;
-    height: var(--kbd-height, 1.5rem);
+    height: var(--kbd-height, var(--size-xs));
     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));

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/lightbox/Lightbox.css

@@ -3,9 +3,9 @@
     cursor: zoom-in;
 
     &:focus-visible {
-      outline: var(--lightbox-trigger-focus-ring-width, var(--border-width-md)) solid
-        var(--lightbox-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--lightbox-trigger-focus-ring-offset, 2px);
+      outline: var(--lightbox-trigger-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--lightbox-trigger-focus-ring-color, var(--color-ring));
+      outline-offset: var(--lightbox-trigger-focus-ring-offset, var(--focus-ring-offset));
     }
   }
 
@@ -52,11 +52,13 @@
     position: relative;
 
     &[data-state="open"] {
-      animation: BCq4HG_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: BCq4HG_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));
     }
   }
 
@@ -151,7 +153,7 @@
 
     & [data-slot="carousel-indicator"]:has(img) {
       width: var(--lightbox-gallery-thumbnail-width, 5rem);
-      height: var(--lightbox-gallery-thumbnail-height, 3rem);
+      height: var(--lightbox-gallery-thumbnail-height, var(--size-xl));
       border: var(--border-width-sm) solid transparent;
       border-radius: var(--lightbox-gallery-thumbnail-radius, var(--radius-md));
       opacity: var(--lightbox-gallery-thumbnail-opacity, .65);
@@ -169,8 +171,8 @@
         width: var(--lightbox-gallery-thumbnail-width, 5rem);
         border-color: var(--lightbox-gallery-thumbnail-border-color, var(--color-primary));
         opacity: 1;
+        transform: translateY(var(--lightbox-gallery-thumbnail-active-translate-y, calc(var(--border-width-sm) * -1)));
         background: none;
-        transform: translateY(-1px);
       }
 
       & img {
@@ -183,9 +185,9 @@
   }
 
   .BCq4HG_closeIcon {
-    --close-button-size: var(--lightbox-close-icon-size, 2rem);
+    --close-button-size: var(--lightbox-close-icon-size, var(--spacing-8));
     --close-button-radius: var(--lightbox-close-icon-radius, var(--radius-sm));
-    --close-button-icon-size: var(--lightbox-close-icon-glyph-size, .875rem);
+    --close-button-icon-size: var(--lightbox-close-icon-glyph-size, var(--spacing-3-5));
     --close-button-color: var(--lightbox-close-icon-color, var(--color-foreground));
     --close-button-color-hover: var(--lightbox-close-icon-color-hover, var(--color-foreground));
     --close-button-bg: var(--lightbox-close-icon-bg, var(--color-background));
@@ -224,19 +226,19 @@
 
   @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 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 };

package/dist/components/lightbox/Lightbox.js

@@ -2,10 +2,10 @@ 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";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { Dialog, useDialogContext } from "@ark-ui/react/dialog";
+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();
@@ -100,7 +100,7 @@ const LightboxCloseTrigger = forwardRef(function LightboxCloseTrigger({ classNam
 	});
 });
 const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
-	const dialog = useDialogContext();
+	const dialog = useDialogContext$1();
 	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
 		asChild: true,
 		...props,
@@ -115,7 +115,7 @@ const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, chi
 	});
 });
 const LightboxImage = forwardRef(function LightboxImage({ className, closeOnClick = false, onClick, ...props }, ref) {
-	const dialog = useDialogContext();
+	const dialog = useDialogContext$1();
 	const handleClick = (event) => {
 		onClick?.(event);
 		if (closeOnClick && !event.defaultPrevented) dialog.setOpen(false);
@@ -159,7 +159,7 @@ function LightboxFooter({ className, ...props }) {
 	});
 }
 function LightboxBind({ onImageSelect, selector = "img", rootRef, rootSelector }) {
-	const { setOpen } = useDialogContext();
+	const { setOpen } = useDialogContext$1();
 	useEffect(() => {
 		const rootNode = rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
 		if (!rootNode) return;
@@ -213,7 +213,9 @@ const Lightbox = Object.assign(LightboxRoot, {
 	Footer: LightboxFooter,
 	Image: LightboxImage,
 	Gallery: LightboxGallery,
-	Bind: LightboxBind
+	Bind: LightboxBind,
+	useLightbox: useDialog$1,
+	useLightboxContext: useDialogContext$1
 });
 //#endregion
-export { Lightbox, LightboxBind, LightboxGallery, LightboxImage };
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };

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

@@ -1,2 +1,2 @@
-import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails } from "./Lightbox.js";
-export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails };
+import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails, useLightbox as useDialog, useLightboxContext as useDialogContext } from "./Lightbox.js";
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog as useLightbox, useDialogContext as useLightboxContext };

package/dist/components/list/List.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import List_module_default from "./List.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/list/List.tsx
 const ListRoot = forwardRef(function ListRoot({ as, asChild, className, gap = "sm", marker, role, size = "md", tone = "default", ...props }, ref) {
 	const markerValue = marker ?? "auto";