react-snackbar-glass 1.2.0 → 1.4.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;
@@ -334,6 +334,10 @@
   min-width: 0;
   padding-top: 1px;
 }
+.prs-item[data-layout=card] .prs-item__content[data-has-title=false] {
+  align-self: center;
+  padding-top: 0;
+}
 .prs-item__title {
   color: var(--prs-fg);
   font-size: var(--prs-title-size);
@@ -541,6 +545,102 @@
 .prs-item[data-tone=solid] .prs-item__message a {
   color: #fff;
 }
+.prs-item[data-tone=paper] .prs-item__surface {
+  --prs-blur: none;
+  --prs-inner: rgba(255, 255, 255, 0.9);
+  border-color: rgba(15, 23, 42, 0.09);
+  background: #ffffff;
+  box-shadow:
+    inset 0 1px 0 var(--prs-inner),
+    0 1px 2px rgba(15, 23, 42, 0.06),
+    0 14px 28px -22px rgba(15, 23, 42, 0.45);
+}
+@supports (color: light-dark(#000, #fff)) {
+  .prs-item[data-tone=paper] .prs-item__surface {
+    --prs-inner: light-dark( rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.05) );
+    border-color: light-dark(rgba(15, 23, 42, 0.09), rgba(255, 255, 255, 0.09));
+    background: light-dark(#ffffff, #191b23);
+    box-shadow:
+      inset 0 1px 0 var(--prs-inner),
+      0 1px 2px light-dark(rgba(15, 23, 42, 0.05), rgba(0, 0, 0, 0.5)),
+      0 14px 28px -22px light-dark(rgba(15, 23, 42, 0.4), rgba(0, 0, 0, 0.8));
+  }
+}
+.prs-item[data-tone=paper] .prs-item__surface::before {
+  opacity: 0.015;
+}
+.prs-item[data-tone=graphite] {
+  --prs-accent: var(--prs-accent-dark);
+}
+.prs-item[data-tone=graphite] .prs-item__surface {
+  --prs-fg: #f3f5fa;
+  --prs-muted: rgba(243, 245, 250, 0.74);
+  --prs-track: rgba(255, 255, 255, 0.12);
+  --prs-inner: rgba(255, 255, 255, 0.07);
+  --prs-blur: none;
+  border-color: rgba(255, 255, 255, 0.11);
+  background: #1f232c;
+  background:
+    radial-gradient(
+      120% 150% at 0% 0%,
+      rgba(255, 255, 255, 0.06),
+      transparent 55%),
+    linear-gradient(
+      180deg,
+      #2b303b,
+      #1b1f27);
+  box-shadow:
+    inset 0 1px 0 var(--prs-inner),
+    0 1px 2px rgba(0, 0, 0, 0.45),
+    0 18px 40px -26px rgba(0, 0, 0, 0.85);
+}
+.prs-item[data-tone=neon] {
+  --prs-accent: var(--prs-accent-dark);
+}
+.prs-item[data-tone=neon] .prs-item__surface {
+  --prs-fg: #f8fafc;
+  --prs-muted: rgba(248, 250, 252, 0.7);
+  --prs-track: rgba(255, 255, 255, 0.14);
+  --prs-inner: rgba(255, 255, 255, 0.05);
+  --prs-blur: none;
+  border-color: rgba(255, 255, 255, 0.14);
+  background: #080a11;
+  box-shadow:
+    inset 0 1px 0 var(--prs-inner),
+    0 18px 40px -28px rgba(0, 0, 0, 0.9),
+    0 0 30px -14px var(--prs-accent);
+}
+@supports (color: color-mix(in srgb, red, blue)) {
+  .prs-item[data-tone=neon] .prs-item__surface {
+    border-color: color-mix(in srgb, var(--prs-accent) 55%, transparent);
+    background:
+      radial-gradient(
+        120% 160% at 0% 0%,
+        color-mix(in srgb, var(--prs-accent) 26%, transparent),
+        transparent 58%),
+      radial-gradient(
+        120% 160% at 100% 100%,
+        color-mix(in srgb, var(--prs-accent) 12%, transparent),
+        transparent 62%),
+      #080a11;
+    box-shadow:
+      inset 0 1px 0 var(--prs-inner),
+      0 0 0 1px color-mix(in srgb, var(--prs-accent) 22%, transparent),
+      0 18px 40px -28px color-mix(in srgb, var(--prs-accent) 45%, transparent),
+      0 0 32px -12px color-mix(in srgb, var(--prs-accent) 70%, transparent);
+  }
+}
+.prs-item[data-tone=graphite] .prs-item__surface::before,
+.prs-item[data-tone=neon] .prs-item__surface::before {
+  opacity: 0.07;
+}
+@supports (color: color-mix(in srgb, red, blue)) {
+  .prs-item[data-tone=graphite],
+  .prs-item[data-tone=neon] {
+    --prs-accent-soft: color-mix(in srgb, var(--prs-accent) 26%, transparent);
+    --prs-accent-ring: color-mix(in srgb, var(--prs-accent) 42%, transparent);
+  }
+}
 @keyframes prs-in {
   0% {
     opacity: 0;
@@ -661,6 +761,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 +868,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.4.0",
   "description": "A glassmorphic snackbar system for React — queueing, promises, swipe-to-dismiss and first-class theming with zero runtime dependencies.",
   "keywords": [
     "react",