d9-toast 2.5.40 → 2.5.41

package/dist/Toast.js

@@ -76,8 +76,8 @@ var Toast = function Toast(_ref) {
       // exit animation [reverse direction]
       var baseExit = isTop ? EXIT_ANIMATIONS.top : isBottom ? EXIT_ANIMATIONS.bottom : EXIT_ANIMATIONS.center;
       return {
-        enterAnim: "".concat(baseEnter, " 750ms cubic-bezier(0.165, 0.84, 0.44, 1)"),
-        exitAnim: "".concat(baseExit, " 750ms cubic-bezier(0.165, 0.84, 0.44, 1)")
+        enterAnim: "".concat(baseEnter, " 450ms cubic-bezier(0.165, 0.84, 0.44, 1)"),
+        exitAnim: "".concat(baseExit, "  300ms cubic-bezier(0.165, 0.84, 0.44, 1)")
       };
     }, [position]),
     enterAnim = _useMemo.enterAnim,
@@ -218,7 +218,8 @@ var Toast = function Toast(_ref) {
         className: "progress-container ".concat(type),
         style: {
           opacity: progress ? 1 : 0,
-          height: progress ? "4px" : "0px"
+          height: progress ? "4px" : "0px",
+          transition: "opacity 0.2s ease"
         },
         children: /*#__PURE__*/_jsx("div", {
           className: "toast-progress ".concat(type),

package/dist/toast.css

@@ -26,7 +26,6 @@
 
   --line-height-base: 1.5;
   --font-size-base: 14px;
-
 }
 
 /* Theme colors */
@@ -50,7 +49,6 @@
   --loading-bg: rgba(106, 31, 176, 0.1);
 
   --border-color: lch(91.6% 2.18 271.57);
-
 }
 
 .d9-toast.dark {
@@ -73,7 +71,6 @@
   --loading-bg: #ab4fff25;
 
   --border-color: #ffffff15;
-
 }
 
 /* Defaults */
@@ -149,14 +146,15 @@
 }
 .toastWrapper {
   width: 100%;
-  transition: all 0.2s ease;
+ transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), 
+              margin 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
   pointer-events: none;
 }
 
 /* Expanded mode */
 .toastWrapper.expanded {
   position: relative;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
 /* Stacked mode */
@@ -183,13 +181,24 @@
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   text-align: start;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
   will-change: transform, opacity;
   background-color: var(--primary-bg);
   color: var(--primary-color);
   border: 1px solid var(--border-color);
-  transition: transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1),
+  transition:
+    transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1),
     opacity 300ms ease;
   pointer-events: auto;
 }
@@ -396,11 +405,12 @@
 }
 
 .toast-progress {
-  height: 0.25rem;
-  background-color: transparent;
+  height: 100%;
+  width: 100%;
   animation-name: shrinkProgress;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
+  will-change: transform;
 }
 
 .toast-progress.default {
@@ -426,8 +436,8 @@
 /* Animate keyframes */
 @keyframes upToDown {
   from {
-    opacity: 0.6;
-    transform: translateY(-60px);
+    opacity: 0;
+    transform: translateY(-28px);
   }
   to {
     opacity: 1;
@@ -437,8 +447,8 @@
 
 @keyframes downToUp {
   from {
-    opacity: 0.6;
-    transform: translateY(60px);
+    opacity: 0;
+    transform: translateY(28px);
   }
   to {
     opacity: 1;
@@ -461,22 +471,22 @@
 @keyframes upToDownExit {
   from {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
   to {
-    opacity: 0.8;
-    transform: translateY(60px);
+    opacity: 0.85;
+    transform: translateY(28px) scale(0.9);
   }
 }
 
 @keyframes downToUpExit {
   from {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
   to {
-    opacity: 0.8;
-    transform: translateY(-60px);
+    opacity: 0.85;
+    transform: translateY(-28px) scale(0.9);
   }
 }
 
@@ -486,24 +496,24 @@
     transform: scale(1);
   }
   to {
-    opacity: 0.8;
-    transform: scale(0.6);
+    opacity: 0.85;
+    transform: scale(0.7);
   }
 }
 
 @keyframes shrinkProgress {
   from {
-    width: 100%;
+    transform: scaleX(1);
   }
   to {
-    width: 0%;
+    transform: scaleX(0);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .toast {
-    animation: none !important;
-    transition: none !important;
+    animation-duration: 1ms;
+    transition-duration: 1ms;
   }
 }
 
@@ -516,4 +526,4 @@
   .toastViewport.bottom-left {
     left: 0px;
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d9-toast",
-  "version": "2.5.40",
+  "version": "2.5.41",
   "description": "Customizable toast notifications for React",
   "homepage": "https://psathul073.github.io/d9-toast-docs/",
   "repository": {