@serendie/ui 3.2.0 → 3.2.1

package/dist/node_modules/@zag-js/toast/dist/toast-group.connect.js

@@ -0,0 +1,54 @@
+import { parts as E } from "./toast.anatomy.js";
+import { getRegionId as f } from "./toast.dom.js";
+import { getGroupPlacementStyle as R } from "./toast.utils.js";
+import { contains as T } from "../../dom-query/dist/node.js";
+function b(a, g) {
+  const { context: i, prop: n, send: t, refs: r, computed: u } = a;
+  return {
+    getCount() {
+      return i.get("toasts").length;
+    },
+    getToasts() {
+      return i.get("toasts");
+    },
+    getGroupProps(s = {}) {
+      const { label: c = "Notifications" } = s, { hotkey: l } = n("store").attrs, p = l.join("+").replace(/Key/g, "").replace(/Digit/g, ""), e = u("placement"), [m, d = "center"] = e.split("-");
+      return g.element({
+        ...E.group.attrs,
+        dir: n("dir"),
+        tabIndex: -1,
+        role: "region",
+        "aria-label": `${c}, ${e} (${p})`,
+        id: f(e),
+        "data-placement": e,
+        "data-side": m,
+        "data-align": d,
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        "aria-atomic": "false",
+        style: R(a, e),
+        onMouseEnter() {
+          r.get("ignoreMouseTimer").isActive() || t({ type: "REGION.POINTER_ENTER", placement: e });
+        },
+        onMouseMove() {
+          r.get("ignoreMouseTimer").isActive() || t({ type: "REGION.POINTER_ENTER", placement: e });
+        },
+        onMouseLeave() {
+          r.get("ignoreMouseTimer").isActive() || t({ type: "REGION.POINTER_LEAVE", placement: e });
+        },
+        onFocus(o) {
+          t({ type: "REGION.FOCUS", target: o.relatedTarget });
+        },
+        onBlur(o) {
+          r.get("isFocusWithin") && !T(o.currentTarget, o.relatedTarget) && queueMicrotask(() => t({ type: "REGION.BLUR" }));
+        }
+      });
+    },
+    subscribe(s) {
+      return n("store").subscribe(() => s(i.get("toasts")));
+    }
+  };
+}
+export {
+  b as groupConnect
+};

package/dist/node_modules/@zag-js/toast/dist/toast-group.machine.js

