react-snackbar-glass 1.1.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;
@@ -612,4 +612,280 @@
     opacity: 0.55;
   }
 }
+.prs-item[data-compact=true] {
+  --prs-item-width: auto;
+  max-width: var(--prs-width);
+}
+.prs-item[data-compact=true] .prs-item__surface {
+  align-items: center;
+  column-gap: 8px;
+  padding: 7px 8px 7px 10px;
+  border-radius: 999px;
+}
+.prs-item[data-compact=true] .prs-item__icon {
+  --prs-icon-size: 20px;
+  --prs-glyph-size: 12px;
+  --prs-icon-radius: 999px;
+  margin-top: 0;
+}
+.prs-item[data-compact=true] .prs-item__content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding-top: 0;
+}
+.prs-item[data-compact=true] .prs-item__title {
+  display: none;
+}
+.prs-item[data-compact=true] .prs-item__message,
+.prs-item[data-compact=true] .prs-item__content[data-has-title=false] .prs-item__message {
+  max-width: 46ch;
+  overflow: hidden;
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1.35;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.prs-item[data-compact=true] .prs-item__actions {
+  flex-shrink: 0;
+  margin-top: 0;
+}
+.prs-item[data-compact=true] .prs-action {
+  padding: 3px 9px;
+  font-size: 11.5px;
+}
+.prs-item[data-compact=true] .prs-close {
+  --prs-close-size: 22px;
+  --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);
+}
+.prs-minimized {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  appearance: none;
+  margin: 0;
+  padding: 8px 15px 8px 12px;
+  border: 1px solid var(--prs-border);
+  border-radius: 999px;
+  background: var(--prs-surface);
+  color: var(--prs-fg);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 560;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: var(--prs-shadow), inset 0 1px 0 var(--prs-inner);
+  -webkit-backdrop-filter: var(--prs-blur);
+  backdrop-filter: var(--prs-blur);
+  animation: prs-minimized-in 220ms var(--prs-ease-out);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+.prs-minimized:hover {
+  border-color: var(--prs-accent-ring);
+  box-shadow: var(--prs-shadow), 0 0 0 3px var(--prs-accent-soft);
+}
+.prs-minimized:active {
+  transform: scale(0.97);
+}
+.prs-minimized:focus-visible {
+  outline: 2px solid var(--prs-accent);
+  outline-offset: 2px;
+}
+.prs-minimized__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--prs-accent);
+  box-shadow: 0 0 0 3px var(--prs-accent-soft);
+}
+@keyframes prs-minimized-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 6px, 0) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .prs-minimized {
+    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.1.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",