aark-react-modalify 1.2.2 → 1.3.1

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/index.esm.js CHANGED
@@ -1,62 +1,13 @@
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}
1
+ import{createElement as Ro}from"react";import{createRoot as To}from"react-dom/client";import{useEffect as fo,useState as q,useCallback as mo}from"react";function A(){let[t,o]=q(!1),[e,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}},u=k.subscribe(n);return o(k.isOpen()),a(k.getCurrentConfig()),u},[]),{isOpen:t,config:e,close:i}}import{useEffect as yo,useCallback as Q,useMemo as vo}from"react";import{createPortal as ko}from"react-dom";import{memo as po,useMemo as R}from"react";import{jsx as F}from"react/jsx-runtime";var V={white:"#FFFFFF",black:"#0B071A"},j=po(({name:t,color:o="black",style:e,className:a="",noHoverEffect:i=!1,onClick:n,size:u=24,"aria-label":s,title:h})=>{let m=R(()=>String(u),[u]),f=R(()=>V[o]?V[o]:(o.startsWith("#"),o),[o]),g=R(()=>{let d=f;return t==="close"?F("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,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},[t,f,m]),c=R(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${t} icon`,h&&(d.title=h),d.role=n?"button":"img",d},[s,h,t,n]),p=R(()=>{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:e,onClick:n,onKeyDown:p,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 uo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},X={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},go=({props:t,onClose:o})=>{let{title:e,text:a,type:i="info",cancelText:n="Cancel",confirmText:u="OK",onCancel:s,onConfirm:h,icon:m,html:f,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:y={}}=t,v=()=>{s?.(),o()},$=()=>{h?.(),o()},B=U(()=>m?typeof m=="string"?M("span",{children:m}):m:M("span",{style:{color:X[i]},children:uo[i]}),[m,i]),l=p?["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:[B&&M("div",{className:`aark-modal-icon ${y.icon||""}`,children:B}),e&&M("div",{className:`aark-modal-header ${y.header||""}`,children:M("h2",{className:`aark-modal-title ${y.title||""}`,children:e})}),f?typeof f=="string"?M("div",{dangerouslySetInnerHTML:{__html:f}}):M("div",{children:f}):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:u},"confirm"):null)})]})},G=go;var C=null,S=()=>(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
+ `,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:t,onClose:o})=>{let{content:e,props:a,options:i={}}=t,{position:n="center",showCloseIcon:u=!0,className:s="",overlayClassName:h="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:g,maxWidth:c,size:p}=i;yo(()=>{if(m)return;let l=w=>{w.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=Q(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),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(p){let w=Co[p];p==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,p]),v=`aark-modal-container ${n} ${s}`.trim(),$=S(),B=()=>a?oo("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&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})})]}):e?N("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:oo("div",{className:"aark-modal-body",children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),e]})}):null;return ko(N("div",{className:`aark-modal-overlay ${h}`.trim(),onClick:d,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==="center"?"center":n.startsWith("top")?"flex-start":"flex-end",justifyContent:n.endsWith("center")?"center":n.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:B()}),$)},z=ho;import{useEffect as no,useCallback as No}from"react";import{createPortal as wo}from"react-dom";import{useMemo as to,useEffect as Mo}from"react";import{jsx as b,jsxs as W}from"react/jsx-runtime";var eo={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},bo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},xo=({props:t,onClose:o})=>{let{title:e,text:a,type:i="info",icon:n,html:u,timer:s=5e3,showCloseButton:h=!0,clickToClose:m=!0,width:f,fullWidth:g=!1,padding:c,customClass:p={}}=t;Mo(()=>{if(s&&s>0){let v=setTimeout(o,s);return()=>clearTimeout(v)}},[s,o]);let d=()=>{m&&o()},r=to(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:eo[i]},children:bo[i]}),[n,i]),y=to(()=>{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)"):f!==void 0&&(v.width=typeof f=="number"?`${f}px`:f),v},[f,g,c]);return W("div",{className:`aark-standard-notification aark-notification-${i} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:eo[i],animation:`aark-notification-progress ${s}ms linear forwards`}}),W("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&b("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),W("div",{style:{flex:1,minWidth:0},children:[e&&b("div",{className:`aark-notification-header ${p.header||""}`,children:b("h4",{className:`aark-notification-title ${p.title||""}`,children:e})}),b("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:e?"0.25rem":0},children:u?typeof u=="string"?b("div",{dangerouslySetInnerHTML:{__html:u}}):b("div",{children:u}):a?b("p",{children:a}):null})]}),h&&b("button",{onClick:v=>{v.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},ao=xo;import{jsx as T,jsxs as So}from"react/jsx-runtime";var Po=({config:t,onClose:o})=>{let{content:e,props:a,options:i={}}=t,{position:n="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:h="",preventEscClose:m=!1}=i;no(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),no(()=>{if(m)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=No(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${n} ${h}`.trim(),c=S(),p=()=>{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?T("div",{className:"aark-notification-wrapper",children:T(ao,{props:a,onClose:o})}):e?So("div",{className:g,role:"alert","aria-live":"polite",children:[u&&T("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),T("div",{className:"aark-notification-body",children:e})]}):null;return wo(T("div",{style:p(),children:d()}),c)},L=Po;import{jsx as io}from"react/jsx-runtime";var Eo=()=>{let{isOpen:t,config:o,close:e}=A();return!t||!o?null:o.mode==="modal"?io(z,{config:o,onClose:e}):o.mode==="notification"?io(L,{config:o,onClose:e}):null},H=Eo;var K=new Set,P=null,E=null;function ro(){if(E)return;let t=S();E=To(t),E.render(Ro(H))}function Bo(t){return K.add(t),()=>K.delete(t)}function I(t,o){let e={type:t,config:o};K.forEach(a=>a(e))}function lo(t,o){ro();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let i={content:e,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};P=i,I("open",i)}function Io(t,o){ro();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let i={content:e,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};P=i,I("open",i)}function $o(t,o){lo(t,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(){E&&(E.unmount(),E=null),J()}var k={subscribe:Bo,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(t){let o=document.documentElement;Object.keys(t).forEach(e=>{let a=t[e],i=co[e];a!==void 0&&i&&o.style.setProperty(i,String(a))})}function Z(){let t=document.documentElement;Object.values(co).forEach(o=>{t.style.removeProperty(o)})}function _(){let t=document.documentElement,o=getComputedStyle(t),e=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:e("--aark-modal-overlay-bg"),overlayBlur:e("--aark-modal-overlay-blur"),modalBackground:e("--aark-modal-bg"),modalBorderRadius:e("--aark-modal-radius"),modalShadow:e("--aark-modal-shadow"),modalPadding:e("--aark-modal-pad"),modalMaxWidth:e("--aark-modal-max-width"),modalZIndex:parseInt(e("--aark-modal-z")??"0")||void 0,closeButtonColor:e("--aark-close-color"),closeButtonHoverBackground:e("--aark-close-hover"),closeButtonHoverColor:e("--aark-close-hover-color"),closeButtonFocusOutline:e("--aark-close-focus-outline"),animationDuration:e("--aark-anim"),notificationBackground:e("--aark-notification-bg"),notificationBorderRadius:e("--aark-notification-radius"),notificationShadow:e("--aark-notification-shadow"),notificationPadding:e("--aark-notification-pad"),notificationZIndex:parseInt(e("--aark-notification-z")??"0")||void 0}}var Wo={fire:(t,o)=>k.fire(t,o),modal:(t,o)=>k.fireModal(t,o),notification:(t,o)=>k.fireNotification(t,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:t=>D(t),resetTheme:()=>Z(),getTheme:()=>_()},Lo=Wo;export{z as Modal,H as ModalProvider,L as Notification,Lo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
package/package.json CHANGED
@@ -1,93 +1,87 @@
1
1
  {
2
- "name": "aark-react-modalify",
3
- "version": "1.2.2",
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
- "private": false,
6
- "main": "dist/index.cjs.js",
7
- "module": "dist/index.esm.js",
8
- "types": "dist/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "import": "./dist/index.esm.js",
13
- "require": "./dist/index.cjs.js"
14
- },
15
- "./no-styles": {
16
- "types": "./dist/index-no-styles.d.ts",
17
- "import": "./dist/index-no-styles.esm.js",
18
- "require": "./dist/index-no-styles.cjs.js"
19
- },
20
- "./dist/aark-react-modalify.css": "./dist/aark-react-modalify.css",
21
- "./css": "./dist/aark-react-modalify.css"
22
- },
23
- "files": [
24
- "dist",
25
- "README.md",
26
- "LICENSE"
27
- ],
28
- "scripts": {
29
- "build": "npm run clean && npm run build:lib && npm run build:no-styles && npm run build:types",
30
- "build:lib": "vite build --config vite.lib.config.ts",
31
- "build:no-styles": "vite build --config vite.lib-no-styles.config.ts",
32
- "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly",
33
- "clean": "rimraf dist",
34
- "dev": "vite",
35
- "prepare": "npm run build",
36
- "lint": "eslint src --ext .ts,.tsx",
37
- "lint:fix": "eslint src --ext .ts,.tsx --fix",
38
- "typecheck": "tsc --noEmit",
39
- "analyze": "npm run build && npx bundlesize"
40
- },
41
- "keywords": [
42
- "react",
43
- "modal",
44
- "notification",
45
- "toast",
46
- "popup",
47
- "dialog",
48
- "alert",
49
- "confirm",
50
- "typescript",
51
- "imperative",
52
- "lightweight",
53
- "flexible",
54
- "customizable",
55
- "aark-react-modalify",
56
- "aark-modal",
57
- "aark-toast",
58
- "aark-notification"
59
- ],
60
- "peerDependencies": {
61
- "react": ">=16.8.0",
62
- "react-dom": ">=16.8.0"
63
- },
64
- "devDependencies": {
65
- "@eslint/js": "^9.39.1",
66
- "@types/node": "^24.10.1",
67
- "@types/react": "^19.2.6",
68
- "@types/react-dom": "^19.2.3",
69
- "@vitejs/plugin-react": "^5.1.1",
70
- "cssnano": "^7.1.2",
71
- "eslint": "^9.39.1",
72
- "eslint-plugin-react-hooks": "^7.0.1",
73
- "eslint-plugin-react-refresh": "^0.4.24",
74
- "globals": "^16.5.0",
75
- "react": "^19.2.0",
76
- "react-dom": "^19.2.0",
77
- "rimraf": "^6.1.0",
78
- "terser": "^5.44.1",
79
- "typescript": "~5.9.3",
80
- "typescript-eslint": "^8.47.0",
81
- "vite": "^7.2.2"
82
- },
83
- "license": "MIT",
84
- "author": "Mohammad Sumon",
85
- "repository": {
86
- "type": "git",
87
- "url": "git+https://github.com/sumonsbgc/aark-react-modalify.git"
88
- },
89
- "homepage": "https://github.com/sumonsbgc/aark-react-modalify#readme",
90
- "bugs": {
91
- "url": "https://github.com/sumonsbgc/aark-react-modalify/issues"
92
- }
93
- }
2
+ "name": "aark-react-modalify",
3
+ "version": "1.3.1",
4
+ "description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling via CSS variables, responsive size presets, and a simple imperative API.",
5
+ "private": false,
6
+ "main": "dist/index.cjs.js",
7
+ "module": "dist/index.esm.js",
8
+ "types": "dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.esm.js",
13
+ "require": "./dist/index.cjs.js"
14
+ },
15
+ "./no-styles": {
16
+ "types": "./dist/index-no-styles.d.ts",
17
+ "import": "./dist/index-no-styles.esm.js",
18
+ "require": "./dist/index-no-styles.cjs.js"
19
+ },
20
+ "./dist/aark-react-modalify.css": "./dist/aark-react-modalify.css",
21
+ "./css": "./dist/aark-react-modalify.css"
22
+ },
23
+ "files": [
24
+ "dist",
25
+ "README.md",
26
+ "LICENSE"
27
+ ],
28
+ "keywords": [
29
+ "react",
30
+ "modal",
31
+ "notification",
32
+ "toast",
33
+ "popup",
34
+ "dialog",
35
+ "alert",
36
+ "confirm",
37
+ "typescript",
38
+ "imperative",
39
+ "lightweight",
40
+ "flexible",
41
+ "customizable",
42
+ "aark-react-modalify",
43
+ "aark-modal",
44
+ "aark-toast",
45
+ "aark-notification"
46
+ ],
47
+ "peerDependencies": {
48
+ "react": ">=16.8.0",
49
+ "react-dom": ">=16.8.0"
50
+ },
51
+ "devDependencies": {
52
+ "@eslint/js": "^9.39.1",
53
+ "@types/node": "^24.10.1",
54
+ "@types/react": "^19.2.6",
55
+ "@types/react-dom": "^19.2.3",
56
+ "@vitejs/plugin-react": "^5.1.1",
57
+ "eslint": "^9.39.1",
58
+ "eslint-plugin-react-hooks": "^7.0.1",
59
+ "eslint-plugin-react-refresh": "^0.4.24",
60
+ "globals": "^16.5.0",
61
+ "react": "^19.2.0",
62
+ "react-dom": "^19.2.0",
63
+ "rimraf": "^6.1.0",
64
+ "tsup": "^8.5.0",
65
+ "typescript": "~5.9.3",
66
+ "typescript-eslint": "^8.47.0",
67
+ "vite": "^7.2.2"
68
+ },
69
+ "license": "MIT",
70
+ "author": "Mohammad Sumon",
71
+ "repository": {
72
+ "type": "git",
73
+ "url": "git+https://github.com/sumonsbgc/aark-react-modalify.git"
74
+ },
75
+ "homepage": "https://github.com/sumonsbgc/aark-react-modalify#readme",
76
+ "bugs": {
77
+ "url": "https://github.com/sumonsbgc/aark-react-modalify/issues"
78
+ },
79
+ "scripts": {
80
+ "build": "tsup",
81
+ "dev": "bunx vite",
82
+ "typecheck": "tsc --noEmit",
83
+ "lint": "eslint src --ext .ts,.tsx",
84
+ "lint:fix": "eslint src --ext .ts,.tsx --fix",
85
+ "clean": "rimraf dist"
86
+ }
87
+ }
@@ -1,18 +0,0 @@
1
- import type { FC, CSSProperties } from "react";
2
- declare const colors: Record<string, string>;
3
- export type IconName = "close";
4
- export type IconSize = string | number;
5
- export type IconColor = keyof typeof colors | string;
6
- export interface IconProps {
7
- name: IconName;
8
- size?: IconSize;
9
- color?: IconColor;
10
- style?: CSSProperties;
11
- className?: string;
12
- noHoverEffect?: boolean;
13
- onClick?: () => void;
14
- "aria-label"?: string;
15
- title?: string;
16
- }
17
- declare const Icon: FC<IconProps>;
18
- export default Icon;
@@ -1,9 +0,0 @@
1
- import type { FC } from 'react';
2
- import type { ModalConfig } from '../types';
3
- import '../assets/styles/aark-modal.css';
4
- interface ModalProps {
5
- config: ModalConfig;
6
- onClose: () => void;
7
- }
8
- declare const Modal: FC<ModalProps>;
9
- export default Modal;
@@ -1,7 +0,0 @@
1
- import type { FC } from 'react';
2
- /**
3
- * ModalProvider component that renders modals globally
4
- * This component should be rendered once in your app's root
5
- */
6
- declare const ModalProvider: FC;
7
- export default ModalProvider;
@@ -1,9 +0,0 @@
1
- import type { FC } from 'react';
2
- import type { NotificationConfig } from '../types';
3
- import '../assets/styles/aark-modal.css';
4
- interface NotificationProps {
5
- config: NotificationConfig;
6
- onClose: () => void;
7
- }
8
- declare const Notification: FC<NotificationProps>;
9
- export default Notification;
@@ -1,8 +0,0 @@
1
- import type { FC } from 'react';
2
- import type { ModalProps } from '../../types';
3
- interface StandardModalProps {
4
- props: ModalProps;
5
- onClose: () => void;
6
- }
7
- declare const StandardModal: FC<StandardModalProps>;
8
- export default StandardModal;
@@ -1 +0,0 @@
1
- export { default as StandardModal } from "./StandardModal";
@@ -1,8 +0,0 @@
1
- import type { FC } from 'react';
2
- import type { NotificationProps } from '../../types';
3
- interface StandardNotificationProps {
4
- props: NotificationProps;
5
- onClose: () => void;
6
- }
7
- declare const StandardNotification: FC<StandardNotificationProps>;
8
- export default StandardNotification;
@@ -1 +0,0 @@
1
- export { default as StandardNotification } from "./StandardNotification";
@@ -1,10 +0,0 @@
1
- import type { ComponentConfig } from "../types";
2
- export interface UseModalReturn {
3
- isOpen: boolean;
4
- config: ComponentConfig | null;
5
- close: () => void;
6
- }
7
- /**
8
- * Hook to manage modal state and listen to modal events
9
- */
10
- export declare function useModal(): UseModalReturn;
@@ -1,24 +0,0 @@
1
- import type { ReactNode } from "react";
2
- import type { ComponentConfig, ModalOptions, NotificationOptions, ModalEvent, ModalProps, NotificationProps } from "../types";
3
- type ModalListener = (event: ModalEvent) => void;
4
- declare function subscribe(listener: ModalListener): () => void;
5
- declare function fireModal(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
6
- declare function fireNotification(contentOrProps: ReactNode | NotificationProps, options?: NotificationOptions): void;
7
- declare function fire(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
8
- declare function close(): void;
9
- declare function isOpen(): boolean;
10
- declare function getCurrentConfig(): ComponentConfig | null;
11
- declare function closeAll(): void;
12
- declare function cleanup(): void;
13
- export declare const modalManager: {
14
- subscribe: typeof subscribe;
15
- fire: typeof fire;
16
- fireModal: typeof fireModal;
17
- fireNotification: typeof fireNotification;
18
- close: typeof close;
19
- isOpen: typeof isOpen;
20
- getCurrentConfig: typeof getCurrentConfig;
21
- closeAll: typeof closeAll;
22
- cleanup: typeof cleanup;
23
- };
24
- export {};
File without changes
@@ -1,15 +0,0 @@
1
- import type { ReactNode } from "react";
2
- import type { ModalOptions, NotificationOptions, ModalProps, NotificationProps } from "../types";
3
- import type { AarkModalTheme } from "../utils/theme";
4
- declare const aark: {
5
- fire: (contentOrProps: ReactNode | ModalProps, options?: ModalOptions) => void;
6
- modal: (contentOrProps: ReactNode | ModalProps, options?: ModalOptions) => void;
7
- notification: (contentOrProps: ReactNode | NotificationProps, options?: NotificationOptions) => void;
8
- close: () => void;
9
- isOpen: () => boolean;
10
- closeAll: () => void;
11
- setTheme: (theme: AarkModalTheme) => void;
12
- resetTheme: () => void;
13
- getTheme: () => AarkModalTheme;
14
- };
15
- export default aark;
@@ -1,102 +0,0 @@
1
- import type { ReactNode } from "react";
2
- export type ModalPosition = "center" | "top-center" | "top-right" | "bottom-right" | "bottom-center";
3
- export type NotificationPosition = "top-right" | "top-center" | "top-left" | "bottom-right" | "bottom-center" | "bottom-left";
4
- export type ModalMode = "modal" | "notification";
5
- export type ModalType = "success" | "error" | "warning" | "info" | "question";
6
- export interface ModalProps {
7
- title?: string;
8
- text?: string;
9
- type?: ModalType;
10
- cancelText?: string;
11
- confirmText?: string;
12
- onCancel?: () => void;
13
- onConfirm?: () => void;
14
- icon?: string | ReactNode;
15
- html?: string | ReactNode;
16
- showCancelButton?: boolean;
17
- showConfirmButton?: boolean;
18
- allowOutsideClick?: boolean;
19
- allowEscapeKey?: boolean;
20
- reverseButtons?: boolean;
21
- focusConfirm?: boolean;
22
- focusCancel?: boolean;
23
- width?: string | number;
24
- fullWidth?: boolean;
25
- padding?: string | number;
26
- background?: string;
27
- customClass?: {
28
- container?: string;
29
- popup?: string;
30
- header?: string;
31
- title?: string;
32
- closeButton?: string;
33
- icon?: string;
34
- image?: string;
35
- content?: string;
36
- input?: string;
37
- actions?: string;
38
- confirmButton?: string;
39
- cancelButton?: string;
40
- footer?: string;
41
- };
42
- }
43
- export interface NotificationProps {
44
- title?: string;
45
- text?: string;
46
- type?: ModalType;
47
- icon?: string | ReactNode;
48
- html?: string | ReactNode;
49
- timer?: number;
50
- showCloseButton?: boolean;
51
- clickToClose?: boolean;
52
- width?: string | number;
53
- fullWidth?: boolean;
54
- padding?: string | number;
55
- background?: string;
56
- customClass?: {
57
- container?: string;
58
- popup?: string;
59
- header?: string;
60
- title?: string;
61
- closeButton?: string;
62
- icon?: string;
63
- content?: string;
64
- footer?: string;
65
- };
66
- }
67
- export interface BaseOptions {
68
- showCloseIcon?: boolean;
69
- className?: string;
70
- preventEscClose?: boolean;
71
- }
72
- export interface ModalOptions extends BaseOptions {
73
- position?: ModalPosition;
74
- overlayClassName?: string;
75
- preventOverlayClose?: boolean;
76
- }
77
- export interface NotificationOptions extends BaseOptions {
78
- position?: NotificationPosition;
79
- autoCloseTime?: number;
80
- }
81
- export interface ModalConfig {
82
- content?: ReactNode;
83
- props?: ModalProps;
84
- options?: ModalOptions;
85
- mode: "modal";
86
- }
87
- export interface NotificationConfig {
88
- content?: ReactNode;
89
- props?: NotificationProps;
90
- options?: NotificationOptions;
91
- mode: "notification";
92
- }
93
- export type ComponentConfig = ModalConfig | NotificationConfig;
94
- export interface ModalState {
95
- isOpen: boolean;
96
- config: ComponentConfig | null;
97
- }
98
- export type ModalEventType = "open" | "close" | "beforeClose";
99
- export interface ModalEvent {
100
- type: ModalEventType;
101
- config?: ComponentConfig;
102
- }
@@ -1,4 +0,0 @@
1
- export declare const injectStyles: (css: string, id: string) => void;
2
- export declare const injectModalStyles: () => void;
3
- export declare const injectNotificationStyles: () => void;
4
- export declare const removeStyles: (id: string) => void;
@@ -1 +0,0 @@
1
- export declare const MODAL_CSS = ":root{--aark-modal-overlay-bg:rgba(0,0,0,.5);--aark-modal-bg:#fff;--aark-modal-radius:8px;--aark-modal-shadow:0 10px 25px rgba(0,0,0,.15);--aark-modal-pad:16px;--aark-modal-z:9999;--aark-close-color:#666;--aark-close-hover:#f5f5f5;--aark-anim:.2s}.aark-modal-content{position:fixed;background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);z-index:calc(var(--aark-modal-z) + 1);max-width:90vw;min-width:280px;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto;background:var(--aark-modal-bg);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);width:auto;max-width:400px;min-width:280px;border-radius:var(--aark-modal-radius)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%);animation:scale-in var(--aark-anim)}.aark-modal-content.top-center{top:20px;left:50%;transform:translateX(-50%);animation:slide-down var(--aark-anim)}.aark-modal-content.top-right{top:20px;right:20px;animation:slide-left var(--aark-anim)}.aark-modal-content.top-left{top:20px;left:20px;animation:slide-right var(--aark-anim)}.aark-modal-content.bottom-right{bottom:20px;right:20px;animation:slide-left var(--aark-anim)}.aark-modal-content.bottom-left{bottom:20px;left:20px;animation:slide-right var(--aark-anim)}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translateX(-50%);animation:slide-up var(--aark-anim)}.aark-modal-close{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:.5rem;display:flex;align-items:center;justify-content:center;background:0;border:0;color:var(--aark-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-anim)}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{padding-top:8px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes slide-down{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@media (max-width:768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px);min-width:auto}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.top-left{left:10px;right:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}.aark-modal-content.bottom-left{left:10px;bottom:10px;right:auto;transform:none}.aark-modal-content.notification{width:auto;max-width:calc(100vw - 20px);min-width:auto}}@media (max-width:480px){.aark-modal-content{max-width:calc(100vw - 10px);margin:5px}.aark-modal-content.center{top:10px;left:50%;transform:translateX(-50%);max-height:calc(100vh - 20px)}}";
@@ -1,18 +0,0 @@
1
- /**
2
- * Utility to manage the single modal root container
3
- * Ensures only one instance of aark-react-modalify-root exists
4
- */
5
- /**
6
- * Gets or creates the modal root container
7
- * Returns the same instance for both modals and notifications
8
- */
9
- export declare const getModalRoot: () => HTMLElement;
10
- /**
11
- * Cleanup function to remove the modal root when no longer needed
12
- * Should be called when the last modal/notification is closed
13
- */
14
- export declare const cleanupModalRoot: () => void;
15
- /**
16
- * Check if modal root exists and has content
17
- */
18
- export declare const hasActiveModals: () => boolean;