@moduix/react 2.1.0 → 2.2.4

package/dist/components/dialog/Dialog.js

@@ -1,133 +1,145 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { CloseButton } from "../close-button/CloseButton.js";
-import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
-import Dialog_module_default from "./Dialog.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
-//#region src/components/dialog/Dialog.tsx
-const DEFAULT_CLOSE_BUTTON_LABEL = "Close dialog";
-function DialogRoot({ portalled, portalRef, ...props }) {
-	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
-		portalled,
-		portalRef,
-		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+import Dialog_module from "./Dialog.module.js";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close dialog';
+function DialogRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.Root, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
 }
-function DialogRootProvider({ portalled, portalRef, ...props }) {
-	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
-		portalled,
-		portalRef,
-		children: /* @__PURE__ */ jsx(Dialog.RootProvider, { ...props })
-	});
+function DialogRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.RootProvider, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
 }
-const DialogTrigger = forwardRef(function DialogTrigger({ asChild, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
-		ref,
-		asChild,
-		"data-slot": "dialog-trigger",
-		className: clsx(!asChild && Dialog_module_default.trigger, normalizeClassName(className)),
-		...props
-	});
+const Dialog_DialogTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "dialog-trigger",
+        className: clsx(!asChild && Dialog_module.trigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const DialogBackdrop = forwardRef(function DialogBackdrop({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Backdrop, {
-		ref,
-		"data-slot": "dialog-backdrop",
-		className: clsx(Dialog_module_default.backdrop, normalizeClassName(className)),
-		...props
-	}) });
+const Dialog_DialogBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
+            ref: ref,
+            "data-slot": "dialog-backdrop",
+            className: clsx(Dialog_module.backdrop, normalizeClassName(className)),
+            ...props
+        })
+    });
 });
-const DialogPositioner = forwardRef(function DialogPositioner({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Positioner, {
-		ref,
-		"data-slot": "dialog-positioner",
-		className: clsx(Dialog_module_default.positioner, normalizeClassName(className)),
-		...props
-	}) });
+const Dialog_DialogPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Positioner, {
+            ref: ref,
+            "data-slot": "dialog-positioner",
+            className: clsx(Dialog_module.positioner, normalizeClassName(className)),
+            ...props
+        })
+    });
 });
-const DialogContent = forwardRef(function DialogContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Content, {
-		ref,
-		"data-slot": "dialog-content",
-		className: clsx(Dialog_module_default.content, normalizeClassName(className)),
-		...props
-	});
+const Dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Content, {
+        ref: ref,
+        "data-slot": "dialog-content",
+        className: clsx(Dialog_module.content, normalizeClassName(className)),
+        ...props
+    });
 });
-const DialogTitle = forwardRef(function DialogTitle({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Title, {
-		ref,
-		"data-slot": "dialog-title",
-		className: clsx(Dialog_module_default.title, normalizeClassName(className)),
-		...props
-	});
+const Dialog_DialogTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Title, {
+        ref: ref,
+        "data-slot": "dialog-title",
+        className: clsx(Dialog_module.title, normalizeClassName(className)),
+        ...props
+    });
 });
-const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.Description, {
-		ref,
-		"data-slot": "dialog-description",
-		className: clsx(Dialog_module_default.description, normalizeClassName(className)),
-		...props
-	});
+const Dialog_DialogDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        ref: ref,
+        "data-slot": "dialog-description",
+        className: clsx(Dialog_module.description, normalizeClassName(className)),
+        ...props
+    });
 });
-const DialogCloseTrigger = forwardRef(function DialogCloseTrigger({ asChild, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		ref,
-		asChild,
-		"data-slot": "dialog-close-trigger",
-		className: clsx(!asChild && Dialog_module_default.closeTrigger, normalizeClassName(className)),
-		...props
-	});
+const Dialog_DialogCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "dialog-close-trigger",
+        className: clsx(!asChild && Dialog_module.closeTrigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const DialogCloseIcon = forwardRef(function DialogCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		asChild: true,
-		...props,
-		children: /* @__PURE__ */ jsx(CloseButton.Root, {
-			ref,
-			"data-slot": "dialog-close-icon",
-			"aria-label": ariaLabel,
-			className: clsx(Dialog_module_default.closeIcon, normalizeClassName(className)),
-			children
-		})
-	});
+const Dialog_DialogCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        asChild: true,
+        ...props,
+        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+            ref: ref,
+            "data-slot": "dialog-close-icon",
+            "aria-label": ariaLabel,
+            className: clsx(Dialog_module.closeIcon, normalizeClassName(className)),
+            children: children
+        })
+    });
 });
 function DialogHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-header",
