vyrn 2.0.9 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Licence.md ADDED
@@ -0,0 +1,9 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 vyan
4
+
5
+ Permission is hereby granted to any person obtaining a copy of this software and associated documentation files (the "Software"), to view the Software for educational purposes. Use, modification, copying, merging, publishing, distribution, sublicensing, or selling of this Software is strictly prohibited without explicit written permission from the copyright holder.
6
+
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/dist/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import t,{useState as e,useEffect as o,useRef as n,useCallback as r,useMemo as a}from"react";import{createPortal as i}from"react-dom";import{X as s,AlertTriangle as c,Info as l,AlertCircle as u,CheckCircle as d}from"lucide-react";import{motion as p,AnimatePresence as f}from"framer-motion";var g=function(){return g=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},g.apply(this,arguments)};function m(t,e,o){if(o||2===arguments.length)for(var n,r=0,a=e.length;r<a;r++)!n&&r in e||(n||(n=Array.prototype.slice.call(e,0,r)),n[r]=e[r]);return t.concat(n||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var h=t.createContext(void 0),y=function(){var e=t.useContext(h);if(void 0===e)throw new Error("useToastContext must be used within a ToastProvider");return e},v=function(e){var o=e.progress,n=e.type,r=void 0===n?"default":n,a=function(){var t={success:{base:"#10B981",highlight:"#34D399",glow:"rgba(16, 185, 129, 0.4)"},error:{base:"#EF4444",highlight:"#F87171",glow:"rgba(239, 68, 68, 0.4)"},warning:{base:"#F59E0B",highlight:"#FBBF24",glow:"rgba(245, 158, 11, 0.4)"},info:{base:"#3B82F6",highlight:"#60A5FA",glow:"rgba(59, 130, 246, 0.4)"},default:{base:"#6366F1",highlight:"#818CF8",glow:"rgba(99, 102, 241, 0.4)"}};return t[r]||t.default}();return t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"2px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(a.base,", \n ").concat(a.highlight,", \n ").concat(a.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(a.glow)},initial:{width:"100%",backgroundPosition:"0% 0%"},animate:{width:"".concat(o,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.4,ease:[.4,0,.2,1]},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},t.createElement(p.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(a.highlight,"40 50%,\n transparent 100%\n )"),transform:"translateX(-50%)"},animate:{x:["0%","200%"]},transition:{duration:1.5,repeat:1/0,ease:"linear"}}),t.createElement(p.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:a.highlight,filter:"blur(0.5px)"},animate:{opacity:[1,.5,1],scale:[1,1.2,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"}})),t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(o,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(a.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},b=function(n){var r=n.id,a=n.content,i=n.type,m=n.duration,h=void 0===m?3e3:m,b=n.icon,x=n.actions,w=n.input,k=n.onClose,E=n.progress,C=n.customStyles,B=n.className,N=void 0===B?"":B,P=n.isExpanded,T=n.isStacked,S=n.showCloseButton,F=n.showProgressBar,A=y(),z=A.removeToast;A.updateToast;var D=e(""),I=D[0],L=D[1],O=e(E||100),M=O[0],Y=O[1];o((function(){if(void 0===E){var t=setInterval((function(){Y((function(t){var e=t-100/(h/1e3);return e>0?e:0}))}),1e3);return function(){return clearInterval(t)}}}),[h,E]),o((function(){0===M&&z(r)}),[M,r,z]),o((function(){void 0!==E&&Y(E)}),[E]);return t.createElement(p.div,{className:"vyrn-toast ".concat(N," ").concat(T?"vyrn-toast-stacked":""," ").concat(i?"vyrn-toast-".concat(i):""),style:g(g({},C),{height:P?"auto":T?"60px":"auto",overflow:"hidden"}),initial:{opacity:0,y:50,scale:.3},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.5,transition:{duration:.2}},transition:{type:"spring",stiffness:500,damping:30}},t.createElement("div",{className:"vyrn-toast-content"},function(){if(b)return b;switch(i){case"success":return t.createElement(d,{className:"vyrn-toast-icon text-green-500"});case"error":return t.createElement(u,{className:"vyrn-toast-icon text-red-500"});case"info":return t.createElement(l,{className:"vyrn-toast-icon text-blue-500"});case"warning":return t.createElement(c,{className:"vyrn-toast-icon text-yellow-500"});default:return null}}(),t.createElement("div",{className:"vyrn-toast-message"},a)),t.createElement(f,null,P&&t.createElement(p.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},x&&t.createElement("div",{className:"vyrn-toast-actions"},x.map((function(e,o){return t.createElement("button",{key:o,onClick:function(t){t.stopPropagation(),e.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(e.style||"default"," ").concat(e.className||"")},e.label)}))),w&&t.createElement("form",{onSubmit:function(t){t.preventDefault(),null==w||w.onSubmit(I),L("")},className:"vyrn-toast-input-form"},t.createElement("input",{type:"text",value:I,onChange:function(t){return L(t.target.value)},placeholder:w.placeholder,className:"vyrn-toast-input ".concat(w.className||""),onClick:function(t){return t.stopPropagation()}}),t.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(w.submitClassName||""),onClick:function(t){return t.stopPropagation()}},"Submit")))),S&&t.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),null==k||k(),z(r)},"aria-label":"Close"},t.createElement(s,{size:18})),F&&t.createElement(v,{progress:M,type:i}))},x=function(o){var r,a=o.toasts,i=o.position,s=o.layout,c=o.className,l=void 0===c?"":c,u=o.showCloseButton,d=void 0===u||u,h=o.swipeDirection,y=void 0===h?"right":h,v=o.showProgressBar,x=void 0===v||v,w=e(!1),k=w[0],E=w[1],C=n(null),B=function(){var t=100;switch(y){case"left":return{x:-100,opacity:0};case"right":default:return{x:t,opacity:0};case"up":return{y:-100,opacity:0};case"down":return{y:t,opacity:0}}},N=function(t){return"normal"===s?i.startsWith("top")?t*(k?80:15):-t*(k?80:15):"stack"===s?k?80*t:3*t:0},P=m([],a,!0).reverse();return t.createElement("div",{className:"vyrn-toast-container ".concat(l),style:(r={position:"fixed",zIndex:9999},i.includes("top")&&(r.top="1rem"),i.includes("bottom")&&(r.bottom="3rem"),i.includes("left")&&(r.left="1rem"),i.includes("right")&&(r.right="1rem"),i.includes("center")&&(r.left="50%",r.transform="translateX(-50%)"),r),ref:C,onMouseEnter:function(){return E(!0)},onMouseLeave:function(){return E(!1)}},t.createElement(f,{mode:"sync"},P.map((function(e,o){var n,r;return t.createElement(p.div,{key:e.id,layout:!0,initial:{opacity:0,y:i.startsWith("top")?-20:20,scale:.9},animate:{opacity:1,y:i.startsWith("top")?N(o):-N(o),scale:k?1.02:1,zIndex:"stack"===s?9999-o:9999,transition:{type:"spring",stiffness:500,damping:30}},exit:B(),drag:"left"===y||"right"===y?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.9,onDragEnd:function(t,o){var n;(Math.abs(o.offset.x)>100||Math.abs(o.offset.y)>100)&&(null===(n=e.onClose)||void 0===n||n.call(e))},style:{position:"normal"===s?"relative":"absolute",width:"100%",transformOrigin:i.startsWith("top")?"top":"bottom",marginBottom:"normal"===s?"0.25rem":0}},t.createElement(b,g({},e,{isExpanded:"stack"!==s||k,isStacked:"stack"===s&&!k,showCloseButton:null!==(n=e.showCloseButton)&&void 0!==n?n:d,showProgressBar:null!==(r=e.showProgressBar)&&void 0!==r?r:x})))}))))};!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}(".vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:8px;max-width:356px;offset:32px;padding:12px;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}.vyrn-toast{background-color:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;overflow:hidden;pointer-events:auto;position:relative;transition:all .2s ease;width:100%}.vyrn-toast-stacked{cursor:pointer;height:40px;margin-bottom:0;transform-origin:top}.vyrn-toast-content{align-items:center;display:flex;min-height:48px;padding:20px;width:100%}.vyrn-toast-icon{flex-shrink:0;height:16px;margin-right:8px;width:16px}.vyrn-toast-message{color:#000;flex-grow:1;font-size:13px;font-weight:400;line-height:1.5;margin:0;padding:0}.vyrn-toast-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.vyrn-toast-action{border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;padding:6px 12px;transition:all .2s ease}.vyrn-toast-action-default{background-color:#f1f3f5;color:#495057}.vyrn-toast-action-primary{background-color:#339af0;color:#fff}.vyrn-toast-action-secondary{background-color:#868e96;color:#fff}.vyrn-toast-action-danger{background-color:#fa5252;color:#fff}.vyrn-toast-input-form{display:flex;padding:0 16px 12px}.vyrn-toast-input{border:1px solid #e9ecef;border-radius:4px;flex-grow:1;font-size:13px;padding:8px 12px}.vyrn-toast-input-submit{background-color:#339af0;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;margin-left:8px;padding:8px 16px}.vyrn-toast-close{align-items:center;background:none;border:none;color:#868e96;cursor:pointer;display:flex;justify-content:center;padding:0;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:color .2s ease}.vyrn-toast-close:hover{color:#495057}.vyrn-toast-progress{background-color:rgba(51,154,240,.5);bottom:0;height:2px;left:0;position:absolute}.dark .vyrn-toast{background-color:#222}.dark .vyrn-toast-message{color:#e9ecef}.dark .vyrn-toast-action-default{background-color:#343a40;color:#f1f3f5}.dark .vyrn-toast-input{background-color:#343a40;border-color:#495057;color:#e9ecef}.dark .vyrn-toast-close{color:#adb5bd}.dark .vyrn-toast-close:hover{color:#e9ecef}@keyframes vyrn-toast-enter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes vyrn-toast-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.vyrn-toast-enter{animation:vyrn-toast-enter .3s ease-out}.vyrn-toast-exit{animation:vyrn-toast-exit .3s ease-in}@media (max-width:640px){.vyrn-toast-container{bottom:0;left:0;padding:8px;right:0;width:calc(100% - 32px)}.vyrn-toast{border-radius:6px 6px 0 0}}",{insertAt:"top"});var w=function(n){var s=n.children,c=n.defaultPosition,l=void 0===c?"top-right":c,u=n.defaultLayout,d=void 0===u?"normal":u,p=n.maxToasts,f=void 0===p?5:p,y=n.containerClassName,v=void 0===y?"":y,b=n.showCloseButton,w=void 0===b||b,k=n.swipeDirection,E=void 0===k?"right":k,C=n.showProgressBar,B=void 0===C||C,N=e([]),P=N[0],T=N[1],S=e(l),F=S[0],A=S[1],z=e(d),D=z[0],I=z[1],L=r((function(t){var e=Math.random().toString(36).substr(2,9);return T((function(o){return m(m([],o,!0),[g(g({},t),{id:e})],!1).slice(-f)})),t.soundEffect&&new Audio(t.soundEffect).play().catch((function(t){return console.error("Error playing sound:",t)})),e}),[f]),O=r((function(t){T((function(e){return e.filter((function(e){return e.id!==t}))}))}),[]),M=r((function(t,e){T((function(o){return o.map((function(o){return o.id===t?g(g({},o),e):o}))}))}),[]),Y=r((function(){T([])}),[]),W=a((function(){return{addToast:L,removeToast:O,updateToast:M,clearAllToasts:Y,position:F,setPosition:A,layout:D,setLayout:I,showCloseButton:w,swipeDirection:E,showProgressBar:B}}),[L,O,M,Y,F,D,w,E,B]),j=e(!1),X=j[0],q=j[1];return o((function(){q(!0)}),[]),t.createElement(h.Provider,{value:W},s,X&&i(t.createElement(x,{toasts:P,position:F,layout:D,className:v,showCloseButton:w,swipeDirection:E,showProgressBar:B}),document.body))},k=function(){var t=y(),e=t.addToast,o=t.removeToast,n=t.updateToast,a=t.clearAllToasts,i=t.position,s=t.setPosition,c=t.layout,l=t.setLayout,u=r((function(t){return e(t)}),[e]),d=r((function(t,e){n(t,e)}),[n]),p=r((function(t){o(t)}),[o]),f=r((function(){a()}),[a]),m=r((function(t){s(t)}),[s]),h=r((function(t){l(t)}),[l]);return{toast:u,update:d,dismiss:p,clearAll:f,changePosition:m,changeLayout:h,position:i,layout:c,default:function(t,e){return u(g({content:t,type:"default"},e))},info:function(t,e){return u(g({content:t,type:"info"},e))},success:function(t,e){return u(g({content:t,type:"success"},e))},warning:function(t,e){return u(g({content:t,type:"warning"},e))},error:function(t,e){return u(g({content:t,type:"error"},e))},custom:function(t,e){return u(g({content:t,type:"custom"},e))}}},E=function(e){var o=e.children,n=e.position,r=e.layout,a=void 0===r?"normal":r,i=e.maxToasts,s=e.containerClassName,c=e.showCloseButton,l=void 0===c||c,u=e.swipeDirection,d=void 0===u?"right":u,p=e.showProgressBar,f=void 0===p||p;return t.createElement(w,{defaultPosition:n,defaultLayout:a,maxToasts:i,containerClassName:s,showCloseButton:l,swipeDirection:d,showProgressBar:f},o)};export{E as ClientToastProvider,w as ToastProvider,k as useToast};
1
+ import t,{useState as e,useEffect as o,useRef as n,useCallback as r,useMemo as a}from"react";import{createPortal as i}from"react-dom";import{X as s,AlertTriangle as c,Info as l,AlertCircle as u,CheckCircle as d}from"lucide-react";import{motion as p,AnimatePresence as f}from"framer-motion";var g=function(){return g=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},g.apply(this,arguments)};function m(t,e,o){if(o||2===arguments.length)for(var n,r=0,a=e.length;r<a;r++)!n&&r in e||(n||(n=Array.prototype.slice.call(e,0,r)),n[r]=e[r]);return t.concat(n||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var h=t.createContext(void 0),y=function(){var e=t.useContext(h);if(void 0===e)throw new Error("useToastContext must be used within a ToastProvider");return e},v=function(e){var o=e.progress,n=e.type,r=void 0===n?"default":n,a=function(){var t={success:{base:"#10B981",highlight:"#34D399",glow:"rgba(16, 185, 129, 0.4)"},error:{base:"#EF4444",highlight:"#F87171",glow:"rgba(239, 68, 68, 0.4)"},warning:{base:"#F59E0B",highlight:"#FBBF24",glow:"rgba(245, 158, 11, 0.4)"},info:{base:"#3B82F6",highlight:"#60A5FA",glow:"rgba(59, 130, 246, 0.4)"},default:{base:"#6366F1",highlight:"#818CF8",glow:"rgba(99, 102, 241, 0.4)"}};return t[r]||t.default}();return t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"2px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(a.base,", \n ").concat(a.highlight,", \n ").concat(a.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(a.glow)},initial:{width:"100%",backgroundPosition:"0% 0%"},animate:{width:"".concat(o,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.4,ease:[.4,0,.2,1]},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},t.createElement(p.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(a.highlight,"40 50%,\n transparent 100%\n )"),transform:"translateX(-50%)"},animate:{x:["0%","200%"]},transition:{duration:1.5,repeat:1/0,ease:"linear"}}),t.createElement(p.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:a.highlight,filter:"blur(0.5px)"},animate:{opacity:[1,.5,1],scale:[1,1.2,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"}})),t.createElement(p.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(o,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(a.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},b=function(n){var r=n.id,a=n.content,i=n.type,m=n.duration,h=void 0===m?3e3:m,b=n.icon,x=n.actions,w=n.input,k=n.onClose,E=n.progress,C=n.customStyles,B=n.className,N=void 0===B?"":B,P=n.isExpanded,T=n.isStacked,S=n.showCloseButton,F=n.showProgressBar,A=y(),z=A.removeToast;A.updateToast;var D=e(""),I=D[0],L=D[1],O=e(E||100),M=O[0],Y=O[1];o((function(){if(void 0===E){var t=setInterval((function(){Y((function(t){var e=t-100/(h/1e3);return e>0?e:0}))}),1e3);return function(){return clearInterval(t)}}}),[h,E]),o((function(){0===M&&z(r)}),[M,r,z]),o((function(){void 0!==E&&Y(E)}),[E]);return t.createElement(p.div,{className:"vyrn-toast ".concat(N," ").concat(T?"vyrn-toast-stacked":""," ").concat(i?"vyrn-toast-".concat(i):""),style:g(g({},C),{height:P?"auto":T?"60px":"auto",overflow:"hidden"}),initial:{opacity:0,y:50,scale:.3},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.5,transition:{duration:.2}},transition:{type:"spring",stiffness:500,damping:30}},t.createElement("div",{className:"vyrn-toast-content"},function(){if(b)return b;switch(i){case"success":return t.createElement(d,{className:"vyrn-toast-icon text-green-500"});case"error":return t.createElement(u,{className:"vyrn-toast-icon text-red-500"});case"info":return t.createElement(l,{className:"vyrn-toast-icon text-blue-500"});case"warning":return t.createElement(c,{className:"vyrn-toast-icon text-yellow-500"});default:return null}}(),t.createElement("div",{className:"vyrn-toast-message"},a)),t.createElement(f,null,P&&t.createElement(p.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},x&&t.createElement("div",{className:"vyrn-toast-actions"},x.map((function(e,o){return t.createElement("button",{key:o,onClick:function(t){t.stopPropagation(),e.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(e.style||"default"," ").concat(e.className||"")},e.label)}))),w&&t.createElement("form",{onSubmit:function(t){t.preventDefault(),null==w||w.onSubmit(I),L("")},className:"vyrn-toast-input-form"},t.createElement("input",{type:"text",value:I,onChange:function(t){return L(t.target.value)},placeholder:w.placeholder,className:"vyrn-toast-input ".concat(w.className||""),onClick:function(t){return t.stopPropagation()}}),t.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(w.submitClassName||""),onClick:function(t){return t.stopPropagation()}},"Submit")))),S&&t.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),null==k||k(),z(r)},"aria-label":"Close"},t.createElement(s,{size:18})),F&&t.createElement(v,{progress:M,type:i}))},x=function(o){var r,a=o.toasts,i=o.position,s=o.layout,c=o.className,l=void 0===c?"":c,u=o.showCloseButton,d=void 0===u||u,h=o.swipeDirection,y=void 0===h?"right":h,v=o.showProgressBar,x=void 0===v||v,w=e(!1),k=w[0],E=w[1],C=n(null),B=function(){var t=100;switch(y){case"left":return{x:-100,opacity:0};case"right":default:return{x:t,opacity:0};case"up":return{y:-100,opacity:0};case"down":return{y:t,opacity:0}}},N=function(t){return"normal"===s?i.startsWith("top")?t*(k?80:15):-t*(k?80:15):"stack"===s?k?80*t:18*t:0},P=m([],a,!0).reverse();return t.createElement("div",{className:"vyrn-toast-container ".concat(l),style:(r={position:"fixed",zIndex:9999},i.includes("top")&&(r.top="1rem"),i.includes("bottom")&&(r.bottom="3.5rem"),i.includes("left")&&(r.left="1rem"),i.includes("right")&&(r.right="1rem"),i.includes("center")&&(r.left="50%",r.transform="translateX(-50%)"),r),ref:C,onMouseEnter:function(){return E(!0)},onMouseLeave:function(){return E(!1)}},t.createElement(f,{mode:"sync"},P.map((function(e,o){var n,r;return t.createElement(p.div,{key:e.id,layout:!0,initial:{opacity:0,y:i.startsWith("top")?-20:20,scale:.9},animate:{opacity:1,y:i.startsWith("top")?N(o):-N(o),scale:k?1.02:1,zIndex:"stack"===s?9999-o:9999,transition:{type:"spring",stiffness:500,damping:30}},exit:B(),drag:"left"===y||"right"===y?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.9,onDragEnd:function(t,o){var n;(Math.abs(o.offset.x)>100||Math.abs(o.offset.y)>100)&&(null===(n=e.onClose)||void 0===n||n.call(e))},style:{position:"normal"===s?"relative":"absolute",width:"100%",transformOrigin:i.startsWith("top")?"top":"bottom",marginBottom:"normal"===s?"0.25rem":0}},t.createElement(b,g({},e,{isExpanded:"stack"!==s||k,isStacked:"stack"===s&&!k,showCloseButton:null!==(n=e.showCloseButton)&&void 0!==n?n:d,showProgressBar:null!==(r=e.showProgressBar)&&void 0!==r?r:x})))}))))};!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}(".vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:8px;max-width:356px;offset:32px;padding:12px;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}.vyrn-toast{background-color:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;overflow:hidden;pointer-events:auto;position:relative;transition:all .2s ease;width:100%}.vyrn-toast-stacked{cursor:pointer;height:40px;margin-bottom:0;transform-origin:top}.vyrn-toast-content{align-items:center;display:flex;min-height:48px;padding:20px;width:100%}.vyrn-toast-icon{flex-shrink:0;height:16px;margin-right:8px;width:16px}.vyrn-toast-message{color:#000;flex-grow:1;font-size:13px;font-weight:400;line-height:1.5;margin:0;padding:0}.vyrn-toast-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.vyrn-toast-action{border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;padding:6px 12px;transition:all .2s ease}.vyrn-toast-action-default{background-color:#f1f3f5;color:#495057}.vyrn-toast-action-primary{background-color:#339af0;color:#fff}.vyrn-toast-action-secondary{background-color:#868e96;color:#fff}.vyrn-toast-action-danger{background-color:#fa5252;color:#fff}.vyrn-toast-input-form{display:flex;padding:0 16px 12px}.vyrn-toast-input{border:1px solid #e9ecef;border-radius:4px;flex-grow:1;font-size:13px;padding:8px 12px}.vyrn-toast-input-submit{background-color:#339af0;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;margin-left:8px;padding:8px 16px}.vyrn-toast-close{align-items:center;background:none;border:none;color:#868e96;cursor:pointer;display:flex;justify-content:center;padding:0;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:color .2s ease}.vyrn-toast-close:hover{color:#495057}.vyrn-toast-progress{background-color:rgba(51,154,240,.5);bottom:0;height:2px;left:0;position:absolute}.dark .vyrn-toast{background-color:#222}.dark .vyrn-toast-message{color:#e9ecef}.dark .vyrn-toast-action-default{background-color:#343a40;color:#f1f3f5}.dark .vyrn-toast-input{background-color:#343a40;border-color:#495057;color:#e9ecef}.dark .vyrn-toast-close{color:#adb5bd}.dark .vyrn-toast-close:hover{color:#e9ecef}@keyframes vyrn-toast-enter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes vyrn-toast-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.vyrn-toast-enter{animation:vyrn-toast-enter .3s ease-out}.vyrn-toast-exit{animation:vyrn-toast-exit .3s ease-in}@media (max-width:640px){.vyrn-toast-container{bottom:0;left:0;padding:8px;right:0;width:calc(100% - 32px)}.vyrn-toast{border-radius:6px 6px 0 0}}",{insertAt:"top"});var w=function(n){var s=n.children,c=n.defaultPosition,l=void 0===c?"top-right":c,u=n.defaultLayout,d=void 0===u?"normal":u,p=n.maxToasts,f=void 0===p?5:p,y=n.containerClassName,v=void 0===y?"":y,b=n.showCloseButton,w=void 0===b||b,k=n.swipeDirection,E=void 0===k?"right":k,C=n.showProgressBar,B=void 0===C||C,N=e([]),P=N[0],T=N[1],S=e(l),F=S[0],A=S[1],z=e(d),D=z[0],I=z[1],L=r((function(t){var e=Math.random().toString(36).substr(2,9);return T((function(o){return m(m([],o,!0),[g(g({},t),{id:e})],!1).slice(-f)})),t.soundEffect&&new Audio(t.soundEffect).play().catch((function(t){return console.error("Error playing sound:",t)})),e}),[f]),O=r((function(t){T((function(e){return e.filter((function(e){return e.id!==t}))}))}),[]),M=r((function(t,e){T((function(o){return o.map((function(o){return o.id===t?g(g({},o),e):o}))}))}),[]),Y=r((function(){T([])}),[]),W=a((function(){return{addToast:L,removeToast:O,updateToast:M,clearAllToasts:Y,position:F,setPosition:A,layout:D,setLayout:I,showCloseButton:w,swipeDirection:E,showProgressBar:B}}),[L,O,M,Y,F,D,w,E,B]),j=e(!1),X=j[0],q=j[1];return o((function(){q(!0)}),[]),t.createElement(h.Provider,{value:W},s,X&&i(t.createElement(x,{toasts:P,position:F,layout:D,className:v,showCloseButton:w,swipeDirection:E,showProgressBar:B}),document.body))},k=function(){var t=y(),e=t.addToast,o=t.removeToast,n=t.updateToast,a=t.clearAllToasts,i=t.position,s=t.setPosition,c=t.layout,l=t.setLayout,u=r((function(t){return e(t)}),[e]),d=r((function(t,e){n(t,e)}),[n]),p=r((function(t){o(t)}),[o]),f=r((function(){a()}),[a]),m=r((function(t){s(t)}),[s]),h=r((function(t){l(t)}),[l]);return{toast:u,update:d,dismiss:p,clearAll:f,changePosition:m,changeLayout:h,position:i,layout:c,default:function(t,e){return u(g({content:t,type:"default"},e))},info:function(t,e){return u(g({content:t,type:"info"},e))},success:function(t,e){return u(g({content:t,type:"success"},e))},warning:function(t,e){return u(g({content:t,type:"warning"},e))},error:function(t,e){return u(g({content:t,type:"error"},e))},custom:function(t,e){return u(g({content:t,type:"custom"},e))}}},E=function(e){var o=e.children,n=e.position,r=e.layout,a=void 0===r?"normal":r,i=e.maxToasts,s=e.containerClassName,c=e.showCloseButton,l=void 0===c||c,u=e.swipeDirection,d=void 0===u?"right":u,p=e.showProgressBar,f=void 0===p||p;return t.createElement(w,{defaultPosition:n,defaultLayout:a,maxToasts:i,containerClassName:s,showCloseButton:l,swipeDirection:d,showProgressBar:f},o)};export{E as ClientToastProvider,w as ToastProvider,k as useToast};
2
2
  //# sourceMappingURL=index.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode"],"mappings":"8jPAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBY,CAqB1D"}
