react-strawberry-toast 2.2.0 → 3.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/dist/headless.d.mts +2 -1
- package/dist/headless.d.ts +2 -1
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/dist/style2.css +1 -1
- package/dist/style3.css +1 -1
- package/package.json +3 -2
package/dist/headless.d.mts
CHANGED
|
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
4
4
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
5
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
5
6
|
interface BaseOptions {
|
|
6
7
|
toastId?: string;
|
|
7
8
|
timeOut?: number;
|
|
@@ -33,7 +34,7 @@ interface ToastDataCallback {
|
|
|
33
34
|
close: () => void;
|
|
34
35
|
immediatelyClose: () => void;
|
|
35
36
|
isVisible: boolean;
|
|
36
|
-
|
|
37
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
37
38
|
}
|
|
38
39
|
type ToastState = ToastBaseState & BaseOptions;
|
|
39
40
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
package/dist/headless.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
4
4
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
5
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
5
6
|
interface BaseOptions {
|
|
6
7
|
toastId?: string;
|
|
7
8
|
timeOut?: number;
|
|
@@ -33,7 +34,7 @@ interface ToastDataCallback {
|
|
|
33
34
|
close: () => void;
|
|
34
35
|
immediatelyClose: () => void;
|
|
35
36
|
isVisible: boolean;
|
|
36
|
-
|
|
37
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
37
38
|
}
|
|
38
39
|
type ToastState = ToastBaseState & BaseOptions;
|
|
39
40
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
package/dist/index.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
3
3
|
|
|
4
4
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
5
5
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
6
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
6
7
|
interface BaseOptions {
|
|
7
8
|
toastId?: string;
|
|
8
9
|
timeOut?: number;
|
|
@@ -34,7 +35,7 @@ interface ToastDataCallback {
|
|
|
34
35
|
close: () => void;
|
|
35
36
|
immediatelyClose: () => void;
|
|
36
37
|
isVisible: boolean;
|
|
37
|
-
|
|
38
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
38
39
|
}
|
|
39
40
|
type ToastState = ToastBaseState & BaseOptions;
|
|
40
41
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
@@ -106,4 +107,4 @@ declare function ToastContainer({ className, style, position: globalPosition, co
|
|
|
106
107
|
|
|
107
108
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
108
109
|
|
|
109
|
-
export { type AddionalProps, type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
|
110
|
+
export { type AddionalProps, type BaseOptions, type CapitalizedToastType, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
3
3
|
|
|
4
4
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
5
5
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
6
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
6
7
|
interface BaseOptions {
|
|
7
8
|
toastId?: string;
|
|
8
9
|
timeOut?: number;
|
|
@@ -34,7 +35,7 @@ interface ToastDataCallback {
|
|
|
34
35
|
close: () => void;
|
|
35
36
|
immediatelyClose: () => void;
|
|
36
37
|
isVisible: boolean;
|
|
37
|
-
|
|
38
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
38
39
|
}
|
|
39
40
|
type ToastState = ToastBaseState & BaseOptions;
|
|
40
41
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
@@ -106,4 +107,4 @@ declare function ToastContainer({ className, style, position: globalPosition, co
|
|
|
106
107
|
|
|
107
108
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
108
109
|
|
|
109
|
-
export { type AddionalProps, type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
|
110
|
+
export { type AddionalProps, type BaseOptions, type CapitalizedToastType, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var G=Object.defineProperty;var gt=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var bt=Object.prototype.hasOwnProperty;var wt=(t,s)=>{for(var e in s)G(t,e,{get:s[e],enumerable:!0})},Et=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of St(s))!bt.call(t,l)&&l!==e&&G(t,l,{get:()=>s[l],enumerable:!(c=gt(s,l))||c.enumerable});return t};var _t=t=>Et(G({},"__esModule",{value:!0}),t);var Ot={};wt(Ot,{ToastContainer:()=>Ct,toast:()=>o,toastStore:()=>S,useToasts:()=>J});module.exports=_t(Ot);var at=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var B=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(s){return this.listeners.add(s),()=>{this.listeners.delete(s)}}setState(s){this.state=typeof s=="function"?s(this.state):s,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var p="react-strawberry-toast";var m=require("react/jsx-runtime");function At(){return(0,m.jsxs)("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[(0,m.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z"}),(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})]})}function rt({fill:t}){return(0,m.jsx)("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function It(){return(0,m.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function nt(){return(0,m.jsx)("svg",{fill:"#8b8b8b",strokeWidth:"0",viewBox:"0 0 512 512",height:"15px",width:"15px",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var v={success:(0,m.jsx)(At,{}),error:(0,m.jsx)(rt,{fill:"var(--toast-color-error)"}),loading:(0,m.jsx)("div",{className:`${p}__loading`}),warn:(0,m.jsx)(It,{}),info:(0,m.jsx)(rt,{fill:"var(--toast-color-info)"})};var it=t=>{let s=r=>{let n=t.toastTimers.get(r);clearTimeout(n),t.toastTimers.delete(r)},e=r=>{t.activatedToasts.add(r)},c=r=>t.activatedToasts.has(r),l=(r,n=200)=>{c(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(a=>a.toastId!==r),t.setState([...t.state])},n),s(r))},b=()=>{t.state.forEach(r=>{u(r.toastId,0)})},d=(r,n,a)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...a,updated:new Date().getTime(),data:n}:i),t.setState([...t.state])},y=r=>{let n=new Date().getTime();t.state=t.state.map(a=>a.toastId===r?{...a,pausedAt:n}:a),s(r)},u=(r,n)=>{let a=window.setTimeout(()=>{var f;t.state=t.state.map(w=>w.toastId===r?{...w,isVisible:!1}:w),t.setState([...t.state]);let i=(f=t.state.find(w=>w.toastId===r))==null?void 0:f.removeTimeOut;l(r,i)},n>2147483647?2147483647:n);t.toastTimers.set(r,a)};return{setActive:e,isActive:c,disappear:u,resume:r=>{if(t.toastTimers.has(r))return;let n=t.state.find(i=>i.toastId===r);if(!n)return;let a=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);u(r,a)},pause:y,replace:d,remove:l,allClear:b}};var S=new B,xt=at(),x=(t="default")=>(s,e={})=>{let{timeOut:c=3e3,removeTimeOut:l=200,pauseOnHover:b=!0,toastId:d,className:y,style:u,target:h,closeButton:r}=e,n=d||xt();if(o.isActive(n))throw new Error("A duplicate custom ID is not available.");let a=new Date().getTime(),i={updated:null,pausedAt:null,className:y||null,style:u||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:c>2147483647?2147483647:c,toastId:n,data:s,createdAt:a,toastType:t,pauseOnHover:b,removeTimeOut:l,closeButton:r||!1,target:h||null,isVisible:!0};return S.state.push(i),S.setState([...S.state]),n},o=(t,s={})=>x()(t,s),A=it(S);o.setActive=A.setActive;o.isActive=A.isActive;o.disappear=A.disappear;o.resume=A.resume;o.pause=A.pause;o.replace=A.replace;o.remove=A.remove;o.allClear=A.allClear;o.success=x("success");o.error=x("error");o.warn=x("warn");o.info=x("info");o.loading=x("loading");o.custom=x("custom");o.promise=(t,s,e={})=>{let{loading:c,success:l,error:b}=s,d=o.loading(c,{...e,timeOut:2147483647}),y={toastId:d,close:()=>o.disappear(d,0),immediatelyClose:()=>{o.disappear(d,0),o.remove(d,0)},icons:{success:v.success,error:v.error,warn:v.warn,loading:v.loading,info:v.info},isVisible:!0},u=e.timeOut||=3e3;t.then(h=>{o.replace(d,typeof l=="function"?l(h,y):l,{...e,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(h=>{o.replace(d,typeof b=="function"?b(h,y):b,{...e,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var N=require("react");var ct=require("react");function lt({condition:t,children:s}){let e=ct.Children.toArray(s);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(c=>t?c.key===".0":c.key===".1")}function pt({children:t}){return t}function dt({children:t}){return t}var ut=({isVisible:t,position:s})=>s?t?/top/i.test(s)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(s)?`${p}__fade-out-reverse`:`${p}__fade-out`:t?`${p}__fade-in`:`${p}__fade-out`;var H=require("react"),U=(t,s)=>{let e=(0,H.useRef)(s);(0,H.useEffect)(()=>{e.current=s},[s]),(0,H.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var E=require("react/jsx-runtime"),z=new Map;function q({toastProps:t}){let s=(0,N.useRef)(null),{toastId:e,isVisible:c,timeOut:l,containerId:b,className:d,style:y,icon:u,pauseOnActivate:h,updated:r,toastType:n,position:a,data:i,pauseOnHover:f,closeButton:w,toastsBySamePosition:C,gap:O,order:I,target:P,stack:D}=t,K=ut({isVisible:c,position:a}),Q=typeof i=="function"?i({toastId:e,close:()=>o.disappear(e,0),immediatelyClose:()=>{o.disappear(e,0),o.remove(e,0)},icons:{success:v.success,error:v.error,warn:v.warn,loading:v.loading,info:v.info},isVisible:c}):i,ft=()=>{h&&o.resume(e)},Tt=()=>{h&&o.pause(e)},Z=()=>{P&&requestAnimationFrame(()=>{if(s.current){let T=P.element.getBoundingClientRect(),[M,k]=P.offset||[0,0];s.current.style.top=`${T.y+k+window.scrollY}px`,s.current.style.left=`${T.x+M+window.scrollX}px`}})};U("focus",ft),U("blur",Tt),U("resize",Z),(0,N.useEffect)(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,l)),Z()},[e]),(0,N.useEffect)(()=>{if(!s.current||P)return;let T=s.current,M=z.get(e)||T.getBoundingClientRect().height;z.set(e,M);let k=/left/.test(a)?50:/center/.test(a)?0:-50,W=/bottom/.test(a),et=()=>{let R=W?-(O+M):0,L=C.slice(0,I).reduce((Y,X)=>Y+O+(z.get(X.toastId)||0),0);return R+(W?-L:L)};if(D){let R=C.length,L=R-1-I,Y=C[R-1],X=z.get(Y.toastId)||M,vt=1-L*.05,st=L*12,yt=W?-(X+O):0,ht=W?-st:st,F=()=>{T.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",T.style.transform=`translate(${k}%, ${yt+ht}px) scale(${vt})`,T.style.zIndex=String(I+1),R-3>I&&(T.style.opacity="0")},ot=()=>{T.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",T.style.transform=`translate(${k}%, ${et()}px) scale(1)`,T.style.opacity="1"};F();let g=T.parentElement;return g==null||g.addEventListener("mouseenter",ot),g==null||g.addEventListener("mouseleave",F),()=>{g==null||g.removeEventListener("mouseenter",ot),g==null||g.removeEventListener("mouseleave",F)}}return T.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",T.style.transform=`translate(${k}%, ${et()}px)`,()=>{z.delete(e)}},[I,D,C.length]),(0,N.useEffect)(()=>{r!==null&&o.disappear(e,l)},[r]);let tt=u||(n==="custom"||n==="default"?null:v[n]);return(0,E.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"data-testid":`container-${b||"default"}`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{f&&o.pause(e)},onMouseLeave:()=>{f&&o.resume(e)},children:(0,E.jsxs)(lt,{condition:n!=="custom",children:[(0,E.jsx)(pt,{children:(0,E.jsxs)("div",{className:d??`${p}__toast-content ${p}__toast-${n} ${o.isActive(e)?"":K}`,style:y,children:[tt&&(0,E.jsx)("span",{className:`${p}__toast-icon`,children:tt}),Q,w&&(0,E.jsx)("button",{"aria-label":"Close Toast Button","data-testid":`${e}__close-button`,className:`${p}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:(0,E.jsx)(nt,{})})]})}),(0,E.jsx)(dt,{children:(0,E.jsx)("div",{className:d??`${o.isActive(e)?"":K}`,children:Q})})]})})}var mt=require("react");var J=()=>(0,mt.useSyncExternalStore)(S.subscribe.bind(S),S.getSnapShot.bind(S),S.getSnapShot.bind(S));var $=require("react/jsx-runtime");function Ct({className:t,style:s,position:e="top-center",containerId:c="",gap:l=9,reverse:b=!1,pauseOnActivate:d=!0,stack:y=!1}){let u=J(),h=a=>{var i;return(i=a.target)==null?void 0:i.element},r=a=>c?a.containerId===c:!a.containerId,n=u.filter(a=>!h(a)).reduce((a,i)=>{let f=i.position||e;return i.position=f,a[f]=a[f]||[],a[f].push(i),a},{});return(0,$.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[u.filter(h).filter(r).map((a,i,f)=>{let w=Object.assign(a,{gap:l,order:i,toastsBySamePosition:f,pauseOnActivate:d,stack:y});return(0,$.jsx)(q,{toastProps:w},a.toastId)}),Object.entries(n).map(([a,i])=>{let f=i.filter(r),w=b&&!y?f.reverse():f,C=`${p}__z9999 ${t??`${p}__toast-container ${p}__${a}`}`;return(0,$.jsx)("div",{"data-testid":a,className:C,style:s,children:w.map((O,I,P)=>{let D=Object.assign(O,{gap:l,order:I,toastsBySamePosition:P,pauseOnActivate:d,stack:y});return(0,$.jsx)(q,{toastProps:D},O.toastId)})},a)})]})}
|
|
2
|
+
"use strict";var q=Object.defineProperty;var gt=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var Et=Object.prototype.hasOwnProperty;var bt=(t,s)=>{for(var e in s)q(t,e,{get:s[e],enumerable:!0})},wt=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of St(s))!Et.call(t,l)&&l!==e&&q(t,l,{get:()=>s[l],enumerable:!(c=gt(s,l))||c.enumerable});return t};var It=t=>wt(q({},"__esModule",{value:!0}),t);var Ot={};bt(Ot,{ToastContainer:()=>Ct,toast:()=>o,toastStore:()=>S,useToasts:()=>Q});module.exports=It(Ot);var rt=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var U=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(s){return this.listeners.add(s),()=>{this.listeners.delete(s)}}setState(s){this.state=typeof s=="function"?s(this.state):s,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var p="react-strawberry-toast";var T=require("react/jsx-runtime");function At(){return(0,T.jsx)("svg",{stroke:"none",fill:"none",strokeWidth:"0",viewBox:"2 2 20 20",strokeLinecap:"round",strokeLinejoin:"round",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})})}function nt({fill:t}){return(0,T.jsx)("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"2 2 20 20",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function _t(){return(0,T.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"56 120 912 800",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function W(){return(0,T.jsx)("svg",{fill:"var(--toast-close-button)",strokeWidth:"0",viewBox:"112 112 288 288",height:"8",width:"8",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var v={success:(0,T.jsx)(At,{}),error:(0,T.jsx)(nt,{fill:"var(--toast-color-error)"}),loading:(0,T.jsx)("div",{className:`${p}__loading`}),warn:(0,T.jsx)(_t,{}),info:(0,T.jsx)(nt,{fill:"var(--toast-color-info)"})};var it=t=>{let s=r=>{let n=t.toastTimers.get(r);clearTimeout(n),t.toastTimers.delete(r)},e=r=>{t.activatedToasts.add(r)},c=r=>t.activatedToasts.has(r),l=(r,n=200)=>{c(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(a=>a.toastId!==r),t.setState([...t.state])},n),s(r))},b=()=>{t.state.forEach(r=>{u(r.toastId,0)})},d=(r,n,a)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...a,updated:new Date().getTime(),data:n}:i),t.setState([...t.state])},y=r=>{let n=new Date().getTime();t.state=t.state.map(a=>a.toastId===r?{...a,pausedAt:n}:a),s(r)},u=(r,n)=>{let a=window.setTimeout(()=>{var m;t.state=t.state.map(w=>w.toastId===r?{...w,isVisible:!1}:w),t.setState([...t.state]);let i=(m=t.state.find(w=>w.toastId===r))==null?void 0:m.removeTimeOut;l(r,i)},n>2147483647?2147483647:n);t.toastTimers.set(r,a)};return{setActive:e,isActive:c,disappear:u,resume:r=>{if(t.toastTimers.has(r))return;let n=t.state.find(i=>i.toastId===r);if(!n)return;let a=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);u(r,a)},pause:y,replace:d,remove:l,allClear:b}};var S=new U,xt=rt(),C=(t="default")=>(s,e={})=>{let{timeOut:c=3e3,removeTimeOut:l=200,pauseOnHover:b=!0,toastId:d,className:y,style:u,target:h,closeButton:r}=e,n=d||xt();if(o.isActive(n))throw new Error("A duplicate custom ID is not available.");let a=new Date().getTime(),i={updated:null,pausedAt:null,className:y||null,style:u||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:c>2147483647?2147483647:c,toastId:n,data:s,createdAt:a,toastType:t,pauseOnHover:b,removeTimeOut:l,closeButton:r||!1,target:h||null,isVisible:!0};return S.state.push(i),S.setState([...S.state]),n},o=(t,s={})=>C()(t,s),_=it(S);o.setActive=_.setActive;o.isActive=_.isActive;o.disappear=_.disappear;o.resume=_.resume;o.pause=_.pause;o.replace=_.replace;o.remove=_.remove;o.allClear=_.allClear;o.success=C("success");o.error=C("error");o.warn=C("warn");o.info=C("info");o.loading=C("loading");o.custom=C("custom");o.promise=(t,s,e={})=>{let{loading:c,success:l,error:b}=s,d=o.loading(c,{...e,timeOut:2147483647}),y={toastId:d,close:()=>o.disappear(d,0),immediatelyClose:()=>{o.disappear(d,0),o.remove(d,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:W},isVisible:!0},u=e.timeOut||=3e3;t.then(h=>{o.replace(d,typeof l=="function"?l(h,y):l,{...e,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(h=>{o.replace(d,typeof b=="function"?b(h,y):b,{...e,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var A=require("react");var ct=require("react");function lt({condition:t,children:s}){let e=ct.Children.toArray(s);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(c=>t?c.key===".0":c.key===".1")}function pt({children:t}){return t}function dt({children:t}){return t}var ut=({isVisible:t,position:s})=>s?t?/top/i.test(s)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(s)?`${p}__fade-out-reverse`:`${p}__fade-out`:t?`${p}__fade-in`:`${p}__fade-out`;var D=require("react"),X=(t,s)=>{let e=(0,D.useRef)(s);(0,D.useEffect)(()=>{e.current=s},[s]),(0,D.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var E=require("react/jsx-runtime"),z=new Map;function K({toastProps:t}){let s=(0,A.useRef)(null),{toastId:e,isVisible:c,timeOut:l,containerId:b,className:d,style:y,icon:u,pauseOnActivate:h,updated:r,toastType:n,position:a,data:i,pauseOnHover:m,closeButton:w,toastsBySamePosition:O,gap:P,order:x,target:N,stack:B}=t,Z=ut({isVisible:c,position:a}),$=typeof i=="function"?i({toastId:e,close:()=>o.disappear(e,0),immediatelyClose:()=>{o.disappear(e,0),o.remove(e,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:W},isVisible:c}):i,ft=()=>{h&&o.resume(e)},Tt=()=>{h&&o.pause(e)},tt=()=>{N&&requestAnimationFrame(()=>{if(s.current){let f=N.element.getBoundingClientRect(),[k,R]=N.offset||[0,0];s.current.style.top=`${f.y+R+window.scrollY}px`,s.current.style.left=`${f.x+k+window.scrollX}px`}})};X("focus",ft),X("blur",Tt),X("resize",tt),(0,A.useEffect)(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,l)),tt()},[e]),(0,A.useEffect)(()=>{if(!s.current||N)return;let f=s.current,k=z.get(e)||f.getBoundingClientRect().height;z.set(e,k);let R=/left/.test(a)?50:/center/.test(a)?0:-50,V=/bottom/.test(a),st=()=>{let L=V?-(P+k):0,H=O.slice(0,x).reduce((F,G)=>F+P+(z.get(G.toastId)||0),0);return L+(V?-H:H)};if(B){let L=O.length,H=L-1-x,F=O[L-1],G=z.get(F.toastId)||k,yt=1-H*.05,ot=H*10,vt=V?-(G+P):0,ht=V?-ot:ot,j=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${R}%, ${vt+ht}px) scale(${yt})`,f.style.zIndex=String(x+1),L-3>x&&(f.style.opacity="0")},at=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${R}%, ${st()}px) scale(1)`,f.style.opacity="1"};j();let g=f.parentElement;return g==null||g.addEventListener("mouseenter",at),g==null||g.addEventListener("mouseleave",j),()=>{g==null||g.removeEventListener("mouseenter",at),g==null||g.removeEventListener("mouseleave",j)}}return f.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",f.style.transform=`translate(${R}%, ${st()}px)`,()=>{z.delete(e)}},[x,B,O.length]),(0,A.useEffect)(()=>{r!==null&&o.disappear(e,l)},[r]);let et=u||(n==="custom"||n==="default"?null:v[n]);return(0,E.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{m&&o.pause(e)},onMouseLeave:()=>{m&&o.resume(e)},children:(0,E.jsxs)(lt,{condition:n!=="custom",children:[(0,E.jsx)(pt,{children:(0,E.jsxs)("div",{className:`${p}__toast-content ${p}__toast-${n} ${o.isActive(e)?"":Z} ${d}`,style:y,children:[et&&(0,E.jsx)(E.Fragment,{children:et}),$,w&&(0,E.jsx)("button",{"aria-label":"Close Toast Button",className:`${p}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:(0,E.jsx)(W,{})})]})}),(0,E.jsx)(dt,{children:(0,A.isValidElement)($)?(0,A.cloneElement)($,{style:{...$.props.style,...y},className:`${$.props.className||""} ${o.isActive(e)?"":Z} ${d}`.trim()}):$})]})})}var mt=require("react");var Q=()=>(0,mt.useSyncExternalStore)(S.subscribe.bind(S),S.getSnapShot.bind(S),S.getSnapShot.bind(S));var M=require("react/jsx-runtime");function Ct({className:t,style:s,position:e="top-center",containerId:c="",gap:l=9,reverse:b=!1,pauseOnActivate:d=!0,stack:y=!1}){let u=Q(),h=a=>{var i;return(i=a.target)==null?void 0:i.element},r=a=>c?a.containerId===c:!a.containerId,n=u.filter(a=>!h(a)).reduce((a,i)=>{let m=i.position||e;return i.position=m,a[m]=a[m]||[],a[m].push(i),a},{});return(0,M.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[u.filter(h).filter(r).map((a,i,m)=>{let w=Object.assign(a,{gap:l,order:i,toastsBySamePosition:m,pauseOnActivate:d,stack:y});return(0,M.jsx)(K,{toastProps:w},a.toastId)}),Object.entries(n).map(([a,i])=>{let m=i.filter(r),w=b&&!y?m.reverse():m,O=`${p}__toast-container ${p}__${a} ${t}`;return(0,M.jsx)("div",{className:O,style:s,children:w.map((P,x,N)=>{let B=Object.assign(P,{gap:l,order:x,toastsBySamePosition:N,pauseOnActivate:d,stack:y});return(0,M.jsx)(K,{toastProps:B},P.toastId)})},a)})]})}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var
|
|
2
|
+
var st=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var z=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(r){return this.listeners.add(r),()=>{this.listeners.delete(r)}}setState(r){this.state=typeof r=="function"?r(this.state):r,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var c="react-strawberry-toast";import{jsx as y}from"react/jsx-runtime";function vt(){return y("svg",{stroke:"none",fill:"none",strokeWidth:"0",viewBox:"2 2 20 20",strokeLinecap:"round",strokeLinejoin:"round",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})})}function ot({fill:t}){return y("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"2 2 20 20",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function ht(){return y("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"56 120 912 800",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function L(){return y("svg",{fill:"var(--toast-close-button)",strokeWidth:"0",viewBox:"112 112 288 288",height:"8",width:"8",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var v={success:y(vt,{}),error:y(ot,{fill:"var(--toast-color-error)"}),loading:y("div",{className:`${c}__loading`}),warn:y(ht,{}),info:y(ot,{fill:"var(--toast-color-info)"})};var at=t=>{let r=a=>{let n=t.toastTimers.get(a);clearTimeout(n),t.toastTimers.delete(a)},e=a=>{t.activatedToasts.add(a)},l=a=>t.activatedToasts.has(a),m=(a,n=200)=>{l(a)&&(t.activatedToasts.delete(a),setTimeout(()=>{t.state=t.state.filter(s=>s.toastId!==a),t.setState([...t.state])},n),r(a))},S=()=>{t.state.forEach(a=>{d(a.toastId,0)})},p=(a,n,s)=>{t.state=t.state.map(i=>i.toastId===a?{...i,...s,updated:new Date().getTime(),data:n}:i),t.setState([...t.state])},T=a=>{let n=new Date().getTime();t.state=t.state.map(s=>s.toastId===a?{...s,pausedAt:n}:s),r(a)},d=(a,n)=>{let s=window.setTimeout(()=>{var u;t.state=t.state.map(E=>E.toastId===a?{...E,isVisible:!1}:E),t.setState([...t.state]);let i=(u=t.state.find(E=>E.toastId===a))==null?void 0:u.removeTimeOut;m(a,i)},n>2147483647?2147483647:n);t.toastTimers.set(a,s)};return{setActive:e,isActive:l,disappear:d,resume:a=>{if(t.toastTimers.has(a))return;let n=t.state.find(i=>i.toastId===a);if(!n)return;let s=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);d(a,s)},pause:T,replace:p,remove:m,allClear:S}};var b=new z,gt=st(),_=(t="default")=>(r,e={})=>{let{timeOut:l=3e3,removeTimeOut:m=200,pauseOnHover:S=!0,toastId:p,className:T,style:d,target:h,closeButton:a}=e,n=p||gt();if(o.isActive(n))throw new Error("A duplicate custom ID is not available.");let s=new Date().getTime(),i={updated:null,pausedAt:null,className:T||null,style:d||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:l>2147483647?2147483647:l,toastId:n,data:r,createdAt:s,toastType:t,pauseOnHover:S,removeTimeOut:m,closeButton:a||!1,target:h||null,isVisible:!0};return b.state.push(i),b.setState([...b.state]),n},o=(t,r={})=>_()(t,r),I=at(b);o.setActive=I.setActive;o.isActive=I.isActive;o.disappear=I.disappear;o.resume=I.resume;o.pause=I.pause;o.replace=I.replace;o.remove=I.remove;o.allClear=I.allClear;o.success=_("success");o.error=_("error");o.warn=_("warn");o.info=_("info");o.loading=_("loading");o.custom=_("custom");o.promise=(t,r,e={})=>{let{loading:l,success:m,error:S}=r,p=o.loading(l,{...e,timeOut:2147483647}),T={toastId:p,close:()=>o.disappear(p,0),immediatelyClose:()=>{o.disappear(p,0),o.remove(p,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:L},isVisible:!0},d=e.timeOut||=3e3;t.then(h=>{o.replace(p,typeof m=="function"?m(h,T):m,{...e,timeOut:d>2147483647?2147483647:d,toastType:"success"})}).catch(h=>{o.replace(p,typeof S=="function"?S(h,T):S,{...e,timeOut:d>2147483647?2147483647:d,toastType:"error"})})};import{useEffect as G,useRef as bt,cloneElement as wt,isValidElement as It}from"react";import{Children as St}from"react";function rt({condition:t,children:r}){let e=St.toArray(r);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(l=>t?l.key===".0":l.key===".1")}function nt({children:t}){return t}function it({children:t}){return t}var ct=({isVisible:t,position:r})=>r?t?/top/i.test(r)?`${c}__fade-in`:`${c}__fade-in-reverse`:/bottom/i.test(r)?`${c}__fade-out-reverse`:`${c}__fade-out`:t?`${c}__fade-in`:`${c}__fade-out`;import{useEffect as lt,useRef as Et}from"react";var V=(t,r)=>{let e=Et(r);lt(()=>{e.current=r},[r]),lt(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};import{Fragment as At,jsx as N,jsxs as pt}from"react/jsx-runtime";var H=new Map;function j({toastProps:t}){let r=bt(null),{toastId:e,isVisible:l,timeOut:m,containerId:S,className:p,style:T,icon:d,pauseOnActivate:h,updated:a,toastType:n,position:s,data:i,pauseOnHover:u,closeButton:E,toastsBySamePosition:x,gap:C,order:A,target:O,stack:W}=t,J=ct({isVisible:l,position:s}),P=typeof i=="function"?i({toastId:e,close:()=>o.disappear(e,0),immediatelyClose:()=>{o.disappear(e,0),o.remove(e,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:L},isVisible:l}):i,ut=()=>{h&&o.resume(e)},mt=()=>{h&&o.pause(e)},K=()=>{O&&requestAnimationFrame(()=>{if(r.current){let f=O.element.getBoundingClientRect(),[$,M]=O.offset||[0,0];r.current.style.top=`${f.y+M+window.scrollY}px`,r.current.style.left=`${f.x+$+window.scrollX}px`}})};V("focus",ut),V("blur",mt),V("resize",K),G(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,m)),K()},[e]),G(()=>{if(!r.current||O)return;let f=r.current,$=H.get(e)||f.getBoundingClientRect().height;H.set(e,$);let M=/left/.test(s)?50:/center/.test(s)?0:-50,D=/bottom/.test(s),Z=()=>{let k=D?-(C+$):0,R=x.slice(0,A).reduce((U,Y)=>U+C+(H.get(Y.toastId)||0),0);return k+(D?-R:R)};if(W){let k=x.length,R=k-1-A,U=x[k-1],Y=H.get(U.toastId)||$,ft=1-R*.05,tt=R*10,Tt=D?-(Y+C):0,yt=D?-tt:tt,X=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${M}%, ${Tt+yt}px) scale(${ft})`,f.style.zIndex=String(A+1),k-3>A&&(f.style.opacity="0")},et=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${M}%, ${Z()}px) scale(1)`,f.style.opacity="1"};X();let g=f.parentElement;return g==null||g.addEventListener("mouseenter",et),g==null||g.addEventListener("mouseleave",X),()=>{g==null||g.removeEventListener("mouseenter",et),g==null||g.removeEventListener("mouseleave",X)}}return f.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",f.style.transform=`translate(${M}%, ${Z()}px)`,()=>{H.delete(e)}},[A,W,x.length]),G(()=>{a!==null&&o.disappear(e,m)},[a]);let Q=d||(n==="custom"||n==="default"?null:v[n]);return N("output",{role:"status",ref:r,className:`${c}__toast-content-container`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{u&&o.pause(e)},onMouseLeave:()=>{u&&o.resume(e)},children:pt(rt,{condition:n!=="custom",children:[N(nt,{children:pt("div",{className:`${c}__toast-content ${c}__toast-${n} ${o.isActive(e)?"":J} ${p}`,style:T,children:[Q&&N(At,{children:Q}),P,E&&N("button",{"aria-label":"Close Toast Button",className:`${c}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:N(L,{})})]})}),N(it,{children:It(P)?wt(P,{style:{...P.props.style,...T},className:`${P.props.className||""} ${o.isActive(e)?"":J} ${p}`.trim()}):P})]})})}import{useSyncExternalStore as _t}from"react";var dt=()=>_t(b.subscribe.bind(b),b.getSnapShot.bind(b),b.getSnapShot.bind(b));import{jsx as q,jsxs as xt}from"react/jsx-runtime";function le({className:t,style:r,position:e="top-center",containerId:l="",gap:m=9,reverse:S=!1,pauseOnActivate:p=!0,stack:T=!1}){let d=dt(),h=s=>{var i;return(i=s.target)==null?void 0:i.element},a=s=>l?s.containerId===l:!s.containerId,n=d.filter(s=>!h(s)).reduce((s,i)=>{let u=i.position||e;return i.position=u,s[u]=s[u]||[],s[u].push(i),s},{});return xt("div",{id:`${c}__root`,"data-container-id":l,children:[d.filter(h).filter(a).map((s,i,u)=>{let E=Object.assign(s,{gap:m,order:i,toastsBySamePosition:u,pauseOnActivate:p,stack:T});return q(j,{toastProps:E},s.toastId)}),Object.entries(n).map(([s,i])=>{let u=i.filter(a),E=S&&!T?u.reverse():u,x=`${c}__toast-container ${c}__${s} ${t}`;return q("div",{className:x,style:r,children:E.map((C,A,O)=>{let W=Object.assign(C,{gap:m,order:A,toastsBySamePosition:O,pauseOnActivate:p,stack:T});return q(j,{toastProps:W},C.toastId)})},s)})]})}export{le as ToastContainer,o as toast,b as toastStore,dt as useToasts};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__toast-container{--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7;--toast-close-button: #8b8b8b;width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;pointer-events:none}.react-strawberry-toast__top-left{top:var(--toast-offset, 16px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__top-center{top:var(--toast-offset, 16px);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset, 16px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset, 16px) - 8px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset, 16px) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset, 16px) - 8px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:auto}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{display:flex;align-items:center;box-sizing:border-box;background-color:var(--toast-bg, #fff);padding:var(--toast-padding-x, 8px) var(--toast-padding-y, 12px);gap:var(--toast-gap, 6px);border-radius:var(--toast-border-radius, 8px);box-shadow:var(--toast-box-shadow, 2px 2px 6px 2px rgba(0, 0, 0, .1));max-width:var(--toast-max-width, 368px)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:8px;height:8px;cursor:pointer}
|
package/dist/style2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__toast-container{--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7;--toast-close-button: #8b8b8b;width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;pointer-events:none}.react-strawberry-toast__top-left{top:var(--toast-offset, 16px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__top-center{top:var(--toast-offset, 16px);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset, 16px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset, 16px) - 8px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset, 16px) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset, 16px) - 8px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:auto}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--toast-gap, 6px);border-radius:var(--toast-border-radius, 8px);box-shadow:var(--toast-box-shadow, 2px 2px 6px 2px rgba(0, 0, 0, .1));max-width:var(--toast-max-width, 368px);background-color:var(--toast-bg, #fff);padding:var(--toast-padding-x, 8px) var(--toast-padding-y, 12px)}.react-strawberry-toast__toast-success:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-success)}.react-strawberry-toast__toast-error:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-error)}.react-strawberry-toast__toast-warn:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-warn)}.react-strawberry-toast__toast-info:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-info)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:8px;height:8px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}
|
package/dist/style3.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__toast-container{--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7;--toast-close-button: #8b8b8b;width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;pointer-events:none}.react-strawberry-toast__top-left{top:var(--toast-offset, 16px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__top-center{top:var(--toast-offset, 16px);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset, 16px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset, 16px) - 8px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset, 16px) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset, 16px) - 8px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:auto}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{position:relative;box-sizing:border-box;display:flex;align-items:center;padding:var(--toast-padding-x, 8px) var(--toast-padding-y, 12px);gap:var(--toast-gap, 6px);border-radius:var(--toast-border-radius, 8px);box-shadow:var(--toast-box-shadow, 2px 2px 6px 2px rgba(0, 0, 0, .1));max-width:var(--toast-max-width, 368px);background-color:var(--toast-bg, #fff)}.react-strawberry-toast__toast-success{color:#fff;background-color:var(--toast-color-success)}.react-strawberry-toast__toast-error{color:#fff;background-color:var(--toast-color-error)}.react-strawberry-toast__toast-warn{color:#fff;background-color:var(--toast-color-warn)}.react-strawberry-toast__toast-info{color:#fff;background-color:var(--toast-color-info)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:8px;height:8px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}svg .react-strawberry-toast-path{fill:var(--toast-bg, #fff)}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-strawberry-toast",
|
|
3
3
|
"description": "A simple and customizable React toast library",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.0.0",
|
|
5
5
|
"author": "dkpark10",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
@@ -56,8 +56,9 @@
|
|
|
56
56
|
"test": "vitest",
|
|
57
57
|
"test:e2e": "npx playwright test",
|
|
58
58
|
"test:e2e:ui": "npx playwright test --ui",
|
|
59
|
+
"test:e2e:update": "npx playwright test --update-snapshots",
|
|
59
60
|
"prepare": "cp ../../README.md ./README.md",
|
|
60
|
-
"deploy": "pnpm run prepare && pnpm run test --run && pnpm run build && npm publish --access=public"
|
|
61
|
+
"deploy": "pnpm run prepare && pnpm run test --run && pnpm run test:e2e && pnpm run build && npm publish --access=public"
|
|
61
62
|
},
|
|
62
63
|
"devDependencies": {
|
|
63
64
|
"@playwright/test": "^1.50.1",
|