-		className: clsx(Dialog_module_default.header, className),
-		...props
-	});
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "dialog-header",
+        className: clsx(Dialog_module.header, className),
+        ...props
+    });
 }
 function DialogBody({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-body",
-		className: clsx(Dialog_module_default.body, className),
-		...props
-	});
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "dialog-body",
+        className: clsx(Dialog_module.body, className),
+        ...props
+    });
 }
 function DialogFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-footer",
-		className: clsx(Dialog_module_default.footer, className),
-		...props
-	});
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "dialog-footer",
+        className: clsx(Dialog_module.footer, className),
+        ...props
+    });
 }
-const Dialog$1 = Object.assign(DialogRoot, {
-	Root: DialogRoot,
-	RootProvider: DialogRootProvider,
-	Trigger: DialogTrigger,
-	Backdrop: DialogBackdrop,
-	Positioner: DialogPositioner,
-	Content: DialogContent,
-	Title: DialogTitle,
-	Description: DialogDescription,
-	CloseTrigger: DialogCloseTrigger,
-	CloseIcon: DialogCloseIcon,
-	Header: DialogHeader,
-	Body: DialogBody,
-	Footer: DialogFooter
+const Dialog_Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    RootProvider: DialogRootProvider,
+    Context: Dialog.Context,
+    Trigger: Dialog_DialogTrigger,
+    Backdrop: Dialog_DialogBackdrop,
+    Positioner: Dialog_DialogPositioner,
+    Content: Dialog_DialogContent,
+    Title: Dialog_DialogTitle,
+    Description: Dialog_DialogDescription,
+    CloseTrigger: Dialog_DialogCloseTrigger,
+    CloseIcon: Dialog_DialogCloseIcon,
+    Header: DialogHeader,
+    Body: DialogBody,
+    Footer: DialogFooter
 });
-//#endregion
-export { Dialog$1 as Dialog, useDialog$1 as useDialog, useDialogContext$1 as useDialogContext };
+export { Dialog_Dialog as Dialog, useDialog, useDialogContext };

package/dist/components/dialog/Dialog.module.js

