kitzo 2.3.42 → 2.3.43

package/dist/react/components/toast/helpers/addToastStyles.js

@@ -1,282 +1,295 @@
-const o = `.kitzo-toaster {
-  --default-bg: hsl(0, 0%, 100%);
-  --default-text: hsl(0, 0%, 10%);
-  --default-border: hsl(0, 0%, 94%);
-
-  --success-bg: var(--default-bg);
-  --success-text: var(--default-text);
-  --success-border: var(--default-border);
-
-  --warning-bg: var(--default-bg);
-  --warning-text: var(--default-text);
-  --warning-border: var(--default-border);
-
-  --error-bg: var(--default-bg);
-  --error-text: var(--default-text);
-  --error-border: var(--default-border);
-
-  --info-bg: var(--default-bg);
-  --info-text: var(--default-text);
-  --info-border: var(--default-border);
-
-  --loader-stroke: hsl(0, 0%, 20%);
-  --loader-bg: hsl(0, 0%, 80%);
-}
-
-.kitzo-toaster.kitzo-toaster-dark {
-  --default-bg: hsl(0, 0%, 15%);
-  --default-text: hsl(0, 0%, 95%);
-  --default-border: hsl(0, 0%, 17%);
-
-  --success-bg: var(--default-bg);
-  --success-text: var(--default-text);
-  --success-border: var(--default-border);
-
-  --warning-bg: var(--default-bg);
-  --warning-text: var(--default-text);
-  --warning-border: var(--default-border);
-
-  --error-bg: var(--default-bg);
-  --error-text: var(--default-text);
-  --error-border: var(--default-border);
-
-  --info-bg: var(--default-bg);
-  --info-text: var(--default-text);
-  --info-border: var(--default-border);
-
-  --loader-stroke: hsl(0, 0%, 90%);
-  --loader-bg: hsl(0, 0%, 40%);
-}
-
-.kitzo-toaster.kitzo-toaster-rich-colors {
-  --success-bg: hsl(142, 65%, 95%);
-  --success-text: hsl(142, 98%, 30%);
-  --success-border: hsl(142, 100%, 93%);
-
-  --warning-bg: hsl(35, 68%, 95%);
-  --warning-text: hsl(35, 98%, 40%);
-  --warning-border: hsl(35, 100%, 94%);
-
-  --error-bg: hsl(0, 65%, 95%);
-  --error-text: hsl(0, 98%, 40%);
-  --error-border: hsl(0, 100%, 94%);
-
-  --info-bg: hsl(210, 65%, 95%);
-  --info-text: hsl(210, 100%, 20%);
-  --info-border: hsl(210, 100%, 94%);
-}
-
-.kitzo-toaster.kitzo-toaster-rich-colors.kitzo-toaster-dark {
-  --success-bg: hsl(142, 65%, 15%);
-  --success-text: hsl(142, 98%, 70%);
-  --success-border: hsl(142, 100%, 15%);
-
-  --warning-bg: hsl(35, 65%, 15%);
-  --warning-text: hsl(35, 98%, 70%);
-  --warning-border: hsl(35, 100%, 15%);
-
-  --error-bg: hsl(0, 65%, 15%);
-  --error-text: hsl(0, 98%, 70%);
-  --error-border: hsl(0, 100%, 15%);
-
-  --info-bg: hsl(210, 65%, 15%);
-  --info-text: hsl(210, 100%, 70%);
-  --info-border: hsl(210, 100%, 16%);
-}
-
-.kitzo-toast {
-  font-family: inherit;
-  font-size: 0.875rem;
-  transition:
-    transform 280ms,
-    opacity 280ms;
-  will-change: transform, opacity;
-  touch-action: pan-y;
-}
-
-.kitzo-toast.is-swiping {
-  transition: none !important;
-}
-
-/*! Toast theme styles  */
-.kitzo-toast[data-type='default'] {
-  background-color: var(--default-bg);
-  color: var(--default-text);
-  border: 1px solid var(--default-border);
-}
-.kitzo-toast[data-type='loading'] {
-  background-color: var(--default-bg);
-  color: var(--default-text);
-  border: 1px solid var(--default-border);
-}
-
-.kitzo-toast[data-type='success'] {
-  background-color: var(--success-bg);
-  color: var(--success-text);
-  border: 1px solid var(--success-border);
-}
-
-.kitzo-toast[data-type='warning'] {
-  background-color: var(--warning-bg);
-  color: var(--warning-text);
-  border: 1px solid var(--warning-border);
-}
-
-.kitzo-toast[data-type='error'] {
-  background-color: var(--error-bg);
-  color: var(--error-text);
-  border: 1px solid var(--error-border);
-}
-
-.kitzo-toast[data-type='info'] {
-  background-color: var(--info-bg);
-  color: var(--info-text);
-  border: 1px solid var(--info-border);
-}
-
-.kitzo-toast[data-type='default'],
-.kitzo-toast[data-type='loading'],
-.kitzo-toast[data-type='success'],
-.kitzo-toast[data-type='warning'],
-.kitzo-toast[data-type='error'],
-.kitzo-toast[data-type='info'] {
-  border-radius: 0.425rem;
-  padding: 0.375rem 0.625rem;
-  box-shadow: 0 3px 8px -3px hsl(0, 0%, 0%, 0.15);
-}
-
-/*! toast transition styles */
-.kitzo-toast {
-  --swipe-x: 0px;
-  --motion-y: 0%;
-  --scale: 0.6;
-  --exit-x: 0px;
-}
-
-.kitzo-toast[data-screen-y='top'] {
-  --motion-y: -120%;
-}
-
-.kitzo-toast[data-screen-y='bottom'] {
-  --motion-y: 120%;
-}
-
-.kitzo-toast[data-status='leaving'][data-exit='swipe'] {
-  --motion-y: 0%;
-  --scale: 1;
-}
-
-.kitzo-toast[data-status='entering'] {
-  opacity: 0;
-  transform: translateX(0) translateY(var(--motion-y)) scale(var(--scale));
-}
-
-.kitzo-toast[data-status='visible'] {
-  opacity: 1;
-  transform: translateX(var(--swipe-x)) translateY(0) scale(1);
-}
-
-.kitzo-toast[data-status='leaving'] {
-  opacity: 0;
-  transform: translateX(calc(var(--swipe-x) + var(--exit-x)))
-    translateY(var(--motion-y)) scale(var(--scale));
-}
-
-.kitzo-toast[data-action='update'] {
-  animation: update 150ms ease;
-}
-
-@keyframes update {
-  0% {
-    transform: scale(0.95);
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/*! toast transfor origin */
-.kitzo-toast[data-position^='top'] {
-  transform-origin: top;
-}
-.kitzo-toast[data-position^='bottom'] {
-  transform-origin: bottom;
-}
-
-.kitzo-toast[data-animate-transform-origin='true'][data-position='top-left'] {
-  transform-origin: top left;
-}
-.kitzo-toast[data-animate-transform-origin='true'][data-position='top-center'] {
-  transform-origin: top;
-}
-.kitzo-toast[data-animate-transform-origin='true'][data-position='top-right'] {
-  transform-origin: top right;
-}
-.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-left'] {
-  transform-origin: bottom left;
-}
-.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-center'] {
-  transform-origin: bottom;
-}
-.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-right'] {
-  transform-origin: bottom right;
-}
-
-.kitzo-toast[data-status='leaving'][data-position^='top'] {
-  transform-origin: top;
-}
-.kitzo-toast[data-status='leaving'][data-position^='bottom'] {
-  transform-origin: bottom;
-}
-
-/*! svg stylings */
-.svg-container {
-  display: grid;
-  place-items: center;
-  height: 20px;
-  width: 20px;
-  overflow: hidden;
-}
-
-.loading-svg-container {
-  width: 20px;
-  height: 20px;
-  display: grid;
-  place-items: center;
-
-  .loader {
-    width: 14px;
-    height: 14px;
-    background-image: conic-gradient(
-      var(--loader-stroke) 0 25%,
-      var(--loader-bg) 0 100%
-    );
-    border-radius: 10rem;
-    position: relative;
-    animation: rotate-infinity 1000ms linear infinite;
-  }
-  .loader::before {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    border-radius: inherit;
-    background-color: var(--default-bg);
-  }
-}
-
-@keyframes rotate-infinity {
-  to {
-    rotate: 360deg;
-  }
-}`;
-function a() {
-  if (!document.getElementById("kitzo-toast-styles")) {
-    const t = document.createElement("style");
-    t.id = "kitzo-toast-styles", t.textContent = o, document.head.appendChild(t);
-  }
-}
-export {
-  a as default
-};
+const a = `.kitzo-toaster {
+  --default-bg: hsl(0, 0%, 100%);
+  --default-text: hsl(0, 0%, 10%);
+  --default-border: hsl(0, 0%, 94%);
+
+  --success-bg: var(--default-bg);
+  --success-text: var(--default-text);
+  --success-border: var(--default-border);
+
+  --warning-bg: var(--default-bg);
+  --warning-text: var(--default-text);
+  --warning-border: var(--default-border);
+
+  --error-bg: var(--default-bg);
+  --error-text: var(--default-text);
+  --error-border: var(--default-border);
+
+  --info-bg: var(--default-bg);
+  --info-text: var(--default-text);
+  --info-border: var(--default-border);
+
+  --loader-stroke: hsl(0, 0%, 20%);
+  --loader-bg: hsl(0, 0%, 80%);
+}
+
+.kitzo-toaster.kitzo-toaster-dark {
+  --default-bg: hsl(0, 0%, 15%);
+  --default-text: hsl(0, 0%, 95%);
+  --default-border: hsl(0, 0%, 17%);
+
+  --success-bg: var(--default-bg);
+  --success-text: var(--default-text);
+  --success-border: var(--default-border);
+
+  --warning-bg: var(--default-bg);
+  --warning-text: var(--default-text);
+  --warning-border: var(--default-border);
+
+  --error-bg: var(--default-bg);
+  --error-text: var(--default-text);
+  --error-border: var(--default-border);
+
+  --info-bg: var(--default-bg);
+  --info-text: var(--default-text);
+  --info-border: var(--default-border);
+
+  --loader-stroke: hsl(0, 0%, 90%);
+  --loader-bg: hsl(0, 0%, 40%);
+}
+
+.kitzo-toaster.kitzo-toaster-rich-colors {
+  --success-bg: hsl(142, 65%, 95%);
+  --success-text: hsl(142, 98%, 30%);
+  --success-border: hsl(142, 100%, 93%);
+
+  --warning-bg: hsl(35, 68%, 95%);
+  --warning-text: hsl(35, 98%, 40%);
+  --warning-border: hsl(35, 100%, 94%);
+
+  --error-bg: hsl(0, 65%, 95%);
+  --error-text: hsl(0, 98%, 40%);
+  --error-border: hsl(0, 100%, 94%);
+
+  --info-bg: hsl(210, 65%, 95%);
+  --info-text: hsl(210, 100%, 20%);
+  --info-border: hsl(210, 100%, 94%);
+}
+
+.kitzo-toaster.kitzo-toaster-rich-colors.kitzo-toaster-dark {
+  --success-bg: hsl(142, 65%, 15%);
+  --success-text: hsl(142, 98%, 70%);
+  --success-border: hsl(142, 100%, 15%);
+
+  --warning-bg: hsl(35, 65%, 15%);
+  --warning-text: hsl(35, 98%, 70%);
+  --warning-border: hsl(35, 100%, 15%);
+
+  --error-bg: hsl(0, 65%, 15%);
+  --error-text: hsl(0, 98%, 70%);
+  --error-border: hsl(0, 100%, 15%);
+
+  --info-bg: hsl(210, 65%, 15%);
+  --info-text: hsl(210, 100%, 70%);
+  --info-border: hsl(210, 100%, 16%);
+}
+
+.kitzo-toast {
+  font-family: inherit;
+  font-size: 0.875rem;
+  transition:
+    transform 280ms,
+    opacity 280ms;
+  will-change: transform, opacity;
+  touch-action: pan-y;
+}
+
+.kitzo-toast.is-swiping {
+  transition: none !important;
+}
+
+/*! Toast theme styles  */
+.kitzo-toast[data-type='default'] {
+  background-color: var(--default-bg);
+  color: var(--default-text);
+  border: 1px solid var(--default-border);
+}
+.kitzo-toast[data-type='loading'] {
+  background-color: var(--default-bg);
+  color: var(--default-text);
+  border: 1px solid var(--default-border);
+}
+
+.kitzo-toast[data-type='success'] {
+  background-color: var(--success-bg);
+  color: var(--success-text);
+  border: 1px solid var(--success-border);
+}
+
+.kitzo-toast[data-type='warning'] {
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
+  border: 1px solid var(--warning-border);
+}
+
+.kitzo-toast[data-type='error'] {
+  background-color: var(--error-bg);
+  color: var(--error-text);
+  border: 1px solid var(--error-border);
+}
+
+.kitzo-toast[data-type='info'] {
+  background-color: var(--info-bg);
+  color: var(--info-text);
+  border: 1px solid var(--info-border);
+}
+
+.kitzo-toast[data-type='default'],
+.kitzo-toast[data-type='loading'],
+.kitzo-toast[data-type='success'],
+.kitzo-toast[data-type='warning'],
+.kitzo-toast[data-type='error'],
+.kitzo-toast[data-type='info'] {
+  border-radius: 0.425rem;
+  padding: 0.375rem 0.625rem;
+  box-shadow: 0 3px 8px -3px hsl(0, 0%, 0%, 0.15);
+}
+
+/*! toast transition styles */
+.kitzo-toast {
+  --swipe-x: 0px;
+  --motion-y: 0%;
+  --scale: 0.6;
+  --exit-x: 0px;
+}
+
+.kitzo-toast[data-screen-y='top'] {
+  --motion-y: -120%;
+}
+
+.kitzo-toast[data-screen-y='bottom'] {
+  --motion-y: 120%;
+}
+
+.kitzo-toast[data-status='leaving'][data-exit='swipe'] {
+  --motion-y: 0%;
+  --scale: 1;
+}
+
+.kitzo-toast[data-status='entering'] {
+  opacity: 0;
+  transform: translateX(0) translateY(var(--motion-y)) scale(var(--scale));
+}
+
+.kitzo-toast[data-status='visible'] {
+  opacity: 1;
+  transform: translateX(var(--swipe-x)) translateY(0) scale(1);
+}
+
+.kitzo-toast[data-status='leaving'] {
+  opacity: 0;
+  transform: translateX(calc(var(--swipe-x) + var(--exit-x)))
+    translateY(var(--motion-y)) scale(var(--scale));
+}
+
+.kitzo-toast[data-update-state='updated'] {
+  animation: update 250ms ease;
+}
+.kitzo-toast[data-update-state='updated-again'] {
+  animation: update-again 250ms ease;
+}
+
+@keyframes update {
+  0% {
+    transform: scale(0.96);
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes update-again {
+  0% {
+    transform: scale(0.96);
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/*! toast transfor origin */
+.kitzo-toast[data-position^='top'] {
+  transform-origin: top;
+}
+.kitzo-toast[data-position^='bottom'] {
+  transform-origin: bottom;
+}
+
+.kitzo-toast[data-animate-transform-origin='true'][data-position='top-left'] {
+  transform-origin: top left;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='top-center'] {
+  transform-origin: top;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='top-right'] {
+  transform-origin: top right;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-left'] {
+  transform-origin: bottom left;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-center'] {
+  transform-origin: bottom;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-right'] {
+  transform-origin: bottom right;
+}
+
+.kitzo-toast[data-status='leaving'][data-position^='top'] {
+  transform-origin: top;
+}
+.kitzo-toast[data-status='leaving'][data-position^='bottom'] {
+  transform-origin: bottom;
+}
+
+/*! svg stylings */
+.svg-container {
+  display: grid;
+  place-items: center;
+  height: 20px;
+  width: 20px;
+  overflow: hidden;
+}
+
+.loading-svg-container {
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+
+  .loader {
+    width: 14px;
+    height: 14px;
+    background-image: conic-gradient(
+      var(--loader-stroke) 0 25%,
+      var(--loader-bg) 0 100%
+    );
+    border-radius: 10rem;
+    position: relative;
+    animation: rotate-infinity 1000ms linear infinite;
+  }
+  .loader::before {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    border-radius: inherit;
+    background-color: var(--default-bg);
+  }
+}
+
+@keyframes rotate-infinity {
+  to {
+    rotate: 360deg;
+  }
+}`;
+function o() {
+  if (!document.getElementById("kitzo-toast-styles")) {
+    const t = document.createElement("style");
+    t.id = "kitzo-toast-styles", t.textContent = a, document.head.appendChild(t);
+  }
+}
+export {
+  o as default
+};