1
+ {"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode"],"mappings":"ikPAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBY,CAqB1D"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom"),o=require("lucide-react"),n=require("framer-motion");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=a(t),i=function(){return i=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var a in e=arguments[o])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},i.apply(this,arguments)};function s(t,e,o){if(o||2===arguments.length)for(var n,a=0,r=e.length;a<r;a++)!n&&a in e||(n||(n=Array.prototype.slice.call(e,0,a)),n[a]=e[a]);return t.concat(n||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var c=r.default.createContext(void 0),l=function(){var t=r.default.useContext(c);if(void 0===t)throw new Error("useToastContext must be used within a ToastProvider");return t},u=function(t){var e=t.progress,o=t.type,a=void 0===o?"default":o,i=function(){var t={success:{base:"#10B981",highlight:"#34D399",glow:"rgba(16, 185, 129, 0.4)"},error:{base:"#EF4444",highlight:"#F87171",glow:"rgba(239, 68, 68, 0.4)"},warning:{base:"#F59E0B",highlight:"#FBBF24",glow:"rgba(245, 158, 11, 0.4)"},info:{base:"#3B82F6",highlight:"#60A5FA",glow:"rgba(59, 130, 246, 0.4)"},default:{base:"#6366F1",highlight:"#818CF8",glow:"rgba(99, 102, 241, 0.4)"}};return t[a]||t.default}();return r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"2px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(i.base,", \n ").concat(i.highlight,", \n ").concat(i.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(i.glow)},initial:{width:"100%",backgroundPosition:"0% 0%"},animate:{width:"".concat(e,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.4,ease:[.4,0,.2,1]},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},r.default.createElement(n.motion.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(i.highlight,"40 50%,\n transparent 100%\n )"),transform:"translateX(-50%)"},animate:{x:["0%","200%"]},transition:{duration:1.5,repeat:1/0,ease:"linear"}}),r.default.createElement(n.motion.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:i.highlight,filter:"blur(0.5px)"},animate:{opacity:[1,.5,1],scale:[1,1.2,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"}})),r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(e,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(i.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},d=function(e){var a=e.id,s=e.content,c=e.type,d=e.duration,f=void 0===d?3e3:d,p=e.icon,m=e.actions,g=e.input,h=e.onClose,y=e.progress,v=e.customStyles,b=e.className,x=void 0===b?"":b,w=e.isExpanded,k=e.isStacked,E=e.showCloseButton,C=e.showProgressBar,P=l(),B=P.removeToast;P.updateToast;var N=t.useState(""),T=N[0],S=N[1],A=t.useState(y||100),F=A[0],z=A[1];t.useEffect((function(){if(void 0===y){var t=setInterval((function(){z((function(t){var e=t-100/(f/1e3);return e>0?e:0}))}),1e3);return function(){return clearInterval(t)}}}),[f,y]),t.useEffect((function(){0===F&&B(a)}),[F,a,B]),t.useEffect((function(){void 0!==y&&z(y)}),[y]);return r.default.createElement(n.motion.div,{className:"vyrn-toast ".concat(x," ").concat(k?"vyrn-toast-stacked":""," ").concat(c?"vyrn-toast-".concat(c):""),style:i(i({},v),{height:w?"auto":k?"60px":"auto",overflow:"hidden"}),initial:{opacity:0,y:50,scale:.3},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.5,transition:{duration:.2}},transition:{type:"spring",stiffness:500,damping:30}},r.default.createElement("div",{className:"vyrn-toast-content"},function(){if(p)return p;switch(c){case"success":return r.default.createElement(o.CheckCircle,{className:"vyrn-toast-icon text-green-500"});case"error":return r.default.createElement(o.AlertCircle,{className:"vyrn-toast-icon text-red-500"});case"info":return r.default.createElement(o.Info,{className:"vyrn-toast-icon text-blue-500"});case"warning":return r.default.createElement(o.AlertTriangle,{className:"vyrn-toast-icon text-yellow-500"});default:return null}}(),r.default.createElement("div",{className:"vyrn-toast-message"},s)),r.default.createElement(n.AnimatePresence,null,w&&r.default.createElement(n.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},m&&r.default.createElement("div",{className:"vyrn-toast-actions"},m.map((function(t,e){return r.default.createElement("button",{key:e,onClick:function(e){e.stopPropagation(),t.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(t.style||"default"," ").concat(t.className||"")},t.label)}))),g&&r.default.createElement("form",{onSubmit:function(t){t.preventDefault(),null==g||g.onSubmit(T),S("")},className:"vyrn-toast-input-form"},r.default.createElement("input",{type:"text",value:T,onChange:function(t){return S(t.target.value)},placeholder:g.placeholder,className:"vyrn-toast-input ".concat(g.className||""),onClick:function(t){return t.stopPropagation()}}),r.default.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(g.submitClassName||""),onClick:function(t){return t.stopPropagation()}},"Submit")))),E&&r.default.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),null==h||h(),B(a)},"aria-label":"Close"},r.default.createElement(o.X,{size:18})),C&&r.default.createElement(u,{progress:F,type:c}))},f=function(e){var o,a=e.toasts,c=e.position,l=e.layout,u=e.className,f=void 0===u?"":u,p=e.showCloseButton,m=void 0===p||p,g=e.swipeDirection,h=void 0===g?"right":g,y=e.showProgressBar,v=void 0===y||y,b=t.useState(!1),x=b[0],w=b[1],k=t.useRef(null),E=function(){var t=100;switch(h){case"left":return{x:-100,opacity:0};case"right":default:return{x:t,opacity:0};case"up":return{y:-100,opacity:0};case"down":return{y:t,opacity:0}}},C=function(t){return"normal"===l?c.startsWith("top")?t*(x?80:15):-t*(x?80:15):"stack"===l?x?80*t:3*t:0},P=s([],a,!0).reverse();return r.default.createElement("div",{className:"vyrn-toast-container ".concat(f),style:(o={position:"fixed",zIndex:9999},c.includes("top")&&(o.top="1rem"),c.includes("bottom")&&(o.bottom="3rem"),c.includes("left")&&(o.left="1rem"),c.includes("right")&&(o.right="1rem"),c.includes("center")&&(o.left="50%",o.transform="translateX(-50%)"),o),ref:k,onMouseEnter:function(){return w(!0)},onMouseLeave:function(){return w(!1)}},r.default.createElement(n.AnimatePresence,{mode:"sync"},P.map((function(t,e){var o,a;return r.default.createElement(n.motion.div,{key:t.id,layout:!0,initial:{opacity:0,y:c.startsWith("top")?-20:20,scale:.9},animate:{opacity:1,y:c.startsWith("top")?C(e):-C(e),scale:x?1.02:1,zIndex:"stack"===l?9999-e:9999,transition:{type:"spring",stiffness:500,damping:30}},exit:E(),drag:"left"===h||"right"===h?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.9,onDragEnd:function(e,o){var n;(Math.abs(o.offset.x)>100||Math.abs(o.offset.y)>100)&&(null===(n=t.onClose)||void 0===n||n.call(t))},style:{position:"normal"===l?"relative":"absolute",width:"100%",transformOrigin:c.startsWith("top")?"top":"bottom",marginBottom:"normal"===l?"0.25rem":0}},r.default.createElement(d,i({},t,{isExpanded:"stack"!==l||x,isStacked:"stack"===l&&!x,showCloseButton:null!==(o=t.showCloseButton)&&void 0!==o?o:m,showProgressBar:null!==(a=t.showProgressBar)&&void 0!==a?a:v})))}))))};!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}(".vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:8px;max-width:356px;offset:32px;padding:12px;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}.vyrn-toast{background-color:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;overflow:hidden;pointer-events:auto;position:relative;transition:all .2s ease;width:100%}.vyrn-toast-stacked{cursor:pointer;height:40px;margin-bottom:0;transform-origin:top}.vyrn-toast-content{align-items:center;display:flex;min-height:48px;padding:20px;width:100%}.vyrn-toast-icon{flex-shrink:0;height:16px;margin-right:8px;width:16px}.vyrn-toast-message{color:#000;flex-grow:1;font-size:13px;font-weight:400;line-height:1.5;margin:0;padding:0}.vyrn-toast-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.vyrn-toast-action{border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;padding:6px 12px;transition:all .2s ease}.vyrn-toast-action-default{background-color:#f1f3f5;color:#495057}.vyrn-toast-action-primary{background-color:#339af0;color:#fff}.vyrn-toast-action-secondary{background-color:#868e96;color:#fff}.vyrn-toast-action-danger{background-color:#fa5252;color:#fff}.vyrn-toast-input-form{display:flex;padding:0 16px 12px}.vyrn-toast-input{border:1px solid #e9ecef;border-radius:4px;flex-grow:1;font-size:13px;padding:8px 12px}.vyrn-toast-input-submit{background-color:#339af0;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;margin-left:8px;padding:8px 16px}.vyrn-toast-close{align-items:center;background:none;border:none;color:#868e96;cursor:pointer;display:flex;justify-content:center;padding:0;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:color .2s ease}.vyrn-toast-close:hover{color:#495057}.vyrn-toast-progress{background-color:rgba(51,154,240,.5);bottom:0;height:2px;left:0;position:absolute}.dark .vyrn-toast{background-color:#222}.dark .vyrn-toast-message{color:#e9ecef}.dark .vyrn-toast-action-default{background-color:#343a40;color:#f1f3f5}.dark .vyrn-toast-input{background-color:#343a40;border-color:#495057;color:#e9ecef}.dark .vyrn-toast-close{color:#adb5bd}.dark .vyrn-toast-close:hover{color:#e9ecef}@keyframes vyrn-toast-enter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes vyrn-toast-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.vyrn-toast-enter{animation:vyrn-toast-enter .3s ease-out}.vyrn-toast-exit{animation:vyrn-toast-exit .3s ease-in}@media (max-width:640px){.vyrn-toast-container{bottom:0;left:0;padding:8px;right:0;width:calc(100% - 32px)}.vyrn-toast{border-radius:6px 6px 0 0}}",{insertAt:"top"});var p=function(o){var n=o.children,a=o.defaultPosition,l=void 0===a?"top-right":a,u=o.defaultLayout,d=void 0===u?"normal":u,p=o.maxToasts,m=void 0===p?5:p,g=o.containerClassName,h=void 0===g?"":g,y=o.showCloseButton,v=void 0===y||y,b=o.swipeDirection,x=void 0===b?"right":b,w=o.showProgressBar,k=void 0===w||w,E=t.useState([]),C=E[0],P=E[1],B=t.useState(l),N=B[0],T=B[1],S=t.useState(d),A=S[0],F=S[1],z=t.useCallback((function(t){var e=Math.random().toString(36).substr(2,9);return P((function(o){return s(s([],o,!0),[i(i({},t),{id:e})],!1).slice(-m)})),t.soundEffect&&new Audio(t.soundEffect).play().catch((function(t){return console.error("Error playing sound:",t)})),e}),[m]),D=t.useCallback((function(t){P((function(e){return e.filter((function(e){return e.id!==t}))}))}),[]),I=t.useCallback((function(t,e){P((function(o){return o.map((function(o){return o.id===t?i(i({},o),e):o}))}))}),[]),M=t.useCallback((function(){P([])}),[]),O=t.useMemo((function(){return{addToast:z,removeToast:D,updateToast:I,clearAllToasts:M,position:N,setPosition:T,layout:A,setLayout:F,showCloseButton:v,swipeDirection:x,showProgressBar:k}}),[z,D,I,M,N,A,v,x,k]),L=t.useState(!1),j=L[0],Y=L[1];return t.useEffect((function(){Y(!0)}),[]),r.default.createElement(c.Provider,{value:O},n,j&&e.createPortal(r.default.createElement(f,{toasts:C,position:N,layout:A,className:h,showCloseButton:v,swipeDirection:x,showProgressBar:k}),document.body))};exports.ClientToastProvider=function(t){var e=t.children,o=t.position,n=t.layout,a=void 0===n?"normal":n,i=t.maxToasts,s=t.containerClassName,c=t.showCloseButton,l=void 0===c||c,u=t.swipeDirection,d=void 0===u?"right":u,f=t.showProgressBar,m=void 0===f||f;return r.default.createElement(p,{defaultPosition:o,defaultLayout:a,maxToasts:i,containerClassName:s,showCloseButton:l,swipeDirection:d,showProgressBar:m},e)},exports.ToastProvider=p,exports.useToast=function(){var e=l(),o=e.addToast,n=e.removeToast,a=e.updateToast,r=e.clearAllToasts,s=e.position,c=e.setPosition,u=e.layout,d=e.setLayout,f=t.useCallback((function(t){return o(t)}),[o]),p=t.useCallback((function(t,e){a(t,e)}),[a]),m=t.useCallback((function(t){n(t)}),[n]),g=t.useCallback((function(){r()}),[r]),h=t.useCallback((function(t){c(t)}),[c]),y=t.useCallback((function(t){d(t)}),[d]);return{toast:f,update:p,dismiss:m,clearAll:g,changePosition:h,changeLayout:y,position:s,layout:u,default:function(t,e){return f(i({content:t,type:"default"},e))},info:function(t,e){return f(i({content:t,type:"info"},e))},success:function(t,e){return f(i({content:t,type:"success"},e))},warning:function(t,e){return f(i({content:t,type:"warning"},e))},error:function(t,e){return f(i({content:t,type:"error"},e))},custom:function(t,e){return f(i({content:t,type:"custom"},e))}}};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom"),o=require("lucide-react"),n=require("framer-motion");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=a(t),i=function(){return i=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var a in e=arguments[o])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},i.apply(this,arguments)};function s(t,e,o){if(o||2===arguments.length)for(var n,a=0,r=e.length;a<r;a++)!n&&a in e||(n||(n=Array.prototype.slice.call(e,0,a)),n[a]=e[a]);return t.concat(n||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var c=r.default.createContext(void 0),l=function(){var t=r.default.useContext(c);if(void 0===t)throw new Error("useToastContext must be used within a ToastProvider");return t},u=function(t){var e=t.progress,o=t.type,a=void 0===o?"default":o,i=function(){var t={success:{base:"#10B981",highlight:"#34D399",glow:"rgba(16, 185, 129, 0.4)"},error:{base:"#EF4444",highlight:"#F87171",glow:"rgba(239, 68, 68, 0.4)"},warning:{base:"#F59E0B",highlight:"#FBBF24",glow:"rgba(245, 158, 11, 0.4)"},info:{base:"#3B82F6",highlight:"#60A5FA",glow:"rgba(59, 130, 246, 0.4)"},default:{base:"#6366F1",highlight:"#818CF8",glow:"rgba(99, 102, 241, 0.4)"}};return t[a]||t.default}();return r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"2px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(i.base,", \n ").concat(i.highlight,", \n ").concat(i.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(i.glow)},initial:{width:"100%",backgroundPosition:"0% 0%"},animate:{width:"".concat(e,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.4,ease:[.4,0,.2,1]},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},r.default.createElement(n.motion.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(i.highlight,"40 50%,\n transparent 100%\n )"),transform:"translateX(-50%)"},animate:{x:["0%","200%"]},transition:{duration:1.5,repeat:1/0,ease:"linear"}}),r.default.createElement(n.motion.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:i.highlight,filter:"blur(0.5px)"},animate:{opacity:[1,.5,1],scale:[1,1.2,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"}})),r.default.createElement(n.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(e,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(i.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},d=function(e){var a=e.id,s=e.content,c=e.type,d=e.duration,f=void 0===d?3e3:d,p=e.icon,m=e.actions,g=e.input,h=e.onClose,y=e.progress,v=e.customStyles,b=e.className,x=void 0===b?"":b,w=e.isExpanded,k=e.isStacked,E=e.showCloseButton,C=e.showProgressBar,P=l(),B=P.removeToast;P.updateToast;var N=t.useState(""),T=N[0],S=N[1],A=t.useState(y||100),F=A[0],z=A[1];t.useEffect((function(){if(void 0===y){var t=setInterval((function(){z((function(t){var e=t-100/(f/1e3);return e>0?e:0}))}),1e3);return function(){return clearInterval(t)}}}),[f,y]),t.useEffect((function(){0===F&&B(a)}),[F,a,B]),t.useEffect((function(){void 0!==y&&z(y)}),[y]);return r.default.createElement(n.motion.div,{className:"vyrn-toast ".concat(x," ").concat(k?"vyrn-toast-stacked":""," ").concat(c?"vyrn-toast-".concat(c):""),style:i(i({},v),{height:w?"auto":k?"60px":"auto",overflow:"hidden"}),initial:{opacity:0,y:50,scale:.3},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.5,transition:{duration:.2}},transition:{type:"spring",stiffness:500,damping:30}},r.default.createElement("div",{className:"vyrn-toast-content"},function(){if(p)return p;switch(c){case"success":return r.default.createElement(o.CheckCircle,{className:"vyrn-toast-icon text-green-500"});case"error":return r.default.createElement(o.AlertCircle,{className:"vyrn-toast-icon text-red-500"});case"info":return r.default.createElement(o.Info,{className:"vyrn-toast-icon text-blue-500"});case"warning":return r.default.createElement(o.AlertTriangle,{className:"vyrn-toast-icon text-yellow-500"});default:return null}}(),r.default.createElement("div",{className:"vyrn-toast-message"},s)),r.default.createElement(n.AnimatePresence,null,w&&r.default.createElement(n.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},m&&r.default.createElement("div",{className:"vyrn-toast-actions"},m.map((function(t,e){return r.default.createElement("button",{key:e,onClick:function(e){e.stopPropagation(),t.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(t.style||"default"," ").concat(t.className||"")},t.label)}))),g&&r.default.createElement("form",{onSubmit:function(t){t.preventDefault(),null==g||g.onSubmit(T),S("")},className:"vyrn-toast-input-form"},r.default.createElement("input",{type:"text",value:T,onChange:function(t){return S(t.target.value)},placeholder:g.placeholder,className:"vyrn-toast-input ".concat(g.className||""),onClick:function(t){return t.stopPropagation()}}),r.default.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(g.submitClassName||""),onClick:function(t){return t.stopPropagation()}},"Submit")))),E&&r.default.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),null==h||h(),B(a)},"aria-label":"Close"},r.default.createElement(o.X,{size:18})),C&&r.default.createElement(u,{progress:F,type:c}))},f=function(e){var o,a=e.toasts,c=e.position,l=e.layout,u=e.className,f=void 0===u?"":u,p=e.showCloseButton,m=void 0===p||p,g=e.swipeDirection,h=void 0===g?"right":g,y=e.showProgressBar,v=void 0===y||y,b=t.useState(!1),x=b[0],w=b[1],k=t.useRef(null),E=function(){var t=100;switch(h){case"left":return{x:-100,opacity:0};case"right":default:return{x:t,opacity:0};case"up":return{y:-100,opacity:0};case"down":return{y:t,opacity:0}}},C=function(t){return"normal"===l?c.startsWith("top")?t*(x?80:15):-t*(x?80:15):"stack"===l?x?80*t:18*t:0},P=s([],a,!0).reverse();return r.default.createElement("div",{className:"vyrn-toast-container ".concat(f),style:(o={position:"fixed",zIndex:9999},c.includes("top")&&(o.top="1rem"),c.includes("bottom")&&(o.bottom="3.5rem"),c.includes("left")&&(o.left="1rem"),c.includes("right")&&(o.right="1rem"),c.includes("center")&&(o.left="50%",o.transform="translateX(-50%)"),o),ref:k,onMouseEnter:function(){return w(!0)},onMouseLeave:function(){return w(!1)}},r.default.createElement(n.AnimatePresence,{mode:"sync"},P.map((function(t,e){var o,a;return r.default.createElement(n.motion.div,{key:t.id,layout:!0,initial:{opacity:0,y:c.startsWith("top")?-20:20,scale:.9},animate:{opacity:1,y:c.startsWith("top")?C(e):-C(e),scale:x?1.02:1,zIndex:"stack"===l?9999-e:9999,transition:{type:"spring",stiffness:500,damping:30}},exit:E(),drag:"left"===h||"right"===h?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.9,onDragEnd:function(e,o){var n;(Math.abs(o.offset.x)>100||Math.abs(o.offset.y)>100)&&(null===(n=t.onClose)||void 0===n||n.call(t))},style:{position:"normal"===l?"relative":"absolute",width:"100%",transformOrigin:c.startsWith("top")?"top":"bottom",marginBottom:"normal"===l?"0.25rem":0}},r.default.createElement(d,i({},t,{isExpanded:"stack"!==l||x,isStacked:"stack"===l&&!x,showCloseButton:null!==(o=t.showCloseButton)&&void 0!==o?o:m,showProgressBar:null!==(a=t.showProgressBar)&&void 0!==a?a:v})))}))))};!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}(".vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:8px;max-width:356px;offset:32px;padding:12px;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}.vyrn-toast{background-color:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;overflow:hidden;pointer-events:auto;position:relative;transition:all .2s ease;width:100%}.vyrn-toast-stacked{cursor:pointer;height:40px;margin-bottom:0;transform-origin:top}.vyrn-toast-content{align-items:center;display:flex;min-height:48px;padding:20px;width:100%}.vyrn-toast-icon{flex-shrink:0;height:16px;margin-right:8px;width:16px}.vyrn-toast-message{color:#000;flex-grow:1;font-size:13px;font-weight:400;line-height:1.5;margin:0;padding:0}.vyrn-toast-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.vyrn-toast-action{border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;padding:6px 12px;transition:all .2s ease}.vyrn-toast-action-default{background-color:#f1f3f5;color:#495057}.vyrn-toast-action-primary{background-color:#339af0;color:#fff}.vyrn-toast-action-secondary{background-color:#868e96;color:#fff}.vyrn-toast-action-danger{background-color:#fa5252;color:#fff}.vyrn-toast-input-form{display:flex;padding:0 16px 12px}.vyrn-toast-input{border:1px solid #e9ecef;border-radius:4px;flex-grow:1;font-size:13px;padding:8px 12px}.vyrn-toast-input-submit{background-color:#339af0;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;margin-left:8px;padding:8px 16px}.vyrn-toast-close{align-items:center;background:none;border:none;color:#868e96;cursor:pointer;display:flex;justify-content:center;padding:0;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:color .2s ease}.vyrn-toast-close:hover{color:#495057}.vyrn-toast-progress{background-color:rgba(51,154,240,.5);bottom:0;height:2px;left:0;position:absolute}.dark .vyrn-toast{background-color:#222}.dark .vyrn-toast-message{color:#e9ecef}.dark .vyrn-toast-action-default{background-color:#343a40;color:#f1f3f5}.dark .vyrn-toast-input{background-color:#343a40;border-color:#495057;color:#e9ecef}.dark .vyrn-toast-close{color:#adb5bd}.dark .vyrn-toast-close:hover{color:#e9ecef}@keyframes vyrn-toast-enter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes vyrn-toast-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.vyrn-toast-enter{animation:vyrn-toast-enter .3s ease-out}.vyrn-toast-exit{animation:vyrn-toast-exit .3s ease-in}@media (max-width:640px){.vyrn-toast-container{bottom:0;left:0;padding:8px;right:0;width:calc(100% - 32px)}.vyrn-toast{border-radius:6px 6px 0 0}}",{insertAt:"top"});var p=function(o){var n=o.children,a=o.defaultPosition,l=void 0===a?"top-right":a,u=o.defaultLayout,d=void 0===u?"normal":u,p=o.maxToasts,m=void 0===p?5:p,g=o.containerClassName,h=void 0===g?"":g,y=o.showCloseButton,v=void 0===y||y,b=o.swipeDirection,x=void 0===b?"right":b,w=o.showProgressBar,k=void 0===w||w,E=t.useState([]),C=E[0],P=E[1],B=t.useState(l),N=B[0],T=B[1],S=t.useState(d),A=S[0],F=S[1],z=t.useCallback((function(t){var e=Math.random().toString(36).substr(2,9);return P((function(o){return s(s([],o,!0),[i(i({},t),{id:e})],!1).slice(-m)})),t.soundEffect&&new Audio(t.soundEffect).play().catch((function(t){return console.error("Error playing sound:",t)})),e}),[m]),D=t.useCallback((function(t){P((function(e){return e.filter((function(e){return e.id!==t}))}))}),[]),I=t.useCallback((function(t,e){P((function(o){return o.map((function(o){return o.id===t?i(i({},o),e):o}))}))}),[]),M=t.useCallback((function(){P([])}),[]),O=t.useMemo((function(){return{addToast:z,removeToast:D,updateToast:I,clearAllToasts:M,position:N,setPosition:T,layout:A,setLayout:F,showCloseButton:v,swipeDirection:x,showProgressBar:k}}),[z,D,I,M,N,A,v,x,k]),L=t.useState(!1),j=L[0],Y=L[1];return t.useEffect((function(){Y(!0)}),[]),r.default.createElement(c.Provider,{value:O},n,j&&e.createPortal(r.default.createElement(f,{toasts:C,position:N,layout:A,className:h,showCloseButton:v,swipeDirection:x,showProgressBar:k}),document.body))};exports.ClientToastProvider=function(t){var e=t.children,o=t.position,n=t.layout,a=void 0===n?"normal":n,i=t.maxToasts,s=t.containerClassName,c=t.showCloseButton,l=void 0===c||c,u=t.swipeDirection,d=void 0===u?"right":u,f=t.showProgressBar,m=void 0===f||f;return r.default.createElement(p,{defaultPosition:o,defaultLayout:a,maxToasts:i,containerClassName:s,showCloseButton:l,swipeDirection:d,showProgressBar:m},e)},exports.ToastProvider=p,exports.useToast=function(){var e=l(),o=e.addToast,n=e.removeToast,a=e.updateToast,r=e.clearAllToasts,s=e.position,c=e.setPosition,u=e.layout,d=e.setLayout,f=t.useCallback((function(t){return o(t)}),[o]),p=t.useCallback((function(t,e){a(t,e)}),[a]),m=t.useCallback((function(t){n(t)}),[n]),g=t.useCallback((function(){r()}),[r]),h=t.useCallback((function(t){c(t)}),[c]),y=t.useCallback((function(t){d(t)}),[d]);return{toast:f,update:p,dismiss:m,clearAll:g,changePosition:h,changeLayout:y,position:s,layout:u,default:function(t,e){return f(i({content:t,type:"default"},e))},info:function(t,e){return f(i({content:t,type:"info"},e))},success:function(t,e){return f(i({content:t,type:"success"},e))},warning:function(t,e){return f(i({content:t,type:"warning"},e))},error:function(t,e){return f(i({content:t,type:"error"},e))},custom:function(t,e){return f(i({content:t,type:"custom"},e))}}};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode"],"mappings":"s8PAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBY,CAqB1D"}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode"],"mappings":"y8PAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBY,CAqB1D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vyrn",
3
- "version": "2.0.9",
3
+ "version": "3.0.1",
4
4
  "description": "A modern, customizable toast library for React and Next.js",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
