@madhusha_99/notification-center/core/Toast/index.cjs

Notification Center is a lightweight JavaScript library for displaying beautiful, customizable notifications powered by **Tailwind CSS**.

"use strict";var d=Object.defineProperty;var n=(l,e,t)=>e in l?d(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t;var i=(l,e,t)=>n(l,typeof e!="symbol"?e+"":e,t);class u{constructor(){i(this,"icons");i(this,"colors");this.icons={success:`<svg class="size-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd"
                  d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                  clip-rule="evenodd" />
          </svg>`,warning:`<svg class="size-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd"
                  d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                  clip-rule="evenodd" />
          </svg>`,error:`<svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd"
                  d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
                  clip-rule="evenodd" />
          </svg>`},this.colors={success:"green",warning:"yellow",error:"red"}}showNotification(e){var r;const t=(e.alertColor??this.colors[e.type])||"gray",a=(e.titleColor??t)||"gray",c=(e.textColor??t)||"gray",o=e.icon&&e.icon.length>7?e.icon:(this.icons[e.type]??this.icons[e.icon])||"",s=document.createElement("div");s.className=e.class?e.class:`fixed ${e.position} bg-${t}-50 !border-${t}-400 border-l-4 rounded-md shadow-md !p-4 flex items-center transition-all transform translate-x-full opacity-0 ${e.alertWidth??"w-80 lg:w-100"} ${e.alertHeight??"h-fit"}`,s.innerHTML=`
          <div class="shrink-0">${o}</div>
          <div class="ml-3">
              <h3 class="font-medium text-${a}-800 text-sm">${e.title}</h3>
              <div class="mt-2 text-${c}-700 text-sm">${e.text}</div>
          </div>
          <div class="ml-auto pl-3">
              <button class="text-${t}-800 hover:text-${t}-900 cursor-pointer">&times;</button>
          </div>
      `,document.body.appendChild(s),setTimeout(()=>{s.classList.remove("translate-x-full","opacity-0"),s.classList.add("translate-x-0","opacity-100")},100),(r=s.querySelector("button"))==null||r.addEventListener("click",()=>{this.closeNotification(s)}),setTimeout(()=>{this.closeNotification(s)},e.duration)}closeNotification(e){e.classList.remove("translate-x-0","opacity-100"),e.classList.add("translate-x-full","opacity-0"),setTimeout(()=>e.remove(),500)}success(e){e.type="success",this.showNotification(e)}error(e){e.type="error",this.showNotification(e)}warning(e){e.type="warning",this.showNotification(e)}show(e){e.type=void 0,this.showNotification(e)}}module.exports=u;