@moduix/solid 1.0.0

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,240 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-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(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function DialogRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function DialogTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "dialog-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && Dialog_module.trigger, local.class);
+        }
+    }, others));
+}
+function DialogBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Backdrop, mergeProps({
+                "data-slot": "dialog-backdrop",
+                get ["class"] () {
+                    return clsx(Dialog_module.backdrop, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DialogPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Positioner, mergeProps({
+                "data-slot": "dialog-positioner",
+                get ["class"] () {
+                    return clsx(Dialog_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DialogContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Content, mergeProps({
+        "data-slot": "dialog-content",
+        get ["class"] () {
+            return clsx(Dialog_module.content, local.class);
+        }
+    }, others));
+}
+function DialogTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Title, mergeProps({
+        "data-slot": "dialog-title",
+        get ["class"] () {
+            return clsx(Dialog_module.title, local.class);
+        }
+    }, others));
+}
+function DialogDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Description, mergeProps({
+        "data-slot": "dialog-description",
+        get ["class"] () {
+            return clsx(Dialog_module.description, local.class);
+        }
+    }, others));
+}
+function DialogCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "dialog-close-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && Dialog_module.closeTrigger, local.class);
+        }
+    }, others));
+}
+function DialogCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Dialog.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "dialog-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return clsx(Dialog_module.closeIcon, local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function DialogHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "dialog-header",
+        get ["class"] () {
+            return clsx(Dialog_module.header, local.class);
+        }
+    }, others));
+}
+function DialogBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "dialog-body",
+        get ["class"] () {
+            return clsx(Dialog_module.body, local.class);
+        }
+    }, others));
+}
+function DialogFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "dialog-footer",
+        get ["class"] () {
+            return clsx(Dialog_module.footer, local.class);
+        }
+    }, others));
+}
+const Dialog_Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    RootProvider: DialogRootProvider,
+    Context: Dialog.Context,
+    Trigger: DialogTrigger,
+    Backdrop: DialogBackdrop,
+    Positioner: DialogPositioner,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    CloseTrigger: DialogCloseTrigger,
+    CloseIcon: DialogCloseIcon,
+    Header: DialogHeader,
+    Body: DialogBody,
+    Footer: DialogFooter
+});
+export { Dialog_Dialog as Dialog, useDialog, useDialogContext };

package/dist/components/dialog/Dialog.jsx

@@ -0,0 +1,131 @@
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import Dialog_module from "./Dialog.module.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close dialog';
+function DialogRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Dialog.Root>
+    </OverlayPortalProvider>;
+}
+function DialogRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Dialog.RootProvider>
+    </OverlayPortalProvider>;
+}
+function DialogTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.Trigger asChild={local.asChild} data-slot="dialog-trigger" class={clsx(!local.asChild && Dialog_module.trigger, local.class)} {...others}/>;
+}
+function DialogBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Backdrop data-slot="dialog-backdrop" class={clsx(Dialog_module.backdrop, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DialogPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Positioner data-slot="dialog-positioner" class={clsx(Dialog_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DialogContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Content data-slot="dialog-content" class={clsx(Dialog_module.content, local.class)} {...others}/>;
+}
+function DialogTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Title data-slot="dialog-title" class={clsx(Dialog_module.title, local.class)} {...others}/>;
+}
+function DialogDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Description data-slot="dialog-description" class={clsx(Dialog_module.description, local.class)} {...others}/>;
+}
+function DialogCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.CloseTrigger asChild={local.asChild} data-slot="dialog-close-trigger" class={clsx(!local.asChild && Dialog_module.closeTrigger, local.class)} {...others}/>;
+}
+function DialogCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Dialog.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="dialog-close-icon" aria-label={local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL} aria-labelledby={local['aria-labelledby']} class={clsx(Dialog_module.closeIcon, local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function DialogHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="dialog-header" class={clsx(Dialog_module.header, local.class)} {...others}/>;
+}
+function DialogBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="dialog-body" class={clsx(Dialog_module.body, local.class)} {...others}/>;
+}
+function DialogFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="dialog-footer" class={clsx(Dialog_module.footer, local.class)} {...others}/>;
+}
+const Dialog_Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    RootProvider: DialogRootProvider,
+    Context: Dialog.Context,
+    Trigger: DialogTrigger,
+    Backdrop: DialogBackdrop,
+    Positioner: DialogPositioner,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    CloseTrigger: DialogCloseTrigger,
+    CloseIcon: DialogCloseIcon,
+    Header: DialogHeader,
+    Body: DialogBody,
+    Footer: DialogFooter
+});
+export { Dialog_Dialog as Dialog, useDialog, useDialogContext };

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

@@ -0,0 +1,23 @@
+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"
+};
+export default Dialog_module;

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

@@ -0,0 +1,23 @@
+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"
+};
+export default Dialog_module;

package/dist/components/dialog/Dialog_module.css

@@ -0,0 +1,247 @@
+@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-block-start: 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)));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-If26oI[data-state], .content-efn3VB[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+
+    .content-efn3VB {
+      transition: none;
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+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/dialog/index.jsx

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