@rokku-x/react-hook-loading-spinner 0.2.0 → 0.2.5

package/README.md

@@ -20,7 +20,6 @@ npm install @rokku-x/react-hook-loading-spinner
 - 📡 **Event System** - Subscribe to loading state changes
 - ♿ **Accessibility** - Built-in inert attribute and scroll prevention
 - 📱 **Zero Dependencies** - Only requires React and Zustand
-- 🌐 **SSR-Compatible** - Hooks work in SSR; use `ssrLoading` helper in Server Components
 
 ## Bundle Size
 
@@ -397,28 +396,9 @@ function App() {
         loadingComponentScale={1.5}
       />
     </>
-
-### SSR Usage
-
-For Server Components, use the SSR-safe helper instead of the client hook:
-
-```tsx
-import { ssrLoading } from '@rokku-x/react-hook-loading-spinner';
-
-export default function ServerComponent() {
-  const { startLoading, stopLoading, isLoading } = ssrLoading();
-
-  startLoading();
-  // ...run your server-side work
-  stopLoading();
-
-  return <div>{isLoading ? 'Loading…' : 'Done'}</div>;
-}
-```
-
-For Client Components, continue using `useLoading` as shown above.
   );
 }
+}
 ```
 
 ### Example 7: Fade Animation

package/dist/index.cjs.js

@@ -1,10 +1,5 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),N=require("crypto"),C=require("react/jsx-runtime"),F=require("react-dom"),I=e=>{let t;const n=new Set,i=(g,r)=>{const c=typeof g=="function"?g(t):g;if(!Object.is(c,t)){const L=t;t=r??(typeof c!="object"||c===null)?c:Object.assign({},t,c),n.forEach(u=>u(t,L))}},o=()=>t,a={setState:i,getState:o,getInitialState:()=>v,subscribe:g=>(n.add(g),()=>n.delete(g))},v=t=e(i,o,a);return a},M=(e=>e?I(e):I),P=e=>e;function U(e,t=P){const n=y.useSyncExternalStore(e.subscribe,y.useCallback(()=>t(e.getState()),[e,t]),y.useCallback(()=>t(e.getInitialState()),[e,t]));return y.useDebugValue(n),n}const j=e=>{const t=M(e),n=i=>U(t,i);return Object.assign(n,t),n},$=(e=>e?j(e):j),T={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1},E=new Map,w=e=>{const t=E.get(e);return t?Object.fromEntries(Object.entries(t.stores).map(([n,i])=>[n,i.getState()])):{}},J=(e,t,n)=>{if(e===void 0)return{type:"untracked",connection:t.connect(n)};const i=E.get(n.name);if(i)return{type:"tracked",store:e,...i};const o={connection:t.connect(n),stores:{}};return E.set(n.name,o),{type:"tracked",store:e,...o}},z=(e,t)=>{if(t===void 0)return;const n=E.get(e);n&&(delete n.stores[t],Object.keys(n.stores).length===0&&E.delete(e))},W=e=>{var t,n;if(!e)return;const i=e.split(`
-`),o=i.findIndex(f=>f.includes("api.setState"));if(o<0)return;const s=((t=i[o+1])==null?void 0:t.trim())||"";return(n=/.+ (.+) .+/.exec(s))==null?void 0:n[1]},q=(e,t={})=>(n,i,o)=>{const{enabled:s,anonymousActionType:f,store:a,...v}=t;let g;try{g=(s??(T?"production":void 0)!=="production")&&window.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!g)return e(n,i,o);const{connection:r,...c}=J(a,g,v);let L=!0;o.setState=((d,p,l)=>{const S=n(d,p);if(!L)return S;const x=l===void 0?{type:f||W(new Error().stack)||"anonymous"}:typeof l=="string"?{type:l}:l;return a===void 0?(r?.send(x,i()),S):(r?.send({...x,type:`${a}/${x.type}`},{...w(v.name),[a]:o.getState()}),S)}),o.devtools={cleanup:()=>{r&&typeof r.unsubscribe=="function"&&r.unsubscribe(),z(v.name,a)}};const u=(...d)=>{const p=L;L=!1,n(...d),L=p},b=e(o.setState,i,o);if(c.type==="untracked"?r?.init(b):(c.stores[c.store]=o,r?.init(Object.fromEntries(Object.entries(c.stores).map(([d,p])=>[d,d===c.store?b:p.getState()])))),o.dispatchFromDevtools&&typeof o.dispatch=="function"){let d=!1;const p=o.dispatch;o.dispatch=(...l)=>{(T?"production":void 0)!=="production"&&l[0].type==="__setState"&&!d&&(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),d=!0),p(...l)}}return r.subscribe(d=>{var p;switch(d.type){case"ACTION":if(typeof d.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return O(d.payload,l=>{if(l.type==="__setState"){if(a===void 0){u(l.state);return}Object.keys(l.state).length!==1&&console.error(`
-                    [zustand devtools middleware] Unsupported __setState action format.
-                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
-                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
-                    `);const S=l.state[a];if(S==null)return;JSON.stringify(o.getState())!==JSON.stringify(S)&&u(S);return}o.dispatchFromDevtools&&typeof o.dispatch=="function"&&o.dispatch(l)});case"DISPATCH":switch(d.payload.type){case"RESET":return u(b),a===void 0?r?.init(o.getState()):r?.init(w(v.name));case"COMMIT":if(a===void 0){r?.init(o.getState());return}return r?.init(w(v.name));case"ROLLBACK":return O(d.state,l=>{if(a===void 0){u(l),r?.init(o.getState());return}u(l[a]),r?.init(w(v.name))});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return O(d.state,l=>{if(a===void 0){u(l);return}JSON.stringify(o.getState())!==JSON.stringify(l[a])&&u(l[a])});case"IMPORT_STATE":{const{nextLiftedState:l}=d.payload,S=(p=l.computedStates.slice(-1)[0])==null?void 0:p.state;if(!S)return;u(a===void 0?S:S[a]),r?.send(null,l);return}case"PAUSE_RECORDING":return L=!L}return}}),b},G=q,O=(e,t)=>{let n;try{n=JSON.parse(e)}catch(i){console.error("[zustand devtools middleware] Could not parse the received json",i)}n!==void 0&&t(n)};class R extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,n){return this.addEventListener(t,i=>n(i.detail),{signal:this.controller.signal}),this}once(t,n){return this.addEventListener(t,i=>n(i.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 h=new R,_=$()(G((e,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:n=>{const i=t().isLoading();e(s=>({loadingCount:s.loadingCount+1})),n&&e(s=>({localCounters:{...s.localCounters,[n]:(s.localCounters[n]??0)+1}}));const o=t().isLoading();o&&!i&&h.emit("start",null),h.emit("change",{isLoading:o,isOverrideState:t().overrideState!==null})},stopLoading:n=>{const i=t().isLoading(),o=n?t().localCounters[n]??0:0;n&&o>0&&e(f=>({loadingCount:Math.max(0,f.loadingCount-1),localCounters:{...f.localCounters,[n]:Math.max(0,f.localCounters[n]-1)}}));const s=t().isLoading();!s&&i&&h.emit("stop",null),h.emit("change",{isLoading:s,isOverrideState:t().overrideState!==null})},overrideLoading:n=>{const i=t().isLoading();e({overrideState:n});const o=t().isLoading();o&&!i?h.emit("start",null):!o&&i&&h.emit("stop",null),h.emit("change",{isLoading:o,isOverrideState:n!==null})},getLocalCounter:n=>t().localCounters[n]??0,isLocalLoading:n=>(t().localCounters[n]??0)>0}})));function A(){const e=y.useId(),{actions:t}=_(s=>s),n=()=>{t.startLoading(e)},i=()=>{t.isLocalLoading(e)&&t.stopLoading(e)},o=async s=>{n();try{return await s}finally{i()}};return{overrideLoading:t.overrideLoading,startLoading:n,stopLoading:i,get isLocalLoading(){return t.isLocalLoading(e)},asyncUseLoading:o,get isLoading(){return t.isGlobalLoading()}}}function V(){const e=N.randomUUID(),{actions:t}=_(s=>s),n=()=>{t.startLoading(e)},i=()=>{t.isLocalLoading(e)&&t.stopLoading(e)},o=async s=>{n();try{return await s}finally{i()}};return{overrideLoading:t.overrideLoading,startLoading:n,stopLoading:i,get isLocalLoading(){return t.isLocalLoading(e)},asyncUseLoading:o,get isLoading(){return t.isGlobalLoading()}}}const m={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},B=({scale:e=1,animationType:t=m.Spin,animationDuration:n,children:i,style:o,className:s,id:f,prefix:a})=>{const v=t,g=t===m.Spin?1:t===m.FadeInOut?2:0,r=n||g,c=t===m.Spin?"linear":t===m.FadeInOut?"ease-in-out":"linear",L=t===m.None?"none":`${a}-${v} ${r}s ${c} infinite`;return C.jsx("div",{style:{animation:L,...e!==1?{zoom:e}:{},...o},className:s,id:f,children:i})},k=e=>C.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...e}),D=e=>C.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...e,children:"Please wait..."});function X({loadingComponent:e,loadingComponentScale:t=1,animationType:n=m.Spin,animationDuration:i,wrapperStyle:o,wrapperClassName:s,wrapperId:f,animationWrapperStyle:a,animationWrapperClassName:v,animationWrapperId:g}){e=e||(n===m.Spin?k:D);const r=y.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{loadingCount:c,overrideState:L}=_(p=>p),u=L??c>0,b=y.useRef(null);y.useEffect(()=>{u?(b.current?.showModal(),document.body.setAttribute("inert","")):(b.current?.close(),document.body.removeAttribute("inert"))},[u]);const d=f||"loading-wrapper-"+r.current;return u?F.createPortal(C.jsxs(C.Fragment,{children:[C.jsx("style",{children:`
-                        dialog#${d}[open] {
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),L=require("react/jsx-runtime"),O=require("react-dom"),v=e=>{let t;const n=new Set,o=(a,l)=>{const d=typeof a=="function"?a(t):a;if(!Object.is(d,t)){const m=t;t=l??(typeof d!="object"||d===null)?d:Object.assign({},t,d),n.forEach(p=>p(t,m))}},i=()=>t,f={setState:o,getState:i,getInitialState:()=>b,subscribe:a=>(n.add(a),()=>n.delete(a))},b=t=e(o,i,f);return f},A=(e=>e?v(e):v),R=e=>e;function $(e,t=R){const n=s.useSyncExternalStore(e.subscribe,s.useCallback(()=>t(e.getState()),[e,t]),s.useCallback(()=>t(e.getInitialState()),[e,t]));return s.useDebugValue(n),n}const x=e=>{const t=A(e),n=o=>$(t,o);return Object.assign(n,t),n},F=(e=>e?x(e):x);class y 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 g=new y,C=F()((e,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:n=>{const o=t().isLoading();e(r=>({loadingCount:r.loadingCount+1})),n&&e(r=>({localCounters:{...r.localCounters,[n]:(r.localCounters[n]??0)+1}}));const i=t().isLoading();i&&!o&&g.emit("start",null),g.emit("change",{isLoading:i,isOverrideState:t().overrideState!==null})},stopLoading:n=>{const o=t().isLoading(),i=n?t().localCounters[n]??0:0;n&&i>0&&e(u=>({loadingCount:Math.max(0,u.loadingCount-1),localCounters:{...u.localCounters,[n]:Math.max(0,u.localCounters[n]-1)}}));const r=t().isLoading();!r&&o&&g.emit("stop",null),g.emit("change",{isLoading:r,isOverrideState:t().overrideState!==null})},overrideLoading:n=>{const o=t().isLoading();e({overrideState:n});const i=t().isLoading();i&&!o?g.emit("start",null):!i&&o&&g.emit("stop",null),g.emit("change",{isLoading:i,isOverrideState:n!==null})},getLocalCounter:n=>t().localCounters[n]??0,isLocalLoading:n=>(t().localCounters[n]??0)>0}}));function w(){const e=s.useId(),{actions:t}=C(r=>r),n=()=>{t.startLoading(e)},o=()=>{t.isLocalLoading(e)&&t.stopLoading(e)},i=async r=>{n();try{return await r}finally{o()}};return{overrideLoading:t.overrideLoading,startLoading:n,stopLoading:o,get isLocalLoading(){return t.isLocalLoading(e)},asyncUseLoading:i,get isLoading(){return t.isGlobalLoading()}}}const c={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},k=({scale:e=1,animationType:t=c.Spin,animationDuration:n,children:o,style:i,className:r,id:u,prefix:f})=>{const b=t,a=t===c.Spin?1:t===c.FadeInOut?2:0,l=n||a,d=t===c.Spin?"linear":t===c.FadeInOut?"ease-in-out":"linear",m=t===c.None?"none":`${f}-${b} ${l}s ${d} infinite`;return L.jsx("div",{style:{animation:m,...e!==1?{zoom:e}:{},...i},className:r,id:u,children:o})},E=e=>L.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...e}),j=e=>L.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...e,children:"Please wait..."});function M({loadingComponent:e,loadingComponentScale:t=1,animationType:n=c.Spin,animationDuration:o,wrapperStyle:i,wrapperClassName:r,wrapperId:u,animationWrapperStyle:f,animationWrapperClassName:b,animationWrapperId:a}){e=e||(n===c.Spin?E:j);const l=s.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{loadingCount:d,overrideState:m}=C(I=>I),p=m??d>0,S=s.useRef(null);s.useEffect(()=>{p?(S.current?.showModal(),document.body.setAttribute("inert","")):(S.current?.close(),document.body.removeAttribute("inert"))},[p]);const h=u||"loading-wrapper-"+l.current;return p?O.createPortal(L.jsxs(L.Fragment,{children:[L.jsx("style",{children:`
+                        dialog#${h}[open] {
                             display: flex !important;
                             justify-content: center;
                             align-items: center;
@@ -13,18 +8,18 @@
                             max-width: 100%;
                             max-height: 100%;
                         }
-                        @keyframes ${r.current}-spin {
+                        @keyframes ${l.current}-spin {
                             0% { transform: rotate(0deg); }
                             100% { transform: rotate(360deg); }
                         }
-                        @keyframes ${r.current}-fadeInOut {
+                        @keyframes ${l.current}-fadeInOut {
                             0%, 100% { opacity: 0.2; }
                             50% { opacity: 1; }
                         }
-                        body:has(dialog#${d}[open]) {
+                        body:has(dialog#${h}[open]) {
                             overflow: hidden;
                         }
                         body {
                             scrollbar-gutter: stable;
                         }
-                    `}),C.jsx("dialog",{ref:b,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...o},className:s,id:d,children:C.jsx(B,{scale:t,animationType:n,animationDuration:i,style:a,className:v,id:g,prefix:r.current,children:y.isValidElement(e)?e:y.createElement(e)})})]}),document.body):null}function H({isLoading:e=!1}){const{startLoading:t,stopLoading:n}=A();return y.useEffect(()=>(e?t():n(),()=>{e&&n()}),[e]),null}exports.AnimationType=m;exports.EventEmitter=R;exports.Loading=H;exports.LoadingCircle=k;exports.LoadingPleaseWait=D;exports.LoadingRenderer=X;exports.loadingEventTarget=h;exports.ssrLoading=V;exports.useLoading=A;
+                    `}),L.jsx("dialog",{ref:S,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...i},className:r,id:h,children:L.jsx(k,{scale:t,animationType:n,animationDuration:o,style:f,className:b,id:a,prefix:l.current,children:s.isValidElement(e)?e:s.createElement(e)})})]}),document.body):null}function N({isLoading:e=!1}){const{startLoading:t,stopLoading:n}=w();return s.useEffect(()=>(e?t():n(),()=>{e&&n()}),[e]),null}exports.AnimationType=c;exports.EventEmitter=y;exports.Loading=N;exports.LoadingCircle=E;exports.LoadingPleaseWait=j;exports.LoadingRenderer=M;exports.loadingEventTarget=g;exports.useLoading=w;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export { default as useLoading } from './hooks/useLoading';
-export { default as ssrLoading } from './hooks/ssrLoading';
 export { LoadingCircle, LoadingPleaseWait, AnimationType } from './components/LoadingRenderer';
 export type { AnimationType as AnimationTypeType } from './components/LoadingRenderer';
 export { default as Loading } from './components/Loading';

package/dist/index.esm.js

@@ -1,233 +1,59 @@
 "use client";
-import b, { useId as N, useRef as x, useEffect as A } from "react";
-import { randomUUID as j } from "crypto";
-import { jsx as C, jsxs as D, Fragment as F } from "react/jsx-runtime";
-import { createPortal as M } from "react-dom";
-const T = (e) => {
+import L, { useId as E, useRef as v, useEffect as C } from "react";
+import { jsx as f, jsxs as O, Fragment as $ } from "react/jsx-runtime";
+import { createPortal as j } from "react-dom";
+const y = (n) => {
   let t;
-  const n = /* @__PURE__ */ new Set(), i = (f, r) => {
-    const c = typeof f == "function" ? f(t) : f;
-    if (!Object.is(c, t)) {
-      const p = t;
-      t = r ?? (typeof c != "object" || c === null) ? c : Object.assign({}, t, c), n.forEach((u) => u(t, p));
+  const e = /* @__PURE__ */ new Set(), o = (s, a) => {
+    const l = typeof s == "function" ? s(t) : s;
+    if (!Object.is(l, t)) {
+      const m = t;
+      t = a ?? (typeof l != "object" || l === null) ? l : Object.assign({}, t, l), e.forEach((p) => p(t, m));
     }
-  }, o = () => t, a = { setState: i, getState: o, getInitialState: () => v, subscribe: (f) => (n.add(f), () => n.delete(f)) }, v = t = e(i, o, a);
-  return a;
-}, U = ((e) => e ? T(e) : T), $ = (e) => e;
-function P(e, t = $) {
-  const n = b.useSyncExternalStore(
-    e.subscribe,
-    b.useCallback(() => t(e.getState()), [e, t]),
-    b.useCallback(() => t(e.getInitialState()), [e, t])
+  }, i = () => t, g = { setState: o, getState: i, getInitialState: () => b, subscribe: (s) => (e.add(s), () => e.delete(s)) }, b = t = n(o, i, g);
+  return g;
+}, A = ((n) => n ? y(n) : y), F = (n) => n;
+function k(n, t = F) {
+  const e = L.useSyncExternalStore(
+    n.subscribe,
+    L.useCallback(() => t(n.getState()), [n, t]),
+    L.useCallback(() => t(n.getInitialState()), [n, t])
   );
-  return b.useDebugValue(n), n;
+  return L.useDebugValue(e), e;
 }
-const R = (e) => {
-  const t = U(e), n = (i) => P(t, i);
-  return Object.assign(n, t), n;
-}, J = ((e) => e ? R(e) : R), k = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, w = /* @__PURE__ */ new Map(), _ = (e) => {
-  const t = w.get(e);
-  return t ? Object.fromEntries(
-    Object.entries(t.stores).map(([n, i]) => [n, i.getState()])
-  ) : {};
-}, z = (e, t, n) => {
-  if (e === void 0)
-    return {
-      type: "untracked",
-      connection: t.connect(n)
-    };
-  const i = w.get(n.name);
-  if (i)
-    return { type: "tracked", store: e, ...i };
-  const o = {
-    connection: t.connect(n),
-    stores: {}
-  };
-  return w.set(n.name, o), { type: "tracked", store: e, ...o };
-}, G = (e, t) => {
-  if (t === void 0) return;
-  const n = w.get(e);
-  n && (delete n.stores[t], Object.keys(n.stores).length === 0 && w.delete(e));
-}, V = (e) => {
-  var t, n;
-  if (!e) return;
-  const i = e.split(`
-`), o = i.findIndex(
-    (g) => g.includes("api.setState")
-  );
-  if (o < 0) return;
-  const s = ((t = i[o + 1]) == null ? void 0 : t.trim()) || "";
-  return (n = /.+ (.+) .+/.exec(s)) == null ? void 0 : n[1];
-}, W = (e, t = {}) => (n, i, o) => {
-  const { enabled: s, anonymousActionType: g, store: a, ...v } = t;
-  let f;
-  try {
-    f = (s ?? (k ? "production" : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
-  } catch {
-  }
-  if (!f)
-    return e(n, i, o);
-  const { connection: r, ...c } = z(a, f, v);
-  let p = !0;
-  o.setState = ((d, S, l) => {
-    const L = n(d, S);
-    if (!p) return L;
-    const O = l === void 0 ? {
-      type: g || V(new Error().stack) || "anonymous"
-    } : typeof l == "string" ? { type: l } : l;
-    return a === void 0 ? (r?.send(O, i()), L) : (r?.send(
-      {
-        ...O,
-        type: `${a}/${O.type}`
-      },
-      {
-        ..._(v.name),
-        [a]: o.getState()
-      }
-    ), L);
-  }), o.devtools = {
-    cleanup: () => {
-      r && typeof r.unsubscribe == "function" && r.unsubscribe(), G(v.name, a);
-    }
-  };
-  const u = (...d) => {
-    const S = p;
-    p = !1, n(...d), p = S;
-  }, m = e(o.setState, i, o);
-  if (c.type === "untracked" ? r?.init(m) : (c.stores[c.store] = o, r?.init(
-    Object.fromEntries(
-      Object.entries(c.stores).map(([d, S]) => [
-        d,
-        d === c.store ? m : S.getState()
-      ])
-    )
-  )), o.dispatchFromDevtools && typeof o.dispatch == "function") {
-    let d = !1;
-    const S = o.dispatch;
-    o.dispatch = (...l) => {
-      (k ? "production" : void 0) !== "production" && l[0].type === "__setState" && !d && (console.warn(
-        '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
-      ), d = !0), S(...l);
-    };
-  }
-  return r.subscribe((d) => {
-    var S;
-    switch (d.type) {
-      case "ACTION":
-        if (typeof d.payload != "string") {
-          console.error(
-            "[zustand devtools middleware] Unsupported action format"
-          );
-          return;
-        }
-        return E(
-          d.payload,
-          (l) => {
-            if (l.type === "__setState") {
-              if (a === void 0) {
-                u(l.state);
-                return;
-              }
-              Object.keys(l.state).length !== 1 && console.error(
-                `
-                    [zustand devtools middleware] Unsupported __setState action format.
-                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
-                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
-                    `
-              );
-              const L = l.state[a];
-              if (L == null)
-                return;
-              JSON.stringify(o.getState()) !== JSON.stringify(L) && u(L);
-              return;
-            }
-            o.dispatchFromDevtools && typeof o.dispatch == "function" && o.dispatch(l);
-          }
-        );
-      case "DISPATCH":
-        switch (d.payload.type) {
-          case "RESET":
-            return u(m), a === void 0 ? r?.init(o.getState()) : r?.init(_(v.name));
-          case "COMMIT":
-            if (a === void 0) {
-              r?.init(o.getState());
-              return;
-            }
-            return r?.init(_(v.name));
-          case "ROLLBACK":
-            return E(d.state, (l) => {
-              if (a === void 0) {
-                u(l), r?.init(o.getState());
-                return;
-              }
-              u(l[a]), r?.init(_(v.name));
-            });
-          case "JUMP_TO_STATE":
-          case "JUMP_TO_ACTION":
-            return E(d.state, (l) => {
-              if (a === void 0) {
-                u(l);
-                return;
-              }
-              JSON.stringify(o.getState()) !== JSON.stringify(l[a]) && u(l[a]);
-            });
-          case "IMPORT_STATE": {
-            const { nextLiftedState: l } = d.payload, L = (S = l.computedStates.slice(-1)[0]) == null ? void 0 : S.state;
-            if (!L) return;
-            u(a === void 0 ? L : L[a]), r?.send(
-              null,
-              // FIXME no-any
-              l
-            );
-            return;
-          }
-          case "PAUSE_RECORDING":
-            return p = !p;
-        }
-        return;
-    }
-  }), m;
-}, B = W, E = (e, t) => {
-  let n;
-  try {
-    n = JSON.parse(e);
-  } catch (i) {
-    console.error(
-      "[zustand devtools middleware] Could not parse the received json",
-      i
-    );
-  }
-  n !== void 0 && t(n);
-};
-class X extends EventTarget {
+const x = (n) => {
+  const t = A(n), e = (o) => k(t, o);
+  return Object.assign(e, t), e;
+}, N = ((n) => n ? x(n) : x);
+class R extends EventTarget {
   constructor() {
     super(...arguments), this.controller = new AbortController();
   }
-  on(t, n) {
+  on(t, e) {
     return this.addEventListener(
       t,
-      (i) => n(i.detail),
+      (o) => e(o.detail),
       { signal: this.controller.signal }
     ), this;
   }
-  once(t, n) {
+  once(t, e) {
     return this.addEventListener(
       t,
-      (i) => n(i.detail),
+      (o) => e(o.detail),
       {
         signal: this.controller.signal,
         once: !0
       }
     ), this;
   }
-  emit(t, n) {
-    return this.dispatchEvent(new CustomEvent(t, { detail: n }));
+  emit(t, e) {
+    return this.dispatchEvent(new CustomEvent(t, { detail: e }));
   }
   removeAllListeners() {
     this.controller.abort(), this.controller = new AbortController();
   }
 }
-const h = new X(), I = J()(B((e, t) => ({
+const u = new R(), w = N()((n, t) => ({
   loadingCount: 0,
   overrideState: null,
   localCounters: {},
@@ -238,121 +64,95 @@ const h = new X(), I = J()(B((e, t) => ({
     isGlobalLoading() {
       return t().isLoading();
     },
-    startLoading: (n) => {
-      const i = t().isLoading();
-      e((s) => ({ loadingCount: s.loadingCount + 1 })), n && e((s) => ({
+    startLoading: (e) => {
+      const o = t().isLoading();
+      n((r) => ({ loadingCount: r.loadingCount + 1 })), e && n((r) => ({
         localCounters: {
-          ...s.localCounters,
-          [n]: (s.localCounters[n] ?? 0) + 1
+          ...r.localCounters,
+          [e]: (r.localCounters[e] ?? 0) + 1
         }
       }));
-      const o = t().isLoading();
-      o && !i && h.emit("start", null), h.emit("change", { isLoading: o, isOverrideState: t().overrideState !== null });
+      const i = t().isLoading();
+      i && !o && u.emit("start", null), u.emit("change", { isLoading: i, isOverrideState: t().overrideState !== null });
     },
-    stopLoading: (n) => {
-      const i = t().isLoading(), o = n ? t().localCounters[n] ?? 0 : 0;
-      n && o > 0 && e((g) => ({
-        loadingCount: Math.max(0, g.loadingCount - 1),
+    stopLoading: (e) => {
+      const o = t().isLoading(), i = e ? t().localCounters[e] ?? 0 : 0;
+      e && i > 0 && n((d) => ({
+        loadingCount: Math.max(0, d.loadingCount - 1),
         localCounters: {
-          ...g.localCounters,
-          [n]: Math.max(0, g.localCounters[n] - 1)
+          ...d.localCounters,
+          [e]: Math.max(0, d.localCounters[e] - 1)
         }
       }));
-      const s = t().isLoading();
-      !s && i && h.emit("stop", null), h.emit("change", { isLoading: s, isOverrideState: t().overrideState !== null });
+      const r = t().isLoading();
+      !r && o && u.emit("stop", null), u.emit("change", { isLoading: r, isOverrideState: t().overrideState !== null });
     },
-    overrideLoading: (n) => {
-      const i = t().isLoading();
-      e({ overrideState: n });
+    overrideLoading: (e) => {
       const o = t().isLoading();
-      o && !i ? h.emit("start", null) : !o && i && h.emit("stop", null), h.emit("change", { isLoading: o, isOverrideState: n !== null });
+      n({ overrideState: e });
+      const i = t().isLoading();
+      i && !o ? u.emit("start", null) : !i && o && u.emit("stop", null), u.emit("change", { isLoading: i, isOverrideState: e !== null });
     },
-    getLocalCounter: (n) => t().localCounters[n] ?? 0,
-    isLocalLoading: (n) => (t().localCounters[n] ?? 0) > 0
+    getLocalCounter: (e) => t().localCounters[e] ?? 0,
+    isLocalLoading: (e) => (t().localCounters[e] ?? 0) > 0
   }
-})));
-function H() {
-  const e = N(), { actions: t } = I((s) => s), n = () => {
-    t.startLoading(e);
-  }, i = () => {
-    t.isLocalLoading(e) && t.stopLoading(e);
-  }, o = async (s) => {
-    n();
-    try {
-      return await s;
-    } finally {
-      i();
-    }
-  };
-  return {
-    overrideLoading: t.overrideLoading,
-    startLoading: n,
-    stopLoading: i,
-    get isLocalLoading() {
-      return t.isLocalLoading(e);
-    },
-    asyncUseLoading: o,
-    get isLoading() {
-      return t.isGlobalLoading();
-    }
-  };
-}
-function nt() {
-  const e = j(), { actions: t } = I((s) => s), n = () => {
-    t.startLoading(e);
-  }, i = () => {
-    t.isLocalLoading(e) && t.stopLoading(e);
-  }, o = async (s) => {
-    n();
+}));
+function M() {
+  const n = E(), { actions: t } = w((r) => r), e = () => {
+    t.startLoading(n);
+  }, o = () => {
+    t.isLocalLoading(n) && t.stopLoading(n);
+  }, i = async (r) => {
+    e();
     try {
-      return await s;
+      return await r;
     } finally {
-      i();
+      o();
     }
   };
   return {
     overrideLoading: t.overrideLoading,
-    startLoading: n,
-    stopLoading: i,
+    startLoading: e,
+    stopLoading: o,
     get isLocalLoading() {
-      return t.isLocalLoading(e);
+      return t.isLocalLoading(n);
     },
-    asyncUseLoading: o,
+    asyncUseLoading: i,
     get isLoading() {
       return t.isGlobalLoading();
     }
   };
 }
-const y = {
+const c = {
   Spin: "spin",
   FadeInOut: "fadeInOut",
   None: "none"
-}, K = ({ scale: e = 1, animationType: t = y.Spin, animationDuration: n, children: i, style: o, className: s, id: g, prefix: a }) => {
-  const v = t, f = t === y.Spin ? 1 : t === y.FadeInOut ? 2 : 0, r = n || f, c = t === y.Spin ? "linear" : t === y.FadeInOut ? "ease-in-out" : "linear", p = t === y.None ? "none" : `${a}-${v} ${r}s ${c} infinite`;
-  return /* @__PURE__ */ C("div", { style: { animation: p, ...e !== 1 ? { zoom: e } : {}, ...o }, className: s, id: g, children: i });
-}, q = (e) => /* @__PURE__ */ C("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...e }), Q = (e) => /* @__PURE__ */ C("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...e, children: "Please wait..." });
-function ot({
-  loadingComponent: e,
+}, z = ({ scale: n = 1, animationType: t = c.Spin, animationDuration: e, children: o, style: i, className: r, id: d, prefix: g }) => {
+  const b = t, s = t === c.Spin ? 1 : t === c.FadeInOut ? 2 : 0, a = e || s, l = t === c.Spin ? "linear" : t === c.FadeInOut ? "ease-in-out" : "linear", m = t === c.None ? "none" : `${g}-${b} ${a}s ${l} infinite`;
+  return /* @__PURE__ */ f("div", { style: { animation: m, ...n !== 1 ? { zoom: n } : {}, ...i }, className: r, id: d, children: o });
+}, P = (n) => /* @__PURE__ */ f("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...n }), D = (n) => /* @__PURE__ */ f("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...n, children: "Please wait..." });
+function B({
+  loadingComponent: n,
   loadingComponentScale: t = 1,
-  animationType: n = y.Spin,
-  animationDuration: i,
-  wrapperStyle: o,
-  wrapperClassName: s,
-  wrapperId: g,
-  animationWrapperStyle: a,
-  animationWrapperClassName: v,
-  animationWrapperId: f
+  animationType: e = c.Spin,
+  animationDuration: o,
+  wrapperStyle: i,
+  wrapperClassName: r,
+  wrapperId: d,
+  animationWrapperStyle: g,
+  animationWrapperClassName: b,
+  animationWrapperId: s
 }) {
-  e = e || (n === y.Spin ? q : Q);
-  const r = x(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { loadingCount: c, overrideState: p } = I((S) => S), u = p ?? c > 0, m = x(null);
-  A(() => {
-    u ? (m.current?.showModal(), document.body.setAttribute("inert", "")) : (m.current?.close(), document.body.removeAttribute("inert"));
-  }, [u]);
-  const d = g || "loading-wrapper-" + r.current;
-  return u ? M(
-    /* @__PURE__ */ D(F, { children: [
-      /* @__PURE__ */ C("style", { children: `
-                        dialog#${d}[open] {
+  n = n || (e === c.Spin ? P : D);
+  const a = v(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { loadingCount: l, overrideState: m } = w((I) => I), p = m ?? l > 0, h = v(null);
+  C(() => {
+    p ? (h.current?.showModal(), document.body.setAttribute("inert", "")) : (h.current?.close(), document.body.removeAttribute("inert"));
+  }, [p]);
+  const S = d || "loading-wrapper-" + a.current;
+  return p ? j(
+    /* @__PURE__ */ O($, { children: [
+      /* @__PURE__ */ f("style", { children: `
+                        dialog#${S}[open] {
                             display: flex !important;
                             justify-content: center;
                             align-items: center;
@@ -361,55 +161,54 @@ function ot({
                             max-width: 100%;
                             max-height: 100%;
                         }
-                        @keyframes ${r.current}-spin {
+                        @keyframes ${a.current}-spin {
                             0% { transform: rotate(0deg); }
                             100% { transform: rotate(360deg); }
                         }
-                        @keyframes ${r.current}-fadeInOut {
+                        @keyframes ${a.current}-fadeInOut {
                             0%, 100% { opacity: 0.2; }
                             50% { opacity: 1; }
                         }
-                        body:has(dialog#${d}[open]) {
+                        body:has(dialog#${S}[open]) {
                             overflow: hidden;
                         }
                         body {
                             scrollbar-gutter: stable;
                         }
                     ` }),
-      /* @__PURE__ */ C(
+      /* @__PURE__ */ f(
         "dialog",
         {
-          ref: m,
+          ref: h,
           style: {
             border: "none",
             padding: 0,
             backgroundColor: "rgba(0, 0, 0, 0.5)",
             backdropFilter: "blur(2px)",
-            ...o
+            ...i
           },
-          className: s,
-          id: d,
-          children: /* @__PURE__ */ C(K, { scale: t, animationType: n, animationDuration: i, style: a, className: v, id: f, prefix: r.current, children: b.isValidElement(e) ? e : b.createElement(e) })
+          className: r,
+          id: S,
+          children: /* @__PURE__ */ f(z, { scale: t, animationType: e, animationDuration: o, style: g, className: b, id: s, prefix: a.current, children: L.isValidElement(n) ? n : L.createElement(n) })
         }
       )
     ] }),
     document.body
   ) : null;
 }
-function it({ isLoading: e = !1 }) {
-  const { startLoading: t, stopLoading: n } = H();
-  return A(() => (e ? t() : n(), () => {
-    e && n();
-  }), [e]), null;
+function U({ isLoading: n = !1 }) {
+  const { startLoading: t, stopLoading: e } = M();
+  return C(() => (n ? t() : e(), () => {
+    n && e();
+  }), [n]), null;
 }
 export {
-  y as AnimationType,
-  X as EventEmitter,
-  it as Loading,
-  q as LoadingCircle,
-  Q as LoadingPleaseWait,
-  ot as LoadingRenderer,
-  h as loadingEventTarget,
-  nt as ssrLoading,
-  H as useLoading
+  c as AnimationType,
+  R as EventEmitter,
+  U as Loading,
+  P as LoadingCircle,
+  D as LoadingPleaseWait,
+  B as LoadingRenderer,
+  u as loadingEventTarget,
+  M as useLoading
 };

package/dist/store/loadingStore.d.ts

@@ -22,21 +22,5 @@ interface Store {
         isLocalLoading: (instanceId: string) => boolean;
     };
 }
-export declare const loadingStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<Store>, "setState" | "devtools"> & {
-    setState(partial: Store | Partial<Store> | ((state: Store) => Store | Partial<Store>), replace?: false | undefined, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    setState(state: Store | ((state: Store) => Store), replace: true, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    devtools: {
-        cleanup: () => void;
-    };
-}>;
+export declare const loadingStore: import('zustand').UseBoundStore<import('zustand').StoreApi<Store>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-loading-spinner",
-  "version": "0.2.0",
+  "version": "0.2.5",
   "description": "A lightweight and flexible React loading state hook library with built-in spinner components, global state management, and zero dependencies (except React and Zustand).",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -78,4 +78,4 @@
   "dependencies": {
     "zustand": "^5.0.10"
   }
-}
+}

package/dist/hooks/ssrLoading.d.ts

@@ -1,9 +0,0 @@
-export default function ssrLoading(): {
-    overrideLoading: (state: boolean | null) => void;
-    startLoading: () => void;
-    stopLoading: () => void;
-    readonly isLocalLoading: boolean;
-    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
-    readonly isLoading: boolean;
-};
-export * from '../store/loadingStore';