@infonomic/uikit 1.0.0

package/dist/widgets/drawer/drawer-wrapper.js

@@ -0,0 +1,37 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import classnames from "classnames";
+import { useFocusTrap } from "@mantine/hooks";
+import { m } from "motion/react";
+import drawer_module from "./drawer.module.js";
+function DrawerWrapper({ className, children, onEscapeKey, ...rest }) {
+    const focusTrapRef = useFocusTrap();
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key && onEscapeKey) onEscapeKey(event);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        onEscapeKey
+    ]);
+    return /*#__PURE__*/ jsx(m.div, {
+        ref: focusTrapRef,
+        ...rest,
+        className: classnames(drawer_module["drawer-wrapper"], className),
+        initial: {
+            opacity: 0
+        },
+        animate: {
+            opacity: 1
+        },
+        exit: {
+            opacity: 0
+        },
+        children: children
+    });
+}
+export { DrawerWrapper };

package/dist/widgets/drawer/drawer.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import { DrawerContainer } from './drawer-container';
+import { DrawerContent } from './drawer-content';
+import type { ReactNode } from 'react';
+export interface DrawerProps {
+    id: string;
+    isOpen: boolean;
+    closeOnOverlayClick?: boolean;
+    onDismiss: () => void;
+    children: ReactNode;
+    width?: 'narrow' | 'medium' | 'wide';
+    topOffset?: string;
+}
+declare const Drawer: {
+    ({ id, isOpen, onDismiss, closeOnOverlayClick, children, width, topOffset, ...rest }: DrawerProps): React.ReactPortal | null;
+    displayName: string;
+    Container: typeof DrawerContainer;
+    Content: typeof DrawerContent;
+    Header: ({ ref, children, className, ...rest }: import("./drawer-header").DrawerHeaderProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+    TopActions: ({ ref, children, className, ...rest }: import("./drawer-top-actions").DrawerTopActionProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+};
+export { Drawer };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/widgets/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/widgets/drawer/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAKhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAetC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,OAAO,CAAA;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM;0FAST,WAAW;;;;;WA1CD,CAAC;;;WAAe,CAAC;;CA8F7B,CAAA;AASD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/widgets/drawer/drawer.js

@@ -0,0 +1,74 @@
+'use client'
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { AnimatePresence, LazyMotion } from "motion/react";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Overlay } from "../../components/overlay/index.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { getPortalRoot } from "../../utils/getPortalRoot.js";
+import { useDrawer } from "./drawer-context.js";
+import { DrawerContainer } from "./drawer-container.js";
+import { DrawerContent } from "./drawer-content.js";
+import { DrawerHeader } from "./drawer-header.js";
+import { DrawerTopActions } from "./drawer-top-actions.js";
+import { DrawerWrapper } from "./drawer-wrapper.js";
+import drawer_module from "./drawer.module.js";
+const typedStyles = drawer_module;
+const DomMax = async ()=>await import("./motionDomMax.js").then((mod)=>mod.default);
+const DomAnimation = async ()=>await import("./motionDomAnimation.js").then((mod)=>mod.default);
+const Drawer = ({ id, isOpen, onDismiss, closeOnOverlayClick, children, width = 'narrow', topOffset = '0', ...rest })=>{
+    const isMobile = useMediaQuery('(max-width: 768px)') ?? false;
+    const { addDrawer, removeDrawer, drawers } = useDrawer();
+    const depth = drawers.indexOf(id);
+    const handleOverlayDismiss = (e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        if (true === closeOnOverlayClick) null == onDismiss || onDismiss();
+    };
+    useEffect(()=>{
+        if (isOpen) addDrawer(id);
+        else removeDrawer(id);
+        return ()=>removeDrawer(id);
+    }, [
+        isOpen,
+        id,
+        addDrawer,
+        removeDrawer
+    ]);
+    const portal = getPortalRoot();
+    if (false === portal) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(LazyMotion, {
+        features: isMobile ? DomMax : DomAnimation,
+        children: /*#__PURE__*/ jsx(AnimatePresence, {
+            children: true === isOpen && /*#__PURE__*/ jsxs(DrawerWrapper, {
+                style: {
+                    zIndex: 20 + depth,
+                    top: topOffset
+                },
+                transition: {
+                    duration: 0.2
+                },
+                onEscapeKey: handleOverlayDismiss,
+                className: classnames(typedStyles[`drawer-${width}`], typedStyles[`drawer-depth-${depth.toString()}`]),
+                ...rest,
+                children: [
+                    /*#__PURE__*/ jsx(Overlay, {
+                        onClick: handleOverlayDismiss,
+                        style: {
+                            top: topOffset
+                        },
+                        isUnmounting: !(isOpen ?? false)
+                    }),
+                    children
+                ]
+            })
+        })
+    }), portal);
+};
+Drawer.displayName = 'Drawer';
+Drawer.Container = DrawerContainer;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.TopActions = DrawerTopActions;
+export { Drawer };

