@choi-ui/react-toast/dist/index.mjs

This package provides easy access to toast messages in React applications.

import q from"react";import H from"react-dom";import{useState as M,useEffect as B}from"react";var i=[],y=()=>{},V=(t,e)=>{switch(e.type){case"ADD_TOAST":return[...t,{...e.payload}];case"REMOVE_TOAST":return t.filter(r=>r.id!==e.payload);default:return t}},u=t=>{i=V(i,t),y(i)},x=()=>{let[t,e]=M(i);return B(()=>(y=e,()=>{y=()=>{}}),[]),t};import{css as o,keyframes as m}from"@emotion/react";import l from"@emotion/styled";import{jsx as h,jsxs as $}from"react/jsx-runtime";var X=t=>$("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",...t,children:[h("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.421 7.42167C7.69437 7.1483 8.13758 7.1483 8.41095 7.42167L16.5776 15.5883C16.851 15.8617 16.851 16.3049 16.5776 16.5783C16.3042 16.8517 15.861 16.8517 15.5877 16.5783L7.421 8.41162C7.14763 8.13825 7.14763 7.69504 7.421 7.42167Z",fill:"white"}),h("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.5776 7.42167C16.851 7.69504 16.851 8.13825 16.5776 8.41162L8.41095 16.5783C8.13758 16.8517 7.69437 16.8517 7.421 16.5783C7.14763 16.3049 7.14763 15.8617 7.421 15.5883L15.5877 7.42167C15.861 7.1483 16.3042 7.1483 16.5776 7.42167Z",fill:"white"})]}),v=X;var D=m({"0%":{transform:"translateY(-120%)"},"100%":{transform:"translateY(0)"}}),S=m({"0%":{transform:"translateX(-120%)"},"100%":{transform:"translateX(0)"}}),C=m({"0%":{transform:"translateX(120%)"},"100%":{transform:"translateX(0)"}}),G=m({"0%":{transform:"translateY(120%)"},"100%":{transform:"translateY(0)"}}),L={top:D,"top-left":S,"top-right":C,bottom:G,"bottom-left":S,"bottom-right":C},k={type:{success:o`
      --main-color: #ffffff;
      --main-background: #55a0ee;
    `,warn:o`
      --main-color: #ffffff;
      --main-background: #f1ad0f;
    `,error:o`
      --main-color: #ffffff;
      --main-background: #c9162b;
    `,default:o`
      --main-color: #ffffff;
      --main-background: #343a40;
    `},variants:{filled:o`
      color: var(--main-color);
      background: var(--main-background);
    `,outlined:o`
      color: var(--main-background);
      background: #fff;
      border: 1px solid var(--main-background);
    `}},w=l.div`
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;

  box-sizing: content-box;
  min-width: 320px;
  max-width: 640px;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 16px;

  border-radius: 8px;

  ${({type:t})=>t&&k.type[t]}
  ${({variants:t})=>t&&k.variants[t]}
  ${({position:t})=>t&&o`
      animation: ${L[t]} 0.3s forwards;
    `}
`,A=l.button`
  height: 24px;
  padding: 0;
  background: none;
  border: none;
`,R=l(v)`
  ${({variant:t})=>t==="outlined"?o`
          > path {
            fill: var(--main-background);
          }
        `:o`
          > path {
            fill: var(--main-color);
          }
        `}
`,Y={top:o`
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  `,"top-left":o`
    top: 20px;
    left: 20px;
  `,"top-right":o`
    top: 20px;
    right: 20px;
  `,bottom:o`
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  `,"bottom-left":o`
    bottom: 20px;
    left: 20px;
  `,"bottom-right":o`
    right: 20px;
    bottom: 20px;
  `},P=l.div`
  position: fixed;
  z-index: 10000;
  overflow: hidden;
  box-sizing: border-box;

  ${({position:t})=>Y[t]};
`;import W,{useEffect as F}from"react";import{v4 as _}from"uuid";var z=t=>{let e=_();u({type:"ADD_TOAST",payload:{...t,id:e}})},g=t=>{u({type:"REMOVE_TOAST",payload:t})};import{jsx as f,jsxs as E}from"react/jsx-runtime";var Z=({id:t,message:e,duration:r,isClosable:a,type:n,custom:d,variants:p,position:c})=>(F(()=>{let s=setTimeout(()=>{g(String(t))},r);return()=>clearTimeout(s)},[t,r]),E(w,{type:n,variants:p,position:c,children:[d?.()??f("span",{children:e?.split(`
`).map((s,T)=>E(W.Fragment,{children:[s,f("br",{})]},T))}),a&&f(A,{onClick:()=>g(String(t)),children:f(R,{variant:p})})]})),I=Z;import{Fragment as N,jsx as b}from"react/jsx-runtime";var J=()=>{let e=x().reduce((r,a)=>{let n=a.position??"bottom";return(r[n]??=[]).push(a),r},{});return H.createPortal(b(N,{children:Object.keys(e).map(r=>b(P,{position:r,children:e[r].map(({id:a,message:n="",type:d="default",isClosable:p=!0,duration:c=3e3,variants:s="filled",position:T="bottom",...O})=>q.cloneElement(b(I,{}),{id:a,message:n,type:d,isClosable:p,duration:c,variants:s,position:T,key:a,...O}))},r))}),document.body)},K=J;export{K as default,z as onToast};
//# sourceMappingURL=index.mjs.map