vyrn 3.0.7 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -0
- package/dist/components/ClientToastProvider.d.ts +1 -0
- package/dist/components/ToastContainer.d.ts +1 -0
- package/dist/hooks/useToast.d.ts +15 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +33 -4
- package/package.json +17 -10
- package/.eslintrc.js +0 -25
- package/.prettierrc +0 -8
- package/dist/components/NextToastProvider.d.ts +0 -2
- package/dist/components/ToastGroup.d.ts +0 -7
- package/jest.config.js +0 -9
- package/tests/Toast.test.tsx +0 -32
- package/tsconfig.json +0 -20
package/README.md
CHANGED
|
@@ -11,10 +11,48 @@ Vyrn is a modern, customizable toast library for React and Next.js applications.
|
|
|
11
11
|
- ⚡ Lightweight
|
|
12
12
|
- 🔄 Smooth animations
|
|
13
13
|
|
|
14
|
+
## Compatibility
|
|
15
|
+
|
|
16
|
+
Vyrn is compatible with:
|
|
17
|
+
- **React**: 17.x, 18.x, and 19.x
|
|
18
|
+
- **Next.js**: 14.x, 15.x, and 16.x (with compatible React versions)
|
|
19
|
+
- Next.js 14 requires React 18.2+
|
|
20
|
+
- Next.js 15 supports React 18 and 19
|
|
21
|
+
- Next.js 16 supports React 19
|
|
22
|
+
|
|
14
23
|
## Installation
|
|
15
24
|
|
|
16
25
|
```bash
|
|
17
26
|
npm install vyrn
|
|
18
27
|
# or
|
|
19
28
|
yarn add vyrn
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Local Testing
|
|
32
|
+
|
|
33
|
+
To test this library locally before publishing, see [TESTING.md](./TESTING.md) for detailed instructions.
|
|
34
|
+
|
|
35
|
+
Quick start:
|
|
36
|
+
```bash
|
|
37
|
+
# Build the library
|
|
38
|
+
npm run build
|
|
39
|
+
|
|
40
|
+
# Create symlink
|
|
41
|
+
npm link
|
|
42
|
+
|
|
43
|
+
# In your test project
|
|
44
|
+
npm link vyrn
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Or use the included example app:
|
|
48
|
+
```bash
|
|
49
|
+
# Build the library
|
|
50
|
+
npm run build
|
|
51
|
+
|
|
52
|
+
# Setup example app
|
|
53
|
+
cd example
|
|
54
|
+
npm install
|
|
55
|
+
npm link vyrn
|
|
56
|
+
npm run dev
|
|
57
|
+
```
|
|
20
58
|
|
package/dist/hooks/useToast.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { ToastProps, ToastPosition, ToastLayout } from '../types';
|
|
2
3
|
export declare const useToast: () => {
|
|
3
4
|
toast: (options: Omit<ToastProps, 'id'> & {
|
|
@@ -8,6 +9,20 @@ export declare const useToast: () => {
|
|
|
8
9
|
clearAll: () => void;
|
|
9
10
|
changePosition: (newPosition: ToastPosition) => void;
|
|
10
11
|
changeLayout: (newLayout: ToastLayout) => void;
|
|
12
|
+
promise: <T>(promise: Promise<T> | (() => Promise<T>), options: {
|
|
13
|
+
loading?: React.ReactNode;
|
|
14
|
+
success?: React.ReactNode | ((data: T) => React.ReactNode);
|
|
15
|
+
error?: React.ReactNode | ((error: any) => React.ReactNode);
|
|
16
|
+
description?: React.ReactNode;
|
|
17
|
+
duration?: number | undefined;
|
|
18
|
+
onSuccess?: ((data: T) => void) | undefined;
|
|
19
|
+
onError?: ((error: any) => void) | undefined;
|
|
20
|
+
cancel?: {
|
|
21
|
+
label: string;
|
|
22
|
+
onClick?: (() => void) | undefined;
|
|
23
|
+
} | undefined;
|
|
24
|
+
}) => string;
|
|
25
|
+
loading: (content: React.ReactNode, options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content' | 'status'>>) => string;
|
|
11
26
|
position: ToastPosition;
|
|
12
27
|
layout: ToastLayout;
|
|
13
28
|
default: (content: React.ReactNode, options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>) => string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ToastProvider } from './components/ToastProvider';
|
|
2
2
|
export { useToast } from './hooks/useToast';
|
|
3
|
-
export type { ToastProps, ToastType, ToastPosition } from './types';
|
|
3
|
+
export type { ToastProps, ToastType, ToastPosition, ToastLayout, ToastAction, ToastInput, SwipeDirection, ToastProviderProps, ToastPriority, ToastStatus, } from './types';
|
|
4
4
|
export { ClientToastProvider } from './components/ClientToastProvider';
|
package/dist/index.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,{useState as o,useEffect as r,useRef as e,useCallback as n,useMemo as a}from"react";import{createPortal as s}from"react-dom";import{X as i,AlertTriangle as c,Info as l,AlertCircle as d,CheckCircle as u}from"lucide-react";import{motion as f,AnimatePresence as p}from"framer-motion";var v=function(){return v=Object.assign||function(t){for(var o,r=1,e=arguments.length;r<e;r++)for(var n in o=arguments[r])Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n]);return t},v.apply(this,arguments)};function y(t,o,r){if(r||2===arguments.length)for(var e,n=0,a=o.length;n<a;n++)!e&&n in o||(e||(e=Array.prototype.slice.call(o,0,n)),e[n]=o[n]);return t.concat(e||Array.prototype.slice.call(o))}"function"==typeof SuppressedError&&SuppressedError;var g=t.createContext(void 0),m=function(){var o=t.useContext(g);if(void 0===o)throw new Error("useToastContext must be used within a ToastProvider");return o},h=function(o){var r=o.progress,e=o.type,n=void 0===e?"default":e,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[n]||t.default}();return t.createElement(f.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"1.5px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},t.createElement(f.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),t.createElement(f.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(r,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.4,ease:[.4,0,.2,1]},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},t.createElement(f.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(f.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(f.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(r,"%"),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(e){var n=e.id,a=e.content,s=e.type,y=e.duration,g=void 0===y?3e3:y,b=e.icon,x=e.actions,w=e.input,k=e.onClose,E=e.progress,C=e.customStyles,B=e.className,N=void 0===B?"":B,P=e.isExpanded,T=e.isStacked,S=e.showCloseButton,F=e.showProgressBar,A=m(),z=A.removeToast;A.updateToast;var D=o(""),I=D[0],L=D[1],O=o(E||100),M=O[0],Y=O[1],W=m().color;r((function(){if(void 0===E){var t=setInterval((function(){Y((function(t){var o=t-100/(g/1e3);return o>0?o:0}))}),1e3);return function(){return clearInterval(t)}}}),[g,E]),r((function(){0===M&&z(n)}),[M,n,z]),r((function(){void 0!==E&&Y(E)}),[E]);return t.createElement(f.div,{className:"vyrn-toast ".concat(N," ").concat(T?"vyrn-toast-stacked":""," ").concat(W&&s?"vyrn-toast-".concat(s):""),style:v(v({},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(s){case"success":return t.createElement(u,{className:"vyrn-toast-icon w-5 h-5 "});case"error":return t.createElement(d,{className:"vyrn-toast-icon w-5 h-5"});case"info":return t.createElement(l,{className:"vyrn-toast-icon w-5 h-5"});case"warning":return t.createElement(c,{className:"vyrn-toast-icon w-5 h-5"});default:return null}}(),t.createElement("div",{className:"vyrn-toast-message"},a)),t.createElement(p,null,P&&t.createElement(f.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(o,r){return t.createElement("button",{key:r,onClick:function(t){t.stopPropagation(),o.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(o.style||"default"," ").concat(o.className||"")},o.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(n)},"aria-label":"Close"},t.createElement(i,{size:18})),F&&t.createElement(h,{progress:M,type:s}))},x=function(r){var n=r.toasts,a=r.position,s=r.layout,i=r.className,c=void 0===i?"":i,l=r.showCloseButton,d=void 0===l||l,u=r.swipeDirection,g=void 0===u?"right":u,m=r.showProgressBar,h=void 0===m||m;r.color;var x,w=o(!1),k=w[0],E=w[1],C=e(null),B=function(){var t=100;switch(g){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?a.startsWith("top")?t*(k?80:15):-t*(k?80:15):"stack"===s?k?80*t:18*t:0},P=y([],n,!0).reverse();return t.createElement("div",{className:"vyrn-toast-container ".concat(c),style:(x={position:"fixed",zIndex:9999},a.includes("top")&&(x.top="1rem"),a.includes("bottom")&&(x.bottom="3.5rem"),a.includes("left")&&(x.left="1rem"),a.includes("right")&&(x.right="1rem"),a.includes("center")&&(x.left="50%",x.transform="translateX(-50%)"),x),ref:C,onMouseEnter:function(){return E(!0)},onMouseLeave:function(){return E(!1)}},t.createElement(p,{mode:"sync"},P.map((function(o,r){var e,n;return t.createElement(f.div,{key:o.id,layout:!0,initial:{opacity:0,y:a.startsWith("top")?-20:20,scale:.9},animate:{opacity:1,y:a.startsWith("top")?N(r):-N(r),scale:k?1.02:1,zIndex:"stack"===s?9999-r:9999,transition:{type:"spring",stiffness:500,damping:30}},exit:B(),drag:"left"===g||"right"===g?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.9,onDragEnd:function(t,r){var e;(Math.abs(r.offset.x)>100||Math.abs(r.offset.y)>100)&&(null===(e=o.onClose)||void 0===e||e.call(o))},style:{position:"normal"===s?"relative":"absolute",width:"100%",transformOrigin:a.startsWith("top")?"top":"bottom",marginBottom:"normal"===s?"0.25rem":0}},t.createElement(b,v({},o,{isExpanded:"stack"!==s||k,isStacked:"stack"===s&&!k,showCloseButton:null!==(e=o.showCloseButton)&&void 0!==e?e:d,showProgressBar:null!==(n=o.showProgressBar)&&void 0!==n?n:h})))}))))};!function(t,o){void 0===o&&(o={});var r=o.insertAt;if(t&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}('.vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:8px;max-width:356px;offset:32px;padding:16px;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}.vyrn-toast{background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;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%}.dark .vyrn-toast{background-color:#000;border:1px solid #2d2d2d}.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:20px;margin-right:8px;width:20px}.vyrn-toast-message{color:inherit;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}.vyrn-toast-success{background-color:#e6fff7;border:1.5px solid #00b894}.vyrn-toast-error{background-color:#fff5f5;border:1.5px solid #e74c3c}.vyrn-toast-info{background-color:#f0f7ff;border:1.5px solid #3498db}.vyrn-toast-warning{background-color:#fffbeb;border:1.5px solid #f1c40f}.dark .vyrn-toast-success{background-color:#0c3830;border:1.5px solid #00d1a1}.dark .vyrn-toast-error{background-color:#2d1717;border:1.5px solid #ff6b6b}.dark .vyrn-toast-info{background-color:#15314a;border:1.5px solid #74b9ff}.dark .vyrn-toast-warning{background-color:#332b00;border:1.5px solid #ffd43b}.vyrn-toast-success .vyrn-toast-icon{color:#00b894}.vyrn-toast-error .vyrn-toast-icon{color:#e74c3c}.vyrn-toast-info .vyrn-toast-icon{color:#3498db}.vyrn-toast-warning .vyrn-toast-icon{color:#f1c40f}.dark .vyrn-toast-success .vyrn-toast-icon{color:#00d1a1}.dark .vyrn-toast-error .vyrn-toast-icon{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-icon{color:#74b9ff}.dark .vyrn-toast-warning .vyrn-toast-icon{color:#ffd43b}.vyrn-toast-success .vyrn-toast-message{color:#006c55}.vyrn-toast-error .vyrn-toast-message{color:#c0392b}.vyrn-toast-info .vyrn-toast-message{color:#2874a6}.vyrn-toast-warning .vyrn-toast-message{color:#b7950b}.dark .vyrn-toast-success .vyrn-toast-message{color:#9ffff0}.dark .vyrn-toast-error .vyrn-toast-message{color:#ffcece}.dark .vyrn-toast-info .vyrn-toast-message{color:#bae1ff}.dark .vyrn-toast-warning .vyrn-toast-message{color:#fff3bf}.vyrn-toast-success .vyrn-toast-close{color:#2b8a3e}.vyrn-toast-error .vyrn-toast-close{color:#c92a2a}.vyrn-toast-info .vyrn-toast-close{color:#1864ab}.vyrn-toast-warning .vyrn-toast-close{color:#e67700}.dark .vyrn-toast-success .vyrn-toast-close{color:#69db7c}.dark .vyrn-toast-error .vyrn-toast-close{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-close{color:#4dabf7}.dark .vyrn-toast-warning .vyrn-toast-close{color:#ffd43b}.vyrn-toast-close{color:#666}.vyrn-toast-close:hover{color:var(--hover-color,#495057)}.vyrn-toast-success .vyrn-toast-close:hover{color:#2f9e44}.vyrn-toast-error .vyrn-toast-close:hover{color:#e03131}.vyrn-toast-info .vyrn-toast-close:hover{color:#1c7ed6}.vyrn-toast-warning .vyrn-toast-close:hover{color:#f59f00}.dark .vyrn-toast-success .vyrn-toast-close:hover{color:#8ce99a}.dark .vyrn-toast-error .vyrn-toast-close:hover{color:#ff8787}.dark .vyrn-toast-info .vyrn-toast-close:hover{color:#74c0fc}.dark .vyrn-toast-warning .vyrn-toast-close:hover{color:#ffe066}.dark .vyrn-toast:not([class*=vyrn-toast-]){background-color:#000;border:1px solid #2d2d2d}.dark .vyrn-toast:not(.vyrn-toast-success):not(.vyrn-toast-error):not(.vyrn-toast-info):not(.vyrn-toast-warning):not([class*="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:12px;right:0;width:calc(100% - 32px)}}',{insertAt:"top"});var w=function(e){var i=e.children,c=e.defaultPosition,l=void 0===c?"top-right":c,d=e.defaultLayout,u=void 0===d?"normal":d,f=e.maxToasts,p=void 0===f?5:f,m=e.containerClassName,h=void 0===m?"":m,b=e.showCloseButton,w=void 0===b||b,k=e.swipeDirection,E=void 0===k?"right":k,C=e.showProgressBar,B=void 0===C||C,N=e.color,P=void 0===N||N,T=o([]),S=T[0],F=T[1],A=o(l),z=A[0],D=A[1],I=o(u),L=I[0],O=I[1],M=n((function(t){var o=Math.random().toString(36).substr(2,9);return F((function(r){return y(y([],r,!0),[v(v({},t),{id:o})],!1).slice(-p)})),t.soundEffect&&new Audio(t.soundEffect).play().catch((function(t){return console.error("Error playing sound:",t)})),o}),[p]),Y=n((function(t){F((function(o){return o.filter((function(o){return o.id!==t}))}))}),[]),W=n((function(t,o){F((function(r){return r.map((function(r){return r.id===t?v(v({},r),o):r}))}))}),[]),j=n((function(){F([])}),[]),X=a((function(){return{addToast:M,removeToast:Y,updateToast:W,clearAllToasts:j,position:z,setPosition:D,layout:L,setLayout:O,showCloseButton:w,swipeDirection:E,showProgressBar:B,color:P}}),[M,Y,W,j,z,L,w,E,B,P]),q=o(!1),G=q[0],H=q[1];return r((function(){H(!0)}),[]),t.createElement(g.Provider,{value:X},i,G&&s(t.createElement(x,{toasts:S,position:z,layout:L,className:h,showCloseButton:w,swipeDirection:E,showProgressBar:B,color:P}),document.body))},k=function(){var t=m(),o=t.addToast,r=t.removeToast,e=t.updateToast,a=t.clearAllToasts,s=t.position,i=t.setPosition,c=t.layout,l=t.setLayout,d=n((function(t){return o(t)}),[o]),u=n((function(t,o){e(t,o)}),[e]),f=n((function(t){r(t)}),[r]),p=n((function(){a()}),[a]),y=n((function(t){i(t)}),[i]),g=n((function(t){l(t)}),[l]);return{toast:d,update:u,dismiss:f,clearAll:p,changePosition:y,changeLayout:g,position:s,layout:c,default:function(t,o){return d(v({content:t,type:"default"},o))},info:function(t,o){return d(v({content:t,type:"info"},o))},success:function(t,o){return d(v({content:t,type:"success"},o))},warning:function(t,o){return d(v({content:t,type:"warning"},o))},error:function(t,o){return d(v({content:t,type:"error"},o))},custom:function(t,o){return d(v({content:t,type:"custom"},o))}}},E=function(o){var r=o.children,e=o.position,n=o.layout,a=void 0===n?"normal":n,s=o.maxToasts,i=o.containerClassName,c=o.showCloseButton,l=void 0===c||c,d=o.swipeDirection,u=void 0===d?"right":d,f=o.showProgressBar,p=void 0===f||f,v=o.color,y=void 0===v||v;return t.createElement(w,{defaultPosition:e,defaultLayout:a,maxToasts:s,containerClassName:i,showCloseButton:l,swipeDirection:u,showProgressBar:p,color:y},r)};export{E as ClientToastProvider,w as ToastProvider,k as useToast};
|
|
1
|
+
import t,{useState as o,useEffect as e,useRef as r,useCallback as a,useMemo as n}from"react";import{createPortal as s}from"react-dom";import{X as i,Loader2 as c,AlertTriangle as l,Info as d,AlertCircle as u,CheckCircle as p}from"lucide-react";import{motion as v,AnimatePresence as y}from"framer-motion";var f=function(){return f=Object.assign||function(t){for(var o,e=1,r=arguments.length;e<r;e++)for(var a in o=arguments[e])Object.prototype.hasOwnProperty.call(o,a)&&(t[a]=o[a]);return t},f.apply(this,arguments)};function m(t,o,e){if(e||2===arguments.length)for(var r,a=0,n=o.length;a<n;a++)!r&&a in o||(r||(r=Array.prototype.slice.call(o,0,a)),r[a]=o[a]);return t.concat(r||Array.prototype.slice.call(o))}"function"==typeof SuppressedError&&SuppressedError;var h=t.createContext(void 0),g=function(){var o=t.useContext(h);if(void 0===o)throw new Error("useToastContext must be used within a ToastProvider");return o},x=function(o){var e=o.progress,r=o.type,a=void 0===r?"default":r,n=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 t.createElement(v.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"1.5px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},t.createElement(v.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),t.createElement(v.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(n.base,", \n ").concat(n.highlight,", \n ").concat(n.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(n.glow)},initial:{width:"100%",backgroundPosition:"0% 0%"},animate:{width:"".concat(e,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.05,ease:"linear"},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},t.createElement(v.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(n.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(v.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:n.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(v.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(e,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(n.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},b=function(r){var a=r.id,n=r.content,s=r.description,m=r.type,h=r.status,b=r.duration,w=void 0===b?3e3:b,k=r.icon,E=r.actions,C=r.input,N=r.onClose,B=r.onClick,P=r.progress,T=r.customStyles,z=r.className,S=void 0===z?"":z;r.isExpanded;var D=r.isStacked,F=r.showCloseButton,A=r.showProgressBar,L=r.priority,M=void 0===L?"normal":L,W=r.expandable,O=void 0!==W&&W,R=r.expanded,j=r.customComponent,I=r.unstyled,Y=void 0!==I&&I,H=r.cancel,q=g(),X=q.removeToast;q.updateToast;var Z=o(""),G=Z[0],J=Z[1],K=o(P||100),Q=K[0],U=K[1],V=o(!1),$=V[0],_=V[1],tt=o(!1),ot=tt[0],et=tt[1],rt=t.useRef(Date.now()),at=t.useRef(0),nt=t.useRef(null),st=t.useRef(!0),it=t.useRef(null),ct=g().color,lt=void 0!==R?R:ot,dt=h||("success"===m?"success":"error"===m?"error":"idle");e((function(){if(void 0===P){if(0!==w){st.current&&(rt.current=Date.now(),st.current=!1),!$&&at.current>0&&(rt.current=Date.now()-at.current);var t=function(){if($)at.current=Date.now()-rt.current;else{var o=Date.now()-rt.current,e=Math.max(0,Math.min(100,100-o/w*100));U(e),e<=1?(U(0),null!==it.current&&clearTimeout(it.current),it.current=setTimeout((function(){X(a)}),50)):nt.current=requestAnimationFrame(t)}};return!$&&w>0&&(nt.current=requestAnimationFrame(t)),function(){null!==nt.current&&cancelAnimationFrame(nt.current),null!==it.current&&clearTimeout(it.current)}}U(100)}else U(P)}),[w,P,$,a,X]);var ut=function(){null==N||N(),X(a)};if(j){var pt=j;return t.createElement(pt,{toast:{id:a,content:n,description:s,type:m,status:dt,duration:w,icon:k,actions:E,input:C,onClose:N,onClick:B,progress:P,customStyles:T,className:S,showCloseButton:F,swipeClose:!0,showProgressBar:A,priority:M,expandable:O,expanded:lt},dismiss:ut})}var vt=["vyrn-toast",S,D?"vyrn-toast-stacked":"",ct&&m?"vyrn-toast-".concat(m):"","loading"===dt?"vyrn-toast-loading":"","success"===dt?"vyrn-toast-success-state":"","error"===dt?"vyrn-toast-error-state":"","high"===M?"vyrn-toast-priority-high":"","low"===M?"vyrn-toast-priority-low":"",O?"vyrn-toast-expandable":"",lt?"vyrn-toast-expanded":"",Y?"vyrn-toast-unstyled":"",B||O?"vyrn-toast-clickable":""].filter(Boolean).join(" ");return t.createElement(v.div,{className:vt,style:f(f(f({},T),{height:lt?"auto":D?"60px":"auto",overflow:"hidden",maxHeight:D?"60px":"none"}),D&&"custom"===m?{display:"flex",flexDirection:"column"}:{}),initial:{opacity:0,y:20,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.8,y:-20,transition:{duration:.2}},transition:{type:"spring",stiffness:400,damping:30,mass:.8},role:"error"===m?"alert":"status","aria-live":"error"===m?"assertive":"polite","aria-atomic":"true","aria-expanded":O?lt:void 0,onMouseEnter:function(){return _(!0)},onMouseLeave:function(){return _(!1)},onClick:function(){B?B():O&&et(!ot)},whileHover:B||O?{scale:1.02}:void 0,whileTap:B||O?{scale:.98}:void 0},t.createElement("div",{className:"vyrn-toast-content"},function(){if("loading"===dt||"loading"===h)return t.createElement(c,{className:"vyrn-toast-icon w-5 h-5 vyrn-toast-icon-loading","aria-hidden":"true"});if(k)return k;switch(m){case"success":return t.createElement(p,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});case"error":return t.createElement(u,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});case"info":return t.createElement(d,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});case"warning":return t.createElement(l,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});default:return null}}(),t.createElement("div",{className:"vyrn-toast-message-wrapper"},t.createElement("div",{className:"vyrn-toast-message ".concat(D&&"custom"===m?"vyrn-toast-message-stacked-custom":""),role:"text",style:D&&"custom"===m?{overflow:"hidden",maxHeight:"40px",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",lineHeight:"20px",wordBreak:"break-word"}:D?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"}:{}},n),s&&!D&&t.createElement("div",{className:"vyrn-toast-description",role:"text"},s))),t.createElement(y,null,lt&&t.createElement(v.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},E&&t.createElement("div",{className:"vyrn-toast-actions"},E.map((function(o,e){return t.createElement("button",{key:e,onClick:function(t){t.stopPropagation(),o.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(o.style||"default"," ").concat(o.className||""),"aria-label":o.label},o.label)}))),C&&t.createElement("form",{onSubmit:function(t){t.preventDefault(),null==C||C.onSubmit(G),J("")},className:"vyrn-toast-input-form"},t.createElement("input",{type:"text",value:G,onChange:function(t){return J(t.target.value)},placeholder:C.placeholder,className:"vyrn-toast-input ".concat(C.className||""),onClick:function(t){return t.stopPropagation()},"aria-label":C.placeholder}),t.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(C.submitClassName||""),onClick:function(t){return t.stopPropagation()},"aria-label":"Submit"},"Submit")),H&&t.createElement("div",{className:"vyrn-toast-cancel"},t.createElement("button",{onClick:function(t){t.stopPropagation(),function(){var t;null===(t=null==H?void 0:H.onClick)||void 0===t||t.call(H),ut()}()},className:"vyrn-toast-cancel-button","aria-label":H.label},H.label)))),F&&t.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),ut()},"aria-label":"Close"},t.createElement(i,{size:18,"aria-hidden":"true"})),A&&t.createElement(x,{progress:Q,type:m}))},w=function(a){var n=a.toasts,s=a.position,i=a.layout,c=a.className,l=void 0===c?"":c,d=a.showCloseButton,u=void 0===d||d,p=a.swipeDirection,h=void 0===p?"right":p,g=a.showProgressBar,x=void 0===g||g;a.color;var w=a.onRemoveToast,k=o(!1),E=k[0],C=k[1],N=o(!1),B=N[0],P=N[1],T=r(null);r(new Map);e((function(){var t=function(){P(window.innerWidth<640)};return t(),window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[]);var z,S,D,F,A,L=function(t,o){if(!o&&"stack"===i)return 60;var e=64;return"custom"===t.type&&(e+=20),t.description&&(e+=20),t.actions&&t.actions.length>0&&(e+=40),t.input&&(e+=40),t.cancel&&(e+=32),e},M=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}}},W=m([],n,!0).reverse();return t.createElement("div",{className:"vyrn-toast-container ".concat(l),style:(z={position:"fixed",zIndex:9999},S=B?"0.5rem":"1rem",D=B?"1rem":"3.5rem",F="stack"===i&&s.includes("bottom")?B?"4.5rem":"5.5rem":D,A=B?"0.5rem":"1rem",s.includes("top")&&(z.top=S),s.includes("bottom")&&(z.bottom=F),s.includes("left")&&(z.left=A),s.includes("right")&&(z.right=A),s.includes("center")&&(z.left="50%",z.transform="translateX(-50%)",B&&(z.width="calc(100% - 1rem)",z.maxWidth="100%")),z),ref:T,onMouseEnter:function(){return C(!0)},onMouseLeave:function(){return C(!1)},"aria-live":"polite","aria-label":"Notifications"},t.createElement(y,{mode:"popLayout"},W.map((function(o,e){var r,a,n=void 0!==o.expanded?o.expanded:"stack"!==i||E,c="stack"===i&&!E,l=function(t){if("normal"===i){var o=E?12:8;return s.startsWith("top")?t*o:-t*o}if("stack"===i){if(E){for(var e=0,r=0;r<t;r++){var a=W[r];e+=L(a,!0)+8}return e}return 10*t}return 0}(e);return t.createElement(v.div,{key:o.id,layout:!0,layoutId:o.id,initial:{opacity:0,y:s.startsWith("top")?-20:20,scale:.95},animate:{opacity:1,y:s.startsWith("top")?l:-l,scale:c?.96:1,zIndex:"stack"===i?9999-e:9999},exit:M(),transition:{layout:{type:"spring",stiffness:400,damping:30,mass:.8},opacity:{duration:.15},scale:{type:"spring",stiffness:400,damping:30},y:{type:"spring",stiffness:400,damping:30,mass:.8}},drag:"left"===h||"right"===h?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.2,dragDirectionLock:!0,onDragEnd:function(t,e){var r,a=B?50:100,n=B?200:500;(Math.abs(e.offset.x)>a||Math.abs(e.offset.y)>a||Math.abs(e.velocity.x)>n||Math.abs(e.velocity.y)>n)&&(null===(r=o.onClose)||void 0===r||r.call(o),w(o.id))},style:{position:"normal"===i?"relative":"absolute",width:"100%",transformOrigin:s.startsWith("top")?"top":"bottom",marginBottom:"normal"===i?E?12:8:0}},t.createElement(b,f({},o,{isExpanded:n,isStacked:c,showCloseButton:null!==(r=o.showCloseButton)&&void 0!==r?r:u,showProgressBar:null!==(a=o.showProgressBar)&&void 0!==a?a:x})))}))))};!function(t,o){void 0===o&&(o={});var e=o.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}('.vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:0;max-width:356px;offset:32px;padding:0;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}@media (max-width:640px){.vyrn-toast-container{max-width:calc(100% - 1rem);width:calc(100% - 1rem)}}.vyrn-toast{-webkit-tap-highlight-color:transparent;backface-visibility:hidden;background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);cursor:default;display:flex;overflow:hidden;pointer-events:auto;position:relative;touch-action:pan-y;transform:translateZ(0);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;will-change:transform,opacity}.vyrn-toast-clickable{cursor:pointer}.vyrn-toast-clickable:hover{box-shadow:0 6px 16px rgba(0,0,0,.15)}.vyrn-toast-loading{border-left:3px solid #3b82f6}.vyrn-toast-priority-high{border-left-width:3px;box-shadow:0 6px 20px rgba(0,0,0,.15)}.vyrn-toast-priority-low{opacity:.9}.vyrn-toast-expandable{cursor:pointer}.vyrn-toast-expanded{max-height:none}.dark .vyrn-toast,[data-theme=dark] .vyrn-toast{background-color:#000;border:1px solid #2d2d2d}.vyrn-toast-stacked{cursor:pointer;height:60px;margin-bottom:0;overflow:hidden;transform-origin:top}.vyrn-toast-stacked .vyrn-toast-content{overflow:hidden}.vyrn-toast-stacked .vyrn-toast-message,.vyrn-toast-stacked .vyrn-toast-message-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vyrn-toast-stacked .vyrn-toast-message{max-width:100%}.vyrn-toast-stacked .vyrn-toast-message>*{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;line-height:20px;max-height:40px;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom *{display:inline;font-size:inherit;line-height:inherit;margin:0;padding:0}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom div,.vyrn-toast-stacked .vyrn-toast-message-stacked-custom p,.vyrn-toast-stacked .vyrn-toast-message-stacked-custom span{display:inline;margin:0;padding:0}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom b,.vyrn-toast-stacked .vyrn-toast-message-stacked-custom strong{display:inline;font-weight:600}.vyrn-toast-content{align-items:flex-start;display:flex;gap:12px;min-height:48px;padding:16px;width:100%}.vyrn-toast-icon{flex-shrink:0;height:20px;margin-top:2px;width:20px}.vyrn-toast-icon-loading{animation:vyrn-spin 1s linear infinite}@keyframes vyrn-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.vyrn-toast-message-wrapper{word-wrap:break-word;display:flex;flex-direction:column;flex-grow:1;gap:4px;min-width:0;overflow:hidden;overflow-wrap:break-word}.vyrn-toast-message{word-wrap:break-word;color:inherit;font-size:14px;font-weight:500;hyphens:auto;line-height:1.4;margin:0;overflow-wrap:break-word;padding:0}@media (max-width:640px){.vyrn-toast:not(.vyrn-toast-expanded) .vyrn-toast-message{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.vyrn-toast-expanded .vyrn-toast-message{-webkit-line-clamp:unset;display:block;overflow:visible;text-overflow:unset}}.vyrn-toast-description{color:rgba(0,0,0,.6);font-size:13px;font-weight:400;line-height:1.4;margin:0;padding:0}.dark .vyrn-toast-description,[data-theme=dark] .vyrn-toast-description{color:hsla(0,0%,100%,.7)}.vyrn-toast-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.vyrn-toast-action{-webkit-tap-highlight-color:transparent;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;min-height:36px;padding:6px 12px;touch-action:manipulation;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;font-size:13px;font-weight:500;margin-left:8px;min-height:36px;padding:8px 16px}.vyrn-toast-close,.vyrn-toast-input-submit{-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}.vyrn-toast-close{align-items:center;background:none;border:none;color:#868e96;display:flex;justify-content:center;min-height:32px;min-width:32px;padding:8px;position:absolute;right:8px;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}.vyrn-toast-success{background-color:#e6fff7;border:1.5px solid #00b894}.vyrn-toast-error{background-color:#fff5f5;border:1.5px solid #e74c3c}.vyrn-toast-info{background-color:#f0f7ff;border:1.5px solid #3498db}.vyrn-toast-warning{background-color:#fffbeb;border:1.5px solid #f1c40f}.dark .vyrn-toast-success,[data-theme=dark] .vyrn-toast-success{background-color:#0c3830;border:1.5px solid #00d1a1}.dark .vyrn-toast-error,[data-theme=dark] .vyrn-toast-error{background-color:#2d1717;border:1.5px solid #ff6b6b}.dark .vyrn-toast-info,[data-theme=dark] .vyrn-toast-info{background-color:#15314a;border:1.5px solid #74b9ff}.dark .vyrn-toast-warning,[data-theme=dark] .vyrn-toast-warning{background-color:#332b00;border:1.5px solid #ffd43b}.vyrn-toast-success .vyrn-toast-icon{color:#00b894}.vyrn-toast-error .vyrn-toast-icon{color:#e74c3c}.vyrn-toast-info .vyrn-toast-icon{color:#3498db}.vyrn-toast-warning .vyrn-toast-icon{color:#f1c40f}.dark .vyrn-toast-success .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-success .vyrn-toast-icon{color:#00d1a1}.dark .vyrn-toast-error .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-error .vyrn-toast-icon{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-info .vyrn-toast-icon{color:#74b9ff}.dark .vyrn-toast-warning .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-icon{color:#ffd43b}.vyrn-toast-success .vyrn-toast-message{color:#006c55}.vyrn-toast-error .vyrn-toast-message{color:#c0392b}.vyrn-toast-info .vyrn-toast-message{color:#2874a6}.vyrn-toast-warning .vyrn-toast-message{color:#b7950b}.dark .vyrn-toast-success .vyrn-toast-message,[data-theme=dark] .vyrn-toast-success .vyrn-toast-message{color:#9ffff0}.dark .vyrn-toast-error .vyrn-toast-message,[data-theme=dark] .vyrn-toast-error .vyrn-toast-message{color:#ffcece}.dark .vyrn-toast-info .vyrn-toast-message,[data-theme=dark] .vyrn-toast-info .vyrn-toast-message{color:#bae1ff}.dark .vyrn-toast-warning .vyrn-toast-message,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-message{color:#fff3bf}.vyrn-toast-success .vyrn-toast-close{color:#2b8a3e}.vyrn-toast-error .vyrn-toast-close{color:#c92a2a}.vyrn-toast-info .vyrn-toast-close{color:#1864ab}.vyrn-toast-warning .vyrn-toast-close{color:#e67700}.dark .vyrn-toast-success .vyrn-toast-close,[data-theme=dark] .vyrn-toast-success .vyrn-toast-close{color:#69db7c}.dark .vyrn-toast-error .vyrn-toast-close,[data-theme=dark] .vyrn-toast-error .vyrn-toast-close{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-close,[data-theme=dark] .vyrn-toast-info .vyrn-toast-close{color:#4dabf7}.dark .vyrn-toast-warning .vyrn-toast-close,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-close{color:#ffd43b}.vyrn-toast-close{color:#666}.vyrn-toast-close:hover{color:var(--hover-color,#495057)}.vyrn-toast-success .vyrn-toast-close:hover{color:#2f9e44}.vyrn-toast-error .vyrn-toast-close:hover{color:#e03131}.vyrn-toast-info .vyrn-toast-close:hover{color:#1c7ed6}.vyrn-toast-warning .vyrn-toast-close:hover{color:#f59f00}.dark .vyrn-toast-success .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-success .vyrn-toast-close:hover{color:#8ce99a}.dark .vyrn-toast-error .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-error .vyrn-toast-close:hover{color:#ff8787}.dark .vyrn-toast-info .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-info .vyrn-toast-close:hover{color:#74c0fc}.dark .vyrn-toast-warning .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-close:hover{color:#ffe066}.vyrn-toast-cancel{margin-top:8px;padding:0 16px 12px}.vyrn-toast-cancel-button{-webkit-tap-highlight-color:transparent;background-color:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:4px;color:#666;cursor:pointer;font-size:12px;font-weight:500;min-height:44px;padding:8px 12px;touch-action:manipulation;transition:all .2s ease}.vyrn-toast-cancel-button:hover{background-color:rgba(0,0,0,.1)}.dark .vyrn-toast-cancel-button,[data-theme=dark] .vyrn-toast-cancel-button{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.2);color:#e9ecef}.dark .vyrn-toast-cancel-button:hover,[data-theme=dark] .vyrn-toast-cancel-button:hover{background-color:hsla(0,0%,100%,.15)}.dark .vyrn-toast:not([class*=vyrn-toast-]),[data-theme=dark] .vyrn-toast:not([class*=vyrn-toast-]){background-color:#000;border:1px solid #2d2d2d}.dark .vyrn-toast:not(.vyrn-toast-success):not(.vyrn-toast-error):not(.vyrn-toast-info):not(.vyrn-toast-warning):not([class*="dark:"]) .vyrn-toast-message,[data-theme=dark] .vyrn-toast:not(.vyrn-toast-success):not(.vyrn-toast-error):not(.vyrn-toast-info):not(.vyrn-toast-warning):not([class*="dark:"]) .vyrn-toast-message{color:#e9ecef}.dark .vyrn-toast-action-default,[data-theme=dark] .vyrn-toast-action-default{background-color:#343a40;color:#f1f3f5}.dark .vyrn-toast-input,[data-theme=dark] .vyrn-toast-input{background-color:#343a40;border-color:#495057;color:#e9ecef}.dark .vyrn-toast-close,[data-theme=dark] .vyrn-toast-close{color:#adb5bd}.dark .vyrn-toast-close:hover,[data-theme=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{max-width:calc(100% - 1rem);padding:0;width:calc(100% - 1rem)}.vyrn-toast{border-radius:8px;max-width:100%;min-width:0;width:100%}.vyrn-toast-content{gap:10px;min-height:44px;padding:12px}.vyrn-toast-message{font-size:13px;hyphens:auto}.vyrn-toast-description,.vyrn-toast-message{word-wrap:break-word;line-height:1.4;overflow-wrap:break-word}.vyrn-toast-description{font-size:12px}.vyrn-toast-icon{flex-shrink:0;height:18px;margin-top:2px;width:18px}.vyrn-toast-actions{flex-wrap:wrap;gap:6px;padding:0 12px 8px}.vyrn-toast-action{flex:1 1 auto;font-size:12px;min-height:44px;min-width:44px;padding:8px 12px}.vyrn-toast-input-form{flex-direction:column;gap:8px;padding:0 12px 8px}.vyrn-toast-input{font-size:14px;min-height:44px;padding:10px 12px;width:100%}.vyrn-toast-input-submit{font-size:14px;margin-left:0;min-height:44px;padding:10px 16px;width:100%}.vyrn-toast-close{align-items:center;display:flex;height:44px;justify-content:center;min-height:44px;min-width:44px;right:8px;width:44px}.vyrn-toast-stacked{height:56px;min-height:56px}.vyrn-toast-message-wrapper{flex:1;min-width:0}.vyrn-toast-description,.vyrn-toast-message{hyphens:auto;overflow-wrap:break-word;word-break:break-word}}@media (max-width:380px){.vyrn-toast-container{max-width:calc(100% - .5rem);padding:0;width:calc(100% - .5rem)}.vyrn-toast-content{gap:8px;min-height:44px;padding:10px}.vyrn-toast-message{font-size:12px;line-height:1.4}.vyrn-toast-description{font-size:11px}.vyrn-toast-icon{height:16px;width:16px}.vyrn-toast-actions{flex-direction:column;gap:6px;padding:0 10px 6px}.vyrn-toast-action{font-size:12px;min-height:44px;padding:10px 12px;width:100%}.vyrn-toast-input-form{padding:0 10px 6px}.vyrn-toast-input,.vyrn-toast-input-submit{min-height:44px}}@media (max-height:480px) and (orientation:landscape){.vyrn-toast-container{max-height:80vh;overflow-y:auto}.vyrn-toast{margin-bottom:4px}.vyrn-toast-content{padding:12px}}',{insertAt:"top"});var k=function(i){var c=i.children,l=i.defaultPosition,d=void 0===l?"top-right":l,u=i.defaultLayout,p=void 0===u?"normal":u,v=i.maxToasts,y=void 0===v?5:v,g=i.containerClassName,x=void 0===g?"":g,b=i.showCloseButton,k=void 0===b||b,E=i.swipeDirection,C=void 0===E?"right":E,N=i.showProgressBar,B=void 0===N||N,P=i.color,T=void 0===P||P,z=i.defaultDuration,S=o([]),D=S[0],F=S[1],A=o(d),L=A[0],M=A[1],W=o(p),O=W[0],R=W[1],j=r(new Map),I=a((function(t){var o=Math.random().toString(36).substring(2,11),e=f(f({},t),{duration:void 0!==t.duration?t.duration:z});if(F((function(t){return m(m([],t,!0),[f(f({},e),{id:o})],!1).slice(-y)})),t.soundEffect){var r=new Audio(t.soundEffect);j.current.set(o,r),r.play().catch((function(t){return console.error("Error playing sound:",t)})).finally((function(){setTimeout((function(){j.current.delete(o),r.remove()}),1e3)}))}return o}),[y,z]);e((function(){return function(){j.current.forEach((function(t){t.pause(),t.remove()})),j.current.clear()}}),[]);var Y=a((function(t){F((function(o){return o.filter((function(o){return o.id!==t}))}))}),[]),H=a((function(t,o){F((function(e){return e.map((function(e){return e.id===t?f(f({},e),o):e}))}))}),[]),q=a((function(){F([])}),[]),X=n((function(){return{addToast:I,removeToast:Y,updateToast:H,clearAllToasts:q,position:L,setPosition:M,layout:O,setLayout:R,showCloseButton:k,swipeDirection:C,showProgressBar:B,color:T}}),[I,Y,H,q,L,O,k,C,B,T]),Z=o(!1),G=Z[0],J=Z[1];return e((function(){J(!0)}),[]),t.createElement(h.Provider,{value:X},c,G&&s(t.createElement(w,{toasts:D,position:L,layout:O,className:x,showCloseButton:k,swipeDirection:C,showProgressBar:B,color:T,onRemoveToast:Y}),document.body))},E=function(){var t=g(),o=t.addToast,e=t.removeToast,r=t.updateToast,n=t.clearAllToasts,s=t.position,i=t.setPosition,c=t.layout,l=t.setLayout,d=a((function(t){return o(t)}),[o]),u=a((function(t,o){r(t,o)}),[r]),p=a((function(t){e(t)}),[e]),v=a((function(){n()}),[n]),y=a((function(t){i(t)}),[i]),m=a((function(t){l(t)}),[l]),h=a((function(t,e){var a="function"==typeof t?t():t,n=o({content:e.loading||"Loading...",description:e.description,type:"info",status:"loading",duration:0,cancel:e.cancel});return a.then((function(t){var o,a="function"==typeof e.success?e.success(t):e.success||"Success!";r(n,{content:a,type:"success",status:"success",duration:e.duration||3e3,cancel:void 0}),null===(o=e.onSuccess)||void 0===o||o.call(e,t)})).catch((function(t){var o,a="function"==typeof e.error?e.error(t):e.error||"Something went wrong";r(n,{content:a,type:"error",status:"error",duration:e.duration||5e3,cancel:void 0}),null===(o=e.onError)||void 0===o||o.call(e,t)})),n}),[o,r]),x=a((function(t,o){return d(f({content:t,type:"info",status:"loading",duration:0},o))}),[d]);return{toast:d,update:u,dismiss:p,clearAll:v,changePosition:y,changeLayout:m,promise:h,loading:x,position:s,layout:c,default:function(t,o){return d(f({content:t,type:"default"},o))},info:function(t,o){return d(f({content:t,type:"info"},o))},success:function(t,o){return d(f({content:t,type:"success"},o))},warning:function(t,o){return d(f({content:t,type:"warning"},o))},error:function(t,o){return d(f({content:t,type:"error"},o))},custom:function(t,o){return d(f({content:t,type:"custom"},o))}}},C=function(o){var e=o.children,r=o.position,a=o.layout,n=void 0===a?"normal":a,s=o.maxToasts,i=o.containerClassName,c=o.showCloseButton,l=void 0===c||c,d=o.swipeDirection,u=void 0===d?"right":d,p=o.showProgressBar,v=void 0===p||p,y=o.color,f=void 0===y||y,m=o.duration;return t.createElement(k,{defaultPosition:r,defaultLayout:n,maxToasts:s,containerClassName:i,showCloseButton:l,swipeDirection:u,showProgressBar:v,color:f,defaultDuration:m},e)};export{C as ClientToastProvider,k as ToastProvider,E as useToast};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -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":"
|
|
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":"u2WAAA,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"),o=require("react-dom"),e=require("lucide-react"),r=require("framer-motion");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=a(t),s=function(){return s=Object.assign||function(t){for(var o,e=1,r=arguments.length;e<r;e++)for(var a in o=arguments[e])Object.prototype.hasOwnProperty.call(o,a)&&(t[a]=o[a]);return t},s.apply(this,arguments)};function i(t,o,e){if(e||2===arguments.length)for(var r,a=0,n=o.length;a<n;a++)!r&&a in o||(r||(r=Array.prototype.slice.call(o,0,a)),r[a]=o[a]);return t.concat(r||Array.prototype.slice.call(o))}"function"==typeof SuppressedError&&SuppressedError;var c=n.default.createContext(void 0),l=function(){var t=n.default.useContext(c);if(void 0===t)throw new Error("useToastContext must be used within a ToastProvider");return t},u=function(t){var o=t.progress,e=t.type,a=void 0===e?"default":e,s=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 n.default.createElement(r.motion.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"1.5px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},n.default.createElement(r.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),n.default.createElement(r.motion.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(s.base,", \n ").concat(s.highlight,", \n ").concat(s.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(s.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"}}},n.default.createElement(r.motion.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(s.highlight,"40 50%,\n transparent 100%\n )"),transform:"translateX(-50%)"},animate:{x:["0%","200%"]},transition:{duration:1.5,repeat:1/0,ease:"linear"}}),n.default.createElement(r.motion.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:s.highlight,filter:"blur(0.5px)"},animate:{opacity:[1,.5,1],scale:[1,1.2,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"}})),n.default.createElement(r.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(o,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(s.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},d=function(o){var a=o.id,i=o.content,c=o.type,d=o.duration,f=void 0===d?3e3:d,p=o.icon,v=o.actions,y=o.input,g=o.onClose,m=o.progress,h=o.customStyles,b=o.className,x=void 0===b?"":b,k=o.isExpanded,w=o.isStacked,E=o.showCloseButton,C=o.showProgressBar,P=l(),B=P.removeToast;P.updateToast;var N=t.useState(""),T=N[0],S=N[1],A=t.useState(m||100),F=A[0],z=A[1],D=l().color;t.useEffect((function(){if(void 0===m){var t=setInterval((function(){z((function(t){var o=t-100/(f/1e3);return o>0?o:0}))}),1e3);return function(){return clearInterval(t)}}}),[f,m]),t.useEffect((function(){0===F&&B(a)}),[F,a,B]),t.useEffect((function(){void 0!==m&&z(m)}),[m]);return n.default.createElement(r.motion.div,{className:"vyrn-toast ".concat(x," ").concat(w?"vyrn-toast-stacked":""," ").concat(D&&c?"vyrn-toast-".concat(c):""),style:s(s({},h),{height:k?"auto":w?"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}},n.default.createElement("div",{className:"vyrn-toast-content"},function(){if(p)return p;switch(c){case"success":return n.default.createElement(e.CheckCircle,{className:"vyrn-toast-icon w-5 h-5 "});case"error":return n.default.createElement(e.AlertCircle,{className:"vyrn-toast-icon w-5 h-5"});case"info":return n.default.createElement(e.Info,{className:"vyrn-toast-icon w-5 h-5"});case"warning":return n.default.createElement(e.AlertTriangle,{className:"vyrn-toast-icon w-5 h-5"});default:return null}}(),n.default.createElement("div",{className:"vyrn-toast-message"},i)),n.default.createElement(r.AnimatePresence,null,k&&n.default.createElement(r.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},v&&n.default.createElement("div",{className:"vyrn-toast-actions"},v.map((function(t,o){return n.default.createElement("button",{key:o,onClick:function(o){o.stopPropagation(),t.onClick()},className:"vyrn-toast-action vyrn-toast-action-".concat(t.style||"default"," ").concat(t.className||"")},t.label)}))),y&&n.default.createElement("form",{onSubmit:function(t){t.preventDefault(),null==y||y.onSubmit(T),S("")},className:"vyrn-toast-input-form"},n.default.createElement("input",{type:"text",value:T,onChange:function(t){return S(t.target.value)},placeholder:y.placeholder,className:"vyrn-toast-input ".concat(y.className||""),onClick:function(t){return t.stopPropagation()}}),n.default.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(y.submitClassName||""),onClick:function(t){return t.stopPropagation()}},"Submit")))),E&&n.default.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),null==g||g(),B(a)},"aria-label":"Close"},n.default.createElement(e.X,{size:18})),C&&n.default.createElement(u,{progress:F,type:c}))},f=function(o){var e=o.toasts,a=o.position,c=o.layout,l=o.className,u=void 0===l?"":l,f=o.showCloseButton,p=void 0===f||f,v=o.swipeDirection,y=void 0===v?"right":v,g=o.showProgressBar,m=void 0===g||g;o.color;var h,b=t.useState(!1),x=b[0],k=b[1],w=t.useRef(null),E=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}}},C=function(t){return"normal"===c?a.startsWith("top")?t*(x?80:15):-t*(x?80:15):"stack"===c?x?80*t:18*t:0},P=i([],e,!0).reverse();return n.default.createElement("div",{className:"vyrn-toast-container ".concat(u),style:(h={position:"fixed",zIndex:9999},a.includes("top")&&(h.top="1rem"),a.includes("bottom")&&(h.bottom="3.5rem"),a.includes("left")&&(h.left="1rem"),a.includes("right")&&(h.right="1rem"),a.includes("center")&&(h.left="50%",h.transform="translateX(-50%)"),h),ref:w,onMouseEnter:function(){return k(!0)},onMouseLeave:function(){return k(!1)}},n.default.createElement(r.AnimatePresence,{mode:"sync"},P.map((function(t,o){var e,i;return n.default.createElement(r.motion.div,{key:t.id,layout:!0,initial:{opacity:0,y:a.startsWith("top")?-20:20,scale:.9},animate:{opacity:1,y:a.startsWith("top")?C(o):-C(o),scale:x?1.02:1,zIndex:"stack"===c?9999-o:9999,transition:{type:"spring",stiffness:500,damping:30}},exit:E(),drag:"left"===y||"right"===y?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.9,onDragEnd:function(o,e){var r;(Math.abs(e.offset.x)>100||Math.abs(e.offset.y)>100)&&(null===(r=t.onClose)||void 0===r||r.call(t))},style:{position:"normal"===c?"relative":"absolute",width:"100%",transformOrigin:a.startsWith("top")?"top":"bottom",marginBottom:"normal"===c?"0.25rem":0}},n.default.createElement(d,s({},t,{isExpanded:"stack"!==c||x,isStacked:"stack"===c&&!x,showCloseButton:null!==(e=t.showCloseButton)&&void 0!==e?e:p,showProgressBar:null!==(i=t.showProgressBar)&&void 0!==i?i:m})))}))))};!function(t,o){void 0===o&&(o={});var e=o.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&r.firstChild?r.insertBefore(a,r.firstChild):r.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:16px;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}.vyrn-toast{background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;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%}.dark .vyrn-toast{background-color:#000;border:1px solid #2d2d2d}.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:20px;margin-right:8px;width:20px}.vyrn-toast-message{color:inherit;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}.vyrn-toast-success{background-color:#e6fff7;border:1.5px solid #00b894}.vyrn-toast-error{background-color:#fff5f5;border:1.5px solid #e74c3c}.vyrn-toast-info{background-color:#f0f7ff;border:1.5px solid #3498db}.vyrn-toast-warning{background-color:#fffbeb;border:1.5px solid #f1c40f}.dark .vyrn-toast-success{background-color:#0c3830;border:1.5px solid #00d1a1}.dark .vyrn-toast-error{background-color:#2d1717;border:1.5px solid #ff6b6b}.dark .vyrn-toast-info{background-color:#15314a;border:1.5px solid #74b9ff}.dark .vyrn-toast-warning{background-color:#332b00;border:1.5px solid #ffd43b}.vyrn-toast-success .vyrn-toast-icon{color:#00b894}.vyrn-toast-error .vyrn-toast-icon{color:#e74c3c}.vyrn-toast-info .vyrn-toast-icon{color:#3498db}.vyrn-toast-warning .vyrn-toast-icon{color:#f1c40f}.dark .vyrn-toast-success .vyrn-toast-icon{color:#00d1a1}.dark .vyrn-toast-error .vyrn-toast-icon{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-icon{color:#74b9ff}.dark .vyrn-toast-warning .vyrn-toast-icon{color:#ffd43b}.vyrn-toast-success .vyrn-toast-message{color:#006c55}.vyrn-toast-error .vyrn-toast-message{color:#c0392b}.vyrn-toast-info .vyrn-toast-message{color:#2874a6}.vyrn-toast-warning .vyrn-toast-message{color:#b7950b}.dark .vyrn-toast-success .vyrn-toast-message{color:#9ffff0}.dark .vyrn-toast-error .vyrn-toast-message{color:#ffcece}.dark .vyrn-toast-info .vyrn-toast-message{color:#bae1ff}.dark .vyrn-toast-warning .vyrn-toast-message{color:#fff3bf}.vyrn-toast-success .vyrn-toast-close{color:#2b8a3e}.vyrn-toast-error .vyrn-toast-close{color:#c92a2a}.vyrn-toast-info .vyrn-toast-close{color:#1864ab}.vyrn-toast-warning .vyrn-toast-close{color:#e67700}.dark .vyrn-toast-success .vyrn-toast-close{color:#69db7c}.dark .vyrn-toast-error .vyrn-toast-close{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-close{color:#4dabf7}.dark .vyrn-toast-warning .vyrn-toast-close{color:#ffd43b}.vyrn-toast-close{color:#666}.vyrn-toast-close:hover{color:var(--hover-color,#495057)}.vyrn-toast-success .vyrn-toast-close:hover{color:#2f9e44}.vyrn-toast-error .vyrn-toast-close:hover{color:#e03131}.vyrn-toast-info .vyrn-toast-close:hover{color:#1c7ed6}.vyrn-toast-warning .vyrn-toast-close:hover{color:#f59f00}.dark .vyrn-toast-success .vyrn-toast-close:hover{color:#8ce99a}.dark .vyrn-toast-error .vyrn-toast-close:hover{color:#ff8787}.dark .vyrn-toast-info .vyrn-toast-close:hover{color:#74c0fc}.dark .vyrn-toast-warning .vyrn-toast-close:hover{color:#ffe066}.dark .vyrn-toast:not([class*=vyrn-toast-]){background-color:#000;border:1px solid #2d2d2d}.dark .vyrn-toast:not(.vyrn-toast-success):not(.vyrn-toast-error):not(.vyrn-toast-info):not(.vyrn-toast-warning):not([class*="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:12px;right:0;width:calc(100% - 32px)}}',{insertAt:"top"});var p=function(e){var r=e.children,a=e.defaultPosition,l=void 0===a?"top-right":a,u=e.defaultLayout,d=void 0===u?"normal":u,p=e.maxToasts,v=void 0===p?5:p,y=e.containerClassName,g=void 0===y?"":y,m=e.showCloseButton,h=void 0===m||m,b=e.swipeDirection,x=void 0===b?"right":b,k=e.showProgressBar,w=void 0===k||k,E=e.color,C=void 0===E||E,P=t.useState([]),B=P[0],N=P[1],T=t.useState(l),S=T[0],A=T[1],F=t.useState(d),z=F[0],D=F[1],I=t.useCallback((function(t){var o=Math.random().toString(36).substr(2,9);return N((function(e){return i(i([],e,!0),[s(s({},t),{id:o})],!1).slice(-v)})),t.soundEffect&&new Audio(t.soundEffect).play().catch((function(t){return console.error("Error playing sound:",t)})),o}),[v]),M=t.useCallback((function(t){N((function(o){return o.filter((function(o){return o.id!==t}))}))}),[]),O=t.useCallback((function(t,o){N((function(e){return e.map((function(e){return e.id===t?s(s({},e),o):e}))}))}),[]),L=t.useCallback((function(){N([])}),[]),j=t.useMemo((function(){return{addToast:I,removeToast:M,updateToast:O,clearAllToasts:L,position:S,setPosition:A,layout:z,setLayout:D,showCloseButton:h,swipeDirection:x,showProgressBar:w,color:C}}),[I,M,O,L,S,z,h,x,w,C]),Y=t.useState(!1),q=Y[0],W=Y[1];return t.useEffect((function(){W(!0)}),[]),n.default.createElement(c.Provider,{value:j},r,q&&o.createPortal(n.default.createElement(f,{toasts:B,position:S,layout:z,className:g,showCloseButton:h,swipeDirection:x,showProgressBar:w,color:C}),document.body))};exports.ClientToastProvider=function(t){var o=t.children,e=t.position,r=t.layout,a=void 0===r?"normal":r,s=t.maxToasts,i=t.containerClassName,c=t.showCloseButton,l=void 0===c||c,u=t.swipeDirection,d=void 0===u?"right":u,f=t.showProgressBar,v=void 0===f||f,y=t.color,g=void 0===y||y;return n.default.createElement(p,{defaultPosition:e,defaultLayout:a,maxToasts:s,containerClassName:i,showCloseButton:l,swipeDirection:d,showProgressBar:v,color:g},o)},exports.ToastProvider=p,exports.useToast=function(){var o=l(),e=o.addToast,r=o.removeToast,a=o.updateToast,n=o.clearAllToasts,i=o.position,c=o.setPosition,u=o.layout,d=o.setLayout,f=t.useCallback((function(t){return e(t)}),[e]),p=t.useCallback((function(t,o){a(t,o)}),[a]),v=t.useCallback((function(t){r(t)}),[r]),y=t.useCallback((function(){n()}),[n]),g=t.useCallback((function(t){c(t)}),[c]),m=t.useCallback((function(t){d(t)}),[d]);return{toast:f,update:p,dismiss:v,clearAll:y,changePosition:g,changeLayout:m,position:i,layout:u,default:function(t,o){return f(s({content:t,type:"default"},o))},info:function(t,o){return f(s({content:t,type:"info"},o))},success:function(t,o){return f(s({content:t,type:"success"},o))},warning:function(t,o){return f(s({content:t,type:"warning"},o))},error:function(t,o){return f(s({content:t,type:"error"},o))},custom:function(t,o){return f(s({content:t,type:"custom"},o))}}};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom"),o=require("lucide-react"),a=require("framer-motion");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=r(t),s=function(){return s=Object.assign||function(t){for(var e,o=1,a=arguments.length;o<a;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},s.apply(this,arguments)};function i(t,e,o){if(o||2===arguments.length)for(var a,r=0,n=e.length;r<n;r++)!a&&r in e||(a||(a=Array.prototype.slice.call(e,0,r)),a[r]=e[r]);return t.concat(a||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var c=n.default.createContext(void 0),l=function(){var t=n.default.useContext(c);if(void 0===t)throw new Error("useToastContext must be used within a ToastProvider");return t},d=function(t){var e=t.progress,o=t.type,r=void 0===o?"default":o,s=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 n.default.createElement(a.motion.div,{style:{position:"absolute",bottom:0,left:0,right:0,height:"1.5px",overflow:"hidden",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(8px)"}},n.default.createElement(a.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",background:"rgba(255, 255, 255, 0.05)",backdropFilter:"blur(2px)"}}),n.default.createElement(a.motion.div,{style:{position:"absolute",bottom:0,left:0,height:"100%",background:"linear-gradient(90deg, \n ".concat(s.base,", \n ").concat(s.highlight,", \n ").concat(s.base,"\n )"),backgroundSize:"200% 100%",boxShadow:"0 0 10px ".concat(s.glow)},initial:{width:"100%",backgroundPosition:"0% 0%"},animate:{width:"".concat(e,"%"),backgroundPosition:["0% 0%","100% 0%"]},transition:{width:{duration:.05,ease:"linear"},backgroundPosition:{duration:2,repeat:1/0,ease:"linear"}}},n.default.createElement(a.motion.div,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"linear-gradient(90deg,\n transparent 0%,\n ".concat(s.highlight,"40 50%,\n transparent 100%\n )"),transform:"translateX(-50%)"},animate:{x:["0%","200%"]},transition:{duration:1.5,repeat:1/0,ease:"linear"}}),n.default.createElement(a.motion.div,{style:{position:"absolute",top:0,right:0,width:"2px",height:"100%",background:s.highlight,filter:"blur(0.5px)"},animate:{opacity:[1,.5,1],scale:[1,1.2,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"}})),n.default.createElement(a.motion.div,{style:{position:"absolute",bottom:0,left:0,width:"".concat(e,"%"),height:"100%",background:"linear-gradient(90deg,\n transparent,\n ".concat(s.glow,",\n transparent\n )"),filter:"blur(4px)"},animate:{opacity:[.3,.6,.3]},transition:{duration:2,repeat:1/0,ease:"easeInOut"}}))},u=function(e){var r=e.id,i=e.content,c=e.description,u=e.type,p=e.status,v=e.duration,f=void 0===v?3e3:v,y=e.icon,m=e.actions,h=e.input,g=e.onClose,x=e.onClick,b=e.progress,w=e.customStyles,k=e.className,E=void 0===k?"":k;e.isExpanded;var C=e.isStacked,N=e.showCloseButton,P=e.showProgressBar,B=e.priority,S=void 0===B?"normal":B,T=e.expandable,z=void 0!==T&&T,D=e.expanded,A=e.customComponent,M=e.unstyled,F=void 0!==M&&M,L=e.cancel,R=l(),O=R.removeToast;R.updateToast;var W=t.useState(""),j=W[0],q=W[1],I=t.useState(b||100),Y=I[0],H=I[1],X=t.useState(!1),_=X[0],Z=X[1],G=t.useState(!1),J=G[0],K=G[1],Q=n.default.useRef(Date.now()),U=n.default.useRef(0),V=n.default.useRef(null),$=n.default.useRef(!0),tt=n.default.useRef(null),et=l().color,ot=void 0!==D?D:J,at=p||("success"===u?"success":"error"===u?"error":"idle");t.useEffect((function(){if(void 0===b){if(0!==f){$.current&&(Q.current=Date.now(),$.current=!1),!_&&U.current>0&&(Q.current=Date.now()-U.current);var t=function(){if(_)U.current=Date.now()-Q.current;else{var e=Date.now()-Q.current,o=Math.max(0,Math.min(100,100-e/f*100));H(o),o<=1?(H(0),null!==tt.current&&clearTimeout(tt.current),tt.current=setTimeout((function(){O(r)}),50)):V.current=requestAnimationFrame(t)}};return!_&&f>0&&(V.current=requestAnimationFrame(t)),function(){null!==V.current&&cancelAnimationFrame(V.current),null!==tt.current&&clearTimeout(tt.current)}}H(100)}else H(b)}),[f,b,_,r,O]);var rt=function(){null==g||g(),O(r)};if(A){var nt=A;return n.default.createElement(nt,{toast:{id:r,content:i,description:c,type:u,status:at,duration:f,icon:y,actions:m,input:h,onClose:g,onClick:x,progress:b,customStyles:w,className:E,showCloseButton:N,swipeClose:!0,showProgressBar:P,priority:S,expandable:z,expanded:ot},dismiss:rt})}var st=["vyrn-toast",E,C?"vyrn-toast-stacked":"",et&&u?"vyrn-toast-".concat(u):"","loading"===at?"vyrn-toast-loading":"","success"===at?"vyrn-toast-success-state":"","error"===at?"vyrn-toast-error-state":"","high"===S?"vyrn-toast-priority-high":"","low"===S?"vyrn-toast-priority-low":"",z?"vyrn-toast-expandable":"",ot?"vyrn-toast-expanded":"",F?"vyrn-toast-unstyled":"",x||z?"vyrn-toast-clickable":""].filter(Boolean).join(" ");return n.default.createElement(a.motion.div,{className:st,style:s(s(s({},w),{height:ot?"auto":C?"60px":"auto",overflow:"hidden",maxHeight:C?"60px":"none"}),C&&"custom"===u?{display:"flex",flexDirection:"column"}:{}),initial:{opacity:0,y:20,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.8,y:-20,transition:{duration:.2}},transition:{type:"spring",stiffness:400,damping:30,mass:.8},role:"error"===u?"alert":"status","aria-live":"error"===u?"assertive":"polite","aria-atomic":"true","aria-expanded":z?ot:void 0,onMouseEnter:function(){return Z(!0)},onMouseLeave:function(){return Z(!1)},onClick:function(){x?x():z&&K(!J)},whileHover:x||z?{scale:1.02}:void 0,whileTap:x||z?{scale:.98}:void 0},n.default.createElement("div",{className:"vyrn-toast-content"},function(){if("loading"===at||"loading"===p)return n.default.createElement(o.Loader2,{className:"vyrn-toast-icon w-5 h-5 vyrn-toast-icon-loading","aria-hidden":"true"});if(y)return y;switch(u){case"success":return n.default.createElement(o.CheckCircle,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});case"error":return n.default.createElement(o.AlertCircle,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});case"info":return n.default.createElement(o.Info,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});case"warning":return n.default.createElement(o.AlertTriangle,{className:"vyrn-toast-icon w-5 h-5","aria-hidden":"true"});default:return null}}(),n.default.createElement("div",{className:"vyrn-toast-message-wrapper"},n.default.createElement("div",{className:"vyrn-toast-message ".concat(C&&"custom"===u?"vyrn-toast-message-stacked-custom":""),role:"text",style:C&&"custom"===u?{overflow:"hidden",maxHeight:"40px",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",lineHeight:"20px",wordBreak:"break-word"}:C?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"}:{}},i),c&&!C&&n.default.createElement("div",{className:"vyrn-toast-description",role:"text"},c))),n.default.createElement(a.AnimatePresence,null,ot&&n.default.createElement(a.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.3}},m&&n.default.createElement("div",{className:"vyrn-toast-actions"},m.map((function(t,e){return n.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||""),"aria-label":t.label},t.label)}))),h&&n.default.createElement("form",{onSubmit:function(t){t.preventDefault(),null==h||h.onSubmit(j),q("")},className:"vyrn-toast-input-form"},n.default.createElement("input",{type:"text",value:j,onChange:function(t){return q(t.target.value)},placeholder:h.placeholder,className:"vyrn-toast-input ".concat(h.className||""),onClick:function(t){return t.stopPropagation()},"aria-label":h.placeholder}),n.default.createElement("button",{type:"submit",className:"vyrn-toast-input-submit ".concat(h.submitClassName||""),onClick:function(t){return t.stopPropagation()},"aria-label":"Submit"},"Submit")),L&&n.default.createElement("div",{className:"vyrn-toast-cancel"},n.default.createElement("button",{onClick:function(t){t.stopPropagation(),function(){var t;null===(t=null==L?void 0:L.onClick)||void 0===t||t.call(L),rt()}()},className:"vyrn-toast-cancel-button","aria-label":L.label},L.label)))),N&&n.default.createElement("button",{className:"vyrn-toast-close",onClick:function(t){t.stopPropagation(),rt()},"aria-label":"Close"},n.default.createElement(o.X,{size:18,"aria-hidden":"true"})),P&&n.default.createElement(d,{progress:Y,type:u}))},p=function(e){var o=e.toasts,r=e.position,c=e.layout,l=e.className,d=void 0===l?"":l,p=e.showCloseButton,v=void 0===p||p,f=e.swipeDirection,y=void 0===f?"right":f,m=e.showProgressBar,h=void 0===m||m;e.color;var g=e.onRemoveToast,x=t.useState(!1),b=x[0],w=x[1],k=t.useState(!1),E=k[0],C=k[1],N=t.useRef(null);t.useRef(new Map);t.useEffect((function(){var t=function(){C(window.innerWidth<640)};return t(),window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[]);var P,B,S,T,z,D=function(t,e){if(!e&&"stack"===c)return 60;var o=64;return"custom"===t.type&&(o+=20),t.description&&(o+=20),t.actions&&t.actions.length>0&&(o+=40),t.input&&(o+=40),t.cancel&&(o+=32),o},A=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}}},M=i([],o,!0).reverse();return n.default.createElement("div",{className:"vyrn-toast-container ".concat(d),style:(P={position:"fixed",zIndex:9999},B=E?"0.5rem":"1rem",S=E?"1rem":"3.5rem",T="stack"===c&&r.includes("bottom")?E?"4.5rem":"5.5rem":S,z=E?"0.5rem":"1rem",r.includes("top")&&(P.top=B),r.includes("bottom")&&(P.bottom=T),r.includes("left")&&(P.left=z),r.includes("right")&&(P.right=z),r.includes("center")&&(P.left="50%",P.transform="translateX(-50%)",E&&(P.width="calc(100% - 1rem)",P.maxWidth="100%")),P),ref:N,onMouseEnter:function(){return w(!0)},onMouseLeave:function(){return w(!1)},"aria-live":"polite","aria-label":"Notifications"},n.default.createElement(a.AnimatePresence,{mode:"popLayout"},M.map((function(t,e){var o,i,l=void 0!==t.expanded?t.expanded:"stack"!==c||b,d="stack"===c&&!b,p=function(t){if("normal"===c){var e=b?12:8;return r.startsWith("top")?t*e:-t*e}if("stack"===c){if(b){for(var o=0,a=0;a<t;a++){var n=M[a];o+=D(n,!0)+8}return o}return 10*t}return 0}(e);return n.default.createElement(a.motion.div,{key:t.id,layout:!0,layoutId:t.id,initial:{opacity:0,y:r.startsWith("top")?-20:20,scale:.95},animate:{opacity:1,y:r.startsWith("top")?p:-p,scale:d?.96:1,zIndex:"stack"===c?9999-e:9999},exit:A(),transition:{layout:{type:"spring",stiffness:400,damping:30,mass:.8},opacity:{duration:.15},scale:{type:"spring",stiffness:400,damping:30},y:{type:"spring",stiffness:400,damping:30,mass:.8}},drag:"left"===y||"right"===y?"x":"y",dragConstraints:{left:0,right:0,top:0,bottom:0},dragElastic:.2,dragDirectionLock:!0,onDragEnd:function(e,o){var a,r=E?50:100,n=E?200:500;(Math.abs(o.offset.x)>r||Math.abs(o.offset.y)>r||Math.abs(o.velocity.x)>n||Math.abs(o.velocity.y)>n)&&(null===(a=t.onClose)||void 0===a||a.call(t),g(t.id))},style:{position:"normal"===c?"relative":"absolute",width:"100%",transformOrigin:r.startsWith("top")?"top":"bottom",marginBottom:"normal"===c?b?12:8:0}},n.default.createElement(u,s({},t,{isExpanded:l,isStacked:d,showCloseButton:null!==(o=t.showCloseButton)&&void 0!==o?o:v,showProgressBar:null!==(i=t.showProgressBar)&&void 0!==i?i:h})))}))))};!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.vyrn-toast-container{bottom:0;display:flex;flex-direction:column;gap:0;max-width:356px;offset:32px;padding:0;pointer-events:none;position:fixed;right:0;width:calc(100% - 24px);z-index:9999}@media (max-width:640px){.vyrn-toast-container{max-width:calc(100% - 1rem);width:calc(100% - 1rem)}}.vyrn-toast{-webkit-tap-highlight-color:transparent;backface-visibility:hidden;background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);cursor:default;display:flex;overflow:hidden;pointer-events:auto;position:relative;touch-action:pan-y;transform:translateZ(0);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;will-change:transform,opacity}.vyrn-toast-clickable{cursor:pointer}.vyrn-toast-clickable:hover{box-shadow:0 6px 16px rgba(0,0,0,.15)}.vyrn-toast-loading{border-left:3px solid #3b82f6}.vyrn-toast-priority-high{border-left-width:3px;box-shadow:0 6px 20px rgba(0,0,0,.15)}.vyrn-toast-priority-low{opacity:.9}.vyrn-toast-expandable{cursor:pointer}.vyrn-toast-expanded{max-height:none}.dark .vyrn-toast,[data-theme=dark] .vyrn-toast{background-color:#000;border:1px solid #2d2d2d}.vyrn-toast-stacked{cursor:pointer;height:60px;margin-bottom:0;overflow:hidden;transform-origin:top}.vyrn-toast-stacked .vyrn-toast-content{overflow:hidden}.vyrn-toast-stacked .vyrn-toast-message,.vyrn-toast-stacked .vyrn-toast-message-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vyrn-toast-stacked .vyrn-toast-message{max-width:100%}.vyrn-toast-stacked .vyrn-toast-message>*{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;line-height:20px;max-height:40px;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom *{display:inline;font-size:inherit;line-height:inherit;margin:0;padding:0}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom div,.vyrn-toast-stacked .vyrn-toast-message-stacked-custom p,.vyrn-toast-stacked .vyrn-toast-message-stacked-custom span{display:inline;margin:0;padding:0}.vyrn-toast-stacked .vyrn-toast-message-stacked-custom b,.vyrn-toast-stacked .vyrn-toast-message-stacked-custom strong{display:inline;font-weight:600}.vyrn-toast-content{align-items:flex-start;display:flex;gap:12px;min-height:48px;padding:16px;width:100%}.vyrn-toast-icon{flex-shrink:0;height:20px;margin-top:2px;width:20px}.vyrn-toast-icon-loading{animation:vyrn-spin 1s linear infinite}@keyframes vyrn-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.vyrn-toast-message-wrapper{word-wrap:break-word;display:flex;flex-direction:column;flex-grow:1;gap:4px;min-width:0;overflow:hidden;overflow-wrap:break-word}.vyrn-toast-message{word-wrap:break-word;color:inherit;font-size:14px;font-weight:500;hyphens:auto;line-height:1.4;margin:0;overflow-wrap:break-word;padding:0}@media (max-width:640px){.vyrn-toast:not(.vyrn-toast-expanded) .vyrn-toast-message{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.vyrn-toast-expanded .vyrn-toast-message{-webkit-line-clamp:unset;display:block;overflow:visible;text-overflow:unset}}.vyrn-toast-description{color:rgba(0,0,0,.6);font-size:13px;font-weight:400;line-height:1.4;margin:0;padding:0}.dark .vyrn-toast-description,[data-theme=dark] .vyrn-toast-description{color:hsla(0,0%,100%,.7)}.vyrn-toast-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.vyrn-toast-action{-webkit-tap-highlight-color:transparent;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;min-height:36px;padding:6px 12px;touch-action:manipulation;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;font-size:13px;font-weight:500;margin-left:8px;min-height:36px;padding:8px 16px}.vyrn-toast-close,.vyrn-toast-input-submit{-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}.vyrn-toast-close{align-items:center;background:none;border:none;color:#868e96;display:flex;justify-content:center;min-height:32px;min-width:32px;padding:8px;position:absolute;right:8px;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}.vyrn-toast-success{background-color:#e6fff7;border:1.5px solid #00b894}.vyrn-toast-error{background-color:#fff5f5;border:1.5px solid #e74c3c}.vyrn-toast-info{background-color:#f0f7ff;border:1.5px solid #3498db}.vyrn-toast-warning{background-color:#fffbeb;border:1.5px solid #f1c40f}.dark .vyrn-toast-success,[data-theme=dark] .vyrn-toast-success{background-color:#0c3830;border:1.5px solid #00d1a1}.dark .vyrn-toast-error,[data-theme=dark] .vyrn-toast-error{background-color:#2d1717;border:1.5px solid #ff6b6b}.dark .vyrn-toast-info,[data-theme=dark] .vyrn-toast-info{background-color:#15314a;border:1.5px solid #74b9ff}.dark .vyrn-toast-warning,[data-theme=dark] .vyrn-toast-warning{background-color:#332b00;border:1.5px solid #ffd43b}.vyrn-toast-success .vyrn-toast-icon{color:#00b894}.vyrn-toast-error .vyrn-toast-icon{color:#e74c3c}.vyrn-toast-info .vyrn-toast-icon{color:#3498db}.vyrn-toast-warning .vyrn-toast-icon{color:#f1c40f}.dark .vyrn-toast-success .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-success .vyrn-toast-icon{color:#00d1a1}.dark .vyrn-toast-error .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-error .vyrn-toast-icon{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-info .vyrn-toast-icon{color:#74b9ff}.dark .vyrn-toast-warning .vyrn-toast-icon,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-icon{color:#ffd43b}.vyrn-toast-success .vyrn-toast-message{color:#006c55}.vyrn-toast-error .vyrn-toast-message{color:#c0392b}.vyrn-toast-info .vyrn-toast-message{color:#2874a6}.vyrn-toast-warning .vyrn-toast-message{color:#b7950b}.dark .vyrn-toast-success .vyrn-toast-message,[data-theme=dark] .vyrn-toast-success .vyrn-toast-message{color:#9ffff0}.dark .vyrn-toast-error .vyrn-toast-message,[data-theme=dark] .vyrn-toast-error .vyrn-toast-message{color:#ffcece}.dark .vyrn-toast-info .vyrn-toast-message,[data-theme=dark] .vyrn-toast-info .vyrn-toast-message{color:#bae1ff}.dark .vyrn-toast-warning .vyrn-toast-message,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-message{color:#fff3bf}.vyrn-toast-success .vyrn-toast-close{color:#2b8a3e}.vyrn-toast-error .vyrn-toast-close{color:#c92a2a}.vyrn-toast-info .vyrn-toast-close{color:#1864ab}.vyrn-toast-warning .vyrn-toast-close{color:#e67700}.dark .vyrn-toast-success .vyrn-toast-close,[data-theme=dark] .vyrn-toast-success .vyrn-toast-close{color:#69db7c}.dark .vyrn-toast-error .vyrn-toast-close,[data-theme=dark] .vyrn-toast-error .vyrn-toast-close{color:#ff6b6b}.dark .vyrn-toast-info .vyrn-toast-close,[data-theme=dark] .vyrn-toast-info .vyrn-toast-close{color:#4dabf7}.dark .vyrn-toast-warning .vyrn-toast-close,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-close{color:#ffd43b}.vyrn-toast-close{color:#666}.vyrn-toast-close:hover{color:var(--hover-color,#495057)}.vyrn-toast-success .vyrn-toast-close:hover{color:#2f9e44}.vyrn-toast-error .vyrn-toast-close:hover{color:#e03131}.vyrn-toast-info .vyrn-toast-close:hover{color:#1c7ed6}.vyrn-toast-warning .vyrn-toast-close:hover{color:#f59f00}.dark .vyrn-toast-success .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-success .vyrn-toast-close:hover{color:#8ce99a}.dark .vyrn-toast-error .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-error .vyrn-toast-close:hover{color:#ff8787}.dark .vyrn-toast-info .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-info .vyrn-toast-close:hover{color:#74c0fc}.dark .vyrn-toast-warning .vyrn-toast-close:hover,[data-theme=dark] .vyrn-toast-warning .vyrn-toast-close:hover{color:#ffe066}.vyrn-toast-cancel{margin-top:8px;padding:0 16px 12px}.vyrn-toast-cancel-button{-webkit-tap-highlight-color:transparent;background-color:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:4px;color:#666;cursor:pointer;font-size:12px;font-weight:500;min-height:44px;padding:8px 12px;touch-action:manipulation;transition:all .2s ease}.vyrn-toast-cancel-button:hover{background-color:rgba(0,0,0,.1)}.dark .vyrn-toast-cancel-button,[data-theme=dark] .vyrn-toast-cancel-button{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.2);color:#e9ecef}.dark .vyrn-toast-cancel-button:hover,[data-theme=dark] .vyrn-toast-cancel-button:hover{background-color:hsla(0,0%,100%,.15)}.dark .vyrn-toast:not([class*=vyrn-toast-]),[data-theme=dark] .vyrn-toast:not([class*=vyrn-toast-]){background-color:#000;border:1px solid #2d2d2d}.dark .vyrn-toast:not(.vyrn-toast-success):not(.vyrn-toast-error):not(.vyrn-toast-info):not(.vyrn-toast-warning):not([class*="dark:"]) .vyrn-toast-message,[data-theme=dark] .vyrn-toast:not(.vyrn-toast-success):not(.vyrn-toast-error):not(.vyrn-toast-info):not(.vyrn-toast-warning):not([class*="dark:"]) .vyrn-toast-message{color:#e9ecef}.dark .vyrn-toast-action-default,[data-theme=dark] .vyrn-toast-action-default{background-color:#343a40;color:#f1f3f5}.dark .vyrn-toast-input,[data-theme=dark] .vyrn-toast-input{background-color:#343a40;border-color:#495057;color:#e9ecef}.dark .vyrn-toast-close,[data-theme=dark] .vyrn-toast-close{color:#adb5bd}.dark .vyrn-toast-close:hover,[data-theme=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{max-width:calc(100% - 1rem);padding:0;width:calc(100% - 1rem)}.vyrn-toast{border-radius:8px;max-width:100%;min-width:0;width:100%}.vyrn-toast-content{gap:10px;min-height:44px;padding:12px}.vyrn-toast-message{font-size:13px;hyphens:auto}.vyrn-toast-description,.vyrn-toast-message{word-wrap:break-word;line-height:1.4;overflow-wrap:break-word}.vyrn-toast-description{font-size:12px}.vyrn-toast-icon{flex-shrink:0;height:18px;margin-top:2px;width:18px}.vyrn-toast-actions{flex-wrap:wrap;gap:6px;padding:0 12px 8px}.vyrn-toast-action{flex:1 1 auto;font-size:12px;min-height:44px;min-width:44px;padding:8px 12px}.vyrn-toast-input-form{flex-direction:column;gap:8px;padding:0 12px 8px}.vyrn-toast-input{font-size:14px;min-height:44px;padding:10px 12px;width:100%}.vyrn-toast-input-submit{font-size:14px;margin-left:0;min-height:44px;padding:10px 16px;width:100%}.vyrn-toast-close{align-items:center;display:flex;height:44px;justify-content:center;min-height:44px;min-width:44px;right:8px;width:44px}.vyrn-toast-stacked{height:56px;min-height:56px}.vyrn-toast-message-wrapper{flex:1;min-width:0}.vyrn-toast-description,.vyrn-toast-message{hyphens:auto;overflow-wrap:break-word;word-break:break-word}}@media (max-width:380px){.vyrn-toast-container{max-width:calc(100% - .5rem);padding:0;width:calc(100% - .5rem)}.vyrn-toast-content{gap:8px;min-height:44px;padding:10px}.vyrn-toast-message{font-size:12px;line-height:1.4}.vyrn-toast-description{font-size:11px}.vyrn-toast-icon{height:16px;width:16px}.vyrn-toast-actions{flex-direction:column;gap:6px;padding:0 10px 6px}.vyrn-toast-action{font-size:12px;min-height:44px;padding:10px 12px;width:100%}.vyrn-toast-input-form{padding:0 10px 6px}.vyrn-toast-input,.vyrn-toast-input-submit{min-height:44px}}@media (max-height:480px) and (orientation:landscape){.vyrn-toast-container{max-height:80vh;overflow-y:auto}.vyrn-toast{margin-bottom:4px}.vyrn-toast-content{padding:12px}}',{insertAt:"top"});var v=function(o){var a=o.children,r=o.defaultPosition,l=void 0===r?"top-right":r,d=o.defaultLayout,u=void 0===d?"normal":d,v=o.maxToasts,f=void 0===v?5:v,y=o.containerClassName,m=void 0===y?"":y,h=o.showCloseButton,g=void 0===h||h,x=o.swipeDirection,b=void 0===x?"right":x,w=o.showProgressBar,k=void 0===w||w,E=o.color,C=void 0===E||E,N=o.defaultDuration,P=t.useState([]),B=P[0],S=P[1],T=t.useState(l),z=T[0],D=T[1],A=t.useState(u),M=A[0],F=A[1],L=t.useRef(new Map),R=t.useCallback((function(t){var e=Math.random().toString(36).substring(2,11),o=s(s({},t),{duration:void 0!==t.duration?t.duration:N});if(S((function(t){return i(i([],t,!0),[s(s({},o),{id:e})],!1).slice(-f)})),t.soundEffect){var a=new Audio(t.soundEffect);L.current.set(e,a),a.play().catch((function(t){return console.error("Error playing sound:",t)})).finally((function(){setTimeout((function(){L.current.delete(e),a.remove()}),1e3)}))}return e}),[f,N]);t.useEffect((function(){return function(){L.current.forEach((function(t){t.pause(),t.remove()})),L.current.clear()}}),[]);var O=t.useCallback((function(t){S((function(e){return e.filter((function(e){return e.id!==t}))}))}),[]),W=t.useCallback((function(t,e){S((function(o){return o.map((function(o){return o.id===t?s(s({},o),e):o}))}))}),[]),j=t.useCallback((function(){S([])}),[]),q=t.useMemo((function(){return{addToast:R,removeToast:O,updateToast:W,clearAllToasts:j,position:z,setPosition:D,layout:M,setLayout:F,showCloseButton:g,swipeDirection:b,showProgressBar:k,color:C}}),[R,O,W,j,z,M,g,b,k,C]),I=t.useState(!1),Y=I[0],H=I[1];return t.useEffect((function(){H(!0)}),[]),n.default.createElement(c.Provider,{value:q},a,Y&&e.createPortal(n.default.createElement(p,{toasts:B,position:z,layout:M,className:m,showCloseButton:g,swipeDirection:b,showProgressBar:k,color:C,onRemoveToast:O}),document.body))};exports.ClientToastProvider=function(t){var e=t.children,o=t.position,a=t.layout,r=void 0===a?"normal":a,s=t.maxToasts,i=t.containerClassName,c=t.showCloseButton,l=void 0===c||c,d=t.swipeDirection,u=void 0===d?"right":d,p=t.showProgressBar,f=void 0===p||p,y=t.color,m=void 0===y||y,h=t.duration;return n.default.createElement(v,{defaultPosition:o,defaultLayout:r,maxToasts:s,containerClassName:i,showCloseButton:l,swipeDirection:u,showProgressBar:f,color:m,defaultDuration:h},e)},exports.ToastProvider=v,exports.useToast=function(){var e=l(),o=e.addToast,a=e.removeToast,r=e.updateToast,n=e.clearAllToasts,i=e.position,c=e.setPosition,d=e.layout,u=e.setLayout,p=t.useCallback((function(t){return o(t)}),[o]),v=t.useCallback((function(t,e){r(t,e)}),[r]),f=t.useCallback((function(t){a(t)}),[a]),y=t.useCallback((function(){n()}),[n]),m=t.useCallback((function(t){c(t)}),[c]),h=t.useCallback((function(t){u(t)}),[u]),g=t.useCallback((function(t,e){var a="function"==typeof t?t():t,n=o({content:e.loading||"Loading...",description:e.description,type:"info",status:"loading",duration:0,cancel:e.cancel});return a.then((function(t){var o,a="function"==typeof e.success?e.success(t):e.success||"Success!";r(n,{content:a,type:"success",status:"success",duration:e.duration||3e3,cancel:void 0}),null===(o=e.onSuccess)||void 0===o||o.call(e,t)})).catch((function(t){var o,a="function"==typeof e.error?e.error(t):e.error||"Something went wrong";r(n,{content:a,type:"error",status:"error",duration:e.duration||5e3,cancel:void 0}),null===(o=e.onError)||void 0===o||o.call(e,t)})),n}),[o,r]),x=t.useCallback((function(t,e){return p(s({content:t,type:"info",status:"loading",duration:0},e))}),[p]);return{toast:p,update:v,dismiss:f,clearAll:y,changePosition:m,changeLayout:h,promise:g,loading:x,position:i,layout:d,default:function(t,e){return p(s({content:t,type:"default"},e))},info:function(t,e){return p(s({content:t,type:"info"},e))},success:function(t,e){return p(s({content:t,type:"success"},e))},warning:function(t,e){return p(s({content:t,type:"warning"},e))},error:function(t,e){return p(s({content:t,type:"error"},e))},custom:function(t,e){return p(s({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":"
|
|
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":"i0XAAA,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/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error' | 'custom';
|
|
3
3
|
export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
|
|
4
4
|
export type ToastLayout = 'stack' | 'normal';
|
|
@@ -14,24 +14,42 @@ export interface ToastInput {
|
|
|
14
14
|
submitClassName?: string;
|
|
15
15
|
className?: string;
|
|
16
16
|
}
|
|
17
|
+
export type ToastPriority = 'low' | 'normal' | 'high';
|
|
18
|
+
export type ToastStatus = 'idle' | 'loading' | 'success' | 'error';
|
|
17
19
|
export interface ToastProps {
|
|
18
20
|
id: string;
|
|
19
|
-
content: ReactNode;
|
|
21
|
+
content: React.ReactNode;
|
|
22
|
+
description?: React.ReactNode;
|
|
20
23
|
type: ToastType;
|
|
24
|
+
status?: ToastStatus;
|
|
21
25
|
duration?: number;
|
|
22
|
-
icon?: ReactNode;
|
|
26
|
+
icon?: React.ReactNode;
|
|
23
27
|
actions?: ToastAction[];
|
|
24
28
|
input?: ToastInput;
|
|
25
29
|
onClose?: () => void;
|
|
30
|
+
onClick?: () => void;
|
|
26
31
|
progress?: number;
|
|
27
32
|
theme?: 'light' | 'dark' | 'custom';
|
|
28
33
|
customStyles?: React.CSSProperties;
|
|
29
34
|
soundEffect?: string;
|
|
30
|
-
animation?: 'slide' | 'fade' | 'bounce' | 'zoom';
|
|
31
35
|
className?: string;
|
|
32
36
|
showCloseButton?: boolean;
|
|
33
37
|
swipeClose?: boolean;
|
|
34
38
|
showProgressBar?: boolean;
|
|
39
|
+
priority?: ToastPriority;
|
|
40
|
+
expandable?: boolean;
|
|
41
|
+
expanded?: boolean;
|
|
42
|
+
groupId?: string;
|
|
43
|
+
customComponent?: React.ComponentType<{
|
|
44
|
+
toast: ToastProps;
|
|
45
|
+
dismiss: () => void;
|
|
46
|
+
}>;
|
|
47
|
+
unstyled?: boolean;
|
|
48
|
+
invert?: boolean;
|
|
49
|
+
cancel?: {
|
|
50
|
+
label: string;
|
|
51
|
+
onClick?: () => void;
|
|
52
|
+
};
|
|
35
53
|
}
|
|
36
54
|
export interface ToastContextValue {
|
|
37
55
|
addToast: (toast: Omit<ToastProps, 'id'>) => string;
|
|
@@ -42,6 +60,9 @@ export interface ToastContextValue {
|
|
|
42
60
|
setPosition: (position: ToastPosition) => void;
|
|
43
61
|
layout: ToastLayout;
|
|
44
62
|
setLayout: (layout: ToastLayout) => void;
|
|
63
|
+
showCloseButton?: boolean;
|
|
64
|
+
swipeDirection?: SwipeDirection;
|
|
65
|
+
showProgressBar?: boolean;
|
|
45
66
|
color?: boolean;
|
|
46
67
|
}
|
|
47
68
|
export interface ToastProviderProps {
|
|
@@ -54,6 +75,14 @@ export interface ToastProviderProps {
|
|
|
54
75
|
swipeDirection?: SwipeDirection;
|
|
55
76
|
showProgressBar?: boolean;
|
|
56
77
|
color?: boolean;
|
|
78
|
+
defaultDuration?: number;
|
|
79
|
+
expand?: boolean;
|
|
80
|
+
richColors?: boolean;
|
|
81
|
+
closeButton?: boolean;
|
|
82
|
+
gap?: number;
|
|
83
|
+
offset?: string | number;
|
|
84
|
+
toastOptions?: Partial<Omit<ToastProps, 'id'>>;
|
|
85
|
+
theme?: 'light' | 'dark' | 'system';
|
|
57
86
|
}
|
|
58
87
|
export interface ToastTheme {
|
|
59
88
|
background: string;
|
package/package.json
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vyrn",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
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",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md",
|
|
11
|
+
"LICENSE"
|
|
12
|
+
],
|
|
8
13
|
"scripts": {
|
|
9
14
|
"build": "rollup -c",
|
|
10
15
|
"build:watch": "rollup -c -w",
|
|
@@ -12,7 +17,9 @@
|
|
|
12
17
|
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
|
|
13
18
|
"lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
|
|
14
19
|
"format": "prettier --write 'src/**/*.{js,ts,tsx}'",
|
|
15
|
-
"prepublishOnly": "npm run build"
|
|
20
|
+
"prepublishOnly": "npm run build",
|
|
21
|
+
"example:setup": "npm run build && npm link && cd example && npm install && npm link vyrn",
|
|
22
|
+
"example:dev": "cd example && npm run dev"
|
|
16
23
|
},
|
|
17
24
|
"keywords": [
|
|
18
25
|
"react",
|
|
@@ -23,8 +30,11 @@
|
|
|
23
30
|
"author": "Your Name",
|
|
24
31
|
"license": "MIT",
|
|
25
32
|
"peerDependencies": {
|
|
26
|
-
"react": "
|
|
27
|
-
"react-dom": "
|
|
33
|
+
"react": ">=17.0.0",
|
|
34
|
+
"react-dom": ">=17.0.0",
|
|
35
|
+
"framer-motion": "^11.15.0",
|
|
36
|
+
"lucide-react": "^0.469.0",
|
|
37
|
+
"next-themes": "^0.4.4"
|
|
28
38
|
},
|
|
29
39
|
"devDependencies": {
|
|
30
40
|
"@rollup/plugin-replace": "^6.0.2",
|
|
@@ -32,8 +42,8 @@
|
|
|
32
42
|
"@testing-library/react": "^13.0.0",
|
|
33
43
|
"@testing-library/react-hooks": "^7.0.2",
|
|
34
44
|
"@types/jest": "^27.4.1",
|
|
35
|
-
"@types/react": "
|
|
36
|
-
"@types/react-dom": "
|
|
45
|
+
"@types/react": ">=17.0.0 <20.0.0",
|
|
46
|
+
"@types/react-dom": ">=17.0.0 <20.0.0",
|
|
37
47
|
"@typescript-eslint/eslint-plugin": "^5.13.0",
|
|
38
48
|
"@typescript-eslint/parser": "^5.13.0",
|
|
39
49
|
"eslint": "^8.10.0",
|
|
@@ -52,9 +62,6 @@
|
|
|
52
62
|
},
|
|
53
63
|
"dependencies": {
|
|
54
64
|
"@babel/preset-react": "^7.26.3",
|
|
55
|
-
"@rollup/plugin-babel": "^6.0.4"
|
|
56
|
-
"framer-motion": "^11.15.0",
|
|
57
|
-
"lucide-react": "^0.469.0",
|
|
58
|
-
"next-themes": "^0.4.4"
|
|
65
|
+
"@rollup/plugin-babel": "^6.0.4"
|
|
59
66
|
}
|
|
60
67
|
}
|
package/.eslintrc.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
parser: '@typescript-eslint/parser',
|
|
3
|
-
extends: [
|
|
4
|
-
'plugin:react/recommended',
|
|
5
|
-
'plugin:@typescript-eslint/recommended',
|
|
6
|
-
'prettier',
|
|
7
|
-
'plugin:react-hooks/recommended',
|
|
8
|
-
],
|
|
9
|
-
parserOptions: {
|
|
10
|
-
ecmaVersion: 2020,
|
|
11
|
-
sourceType: 'module',
|
|
12
|
-
ecmaFeatures: {
|
|
13
|
-
jsx: true,
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
rules: {
|
|
17
|
-
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
|
|
18
|
-
},
|
|
19
|
-
settings: {
|
|
20
|
-
react: {
|
|
21
|
-
version: 'detect',
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
|
package/.prettierrc
DELETED
package/jest.config.js
DELETED
package/tests/Toast.test.tsx
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import { Toast } from '../src/components/Toast';
|
|
4
|
-
import { ToastContext } from '../src/context/ToastContext';
|
|
5
|
-
|
|
6
|
-
const mockRemoveToast = jest.fn();
|
|
7
|
-
|
|
8
|
-
const renderToast = (props: any) =>
|
|
9
|
-
render(
|
|
10
|
-
<ToastContext.Provider value={{ removeToast: mockRemoveToast } as any}>
|
|
11
|
-
<Toast {...props} />
|
|
12
|
-
</ToastContext.Provider>
|
|
13
|
-
);
|
|
14
|
-
|
|
15
|
-
describe('Toast', () => {
|
|
16
|
-
it('renders the message', () => {
|
|
17
|
-
renderToast({ id: '1', message: 'Test message', type: 'info' });
|
|
18
|
-
expect(screen.getByText('Test message')).toBeInTheDocument();
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
it('applies the correct CSS class based on type', () => {
|
|
22
|
-
renderToast({ id: '1', message: 'Test message', type: 'success' });
|
|
23
|
-
expect(screen.getByRole('alert')).toHaveClass('vyrn-toast-success');
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
it('calls removeToast when close button is clicked', () => {
|
|
27
|
-
renderToast({ id: '1', message: 'Test message', type: 'info' });
|
|
28
|
-
screen.getByRole('button').click();
|
|
29
|
-
expect(mockRemoveToast).toHaveBeenCalledWith('1');
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
|
package/tsconfig.json
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "es5",
|
|
4
|
-
"module": "esnext",
|
|
5
|
-
"lib": ["dom", "esnext"],
|
|
6
|
-
"jsx": "react",
|
|
7
|
-
"declaration": true,
|
|
8
|
-
"declarationDir": "dist",
|
|
9
|
-
"strict": true,
|
|
10
|
-
"moduleResolution": "node",
|
|
11
|
-
"esModuleInterop": true,
|
|
12
|
-
"skipLibCheck": true,
|
|
13
|
-
"forceConsistentCasingInFileNames": true,
|
|
14
|
-
"outDir": "dist",
|
|
15
|
-
"rootDir": "src"
|
|
16
|
-
},
|
|
17
|
-
"include": ["src"],
|
|
18
|
-
"exclude": ["node_modules", "dist", "tests"]
|
|
19
|
-
}
|
|
20
|
-
|