roks-rjsc 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 rokku
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+ # roks-rjsc
+
+ A small React component library exposing a few UI helpers and modal/loading utilities.
+
+ ## Installation
+
+ Install from npm (after publishing):
+
+ ```bash
+ npm install roks-rjsc
+ ```
+
+ During development you can also install directly from GitHub:
+
+ ```bash
+ npm install github:rokku-x/roks-rjsc
+ ```
+
+ ## Usage
+
+ Import named exports from the package root. Examples below assume React 18.
+
+ Basic component:
+
+ ```tsx
+ import React from 'react';
+ import { Button } from 'roks-rjsc';
+
+ export default function App() {
+	 return <Button onClick={() => alert('clicked')}>Click me</Button>;
+ }
+ ```
+
+ Loading provider and hook:
+
+ ```tsx
+ import React from 'react';
+ import { LoadingProvider, useLoading } from 'roks-rjsc';
+
+ function Example() {
+	 const { startLoading, stopLoading, asyncUseLoading } = useLoading();
+
+	 const handle = async () => {
+		 startLoading();
+		 await new Promise(r => setTimeout(r, 1000));
+		 stopLoading();
+	 }
+
+	 return <button onClick={handle}>Load</button>
+ }
+
+ export default function AppWrapper() {
+	 return (
+		 <LoadingProvider>
+			 <Example />
+		 </LoadingProvider>
+	 )
+ }
+ ```
+
+ Modal helpers (BaseModalProvider + hooks):
+
+ ```tsx
+ import React from 'react';
+ import { BaseModalProvider, useStaticModal, useDynamicModal } from 'roks-rjsc';
+
+ function StaticExample() {
+	 const [show, close, id] = useStaticModal();
+
+	 return (
+		 <>
+			 <button onClick={() => show(<div>Static content</div>)}>Open static modal</button>
+		 </>
+	 )
+ }
+
+ function DynamicExample() {
+	 const [render, show, close, focus] = useDynamicModal();
+
+	 return (
+		 <>
+			 <button onClick={() => show()}>Open dynamic modal</button>
+			 {render(<div>Rendered into dynamic modal</div>)}
+		 </>
+	 )
+ }
+
+ export default function App() {
+	 return (
+		 <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
+
+ ## License
+
+ MIT

package/dist/index.cjs.js

@@ -0,0 +1,54 @@
+"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;

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+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 { }

package/dist/index.esm.js

@@ -0,0 +1,309 @@
+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/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "roks-rjsc",
+  "version": "0.1.0",
+  "description": "A React component library",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepare": "npm run build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.1.9",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^1.0.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rokku-x/roks-rjsc.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rokku-x/roks-rjsc/issues"
+  },
+  "homepage": "https://github.com/rokku-x/roks-rjsc#readme",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "react",
+    "component",
+    "library"
+  ],
+  "author": "rokku",
+  "license": "MIT"
+}