react-snackbar-glass 1.2.0 → 1.3.0

package/dist/styles.css

@@ -121,7 +121,7 @@
   max-width: 100%;
   pointer-events: auto;
   transform-origin: bottom center;
-  animation: prs-in 440ms var(--prs-ease-spring) both;
+  animation: prs-in var(--prs-enter-duration, 440ms) var(--prs-ease-spring) both;
   will-change: transform, opacity;
 }
 .prs-item[data-size=xs] {
@@ -189,7 +189,7 @@
 }
 .prs-item[data-state=exiting] {
   pointer-events: none;
-  animation: prs-out 190ms cubic-bezier(0.4, 0, 1, 1) both;
+  animation: prs-out var(--prs-exit-duration, 190ms) cubic-bezier(0.4, 0, 1, 1) both;
 }
 .prs-item[data-dragging=true] {
   user-select: none;
@@ -661,6 +661,50 @@
   --prs-close-icon: 11px;
   margin: 0;
 }
+.prs-item[data-layout=inline] {
+  --prs-item-width: auto;
+  max-width: min(420px, 100%);
+}
+.prs-item[data-layout=inline] .prs-item__surface {
+  align-items: center;
+  column-gap: 9px;
+  padding: 8px 13px 8px 9px;
+  border-radius: var(--prs-radius-inline, 12px);
+}
+.prs-item[data-layout=inline] .prs-item__icon {
+  --prs-icon-size: 22px;
+  --prs-glyph-size: 13px;
+  --prs-icon-radius: 999px;
+  flex: none;
+  margin-top: 0;
+}
+.prs-item[data-layout=inline] .prs-item__content {
+  min-width: 0;
+  padding-top: 0;
+}
+.prs-item[data-layout=inline] .prs-item__title {
+  display: none;
+}
+.prs-item[data-layout=inline] .prs-item__message {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.prs-item[data-layout=inline] .prs-item__actions {
+  margin-top: 0;
+}
+.prs-item[data-layout=inline] .prs-action {
+  padding: 2px 8px;
+  font-size: 11.5px;
+}
+.prs-item[data-layout=inline] .prs-close {
+  --prs-close-size: 22px;
+  --prs-close-icon: 11px;
+  margin: 0;
+}
 .prs-region--minimized {
   width: auto;
   padding: var(--prs-offset);
@@ -724,4 +768,124 @@
     animation: none;
   }
 }
+.prs-item[data-state=visible][data-enter=fade] {
+  animation: prs-fade-in var(--prs-enter-duration, 260ms) ease both;
+}
+.prs-item[data-state=exiting][data-exit=fade] {
+  animation: prs-fade-out var(--prs-exit-duration, 180ms) ease both;
+}
+.prs-item[data-state=visible][data-enter=scale] {
+  animation: prs-scale-in var(--prs-enter-duration, 300ms) var(--prs-ease-out) both;
+}
+.prs-item[data-state=exiting][data-exit=scale] {
+  animation: prs-scale-out var(--prs-exit-duration, 170ms) ease both;
+}
+.prs-item[data-state=visible][data-enter=pop] {
+  animation: prs-pop-in var(--prs-enter-duration, 460ms) var(--prs-ease-spring) both;
+}
+.prs-item[data-state=exiting][data-exit=pop] {
+  animation: prs-pop-out var(--prs-exit-duration, 210ms) ease both;
+}
+.prs-item[data-state=visible][data-enter=flip] {
+  animation: prs-flip-in var(--prs-enter-duration, 420ms) var(--prs-ease-out) both;
+}
+.prs-item[data-state=exiting][data-exit=flip] {
+  animation: prs-flip-out var(--prs-exit-duration, 220ms) ease both;
+}
+.prs-item[data-state=visible][data-enter=none] {
+  animation: none;
+}
+.prs-item[data-state=exiting][data-exit=none] {
+  animation: none;
+}
+.prs-item[data-enter=none] .prs-item__icon {
+  animation: none;
+}
+@keyframes prs-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes prs-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes prs-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes prs-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+@keyframes prs-pop-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.72);
+  }
+  55% {
+    opacity: 1;
+    transform: scale(1.06);
+  }
+  78% {
+    transform: scale(0.985);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes prs-pop-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  35% {
+    opacity: 1;
+    transform: scale(1.04);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
+@keyframes prs-flip-in {
+  from {
+    opacity: 0;
+    transform: perspective(900px) rotateX(-70deg);
+  }
+  to {
+    opacity: 1;
+    transform: perspective(900px) rotateX(0deg);
+  }
+}
+@keyframes prs-flip-out {
+  from {
+    opacity: 1;
+    transform: perspective(900px) rotateX(0deg);
+  }
+  to {
+    opacity: 0;
+    transform: perspective(900px) rotateX(70deg);
+  }
+}
 /*# sourceMappingURL=index.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-snackbar-glass",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A glassmorphic snackbar system for React — queueing, promises, swipe-to-dismiss and first-class theming with zero runtime dependencies.",
   "keywords": [
     "react",