@@ -0,0 +1,236 @@
+import { getRegionEl as l } from "./toast.dom.js";
+import { trackDismissableBranch as d } from "../../dismissable/dist/dismissable-layer.js";
+import { addDomEvent as c } from "../../dom-query/dist/event.js";
+import { AnimationFrame as p } from "../../dom-query/dist/raf.js";
+import { uuid as m } from "../../utils/dist/functions.js";
+import { setup as g } from "../../core/dist/create-machine.js";
+var { guards: E, createMachine: h } = g(), { and: T } = E, W = h({
+  props({ props: e }) {
+    return {
+      dir: "ltr",
+      id: m(),
+      ...e,
+      store: e.store
+    };
+  },
+  initialState({ prop: e }) {
+    return e("store").attrs.overlap ? "overlap" : "stack";
+  },
+  refs() {
+    return {
+      lastFocusedEl: null,
+      isFocusWithin: !1,
+      isPointerWithin: !1,
+      ignoreMouseTimer: p.create(),
+      dismissableCleanup: void 0
+    };
+  },
+  context({ bindable: e }) {
+    return {
+      toasts: e(() => ({
+        defaultValue: [],
+        sync: !0,
+        hash: (t) => t.map((s) => s.id).join(",")
+      })),
+      heights: e(() => ({
+        defaultValue: [],
+        sync: !0
+      }))
+    };
+  },
+  computed: {
+    count: ({ context: e }) => e.get("toasts").length,
+    overlap: ({ prop: e }) => e("store").attrs.overlap,
+    placement: ({ prop: e }) => e("store").attrs.placement
+  },
+  effects: ["subscribeToStore", "trackDocumentVisibility", "trackHotKeyPress"],
+  watch({ track: e, context: t, action: s }) {
+    e([() => t.hash("toasts")], () => {
+      queueMicrotask(() => {
+        s(["collapsedIfEmpty", "setDismissableBranch"]);
+      });
+    });
+  },
+  exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearMouseEventTimer"],
+  on: {
+    "DOC.HOTKEY": {
+      actions: ["focusRegionEl"]
+    },
+    "REGION.BLUR": [
+      {
+        guard: T("isOverlapping", "isPointerOut"),
+        target: "overlap",
+        actions: ["collapseToasts", "resumeToasts", "restoreFocusIfPointerOut"]
+      },
+      {
+        guard: "isPointerOut",
+        target: "stack",
+        actions: ["resumeToasts", "restoreFocusIfPointerOut"]
+      },
+      {
+        actions: ["clearFocusWithin"]
+      }
+    ],
+    "TOAST.REMOVE": {
+      actions: ["removeToast", "removeHeight", "ignoreMouseEventsTemporarily"]
+    },
+    "TOAST.PAUSE": {
+      actions: ["pauseToasts"]
+    }
+  },
+  states: {
+    stack: {
+      on: {
+        "REGION.POINTER_LEAVE": [
+          {
+            guard: "isOverlapping",
+            target: "overlap",
+            actions: ["clearPointerWithin", "resumeToasts", "collapseToasts"]
+          },
+          {
+            actions: ["clearPointerWithin", "resumeToasts"]
+          }
+        ],
+        "REGION.OVERLAP": {
+          target: "overlap",
+          actions: ["collapseToasts"]
+        },
+        "REGION.FOCUS": {
+          actions: ["setLastFocusedEl", "pauseToasts"]
+        },
+        "REGION.POINTER_ENTER": {
+          actions: ["setPointerWithin", "pauseToasts"]
+        }
+      }
+    },
+    overlap: {
+      on: {
+        "REGION.STACK": {
+          target: "stack",
+          actions: ["expandToasts"]
+        },
+        "REGION.POINTER_ENTER": {
+          target: "stack",
+          actions: ["setPointerWithin", "pauseToasts", "expandToasts"]
+        },
+        "REGION.FOCUS": {
+          target: "stack",
+          actions: ["setLastFocusedEl", "pauseToasts", "expandToasts"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isOverlapping: ({ computed: e }) => e("overlap"),
+      isPointerOut: ({ refs: e }) => !e.get("isPointerWithin")
+    },
+    effects: {
+      subscribeToStore({ context: e, prop: t }) {
+        const s = t("store");
+        return e.set("toasts", s.getVisibleToasts()), s.subscribe((o) => {
+          if (o.dismiss) {
+            e.set("toasts", (i) => i.filter((a) => a.id !== o.id));
+            return;
+          }
+          e.set("toasts", (i) => {
+            const a = i.findIndex((r) => r.id === o.id);
+            return a !== -1 ? [...i.slice(0, a), { ...i[a], ...o }, ...i.slice(a + 1)] : [o, ...i];
+          });
+        });
+      },
+      trackHotKeyPress({ prop: e, send: t }) {
+        return c(document, "keydown", (o) => {
+          const { hotkey: i } = e("store").attrs;
+          i.every((r) => o[r] || o.code === r) && t({ type: "DOC.HOTKEY" });
+        }, { capture: !0 });
+      },
+      trackDocumentVisibility({ prop: e, send: t, scope: s }) {
+        const { pauseOnPageIdle: o } = e("store").attrs;
+        if (!o) return;
+        const i = s.getDoc();
+        return c(i, "visibilitychange", () => {
+          const a = i.visibilityState === "hidden";
+          t({ type: a ? "PAUSE_ALL" : "RESUME_ALL" });
+        });
+      }
+    },
+    actions: {
+      setDismissableBranch({ refs: e, context: t, computed: s, scope: o }) {
+        var n;
+        const i = t.get("toasts"), a = s("placement"), r = i.length > 0;
+        if (!r) {
+          (n = e.get("dismissableCleanup")) == null || n();
+          return;
+        }
+        if (r && e.get("dismissableCleanup"))
+          return;
+        const u = d(() => l(o, a), { defer: !0 });
+        e.set("dismissableCleanup", u);
+      },
+      clearDismissableBranch({ refs: e }) {
+        var t;
+        (t = e.get("dismissableCleanup")) == null || t();
+      },
+      focusRegionEl({ scope: e, computed: t }) {
+        queueMicrotask(() => {
+          var s;
+          (s = l(e, t("placement"))) == null || s.focus();
+        });
+      },
+      pauseToasts({ prop: e }) {
+        e("store").pause();
+      },
+      resumeToasts({ prop: e }) {
+        e("store").resume();
+      },
+      expandToasts({ prop: e }) {
+        e("store").expand();
+      },
+      collapseToasts({ prop: e }) {
+        e("store").collapse();
+      },
+      removeToast({ prop: e, event: t }) {
+        e("store").remove(t.id);
+      },
+      removeHeight({ event: e, context: t }) {
+        (e == null ? void 0 : e.id) != null && queueMicrotask(() => {
+          t.set("heights", (s) => s.filter((o) => o.id !== e.id));
+        });
+      },
+      collapsedIfEmpty({ send: e, computed: t }) {
+        !t("overlap") || t("count") > 1 || e({ type: "REGION.OVERLAP" });
+      },
+      setLastFocusedEl({ refs: e, event: t }) {
+        e.get("isFocusWithin") || !t.target || (e.set("isFocusWithin", !0), e.set("lastFocusedEl", t.target));
+      },
+      restoreFocusIfPointerOut({ refs: e }) {
+        var t;
+        !e.get("lastFocusedEl") || e.get("isPointerWithin") || ((t = e.get("lastFocusedEl")) == null || t.focus({ preventScroll: !0 }), e.set("lastFocusedEl", null), e.set("isFocusWithin", !1));
+      },
+      setPointerWithin({ refs: e }) {
+        e.set("isPointerWithin", !0);
+      },
+      clearPointerWithin({ refs: e }) {
+        var t;
+        e.set("isPointerWithin", !1), e.get("lastFocusedEl") && !e.get("isFocusWithin") && ((t = e.get("lastFocusedEl")) == null || t.focus({ preventScroll: !0 }), e.set("lastFocusedEl", null));
+      },
+      clearFocusWithin({ refs: e }) {
+        e.set("isFocusWithin", !1);
+      },
+      clearLastFocusedEl({ refs: e }) {
+        var t;
+        e.get("lastFocusedEl") && ((t = e.get("lastFocusedEl")) == null || t.focus({ preventScroll: !0 }), e.set("lastFocusedEl", null), e.set("isFocusWithin", !1));
+      },
+      ignoreMouseEventsTemporarily({ refs: e }) {
+        e.get("ignoreMouseTimer").request();
+      },
+      clearMouseEventTimer({ refs: e }) {
+        e.get("ignoreMouseTimer").cancel();
+      }
+    }
+  }
+});
+export {
+  W as groupMachine
+};

package/dist/node_modules/@zag-js/toast/dist/toast.anatomy.js

@@ -0,0 +1,13 @@
+import { createAnatomy as r } from "../../anatomy/dist/create-anatomy.js";
+var t = r("toast").parts(
+  "group",
+  "root",
+  "title",
+  "description",
+  "actionTrigger",
+  "closeTrigger"
+), a = t.build();
+export {
+  t as anatomy,
+  a as parts
+};

package/dist/node_modules/@zag-js/toast/dist/toast.connect.js

@@ -0,0 +1,102 @@
+import { dataAttr as a } from "../../dom-query/dist/shared.js";
+import { parts as d } from "./toast.anatomy.js";
+import { getCloseTriggerId as C, getDescriptionId as P, getTitleId as T, getRootId as M } from "./toast.dom.js";
+import { getGhostAfterStyle as E, getGhostBeforeStyle as G, getPlacementStyle as x } from "./toast.utils.js";
+function K(p, e) {
+  const { state: g, send: o, prop: t, scope: s, context: h, computed: k } = p, c = t("translations"), i = g.hasTag("visible"), u = g.hasTag("paused"), D = h.get("mounted"), m = k("frontmost"), l = t("parent").computed("placement"), f = t("type"), y = t("stacked"), b = t("title"), S = t("description"), n = t("action"), [v, A = "center"] = l.split("-");
+  return {
+    type: f,
+    title: b,
+    description: S,
+    placement: l,
+    visible: i,
+    paused: u,
+    closable: !!t("closable"),
+    pause() {
+      o({ type: "PAUSE" });
+    },
+    resume() {
+      o({ type: "RESUME" });
+    },
+    dismiss() {
+      o({ type: "DISMISS", src: "programmatic" });
+    },
+    getRootProps() {
+      return e.element({
+        ...d.root.attrs,
+        dir: t("dir"),
+        id: M(s),
+        "data-state": i ? "open" : "closed",
+        "data-type": f,
+        "data-placement": l,
+        "data-align": A,
+        "data-side": v,
+        "data-mounted": a(D),
+        "data-paused": a(u),
+        "data-first": a(m),
+        "data-sibling": a(!m),
+        "data-stack": a(y),
+        "data-overlap": a(!y),
+        role: "status",
+        "aria-atomic": "true",
+        "aria-describedby": S ? P(s) : void 0,
+        "aria-labelledby": b ? T(s) : void 0,
+        tabIndex: 0,
+        style: x(p, i),
+        onKeyDown(r) {
+          r.defaultPrevented || r.key == "Escape" && (o({ type: "DISMISS", src: "keyboard" }), r.preventDefault());
+        }
+      });
+    },
+    /* Leave a ghost div to avoid setting hover to false when transitioning out */
+    getGhostBeforeProps() {
+      return e.element({
+        "data-ghost": "before",
+        style: G(p, i)
+      });
+    },
+    /* Needed to avoid setting hover to false when in between toasts */
+    getGhostAfterProps() {
+      return e.element({
+        "data-ghost": "after",
+        style: E()
+      });
+    },
+    getTitleProps() {
+      return e.element({
+        ...d.title.attrs,
+        id: T(s)
+      });
+    },
+    getDescriptionProps() {
+      return e.element({
+        ...d.description.attrs,
+        id: P(s)
+      });
+    },
+    getActionTriggerProps() {
+      return e.button({
+        ...d.actionTrigger.attrs,
+        type: "button",
+        onClick(r) {
+          var I;
+          r.defaultPrevented || ((I = n == null ? void 0 : n.onClick) == null || I.call(n), o({ type: "DISMISS", src: "user" }));
+        }
+      });
+    },
+    getCloseTriggerProps() {
+      return e.button({
+        id: C(s),
+        ...d.closeTrigger.attrs,
+        type: "button",
+        "aria-label": c == null ? void 0 : c.closeTriggerLabel,
+        onClick(r) {
+          r.defaultPrevented || o({ type: "DISMISS", src: "user" });
+        }
+      });
+    }
+  };
+}
+export {
+  K as connect
+};

package/dist/node_modules/@zag-js/toast/dist/toast.dom.js

@@ -0,0 +1,10 @@
+var g = (t) => `toast-group:${t}`, r = (t, e) => t.getById(`toast-group:${e}`), o = (t) => `toast:${t.id}`, a = (t) => t.getById(o(t)), i = (t) => `toast:${t.id}:title`, d = (t) => `toast:${t.id}:description`, s = (t) => `toast${t.id}:close`;
+export {
+  s as getCloseTriggerId,
+  d as getDescriptionId,
+  r as getRegionEl,
+  g as getRegionId,
+  a as getRootEl,
+  o as getRootId,
+  i as getTitleId
+};

package/dist/node_modules/@zag-js/toast/dist/toast.machine.js

@@ -0,0 +1,234 @@
+import { getRootEl as u } from "./toast.dom.js";
+import { getToastDuration as o } from "./toast.utils.js";
+import { createMachine as f, createGuards as T } from "../../core/dist/create-machine.js";
+import { raf as m } from "../../dom-query/dist/raf.js";
+import { setRafTimeout as g } from "../../utils/dist/timers.js";
+import { ensureProps as y } from "../../utils/dist/warning.js";
+var { not: v } = T(), R = f({
+  props({ props: t }) {
+    return y(t, ["id", "type", "parent", "removeDelay"], "toast"), {
+      closable: !0,
+      ...t,
+      translations: {
+        closeTriggerLabel: "Dismiss notification",
+        ...t.translations
+      },
+      duration: o(t.duration, t.type)
+    };
+  },
+  initialState({ prop: t }) {
+    return t("type") === "loading" || t("duration") === 1 / 0 ? "visible:persist" : "visible";
+  },
+  context({ prop: t, bindable: e }) {
+    return {
+      remainingTime: e(() => ({
+        defaultValue: o(t("duration"), t("type"))
+      })),
+      createdAt: e(() => ({
+        defaultValue: Date.now()
+      })),
+      mounted: e(() => ({
+        defaultValue: !1
+      })),
+      initialHeight: e(() => ({
+        defaultValue: 0
+      }))
+    };
+  },
+  refs() {
+    return {
+      closeTimerStartTime: Date.now(),
+      lastCloseStartTimerStartTime: 0
+    };
+  },
+  computed: {
+    zIndex: ({ prop: t }) => {
+      const e = t("parent").context.get("toasts"), i = e.findIndex((s) => s.id === t("id"));
+      return e.length - i;
+    },
+    height: ({ prop: t }) => {
+      const i = t("parent").context.get("heights").find((s) => s.id === t("id"));
+      return (i == null ? void 0 : i.height) ?? 0;
+    },
+    heightIndex: ({ prop: t }) => t("parent").context.get("heights").findIndex((i) => i.id === t("id")),
+    frontmost: ({ prop: t }) => t("index") === 0,
+    heightBefore: ({ prop: t }) => {
+      const e = t("parent").context.get("heights"), i = e.findIndex((s) => s.id === t("id"));
+      return e.reduce((s, n, a) => a >= i ? s : s + n.height, 0);
+    },
+    shouldPersist: ({ prop: t }) => t("type") === "loading" || t("duration") === 1 / 0
+  },
+  watch({ track: t, prop: e, send: i }) {
+    t([() => e("message")], () => {
+      const s = e("message");
+      s && i({ type: s, src: "programmatic" });
+    }), t([() => e("type"), () => e("duration")], () => {
+      i({ type: "UPDATE" });
+    });
+  },
+  on: {
+    UPDATE: [
+      {
+        guard: "shouldPersist",
+        target: "visible:persist",
+        actions: ["resetCloseTimer"]
+      },
+      {
+        target: "visible:updating",
+        actions: ["resetCloseTimer"]
+      }
+    ],
+    MEASURE: {
+      actions: ["measureHeight"]
+    }
+  },
+  entry: ["setMounted", "measureHeight", "invokeOnVisible"],
+  effects: ["trackHeight"],
+  states: {
+    "visible:updating": {
+      tags: ["visible", "updating"],
+      effects: ["waitForNextTick"],
+      on: {
+        SHOW: {
+          target: "visible"
+        }
+      }
+    },
+    "visible:persist": {
+      tags: ["visible", "paused"],
+      on: {
+        RESUME: {
+          guard: v("isLoadingType"),
+          target: "visible",
+          actions: ["setCloseTimer"]
+        },
+        DISMISS: {
+          target: "dismissing"
+        }
+      }
+    },
+    visible: {
+      tags: ["visible"],
+      effects: ["waitForDuration"],
+      on: {
+        DISMISS: {
+          target: "dismissing"
+        },
+        PAUSE: {
+          target: "visible:persist",
+          actions: ["syncRemainingTime"]
+        }
+      }
+    },
+    dismissing: {
+      entry: ["invokeOnDismiss"],
+      effects: ["waitForRemoveDelay"],
+      on: {
+        REMOVE: {
+          target: "unmounted",
+          actions: ["notifyParentToRemove"]
+        }
+      }
+    },
+    unmounted: {
+      entry: ["invokeOnUnmount"]
+    }
+  },
+  implementations: {
+    effects: {
+      waitForRemoveDelay({ prop: t, send: e }) {
+        return g(() => {
+          e({ type: "REMOVE", src: "timer" });
+        }, t("removeDelay"));
+      },
+      waitForDuration({ send: t, context: e, computed: i }) {
+        if (!i("shouldPersist"))
+          return g(() => {
+            t({ type: "DISMISS", src: "timer" });
+          }, e.get("remainingTime"));
+      },
+      waitForNextTick({ send: t }) {
+        return g(() => {
+          t({ type: "SHOW", src: "timer" });
+        }, 0);
+      },
+      trackHeight({ scope: t, prop: e }) {
+        let i;
+        return m(() => {
+          const s = u(t);
+          if (!s) return;
+          const n = () => {
+            const d = s.style.height;
+            s.style.height = "auto";
+            const l = s.getBoundingClientRect().height;
+            s.style.height = d;
+            const h = { id: e("id"), height: l };
+            c(e("parent"), h);
+          }, a = t.getWin(), r = new a.MutationObserver(n);
+          r.observe(s, {
+            childList: !0,
+            subtree: !0,
+            characterData: !0
+          }), i = () => r.disconnect();
+        }), () => i == null ? void 0 : i();
+      }
+    },
+    guards: {
+      isLoadingType: ({ prop: t }) => t("type") === "loading",
+      shouldPersist: ({ computed: t }) => t("shouldPersist")
+    },
+    actions: {
+      setMounted({ context: t }) {
+        m(() => {
+          t.set("mounted", !0);
+        });
+      },
+      measureHeight({ scope: t, prop: e, context: i }) {
+        queueMicrotask(() => {
+          const s = u(t);
+          if (!s) return;
+          const n = s.style.height;
+          s.style.height = "auto";
+          const a = s.getBoundingClientRect().height;
+          s.style.height = n, i.set("initialHeight", a);
+          const r = { id: e("id"), height: a };
+          c(e("parent"), r);
+        });
+      },
+      setCloseTimer({ refs: t }) {
+        t.set("closeTimerStartTime", Date.now());
+      },
+      resetCloseTimer({ context: t, refs: e, prop: i }) {
+        e.set("closeTimerStartTime", Date.now()), t.set("remainingTime", o(i("duration"), i("type")));
+      },
+      syncRemainingTime({ context: t, refs: e }) {
+        t.set("remainingTime", (i) => {
+          const s = e.get("closeTimerStartTime"), n = Date.now() - s;
+          return e.set("lastCloseStartTimerStartTime", Date.now()), i - n;
+        });
+      },
+      notifyParentToRemove({ prop: t }) {
+        t("parent").send({ type: "TOAST.REMOVE", id: t("id") });
+      },
+      invokeOnDismiss({ prop: t, event: e }) {
+        var i;
+        (i = t("onStatusChange")) == null || i({ status: "dismissing", src: e.src });
+      },
+      invokeOnUnmount({ prop: t }) {
+        var e;
+        (e = t("onStatusChange")) == null || e({ status: "unmounted" });
+      },
+      invokeOnVisible({ prop: t }) {
+        var e;
+        (e = t("onStatusChange")) == null || e({ status: "visible" });
+      }
+    }
+  }
+});
+function c(t, e) {
+  const { id: i, height: s } = e;
+  t.context.set("heights", (n) => n.find((r) => r.id === i) ? n.map((r) => r.id === i ? { ...r, height: s } : r) : [{ id: i, height: s }, ...n]);
+}
+export {
+  R as machine
+};