package/dist/widgets/drawer/drawer.module.js

@@ -0,0 +1,29 @@
+import "./drawer_module.css";
+const drawer_module = {
+    "drawer-wrapper": "drawer-wrapper-q0hBzd",
+    drawerWrapper: "drawer-wrapper-q0hBzd",
+    "drawer-container": "drawer-container-ssf1qn",
+    drawerContainer: "drawer-container-ssf1qn",
+    slideIn: "slideIn-dDQJvD",
+    "drawer-depth-0": "drawer-depth-0-VYE9YM",
+    drawerDepth0: "drawer-depth-0-VYE9YM",
+    "drawer-medium": "drawer-medium-ZFbdby",
+    drawerMedium: "drawer-medium-ZFbdby",
+    "drawer-wide": "drawer-wide-nXbxPs",
+    drawerWide: "drawer-wide-nXbxPs",
+    "drawer-depth-1": "drawer-depth-1-2CzoWM",
+    drawerDepth1: "drawer-depth-1-2CzoWM",
+    "drawer-depth-2": "drawer-depth-2-eR43PT",
+    drawerDepth2: "drawer-depth-2-eR43PT",
+    "drawer-": "drawer--tSM0mV",
+    drawer: "drawer--tSM0mV",
+    "drawer-narrow": "drawer-narrow-lsLgHp",
+    drawerNarrow: "drawer-narrow-lsLgHp",
+    "drawer-top-actions": "drawer-top-actions-FiHu4U",
+    drawerTopActions: "drawer-top-actions-FiHu4U",
+    "drawer-header": "drawer-header-BtfxvF",
+    drawerHeader: "drawer-header-BtfxvF",
+    "drawer-content": "drawer-content-QQqzOR",
+    drawerContent: "drawer-content-QQqzOR"
+};
+export { drawer_module as default };

package/dist/widgets/drawer/drawer_module.css

