aark-react-modalify 1.2.1 → 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.
@@ -1,14 +1,14 @@
1
- import{useState as o,useCallback as e,useEffect as t,memo as a,useMemo as r,createElement as n}from"react";import{createRoot as l}from"react-dom/client";import{jsx as i,jsxs as s}from"react/jsx-runtime";import{createPortal as c}from"react-dom";function d(){const[a,r]=o(!1),[n,l]=o(null),i=e(()=>{E.close()},[]);return t(()=>{const o=E.subscribe(o=>{switch(o.type){case"open":r(!0),l(o.config||null);break;case"close":r(!1),l(null)}});return r(E.isOpen()),l(E.getCurrentConfig()),o},[]),{isOpen:a,config:n,close:i}}const m={white:"#FFFFFF",black:"#0B071A"},u=a(({name:o,color:e="black",style:t,className:a="",noHoverEffect:n=!1,onClick:l,size:s=24,"aria-label":c,title:d})=>{const u=r(()=>String(s),[s]),p=r(()=>m[e]?m[e]:(e.startsWith("#"),e),[e]),f=r(()=>"close"===o?/* @__PURE__ */i("svg",{xmlns:"http://www.w3.org/2000/svg",width:u,height:u,viewBox:"0 0 16 16",fill:"none",children:/* @__PURE__ */i("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:p})}):null,[o,p,u]),y=r(()=>{const e={};return e["aria-label"]=c||`${o} icon`,d&&(e.title=d),e.role=l?"button":"img",e},[c,d,o,l]),k=r(()=>{if(l)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),l())}},[l]);/* @__PURE__ */
2
- return i("i",{className:`\n inline-flex items-center justify-center bg-transparent outline-none border-none\n ${!n&&l&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n ${l&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n ${a}\n `.trim(),style:t,onClick:l,onKeyDown:k,tabIndex:l?0:void 0,...y,children:f})});u.displayName="Icon";const p={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},f={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},y=({props:o,onClose:e})=>{const{title:t,text:a,type:n="info",cancelText:l="Cancel",confirmText:c="OK",onCancel:d,onConfirm:m,icon:u,html:y,showCancelButton:k=!1,showConfirmButton:g=!0,reverseButtons:h=!1,width:v="auto",fullWidth:C=!1,customClass:b={}}=o,x=()=>{d?.(),e()},P=()=>{m?.(),e()},w=r(()=>u?"string"==typeof u?/* @__PURE__ */i("span",{children:u}):u:/* @__PURE__ */i("span",{style:{color:f[n]},children:p[n]}),[u,n]),B=h?["confirm","cancel"]:["cancel","confirm"],N=r(()=>{const o={};return C?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof v?`${v}px`:v,o},[v,C]);/* @__PURE__ */
3
- return s("div",{className:`aark-standard-modal ${b.popup||""}`,style:N,children:[
4
- /* @__PURE__ */s("div",{className:`aark-modal-content ${b.content||""}`,children:[w&&/* @__PURE__ */i("div",{className:`aark-modal-icon ${b.icon||""}`,children:w}),t&&/* @__PURE__ */i("div",{className:`aark-modal-header ${b.header||""}`,children:/* @__PURE__ */i("h2",{className:`aark-modal-title ${b.title||""}`,children:t})}),y?/* @__PURE__ */i("div",{dangerouslySetInnerHTML:{__html:"string"==typeof y?y:""}}):a?/* @__PURE__ */i("p",{children:a}):null]}),(k||g)&&/* @__PURE__ */i("div",{className:`aark-modal-footer ${b.actions||""}`,children:B.map(o=>"cancel"===o&&k?/* @__PURE__ */i("button",{onClick:x,className:`aark-modal-cancel-button ${b.cancelButton||""}`,children:l},"cancel"):"confirm"===o&&g?/* @__PURE__ */i("button",{onClick:P,className:`aark-modal-confirm-button ${b.confirmButton||""}`,style:{background:f[n]},children:c},"confirm"):null)})]})};let k=null;const g=()=>(k||(k=document.getElementById("aark-react-modalify-root"),k||(k=document.createElement("div"),k.id="aark-react-modalify-root",k.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(k))),k),h=({config:o,onClose:a})=>{const{content:r,props:n,options:l={}}=o,{position:d="center",showCloseIcon:m=!0,className:p="",overlayClassName:f="",preventEscClose:k=!1,preventOverlayClose:h=!1}=l;t(()=>{const o=o=>{"Escape"!==o.key||k||a()};if(!k)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,k]);const v=e(o=>{o.target!==o.currentTarget||h||a()},[a,h]),C=e(o=>{o.stopPropagation(),a()},[a]),b=`aark-modal-container ${d} ${p}`.trim(),x=g();return c(
5
- /* @__PURE__ */i("div",{className:`aark-modal-overlay ${f}`.trim(),onClick:v,"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:d.includes("center")?"center":d.includes("top")?"flex-start":"flex-end",justifyContent:d.includes("center")?"center":d.includes("right")?"flex-end":"flex-start",padding:"1rem"},children:n?/* @__PURE__ */s("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[m&&/* @__PURE__ */i("button",{onClick:C,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */i(u,{name:"close",size:12})}),
6
- /* @__PURE__ */i("div",{className:"aark-modal-wrapper",children:/* @__PURE__ */i(y,{props:n,onClose:a})})]}):r?/* @__PURE__ */s("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[m&&/* @__PURE__ */i("button",{onClick:C,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */i(u,{name:"close",size:12})}),
7
- /* @__PURE__ */i("div",{className:"aark-modal-body",children:r})]}):null}),x)},v={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},C={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},b=({props:o,onClose:e})=>{const{title:a,text:n,type:l="info",icon:c,html:d,timer:m=5e3,showCloseButton:u=!0,clickToClose:p=!0,width:f="300px",fullWidth:y=!1,padding:k="1rem",background:g="#ffffff",customClass:h={}}=o;t(()=>{if(m&&m>0){const o=setTimeout(e,m);return()=>clearTimeout(o)}},[m,e]);const b=r(()=>c?"string"==typeof c?/* @__PURE__ */i("span",{children:c}):c:/* @__PURE__ */i("span",{style:{color:C[l]},children:v[l]}),[c,l]),x=r(()=>{const o={padding:k,background:g,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:`1px solid ${C[l]}`,cursor:p?"pointer":"default",position:"relative",overflow:"hidden"};return y?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof f?`${f}px`:f,o},[f,y,k,g,l,p]);/* @__PURE__ */
8
- return s("div",{className:`aark-standard-notification ${h.popup||""}`,style:x,onClick:()=>{p&&e()},children:[m&&m>0&&/* @__PURE__ */i("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:C[l],animation:`aark-notification-progress ${m}ms linear forwards`,transformOrigin:"left"}}),
9
- /* @__PURE__ */s("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[b&&/* @__PURE__ */i("div",{className:`aark-notification-icon ${h.icon||""}`,style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:b}),
10
- /* @__PURE__ */s("div",{style:{flex:1,minWidth:0},children:[a&&/* @__PURE__ */i("div",{className:`aark-notification-header ${h.header||""}`,children:/* @__PURE__ */i("h4",{className:`aark-notification-title ${h.title||""}`,style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:a})}),
11
- /* @__PURE__ */i("div",{className:`aark-notification-content ${h.content||""}`,style:{marginTop:a?"0.25rem":0},children:d?/* @__PURE__ */i("div",{dangerouslySetInnerHTML:{__html:"string"==typeof d?d:""}}):n?/* @__PURE__ */i("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),u&&/* @__PURE__ */i("button",{onClick:o=>{o.stopPropagation(),e()},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:"×"})]}),
12
- /* @__PURE__ */i("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},x=({config:o,onClose:a})=>{const{content:r,props:n,options:l={}}=o,{position:d="top-right",showCloseIcon:m=!0,autoCloseTime:u=5e3,className:p="",preventEscClose:f=!1}=l;t(()=>{if(u&&!n){const o=setTimeout(a,u);return()=>clearTimeout(o)}},[u,a,n]),t(()=>{const o=o=>{"Escape"!==o.key||f||a()};if(!f)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,f]);const y=e(o=>{o.stopPropagation(),a()},[a]),k=`aark-notification-container ${d} ${p}`.trim(),h=g();return c(
13
- /* @__PURE__ */i("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"};switch(d){case"top-left":return{...o,top:0,left:0};case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...o,top:0,right:0};case"bottom-left":return{...o,bottom:0,left:0};case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...o,bottom:0,right:0}}})(),children:n?/* @__PURE__ */i("div",{className:"aark-notification-wrapper",children:/* @__PURE__ */i(b,{props:n,onClose:a})}):r?/* @__PURE__ */s("div",{className:k,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[m&&/* @__PURE__ */i("button",{onClick:y,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),
14
- /* @__PURE__ */i("div",{id:"aark-notification-body",className:"aark-notification-body",children:r})]}):null}),h)},P=()=>{const{isOpen:o,config:e,close:t}=d();return o&&e?"modal"===e.mode?/* @__PURE__ */i(h,{config:e,onClose:t}):"notification"===e.mode?/* @__PURE__ */i(x,{config:e,onClose:t}):null:null},w=/* @__PURE__ */new Set;let B=null,N=null;function $(){if(N)return;const o=g();N=l(o),N.render(n(P))}function M(o,e){const t={type:o,config:e};w.forEach(o=>o(t))}function S(o,e){let t,a;$(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,a=void 0):(a=o,t=void 0);const r={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},e)};B=r,M("open",r)}function V(){B&&(M("beforeClose",B),B=null,M("close"))}const E={subscribe:function(o){return w.add(o),()=>w.delete(o)},fire:function(o,e){S(o,e)},fireModal:S,fireNotification:function(o,e){let t,a;$(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,a=void 0):(a=o,t=void 0);const r={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},e)};B=r,M("open",r)},close:V,isOpen:function(){return null!==B},getCurrentConfig:function(){return B},closeAll:function(){V()},cleanup:function(){N&&(N.unmount(),N=null),k&&0===k.children.length&&(k.remove(),k=null)}};function I(o){const e=document.documentElement;o.overlayBackground&&e.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&e.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&e.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&e.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&e.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&e.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&e.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&e.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&e.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&e.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&e.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&e.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&e.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&e.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&e.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&e.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&e.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&e.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&e.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&e.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&e.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&e.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&e.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function O(){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(e=>{o.style.removeProperty(e)})}function T(){const o=document.documentElement,e=getComputedStyle(o);return{overlayBackground:e.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:e.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:e.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:e.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:e.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:e.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(e.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(e.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:e.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:e.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:e.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:e.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:e.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:e.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:e.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:e.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:e.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:e.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:e.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:e.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:e.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:e.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:e.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}const H={fire:(o,e)=>E.fire(o,e),modal:(o,e)=>E.fireModal(o,e),notification:(o,e)=>E.fireNotification(o,e),close:()=>E.close(),isOpen:()=>E.isOpen(),closeAll:()=>E.closeAll(),setTheme:o=>I(o),resetTheme:()=>O(),getTheme:()=>T()};export{h as Modal,P as ModalProvider,x as Notification,H as aark,T as getAarkModalTheme,O as resetAarkModalTheme,I as setAarkModalTheme,d as useModal};
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};
@@ -0,0 +1,14 @@
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});
@@ -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 };
package/dist/index.d.ts CHANGED
@@ -1,9 +1,189 @@
1
- import "./assets/styles/aark-modal.css";
2
- export { default as aark } from "./logic/aark";
3
- export type { ModalOptions, NotificationOptions, ModalPosition, NotificationPosition, ModalMode, ModalType, ModalProps, NotificationProps, ModalConfig, NotificationConfig, ComponentConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
4
- export type { AarkModalTheme } from "./utils/theme";
5
- export { setAarkModalTheme, resetAarkModalTheme, getAarkModalTheme, } from "./utils/theme";
6
- export { useModal } from "./hooks/useModal";
7
- export { default as Modal } from "./components/Modal";
8
- export { default as Notification } from "./components/Notification";
9
- export { default as ModalProvider } from "./components/ModalProvider";
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 };
@@ -0,0 +1,14 @@
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[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}},u=k.subscribe(n);return o(k.isOpen()),a(k.getCurrentConfig()),u},[]),{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 po,useMemo as R}from"react";import{jsx as F}from"react/jsx-runtime";var V={white:"#FFFFFF",black:"#0B071A"},j=po(({name:e,color:o="black",style:t,className:a="",noHoverEffect:i=!1,onClick:n,size:u=24,"aria-label":s,title:h})=>{let f=R(()=>String(u),[u]),m=R(()=>V[o]?V[o]:(o.startsWith("#"),o),[o]),g=R(()=>{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=R(()=>{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]),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:t,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:e,onClose:o})=>{let{title:t,text:a,type:i="info",cancelText:n="Cancel",confirmText:u="OK",onCancel:s,onConfirm:h,icon:f,html:m,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:y={}}=e,v=()=>{s?.(),o()},$=()=>{h?.(),o()},B=U(()=>f?typeof f=="string"?M("span",{children:f}):f:M("span",{style:{color:X[i]},children:uo[i]}),[f,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}),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: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
+ 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:u=!0,className:s="",overlayClassName:h="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:p}=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(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})})]}):t?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})}),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:B()}),$)},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:u,timer:s=5e3,showCloseButton:h=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:p={}}=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} ${p.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 ${p.icon||""}`,children:r}),L("div",{style:{flex:1,minWidth:0},children:[t&&b("div",{className:`aark-notification-header ${p.header||""}`,children:b("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),b("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?b("div",{dangerouslySetInnerHTML:{__html:typeof u=="string"?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:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="top-right",showCloseIcon:u=!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=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})}):t?So("div",{className:g,role:"alert","aria-live":"polite",children:[u&&T("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),T("div",{className:"aark-notification-body",children:t})]}):null;return wo(T("div",{style:p(),children:d()}),c)},W=Po;import{jsx as io}from"react/jsx-runtime";var Eo=()=>{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=Eo;var K=new Set,P=null,E=null;function ro(){if(E)return;let e=S();E=To(e),E.render(Ro(H))}function Bo(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(){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(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};