aark-react-modalify 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aark-react-modalify.css +1 -1
- package/dist/index-no-styles.cjs.js +14 -1
- package/dist/index-no-styles.d.mts +189 -0
- package/dist/index-no-styles.d.ts +189 -0
- package/dist/index-no-styles.esm.js +14 -14
- package/dist/index.cjs.js +14 -51
- package/dist/index.d.mts +189 -0
- package/dist/index.d.ts +189 -9
- package/dist/index.esm.js +14 -62
- package/package.json +86 -92
- package/dist/components/Icon.d.ts +0 -18
- package/dist/components/Modal.d.ts +0 -9
- package/dist/components/ModalProvider.d.ts +0 -7
- package/dist/components/Notification.d.ts +0 -9
- package/dist/components/modals/StandardModal.d.ts +0 -8
- package/dist/components/modals/index.d.ts +0 -1
- package/dist/components/notifications/StandardNotification.d.ts +0 -8
- package/dist/components/notifications/index.d.ts +0 -1
- package/dist/hooks/useModal.d.ts +0 -10
- package/dist/logic/ModalManager.d.ts +0 -24
- package/dist/logic/ModalManagerNew.d.ts +0 -0
- package/dist/logic/aark.d.ts +0 -15
- package/dist/types/index.d.ts +0 -102
- package/dist/utils/inject-styles.d.ts +0 -4
- package/dist/utils/modal-css.d.ts +0 -1
- package/dist/utils/modal-root.d.ts +0 -18
- package/dist/utils/theme.d.ts +0 -40
- package/dist/vite.svg +0 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import{createElement as To}from"react";import{createRoot as Bo}from"react-dom/client";import{useEffect as fo,useState as q,useCallback as mo}from"react";function A(){let[e,o]=q(!1),[t,a]=q(null),i=mo(()=>{k.close()},[]);return fo(()=>{let n=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},p=k.subscribe(n);return o(k.isOpen()),a(k.getCurrentConfig()),p},[]),{isOpen:e,config:t,close:i}}import{useEffect as yo,useCallback as Q,useMemo as vo}from"react";import{createPortal as ko}from"react-dom";import{memo as uo,useMemo as T}from"react";import{jsx as F}from"react/jsx-runtime";var V={white:"#FFFFFF",black:"#0B071A"},j=uo(({name:e,color:o="black",style:t,className:a="",noHoverEffect:i=!1,onClick:n,size:p=24,"aria-label":s,title:h})=>{let f=T(()=>String(p),[p]),m=T(()=>V[o]?V[o]:(o.startsWith("#"),o),[o]),g=T(()=>{let d=m;return e==="close"?F("svg",{xmlns:"http://www.w3.org/2000/svg",width:f,height:f,viewBox:"0 0 16 16",fill:"none",children:F("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null},[e,m,f]),c=T(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${e} icon`,h&&(d.title=h),d.role=n?"button":"img",d},[s,h,e,n]),u=T(()=>{if(n)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),n())}},[n]);return F("i",{className:`
|
|
2
|
+
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
|
+
${!i&&n&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
|
+
${n&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
|
+
${a}
|
|
6
|
+
`.trim(),style:t,onClick:n,onKeyDown:u,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var O=j;import{useMemo as U}from"react";import{jsx as M,jsxs as Y}from"react/jsx-runtime";var po={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},X={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},go=({props:e,onClose:o})=>{let{title:t,text:a,type:i="info",cancelText:n="Cancel",confirmText:p="OK",onCancel:s,onConfirm:h,icon:f,html:m,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:u=!1,width:d="auto",fullWidth:r=!1,customClass:y={}}=e,v=()=>{s?.(),o()},$=()=>{h?.(),o()},R=U(()=>f?typeof f=="string"?M("span",{children:f}):f:M("span",{style:{color:X[i]},children:po[i]}),[f,i]),l=u?["confirm","cancel"]:["cancel","confirm"],w=U(()=>{let x={};return r?(x.width="calc(100vw - 20px)",x.maxWidth="calc(100vw - 20px)"):typeof d=="number"?x.width=`${d}px`:x.width=d,x},[d,r]);return Y("div",{className:`aark-standard-modal ${y.popup||""}`,style:w,children:[Y("div",{className:`aark-modal-content ${y.content||""}`,children:[R&&M("div",{className:`aark-modal-icon ${y.icon||""}`,children:R}),t&&M("div",{className:`aark-modal-header ${y.header||""}`,children:M("h2",{className:`aark-modal-title ${y.title||""}`,children:t})}),m?M("div",{dangerouslySetInnerHTML:{__html:typeof m=="string"?m:""}}):a?M("p",{children:a}):null]}),(g||c)&&M("div",{className:`aark-modal-footer ${y.actions||""}`,children:l.map(x=>x==="cancel"&&g?M("button",{onClick:v,className:`aark-modal-cancel-button ${y.cancelButton||""}`,children:n},"cancel"):x==="confirm"&&c?M("button",{onClick:$,className:`aark-modal-confirm-button ${y.confirmButton||""}`,style:{background:X[i]},children:p},"confirm"):null)})]})},G=go;var C=null,E=()=>(C||(C=document.getElementById("aark-react-modalify-root"),C||(C=document.createElement("div"),C.id="aark-react-modalify-root",C.style.cssText=`
|
|
7
|
+
position: fixed;
|
|
8
|
+
top: 0;
|
|
9
|
+
left: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
z-index: 9998;
|
|
14
|
+
`,document.body.appendChild(C))),C),J=()=>{C&&C.children.length===0&&(C.remove(),C=null)};import{jsx as N,jsxs as oo}from"react/jsx-runtime";var Co={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},ho=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="center",showCloseIcon:p=!0,className:s="",overlayClassName:h="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:u}=i;yo(()=>{if(f)return;let l=w=>{w.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,f]);let d=Q(l=>{l.target===l.currentTarget&&!m&&o()},[o,m]),r=Q(l=>{l.stopPropagation(),o()},[o]),y=vo(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(u){let w=Co[u];u==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,u]),v=`aark-modal-container ${n} ${s}`.trim(),$=E(),R=()=>a?oo("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[p&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),N("div",{className:"aark-modal-wrapper",children:N(G,{props:a,onClose:o})})]}):t?N("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:oo("div",{className:"aark-modal-body",children:[p&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),t]})}):null;return ko(N("div",{className:`aark-modal-overlay ${h}`.trim(),onClick:d,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:n.includes("center")?"center":n.includes("top")?"flex-start":"flex-end",justifyContent:n.includes("center")?"center":n.includes("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:R()}),$)},z=ho;import{useEffect as no,useCallback as No}from"react";import{createPortal as wo}from"react-dom";import{useMemo as eo,useEffect as Mo}from"react";import{jsx as b,jsxs as L}from"react/jsx-runtime";var to={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},bo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},xo=({props:e,onClose:o})=>{let{title:t,text:a,type:i="info",icon:n,html:p,timer:s=5e3,showCloseButton:h=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:u={}}=e;Mo(()=>{if(s&&s>0){let v=setTimeout(o,s);return()=>clearTimeout(v)}},[s,o]);let d=()=>{f&&o()},r=eo(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:to[i]},children:bo[i]}),[n,i]),y=eo(()=>{let v={};return c!==void 0&&(v.padding=typeof c=="number"?`${c}px`:c),g?(v.width="calc(100vw - 40px)",v.maxWidth="calc(100vw - 40px)"):m!==void 0&&(v.width=typeof m=="number"?`${m}px`:m),v},[m,g,c]);return L("div",{className:`aark-standard-notification aark-notification-${i} ${u.popup||""}`,style:y,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:to[i],animation:`aark-notification-progress ${s}ms linear forwards`}}),L("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&b("div",{className:`aark-notification-icon ${u.icon||""}`,children:r}),L("div",{style:{flex:1,minWidth:0},children:[t&&b("div",{className:`aark-notification-header ${u.header||""}`,children:b("h4",{className:`aark-notification-title ${u.title||""}`,children:t})}),b("div",{className:`aark-notification-content ${u.content||""}`,style:{marginTop:t?"0.25rem":0},children:p?b("div",{dangerouslySetInnerHTML:{__html:typeof p=="string"?p:""}}):a?b("p",{children:a}):null})]}),h&&b("button",{onClick:v=>{v.stopPropagation(),o()},className:`aark-notification-close ${u.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},ao=xo;import{jsx as B,jsxs as Eo}from"react/jsx-runtime";var Po=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="top-right",showCloseIcon:p=!0,autoCloseTime:s=5e3,className:h="",preventEscClose:f=!1}=i;no(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),no(()=>{if(f)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,f]);let m=No(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${n} ${h}`.trim(),c=E(),u=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(n){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?B("div",{className:"aark-notification-wrapper",children:B(ao,{props:a,onClose:o})}):t?Eo("div",{className:g,role:"alert","aria-live":"polite",children:[p&&B("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),B("div",{className:"aark-notification-body",children:t})]}):null;return wo(B("div",{style:u(),children:d()}),c)},W=Po;import{jsx as io}from"react/jsx-runtime";var So=()=>{let{isOpen:e,config:o,close:t}=A();return!e||!o?null:o.mode==="modal"?io(z,{config:o,onClose:t}):o.mode==="notification"?io(W,{config:o,onClose:t}):null},H=So;var K=new Set,P=null,S=null;function ro(){if(S)return;let e=E();S=Bo(e),S.render(To(H))}function Ro(e){return K.add(e),()=>K.delete(e)}function I(e,o){let t={type:e,config:o};K.forEach(a=>a(t))}function lo(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};P=i,I("open",i)}function Io(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};P=i,I("open",i)}function $o(e,o){lo(e,o)}function so(){P&&(I("beforeClose",P),P=null,I("close"))}function Ao(){return P!==null}function Fo(){return P}function Oo(){so()}function zo(){S&&(S.unmount(),S=null),J()}var k={subscribe:Ro,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:Oo,cleanup:zo};var co={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],i=co[t];a!==void 0&&i&&o.style.setProperty(i,String(a))})}function Z(){let e=document.documentElement;Object.values(co).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Lo={fire:(e,o)=>k.fire(e,o),modal:(e,o)=>k.fireModal(e,o),notification:(e,o)=>k.fireNotification(e,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},Wo=Lo;export{z as Modal,H as ModalProvider,W as Notification,Wo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,51 +1,14 @@
|
|
|
1
|
-
"use strict"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const c=require("react"),s=require("react-dom/client"),d=require("react/jsx-runtime"),m=require("react-dom"),u={white:"#FFFFFF",black:"#0B071A"},f=c.memo(({name:o,color:a="black",style:e,className:n="",noHoverEffect:t=!1,onClick:r,size:l=24,"aria-label":i,title:s})=>{const m=c.useMemo(()=>l+"",[l]),f=c.useMemo(()=>u[a]?u[a]:(a.startsWith("#"),a),[a]),k=c.useMemo(()=>{const a=f
|
|
16
|
-
return"close"===o?d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:d.jsx("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:a})}):null},[o,f,m]),p=c.useMemo(()=>{const a={}
|
|
17
|
-
return a["aria-label"]=i||o+" icon",s&&(a.title=s),a.role=r?"button":"img",a},[i,s,o,r]),h=c.useMemo(()=>{if(r)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),r())}},[r])
|
|
18
|
-
return d.jsx("i",{className:`\n inline-flex items-center justify-center bg-transparent outline-none border-none\n ${!t&&r&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n ${r&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n ${n}\n `.trim(),style:e,onClick:r,onKeyDown:h,tabIndex:r?0:void 0,...p,children:k})})
|
|
19
|
-
f.displayName="Icon"
|
|
20
|
-
const k={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},p={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},h=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",cancelText:r="Cancel",confirmText:l="OK",onCancel:i,onConfirm:s,icon:m,html:u,showCancelButton:f=!1,showConfirmButton:h=!0,reverseButtons:g=!1,width:b="auto",fullWidth:v=!1,customClass:C={}}=o,y=()=>{i?.(),a()},x=()=>{s?.(),a()},w=c.useMemo(()=>m?"string"==typeof m?d.jsx("span",{children:m}):m:d.jsx("span",{style:{color:p[t]},children:k[t]}),[m,t]),N=g?["confirm","cancel"]:["cancel","confirm"],B=c.useMemo(()=>{const o={}
|
|
21
|
-
return v?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof b?b+"px":b,o},[b,v])
|
|
22
|
-
return d.jsxs("div",{className:"aark-standard-modal "+(C.popup||""),style:B,children:[d.jsxs("div",{className:"aark-modal-content "+(C.content||""),children:[w&&d.jsx("div",{className:"aark-modal-icon "+(C.icon||""),children:w}),e&&d.jsx("div",{className:"aark-modal-header "+(C.header||""),children:d.jsx("h2",{className:"aark-modal-title "+(C.title||""),children:e})}),u?d.jsx("div",{dangerouslySetInnerHTML:{o:"string"==typeof u?u:""}}):n?d.jsx("p",{children:n}):null]}),(f||h)&&d.jsx("div",{className:"aark-modal-footer "+(C.actions||""),children:N.map(o=>"cancel"===o&&f?d.jsx("button",{onClick:y,className:"aark-modal-cancel-button "+(C.cancelButton||""),children:r},"cancel"):"confirm"===o&&h?d.jsx("button",{onClick:x,className:"aark-modal-confirm-button "+(C.confirmButton||""),style:{background:p[t]},children:l},"confirm"):null)})]})}
|
|
23
|
-
let g=null
|
|
24
|
-
const b=()=>(g||(g=document.getElementById("aark-react-modalify-root"),g||(g=document.createElement("div"),g.id="aark-react-modalify-root",g.style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n ",document.body.appendChild(g))),g),v=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="center",showCloseIcon:l=!0,className:i="",overlayClassName:s="",preventEscClose:u=!1,preventOverlayClose:k=!1}=t
|
|
25
|
-
c.useEffect(()=>{const o=o=>{"Escape"!==o.key||u||a()}
|
|
26
|
-
if(!u)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,u])
|
|
27
|
-
const p=c.useCallback(o=>{o.target!==o.currentTarget||k||a()},[a,k]),g=c.useCallback(o=>{o.stopPropagation(),a()},[a]),v=`aark-modal-container ${r} ${i}`.trim(),C=b()
|
|
28
|
-
return m.createPortal(d.jsx("div",{className:("aark-modal-overlay "+s).trim(),onClick:p,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:9999,background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(2px)",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:r.includes("center")?"center":r.includes("top")?"flex-start":"flex-end",justifyContent:r.includes("center")?"center":r.includes("right")?"flex-end":"flex-start",padding:"1rem"},children:n?d.jsxs("div",{className:v,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&d.jsx("button",{onClick:g,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:d.jsx(f,{name:"close",size:12})}),d.jsx("div",{className:"aark-modal-wrapper",children:d.jsx(h,{props:n,onClose:a})})]}):e?d.jsxs("div",{className:v,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&d.jsx("button",{onClick:g,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:d.jsx(f,{name:"close",size:12})}),d.jsx("div",{className:"aark-modal-body",children:e})]}):null}),C)},C={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},y={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},x=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",icon:r,html:l,timer:i=5e3,showCloseButton:s=!0,clickToClose:m=!0,width:u="300px",fullWidth:f=!1,padding:k="1rem",background:p="#ffffff",customClass:h={}}=o
|
|
29
|
-
c.useEffect(()=>{if(i&&i>0){const o=setTimeout(a,i)
|
|
30
|
-
return()=>clearTimeout(o)}},[i,a])
|
|
31
|
-
const g=c.useMemo(()=>r?"string"==typeof r?d.jsx("span",{children:r}):r:d.jsx("span",{style:{color:y[t]},children:C[t]}),[r,t]),b=c.useMemo(()=>{const o={padding:k,background:p,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:"1px solid "+y[t],cursor:m?"pointer":"default",position:"relative",overflow:"hidden"}
|
|
32
|
-
return f?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof u?u+"px":u,o},[u,f,k,p,t,m])
|
|
33
|
-
return d.jsxs("div",{className:"aark-standard-notification "+(h.popup||""),style:b,onClick:()=>{m&&a()},children:[i&&i>0&&d.jsx("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:y[t],animation:`aark-notification-progress ${i}ms linear forwards`,transformOrigin:"left"}}),d.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[g&&d.jsx("div",{className:"aark-notification-icon "+(h.icon||""),style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:g}),d.jsxs("div",{style:{flex:1,minWidth:0},children:[e&&d.jsx("div",{className:"aark-notification-header "+(h.header||""),children:d.jsx("h4",{className:"aark-notification-title "+(h.title||""),style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:e})}),d.jsx("div",{className:"aark-notification-content "+(h.content||""),style:{marginTop:e?"0.25rem":0},children:l?d.jsx("div",{dangerouslySetInnerHTML:{o:"string"==typeof l?l:""}}):n?d.jsx("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),s&&d.jsx("button",{onClick:o=>{o.stopPropagation(),a()},className:"aark-notification-close "+(h.closeButton||""),style:{background:"none",border:"none",fontSize:"1rem",color:"#9ca3af",cursor:"pointer",padding:0,lineHeight:1,flexShrink:0},"aria-label":"Close notification",children:"×"})]}),d.jsx("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},w=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="top-right",showCloseIcon:l=!0,autoCloseTime:i=5e3,className:s="",preventEscClose:u=!1}=t
|
|
34
|
-
c.useEffect(()=>{if(i&&!n){const o=setTimeout(a,i)
|
|
35
|
-
return()=>clearTimeout(o)}},[i,a,n]),c.useEffect(()=>{const o=o=>{"Escape"!==o.key||u||a()}
|
|
36
|
-
if(!u)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,u])
|
|
37
|
-
const f=c.useCallback(o=>{o.stopPropagation(),a()},[a]),k=`aark-notification-container ${r} ${s}`.trim(),p=b()
|
|
38
|
-
return m.createPortal(d.jsx("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"}
|
|
39
|
-
switch(r){case"top-left":return{...o,top:0,left:0}
|
|
40
|
-
case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"}
|
|
41
|
-
case"top-right":default:return{...o,top:0,right:0}
|
|
42
|
-
case"bottom-left":return{...o,bottom:0,left:0}
|
|
43
|
-
case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"}
|
|
44
|
-
case"bottom-right":return{...o,bottom:0,right:0}}})(),children:n?d.jsx("div",{className:"aark-notification-wrapper",children:d.jsx(x,{props:n,onClose:a})}):e?d.jsxs("div",{className:k,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[l&&d.jsx("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),d.jsx("div",{id:"aark-notification-body",className:"aark-notification-body",children:e})]}):null}),p)},N=()=>{const{isOpen:a,config:e,close:n}=o()
|
|
45
|
-
return a&&e?"modal"===e.mode?d.jsx(v,{config:e,onClose:n}):"notification"===e.mode?d.jsx(w,{config:e,onClose:n}):null:null},B=new Set
|
|
46
|
-
let T=null,z=null
|
|
47
|
-
const I={subscribe:function(o){return B.add(o),()=>B.delete(o)},fire:function(o,a){n(o,a)},fireModal:n,fireNotification:function(o,n){let t,r
|
|
48
|
-
a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
|
|
49
|
-
const l={content:t,props:r,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},n)}
|
|
50
|
-
T=l,e("open",l)},close:t,isOpen:function(){return null!==T},getCurrentConfig:function(){return T},closeAll:function(){t()},cleanup:function(){z&&(z.unmount(),z=null),g&&0===g.children.length&&(g.remove(),g=null)}},S={fire:(o,a)=>I.fire(o,a),modal:(o,a)=>I.fireModal(o,a),notification:(o,a)=>I.fireNotification(o,a),close:()=>I.close(),isOpen:()=>I.isOpen(),closeAll:()=>I.closeAll(),setTheme:o=>r(o),resetTheme:()=>l(),getTheme:()=>i()}
|
|
51
|
-
exports.Modal=v,exports.ModalProvider=N,exports.Notification=w,exports.aark=S,exports.getAarkModalTheme=i,exports.resetAarkModalTheme=l,exports.setAarkModalTheme=r,exports.useModal=o
|
|
1
|
+
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var yo=Object.prototype.hasOwnProperty;var vo=(e,o)=>{for(var t in o)V(e,t,{get:o[t],enumerable:!0})},ko=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of go(o))!yo.call(e,n)&&n!==t&&V(e,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return e};var Co=e=>ko(V({},"__esModule",{value:!0}),e);var Oo={};vo(Oo,{Modal:()=>L,ModalProvider:()=>H,Notification:()=>W,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>O});module.exports=Co(Oo);var ro=require("react"),lo=require("react-dom/client");var E=require("react");function O(){let[e,o]=(0,E.useState)(!1),[t,a]=(0,E.useState)(null),n=(0,E.useCallback)(()=>{h.close()},[]);return(0,E.useEffect)(()=>{let i=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},u=h.subscribe(i);return o(h.isOpen()),a(h.getCurrentConfig()),u},[]),{isOpen:e,config:t,close:n}}var R=require("react"),to=require("react-dom");var w=require("react"),z=require("react/jsx-runtime"),G={white:"#FFFFFF",black:"#0B071A"},J=(0,w.memo)(({name:e,color:o="black",style:t,className:a="",noHoverEffect:n=!1,onClick:i,size:u=24,"aria-label":s,title:x})=>{let f=(0,w.useMemo)(()=>String(u),[u]),m=(0,w.useMemo)(()=>G[o]?G[o]:(o.startsWith("#"),o),[o]),g=(0,w.useMemo)(()=>{let d=m;return e==="close"?(0,z.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:f,height:f,viewBox:"0 0 16 16",fill:"none",children:(0,z.jsx)("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null},[e,m,f]),c=(0,w.useMemo)(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${e} icon`,x&&(d.title=x),d.role=i?"button":"img",d},[s,x,e,i]),p=(0,w.useMemo)(()=>{if(i)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),i())}},[i]);return(0,z.jsx)("i",{className:`
|
|
2
|
+
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
|
+
${!n&&i&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
|
+
${i&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
|
+
${a}
|
|
6
|
+
`.trim(),style:t,onClick:i,onKeyDown:p,tabIndex:i?0:void 0,...c,children:g})});J.displayName="Icon";var j=J;var U=require("react"),C=require("react/jsx-runtime"),ho={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},Q={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},Mo=({props:e,onClose:o})=>{let{title:t,text:a,type:n="info",cancelText:i="Cancel",confirmText:u="OK",onCancel:s,onConfirm:x,icon:f,html:m,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:y={}}=e,k=()=>{s?.(),o()},q=()=>{x?.(),o()},F=(0,U.useMemo)(()=>f?typeof f=="string"?(0,C.jsx)("span",{children:f}):f:(0,C.jsx)("span",{style:{color:Q[n]},children:ho[n]}),[f,n]),l=p?["confirm","cancel"]:["cancel","confirm"],S=(0,U.useMemo)(()=>{let N={};return r?(N.width="calc(100vw - 20px)",N.maxWidth="calc(100vw - 20px)"):typeof d=="number"?N.width=`${d}px`:N.width=d,N},[d,r]);return(0,C.jsxs)("div",{className:`aark-standard-modal ${y.popup||""}`,style:S,children:[(0,C.jsxs)("div",{className:`aark-modal-content ${y.content||""}`,children:[F&&(0,C.jsx)("div",{className:`aark-modal-icon ${y.icon||""}`,children:F}),t&&(0,C.jsx)("div",{className:`aark-modal-header ${y.header||""}`,children:(0,C.jsx)("h2",{className:`aark-modal-title ${y.title||""}`,children:t})}),m?(0,C.jsx)("div",{dangerouslySetInnerHTML:{__html:typeof m=="string"?m:""}}):a?(0,C.jsx)("p",{children:a}):null]}),(g||c)&&(0,C.jsx)("div",{className:`aark-modal-footer ${y.actions||""}`,children:l.map(N=>N==="cancel"&&g?(0,C.jsx)("button",{onClick:k,className:`aark-modal-cancel-button ${y.cancelButton||""}`,children:i},"cancel"):N==="confirm"&&c?(0,C.jsx)("button",{onClick:q,className:`aark-modal-confirm-button ${y.confirmButton||""}`,style:{background:Q[n]},children:u},"confirm"):null)})]})},oo=Mo;var M=null,B=()=>(M||(M=document.getElementById("aark-react-modalify-root"),M||(M=document.createElement("div"),M.id="aark-react-modalify-root",M.style.cssText=`
|
|
7
|
+
position: fixed;
|
|
8
|
+
top: 0;
|
|
9
|
+
left: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
z-index: 9998;
|
|
14
|
+
`,document.body.appendChild(M))),M),eo=()=>{M&&M.children.length===0&&(M.remove(),M=null)};var b=require("react/jsx-runtime"),bo={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},xo=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="center",showCloseIcon:u=!0,className:s="",overlayClassName:x="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:p}=n;(0,R.useEffect)(()=>{if(f)return;let l=S=>{S.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,f]);let d=(0,R.useCallback)(l=>{l.target===l.currentTarget&&!m&&o()},[o,m]),r=(0,R.useCallback)(l=>{l.stopPropagation(),o()},[o]),y=(0,R.useMemo)(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let S=bo[p];p==="full"&&(l.width=l.width??S),l.maxWidth=S}return l},[g,c,p]),k=`aark-modal-container ${i} ${s}`.trim(),q=B(),F=()=>a?(0,b.jsxs)("div",{className:k,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),(0,b.jsx)("div",{className:"aark-modal-wrapper",children:(0,b.jsx)(oo,{props:a,onClose:o})})]}):t?(0,b.jsx)("div",{className:k,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:(0,b.jsxs)("div",{className:"aark-modal-body",children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),t]})}):null;return(0,to.createPortal)((0,b.jsx)("div",{className:`aark-modal-overlay ${x}`.trim(),onClick:d,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:i.includes("center")?"center":i.includes("top")?"flex-start":"flex-end",justifyContent:i.includes("center")?"center":i.includes("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},L=xo;var A=require("react"),io=require("react-dom");var $=require("react"),v=require("react/jsx-runtime"),ao={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},No={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},wo=({props:e,onClose:o})=>{let{title:t,text:a,type:n="info",icon:i,html:u,timer:s=5e3,showCloseButton:x=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:p={}}=e;(0,$.useEffect)(()=>{if(s&&s>0){let k=setTimeout(o,s);return()=>clearTimeout(k)}},[s,o]);let d=()=>{f&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,v.jsx)("span",{children:i}):i:(0,v.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),y=(0,$.useMemo)(()=>{let k={};return c!==void 0&&(k.padding=typeof c=="number"?`${c}px`:c),g?(k.width="calc(100vw - 40px)",k.maxWidth="calc(100vw - 40px)"):m!==void 0&&(k.width=typeof m=="number"?`${m}px`:m),k},[m,g,c]);return(0,v.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&(0,v.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,v.jsx)("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),(0,v.jsxs)("div",{style:{flex:1,minWidth:0},children:[t&&(0,v.jsx)("div",{className:`aark-notification-header ${p.header||""}`,children:(0,v.jsx)("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),(0,v.jsx)("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?(0,v.jsx)("div",{dangerouslySetInnerHTML:{__html:typeof u=="string"?u:""}}):a?(0,v.jsx)("p",{children:a}):null})]}),x&&(0,v.jsx)("button",{onClick:k=>{k.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},no=wo;var P=require("react/jsx-runtime"),Po=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:x="",preventEscClose:f=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(f)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,f]);let m=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${i} ${x}`.trim(),c=B(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(i){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?(0,P.jsx)("div",{className:"aark-notification-wrapper",children:(0,P.jsx)(no,{props:a,onClose:o})}):t?(0,P.jsxs)("div",{className:g,role:"alert","aria-live":"polite",children:[u&&(0,P.jsx)("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),(0,P.jsx)("div",{className:"aark-notification-body",children:t})]}):null;return(0,io.createPortal)((0,P.jsx)("div",{style:p(),children:d()}),c)},W=Po;var X=require("react/jsx-runtime"),So=()=>{let{isOpen:e,config:o,close:t}=O();return!e||!o?null:o.mode==="modal"?(0,X.jsx)(L,{config:o,onClose:t}):o.mode==="notification"?(0,X.jsx)(W,{config:o,onClose:t}):null},H=So;var Y=new Set,T=null,I=null;function so(){if(I)return;let e=B();I=(0,lo.createRoot)(e),I.render((0,ro.createElement)(H))}function Eo(e){return Y.add(e),()=>Y.delete(e)}function K(e,o){let t={type:e,config:o};Y.forEach(a=>a(t))}function co(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};T=n,K("open",n)}function Ro(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};T=n,K("open",n)}function To(e,o){co(e,o)}function fo(){T&&(K("beforeClose",T),T=null,K("close"))}function Bo(){return T!==null}function Io(){return T}function $o(){fo()}function Ao(){I&&(I.unmount(),I=null),eo()}var h={subscribe:Eo,fire:To,fireModal:co,fireNotification:Ro,close:fo,isOpen:Bo,getCurrentConfig:Io,closeAll:$o,cleanup:Ao};var mo={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],n=mo[t];a!==void 0&&n&&o.style.setProperty(n,String(a))})}function Z(){let e=document.documentElement;Object.values(mo).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Fo={fire:(e,o)=>h.fire(e,o),modal:(e,o)=>h.fireModal(e,o),notification:(e,o)=>h.fireNotification(e,o),close:()=>h.close(),isOpen:()=>h.isOpen(),closeAll:()=>h.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},po=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { ReactNode, FC } from 'react';
|
|
2
|
+
|
|
3
|
+
type ModalPosition = "center" | "top-center" | "top-right" | "bottom-right" | "bottom-center";
|
|
4
|
+
type NotificationPosition = "top-right" | "top-center" | "top-left" | "bottom-right" | "bottom-center" | "bottom-left";
|
|
5
|
+
type ModalMode = "modal" | "notification";
|
|
6
|
+
type ModalType = "success" | "error" | "warning" | "info" | "question";
|
|
7
|
+
/** Convenience size presets — maps to max-width values */
|
|
8
|
+
type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
9
|
+
interface ModalProps$1 {
|
|
10
|
+
title?: string;
|
|
11
|
+
text?: string;
|
|
12
|
+
type?: ModalType;
|
|
13
|
+
cancelText?: string;
|
|
14
|
+
confirmText?: string;
|
|
15
|
+
onCancel?: () => void;
|
|
16
|
+
onConfirm?: () => void;
|
|
17
|
+
icon?: string | ReactNode;
|
|
18
|
+
html?: string | ReactNode;
|
|
19
|
+
showCancelButton?: boolean;
|
|
20
|
+
showConfirmButton?: boolean;
|
|
21
|
+
allowOutsideClick?: boolean;
|
|
22
|
+
allowEscapeKey?: boolean;
|
|
23
|
+
reverseButtons?: boolean;
|
|
24
|
+
focusConfirm?: boolean;
|
|
25
|
+
focusCancel?: boolean;
|
|
26
|
+
width?: string | number;
|
|
27
|
+
fullWidth?: boolean;
|
|
28
|
+
padding?: string | number;
|
|
29
|
+
background?: string;
|
|
30
|
+
customClass?: {
|
|
31
|
+
container?: string;
|
|
32
|
+
popup?: string;
|
|
33
|
+
header?: string;
|
|
34
|
+
title?: string;
|
|
35
|
+
closeButton?: string;
|
|
36
|
+
icon?: string;
|
|
37
|
+
image?: string;
|
|
38
|
+
content?: string;
|
|
39
|
+
input?: string;
|
|
40
|
+
actions?: string;
|
|
41
|
+
confirmButton?: string;
|
|
42
|
+
cancelButton?: string;
|
|
43
|
+
footer?: string;
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
interface NotificationProps$1 {
|
|
47
|
+
title?: string;
|
|
48
|
+
text?: string;
|
|
49
|
+
type?: ModalType;
|
|
50
|
+
icon?: string | ReactNode;
|
|
51
|
+
html?: string | ReactNode;
|
|
52
|
+
timer?: number;
|
|
53
|
+
showCloseButton?: boolean;
|
|
54
|
+
clickToClose?: boolean;
|
|
55
|
+
width?: string | number;
|
|
56
|
+
fullWidth?: boolean;
|
|
57
|
+
padding?: string | number;
|
|
58
|
+
background?: string;
|
|
59
|
+
customClass?: {
|
|
60
|
+
container?: string;
|
|
61
|
+
popup?: string;
|
|
62
|
+
header?: string;
|
|
63
|
+
title?: string;
|
|
64
|
+
closeButton?: string;
|
|
65
|
+
icon?: string;
|
|
66
|
+
content?: string;
|
|
67
|
+
footer?: string;
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
interface BaseOptions {
|
|
71
|
+
showCloseIcon?: boolean;
|
|
72
|
+
className?: string;
|
|
73
|
+
preventEscClose?: boolean;
|
|
74
|
+
}
|
|
75
|
+
interface ModalOptions extends BaseOptions {
|
|
76
|
+
position?: ModalPosition;
|
|
77
|
+
overlayClassName?: string;
|
|
78
|
+
preventOverlayClose?: boolean;
|
|
79
|
+
/** Convenience size preset. Overridden by explicit width/maxWidth. */
|
|
80
|
+
size?: ModalSize;
|
|
81
|
+
/** Explicit width (e.g. '500px', '80%', 600). Overrides size preset. */
|
|
82
|
+
width?: string | number;
|
|
83
|
+
/** Explicit max-width (e.g. '600px', '90vw'). Overrides size preset. */
|
|
84
|
+
maxWidth?: string | number;
|
|
85
|
+
}
|
|
86
|
+
interface NotificationOptions extends BaseOptions {
|
|
87
|
+
position?: NotificationPosition;
|
|
88
|
+
autoCloseTime?: number;
|
|
89
|
+
}
|
|
90
|
+
interface ModalConfig {
|
|
91
|
+
content?: ReactNode;
|
|
92
|
+
props?: ModalProps$1;
|
|
93
|
+
options?: ModalOptions;
|
|
94
|
+
mode: "modal";
|
|
95
|
+
}
|
|
96
|
+
interface NotificationConfig {
|
|
97
|
+
content?: ReactNode;
|
|
98
|
+
props?: NotificationProps$1;
|
|
99
|
+
options?: NotificationOptions;
|
|
100
|
+
mode: "notification";
|
|
101
|
+
}
|
|
102
|
+
type ComponentConfig = ModalConfig | NotificationConfig;
|
|
103
|
+
interface ModalState {
|
|
104
|
+
isOpen: boolean;
|
|
105
|
+
config: ComponentConfig | null;
|
|
106
|
+
}
|
|
107
|
+
type ModalEventType = "open" | "close" | "beforeClose";
|
|
108
|
+
interface ModalEvent {
|
|
109
|
+
type: ModalEventType;
|
|
110
|
+
config?: ComponentConfig;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* CSS Theme customization utilities for AARK React Modalify
|
|
115
|
+
*/
|
|
116
|
+
interface AarkModalTheme {
|
|
117
|
+
overlayBackground?: string;
|
|
118
|
+
overlayBlur?: string;
|
|
119
|
+
modalBackground?: string;
|
|
120
|
+
modalBorderRadius?: string;
|
|
121
|
+
modalShadow?: string;
|
|
122
|
+
modalPadding?: string;
|
|
123
|
+
modalMaxWidth?: string;
|
|
124
|
+
modalZIndex?: number;
|
|
125
|
+
closeButtonColor?: string;
|
|
126
|
+
closeButtonHoverBackground?: string;
|
|
127
|
+
closeButtonHoverColor?: string;
|
|
128
|
+
closeButtonFocusOutline?: string;
|
|
129
|
+
animationDuration?: string;
|
|
130
|
+
notificationBackground?: string;
|
|
131
|
+
notificationBorderRadius?: string;
|
|
132
|
+
notificationShadow?: string;
|
|
133
|
+
notificationPadding?: string;
|
|
134
|
+
notificationZIndex?: number;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Apply custom theme to AARK Modal CSS variables
|
|
138
|
+
*/
|
|
139
|
+
declare function setAarkModalTheme(theme: AarkModalTheme): void;
|
|
140
|
+
/**
|
|
141
|
+
* Reset AARK Modal theme to default values
|
|
142
|
+
*/
|
|
143
|
+
declare function resetAarkModalTheme(): void;
|
|
144
|
+
/**
|
|
145
|
+
* Get current AARK Modal theme values
|
|
146
|
+
*/
|
|
147
|
+
declare function getAarkModalTheme(): AarkModalTheme;
|
|
148
|
+
|
|
149
|
+
declare const aark: {
|
|
150
|
+
fire: (contentOrProps: ReactNode | ModalProps$1, options?: ModalOptions) => void;
|
|
151
|
+
modal: (contentOrProps: ReactNode | ModalProps$1, options?: ModalOptions) => void;
|
|
152
|
+
notification: (contentOrProps: ReactNode | NotificationProps$1, options?: NotificationOptions) => void;
|
|
153
|
+
close: () => void;
|
|
154
|
+
isOpen: () => boolean;
|
|
155
|
+
closeAll: () => void;
|
|
156
|
+
setTheme: (theme: AarkModalTheme) => void;
|
|
157
|
+
resetTheme: () => void;
|
|
158
|
+
getTheme: () => AarkModalTheme;
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
interface UseModalReturn {
|
|
162
|
+
isOpen: boolean;
|
|
163
|
+
config: ComponentConfig | null;
|
|
164
|
+
close: () => void;
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Hook to manage modal state and listen to modal events
|
|
168
|
+
*/
|
|
169
|
+
declare function useModal(): UseModalReturn;
|
|
170
|
+
|
|
171
|
+
interface ModalProps {
|
|
172
|
+
config: ModalConfig;
|
|
173
|
+
onClose: () => void;
|
|
174
|
+
}
|
|
175
|
+
declare const Modal: FC<ModalProps>;
|
|
176
|
+
|
|
177
|
+
interface NotificationProps {
|
|
178
|
+
config: NotificationConfig;
|
|
179
|
+
onClose: () => void;
|
|
180
|
+
}
|
|
181
|
+
declare const Notification: FC<NotificationProps>;
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* ModalProvider component that renders modals globally
|
|
185
|
+
* This component should be rendered once in your app's root
|
|
186
|
+
*/
|
|
187
|
+
declare const ModalProvider: FC;
|
|
188
|
+
|
|
189
|
+
export { type AarkModalTheme, type ComponentConfig, Modal, type ModalConfig, type ModalEvent, type ModalEventType, type ModalMode, type ModalOptions, type ModalPosition, type ModalProps$1 as ModalProps, ModalProvider, type ModalSize, type ModalState, type ModalType, Notification, type NotificationConfig, type NotificationOptions, type NotificationPosition, type NotificationProps$1 as NotificationProps, aark, getAarkModalTheme, resetAarkModalTheme, setAarkModalTheme, useModal };
|