@@ -0,0 +1,109 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme;
+
+@layer infonomic-components {
+  .drawer-wrapper-q0hBzd {
+    z-index: 30;
+    opacity: 1;
+    flex-direction: column;
+    justify-content: end;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+
+  .drawer-container-ssf1qn {
+    background-color: var(--canvas-25);
+    height: 100%;
+    box-shadow: var(--shadow-md);
+    z-index: inherit;
+    position: absolute;
+    right: 0;
+  }
+
+  .drawer-container-ssf1qn[aria-hidden="false"] {
+    animation: .15s cubic-bezier(.16, 1, .3, 1) slideIn-dDQJvD;
+  }
+
+  .drawer-container-ssf1qn:is(.dark *) {
+    background: var(--canvas-800);
+  }
+
+  .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-0-VYE9YM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
+    width: 90%;
+  }
+
+  .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-1-2CzoWM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
+    width: 88%;
+  }
+
+  .drawer-depth-2-eR43PT.drawer--tSM0mV .drawer-container-ssf1qn, .drawer-depth-2-eR43PT.drawer-wide-nXbxPs .drawer-container-ssf1qn {
+    width: 86%;
+  }
+
+  @media (min-width: 768px) {
+    .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
+      width: 600px;
+    }
+
+    .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
+      width: 580px;
+    }
+
+    .drawer-depth-2-eR43PT.drawer--tSM0mV .drawer-container-ssf1qn {
+      width: 560px;
+    }
+  }
+
+  .drawer-narrow-lsLgHp .drawer-container-ssf1qn {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
+
+  .drawer-container-ssf1qn[aria-hidden="true"] {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  .drawer-top-actions-FiHu4U {
+    padding-top: var(--spacing-3);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    justify-content: flex-end;
+    align-items: center;
+    max-width: 100%;
+    padding-bottom: 0;
+    display: flex;
+  }
+
+  .drawer-header-BtfxvF {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--gap-3);
+    padding-top: 0;
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    max-width: 100%;
+    display: flex;
+  }
+
+  .drawer-header-BtfxvF h2, .drawer-header-BtfxvF h3 {
+    margin: 0;
+  }
+
+  .drawer-content-QQqzOR {
+    padding: var(--spacing-6);
+  }
+
+  @keyframes slideIn-dDQJvD {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+

package/dist/widgets/drawer/motionDomAnimation.d.ts

@@ -0,0 +1,3 @@
+import { domAnimation } from 'motion/react';
+export default domAnimation;
+//# sourceMappingURL=motionDomAnimation.d.ts.map

package/dist/widgets/drawer/motionDomAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionDomAnimation.d.ts","sourceRoot":"","sources":["../../../src/widgets/drawer/motionDomAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,eAAe,YAAY,CAAA"}

package/dist/widgets/drawer/motionDomAnimation.js

@@ -0,0 +1,4 @@
+'use client'
+import { domAnimation } from "motion/react";
+const motionDomAnimation = domAnimation;
+export { motionDomAnimation as default };

package/dist/widgets/drawer/motionDomMax.d.ts

@@ -0,0 +1,3 @@
+import { domMax } from 'motion/react';
+export default domMax;
+//# sourceMappingURL=motionDomMax.d.ts.map

package/dist/widgets/drawer/motionDomMax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionDomMax.d.ts","sourceRoot":"","sources":["../../../src/widgets/drawer/motionDomMax.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,eAAe,MAAM,CAAA"}

package/dist/widgets/drawer/motionDomMax.js

@@ -0,0 +1,4 @@
+'use client'
+import { domMax } from "motion/react";
+const motionDomMax = domMax;
+export { motionDomMax as default };

package/dist/widgets/modal/modal-actions.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+type ModalActionsIntrinsicProps = React.JSX.IntrinsicElements['div'];
+export interface ModalActionsProps extends ModalActionsIntrinsicProps {
+    className?: string;
+}
+export declare const ModalActions: ({ ref, children, className, ...rest }: ModalActionsProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=modal-actions.d.ts.map

package/dist/widgets/modal/modal-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-actions.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,KAAK,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACpE,MAAM,WAAW,iBAAkB,SAAQ,0BAA0B;IACnE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAyB,uCAK/C,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAMA,CAAA"}

package/dist/widgets/modal/modal-actions.js

@@ -0,0 +1,13 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import modal_module from "./modal.module.js";
+const modal_actions_ModalActions = function({ ref, children, className, ...rest }) {
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        ...rest,
+        className: classnames(modal_module["modal-actions"], className),
+        children: children
+    });
+};
+export { modal_actions_ModalActions as ModalActions };

package/dist/widgets/modal/modal-container.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+type ModalContainerIntrinsicProps = React.JSX.IntrinsicElements['div'];
+export interface ModalContainerProps extends ModalContainerIntrinsicProps {
+    className?: string;
+}
+export declare const ModalContainer: ({ ref, children, className, ...rest }: ModalContainerProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=modal-container.d.ts.map

package/dist/widgets/modal/modal-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-container.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,KAAK,4BAA4B,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACtE,MAAM,WAAW,mBAAoB,SAAQ,4BAA4B;IACvE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,cAAc,GAA2B,uCAKnD,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAMA,CAAA"}

package/dist/widgets/modal/modal-container.js

@@ -0,0 +1,13 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import modal_module from "./modal.module.js";
+const modal_container_ModalContainer = function({ ref, children, className, ...rest }) {
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames(modal_module["modal-container"], className),
+        ...rest,
+        children: children
+    });
+};
+export { modal_container_ModalContainer as ModalContainer };