package/dist/react/components/toast/helpers/createToast.js

@@ -1,49 +1,50 @@
-const n = {
-  duration: 2800,
-  showIcon: !0,
-  animateTransformOrigin: void 0,
-  swipeToClose: void 0
-};
-let r = 0;
-const d = () => crypto.randomUUID?.() ?? ++r;
-let u = 1;
-function T({
-  type: e,
-  action: s,
-  content: t,
-  isPromise: i,
-  options: a
-}) {
-  const o = typeof a == "object" && a !== null ? a : {};
-  return {
-    id: `toast-id:${o.id ?? d()}`,
-    duration: o.duration ?? n.duration,
-    showIcon: o.showIcon ?? n.showIcon,
-    animateTransformOrigin: o.animateTransformOrigin ?? n.animateTransformOrigin,
-    position: o.position,
-    icon: o.icon,
-    type: e === "default" ? o.type ?? "default" : e,
-    status: "entering",
-    zIndex: ++u,
-    content: t,
-    action: s,
-    isPromise: !!i,
-    swipeToClose: o.swipeToClose ?? n.swipeToClose
-  };
-}
-function l({ id: e, content: s, options: t }) {
-  const i = typeof t == "object" && t !== null ? t : {};
-  return {
-    ...i,
-    id: `toast-id:${e}`,
-    content: s,
-    action: "update",
-    isPromise: !1,
-    duration: i.duration ?? n.duration
-  };
-}
-export {
-  T as createToast,
-  d as genId,
-  l as updateToast
-};
+import { DEFAULT_TOASTER_ID as r } from "./listenars.js";
+const e = {
+  duration: 2800,
+  showIcon: !0,
+  animateTransformOrigin: void 0,
+  swipeToClose: void 0
+};
+let s = 0;
+const d = () => crypto.randomUUID?.() ?? ++s;
+let u = 1;
+function p({
+  type: a,
+  action: i,
+  content: n,
+  options: o
+}) {
+  const t = typeof o == "object" && o !== null ? o : {};
+  return {
+    id: `${t.id ?? d()}`,
+    toasterId: `${t.toasterId ?? r}`,
+    duration: t.duration ?? e.duration,
+    showIcon: t.showIcon ?? e.showIcon,
+    animateTransformOrigin: t.animateTransformOrigin ?? e.animateTransformOrigin,
+    position: t.position,
+    icon: t.icon,
+    type: a === "default" ? t.type ?? "default" : a,
+    status: "entering",
+    zIndex: ++u,
+    content: n,
+    action: i,
+    swipeToClose: t.swipeToClose ?? e.swipeToClose,
+    updateState: "initial"
+  };
+}
+function l({ id: a, content: i, options: n }) {
+  const o = typeof n == "object" && n !== null ? n : {};
+  return {
+    ...o,
+    id: a,
+    content: i,
+    action: "update",
+    duration: o.duration ?? e.duration,
+    toasterId: `${o.toasterId ?? r}`
+  };
+}
+export {
+  p as createToast,
+  d as genId,
+  l as updateToast
+};