roks-rjsc 0.1.0 → 0.2.1

package/README.md

@@ -20,16 +20,16 @@
 
  Import named exports from the package root. Examples below assume React 18.
 
- Basic component:
+Core components:
 
- ```tsx
- import React from 'react';
- import { Button } from 'roks-rjsc';
+```tsx
+import React from 'react';
+import { /* core exports */ } from 'roks-rjsc';
 
- export default function App() {
-	 return <Button onClick={() => alert('clicked')}>Click me</Button>;
- }
- ```
+export default function App() {
+	return <div>Your app root</div>;
+}
+```
 
  Loading provider and hook:
 
@@ -87,18 +87,21 @@
 
  export default function App() {
 	 return (
-		 <BaseModalProvider>
-			 <StaticExample />
-			 <DynamicExample />
-		 </BaseModalProvider>
+		<BaseModalProvider>
+			<StaticExample />
+			<DynamicExample />
+		</BaseModalProvider>
 	 )
  }
  ```
 
- API (top-level exports)
- - `Button` - basic button component
- - `LoadingProvider`, `useLoading`, `Loading`, `AnimationType` - loading utilities
- - `BaseModalProvider`, `useBaseModal`, `useStaticModal`, `useDynamicModal`, `RenderMode` - modal system
+API (top-level exports)
+- `LoadingProvider`, `useLoading`, `Loading`, `AnimationType` - loading utilities (available via `roks-rjsc/loading`)
+- `BaseModalProvider`, `useBaseModal`, `useStaticModal`, `useDynamicModal`, `RenderMode` - modal system (available via `roks-rjsc/modal`)
+
+Subpath imports
+- `roks-rjsc/modal`: exports `BaseModalProvider`, `useBaseModal`, `useStaticModal`, `useDynamicModal`, `RenderMode`
+- `roks-rjsc/loading`: exports `LoadingProvider`, `useLoading`, `Loading`, `AnimationType`
 
  ## License
 

package/dist/components/Loading.d.ts

@@ -0,0 +1,3 @@
+export default function Loading({ isLoading }: {
+    isLoading: boolean;
+}): null;

package/dist/contexts/LoadingContext.d.ts

@@ -0,0 +1,38 @@
+import { default as React, ReactNode } from 'react';
+import { default as EventEmitter } from '../utils/EventEmitter';
+type LoadingEvents = {
+    change: {
+        isLoading: boolean;
+    } | null;
+    start: null;
+    stop: null;
+};
+export declare const loadingEventTarget: EventEmitter<LoadingEvents>;
+export declare const AnimationType: {
+    readonly Spin: "spin";
+    readonly FadeInOut: "fadeInOut";
+    readonly None: "none";
+};
+export type AnimationType = (typeof AnimationType)[keyof typeof AnimationType];
+interface LoadingContextType {
+    isLoading: boolean;
+    startLoading: () => void;
+    stopLoading: () => void;
+    loadingEventTarget: EventEmitter<LoadingEvents>;
+    overrideLoading: (state: boolean | null) => void;
+}
+export declare const LoadingContext: React.Context<LoadingContextType | undefined>;
+export declare const LoadingProvider: React.FC<{
+    id?: string;
+    children: ReactNode | null;
+    loadingComponent?: React.ComponentType | React.ReactElement;
+    animationType?: AnimationType;
+    animationDuration?: number;
+    wrapperStyle?: React.CSSProperties;
+    wrapperClassName?: string;
+    wrapperId?: string;
+    animationWrapperStyle?: React.CSSProperties;
+    animationWrapperClassName?: string;
+    animationWrapperId?: string;
+}>;
+export {};

package/dist/contexts/ModalContext.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export declare const BaseModalContext: React.Context<BaseModalContextType | undefined>;
+export declare const RenderMode: {
+    STACKED: number;
+    CURRENT_ONLY: number;
+    CURRENT_HIDDEN_STACK: number;
+};
+export type RenderMode = (typeof RenderMode)[keyof typeof RenderMode];
+export interface BaseModalContextType {
+    modalCount: number;
+    renderMode?: RenderMode;
+    currentModalId?: string;
+    pushModal: (el: React.ReactNode, modalId?: string, isDynamic?: boolean) => string;
+    popModal: (idEl: string | React.ReactNode) => boolean;
+    updateModalContent: (modalId: string, newContent: React.ReactNode) => void;
+    getModalWindowRef: (modalId: string) => HTMLDivElement | undefined;
+    focusModal: (modalId: string) => boolean;
+    getModalOrderIndex: (modalId: string) => number;
+}
+export default function BaseModalProvider({ children, wrapperId, renderMode, wrapperStyle }: {
+    children: React.ReactNode;
+    wrapperId?: string;
+    renderMode?: RenderMode;
+    wrapperStyle?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useAsyncLocalStorageState.d.ts

@@ -0,0 +1,17 @@
+export type useAsyncLocalStorageStateOptions<T> = {
+    defaultValue?: T | (() => T | Promise<T>);
+    storageSync?: boolean;
+    resetStorage?: boolean;
+    resetIfError?: boolean;
+    serializer?: {
+        stringify: (value: unknown) => Promise<string>;
+        parse: (value: string) => Promise<unknown>;
+    };
+};
+export type useAsyncLocalStorageStateReturnType<T> = [
+    T,
+    (value: T | ((prevState: T) => T)) => Promise<void>,
+    () => void
+];
+export declare function useAsyncLocalStorageState<T>(key: string, options?: useAsyncLocalStorageStateOptions<T>): useAsyncLocalStorageStateReturnType<T>;
+export default useAsyncLocalStorageState;

package/dist/hooks/useBaseModal.d.ts

@@ -0,0 +1,3 @@
+import { BaseModalContextType, RenderMode } from '../contexts/ModalContext';
+export default function useBaseModal(): BaseModalContextType;
+export { RenderMode };

package/dist/hooks/useDynamicModal.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { RenderMode } from '../contexts/ModalContext';
+export default function useDynamicModal(id?: string): [(el: JSX.Element) => ReactNode, () => void, () => void, () => void, string, boolean];
+export { RenderMode };

package/dist/hooks/useLoading.d.ts

@@ -0,0 +1,16 @@
+declare const useLoading: () => {
+    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
+    isLoading: boolean;
+    loadingEventTarget: import('../utils/EventEmitter').default<{
+        change: {
+            isLoading: boolean;
+        } | null;
+        start: null;
+        stop: null;
+    }>;
+    overrideLoading: (state: boolean | null) => void;
+    startLoading: () => void;
+    stopLoading: () => void;
+    isLocalLoading: boolean;
+};
+export default useLoading;

package/dist/hooks/useStaticModal.d.ts

@@ -0,0 +1,3 @@
+import { RenderMode } from '../contexts/ModalContext';
+export { RenderMode };
+export default function useStaticModal(id?: string): [(el: React.ReactNode) => () => boolean, () => boolean, string, boolean, (newContent: React.ReactNode) => void];

package/dist/index.cjs.js

@@ -1,54 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("react"),N=require("react-dom"),F=({children:o,onClick:e})=>c.jsx("button",{onClick:e,children:o});class T extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(e,n){return this.addEventListener(e,f=>n(f.detail),{signal:this.controller.signal}),this}once(e,n){return this.addEventListener(e,f=>n(f.detail),{signal:this.controller.signal,once:!0}),this}emit(e,n){return this.dispatchEvent(new CustomEvent(e,{detail:n}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const C=new T,w={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},I=({animationType:o=w.Spin,animationDuration:e,children:n,style:f,className:g,id:r})=>{const u=o,h=o===w.Spin?1:o===w.FadeInOut?2:0,d=e||h,s=o===w.Spin?"linear":o===w.FadeInOut?"ease-in-out":"linear",m=o===w.None?"none":`${u} ${d}s ${s} infinite`;return c.jsx("div",{style:{animation:m,...f},className:g,id:r,children:n})},$=()=>c.jsx("div",{id:"loading-circle",style:{width:"60px",height:"60px",border:"10px solid #f3f3f3",borderTop:"10px solid #009b4bff",borderRadius:"50%"}}),U=()=>c.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},children:"Please wait..."}),P=a.createContext(void 0),W=({children:o,loadingComponent:e,animationType:n=w.FadeInOut,animationDuration:f,wrapperStyle:g,wrapperClassName:r,wrapperId:u,animationWrapperStyle:h,animationWrapperClassName:d,animationWrapperId:s})=>{e=e||(n===w.Spin?$:U);const[m,p]=a.useState(0),[R,E]=a.useState(null),b=R??m>0,j=M=>E(M),k=()=>p(M=>M+1),A=()=>p(M=>Math.max(0,M-1)),L=a.useRef(null);a.useEffect(()=>{C.emit("change",{isLoading:b}),C.emit(b?"start":"stop",null),b?(L.current?.showModal(),document.body.setAttribute("inert","")):b||document.body.removeAttribute("inert")},[m]),a.useEffect(()=>()=>{p(0),C.removeAllListeners()},[]);const y=u||"loading-dialog";return c.jsxs(P.Provider,{value:{get isLoading(){return b},startLoading:k,stopLoading:A,loadingEventTarget:C,overrideLoading:j},children:[o,b&&N.createPortal(c.jsxs(c.Fragment,{children:[c.jsx("style",{children:`
-                        dialog#${y}[open] {
-                            display: flex !important;
-                            justify-content: center;
-                            align-items: center;
-                            width: 100vw;
-                            height: 100vh;
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                        @keyframes spin {
-                            0% { transform: rotate(0deg); }
-                            100% { transform: rotate(360deg); }
-                        }
-                        @keyframes fadeInOut {
-                            0%, 100% { opacity: 0.2; }
-                            50% { opacity: 1; }
-                        }
-                        body:has(dialog#${y}[open]) {
-                            overflow: hidden;
-                        }
-                        body {
-                            scrollbar-gutter: stable;
-                        }
-                    `}),c.jsx("dialog",{ref:L,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...g},className:r,id:y,children:c.jsx(I,{animationType:n,animationDuration:f,style:h,className:d,id:s,children:a.isValidElement(e)?e:a.createElement(e)})})]}),document.body)]})},B=()=>{const o=a.useContext(P);if(!o)throw new Error("useLoading must be used within a LoadingProvider");const e=a.useRef(0),{startLoading:n,stopLoading:f,isLoading:g,...r}=o,u=()=>{n(),e.current+=1},h=()=>{e.current>0&&(f(),e.current-=1)};return{startLoading:u,stopLoading:h,get isLocalLoading(){return e.current>0},...r,asyncUseLoading:async s=>{u();try{return await s}finally{h()}},isLoading:g}};function _({isLoading:o=!1}){const e=B();return a.useEffect(()=>(o?e.startLoading():e.stopLoading(),()=>{o&&e.stopLoading()}),[o]),null}const S=a.createContext(void 0),x={STACKED:0,CURRENT_ONLY:1,CURRENT_HIDDEN_STACK:2};function K({children:o,wrapperId:e,renderMode:n=x.STACKED,wrapperStyle:f}){const g=a.useRef(null),r=a.useRef(new Map),[u,h]=a.useState(r.current),d=Array.from(u.values()),s=Array.from(u.keys()),m=a.useRef(new Map),[p,R]=a.useState(void 0),E=(t,i=Math.random().toString(36).substring(2,6),l=!1)=>{if(s.indexOf(i)!==-1)return console.warn(`Modal with id ${i} already exists. Choose a different id.`),i;let D=[t,l];return r.current=new Map(r.current),r.current.set(i,D),h(new Map(r.current)),i},b=t=>{let i="";if(typeof t!="string"){for(let[l,v]of r.current.entries())if(v[0]===t){i=l;break}}else typeof t=="string"&&(i=t);return r.current.has(i)?(r.current=new Map(r.current),r.current.delete(i),h(new Map(r.current)),!0):!1},j=(t,i)=>{if(r.current.has(t)){let l=r.current.get(t);if(l[1]===!1){console.warn(`Modal with id ${t} is dynamic. Cannot update content.`);return}l[0]=i,r.current.set(t,l),h(new Map(r.current))}},k=t=>{if(!u.has(t))return!1;let i=r.current.get(t);return r.current.delete(t),r.current.set(t,i),h(new Map(r.current)),!0},A=t=>s.indexOf(t),L=t=>m.current.get(t);a.useEffect(()=>{const t=s[s.length-1];t!==void 0?(g.current?.showModal(),document.body.setAttribute("inert","")):t===void 0&&(g.current?.close(),document.body.removeAttribute("inert")),R(t)},[u]);const y=e||"base-modal-wrapper",M=a.useCallback((t,i)=>{t?m.current.set(i,t):m.current.delete(i)},[]),O=()=>{switch(n){case x.STACKED:return d.map(([t,i],l)=>c.jsx("div",{ref:v=>M(v,s[l]),className:"modal-window",id:s[l],style:{display:"block",zIndex:s[l]===p?1e3:100},...p!==s[l]?{inert:""}:{},children:i?null:t},s[l]));case x.CURRENT_ONLY:return d.length>0?c.jsx("div",{id:s[d.length-1],ref:t=>M(t,s[d.length-1]),className:"modal-window",style:{display:"block"},children:d[d.length-1][1]?null:d[d.length-1][0]},s[d.length-1]):null;case x.CURRENT_HIDDEN_STACK:return d.length>0?d.map(([t,i],l)=>c.jsx("div",{ref:v=>M(v,s[l]),id:s[l],className:"modal-window",style:{display:p===s[l]?"block":"none"},...p!==s[l]?{inert:""}:{},children:i?null:t},s[l])):null}};return c.jsxs(S.Provider,{value:{modalCount:0,get renderMode(){return n},pushModal:E,popModal:b,currentModalId:p,updateModalContent:j,getModalWindowRef:L,focusModal:k,getModalOrderIndex:A},children:[o,s.length===0?null:N.createPortal(c.jsxs(c.Fragment,{children:[c.jsx("style",{children:`
-                        dialog#${y}[open] {
-                            display: flex !important;
-                            justify-content: center;
-                            align-items: center;
-                            width: 100vw;
-                            height: 100vh;
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                        body:has(dialog#${y}[open]) {
-                            overflow: hidden;
-                        }
-                        body {
-                            scrollbar-gutter: stable;
-                        }
-                        .modal-wrapper{
-                            border: none;
-                            padding: 0;
-                            background: unset;
-                        }
-                        .modal-window {
-                            position: absolute;
-                            width: 100%;
-                            height: 100%;
-                            display: none;
-                            background-color: rgba(0, 0, 0, 0.1);
-                            backdrop-filter: blur(2px);
-                        }
-                    `}),c.jsx("dialog",{className:"modal-wrapper",ref:g,id:y,style:f,children:O()})]}),document.body)]})}function q(){const o=a.useContext(S);if(!o)throw new Error("useBaseModal must be used within a BaseModalProvider");return o}function z(o=Math.random().toString(36).substring(2,6)){const e=a.useContext(S);if(!e)throw new Error("useBaseModal must be used within a BaseModalProvider");let n=a.useRef(o);const f=u=>(e.pushModal(u,n.current),g),g=()=>e.popModal(n.current),r=u=>{e.updateModalContent(n.current,u)};return[f,g,n.current,e.currentModalId===n.current,r]}function H(o=Math.random().toString(36).substring(2,6)){const e=a.useContext(S);if(!e)throw new Error("useBaseModal must be used within a BaseModalProvider");let n=a.useRef(o);const f=e.currentModalId===n.current;return[d=>e.getModalWindowRef(n.current)?N.createPortal(d,e.getModalWindowRef(n.current)):null,()=>{e.pushModal(null,n.current,!0)[1]},()=>{e.popModal(n.current)},()=>{e.focusModal(n.current)},n.current,f]}exports.AnimationType=w;exports.BaseModalProvider=K;exports.Button=F;exports.Loading=_;exports.LoadingProvider=W;exports.RenderMode=x;exports.useBaseModal=q;exports.useDynamicModal=H;exports.useLoading=B;exports.useStaticModal=z;
+"use strict";

package/dist/index.d.ts

@@ -1,96 +1 @@
-import { default as default_2 } from 'react';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-export declare const AnimationType: {
-    readonly Spin: "spin";
-    readonly FadeInOut: "fadeInOut";
-    readonly None: "none";
-};
-
-export declare type AnimationType = (typeof AnimationType)[keyof typeof AnimationType];
-
-declare interface BaseModalContextType {
-    modalCount: number;
-    renderMode?: RenderMode;
-    currentModalId?: string;
-    pushModal: (el: default_2.ReactNode, modalId?: string, isDynamic?: boolean) => string;
-    popModal: (idEl: string | default_2.ReactNode) => boolean;
-    updateModalContent: (modalId: string, newContent: default_2.ReactNode) => void;
-    getModalWindowRef: (modalId: string) => HTMLDivElement | undefined;
-    focusModal: (modalId: string) => boolean;
-    getModalOrderIndex: (modalId: string) => number;
-}
-
-export declare function BaseModalProvider({ children, wrapperId, renderMode, wrapperStyle }: {
-    children: default_2.ReactNode;
-    wrapperId?: string;
-    renderMode?: RenderMode;
-    wrapperStyle?: default_2.CSSProperties;
-}): JSX_2.Element;
-
-export declare const Button: ({ children, onClick }: ButtonProps) => JSX_2.Element;
-
-declare interface ButtonProps {
-    children: default_2.ReactNode;
-    onClick?: () => void;
-}
-
-declare class EventEmitter<T extends EventMap> extends EventTarget {
-    private controller;
-    on<K extends keyof T>(type: K, callback: (detail: T[K]) => void): this;
-    once<K extends keyof T>(type: K, callback: (detail: T[K]) => void): this;
-    emit<K extends keyof T>(type: K, detail: T[K]): boolean;
-    removeAllListeners(): void;
-}
-
-declare type EventMap = Record<string, any>;
-
-export declare function Loading({ isLoading }: {
-    isLoading: boolean;
-}): null;
-
-export declare const LoadingProvider: default_2.FC<{
-    children: ReactNode;
-    loadingComponent?: default_2.ComponentType | default_2.ReactElement;
-    animationType?: AnimationType;
-    animationDuration?: number;
-    wrapperStyle?: default_2.CSSProperties;
-    wrapperClassName?: string;
-    wrapperId?: string;
-    animationWrapperStyle?: default_2.CSSProperties;
-    animationWrapperClassName?: string;
-    animationWrapperId?: string;
-}>;
-
-export declare const RenderMode: {
-    STACKED: number;
-    CURRENT_ONLY: number;
-    CURRENT_HIDDEN_STACK: number;
-};
-
-export declare type RenderMode = (typeof RenderMode)[keyof typeof RenderMode];
-
-export declare function useBaseModal(): BaseModalContextType;
-
-export declare function useDynamicModal(id?: string): [(el: JSX.Element) => ReactNode, () => void, () => void, () => void, string, boolean];
-
-export declare const useLoading: () => {
-    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
-    isLoading: boolean;
-    loadingEventTarget: EventEmitter<    {
-    change: {
-    isLoading: boolean;
-    } | null;
-    start: null;
-    stop: null;
-    }>;
-    overrideLoading: (state: boolean) => void;
-    startLoading: () => void;
-    stopLoading: () => void;
-    isLocalLoading: boolean;
-};
-
-export declare function useStaticModal(id?: string): [(el: React.ReactNode) => () => boolean, () => boolean, string, boolean, (newContent: React.ReactNode) => void];
-
-export { }
+export {};

package/dist/index.esm.js

@@ -1,309 +1 @@
-import { jsx as f, jsxs as S, Fragment as $ } from "react/jsx-runtime";
-import I, { useState as E, useRef as y, useEffect as R, createContext as T, useContext as k, useCallback as K } from "react";
-import { createPortal as D } from "react-dom";
-const Q = ({ children: o, onClick: e }) => /* @__PURE__ */ f("button", { onClick: e, children: o });
-class j extends EventTarget {
-  constructor() {
-    super(...arguments), this.controller = new AbortController();
-  }
-  on(e, n) {
-    return this.addEventListener(
-      e,
-      (c) => n(c.detail),
-      { signal: this.controller.signal }
-    ), this;
-  }
-  once(e, n) {
-    return this.addEventListener(
-      e,
-      (c) => n(c.detail),
-      {
-        signal: this.controller.signal,
-        once: !0
-      }
-    ), this;
-  }
-  emit(e, n) {
-    return this.dispatchEvent(new CustomEvent(e, { detail: n }));
-  }
-  removeAllListeners() {
-    this.controller.abort(), this.controller = new AbortController();
-  }
-}
-const C = new j(), M = {
-  Spin: "spin",
-  FadeInOut: "fadeInOut",
-  None: "none"
-}, z = ({ animationType: o = M.Spin, animationDuration: e, children: n, style: c, className: u, id: r }) => {
-  const d = o, g = o === M.Spin ? 1 : o === M.FadeInOut ? 2 : 0, l = e || g, a = o === M.Spin ? "linear" : o === M.FadeInOut ? "ease-in-out" : "linear", w = o === M.None ? "none" : `${d} ${l}s ${a} infinite`;
-  return /* @__PURE__ */ f("div", { style: { animation: w, ...c }, className: u, id: r, children: n });
-}, H = () => /* @__PURE__ */ f("div", { id: "loading-circle", style: { width: "60px", height: "60px", border: "10px solid #f3f3f3", borderTop: "10px solid #009b4bff", borderRadius: "50%" } }), Y = () => /* @__PURE__ */ f("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, children: "Please wait..." }), U = T(void 0), X = ({ children: o, loadingComponent: e, animationType: n = M.FadeInOut, animationDuration: c, wrapperStyle: u, wrapperClassName: r, wrapperId: d, animationWrapperStyle: g, animationWrapperClassName: l, animationWrapperId: a }) => {
-  e = e || (n === M.Spin ? H : Y);
-  const [w, h] = E(0), [N, O] = E(null), m = N ?? w > 0, P = (p) => O(p), B = () => h((p) => p + 1), F = () => h((p) => Math.max(0, p - 1)), L = y(null);
-  R(() => {
-    C.emit("change", { isLoading: m }), C.emit(m ? "start" : "stop", null), m ? (L.current?.showModal(), document.body.setAttribute("inert", "")) : m || document.body.removeAttribute("inert");
-  }, [w]), R(() => () => {
-    h(0), C.removeAllListeners();
-  }, []);
-  const b = d || "loading-dialog";
-  return /* @__PURE__ */ S(U.Provider, { value: { get isLoading() {
-    return m;
-  }, startLoading: B, stopLoading: F, loadingEventTarget: C, overrideLoading: P }, children: [
-    o,
-    m && D(
-      /* @__PURE__ */ S($, { children: [
-        /* @__PURE__ */ f("style", { children: `
-                        dialog#${b}[open] {
-                            display: flex !important;
-                            justify-content: center;
-                            align-items: center;
-                            width: 100vw;
-                            height: 100vh;
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                        @keyframes spin {
-                            0% { transform: rotate(0deg); }
-                            100% { transform: rotate(360deg); }
-                        }
-                        @keyframes fadeInOut {
-                            0%, 100% { opacity: 0.2; }
-                            50% { opacity: 1; }
-                        }
-                        body:has(dialog#${b}[open]) {
-                            overflow: hidden;
-                        }
-                        body {
-                            scrollbar-gutter: stable;
-                        }
-                    ` }),
-        /* @__PURE__ */ f(
-          "dialog",
-          {
-            ref: L,
-            style: {
-              border: "none",
-              padding: 0,
-              backgroundColor: "rgba(0, 0, 0, 0.5)",
-              backdropFilter: "blur(2px)",
-              ...u
-            },
-            className: r,
-            id: b,
-            children: /* @__PURE__ */ f(z, { animationType: n, animationDuration: c, style: g, className: l, id: a, children: I.isValidElement(e) ? e : I.createElement(e) })
-          }
-        )
-      ] }),
-      document.body
-    )
-  ] });
-}, V = () => {
-  const o = k(U);
-  if (!o) throw new Error("useLoading must be used within a LoadingProvider");
-  const e = y(0), { startLoading: n, stopLoading: c, isLoading: u, ...r } = o, d = () => {
-    n(), e.current += 1;
-  }, g = () => {
-    e.current > 0 && (c(), e.current -= 1);
-  };
-  return {
-    startLoading: d,
-    stopLoading: g,
-    get isLocalLoading() {
-      return e.current > 0;
-    },
-    ...r,
-    asyncUseLoading: async (a) => {
-      d();
-      try {
-        return await a;
-      } finally {
-        g();
-      }
-    },
-    isLoading: u
-  };
-};
-function Z({ isLoading: o = !1 }) {
-  const e = V();
-  return R(() => (o ? e.startLoading() : e.stopLoading(), () => {
-    o && e.stopLoading();
-  }), [o]), null;
-}
-const A = T(void 0), x = {
-  STACKED: 0,
-  CURRENT_ONLY: 1,
-  CURRENT_HIDDEN_STACK: 2
-};
-function ee({ children: o, wrapperId: e, renderMode: n = x.STACKED, wrapperStyle: c }) {
-  const u = y(null), r = y(/* @__PURE__ */ new Map()), [d, g] = E(r.current), l = Array.from(d.values()), a = Array.from(d.keys()), w = y(/* @__PURE__ */ new Map()), [h, N] = E(void 0), O = (t, s = Math.random().toString(36).substring(2, 6), i = !1) => {
-    if (a.indexOf(s) !== -1)
-      return console.warn(`Modal with id ${s} already exists. Choose a different id.`), s;
-    let _ = [t, i];
-    return r.current = new Map(r.current), r.current.set(s, _), g(new Map(r.current)), s;
-  }, m = (t) => {
-    let s = "";
-    if (typeof t != "string") {
-      for (let [i, v] of r.current.entries())
-        if (v[0] === t) {
-          s = i;
-          break;
-        }
-    } else typeof t == "string" && (s = t);
-    return r.current.has(s) ? (r.current = new Map(r.current), r.current.delete(s), g(new Map(r.current)), !0) : !1;
-  }, P = (t, s) => {
-    if (r.current.has(t)) {
-      let i = r.current.get(t);
-      if (i[1] === !1) {
-        console.warn(`Modal with id ${t} is dynamic. Cannot update content.`);
-        return;
-      }
-      i[0] = s, r.current.set(t, i), g(new Map(r.current));
-    }
-  }, B = (t) => {
-    if (!d.has(t)) return !1;
-    let s = r.current.get(t);
-    return r.current.delete(t), r.current.set(t, s), g(new Map(r.current)), !0;
-  }, F = (t) => a.indexOf(t), L = (t) => w.current.get(t);
-  R(() => {
-    const t = a[a.length - 1];
-    t !== void 0 ? (u.current?.showModal(), document.body.setAttribute("inert", "")) : t === void 0 && (u.current?.close(), document.body.removeAttribute("inert")), N(t);
-  }, [d]);
-  const b = e || "base-modal-wrapper", p = K((t, s) => {
-    t ? w.current.set(s, t) : w.current.delete(s);
-  }, []), W = () => {
-    switch (n) {
-      case x.STACKED:
-        return l.map(([t, s], i) => /* @__PURE__ */ f(
-          "div",
-          {
-            ref: (v) => p(v, a[i]),
-            className: "modal-window",
-            id: a[i],
-            style: { display: "block", zIndex: a[i] === h ? 1e3 : 100 },
-            ...h !== a[i] ? { inert: "" } : {},
-            children: s ? null : t
-          },
-          a[i]
-        ));
-      case x.CURRENT_ONLY:
-        return l.length > 0 ? /* @__PURE__ */ f(
-          "div",
-          {
-            id: a[l.length - 1],
-            ref: (t) => p(t, a[l.length - 1]),
-            className: "modal-window",
-            style: { display: "block" },
-            children: l[l.length - 1][1] ? null : l[l.length - 1][0]
-          },
-          a[l.length - 1]
-        ) : null;
-      case x.CURRENT_HIDDEN_STACK:
-        return l.length > 0 ? l.map(([t, s], i) => /* @__PURE__ */ f(
-          "div",
-          {
-            ref: (v) => p(v, a[i]),
-            id: a[i],
-            className: "modal-window",
-            style: {
-              display: h === a[i] ? "block" : "none"
-            },
-            ...h !== a[i] ? { inert: "" } : {},
-            children: s ? null : t
-          },
-          a[i]
-        )) : null;
-    }
-  };
-  return /* @__PURE__ */ S(A.Provider, { value: { modalCount: 0, get renderMode() {
-    return n;
-  }, pushModal: O, popModal: m, currentModalId: h, updateModalContent: P, getModalWindowRef: L, focusModal: B, getModalOrderIndex: F }, children: [
-    o,
-    a.length === 0 ? null : D(
-      /* @__PURE__ */ S($, { children: [
-        /* @__PURE__ */ f("style", { children: `
-                        dialog#${b}[open] {
-                            display: flex !important;
-                            justify-content: center;
-                            align-items: center;
-                            width: 100vw;
-                            height: 100vh;
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                        body:has(dialog#${b}[open]) {
-                            overflow: hidden;
-                        }
-                        body {
-                            scrollbar-gutter: stable;
-                        }
-                        .modal-wrapper{
-                            border: none;
-                            padding: 0;
-                            background: unset;
-                        }
-                        .modal-window {
-                            position: absolute;
-                            width: 100%;
-                            height: 100%;
-                            display: none;
-                            background-color: rgba(0, 0, 0, 0.1);
-                            backdrop-filter: blur(2px);
-                        }
-                    ` }),
-        /* @__PURE__ */ f(
-          "dialog",
-          {
-            className: "modal-wrapper",
-            ref: u,
-            id: b,
-            style: c,
-            children: W()
-          }
-        )
-      ] }),
-      document.body
-    )
-  ] });
-}
-function te() {
-  const o = k(A);
-  if (!o) throw new Error("useBaseModal must be used within a BaseModalProvider");
-  return o;
-}
-function ne(o = Math.random().toString(36).substring(2, 6)) {
-  const e = k(A);
-  if (!e) throw new Error("useBaseModal must be used within a BaseModalProvider");
-  let n = y(o);
-  const c = (d) => (e.pushModal(d, n.current), u), u = () => e.popModal(n.current), r = (d) => {
-    e.updateModalContent(n.current, d);
-  };
-  return [c, u, n.current, e.currentModalId === n.current, r];
-}
-function re(o = Math.random().toString(36).substring(2, 6)) {
-  const e = k(A);
-  if (!e) throw new Error("useBaseModal must be used within a BaseModalProvider");
-  let n = y(o);
-  const c = e.currentModalId === n.current;
-  return [(l) => e.getModalWindowRef(n.current) ? D(
-    l,
-    e.getModalWindowRef(n.current)
-  ) : null, () => {
-    e.pushModal(null, n.current, !0)[1];
-  }, () => {
-    e.popModal(n.current);
-  }, () => {
-    e.focusModal(n.current);
-  }, n.current, c];
-}
-export {
-  M as AnimationType,
-  ee as BaseModalProvider,
-  Q as Button,
-  Z as Loading,
-  X as LoadingProvider,
-  x as RenderMode,
-  te as useBaseModal,
-  re as useDynamicModal,
-  V as useLoading,
-  ne as useStaticModal
-};
+

package/dist/loading.cjs.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),$=require("react-dom");class C extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,n){return this.addEventListener(t,o=>n(o.detail),{signal:this.controller.signal}),this}once(t,n){return this.addEventListener(t,o=>n(o.detail),{signal:this.controller.signal,once:!0}),this}emit(t,n){return this.dispatchEvent(new CustomEvent(t,{detail:n}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const m=new C,s={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},F=({animationType:e=s.Spin,animationDuration:t,children:n,style:o,className:u,id:g,prefix:d})=>{const l=e,p=e===s.Spin?1:e===s.FadeInOut?2:0,f=t||p,c=e===s.Spin?"linear":e===s.FadeInOut?"ease-in-out":"linear",L=e===s.None?"none":`${d}-${l} ${f}s ${c} infinite`;return i.jsx("div",{style:{animation:L,...o},className:u,id:g,children:n})},I=()=>i.jsx("div",{id:"loading-circle",style:{width:"60px",height:"60px",border:"10px solid #f3f3f3",borderTop:"10px solid #009b4bff",borderRadius:"50%"}}),O=()=>i.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},children:"Please wait..."}),y=r.createContext(void 0),R=({children:e=null,loadingComponent:t,animationType:n=s.Spin,animationDuration:o,wrapperStyle:u,wrapperClassName:g,wrapperId:d,animationWrapperStyle:l,animationWrapperClassName:p,animationWrapperId:f})=>{t=t||(n===s.Spin?I:O);const c=r.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),[L,x]=r.useState(0),[S,E]=r.useState(null),a=S??L>0,j=h=>E(h),A=()=>x(h=>h+1),P=()=>x(h=>Math.max(0,h-1)),v=r.useRef(null);r.useEffect(()=>{m.emit("change",{isLoading:a}),m.emit(a?"start":"stop",null),a?(v.current?.showModal(),document.body.setAttribute("inert","")):a||document.body.removeAttribute("inert")},[L,a]),r.useEffect(()=>()=>{x(0),m.removeAllListeners()},[]);const b=d||"loading-wrapper-"+c.current;return i.jsxs(y.Provider,{value:{get isLoading(){return a},startLoading:A,stopLoading:P,loadingEventTarget:m,overrideLoading:j},children:[e,a&&$.createPortal(i.jsxs(i.Fragment,{children:[i.jsx("style",{children:`
+                        dialog#${b}[open] {
+                            display: flex !important;
+                            justify-content: center;
+                            align-items: center;
+                            width: 100vw;
+                            height: 100vh;
+                            max-width: 100%;
+                            max-height: 100%;
+                        }
+                        @keyframes ${c.current}-spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                        @keyframes ${c.current}-fadeInOut {
+                            0%, 100% { opacity: 0.2; }
+                            50% { opacity: 1; }
+                        }
+                        body:has(dialog#${b}[open]) {
+                            overflow: hidden;
+                        }
+                        body {
+                            scrollbar-gutter: stable;
+                        }
+                    `}),i.jsx("dialog",{ref:v,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...u},className:g,id:b,children:i.jsx(F,{animationType:n,animationDuration:o,style:l,className:p,id:f,prefix:c.current,children:r.isValidElement(t)?t:r.createElement(t)})})]}),document.body)]})},w=()=>{const e=r.useContext(y);if(!e)throw new Error("useLoading must be used within a LoadingProvider");const t=r.useRef(0),{startLoading:n,stopLoading:o,isLoading:u,...g}=e,d=()=>{n(),t.current+=1},l=()=>{t.current>0&&(o(),t.current-=1)};return{startLoading:d,stopLoading:l,get isLocalLoading(){return t.current>0},...g,asyncUseLoading:async f=>{d();try{return await f}finally{l()}},isLoading:u}};function N({isLoading:e=!1}){const t=w();return r.useEffect(()=>(e?t.startLoading():t.stopLoading(),()=>{e&&t.stopLoading()}),[e]),null}exports.AnimationType=s;exports.Loading=N;exports.LoadingProvider=R;exports.useLoading=w;

package/dist/loading.d.ts

@@ -0,0 +1,3 @@
+export { LoadingProvider, AnimationType } from './contexts/LoadingContext';
+export { default as Loading } from './components/Loading';
+export { default as useLoading } from './hooks/useLoading';

package/dist/loading.esm.js

@@ -0,0 +1,147 @@
+import { jsx as l, jsxs as w, Fragment as P } from "react/jsx-runtime";
+import S, { useRef as v, useState as E, useEffect as x, createContext as N, useContext as k } from "react";
+import { createPortal as R } from "react-dom";
+class j extends EventTarget {
+  constructor() {
+    super(...arguments), this.controller = new AbortController();
+  }
+  on(t, n) {
+    return this.addEventListener(
+      t,
+      (r) => n(r.detail),
+      { signal: this.controller.signal }
+    ), this;
+  }
+  once(t, n) {
+    return this.addEventListener(
+      t,
+      (r) => n(r.detail),
+      {
+        signal: this.controller.signal,
+        once: !0
+      }
+    ), this;
+  }
+  emit(t, n) {
+    return this.dispatchEvent(new CustomEvent(t, { detail: n }));
+  }
+  removeAllListeners() {
+    this.controller.abort(), this.controller = new AbortController();
+  }
+}
+const m = new j(), o = {
+  Spin: "spin",
+  FadeInOut: "fadeInOut",
+  None: "none"
+}, M = ({ animationType: e = o.Spin, animationDuration: t, children: n, style: r, className: c, id: u, prefix: s }) => {
+  const a = e, p = e === o.Spin ? 1 : e === o.FadeInOut ? 2 : 0, g = t || p, d = e === o.Spin ? "linear" : e === o.FadeInOut ? "ease-in-out" : "linear", h = e === o.None ? "none" : `${s}-${a} ${g}s ${d} infinite`;
+  return /* @__PURE__ */ l("div", { style: { animation: h, ...r }, className: c, id: u, children: n });
+}, U = () => /* @__PURE__ */ l("div", { id: "loading-circle", style: { width: "60px", height: "60px", border: "10px solid #f3f3f3", borderTop: "10px solid #009b4bff", borderRadius: "50%" } }), W = () => /* @__PURE__ */ l("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, children: "Please wait..." }), A = N(void 0), B = ({
+  children: e = null,
+  loadingComponent: t,
+  animationType: n = o.Spin,
+  animationDuration: r,
+  wrapperStyle: c,
+  wrapperClassName: u,
+  wrapperId: s,
+  animationWrapperStyle: a,
+  animationWrapperClassName: p,
+  animationWrapperId: g
+}) => {
+  t = t || (n === o.Spin ? U : W);
+  const d = v(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), [h, L] = E(0), [$, C] = E(null), i = $ ?? h > 0, F = (f) => C(f), I = () => L((f) => f + 1), O = () => L((f) => Math.max(0, f - 1)), y = v(null);
+  x(() => {
+    m.emit("change", { isLoading: i }), m.emit(i ? "start" : "stop", null), i ? (y.current?.showModal(), document.body.setAttribute("inert", "")) : i || document.body.removeAttribute("inert");
+  }, [h, i]), x(() => () => {
+    L(0), m.removeAllListeners();
+  }, []);
+  const b = s || "loading-wrapper-" + d.current;
+  return /* @__PURE__ */ w(A.Provider, { value: { get isLoading() {
+    return i;
+  }, startLoading: I, stopLoading: O, loadingEventTarget: m, overrideLoading: F }, children: [
+    e,
+    i && R(
+      /* @__PURE__ */ w(P, { children: [
+        /* @__PURE__ */ l("style", { children: `
+                        dialog#${b}[open] {
+                            display: flex !important;
+                            justify-content: center;
+                            align-items: center;
+                            width: 100vw;
+                            height: 100vh;
+                            max-width: 100%;
+                            max-height: 100%;
+                        }
+                        @keyframes ${d.current}-spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                        @keyframes ${d.current}-fadeInOut {
+                            0%, 100% { opacity: 0.2; }
+                            50% { opacity: 1; }
+                        }
+                        body:has(dialog#${b}[open]) {
+                            overflow: hidden;
+                        }
+                        body {
+                            scrollbar-gutter: stable;
+                        }
+                    ` }),
+        /* @__PURE__ */ l(
+          "dialog",
+          {
+            ref: y,
+            style: {
+              border: "none",
+              padding: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              backdropFilter: "blur(2px)",
+              ...c
+            },
+            className: u,
+            id: b,
+            children: /* @__PURE__ */ l(M, { animationType: n, animationDuration: r, style: a, className: p, id: g, prefix: d.current, children: S.isValidElement(t) ? t : S.createElement(t) })
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}, z = () => {
+  const e = k(A);
+  if (!e) throw new Error("useLoading must be used within a LoadingProvider");
+  const t = v(0), { startLoading: n, stopLoading: r, isLoading: c, ...u } = e, s = () => {
+    n(), t.current += 1;
+  }, a = () => {
+    t.current > 0 && (r(), t.current -= 1);
+  };
+  return {
+    startLoading: s,
+    stopLoading: a,
+    get isLocalLoading() {
+      return t.current > 0;
+    },
+    ...u,
+    asyncUseLoading: async (g) => {
+      s();
+      try {
+        return await g;
+      } finally {
+        a();
+      }
+    },
+    isLoading: c
+  };
+};
+function G({ isLoading: e = !1 }) {
+  const t = z();
+  return x(() => (e ? t.startLoading() : t.stopLoading(), () => {
+    e && t.stopLoading();
+  }), [e]), null;
+}
+export {
+  o as AnimationType,
+  G as Loading,
+  B as LoadingProvider,
+  z as useLoading
+};

package/dist/modal.cjs.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("react"),R=require("react-dom"),m=u.createContext(void 0),g={STACKED:0,CURRENT_ONLY:1,CURRENT_HIDDEN_STACK:2};function T({children:d,wrapperId:s,renderMode:a=g.STACKED,wrapperStyle:h}){const M=u.useRef(null),t=u.useRef(new Map),[c,p]=u.useState(t.current),l=Array.from(c.values()),o=Array.from(c.keys()),b=u.useRef(new Map),[w,v]=u.useState(void 0),x=(e,r=Math.random().toString(36).substring(2,6),n=!1)=>{if(o.indexOf(r)!==-1)return console.warn(`Modal with id ${r} already exists. Choose a different id.`),r;let D=[e,n];return t.current=new Map(t.current),t.current.set(r,D),p(new Map(t.current)),r},S=e=>{let r="";if(typeof e!="string"){for(let[n,f]of t.current.entries())if(f[0]===e){r=n;break}}else typeof e=="string"&&(r=e);return t.current.has(r)?(t.current=new Map(t.current),t.current.delete(r),p(new Map(t.current)),!0):!1},k=(e,r)=>{if(t.current.has(e)){let n=t.current.get(e);if(n[1]===!1){console.warn(`Modal with id ${e} is dynamic. Cannot update content.`);return}n[0]=r,t.current.set(e,n),p(new Map(t.current))}},E=e=>{if(!c.has(e))return!1;let r=t.current.get(e);return t.current.delete(e),t.current.set(e,r),p(new Map(t.current)),!0},N=e=>o.indexOf(e),B=e=>b.current.get(e);u.useEffect(()=>{const e=o[o.length-1];e!==void 0?(M.current?.showModal(),document.body.setAttribute("inert","")):e===void 0&&(M.current?.close(),document.body.removeAttribute("inert")),v(e)},[c]);const y=s||"base-modal-wrapper",C=u.useCallback((e,r)=>{e?b.current.set(r,e):b.current.delete(r)},[]),j=()=>{switch(a){case g.STACKED:return l.map(([e,r],n)=>i.jsx("div",{ref:f=>C(f,o[n]),className:"modal-window",id:o[n],style:{display:"block",zIndex:o[n]===w?1e3:100},...w!==o[n]?{inert:""}:{},children:r?null:e},o[n]));case g.CURRENT_ONLY:return l.length>0?i.jsx("div",{id:o[l.length-1],ref:e=>C(e,o[l.length-1]),className:"modal-window",style:{display:"block"},children:l[l.length-1][1]?null:l[l.length-1][0]},o[l.length-1]):null;case g.CURRENT_HIDDEN_STACK:return l.length>0?l.map(([e,r],n)=>i.jsx("div",{ref:f=>C(f,o[n]),id:o[n],className:"modal-window",style:{display:w===o[n]?"block":"none"},...w!==o[n]?{inert:""}:{},children:r?null:e},o[n])):null}};return i.jsxs(m.Provider,{value:{modalCount:0,get renderMode(){return a},pushModal:x,popModal:S,currentModalId:w,updateModalContent:k,getModalWindowRef:B,focusModal:E,getModalOrderIndex:N},children:[d,o.length===0?null:R.createPortal(i.jsxs(i.Fragment,{children:[i.jsx("style",{children:`
+                        dialog#${y}[open] {
+                            display: flex !important;
+                            justify-content: center;
+                            align-items: center;
+                            width: 100vw;
+                            height: 100vh;
+                            max-width: 100%;
+                            max-height: 100%;
+                        }
+                        body:has(dialog#${y}[open]) {
+                            overflow: hidden;
+                        }
+                        body {
+                            scrollbar-gutter: stable;
+                        }
+                        .modal-wrapper{
+                            border: none;
+                            padding: 0;
+                            background: unset;
+                        }
+                        .modal-window {
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            display: none;
+                            background-color: rgba(0, 0, 0, 0.1);
+                            backdrop-filter: blur(2px);
+                        }
+                    `}),i.jsx("dialog",{className:"modal-wrapper",ref:M,id:y,style:h,children:j()})]}),document.body)]})}function A(){const d=u.useContext(m);if(!d)throw new Error("useBaseModal must be used within a BaseModalProvider");return d}function P(d=Math.random().toString(36).substring(2,6)){const s=u.useContext(m);if(!s)throw new Error("useBaseModal must be used within a BaseModalProvider");let a=u.useRef(d);const h=c=>(s.pushModal(c,a.current),M),M=()=>s.popModal(a.current),t=c=>{s.updateModalContent(a.current,c)};return[h,M,a.current,s.currentModalId===a.current,t]}function O(d=Math.random().toString(36).substring(2,6)){const s=u.useContext(m);if(!s)throw new Error("useBaseModal must be used within a BaseModalProvider");let a=u.useRef(d);const h=s.currentModalId===a.current;return[l=>s.getModalWindowRef(a.current)?R.createPortal(l,s.getModalWindowRef(a.current)):null,()=>{s.pushModal(null,a.current,!0)[1]},()=>{s.popModal(a.current)},()=>{s.focusModal(a.current)},a.current,h]}exports.BaseModalProvider=T;exports.RenderMode=g;exports.useBaseModal=A;exports.useDynamicModal=O;exports.useStaticModal=P;

package/dist/modal.d.ts

@@ -0,0 +1,4 @@
+export { default as BaseModalProvider } from './contexts/ModalContext';
+export { default as useBaseModal, RenderMode } from './hooks/useBaseModal';
+export { default as useStaticModal } from './hooks/useStaticModal';
+export { default as useDynamicModal } from './hooks/useDynamicModal';

package/dist/modal.esm.js

@@ -0,0 +1,176 @@
+import { jsxs as R, Fragment as K, jsx as h } from "react/jsx-runtime";
+import { useRef as w, useState as k, useEffect as O, useCallback as U, createContext as W, useContext as v } from "react";
+import { createPortal as S } from "react-dom";
+const m = W(void 0), g = {
+  STACKED: 0,
+  CURRENT_ONLY: 1,
+  CURRENT_HIDDEN_STACK: 2
+};
+function H({ children: d, wrapperId: l, renderMode: a = g.STACKED, wrapperStyle: f }) {
+  const u = w(null), t = w(/* @__PURE__ */ new Map()), [c, M] = k(t.current), s = Array.from(c.values()), o = Array.from(c.keys()), b = w(/* @__PURE__ */ new Map()), [p, x] = k(void 0), E = (e, r = Math.random().toString(36).substring(2, 6), n = !1) => {
+    if (o.indexOf(r) !== -1)
+      return console.warn(`Modal with id ${r} already exists. Choose a different id.`), r;
+    let _ = [e, n];
+    return t.current = new Map(t.current), t.current.set(r, _), M(new Map(t.current)), r;
+  }, N = (e) => {
+    let r = "";
+    if (typeof e != "string") {
+      for (let [n, i] of t.current.entries())
+        if (i[0] === e) {
+          r = n;
+          break;
+        }
+    } else typeof e == "string" && (r = e);
+    return t.current.has(r) ? (t.current = new Map(t.current), t.current.delete(r), M(new Map(t.current)), !0) : !1;
+  }, A = (e, r) => {
+    if (t.current.has(e)) {
+      let n = t.current.get(e);
+      if (n[1] === !1) {
+        console.warn(`Modal with id ${e} is dynamic. Cannot update content.`);
+        return;
+      }
+      n[0] = r, t.current.set(e, n), M(new Map(t.current));
+    }
+  }, B = (e) => {
+    if (!c.has(e)) return !1;
+    let r = t.current.get(e);
+    return t.current.delete(e), t.current.set(e, r), M(new Map(t.current)), !0;
+  }, T = (e) => o.indexOf(e), D = (e) => b.current.get(e);
+  O(() => {
+    const e = o[o.length - 1];
+    e !== void 0 ? (u.current?.showModal(), document.body.setAttribute("inert", "")) : e === void 0 && (u.current?.close(), document.body.removeAttribute("inert")), x(e);
+  }, [c]);
+  const y = l || "base-modal-wrapper", C = U((e, r) => {
+    e ? b.current.set(r, e) : b.current.delete(r);
+  }, []), P = () => {
+    switch (a) {
+      case g.STACKED:
+        return s.map(([e, r], n) => /* @__PURE__ */ h(
+          "div",
+          {
+            ref: (i) => C(i, o[n]),
+            className: "modal-window",
+            id: o[n],
+            style: { display: "block", zIndex: o[n] === p ? 1e3 : 100 },
+            ...p !== o[n] ? { inert: "" } : {},
+            children: r ? null : e
+          },
+          o[n]
+        ));
+      case g.CURRENT_ONLY:
+        return s.length > 0 ? /* @__PURE__ */ h(
+          "div",
+          {
+            id: o[s.length - 1],
+            ref: (e) => C(e, o[s.length - 1]),
+            className: "modal-window",
+            style: { display: "block" },
+            children: s[s.length - 1][1] ? null : s[s.length - 1][0]
+          },
+          o[s.length - 1]
+        ) : null;
+      case g.CURRENT_HIDDEN_STACK:
+        return s.length > 0 ? s.map(([e, r], n) => /* @__PURE__ */ h(
+          "div",
+          {
+            ref: (i) => C(i, o[n]),
+            id: o[n],
+            className: "modal-window",
+            style: {
+              display: p === o[n] ? "block" : "none"
+            },
+            ...p !== o[n] ? { inert: "" } : {},
+            children: r ? null : e
+          },
+          o[n]
+        )) : null;
+    }
+  };
+  return /* @__PURE__ */ R(m.Provider, { value: { modalCount: 0, get renderMode() {
+    return a;
+  }, pushModal: E, popModal: N, currentModalId: p, updateModalContent: A, getModalWindowRef: D, focusModal: B, getModalOrderIndex: T }, children: [
+    d,
+    o.length === 0 ? null : S(
+      /* @__PURE__ */ R(K, { children: [
+        /* @__PURE__ */ h("style", { children: `
+                        dialog#${y}[open] {
+                            display: flex !important;
+                            justify-content: center;
+                            align-items: center;
+                            width: 100vw;
+                            height: 100vh;
+                            max-width: 100%;
+                            max-height: 100%;
+                        }
+                        body:has(dialog#${y}[open]) {
+                            overflow: hidden;
+                        }
+                        body {
+                            scrollbar-gutter: stable;
+                        }
+                        .modal-wrapper{
+                            border: none;
+                            padding: 0;
+                            background: unset;
+                        }
+                        .modal-window {
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            display: none;
+                            background-color: rgba(0, 0, 0, 0.1);
+                            backdrop-filter: blur(2px);
+                        }
+                    ` }),
+        /* @__PURE__ */ h(
+          "dialog",
+          {
+            className: "modal-wrapper",
+            ref: u,
+            id: y,
+            style: f,
+            children: P()
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+function I() {
+  const d = v(m);
+  if (!d) throw new Error("useBaseModal must be used within a BaseModalProvider");
+  return d;
+}
+function L(d = Math.random().toString(36).substring(2, 6)) {
+  const l = v(m);
+  if (!l) throw new Error("useBaseModal must be used within a BaseModalProvider");
+  let a = w(d);
+  const f = (c) => (l.pushModal(c, a.current), u), u = () => l.popModal(a.current), t = (c) => {
+    l.updateModalContent(a.current, c);
+  };
+  return [f, u, a.current, l.currentModalId === a.current, t];
+}
+function Y(d = Math.random().toString(36).substring(2, 6)) {
+  const l = v(m);
+  if (!l) throw new Error("useBaseModal must be used within a BaseModalProvider");
+  let a = w(d);
+  const f = l.currentModalId === a.current;
+  return [(s) => l.getModalWindowRef(a.current) ? S(
+    s,
+    l.getModalWindowRef(a.current)
+  ) : null, () => {
+    l.pushModal(null, a.current, !0)[1];
+  }, () => {
+    l.popModal(a.current);
+  }, () => {
+    l.focusModal(a.current);
+  }, a.current, f];
+}
+export {
+  H as BaseModalProvider,
+  g as RenderMode,
+  I as useBaseModal,
+  Y as useDynamicModal,
+  L as useStaticModal
+};

package/dist/utils/EventEmitter.d.ts

@@ -0,0 +1,9 @@
+type EventMap = Record<string, any>;
+export default class EventEmitter<T extends EventMap> extends EventTarget {
+    private controller;
+    on<K extends keyof T>(type: K, callback: (detail: T[K]) => void): this;
+    once<K extends keyof T>(type: K, callback: (detail: T[K]) => void): this;
+    emit<K extends keyof T>(type: K, detail: T[K]): boolean;
+    removeAllListeners(): void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roks-rjsc",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A React component library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -35,7 +35,8 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "repository": {
     "type": "git",
@@ -51,8 +52,25 @@
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
     },
+    "./modal": {
+      "types": "./dist/modal.d.ts",
+      "import": "./dist/modal.esm.js",
+      "require": "./dist/modal.cjs.js"
+    },
+    "./loading": {
+      "types": "./dist/loading.d.ts",
+      "import": "./dist/loading.esm.js",
+      "require": "./dist/loading.cjs.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/*"
+      ]
+    }
+  },
   "keywords": [
     "react",
     "component",
@@ -60,4 +78,4 @@
   ],
   "author": "rokku",
   "license": "MIT"
-}
+}