package/dist/widgets/modal/modal-content.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+type ModalContentIntrinsicProps = React.JSX.IntrinsicElements['div'];
+export interface ModalContentProps extends ModalContentIntrinsicProps {
+    className?: string;
+}
+export declare const ModalContent: ({ ref, children, className, ...rest }: ModalContentProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=modal-content.d.ts.map

package/dist/widgets/modal/modal-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,KAAK,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACpE,MAAM,WAAW,iBAAkB,SAAQ,0BAA0B;IACnE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAyB,uCAK/C,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAMA,CAAA"}

package/dist/widgets/modal/modal-content.js

@@ -0,0 +1,13 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import modal_module from "./modal.module.js";
+const modal_content_ModalContent = function({ ref, children, className, ...rest }) {
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        ...rest,
+        className: classnames(modal_module["modal-content"], className),
+        children: children
+    });
+};
+export { modal_content_ModalContent as ModalContent };

package/dist/widgets/modal/modal-header.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+type ModalHeaderIntrinsicProps = React.JSX.IntrinsicElements['div'];
+export interface ModalHeaderProps extends ModalHeaderIntrinsicProps {
+    className?: string;
+}
+export declare const ModalHeader: ({ ref, children, className, ...rest }: ModalHeaderProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=modal-header.d.ts.map

package/dist/widgets/modal/modal-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,KAAK,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACnE,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,GAAwB,uCAK7C,gBAAgB,GAAG;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAOA,CAAA"}

package/dist/widgets/modal/modal-header.js

@@ -0,0 +1,17 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import modal_module from "./modal.module.js";
+const modal_header_ModalHeader = function({ ref, children, className, ...rest }) {
+    const classes = classnames(modal_module["modal-header"], 'prose', className);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            overflowWrap: 'anywhere'
+        },
+        ref: ref,
+        ...rest,
+        className: classes,
+        children: children
+    });
+};
+export { modal_header_ModalHeader as ModalHeader };

package/dist/widgets/modal/modal-wrapper.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { HTMLMotionProps } from 'motion/react';
+export interface ModalWrapperProps extends HTMLMotionProps<'div'> {
+    children: React.ReactNode;
+    onEscapeKey?: (e: any) => void;
+}
+export declare function ModalWrapper({ children, onEscapeKey, ...rest }: ModalWrapperProps): React.JSX.Element;
+//# sourceMappingURL=modal-wrapper.d.ts.map

package/dist/widgets/modal/modal-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-wrapper.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-wrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD,MAAM,WAAW,iBAAkB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BvC"}

package/dist/widgets/modal/modal-wrapper.js

@@ -0,0 +1,36 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useFocusTrap } from "@mantine/hooks";
+import { m } from "motion/react";
+import modal_module from "./modal.module.js";
+function ModalWrapper({ children, onEscapeKey, ...rest }) {
+    const focusTrapRef = useFocusTrap();
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key && onEscapeKey) onEscapeKey(event);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        onEscapeKey
+    ]);
+    return /*#__PURE__*/ jsx(m.div, {
+        ref: focusTrapRef,
+        ...rest,
+        className: modal_module["modal-wrapper"],
+        initial: {
+            opacity: 0
+        },
+        animate: {
+            opacity: 1
+        },
+        exit: {
+            opacity: 0
+        },
+        children: children
+    });
+}
+export { ModalWrapper };

