kitzo 2.3.6 → 2.3.8

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

@@ -0,0 +1,259 @@
+const r = `.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;
+}
+
+/*! toast transfor origin */
+.kitzo-toast.transform-origin-top-left {
+  transform-origin: top left;
+}
+.kitzo-toast.transform-origin-top-center {
+  transform-origin: top center;
+}
+.kitzo-toast.transform-origin-top-right {
+  transform-origin: top right;
+}
+.kitzo-toast.transform-origin-bottom-left {
+  transform-origin: bottom left;
+}
+.kitzo-toast.transform-origin-bottom-center {
+  transform-origin: bottom center;
+}
+.kitzo-toast.transform-origin-bottom-right {
+  transform-origin: bottom right;
+}
+
+/*! Toast theme styles  */
+.kitzo-toast.type-default {
+  background-color: var(--default-bg);
+  color: var(--default-text);
+  border: 1px solid var(--default-border);
+}
+.kitzo-toast.type-loading {
+  background-color: var(--default-bg);
+  color: var(--default-text);
+  border: 1px solid var(--default-border);
+}
+
+.kitzo-toast.type-success {
+  background-color: var(--success-bg);
+  color: var(--success-text);
+  border: 1px solid var(--success-border);
+}
+
+.kitzo-toast.type-warning {
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
+  border: 1px solid var(--warning-border);
+}
+
+.kitzo-toast.type-error {
+  background-color: var(--error-bg);
+  color: var(--error-text);
+  border: 1px solid var(--error-border);
+}
+
+.kitzo-toast.type-info {
+  background-color: var(--info-bg);
+  color: var(--info-text);
+  border: 1px solid var(--info-border);
+}
+
+.kitzo-toast.type-default,
+.kitzo-toast.type-loading,
+.kitzo-toast.type-success,
+.kitzo-toast.type-warning,
+.kitzo-toast.type-error,
+.kitzo-toast.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.status-entering.pos-y-top {
+  opacity: 0;
+  transform: translateY(-120%) scale(0.6);
+}
+
+.kitzo-toast.status-visible.pos-y-top {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.kitzo-toast.status-leaving.pos-y-top {
+  transform-origin: top;
+  opacity: 0;
+  transform: translateY(-120%) scale(0.6);
+}
+
+.kitzo-toast.status-entering.pos-y-bottom {
+  opacity: 0;
+  transform: translateY(120%) scale(0.6);
+}
+
+.kitzo-toast.status-visible.pos-y-bottom {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.kitzo-toast.status-leaving.pos-y-bottom {
+  transform-origin: bottom;
+  opacity: 0;
+  transform: translateY(120%) scale(0.6);
+}
+
+.action-update {
+  animation: update 150ms ease;
+}
+
+@keyframes update {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/*! 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 = r, document.head.appendChild(t);
+  }
+}
+export {
+  o as default
+};

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

@@ -0,0 +1,45 @@
+const i = {
+  duration: 2800,
+  showIcon: !0,
+  animateTransformOrigin: void 0,
+  position: "top-center"
+};
+let e = 0;
+const s = () => crypto.randomUUID?.() ?? `kitzo_toast_id_${++e}`;
+let d = 1;
+function u({
+  type: a,
+  action: r,
+  content: o,
+  options: n
+}) {
+  const t = typeof n == "object" && n !== null ? n : {};
+  return {
+    id: t.id ?? s(),
+    duration: t.duration ?? i.duration,
+    showIcon: t.showIcon ?? i.showIcon,
+    animateTransformOrigin: t.animateTransformOrigin ?? i.animateTransformOrigin,
+    position: t.position ?? i.position,
+    icon: t.icon,
+    type: a,
+    status: "entering",
+    zIndex: ++d,
+    content: o,
+    action: r
+  };
+}
+function p({ id: a, content: r, options: o }) {
+  const n = typeof o == "object" && o !== null ? o : {};
+  return {
+    ...n,
+    id: a,
+    content: r,
+    action: "update",
+    duration: n.duration ?? i.duration
+  };
+}
+export {
+  u as createToast,
+  s as genId,
+  p as updateToast
+};

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

@@ -0,0 +1,14 @@
+import n from "./addToastStyles.js";
+const e = /* @__PURE__ */ new Set();
+function s(t) {
+  return n(), e.add(t), () => {
+    e.delete(t);
+  };
+}
+function i(t) {
+  e.forEach((o) => o(t));
+}
+export {
+  i as notify,
+  s as subscribe
+};

package/dist/react/components/toast/helpers/manageToasts/addToasts.js

@@ -0,0 +1,12 @@
+import { addTimers as f } from "./timers.js";
+function m({ toast: r, setToasts: e }) {
+  let n = !1;
+  e((i) => (n = !!i.find((d) => d.id === r.id), n ? i : [r, ...i])), !n && (requestAnimationFrame(() => {
+    e(
+      (i) => i.map((d) => d.id === r.id ? { ...d, status: "visible" } : d)
+    );
+  }), f(r, e));
+}
+export {
+  m as default
+};

package/dist/react/components/toast/helpers/manageToasts/dismissToasts.js

@@ -0,0 +1,17 @@
+import { LEAVE_DELAY as d, clearAllTimers as l, clearTimer as u } from "./timers.js";
+function f({ toast: r, setToasts: m }) {
+  if (!r.id) {
+    m((e) => e.map((i) => ({ ...i, status: "leaving" }))), setTimeout(() => {
+      m([]);
+    }, d), l();
+    return;
+  }
+  u(r.id), m(
+    (e) => e.map((i) => i.id === r.id ? { ...i, status: "leaving" } : i)
+  ), setTimeout(() => {
+    m((e) => e.filter((i) => i.id !== r.id));
+  }, d);
+}
+export {
+  f as default
+};

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

@@ -0,0 +1,9 @@
+import m from "./dismissToasts.js";
+import a from "./addToasts.js";
+import f from "./updateToasts.js";
+function p({ toast: i, setToasts: d }) {
+  i.action === "dismiss" && m({ toast: i, setToasts: d }), i.action === "add" && a({ toast: i, setToasts: d }), i.action === "update" && f({ toast: i, setToasts: d });
+}
+export {
+  p as default
+};

package/dist/react/components/toast/helpers/manageToasts/timers.js

@@ -0,0 +1,39 @@
+const t = /* @__PURE__ */ new Map(), o = 600, a = 700;
+function m(e) {
+  const i = Number(e);
+  if (!isFinite(i)) return null;
+  const n = Math.max(a, i);
+  return {
+    leaving: n,
+    left: n + o
+  };
+}
+function d(e) {
+  const i = t.get(e);
+  i && (clearTimeout(i.leaving), clearTimeout(i.left), t.delete(e));
+}
+function f() {
+  t.forEach(({ leaving: e, left: i }) => {
+    clearTimeout(e), clearTimeout(i);
+  }), t.clear();
+}
+function s(e, i) {
+  const n = m(e.duration);
+  if (!n) return;
+  d(e.id);
+  const c = setTimeout(() => {
+    i(
+      (l) => l.map((r) => r.id === e.id ? { ...r, status: "leaving" } : r)
+    );
+  }, n.leaving), u = setTimeout(() => {
+    i((l) => l.filter((r) => r.id !== e.id)), t.delete(e.id);
+  }, n.left);
+  t.set(e.id, { leaving: c, left: u });
+}
+export {
+  o as LEAVE_DELAY,
+  a as MIN_VISIBLE,
+  s as addTimers,
+  f as clearAllTimers,
+  d as clearTimer
+};

package/dist/react/components/toast/helpers/manageToasts/updateToasts.js

@@ -0,0 +1,10 @@
+import { addTimers as u } from "./timers.js";
+function t({ toast: e, setToasts: d }) {
+  let r = !0;
+  d((s) => s.find((i) => i.id === e.id) ? s.map(
+    (i) => i.id === e.id ? { ...i, ...e, status: "visible" } : i
+  ) : (r = !1, s)), r && u(e, d);
+}
+export {
+  t as default
+};

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

@@ -0,0 +1,99 @@
+import { createToast as n, updateToast as c, genId as s } from "./createToast.js";
+import { notify as a } from "./listenar.js";
+const i = (r, t) => {
+  r != null && a(
+    n({
+      type: "default",
+      action: "add",
+      content: r,
+      options: t
+    })
+  );
+};
+i.dismiss = (r) => {
+  a({ action: "dismiss", id: r });
+};
+i.info = (r, t) => {
+  r != null && a(
+    n({
+      action: "add",
+      type: "info",
+      content: r,
+      options: t
+    })
+  );
+};
+i.success = (r, t) => {
+  r != null && a(
+    n({
+      action: "add",
+      type: "success",
+      content: r,
+      options: t
+    })
+  );
+};
+i.warning = (r, t) => {
+  r != null && a(
+    n({
+      action: "add",
+      type: "warning",
+      content: r,
+      options: t
+    })
+  );
+};
+i.error = (r, t) => {
+  r != null && a(
+    n({
+      action: "add",
+      type: "error",
+      content: r,
+      options: t
+    })
+  );
+};
+i.loading = (r, t) => {
+  r != null && a(
+    n({
+      action: "add",
+      type: "loading",
+      content: r,
+      options: { duration: 1 / 0, ...t }
+    })
+  );
+};
+i.custom = (r, t) => {
+  r != null && a(
+    n({
+      action: "add",
+      type: "custom",
+      content: r,
+      options: t
+    })
+  );
+};
+i.update = (r, t, e) => {
+  t != null && a(c({ id: r, content: t, options: e }));
+};
+i.promise = (async (r, t, e) => {
+  const u = s();
+  a(
+    n({
+      action: "add",
+      type: "loading",
+      content: t.loading,
+      options: { ...e, id: u, duration: 1 / 0 }
+    })
+  );
+  try {
+    const o = await r, d = typeof t.success == "function" ? await t.success(o) : t.success;
+    return i.update(u, d, { ...e, type: "success" }), o;
+  } catch (o) {
+    const d = typeof t.error == "function" ? await t.error(o) : t.error;
+    throw i.update(u, d, { ...e, type: "error" }), o;
+  }
+});
+export {
+  i as default
+};

package/dist/react/components/toast/partials/Svgs.js

@@ -0,0 +1,98 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+function i({ size: n = 16, className: o = "" }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: n,
+      height: n,
+      className: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ r("path", { d: "m9 12 2 2 4-4" })
+      ]
+    }
+  );
+}
+function c({ size: n = 16, className: o = "" }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: n,
+      height: n,
+      className: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+        /* @__PURE__ */ r("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ r("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+function s({ size: n = 16, className: o = "" }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: n,
+      height: n,
+      className: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ r("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ r("path", { d: "m9 9 6 6" })
+      ]
+    }
+  );
+}
+function h({ size: n = 16, className: o = "" }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: n,
+      height: n,
+      className: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ r("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+        /* @__PURE__ */ r("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+      ]
+    }
+  );
+}
+function d() {
+  return /* @__PURE__ */ r("div", { className: "loading-svg-container", children: /* @__PURE__ */ r("div", { className: "loader" }) });
+}
+export {
+  s as ErrorSvg,
+  h as InfoSvg,
+  d as LoadingSvg,
+  i as SuccessSvg,
+  c as WarningSvg
+};

package/dist/react/components/toast/partials/Toast.js

@@ -0,0 +1,54 @@
+import { jsxs as m, jsx as n, Fragment as e } from "react/jsx-runtime";
+import p from "../helpers/triggerToasts.js";
+import { InfoSvg as u, ErrorSvg as v, WarningSvg as h, SuccessSvg as y, LoadingSvg as x } from "./Svgs.js";
+function I({
+  t: l,
+  position: s,
+  shouldAnimateTransformOrigin: a
+}) {
+  const { id: c, type: i, action: d, content: r, status: f, showIcon: g, icon: t } = l, o = {
+    loading: /* @__PURE__ */ n(x, {}),
+    success: /* @__PURE__ */ n(y, {}),
+    warning: /* @__PURE__ */ n(h, {}),
+    error: /* @__PURE__ */ n(v, {}),
+    info: /* @__PURE__ */ n(u, {}),
+    default: null,
+    custom: null
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      style: {
+        pointerEvents: "all",
+        display: "flex",
+        alignItems: "center",
+        gap: 8
+      },
+      className: `kitzo-toast type-${i} action-${d} status-${f} pos-y-${s.split("-")[0]} pos-x-${s.split("-")[1]} ${a ? `transform-origin-${s}` : ""}`,
+      children: [
+        g && /* @__PURE__ */ n(e, { children: t ? /* @__PURE__ */ n(e, { children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              flexShrink: 0
+            },
+            className: "svg-container",
+            children: t
+          }
+        ) : /* @__PURE__ */ n(e, { children: t }) }) : /* @__PURE__ */ n(e, { children: o[i] && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, className: "svg-container", children: o[i] }) }) }),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              flex: 1
+            },
+            children: typeof r == "function" ? r(() => p.dismiss(c)) : r
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  I as default
+};