aark-react-modalify 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var vo=Object.prototype.hasOwnProperty;var yo=(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))!vo.call(e,n)&&n!==t&&V(e,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return e};var ho=e=>ko(V({},"__esModule",{value:!0}),e);var
|
|
1
|
+
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var vo=Object.prototype.hasOwnProperty;var yo=(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))!vo.call(e,n)&&n!==t&&V(e,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return e};var ho=e=>ko(V({},"__esModule",{value:!0}),e);var zo={};yo(zo,{Modal:()=>W,ModalProvider:()=>H,Notification:()=>L,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>z});module.exports=ho(zo);var ro=require("react"),lo=require("react-dom/client");var S=require("react");function z(){let[e,o]=(0,S.useState)(!1),[t,a]=(0,S.useState)(null),n=(0,S.useCallback)(()=>{C.close()},[]);return(0,S.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=C.subscribe(i);return o(C.isOpen()),a(C.getCurrentConfig()),u},[]),{isOpen:e,config:t,close:n}}var T=require("react"),to=require("react-dom");var w=require("react"),O=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 m=(0,w.useMemo)(()=>String(u),[u]),f=(0,w.useMemo)(()=>G[o]?G[o]:(o.startsWith("#"),o),[o]),v=(0,w.useMemo)(()=>{let d=f;return e==="close"?(0,O.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:(0,O.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,f,m]),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,O.jsx)("i",{className:`
|
|
2
2
|
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
3
|
${!n&&i&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${i&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
@@ -10,4 +10,5 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
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:m=!1,preventOverlayClose:f=!1,width:v,maxWidth:c,size:p}=n;(0,T.useEffect)(()=>{if(m)return;let l=E=>{E.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=(0,T.useCallback)(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),r=(0,T.useCallback)(l=>{l.stopPropagation(),o()},[o]),y=(0,T.useMemo)(()=>{let l={};if(v!==void 0&&(l.width=typeof v=="number"?`${v}px`:v,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let E=bo[p];p==="full"&&(l.width=l.width??E),l.maxWidth=E}return l},[v,c,p]),h=`aark-modal-container ${i} ${s}`.trim(),q=R(),F=()=>a?(0,b.jsxs)("div",{className:h,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:h,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,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==="center"?"center":i.startsWith("top")?"flex-start":"flex-end",justifyContent:i.endsWith("center")?"center":i.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},W=xo;var A=require("react"),io=require("react-dom");var $=require("react"),g=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:m=!0,width:f,fullWidth:v=!1,padding:c,customClass:p={}}=e;(0,$.useEffect)(()=>{if(s&&s>0){let h=setTimeout(o,s);return()=>clearTimeout(h)}},[s,o]);let d=()=>{m&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,g.jsx)("span",{children:i}):i:(0,g.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),y=(0,$.useMemo)(()=>{let h={};return c!==void 0&&(h.padding=typeof c=="number"?`${c}px`:c),v?(h.width="calc(100vw - 40px)",h.maxWidth="calc(100vw - 40px)"):f!==void 0&&(h.width=typeof f=="number"?`${f}px`:f),h},[f,v,c]);return(0,g.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&(0,g.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,g.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,g.jsx)("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),(0,g.jsxs)("div",{style:{flex:1,minWidth:0},children:[t&&(0,g.jsx)("div",{className:`aark-notification-header ${p.header||""}`,children:(0,g.jsx)("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),(0,g.jsx)("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?typeof u=="string"?(0,g.jsx)("div",{dangerouslySetInnerHTML:{__html:u}}):(0,g.jsx)("div",{children:u}):a?(0,g.jsx)("p",{children:a}):null})]}),x&&(0,g.jsx)("button",{onClick:h=>{h.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:m=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(m)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),v=`aark-notification-container ${i} ${x}`.trim(),c=R(),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:v,role:"alert","aria-live":"polite",children:[u&&(0,P.jsx)("button",{onClick:f,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)},L=Po;var X=require("react/jsx-runtime"),Eo=()=>{let{isOpen:e,config:o,close:t}=z();return!e||!o?null:o.mode==="modal"?(0,X.jsx)(W,{config:o,onClose:t}):o.mode==="notification"?(0,X.jsx)(L,{config:o,onClose:t}):null},H=Eo;var Y=new Set,B=null,I=null;function so(){if(I)return;let e=R();I=(0,lo.createRoot)(e),I.render((0,ro.createElement)(H))}function So(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)};B=n,K("open",n)}function To(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)};B=n,K("open",n)}function Bo(e,o){co(e,o)}function fo(){B&&(K("beforeClose",B),B=null,K("close"))}function Ro(){return B!==null}function Io(){return B}function $o(){fo()}function Ao(){I&&(I.unmount(),I=null),eo()}var C={subscribe:So,fire:Bo,fireModal:co,fireNotification:To,close:fo,isOpen:Ro,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)=>C.fire(e,o),modal:(e,o)=>C.fireModal(e,o),notification:(e,o)=>C.fireNotification(e,o),close:()=>C.close(),isOpen:()=>C.isOpen(),closeAll:()=>C.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},po=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
|
@@ -3,11 +3,12 @@ import{createElement as To}from"react";import{createRoot as Bo}from"react-dom/cl
|
|
|
3
3
|
${!i&&n&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${n&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
5
|
${a}
|
|
6
|
-
`.trim(),style:t,onClick:n,onKeyDown:p,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var
|
|
6
|
+
`.trim(),style:t,onClick:n,onKeyDown:p,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var z=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:C,icon:m,html:f,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:v={}}=e,y=()=>{s?.(),o()},$=()=>{C?.(),o()},R=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 ${v.popup||""}`,style:w,children:[Y("div",{className:`aark-modal-content ${v.content||""}`,children:[R&&M("div",{className:`aark-modal-icon ${v.icon||""}`,children:R}),t&&M("div",{className:`aark-modal-header ${v.header||""}`,children:M("h2",{className:`aark-modal-title ${v.title||""}`,children:t})}),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 ${v.actions||""}`,children:l.map(x=>x==="cancel"&&g?M("button",{onClick:y,className:`aark-modal-cancel-button ${v.cancelButton||""}`,children:n},"cancel"):x==="confirm"&&c?M("button",{onClick:$,className:`aark-modal-confirm-button ${v.confirmButton||""}`,style:{background:X[i]},children:u},"confirm"):null)})]})},G=go;var h=null,E=()=>(h||(h=document.getElementById("aark-react-modalify-root"),h||(h=document.createElement("div"),h.id="aark-react-modalify-root",h.style.cssText=`
|
|
7
7
|
position: fixed;
|
|
8
8
|
top: 0;
|
|
9
9
|
left: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
14
|
+
`,document.body.appendChild(h))),h),J=()=>{h&&h.children.length===0&&(h.remove(),h=null)};import{jsx as N,jsxs as oo}from"react/jsx-runtime";var ho={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},Co=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="center",showCloseIcon:u=!0,className:s="",overlayClassName:C="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:g,maxWidth:c,size:p}=i;vo(()=>{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]),v=yo(()=>{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=ho[p];p==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,p]),y=`aark-modal-container ${n} ${s}`.trim(),$=E(),R=()=>a?oo("div",{className:y,style:v,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(z,{name:"close",size:12})}),N("div",{className:"aark-modal-wrapper",children:N(G,{props:a,onClose:o})})]}):t?N("div",{className:y,style:v,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(z,{name:"close",size:12})}),t]})}):null;return ko(N("div",{className:`aark-modal-overlay ${C}`.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:R()}),$)},O=Co;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 W}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:C=!0,clickToClose:m=!0,width:f,fullWidth:g=!1,padding:c,customClass:p={}}=e;Mo(()=>{if(s&&s>0){let y=setTimeout(o,s);return()=>clearTimeout(y)}},[s,o]);let d=()=>{m&&o()},r=eo(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:to[i]},children:bo[i]}),[n,i]),v=eo(()=>{let y={};return c!==void 0&&(y.padding=typeof c=="number"?`${c}px`:c),g?(y.width="calc(100vw - 40px)",y.maxWidth="calc(100vw - 40px)"):f!==void 0&&(y.width=typeof f=="number"?`${f}px`:f),y},[f,g,c]);return W("div",{className:`aark-standard-notification aark-notification-${i} ${p.popup||""}`,style:v,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:to[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:[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?typeof u=="string"?b("div",{dangerouslySetInnerHTML:{__html:u}}):b("div",{children:u}):a?b("p",{children:a}):null})]}),C&&b("button",{onClick:y=>{y.stopPropagation(),o()},className:`aark-notification-close ${p.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:u=!0,autoCloseTime:s=5e3,className:C="",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=v=>{v.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} ${C}`.trim(),c=E(),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?B("div",{className:"aark-notification-wrapper",children:B(ao,{props:a,onClose:o})}):t?Eo("div",{className:g,role:"alert","aria-live":"polite",children:[u&&B("button",{onClick:f,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:p(),children:d()}),c)},L=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(O,{config:o,onClose:t}):o.mode==="notification"?io(L,{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 zo(){so()}function Oo(){S&&(S.unmount(),S=null),J()}var k={subscribe:Ro,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:zo,cleanup:Oo};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 Wo={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:()=>_()},Lo=Wo;export{O as Modal,H as ModalProvider,L as Notification,Lo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var yo=Object.prototype.hasOwnProperty;var vo=(t,o)=>{for(var e in o)V(t,e,{get:o[e],enumerable:!0})},ko=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of go(o))!yo.call(t,n)&&n!==e&&V(t,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return t};var Co=t=>ko(V({},"__esModule",{value:!0}),t);var
|
|
1
|
+
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var yo=Object.prototype.hasOwnProperty;var vo=(t,o)=>{for(var e in o)V(t,e,{get:o[e],enumerable:!0})},ko=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of go(o))!yo.call(t,n)&&n!==e&&V(t,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return t};var Co=t=>ko(V({},"__esModule",{value:!0}),t);var zo={};vo(zo,{Modal:()=>W,ModalProvider:()=>H,Notification:()=>L,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>z});module.exports=Co(zo);var ro=require("react"),lo=require("react-dom/client");var E=require("react");function z(){let[t,o]=(0,E.useState)(!1),[e,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:t,config:e,close:n}}var R=require("react"),eo=require("react-dom");var w=require("react"),O=require("react/jsx-runtime"),G={white:"#FFFFFF",black:"#0B071A"},J=(0,w.memo)(({name:t,color:o="black",style:e,className:a="",noHoverEffect:n=!1,onClick:i,size:u=24,"aria-label":s,title:x})=>{let m=(0,w.useMemo)(()=>String(u),[u]),f=(0,w.useMemo)(()=>G[o]?G[o]:(o.startsWith("#"),o),[o]),y=(0,w.useMemo)(()=>{let d=f;return t==="close"?(0,O.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:(0,O.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},[t,f,m]),c=(0,w.useMemo)(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${t} icon`,x&&(d.title=x),d.role=i?"button":"img",d},[s,x,t,i]),p=(0,w.useMemo)(()=>{if(i)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),i())}},[i]);return(0,O.jsx)("i",{className:`
|
|
2
2
|
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
3
|
${!n&&i&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${i&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
@@ -10,4 +10,5 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
14
|
+
`,document.body.appendChild(M))),M),to=()=>{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:t,onClose:o})=>{let{content:e,props:a,options:n={}}=t,{position:i="center",showCloseIcon:u=!0,className:s="",overlayClassName:x="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:y,maxWidth:c,size:p}=n;(0,R.useEffect)(()=>{if(m)return;let l=S=>{S.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=(0,R.useCallback)(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),r=(0,R.useCallback)(l=>{l.stopPropagation(),o()},[o]),v=(0,R.useMemo)(()=>{let l={};if(y!==void 0&&(l.width=typeof y=="number"?`${y}px`:y,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},[y,c,p]),C=`aark-modal-container ${i} ${s}`.trim(),q=B(),F=()=>a?(0,b.jsxs)("div",{className:C,style:v,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})})]}):e?(0,b.jsx)("div",{className:C,style:v,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})}),e]})}):null;return(0,eo.createPortal)((0,b.jsx)("div",{className:`aark-modal-overlay ${x}`.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:i==="center"?"center":i.startsWith("top")?"flex-start":"flex-end",justifyContent:i.endsWith("center")?"center":i.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},W=xo;var A=require("react"),io=require("react-dom");var $=require("react"),g=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:t,onClose:o})=>{let{title:e,text:a,type:n="info",icon:i,html:u,timer:s=5e3,showCloseButton:x=!0,clickToClose:m=!0,width:f,fullWidth:y=!1,padding:c,customClass:p={}}=t;(0,$.useEffect)(()=>{if(s&&s>0){let C=setTimeout(o,s);return()=>clearTimeout(C)}},[s,o]);let d=()=>{m&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,g.jsx)("span",{children:i}):i:(0,g.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),v=(0,$.useMemo)(()=>{let C={};return c!==void 0&&(C.padding=typeof c=="number"?`${c}px`:c),y?(C.width="calc(100vw - 40px)",C.maxWidth="calc(100vw - 40px)"):f!==void 0&&(C.width=typeof f=="number"?`${f}px`:f),C},[f,y,c]);return(0,g.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${p.popup||""}`,style:v,onClick:d,children:[s&&s>0&&(0,g.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,g.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,g.jsx)("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),(0,g.jsxs)("div",{style:{flex:1,minWidth:0},children:[e&&(0,g.jsx)("div",{className:`aark-notification-header ${p.header||""}`,children:(0,g.jsx)("h4",{className:`aark-notification-title ${p.title||""}`,children:e})}),(0,g.jsx)("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:e?"0.25rem":0},children:u?typeof u=="string"?(0,g.jsx)("div",{dangerouslySetInnerHTML:{__html:u}}):(0,g.jsx)("div",{children:u}):a?(0,g.jsx)("p",{children:a}):null})]}),x&&(0,g.jsx)("button",{onClick:C=>{C.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:t,onClose:o})=>{let{content:e,props:a,options:n={}}=t,{position:i="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:x="",preventEscClose:m=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(m)return;let r=v=>{v.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),y=`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})}):e?(0,P.jsxs)("div",{className:y,role:"alert","aria-live":"polite",children:[u&&(0,P.jsx)("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),(0,P.jsx)("div",{className:"aark-notification-body",children:e})]}):null;return(0,io.createPortal)((0,P.jsx)("div",{style:p(),children:d()}),c)},L=Po;var X=require("react/jsx-runtime"),So=()=>{let{isOpen:t,config:o,close:e}=z();return!t||!o?null:o.mode==="modal"?(0,X.jsx)(W,{config:o,onClose:e}):o.mode==="notification"?(0,X.jsx)(L,{config:o,onClose:e}):null},H=So;var Y=new Set,T=null,I=null;function so(){if(I)return;let t=B();I=(0,lo.createRoot)(t),I.render((0,ro.createElement)(H))}function Eo(t){return Y.add(t),()=>Y.delete(t)}function K(t,o){let e={type:t,config:o};Y.forEach(a=>a(e))}function co(t,o){so();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let n={content:e,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};T=n,K("open",n)}function Ro(t,o){so();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let n={content:e,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};T=n,K("open",n)}function To(t,o){co(t,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),to()}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(t){let o=document.documentElement;Object.keys(t).forEach(e=>{let a=t[e],n=mo[e];a!==void 0&&n&&o.style.setProperty(n,String(a))})}function Z(){let t=document.documentElement;Object.values(mo).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 Fo={fire:(t,o)=>h.fire(t,o),modal:(t,o)=>h.fireModal(t,o),notification:(t,o)=>h.fireNotification(t,o),close:()=>h.close(),isOpen:()=>h.isOpen(),closeAll:()=>h.closeAll(),setTheme:t=>D(t),resetTheme:()=>Z(),getTheme:()=>_()},po=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
package/dist/index.esm.js
CHANGED
|
@@ -3,11 +3,12 @@ import{createElement as Ro}from"react";import{createRoot as To}from"react-dom/cl
|
|
|
3
3
|
${!i&&n&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${n&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
5
|
${a}
|
|
6
|
-
`.trim(),style:e,onClick:n,onKeyDown:p,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var
|
|
6
|
+
`.trim(),style:e,onClick:n,onKeyDown:p,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var z=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
7
|
position: fixed;
|
|
8
8
|
top: 0;
|
|
9
9
|
left: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
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: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(z,{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(z,{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()}),$)},O=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(O,{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 zo(){so()}function Oo(){E&&(E.unmount(),E=null),J()}var k={subscribe:Bo,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:zo,cleanup:Oo};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{O 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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aark-react-modalify",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
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
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.cjs.js",
|