aark-react-modalify 1.2.1 → 1.2.2

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.
@@ -0,0 +1,51 @@
1
+ "use strict"
2
+ function o(){const[o,a]=c.useState(!1),[e,n]=c.useState(null),t=c.useCallback(()=>{I.close()},[])
3
+ return c.useEffect(()=>{const o=I.subscribe(o=>{switch(o.type){case"open":a(!0),n(o.config||null)
4
+ break
5
+ case"close":a(!1),n(null)}})
6
+ return a(I.isOpen()),n(I.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:t}}function a(){if(z)return
7
+ const o=b()
8
+ z=s.createRoot(o),z.render(c.createElement(N))}function e(o,a){const e={type:o,config:a}
9
+ B.forEach(o=>o(e))}function n(o,n){let t,r
10
+ a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
11
+ const l={content:t,props:r,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},n)}
12
+ T=l,e("open",l)}function t(){T&&(e("beforeClose",T),T=null,e("close"))}function r(o){const a=document.documentElement
13
+ o.overlayBackground&&a.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&a.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&a.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&a.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&a.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&a.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&a.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&a.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&a.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&a.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&a.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&a.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&a.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&a.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&a.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&a.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&a.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&a.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&a.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&a.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&a.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&a.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&a.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function l(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(a=>{o.style.removeProperty(a)})}function i(){const o=document.documentElement,a=getComputedStyle(o)
14
+ return{overlayBackground:a.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:a.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:a.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:a.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:a.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:a.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(a.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(a.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:a.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:a.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:a.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:a.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:a.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:a.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:a.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:a.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:a.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:a.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:a.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:a.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:a.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:a.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:a.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
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
@@ -0,0 +1,62 @@
1
+ function o(){const[o,a]=c(!1),[e,n]=c(null),t=s(()=>{E.close()},[])
2
+ return d(()=>{const o=E.subscribe(o=>{switch(o.type){case"open":a(!0),n(o.config||null)
3
+ break
4
+ case"close":a(!1),n(null)}})
5
+ return a(E.isOpen()),n(E.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:t}}function a(){if(L)return
6
+ const o=N()
7
+ L=k(o),L.render(f(M))}function e(o,a){const e={type:o,config:a}
8
+ O.forEach(o=>o(e))}function n(o,n){let t,r
9
+ a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
10
+ const l={content:t,props:r,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},n)}
11
+ $=l,e("open",l)}function t(){$&&(e("beforeClose",$),$=null,e("close"))}function r(o){const a=document.documentElement
12
+ o.overlayBackground&&a.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&a.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&a.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&a.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&a.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&a.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&a.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&a.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&a.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&a.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&a.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&a.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&a.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&a.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&a.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&a.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&a.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&a.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&a.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&a.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&a.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&a.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&a.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function l(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(a=>{o.style.removeProperty(a)})}function i(){const o=document.documentElement,a=getComputedStyle(o)
13
+ return{overlayBackground:a.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:a.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:a.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:a.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:a.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:a.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(a.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(a.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:a.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:a.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:a.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:a.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:a.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:a.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:a.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:a.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:a.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:a.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:a.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:a.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:a.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:a.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:a.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}import{useState as c,useCallback as s,useEffect as d,memo as m,useMemo as u,createElement as f}from"react"
14
+ import{createRoot as k}from"react-dom/client"
15
+ import{jsx as p,jsxs as h}from"react/jsx-runtime"
16
+ import{createPortal as g}from"react-dom"
17
+ const b={white:"#FFFFFF",black:"#0B071A"},v=m(({name:o,color:a="black",style:e,className:n="",noHoverEffect:t=!1,onClick:r,size:l=24,"aria-label":i,title:c})=>{const s=u(()=>l+"",[l]),d=u(()=>b[a]?b[a]:(a.startsWith("#"),a),[a]),m=u(()=>"close"===o?/* @__PURE__ */p("svg",{xmlns:"http://www.w3.org/2000/svg",width:s,height:s,viewBox:"0 0 16 16",fill:"none",children:/* @__PURE__ */p("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,[o,d,s]),f=u(()=>{const a={}
18
+ return a["aria-label"]=i||o+" icon",c&&(a.title=c),a.role=r?"button":"img",a},[i,c,o,r]),k=u(()=>{if(r)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),r())}},[r]);/* @__PURE__ */
19
+ return p("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:k,tabIndex:r?0:void 0,...f,children:m})})
20
+ v.displayName="Icon"
21
+ const 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",cancelText:r="Cancel",confirmText:l="OK",onCancel:i,onConfirm:c,icon:s,html:d,showCancelButton:m=!1,showConfirmButton:f=!0,reverseButtons:k=!1,width:g="auto",fullWidth:b=!1,customClass:v={}}=o,x=()=>{i?.(),a()},w=()=>{c?.(),a()},N=u(()=>s?"string"==typeof s?/* @__PURE__ */p("span",{children:s}):s:/* @__PURE__ */p("span",{style:{color:y[t]},children:C[t]}),[s,t]),B=k?["confirm","cancel"]:["cancel","confirm"],T=u(()=>{const o={}
22
+ return b?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof g?g+"px":g,o},[g,b]);/* @__PURE__ */
23
+ return h("div",{className:"aark-standard-modal "+(v.popup||""),style:T,children:[
24
+ /* @__PURE__ */h("div",{className:"aark-modal-content "+(v.content||""),children:[N&&/* @__PURE__ */p("div",{className:"aark-modal-icon "+(v.icon||""),children:N}),e&&/* @__PURE__ */p("div",{className:"aark-modal-header "+(v.header||""),children:/* @__PURE__ */p("h2",{className:"aark-modal-title "+(v.title||""),children:e})}),d?/* @__PURE__ */p("div",{dangerouslySetInnerHTML:{o:"string"==typeof d?d:""}}):n?/* @__PURE__ */p("p",{children:n}):null]}),(m||f)&&/* @__PURE__ */p("div",{className:"aark-modal-footer "+(v.actions||""),children:B.map(o=>"cancel"===o&&m?/* @__PURE__ */p("button",{onClick:x,className:"aark-modal-cancel-button "+(v.cancelButton||""),children:r},"cancel"):"confirm"===o&&f?/* @__PURE__ */p("button",{onClick:w,className:"aark-modal-confirm-button "+(v.confirmButton||""),style:{background:y[t]},children:l},"confirm"):null)})]})}
25
+ let w=null
26
+ const N=()=>(w||(w=document.getElementById("aark-react-modalify-root"),w||(w=document.createElement("div"),w.id="aark-react-modalify-root",w.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(w))),w),B=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="center",showCloseIcon:l=!0,className:i="",overlayClassName:c="",preventEscClose:m=!1,preventOverlayClose:u=!1}=t
27
+ d(()=>{const o=o=>{"Escape"!==o.key||m||a()}
28
+ if(!m)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,m])
29
+ const f=s(o=>{o.target!==o.currentTarget||u||a()},[a,u]),k=s(o=>{o.stopPropagation(),a()},[a]),b=`aark-modal-container ${r} ${i}`.trim(),C=N()
30
+ return g(
31
+ /* @__PURE__ */p("div",{className:("aark-modal-overlay "+c).trim(),onClick:f,"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?/* @__PURE__ */h("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&/* @__PURE__ */p("button",{onClick:k,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */p(v,{name:"close",size:12})}),
32
+ /* @__PURE__ */p("div",{className:"aark-modal-wrapper",children:/* @__PURE__ */p(x,{props:n,onClose:a})})]}):e?/* @__PURE__ */h("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&/* @__PURE__ */p("button",{onClick:k,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */p(v,{name:"close",size:12})}),
33
+ /* @__PURE__ */p("div",{className:"aark-modal-body",children:e})]}):null}),C)},T={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},z={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},I=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",icon:r,html:l,timer:i=5e3,showCloseButton:c=!0,clickToClose:s=!0,width:m="300px",fullWidth:f=!1,padding:k="1rem",background:g="#ffffff",customClass:b={}}=o
34
+ d(()=>{if(i&&i>0){const o=setTimeout(a,i)
35
+ return()=>clearTimeout(o)}},[i,a])
36
+ const v=u(()=>r?"string"==typeof r?/* @__PURE__ */p("span",{children:r}):r:/* @__PURE__ */p("span",{style:{color:z[t]},children:T[t]}),[r,t]),C=u(()=>{const o={padding:k,background:g,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:"1px solid "+z[t],cursor:s?"pointer":"default",position:"relative",overflow:"hidden"}
37
+ return f?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof m?m+"px":m,o},[m,f,k,g,t,s]);/* @__PURE__ */
38
+ return h("div",{className:"aark-standard-notification "+(b.popup||""),style:C,onClick:()=>{s&&a()},children:[i&&i>0&&/* @__PURE__ */p("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:z[t],animation:`aark-notification-progress ${i}ms linear forwards`,transformOrigin:"left"}}),
39
+ /* @__PURE__ */h("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[v&&/* @__PURE__ */p("div",{className:"aark-notification-icon "+(b.icon||""),style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:v}),
40
+ /* @__PURE__ */h("div",{style:{flex:1,minWidth:0},children:[e&&/* @__PURE__ */p("div",{className:"aark-notification-header "+(b.header||""),children:/* @__PURE__ */p("h4",{className:"aark-notification-title "+(b.title||""),style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:e})}),
41
+ /* @__PURE__ */p("div",{className:"aark-notification-content "+(b.content||""),style:{marginTop:e?"0.25rem":0},children:l?/* @__PURE__ */p("div",{dangerouslySetInnerHTML:{o:"string"==typeof l?l:""}}):n?/* @__PURE__ */p("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),c&&/* @__PURE__ */p("button",{onClick:o=>{o.stopPropagation(),a()},className:"aark-notification-close "+(b.closeButton||""),style:{background:"none",border:"none",fontSize:"1rem",color:"#9ca3af",cursor:"pointer",padding:0,lineHeight:1,flexShrink:0},"aria-label":"Close notification",children:"×"})]}),
42
+ /* @__PURE__ */p("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},S=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="top-right",showCloseIcon:l=!0,autoCloseTime:i=5e3,className:c="",preventEscClose:m=!1}=t
43
+ d(()=>{if(i&&!n){const o=setTimeout(a,i)
44
+ return()=>clearTimeout(o)}},[i,a,n]),d(()=>{const o=o=>{"Escape"!==o.key||m||a()}
45
+ if(!m)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,m])
46
+ const u=s(o=>{o.stopPropagation(),a()},[a]),f=`aark-notification-container ${r} ${c}`.trim(),k=N()
47
+ return g(
48
+ /* @__PURE__ */p("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"}
49
+ switch(r){case"top-left":return{...o,top:0,left:0}
50
+ case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"}
51
+ case"top-right":default:return{...o,top:0,right:0}
52
+ case"bottom-left":return{...o,bottom:0,left:0}
53
+ case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"}
54
+ case"bottom-right":return{...o,bottom:0,right:0}}})(),children:n?/* @__PURE__ */p("div",{className:"aark-notification-wrapper",children:/* @__PURE__ */p(I,{props:n,onClose:a})}):e?/* @__PURE__ */h("div",{className:f,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[l&&/* @__PURE__ */p("button",{onClick:u,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),
55
+ /* @__PURE__ */p("div",{id:"aark-notification-body",className:"aark-notification-body",children:e})]}):null}),k)},M=()=>{const{isOpen:a,config:e,close:n}=o()
56
+ return a&&e?"modal"===e.mode?/* @__PURE__ */p(B,{config:e,onClose:n}):"notification"===e.mode?/* @__PURE__ */p(S,{config:e,onClose:n}):null:null},O=/* @__PURE__ */new Set
57
+ let $=null,L=null
58
+ const E={subscribe:function(o){return O.add(o),()=>O.delete(o)},fire:function(o,a){n(o,a)},fireModal:n,fireNotification:function(o,n){let t,r
59
+ a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
60
+ const l={content:t,props:r,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},n)}
61
+ $=l,e("open",l)},close:t,isOpen:function(){return null!==$},getCurrentConfig:function(){return $},closeAll:function(){t()},cleanup:function(){L&&(L.unmount(),L=null),w&&0===w.children.length&&(w.remove(),w=null)}},H={fire:(o,a)=>E.fire(o,a),modal:(o,a)=>E.fireModal(o,a),notification:(o,a)=>E.fireNotification(o,a),close:()=>E.close(),isOpen:()=>E.isOpen(),closeAll:()=>E.closeAll(),setTheme:o=>r(o),resetTheme:()=>l(),getTheme:()=>i()}
62
+ export{B as Modal,M as ModalProvider,S as Notification,H as aark,i as getAarkModalTheme,l as resetAarkModalTheme,r as setAarkModalTheme,o as useModal}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aark-react-modalify",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling, and a simple imperative API for displaying modals, alerts, confirmations, and toast notifications.",
5
5
  "private": false,
6
6
  "main": "dist/index.cjs.js",