package/dist/widgets/modal/modal.d.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+export interface ModalProps {
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    closeOnOverlayClick?: boolean;
+    children?: React.ReactNode;
+}
+export declare const ModalContext: React.Context<{
+    onDismiss?: () => void;
+}>;
+export type UseModalProps = ReturnType<typeof useModal>;
+export declare function useModal(): {
+    onDismiss: () => void;
+    onOpen: () => void;
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare function Modal({ isOpen, onDismiss, closeOnOverlayClick, children, ...rest }: ModalProps): React.ReactPortal | null;
+declare namespace Modal {
+    var displayName: string;
+    var Container: ({ ref, children, className, ...rest }: import("./modal-container").ModalContainerProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+    var Header: ({ ref, children, className, ...rest }: import("./modal-header").ModalHeaderProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+    var Content: ({ ref, children, className, ...rest }: import("./modal-content").ModalContentProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+    var Actions: ({ ref, children, className, ...rest }: import("./modal-actions").ModalActionsProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+}
+export { Modal };
+//# sourceMappingURL=modal.d.ts.map

package/dist/widgets/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY;gBACX,MAAM,IAAI;EAClB,CAAA;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEvD,wBAAgB,QAAQ,IAAI;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACzD,CAiBA;AAED,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CAkCvC;kBAxCQ,KAAK;;;WAlDK,CAAC;;;WAAnB,CAAC;;;WAAK,CAAC;;;WAAD,CAAC;;;AAmGR,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/widgets/modal/modal.js

@@ -0,0 +1,71 @@
+'use client'
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, LazyMotion } from "motion/react";
+import { Overlay } from "../../components/overlay/index.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { getPortalRoot } from "../../utils/getPortalRoot.js";
+import { ModalActions } from "./modal-actions.js";
+import { ModalContainer } from "./modal-container.js";
+import { ModalContent } from "./modal-content.js";
+import { ModalHeader } from "./modal-header.js";
+import { ModalWrapper } from "./modal-wrapper.js";
+const DomMax = async ()=>await import("./motionDomMax.js").then((mod)=>mod.default);
+const DomAnimation = async ()=>await import("./motionDomAnimation.js").then((mod)=>mod.default);
+const ModalContext = /*#__PURE__*/ createContext({});
+function useModal() {
+    const [isOpen, setIsOpen] = useState(false);
+    const onDismiss = useCallback(()=>{
+        setIsOpen(false);
+    }, []);
+    const onOpen = useCallback(()=>{
+        setIsOpen(true);
+    }, []);
+    return {
+        onDismiss,
+        onOpen,
+        isOpen,
+        setIsOpen
+    };
+}
+function Modal({ isOpen, onDismiss, closeOnOverlayClick, children, ...rest }) {
+    const isMobile = useMediaQuery('(max-width: 768px)') ?? false;
+    const handleOverlayDismiss = (e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        if (true === closeOnOverlayClick) null == onDismiss || onDismiss();
+    };
+    const portal = getPortalRoot();
+    if (false === portal) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(ModalContext.Provider, {
+        value: {
+            onDismiss
+        },
+        children: /*#__PURE__*/ jsx(LazyMotion, {
+            features: isMobile ? DomMax : DomAnimation,
+            children: /*#__PURE__*/ jsx(AnimatePresence, {
+                children: true === isOpen && /*#__PURE__*/ jsxs(ModalWrapper, {
+                    transition: {
+                        duration: 0.2
+                    },
+                    onEscapeKey: handleOverlayDismiss,
+                    ...rest,
+                    children: [
+                        /*#__PURE__*/ jsx(Overlay, {
+                            onClick: handleOverlayDismiss,
+                            isUnmounting: !(isOpen ?? false)
+                        }),
+                        children
+                    ]
+                })
+            })
+        })
+    }), portal);
+}
+Modal.displayName = 'Modal';
+Modal.Container = ModalContainer;
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Actions = ModalActions;
+export { Modal, ModalContext, useModal };

package/dist/widgets/modal/modal.module.js

@@ -0,0 +1,14 @@
+import "./modal_module.css";
+const modal_module = {
+    "modal-wrapper": "modal-wrapper-wF5Mv1",
+    modalWrapper: "modal-wrapper-wF5Mv1",
+    "modal-container": "modal-container-PPkPyj",
+    modalContainer: "modal-container-PPkPyj",
+    "modal-header": "modal-header-ewl_k2",
+    modalHeader: "modal-header-ewl_k2",
+    "modal-content": "modal-content-eDnix2",
+    modalContent: "modal-content-eDnix2",
+    "modal-actions": "modal-actions-FxnG8C",
+    modalActions: "modal-actions-FxnG8C"
+};
+export { modal_module as default };