@@ -1,21 +1,23 @@
-import './Dialog.css';
-//#region src/components/dialog/Dialog.module.css
-var Dialog_module_default = {
-	"backdrop": "_9AixhG_backdrop",
-	"body": "_9AixhG_body",
-	"closeIcon": "_9AixhG_closeIcon",
-	"closeTrigger": "_9AixhG_closeTrigger",
-	"content": "_9AixhG_content",
-	"description": "_9AixhG_description",
-	"dialog-backdrop-in": "_9AixhG_dialog-backdrop-in",
-	"dialog-backdrop-out": "_9AixhG_dialog-backdrop-out",
-	"dialog-content-in": "_9AixhG_dialog-content-in",
-	"dialog-content-out": "_9AixhG_dialog-content-out",
-	"footer": "_9AixhG_footer",
-	"header": "_9AixhG_header",
-	"positioner": "_9AixhG_positioner",
-	"title": "_9AixhG_title",
-	"trigger": "_9AixhG_trigger"
+import "./Dialog_module.css";
+const Dialog_module = {
+    trigger: "trigger-qA1CFR",
+    closeTrigger: "closeTrigger-VUiUJj",
+    backdrop: "backdrop-If26oI",
+    "dialog-backdrop-in": "dialog-backdrop-in-_C0wKm",
+    dialogBackdropIn: "dialog-backdrop-in-_C0wKm",
+    "dialog-backdrop-out": "dialog-backdrop-out-XaKZmG",
+    dialogBackdropOut: "dialog-backdrop-out-XaKZmG",
+    positioner: "positioner-dTHR1c",
+    content: "content-efn3VB",
+    "dialog-content-in": "dialog-content-in-aG5RQ2",
+    dialogContentIn: "dialog-content-in-aG5RQ2",
+    "dialog-content-out": "dialog-content-out-AlkJKg",
+    dialogContentOut: "dialog-content-out-AlkJKg",
+    header: "header-J6cvXY",
+    title: "title-rhfFjR",
+    description: "description-Ke7u65",
+    body: "body-LLBXY5",
+    footer: "footer-E1Avqe",
+    closeIcon: "closeIcon-gvFPTx"
 };
-//#endregion
-export { Dialog_module_default as default };
+export default Dialog_module;

package/dist/components/dialog/Dialog_module.css

@@ -0,0 +1,236 @@
+@layer moduix.components {
+  .trigger-qA1CFR, .closeTrigger-VUiUJj {
+    box-sizing: border-box;
+    min-height: var(--moduix-dialog-control-height, var(--moduix-size-md));
+    padding: var(--moduix-dialog-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-dialog-control-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-dialog-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-dialog-control-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-dialog-control-bg, var(--moduix-color-background));
+    color: var(--moduix-dialog-control-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-dialog-control-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-dialog-control-line-height, var(--moduix-line-height-text-md));
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default);
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.trigger-qA1CFR, .closeTrigger-VUiUJj):hover {
+      background-color: var(--moduix-dialog-control-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  :is(.trigger-qA1CFR, .closeTrigger-VUiUJj):focus-visible {
+    outline: var(--moduix-dialog-focus-ring-width, var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-dialog-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-dialog-focus-ring-width, var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm))) *
+          -1);
+  }
+
+  :is(.trigger-qA1CFR, .closeTrigger-VUiUJj)[data-disabled], :is(.trigger-qA1CFR, .closeTrigger-VUiUJj)[disabled] {
+    pointer-events: none;
+    opacity: var(--moduix-opacity-disabled);
+  }
+
+  .backdrop-If26oI {
+    z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
+    background-color: var(--moduix-dialog-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
+    min-height: 100dvh;
+    -webkit-backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-dialog-backdrop-blur, 4px)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-dialog-backdrop-blur, 4px)));
+    position: fixed;
+    inset: 0;
+  }
+
+  .backdrop-If26oI[data-state="open"] {
+    animation: dialog-backdrop-in-_C0wKm
+        var(--moduix-dialog-backdrop-transition, var(--moduix-transition-default));
+  }
+
+  .backdrop-If26oI[data-state="closed"] {
+    animation: dialog-backdrop-out-XaKZmG
+        var(--moduix-dialog-backdrop-transition, var(--moduix-transition-default));
+  }
+
+  .positioner-dTHR1c {
+    box-sizing: border-box;
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable both-edges;
+    padding: var(--moduix-dialog-positioner-padding, var(--moduix-spacing-4));
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow-y: auto;
+  }
+
+  .content-efn3VB {
+    box-sizing: border-box;
+    width: min(var(--moduix-dialog-width, 28rem),
+      var(--moduix-dialog-max-width, calc(100vw - var(--moduix-spacing-8, 2rem))));
+    max-width: 100%;
+    max-height: calc(100dvh - var(--moduix-spacing-8, 2rem));
+    padding: var(--moduix-dialog-padding, var(--moduix-spacing-6));
+    border: var(--moduix-dialog-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-dialog-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-dialog-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-dialog-bg, var(--moduix-color-popover));
+    color: var(--moduix-dialog-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-dialog-shadow, var(--moduix-shadow-lg));
+    transform-origin: top;
+    transition: scale
+        var(--moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default))),
+      translate
+        var(--moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)));
+    outline: 0;
+    position: relative;
+    translate: 0;
+    scale: 1;
+  }
+
+  .content-efn3VB:after {
+    content: "";
+    z-index: 1;
+    border-radius: inherit;
+    background-color: var(--moduix-dialog-nested-overlay-bg, #0000000d);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity
+        var(--moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)));
+    position: absolute;
+    inset: 0;
+  }
+
+  .content-efn3VB[data-has-nested] {
+    scale: calc(1 - var(--moduix-dialog-nested-scale-step, .05) * var(--nested-layer-count, 0));
+    translate: 0
+        calc(var(--moduix-dialog-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-layer-count, 0));
+  }
+
+  .content-efn3VB[data-has-nested]:after {
+    opacity: 1;
+  }
+
+  .content-efn3VB[data-state="open"] {
+    animation: dialog-content-in-aG5RQ2
+        var(--moduix-dialog-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  .content-efn3VB[data-state="closed"] {
+    animation: dialog-content-out-AlkJKg
+        var(--moduix-dialog-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  .header-J6cvXY {
+    align-items: start;
+    gap: var(--moduix-dialog-header-gap, var(--moduix-spacing-1));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .header-J6cvXY > [data-slot="dialog-title"] {
+    grid-column: 1;
+  }
+
+  .header-J6cvXY > [data-slot="dialog-close-trigger"] {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .header-J6cvXY > [data-slot="dialog-description"] {
+    grid-column: 1 / -1;
+  }
+
+  .title-rhfFjR {
+    color: var(--moduix-dialog-title-color, var(--moduix-dialog-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-dialog-title-font-size, var(--moduix-text-lg));
+    font-weight: var(--moduix-dialog-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-dialog-title-line-height, var(--moduix-line-height-text-lg));
+    margin: 0;
+  }
+
+  .description-Ke7u65, .body-LLBXY5 {
+    color: var(--moduix-dialog-description-color, var(--moduix-dialog-muted-color, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-dialog-description-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-dialog-description-line-height, var(--moduix-line-height-text-md));
+  }
+
+  .description-Ke7u65 {
+    margin: 0;
+  }
+
+  .body-LLBXY5 {
+    margin: var(--moduix-dialog-content-margin, var(--moduix-spacing-4) 0 0);
+  }
+
+  .footer-E1Avqe {
+    justify-content: flex-end;
+    gap: var(--moduix-dialog-footer-gap, var(--moduix-spacing-2));
+    margin-top: var(--moduix-dialog-footer-margin-top, var(--moduix-spacing-6));
+    display: flex;
+  }
+
+  .closeIcon-gvFPTx {
+    --moduix-close-button-size: var(--moduix-dialog-close-icon-size, var(--moduix-spacing-7));
+    --moduix-close-button-radius: var(--moduix-dialog-close-icon-radius, var(--moduix-radius-md));
+    --moduix-close-button-color: var(--moduix-dialog-close-icon-color, var(--moduix-dialog-muted-color, var(--moduix-color-muted-foreground)));
+    --moduix-close-button-color-hover: var(--moduix-dialog-close-icon-color-hover, var(--moduix-dialog-close-icon-color, var(--moduix-dialog-color, var(--moduix-color-popover-foreground))));
+    --moduix-close-button-bg: var(--moduix-dialog-close-icon-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-dialog-close-icon-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-focus-ring-color: var(--moduix-dialog-close-icon-focus-ring-color, var(--moduix-dialog-focus-ring-color, var(--moduix-color-ring)));
+    --moduix-close-button-icon-size: var(--moduix-dialog-close-icon-glyph-size, var(--moduix-spacing-3));
+    z-index: 2;
+    position: absolute;
+    inset-block-start: var(--moduix-dialog-close-icon-inset-block-start, var(--moduix-spacing-4));
+    inset-inline-end: var(--moduix-dialog-close-icon-inset-inline-end, var(--moduix-spacing-4));
+  }
+
+  @keyframes dialog-backdrop-in-_C0wKm {
+    from {
+      opacity: var(--moduix-dialog-backdrop-starting-opacity, 0);
+      -webkit-backdrop-filter: var(--moduix-dialog-backdrop-starting-blur, none);
+      backdrop-filter: var(--moduix-dialog-backdrop-starting-blur, none);
+    }
+  }
+
+  @keyframes dialog-backdrop-out-XaKZmG {
+    to {
+      opacity: var(--moduix-dialog-backdrop-ending-opacity, 0);
+      -webkit-backdrop-filter: var(--moduix-dialog-backdrop-ending-blur, none);
+      backdrop-filter: var(--moduix-dialog-backdrop-ending-blur, none);
+    }
+  }
+
+  @keyframes dialog-content-in-aG5RQ2 {
+    from {
+      opacity: var(--moduix-dialog-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-dialog-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-dialog-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-dialog-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
+    }
+  }
+
+  @keyframes dialog-content-out-AlkJKg {
+    to {
+      opacity: var(--moduix-dialog-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-dialog-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-dialog-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-dialog-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
+    }
+  }
+}
+

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

@@ -1,2 +1,2 @@
-import { Dialog, DialogRootProps, DialogRootProviderProps, useDialog, useDialogContext } from "./Dialog.js";
-export { Dialog, type DialogRootProps, type DialogRootProviderProps, useDialog, useDialogContext };
+export { Dialog, useDialog, useDialogContext } from './Dialog.js';
+export type { DialogRootProps, DialogRootProviderProps } from './Dialog.js';

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, useDialog, useDialogContext } from "./Dialog.js";

package/dist/components/drawer/Drawer.d.ts

@@ -1,56 +1,36 @@
-import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps } from "react";
-import { Drawer, useDrawer } from "@ark-ui/react/drawer";
-
-//#region src/components/drawer/Drawer.d.ts
-type DrawerRootProps = ComponentProps<typeof Drawer.Root> & OverlayPortalProps;
-type DrawerRootProviderProps = ComponentProps<typeof Drawer.RootProvider> & OverlayPortalProps;
-declare function DrawerRoot({
-  lazyMount,
-  portalled,
-  portalRef,
-  unmountOnExit,
-  ...props
-}: DrawerRootProps): import("react").JSX.Element;
-declare function DrawerRootProvider({
-  lazyMount,
-  portalled,
-  portalRef,
-  unmountOnExit,
-  ...props
-}: DrawerRootProviderProps): import("react").JSX.Element;
-declare function DrawerHeader({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerBody({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerFooter({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare const Drawer$1: typeof DrawerRoot & {
-  Root: typeof DrawerRoot;
-  RootProvider: typeof DrawerRootProvider;
-  Stack: (props: Drawer.StackProps) => import("react").JSX.Element;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<Drawer.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Backdrop: import("react").ForwardRefExoticComponent<Omit<Drawer.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Positioner: import("react").ForwardRefExoticComponent<Omit<Drawer.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Drawer.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Grabber: import("react").ForwardRefExoticComponent<Omit<Drawer.GrabberProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  GrabberIndicator: import("react").ForwardRefExoticComponent<Omit<Drawer.GrabberIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Title: import("react").ForwardRefExoticComponent<Omit<Drawer.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-  Description: import("react").ForwardRefExoticComponent<Omit<Drawer.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Drawer.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Drawer.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  SwipeArea: import("react").ForwardRefExoticComponent<Omit<Drawer.SwipeAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Indent: import("react").ForwardRefExoticComponent<Omit<Drawer.IndentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  IndentBackground: import("react").ForwardRefExoticComponent<Omit<Drawer.IndentBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Header: typeof DrawerHeader;
-  Body: typeof DrawerBody;
-  Footer: typeof DrawerFooter;
+import { Drawer as DrawerPrimitive, useDrawer, useDrawerContext, useDrawerStackContext } from '@ark-ui/react/drawer';
+import type { ComponentProps } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal';
+type DrawerRootProps = ComponentProps<typeof DrawerPrimitive.Root> & OverlayPortalProps;
+type DrawerRootProviderProps = ComponentProps<typeof DrawerPrimitive.RootProvider> & OverlayPortalProps;
+type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+    variant?: 'island';
 };
-//#endregion
-export { Drawer$1 as Drawer, useDrawer };
+declare function DrawerRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DrawerRootProps): import("react").JSX.Element;
+declare function DrawerRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DrawerRootProviderProps): import("react").JSX.Element;
+declare function DrawerHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare const Drawer: typeof DrawerRoot & {
+    Root: typeof DrawerRoot;
+    RootProvider: typeof DrawerRootProvider;
+    Context: (props: DrawerPrimitive.ContextProps) => import("react").ReactNode;
+    Stack: (props: DrawerPrimitive.StackProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Grabber: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.GrabberProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GrabberIndicator: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.GrabberIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CloseTrigger: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<DrawerPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    SwipeArea: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.SwipeAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indent: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.IndentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    IndentBackground: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.IndentBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+};
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext };