@zxkit/surface 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,180 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+
+interface CreatePushModalOptions<T> {
+    modals: {
+        [key in keyof T]: {
+            Wrapper: React$1.ComponentType<{
+                open?: boolean;
+                onOpenChange?: (open: boolean) => void;
+                children?: React$1.ReactNode;
+                defaultOpen?: boolean;
+            }>;
+            Component: React$1.ComponentType<T[key]>;
+        } | React$1.ComponentType<T[key]>;
+    };
+}
+declare function createPushModal<T>({ modals }: CreatePushModalOptions<T>): {
+    ModalProvider: () => react_jsx_runtime.JSX.Element;
+    pushModal: <T_1 extends keyof T, B extends (({ [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_4 ? T_4 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_4 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never) extends infer T_3 ? { [K in keyof T_3]: T_3[K]; } : never) & Record<never, never>>(name: T_1, ...args: (keyof ({ [K_1 in keyof B]: B[K_1]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K_1 in keyof B]: B[K_1]; } & Record<never, never> : never) extends never ? never : { [K_1 in keyof B]: B[K_1]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K_1 in keyof B]: B[K_1]; } & Record<never, never> : never) extends never ? [] : [props: B]) => void;
+    popModal: (name?: keyof T) => void;
+    popAllModals: () => void;
+    replaceWithModal: <T_1 extends keyof T, B extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never>(name: T_1, ...args: (keyof ({ [K in keyof B]: B[K]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K in keyof B]: B[K]; } & Record<never, never> : never) extends never ? never : { [K in keyof B]: B[K]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K in keyof B]: B[K]; } & Record<never, never> : never) extends never ? [] : [props: B]) => void;
+    onPushModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (open: boolean, props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void) => () => void;
+    onCloseModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void, options?: {
+        delay?: number;
+    }) => () => void;
+    useOnPushModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (open: boolean, props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void) => void;
+    useOnCloseModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void, options?: {
+        delay?: number;
+    }) => void;
+};
+
+interface WrapperProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+    defaultOpen?: boolean;
+    modal?: boolean;
+}
+interface ContentProps {
+    children?: React.ReactNode;
+    className?: string;
+    onAnimationEnd?: (...args: unknown[]) => void;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: Event) => void;
+    onInteractOutside?: (event: Event) => void;
+    [key: string]: unknown;
+}
+type Options = {
+    mobile: {
+        Wrapper: React.ComponentType<WrapperProps>;
+        Content: React.ComponentType<ContentProps>;
+    };
+    desktop: {
+        Wrapper: React.ComponentType<WrapperProps>;
+        Content: React.ComponentType<ContentProps>;
+    };
+    breakpoint?: number;
+};
+interface ResponsiveWrapperReturn {
+    Wrapper: React.ComponentType<WrapperProps>;
+    Content: React.ComponentType<ContentProps>;
+    usePreservedState: <T>(key: string, initialValue: T) => [T, React.Dispatch<React.SetStateAction<T>>];
+    usePreservedForm: <T extends FieldValues>(key: string, options: UseFormProps<T>) => UseFormReturn<T>;
+}
+declare function createResponsiveWrapper({ mobile, desktop, breakpoint, }: Options): ResponsiveWrapperReturn;
+
+export { createPushModal, createResponsiveWrapper };
+export type { ContentProps, ResponsiveWrapperReturn, WrapperProps };

package/dist/index.d.ts

@@ -0,0 +1,180 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+
+interface CreatePushModalOptions<T> {
+    modals: {
+        [key in keyof T]: {
+            Wrapper: React$1.ComponentType<{
+                open?: boolean;
+                onOpenChange?: (open: boolean) => void;
+                children?: React$1.ReactNode;
+                defaultOpen?: boolean;
+            }>;
+            Component: React$1.ComponentType<T[key]>;
+        } | React$1.ComponentType<T[key]>;
+    };
+}
+declare function createPushModal<T>({ modals }: CreatePushModalOptions<T>): {
+    ModalProvider: () => react_jsx_runtime.JSX.Element;
+    pushModal: <T_1 extends keyof T, B extends (({ [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_4 ? T_4 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_4 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never) extends infer T_3 ? { [K in keyof T_3]: T_3[K]; } : never) & Record<never, never>>(name: T_1, ...args: (keyof ({ [K_1 in keyof B]: B[K_1]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K_1 in keyof B]: B[K_1]; } & Record<never, never> : never) extends never ? never : { [K_1 in keyof B]: B[K_1]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K_1 in keyof B]: B[K_1]; } & Record<never, never> : never) extends never ? [] : [props: B]) => void;
+    popModal: (name?: keyof T) => void;
+    popAllModals: () => void;
+    replaceWithModal: <T_1 extends keyof T, B extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never>(name: T_1, ...args: (keyof ({ [K in keyof B]: B[K]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K in keyof B]: B[K]; } & Record<never, never> : never) extends never ? never : { [K in keyof B]: B[K]; } & Record<never, never> extends Record<string | number | symbol, unknown> ? { [K in keyof B]: B[K]; } & Record<never, never> : never) extends never ? [] : [props: B]) => void;
+    onPushModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (open: boolean, props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void) => () => void;
+    onCloseModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void, options?: {
+        delay?: number;
+    }) => () => void;
+    useOnPushModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (open: boolean, props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void) => void;
+    useOnCloseModal: <T_1 extends keyof T>(name: T_1 | "*", callback: (props: { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] extends infer T_2 ? T_2 extends { [key in keyof T]: React$1.ComponentType<T[key]> | {
+        Wrapper: React$1.ComponentType<{
+            open?: boolean;
+            onOpenChange?: (open: boolean) => void;
+            children?: React$1.ReactNode;
+            defaultOpen?: boolean;
+        }>;
+        Component: React$1.ComponentType<T[key]>;
+    }; }[T_1] ? T_2 extends React$1.ComponentType<infer P> | React$1.Component<infer P, {}, any> | {
+        Component: React$1.ComponentType<infer P>;
+    } ? P : never : never : never, name?: T_1 | undefined) => void, options?: {
+        delay?: number;
+    }) => void;
+};
+
+interface WrapperProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+    defaultOpen?: boolean;
+    modal?: boolean;
+}
+interface ContentProps {
+    children?: React.ReactNode;
+    className?: string;
+    onAnimationEnd?: (...args: unknown[]) => void;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: Event) => void;
+    onInteractOutside?: (event: Event) => void;
+    [key: string]: unknown;
+}
+type Options = {
+    mobile: {
+        Wrapper: React.ComponentType<WrapperProps>;
+        Content: React.ComponentType<ContentProps>;
+    };
+    desktop: {
+        Wrapper: React.ComponentType<WrapperProps>;
+        Content: React.ComponentType<ContentProps>;
+    };
+    breakpoint?: number;
+};
+interface ResponsiveWrapperReturn {
+    Wrapper: React.ComponentType<WrapperProps>;
+    Content: React.ComponentType<ContentProps>;
+    usePreservedState: <T>(key: string, initialValue: T) => [T, React.Dispatch<React.SetStateAction<T>>];
+    usePreservedForm: <T extends FieldValues>(key: string, options: UseFormProps<T>) => UseFormReturn<T>;
+}
+declare function createResponsiveWrapper({ mobile, desktop, breakpoint, }: Options): ResponsiveWrapperReturn;
+
+export { createPushModal, createResponsiveWrapper };
+export type { ContentProps, ResponsiveWrapperReturn, WrapperProps };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,302 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect, useState, Suspense, createContext, useContext, useRef, useSyncExternalStore } from 'react';
+import { Dialog } from 'radix-ui';
+import { useForm } from 'react-hook-form';
+
+function mitt(n){return {all:n=n||new Map,on:function(t,e){var i=n.get(t);i?i.push(e):n.set(t,[e]);},off:function(t,e){var i=n.get(t);i&&(e?i.splice(i.indexOf(e)>>>0,1):n.set(t,[]));},emit:function(t,e){var i=n.get(t);i&&i.slice().map(function(n){n(e);}),(i=n.get("*"))&&i.slice().map(function(n){n(t,e);});}}}
+
+function createPushModal({ modals }) {
+    const filterGarbage = (item) => {
+        if (item.open || !item.closedAt) {
+            return true;
+        }
+        return Date.now() - item.closedAt < 300;
+    };
+    const emitter = mitt();
+    function ModalProvider() {
+        const [state, setState] = useState([]);
+        // Remove closed modals from state after their exit animation completes
+        useEffect(() => {
+            const hasClosedModals = state.some((item) => typeof item.closedAt === 'number');
+            if (!hasClosedModals)
+                return;
+            const timer = setTimeout(() => {
+                setState((p) => p.filter(filterGarbage));
+            }, 350);
+            return () => {
+                clearTimeout(timer);
+            };
+        }, [state]);
+        useEffect(() => {
+            const pushHandler = ({ name, props }) => {
+                emitter.emit('change', { name, open: true, props });
+                setState((p) => [
+                    ...p,
+                    {
+                        key: Math.random().toString(),
+                        name,
+                        props,
+                        open: true,
+                    },
+                ].filter(filterGarbage));
+            };
+            const replaceHandler = ({ name, props }) => {
+                setState((p) => {
+                    // find last item to replace
+                    const last = p.findLast((item) => item.open);
+                    if (last) {
+                        // if found emit close event
+                        emitter.emit('change', { name: last.name, open: false, props: last.props });
+                    }
+                    emitter.emit('change', { name, open: true, props });
+                    return [
+                        // 1) close last item 2) filter garbage 3) add new item
+                        ...p
+                            .map((item) => {
+                            if (item.key === last?.key) {
+                                return { ...item, open: false, closedAt: Date.now() };
+                            }
+                            return item;
+                        })
+                            .filter(filterGarbage),
+                        {
+                            key: Math.random().toString(),
+                            name,
+                            props,
+                            open: true,
+                        },
+                    ];
+                });
+            };
+            const popHandler = ({ name }) => {
+                setState((items) => {
+                    // Find last open item index
+                    const index = name === undefined
+                        ? // Pick last open item if no name is provided
+                            items.findLastIndex((item) => item.open)
+                        : items.findLastIndex((item) => item.name === name && item.open);
+                    const match = items[index];
+                    if (match) {
+                        emitter.emit('change', {
+                            name: match.name,
+                            open: false,
+                            props: match.props,
+                        });
+                    }
+                    return items.map((item) => match?.key !== item.key ? item : { ...item, open: false, closedAt: Date.now() });
+                });
+            };
+            const popAllHandler = () => {
+                setState((items) => {
+                    items.forEach((item) => {
+                        if (item.open) {
+                            emitter.emit('change', { name: item.name, open: false, props: item.props });
+                        }
+                    });
+                    return items.map((item) => item.open ? { ...item, open: false, closedAt: Date.now() } : item);
+                });
+            };
+            emitter.on('push', pushHandler);
+            emitter.on('replace', replaceHandler);
+            emitter.on('pop', popHandler);
+            emitter.on('popAll', popAllHandler);
+            return () => {
+                emitter.off('push', pushHandler);
+                emitter.off('replace', replaceHandler);
+                emitter.off('pop', popHandler);
+                emitter.off('popAll', popAllHandler);
+            };
+        }, []);
+        return (jsx(Fragment, { children: state.map((item) => {
+                const modal = modals[item.name];
+                const Component = ('Component' in modal ? modal.Component : modal);
+                const Root = 'Wrapper' in modal ? modal.Wrapper : Dialog.Root;
+                return (jsx(Root, { open: item.open, onOpenChange: (isOpen) => {
+                        if (!isOpen) {
+                            popModal(item.name);
+                        }
+                    }, children: jsx(Suspense, { children: jsx(Component, { ...item.props }) }) }, item.key));
+            }) }));
+    }
+    const pushModal = (name, ...args) => {
+        const [props] = args;
+        return emitter.emit('push', {
+            name,
+            props: props ?? {},
+        });
+    };
+    const popModal = (name) => emitter.emit('pop', {
+        name,
+    });
+    const replaceWithModal = (name, ...args) => {
+        const [props] = args;
+        emitter.emit('replace', {
+            name,
+            props: props ?? {},
+        });
+    };
+    const popAllModals = () => emitter.emit('popAll');
+    const onPushModal = (name, callback) => {
+        const fn = (payload) => {
+            if (payload.name === name) {
+                callback(payload.open, payload.props, payload.name);
+            }
+            else if (name === '*') {
+                callback(payload.open, payload.props, payload.name);
+            }
+        };
+        emitter.on('change', fn);
+        return () => emitter.off('change', fn);
+    };
+    const onCloseModal = (name, callback, options) => {
+        const delay = options?.delay ?? 0;
+        const fn = (payload) => {
+            if (!payload.open) {
+                if (payload.name === name) {
+                    if (delay > 0) {
+                        setTimeout(() => {
+                            callback(payload.props, payload.name);
+                        }, delay);
+                    }
+                    else {
+                        callback(payload.props, payload.name);
+                    }
+                }
+                else if (name === '*') {
+                    if (delay > 0) {
+                        setTimeout(() => {
+                            callback(payload.props, payload.name);
+                        }, delay);
+                    }
+                    else {
+                        callback(payload.props, payload.name);
+                    }
+                }
+            }
+        };
+        emitter.on('change', fn);
+        return () => emitter.off('change', fn);
+    };
+    return {
+        ModalProvider,
+        pushModal,
+        popModal,
+        popAllModals,
+        replaceWithModal,
+        onPushModal,
+        onCloseModal,
+        useOnPushModal: (name, callback) => {
+            useEffect(() => {
+                return onPushModal(name, callback);
+            }, [name, callback]);
+        },
+        useOnCloseModal: (name, callback, options) => {
+            useEffect(() => {
+                return onCloseModal(name, callback, options);
+            }, [name, callback, options]);
+        },
+    };
+}
+
+function createResponsiveWrapper({ mobile, desktop, breakpoint = 640, }) {
+    // Create a context to share the isMobile state between Wrapper and Content
+    const ResponsiveContext = createContext(undefined);
+    const mediaQuery = `(max-width: ${breakpoint}px)`;
+    let mql = null;
+    function getMql() {
+        if (!mql)
+            mql = window.matchMedia(mediaQuery);
+        return mql;
+    }
+    function subscribe(callback) {
+        const m = getMql();
+        m.addEventListener('change', callback);
+        return () => m.removeEventListener('change', callback);
+    }
+    function getSnapshot() {
+        return getMql().matches;
+    }
+    function useIsMobile() {
+        return useSyncExternalStore(subscribe, getSnapshot, 
+        // server snapshot is always false (desktop) to match initial client render and avoid hydration mismatch
+        () => false);
+    }
+    const StateStoreContext = createContext(new Map());
+    function Wrapper(props) {
+        const isMobile = useIsMobile();
+        const stateStore = useRef(new Map()).current;
+        const WrapperComponent = isMobile ? mobile.Wrapper : desktop.Wrapper;
+        // Clear the preserved state store when the dialog/drawer closes
+        useEffect(() => {
+            if (props.open === false) {
+                stateStore.clear();
+            }
+        }, [props.open, stateStore]);
+        return (jsx(StateStoreContext.Provider, { value: stateStore, children: jsx(ResponsiveContext.Provider, { value: isMobile, children: jsx(WrapperComponent, { ...props }) }) }));
+    }
+    function Content(props) {
+        const contextIsMobile = useContext(ResponsiveContext);
+        if (contextIsMobile === undefined) {
+            throw new Error('Content must be used within a Wrapper component');
+        }
+        const ContentComponent = contextIsMobile ? mobile.Content : desktop.Content;
+        return jsx(ContentComponent, { ...props });
+    }
+    // Hook to preserve state across unmounts. State is stored in the StateStoreContext and keyed by the provided key.
+    function usePreservedState(key, initialValue) {
+        const store = useContext(StateStoreContext);
+        const [state, setState] = useState(() => {
+            // if the store already has a value for this key, use it.
+            // Otherwise, use the provided initial value
+            if (store.has(key))
+                return store.get(key);
+            return initialValue;
+        });
+        useEffect(() => {
+            store.set(key, state);
+        }, [store, key, state]);
+        return [state, setState];
+    }
+    // Hook to create a react-hook-form form with preserved state. Form state is stored in the StateStoreContext and keyed by the provided key.
+    function usePreservedForm(key, options) {
+        const store = useContext(StateStoreContext);
+        const hasStoredValues = store.has(key);
+        const form = useForm({
+            ...options,
+            // Use stored values as initial defaultValues so data is visible immediately (no flash)
+            defaultValues: (hasStoredValues ? store.get(key) : options.defaultValues),
+        });
+        // When restoring from store, the stored values ARE the defaultValues,
+        // so isDirty is false. Fix this by re-establishing the original defaults
+        // as the baseline, then restoring the stored values with keepDefaultValues.
+        const didRestore = useRef(hasStoredValues);
+        useEffect(() => {
+            if (didRestore.current) {
+                didRestore.current = false;
+                const currentValues = form.getValues();
+                // Set internal defaults back to the originals
+                form.reset(options.defaultValues);
+                // Restore stored values, keeping original defaults as the isDirty baseline
+                form.reset(currentValues, { keepDefaultValues: true });
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        useEffect(() => {
+            const subscription = form.watch((values) => {
+                store.set(key, values);
+            });
+            return () => subscription.unsubscribe();
+        }, [form, store, key]);
+        return form;
+    }
+    return {
+        Wrapper,
+        Content,
+        usePreservedState,
+        usePreservedForm,
+    };
+}
+
+export { createPushModal, createResponsiveWrapper };
+//# sourceMappingURL=index.js.map