package/rollup.config.js DELETED
@@ -1,57 +0,0 @@
1
- import typescript from 'rollup-plugin-typescript2';
2
- import postcss from 'rollup-plugin-postcss';
3
- import { terser } from 'rollup-plugin-terser';
4
- import replace from '@rollup/plugin-replace';
5
- import pkg from './package.json';
6
-
7
- const external = [...Object.keys(pkg.peerDependencies || {})];
8
-
9
- const plugins = [
10
- // Add replace plugin to handle 'use client' directives
11
- replace({
12
- preventAssignment: true,
13
- values: {
14
- 'use client': '',
15
- },
16
- }),
17
- typescript({
18
- typescript: require('typescript'),
19
- tsconfig: 'tsconfig.json',
20
- tsconfigOverride: {
21
- compilerOptions: {
22
- declaration: true,
23
- declarationDir: 'dist',
24
- },
25
- },
26
- }),
27
- postcss({
28
- extensions: ['.css'],
29
- minimize: true,
30
- inject: {
31
- insertAt: 'top',
32
- },
33
- }),
34
- terser(),
35
- ];
36
-
37
- export default [
38
- {
39
- input: 'src/index.ts',
40
- output: [
41
- {
42
- file: pkg.main,
43
- format: 'cjs',
44
- exports: 'named',
45
- sourcemap: true,
46
- },
47
- {
48
- file: pkg.module,
49
- format: 'es',
50
- exports: 'named',
51
- sourcemap: true,
52
- },
53
- ],
54
- external,
55
- plugins,
56
- },
57
- ];
@@ -1,42 +0,0 @@
1
- // ClientToastProvider.tsx
2
- 'use client';
3
-
4
- import React from 'react';
5
- import { ToastProvider } from './ToastProvider';
6
- import { ToastPosition, ToastLayout, SwipeDirection } from '../types';
7
-
8
- interface ClientToastProviderProps {
9
- children: React.ReactNode;
10
- position?: ToastPosition;
11
- layout?: ToastLayout;
12
- maxToasts?: number;
13
- containerClassName?: string;
14
- showCloseButton?: boolean;
15
- swipeDirection?: SwipeDirection;
16
- showProgressBar?: boolean;
17
- }
18
-
19
- export const ClientToastProvider: React.FC<ClientToastProviderProps> = ({
20
- children,
21
- position,
22
- layout = 'normal',
23
- maxToasts,
24
- containerClassName,
25
- showCloseButton = true,
26
- swipeDirection = 'right',
27
- showProgressBar = true,
28
- }) => {
29
- return (
30
- <ToastProvider
31
- defaultPosition={position}
32
- defaultLayout={layout}
33
- maxToasts={maxToasts}
34
- containerClassName={containerClassName}
35
- showCloseButton={showCloseButton}
36
- swipeDirection={swipeDirection}
37
- showProgressBar={showProgressBar}
38
- >
39
- {children}
40
- </ToastProvider>
41
- );
42
- };
@@ -1,184 +0,0 @@
1
- 'use client';
2
-
3
- import React, { useEffect, useState } from 'react';
4
- import { ToastProps } from '../types';
5
- import { useToastContext } from '../context/ToastContext';
6
- import { DEFAULT_DURATION } from '../utils/constants';
7
- import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
8
- import { motion, AnimatePresence } from 'framer-motion';
9
- import ToastProgressBar from '../utils/ToastProgressBar';
10
-
11
- interface ToastComponentProps extends ToastProps {
12
- isExpanded: boolean;
13
- isStacked: boolean;
14
- showCloseButton?: boolean;
15
- showProgressBar?: boolean;
16
- }
17
-
18
- export const Toast: React.FC<ToastComponentProps> = ({
19
- id,
20
- content,
21
- type,
22
- duration = DEFAULT_DURATION,
23
- icon,
24
- actions,
25
- input,
26
- onClose,
27
- progress,
28
- customStyles,
29
- className = '',
30
- isExpanded,
31
- isStacked,
32
- showCloseButton,
33
- showProgressBar,
34
- }) => {
35
- const { removeToast, updateToast } = useToastContext();
36
- const [inputValue, setInputValue] = useState('');
37
- const [localProgress, setLocalProgress] = useState(progress || 100);
38
-
39
- useEffect(() => {
40
- if (typeof progress === 'undefined') {
41
- const timer = setInterval(() => {
42
- setLocalProgress((prev) => {
43
- const newProgress = prev - 100 / (duration / 1000);
44
- return newProgress > 0 ? newProgress : 0;
45
- });
46
- }, 1000);
47
-
48
- return () => clearInterval(timer);
49
- }
50
- }, [duration, progress]);
51
-
52
- useEffect(() => {
53
- if (localProgress === 0) {
54
- removeToast(id);
55
- }
56
- }, [localProgress, id, removeToast]);
57
-
58
- useEffect(() => {
59
- if (typeof progress !== 'undefined') {
60
- setLocalProgress(progress);
61
- }
62
- }, [progress]);
63
-
64
- const getIcon = () => {
65
- if (icon) return icon;
66
- switch (type) {
67
- case 'success':
68
- return <CheckCircle className="vyrn-toast-icon text-green-500" />;
69
- case 'error':
70
- return <AlertCircle className="vyrn-toast-icon text-red-500" />;
71
- case 'info':
72
- return <Info className="vyrn-toast-icon text-blue-500" />;
73
- case 'warning':
74
- return <AlertTriangle className="vyrn-toast-icon text-yellow-500" />;
75
- default:
76
- return null;
77
- }
78
- };
79
-
80
- const handleClose = () => {
81
- onClose?.();
82
- removeToast(id);
83
- };
84
-
85
- const handleInputSubmit = (e: React.FormEvent) => {
86
- e.preventDefault();
87
- input?.onSubmit(inputValue);
88
- setInputValue('');
89
- };
90
-
91
- return (
92
- <motion.div
93
- className={`vyrn-toast ${className} ${isStacked ? 'vyrn-toast-stacked' : ''} ${
94
- type ? `vyrn-toast-${type}` : ''
95
- }`}
96
- style={{
97
- ...customStyles,
98
- height: isExpanded ? 'auto' : isStacked ? '60px' : 'auto',
99
- overflow: 'hidden',
100
- }}
101
- initial={{ opacity: 0, y: 50, scale: 0.3 }}
102
- animate={{ opacity: 1, y: 0, scale: 1 }}
103
- exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
104
- transition={{ type: 'spring', stiffness: 500, damping: 30 }}
105
- >
106
- <div className="vyrn-toast-content">
107
- {getIcon()}
108
- <div className="vyrn-toast-message">{content}</div>
109
- </div>
110
- <AnimatePresence>
111
- {isExpanded && (
112
- <motion.div
113
- initial={{ opacity: 0, height: 0 }}
114
- animate={{ opacity: 1, height: 'auto' }}
115
- exit={{ opacity: 0, height: 0 }}
116
- transition={{ duration: 0.3 }}
117
- >
118
- {actions && (
119
- <div className="vyrn-toast-actions">
120
- {actions.map((action, index) => (
121
- <button
122
- key={index}
123
- onClick={(e) => {
124
- e.stopPropagation();
125
- action.onClick();
126
- }}
127
- className={`vyrn-toast-action vyrn-toast-action-${action.style || 'default'} ${
128
- action.className || ''
129
- }`}
130
- >
131
- {action.label}
132
- </button>
133
- ))}
134
- </div>
135
- )}
136
- {input && (
137
- <form onSubmit={handleInputSubmit} className="vyrn-toast-input-form">
138
- <input
139
- type="text"
140
- value={inputValue}
141
- onChange={(e) => setInputValue(e.target.value)}
142
- placeholder={input.placeholder}
143
- className={`vyrn-toast-input ${input.className || ''}`}
144
- onClick={(e) => e.stopPropagation()}
145
- />
146
- <button
147
- type="submit"
148
- className={`vyrn-toast-input-submit ${input.submitClassName || ''}`}
149
- onClick={(e) => e.stopPropagation()}
150
- >
151
- Submit
152
- </button>
153
- </form>
154
- )}
155
- </motion.div>
156
- )}
157
- </AnimatePresence>
158
- {showCloseButton && (
159
- <button
160
- className="vyrn-toast-close"
161
- onClick={(e) => {
162
- e.stopPropagation();
163
- handleClose();
164
- }}
165
- aria-label="Close"
166
- >
167
- <X size={18} />
168
- </button>
169
- )}
170
- {showProgressBar && (
171
- <ToastProgressBar
172
- progress={localProgress}
173
- type={type as 'success' | 'error' | 'warning' | 'info' | 'default'}
174
- />
175
- )}
176
- {/* <motion.div
177
- className="vyrn-toast-progress"
178
- initial={{ width: '100%' }}
179
- animate={{ width: `${localProgress}%` }}
180
- transition={{ duration: 0.5 }}
181
- /> */}
182
- </motion.div>
183
- );
184
- };
@@ -1,132 +0,0 @@
1
- import React, { useState, useRef } from 'react';
2
- import { Toast } from './Toast';
3
- import { ToastProps, ToastPosition, ToastLayout } from '../types';
4
- import { AnimatePresence, motion } from 'framer-motion';
5
-
6
- interface ToastContainerProps {
7
- toasts: ToastProps[];
8
- position: ToastPosition;
9
- layout: ToastLayout;
10
- className?: string;
11
- showCloseButton?: boolean;
12
- swipeDirection?: 'left' | 'right' | 'up' | 'down';
13
- showProgressBar?: boolean;
14
- }
15
-
16
- export const ToastContainer: React.FC<ToastContainerProps> = ({
17
- toasts,
18
- position,
19
- layout,
20
- className = '',
21
- showCloseButton = true,
22
- swipeDirection = 'right',
23
- showProgressBar = true,
24
- }) => {
25
- const [isHovered, setIsHovered] = useState(false);
26
- const containerRef = useRef<HTMLDivElement>(null);
27
- const EXPANDED_OFFSET = 80;
28
- const STACK_OFFSET = 3;
29
- const NORMAL_OFFSET = 15; // Reduced from 80 to 45 for tighter spacing
30
-
31
- const getPositionStyles = () => {
32
- const styles: React.CSSProperties = { position: 'fixed', zIndex: 9999 };
33
- if (position.includes('top')) styles.top = '1rem';
34
- if (position.includes('bottom')) styles.bottom = '3rem';
35
- if (position.includes('left')) styles.left = '1rem';
36
- if (position.includes('right')) styles.right = '1rem';
37
- if (position.includes('center')) {
38
- styles.left = '50%';
39
- styles.transform = 'translateX(-50%)';
40
- }
41
- return styles;
42
- };
43
-
44
- const getSwipeAnimation = () => {
45
- const distance = 100;
46
- switch (swipeDirection) {
47
- case 'left':
48
- return { x: -distance, opacity: 0 };
49
- case 'right':
50
- return { x: distance, opacity: 0 };
51
- case 'up':
52
- return { y: -distance, opacity: 0 };
53
- case 'down':
54
- return { y: distance, opacity: 0 };
55
- default:
56
- return { x: distance, opacity: 0 };
57
- }
58
- };
59
-
60
- const getOffset = (index: number) => {
61
- if (layout === 'normal') {
62
- // Reduced offset for normal layout
63
- return position.startsWith('top')
64
- ? index * (isHovered ? EXPANDED_OFFSET : NORMAL_OFFSET)
65
- : -(index * (isHovered ? EXPANDED_OFFSET : NORMAL_OFFSET));
66
- }
67
-
68
- if (layout === 'stack') {
69
- return isHovered ? index * EXPANDED_OFFSET : index * STACK_OFFSET;
70
- }
71
-
72
- return 0;
73
- };
74
-
75
- // Reverse toasts array for proper stacking order
76
- const reversedToasts = [...toasts].reverse();
77
-
78
- return (
79
- <div
80
- className={`vyrn-toast-container ${className}`}
81
- style={getPositionStyles()}
82
- ref={containerRef}
83
- onMouseEnter={() => setIsHovered(true)}
84
- onMouseLeave={() => setIsHovered(false)}
85
- >
86
- <AnimatePresence mode="sync">
87
- {reversedToasts.map((toast, index) => (
88
- <motion.div
89
- key={toast.id}
90
- layout
91
- initial={{ opacity: 0, y: position.startsWith('top') ? -20 : 20, scale: 0.9 }}
92
- animate={{
93
- opacity: 1,
94
- y: position.startsWith('top') ? getOffset(index) : -getOffset(index),
95
- scale: isHovered ? 1.02 : 1,
96
- zIndex: layout === 'stack' ? 9999 - index : 9999,
97
- transition: {
98
- type: 'spring',
99
- stiffness: 500,
100
- damping: 30,
101
- },
102
- }}
103
- exit={getSwipeAnimation()}
104
- drag={swipeDirection === 'left' || swipeDirection === 'right' ? 'x' : 'y'}
105
- dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
106
- dragElastic={0.9}
107
- onDragEnd={(_, info) => {
108
- const threshold = 100;
109
- if (Math.abs(info.offset.x) > threshold || Math.abs(info.offset.y) > threshold) {
110
- toast.onClose?.();
111
- }
112
- }}
113
- style={{
114
- position: layout === 'normal' ? 'relative' : 'absolute',
115
- width: '100%',
116
- transformOrigin: position.startsWith('top') ? 'top' : 'bottom',
117
- marginBottom: layout === 'normal' ? '0.25rem' : 0, // Reduced margin to 0.25rem
118
- }}
119
- >
120
- <Toast
121
- {...toast}
122
- isExpanded={layout !== 'stack' || isHovered}
123
- isStacked={layout === 'stack' && !isHovered}
124
- showCloseButton={toast.showCloseButton ?? showCloseButton}
125
- showProgressBar={toast.showProgressBar ?? showProgressBar}
126
- />
127
- </motion.div>
128
- ))}
129
- </AnimatePresence>
130
- </div>
131
- );
132
- };
@@ -1,105 +0,0 @@
1
- 'use client';
2
-
3
- import React, { useState, useCallback, useEffect, useMemo } from 'react';
4
- import { createPortal } from 'react-dom';
5
- import { ToastContext } from '../context/ToastContext';
6
- import { ToastContainer } from './ToastContainer';
7
- import { ToastProps, ToastProviderProps, ToastPosition, ToastLayout } from '../types';
8
- import { MAX_TOASTS } from '../utils/constants';
9
- import '../styles/toast.css';
10
-
11
- export const ToastProvider: React.FC<ToastProviderProps> = ({
12
- children,
13
- defaultPosition = 'top-right',
14
- defaultLayout = 'normal',
15
- maxToasts = MAX_TOASTS,
16
- containerClassName = '',
17
- showCloseButton = true,
18
- swipeDirection = 'right',
19
- showProgressBar = true,
20
- }) => {
21
- const [toasts, setToasts] = useState<ToastProps[]>([]);
22
- const [position, setPosition] = useState<ToastPosition>(defaultPosition);
23
- const [layout, setLayout] = useState<ToastLayout>(defaultLayout);
24
-
25
- const addToast = useCallback(
26
- (toast: Omit<ToastProps, 'id'>) => {
27
- const id = Math.random().toString(36).substr(2, 9);
28
- setToasts((prevToasts) => {
29
- const newToasts = [...prevToasts, { ...toast, id }];
30
- return newToasts.slice(-maxToasts);
31
- });
32
- if (toast.soundEffect) {
33
- new Audio(toast.soundEffect).play().catch((e) => console.error('Error playing sound:', e));
34
- }
35
- return id;
36
- },
37
- [maxToasts],
38
- );
39
-
40
- const removeToast = useCallback((id: string) => {
41
- setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
42
- }, []);
43
-
44
- const updateToast = useCallback((id: string, updates: Partial<Omit<ToastProps, 'id'>>) => {
45
- setToasts((prevToasts) =>
46
- prevToasts.map((toast) => (toast.id === id ? { ...toast, ...updates } : toast)),
47
- );
48
- }, []);
49
-
50
- const clearAllToasts = useCallback(() => {
51
- setToasts([]);
52
- }, []);
53
-
54
- const contextValue = useMemo(
55
- () => ({
56
- addToast,
57
- removeToast,
58
- updateToast,
59
- clearAllToasts,
60
- position,
61
- setPosition,
62
- layout,
63
- setLayout,
64
- showCloseButton,
65
- swipeDirection,
66
- showProgressBar,
67
- }),
68
- [
69
- addToast,
70
- removeToast,
71
- updateToast,
72
- clearAllToasts,
73
- position,
74
- layout,
75
- showCloseButton,
76
- swipeDirection,
77
- showProgressBar,
78
- ],
79
- );
80
-
81
- const [isMounted, setIsMounted] = useState(false);
82
-
83
- useEffect(() => {
84
- setIsMounted(true);
85
- }, []);
86
-
87
- return (
88
- <ToastContext.Provider value={contextValue}>
89
- {children}
90
- {isMounted &&
91
- createPortal(
92
- <ToastContainer
93
- toasts={toasts}
94
- position={position}
95
- layout={layout}
96
- className={containerClassName}
97
- showCloseButton={showCloseButton}
98
- swipeDirection={swipeDirection}
99
- showProgressBar={showProgressBar}
100
- />,
101
- document.body,
102
- )}
103
- </ToastContext.Provider>
104
- );
105
- };
@@ -1,15 +0,0 @@
1
- 'use client';
2
-
3
- import React from 'react';
4
- import { ToastContextValue } from '../types';
5
-
6
- export const ToastContext = React.createContext<ToastContextValue | undefined>(undefined);
7
-
8
- export const useToastContext = () => {
9
- const context = React.useContext(ToastContext);
10
- if (typeof context === 'undefined') {
11
- throw new Error('useToastContext must be used within a ToastProvider');
12
- }
13
- return context;
14
- };
15
-
@@ -1,90 +0,0 @@
1
- 'use client';
2
-
3
- import { useCallback } from 'react';
4
- import { useToastContext } from '../context/ToastContext';
5
- import { ToastType, ToastProps, ToastPosition, ToastLayout } from '../types';
6
-
7
- export const useToast = () => {
8
- const {
9
- addToast,
10
- removeToast,
11
- updateToast,
12
- clearAllToasts,
13
- position,
14
- setPosition,
15
- layout,
16
- setLayout,
17
- } = useToastContext();
18
-
19
- const toast = useCallback(
20
- (options: Omit<ToastProps, 'id'> & { className?: string }) => {
21
- return addToast(options);
22
- },
23
- [addToast],
24
- );
25
-
26
- const update = useCallback(
27
- (id: string, updates: Partial<Omit<ToastProps, 'id'>>) => {
28
- updateToast(id, updates);
29
- },
30
- [updateToast],
31
- );
32
-
33
- const dismiss = useCallback(
34
- (id: string) => {
35
- removeToast(id);
36
- },
37
- [removeToast],
38
- );
39
-
40
- const clearAll = useCallback(() => {
41
- clearAllToasts();
42
- }, [clearAllToasts]);
43
-
44
- const changePosition = useCallback(
45
- (newPosition: ToastPosition) => {
46
- setPosition(newPosition);
47
- },
48
- [setPosition],
49
- );
50
-
51
- const changeLayout = useCallback(
52
- (newLayout: ToastLayout) => {
53
- setLayout(newLayout);
54
- },
55
- [setLayout],
56
- );
57
-
58
- return {
59
- toast,
60
- update,
61
- dismiss,
62
- clearAll,
63
- changePosition,
64
- changeLayout,
65
- position,
66
- layout,
67
- default: (
68
- content: React.ReactNode,
69
- options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
70
- ) => toast({ content, type: 'default', ...options }),
71
- info: (
72
- content: React.ReactNode,
73
- options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
74
- ) => toast({ content, type: 'info', ...options }),
75
- success: (
76
- content: React.ReactNode,
77
- options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
78
- ) => toast({ content, type: 'success', ...options }),
79
- warning: (
80
- content: React.ReactNode,
81
- options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
82
- ) => toast({ content, type: 'warning', ...options }),
83
- error: (
84
- content: React.ReactNode,
85
- options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
86
- ) => toast({ content, type: 'error', ...options }),
87
- custom: (content: React.ReactNode, options?: Partial<Omit<ToastProps, 'id' | 'content'>>) =>
88
- toast({ content, type: 'custom', ...options }),
89
- };
90
- };
package/src/index.ts DELETED
@@ -1,9 +0,0 @@
1
- 'use client';
2
-
3
- export { ToastProvider } from './components/ToastProvider';
4
- export { useToast } from './hooks/useToast';
5
- export type { ToastProps, ToastType, ToastPosition } from './types';
6
-
7
- // Special export for Next.js
8
- export { ClientToastProvider } from './components/ClientToastProvider';
9
-
@@ -1,238 +0,0 @@
1
- .vyrn-toast-container {
2
- position: fixed;
3
- z-index: 9999;
4
- display: flex;
5
- flex-direction: column;
6
- max-width: 356px;
7
- width: calc(100% - 24px);
8
- offset: 32px;
9
- pointer-events: none;
10
- padding: 12px;
11
- bottom: 0;
12
- right: 0;
13
- gap: 8px;
14
- }
15
-
16
- .vyrn-toast {
17
- display: flex;
18
- overflow: hidden;
19
- position: relative;
20
- pointer-events: auto;
21
- border-radius: 6px;
22
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
23
- background-color: #ffffff;
24
- width: 100%;
25
- transition: all 0.2s ease;
26
- }
27
-
28
- .vyrn-toast-stacked {
29
- height: 40px;
30
- cursor: pointer;
31
- transform-origin: top;
32
- margin-bottom: 0;
33
- }
34
-
35
- .vyrn-toast-content {
36
- display: flex;
37
- align-items: center;
38
- padding: 20px 20px;
39
- min-height: 48px;
40
- width: 100%;
41
- }
42
-
43
- .vyrn-toast-icon {
44
- flex-shrink: 0;
45
- margin-right: 8px;
46
- width: 16px;
47
- height: 16px;
48
- }
49
-
50
- .vyrn-toast-message {
51
- flex-grow: 1;
52
- font-size: 13px;
53
- line-height: 1.5;
54
- font-weight: 400;
55
- color: #000000;
56
- margin: 0;
57
- padding: 0;
58
- }
59
-
60
- .vyrn-toast-actions {
61
- display: flex;
62
- flex-wrap: wrap;
63
- gap: 8px;
64
- padding: 0 16px 12px;
65
- }
66
-
67
- .vyrn-toast-action {
68
- cursor: pointer;
69
- padding: 6px 12px;
70
- border-radius: 4px;
71
- font-size: 13px;
72
- font-weight: 500;
73
- transition: all 0.2s ease;
74
- }
75
-
76
- .vyrn-toast-action-default {
77
- background-color: #f1f3f5;
78
- color: #495057;
79
- }
80
-
81
- .vyrn-toast-action-primary {
82
- background-color: #339af0;
83
- color: #ffffff;
84
- }
85
-
86
- .vyrn-toast-action-secondary {
87
- background-color: #868e96;
88
- color: #ffffff;
89
- }
90
-
91
- .vyrn-toast-action-danger {
92
- background-color: #fa5252;
93
- color: #ffffff;
94
- }
95
-
96
- .vyrn-toast-input-form {
97
- display: flex;
98
- padding: 0 16px 12px;
99
- }
100
-
101
- .vyrn-toast-input {
102
- flex-grow: 1;
103
- padding: 8px 12px;
104
- border: 1px solid #e9ecef;
105
- border-radius: 4px;
106
- font-size: 13px;
107
- }
108
-
109
- .vyrn-toast-input-submit {
110
- cursor: pointer;
111
- padding: 8px 16px;
112
- background-color: #339af0;
113
- color: #ffffff;
114
- border: none;
115
- border-radius: 4px;
116
- font-size: 13px;
117
- font-weight: 500;
118
- margin-left: 8px;
119
- }
120
-
121
- .vyrn-toast-close {
122
- position: absolute;
123
- top: 50%;
124
- right: 12px;
125
- transform: translateY(-50%);
126
- background: none;
127
- border: none;
128
- cursor: pointer;
129
- padding: 0;
130
- display: flex;
131
- align-items: center;
132
- justify-content: center;
133
- color: #868e96;
134
- transition: color 0.2s ease;
135
- }
136
-
137
- .vyrn-toast-close:hover {
138
- color: #495057;
139
- }
140
-
141
- .vyrn-toast-progress {
142
- position: absolute;
143
- bottom: 0;
144
- left: 0;
145
- height: 2px;
146
- background-color: rgba(51, 154, 240, 0.5);
147
- }
148
-
149
- /* Toast types */
150
- /* .vyrn-toast-success {
151
- border-left: 3px solid #51cf66;
152
- }
153
-
154
- .vyrn-toast-error {
155
- border-left: 3px solid #fa5252;
156
- }
157
-
158
- .vyrn-toast-info {
159
- border-left: 3px solid #339af0;
160
- } */
161
-
162
- /* .vyrn-toast-warning {
163
- border-left: 3px solid #fcc419;
164
- } */
165
-
166
- /* Dark mode */
167
- .dark .vyrn-toast {
168
- background-color: #222222;
169
- }
170
-
171
- .dark .vyrn-toast-message {
172
- color: #e9ecef;
173
- }
174
-
175
- .dark .vyrn-toast-action-default {
176
- background-color: #343a40;
177
- color: #f1f3f5;
178
- }
179
-
180
- .dark .vyrn-toast-input {
181
- background-color: #343a40;
182
- border-color: #495057;
183
- color: #e9ecef;
184
- }
185
-
186
- .dark .vyrn-toast-close {
187
- color: #adb5bd;
188
- }
189
-
190
- .dark .vyrn-toast-close:hover {
191
- color: #e9ecef;
192
- }
193
-
194
- /* Animations */
195
- @keyframes vyrn-toast-enter {
196
- from {
197
- transform: translateY(100%);
198
- opacity: 0;
199
- }
200
- to {
201
- transform: translateY(0);
202
- opacity: 1;
203
- }
204
- }
205
-
206
- @keyframes vyrn-toast-exit {
207
- from {
208
- transform: translateY(0);
209
- opacity: 1;
210
- }
211
- to {
212
- transform: translateY(100%);
213
- opacity: 0;
214
- }
215
- }
216
-
217
- .vyrn-toast-enter {
218
- animation: vyrn-toast-enter 0.3s ease-out;
219
- }
220
-
221
- .vyrn-toast-exit {
222
- animation: vyrn-toast-exit 0.3s ease-in;
223
- }
224
-
225
- /* Responsive styles */
226
- @media (max-width: 640px) {
227
- .vyrn-toast-container {
228
- width: calc(100% - 32px);
229
- padding: 8px;
230
- bottom: 0;
231
- right: 0;
232
- left: 0;
233
- }
234
-
235
- .vyrn-toast {
236
- border-radius: 6px 6px 0 0;
237
- }
238
- }
@@ -1,83 +0,0 @@
1
- import { ReactNode } from 'react';
2
-
3
- export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error' | 'custom';
4
-
5
- export type ToastPosition =
6
- | 'top-right'
7
- | 'top-left'
8
- | 'bottom-right'
9
- | 'bottom-left'
10
- | 'top-center'
11
- | 'bottom-center';
12
-
13
- export type ToastLayout = 'stack' | 'normal';
14
-
15
- export interface ToastAction {
16
- label: string;
17
- onClick: () => void;
18
- style?: 'default' | 'primary' | 'secondary' | 'danger';
19
- className?: string;
20
- }
21
-
22
- export interface ToastInput {
23
- placeholder: string;
24
- onSubmit: (value: string) => void;
25
- submitClassName?: string;
26
- className?: string;
27
- }
28
-
29
- export interface ToastProps {
30
- id: string;
31
- content: ReactNode;
32
- type: ToastType;
33
- duration?: number;
34
- icon?: ReactNode;
35
- actions?: ToastAction[];
36
- input?: ToastInput;
37
- onClose?: () => void;
38
- progress?: number;
39
- theme?: 'light' | 'dark' | 'custom';
40
- customStyles?: React.CSSProperties;
41
- soundEffect?: string;
42
- animation?: 'slide' | 'fade' | 'bounce' | 'zoom';
43
- className?: string;
44
- showCloseButton?: boolean;
45
- swipeClose?: boolean;
46
- showProgressBar?: boolean;
47
- }
48
-
49
- export interface ToastContextValue {
50
- addToast: (toast: Omit<ToastProps, 'id'>) => string;
51
- removeToast: (id: string) => void;
52
- updateToast: (id: string, updates: Partial<Omit<ToastProps, 'id'>>) => void;
53
- clearAllToasts: () => void;
54
- position: ToastPosition;
55
- setPosition: (position: ToastPosition) => void;
56
- layout: ToastLayout;
57
- setLayout: (layout: ToastLayout) => void;
58
- }
59
-
60
- export interface ToastProviderProps {
61
- children: React.ReactNode;
62
- defaultPosition?: ToastPosition;
63
- defaultLayout?: ToastLayout;
64
- maxToasts?: number;
65
- containerClassName?: string;
66
- showCloseButton?: boolean;
67
- swipeDirection?: SwipeDirection;
68
- showProgressBar?: boolean;
69
- }
70
-
71
- export interface ToastTheme {
72
- background: string;
73
- text: string;
74
- border: string;
75
- progressBar: string;
76
- }
77
-
78
- export interface ToastGroupOptions {
79
- groupId: string;
80
- groupTitle: string;
81
- }
82
-
83
- export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
@@ -1,178 +0,0 @@
1
- import React from 'react';
2
- import { motion } from 'framer-motion';
3
-
4
- interface ToastProgressBarProps {
5
- progress: number;
6
- type?: 'success' | 'error' | 'warning' | 'info' | 'default';
7
- }
8
-
9
- const ToastProgressBar: React.FC<ToastProgressBarProps> = ({ progress, type = 'default' }) => {
10
- // Dynamic color mapping based on toast type
11
- const getColors = () => {
12
- const colors = {
13
- success: {
14
- base: '#10B981',
15
- highlight: '#34D399',
16
- glow: 'rgba(16, 185, 129, 0.4)'
17
- },
18
- error: {
19
- base: '#EF4444',
20
- highlight: '#F87171',
21
- glow: 'rgba(239, 68, 68, 0.4)'
22
- },
23
- warning: {
24
- base: '#F59E0B',
25
- highlight: '#FBBF24',
26
- glow: 'rgba(245, 158, 11, 0.4)'
27
- },
28
- info: {
29
- base: '#3B82F6',
30
- highlight: '#60A5FA',
31
- glow: 'rgba(59, 130, 246, 0.4)'
32
- },
33
- default: {
34
- base: '#6366F1',
35
- highlight: '#818CF8',
36
- glow: 'rgba(99, 102, 241, 0.4)'
37
- }
38
- };
39
- return colors[type] || colors.default;
40
- };
41
-
42
- const colors = getColors();
43
-
44
- return (
45
- <motion.div
46
- style={{
47
- position: 'absolute',
48
- bottom: 0,
49
- left: 0,
50
- right: 0,
51
- height: '2px',
52
- overflow: 'hidden',
53
- background: 'rgba(255, 255, 255, 0.1)',
54
- backdropFilter: 'blur(8px)',
55
- }}
56
- >
57
- {/* Backdrop blur line */}
58
- <motion.div
59
- style={{
60
- position: 'absolute',
61
- bottom: 0,
62
- left: 0,
63
- width: '100%',
64
- height: '100%',
65
- background: 'rgba(255, 255, 255, 0.05)',
66
- backdropFilter: 'blur(2px)',
67
- }}
68
- />
69
-
70
- {/* Main progress line */}
71
- <motion.div
72
- style={{
73
- position: 'absolute',
74
- bottom: 0,
75
- left: 0,
76
- height: '100%',
77
- background: `linear-gradient(90deg,
78
- ${colors.base},
79
- ${colors.highlight},
80
- ${colors.base}
81
- )`,
82
- backgroundSize: '200% 100%',
83
- boxShadow: `0 0 10px ${colors.glow}`,
84
- }}
85
- initial={{ width: '100%', backgroundPosition: '0% 0%' }}
86
- animate={{
87
- width: `${progress}%`,
88
- backgroundPosition: ['0% 0%', '100% 0%'],
89
- }}
90
- transition={{
91
- width: {
92
- duration: 0.4,
93
- ease: [0.4, 0, 0.2, 1],
94
- },
95
- backgroundPosition: {
96
- duration: 2,
97
- repeat: Infinity,
98
- ease: "linear"
99
- }
100
- }}
101
- >
102
- {/* Ultra-modern scanning effect */}
103
- <motion.div
104
- style={{
105
- position: 'absolute',
106
- top: 0,
107
- left: 0,
108
- width: '100%',
109
- height: '100%',
110
- background: `linear-gradient(90deg,
111
- transparent 0%,
112
- ${colors.highlight}40 50%,
113
- transparent 100%
114
- )`,
115
- transform: 'translateX(-50%)',
116
- }}
117
- animate={{
118
- x: ['0%', '200%'],
119
- }}
120
- transition={{
121
- duration: 1.5,
122
- repeat: Infinity,
123
- ease: "linear",
124
- }}
125
- />
126
-
127
- {/* Micro dots effect */}
128
- <motion.div
129
- style={{
130
- position: 'absolute',
131
- top: 0,
132
- right: 0,
133
- width: '2px',
134
- height: '100%',
135
- background: colors.highlight,
136
- filter: 'blur(0.5px)',
137
- }}
138
- animate={{
139
- opacity: [1, 0.5, 1],
140
- scale: [1, 1.2, 1],
141
- }}
142
- transition={{
143
- duration: 1,
144
- repeat: Infinity,
145
- ease: "easeInOut",
146
- }}
147
- />
148
- </motion.div>
149
-
150
- {/* Ambient light effect */}
151
- <motion.div
152
- style={{
153
- position: 'absolute',
154
- bottom: 0,
155
- left: 0,
156
- width: `${progress}%`,
157
- height: '100%',
158
- background: `linear-gradient(90deg,
159
- transparent,
160
- ${colors.glow},
161
- transparent
162
- )`,
163
- filter: 'blur(4px)',
164
- }}
165
- animate={{
166
- opacity: [0.3, 0.6, 0.3],
167
- }}
168
- transition={{
169
- duration: 2,
170
- repeat: Infinity,
171
- ease: "easeInOut",
172
- }}
173
- />
174
- </motion.div>
175
- );
176
- };
177
-
178
- export default ToastProgressBar;
@@ -1,14 +0,0 @@
1
- export const fadeIn = `
2
- @keyframes vyrnFadeIn {
3
- from { opacity: 0; transform: translateY(20px); }
4
- to { opacity: 1; transform: translateY(0); }
5
- }
6
- `;
7
-
8
- export const fadeOut = `
9
- @keyframes vyrnFadeOut {
10
- from { opacity: 1; transform: translateY(0); }
11
- to { opacity: 0; transform: translateY(-20px); }
12
- }
13
- `;
14
-
@@ -1,4 +0,0 @@
1
- export const TOAST_TYPES = ['info', 'success', 'warning', 'error'] as const;
2
- export const DEFAULT_DURATION = 3000;
3
- export const MAX_TOASTS = 5;
4
-