@koide-labs/ui 0.0.15 → 0.1.1

package/dist/components/toaster/toaster.js

@@ -0,0 +1,923 @@
+import { jsx as D, jsxs as re } from "react/jsx-runtime";
+import { c as Ne } from "../../clsx-OuTLNxxd.js";
+import { T as it, a as Re, u as at } from "../../use-toast-manager-Dq-44AuW.js";
+import { View as Pe } from "../view/view.js";
+import { Heading as ct } from "../heading/heading.js";
+import { Text as ut } from "../text/text.js";
+import { IconButton as lt } from "../icon-button/icon-button.js";
+import { Button as ft } from "../button/button.js";
+import { Surface as dt } from "../surface/surface.js";
+import * as e from "react";
+import { o as ne } from "../../owner-rKN292Q9.js";
+import { u as U } from "../../useStableCallback-DKZHlUAT.js";
+import { T as Oe } from "../../useTimeout-BNni6aw5.js";
+import { d as pe, f as se, m as De, h as Ee } from "../../element-u5WgOZX1.js";
+import { F as pt } from "../../FloatingPortalLite-_ECdFE7b.js";
+import { v as mt } from "../../visuallyHidden-CpJ-mhai.js";
+import { F as Te } from "../../FloatingPortal-BQsQhvIr.js";
+import { u as ie } from "../../useRenderElement-DngNDu_P.js";
+import { g as Ce } from "../../floating-ui.utils.dom-cbi420Pg.js";
+import * as ht from "react-dom";
+import { i as gt } from "../../inertValue-BTpPjX30.js";
+import { u as me } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { f as _t } from "../../formatErrorMessage-BqPuTBN-.js";
+import { u as yt, t as wt } from "../../useOpenChangeComplete-BHd-N7Ig.js";
+import { u as He } from "../../useId-C5kyn6tA.js";
+import { u as vt } from "../../useButton-d3_JgBNr.js";
+import '../../toaster.css';let Fe = 0;
+function xt(a) {
+  return Fe += 1, `${a}-${Math.random().toString(36).slice(2, 6)}-${Fe}`;
+}
+function be(a, c) {
+  if (typeof a == "string")
+    return {
+      description: a
+    };
+  if (typeof a == "function") {
+    const h = a(c);
+    return typeof h == "string" ? {
+      description: h
+    } : h;
+  }
+  return a;
+}
+const ke = function(c) {
+  const {
+    children: h,
+    timeout: s = 5e3,
+    limit: F = 3,
+    toastManager: M
+  } = c, [v, u] = e.useState([]), [g, t] = e.useState(!1), [d, y] = e.useState(!1), [o, E] = e.useState(null);
+  v.length === 0 && (g && t(!1), d && y(!1));
+  const R = g || d, N = e.useRef(/* @__PURE__ */ new Map()), z = e.useRef(null), C = e.useRef(!0), X = e.useRef(!1);
+  function j(n) {
+    const m = pe(ne(z.current));
+    if (!z.current || !se(z.current, m) || !De(m))
+      return;
+    const w = v.findIndex((r) => r.id === n);
+    let i = null, _ = w + 1;
+    for (; _ < v.length; ) {
+      if (v[_].transitionStatus !== "ending") {
+        i = v[_];
+        break;
+      }
+      _ += 1;
+    }
+    if (!i)
+      for (_ = w - 1; _ >= 0; ) {
+        if (v[_].transitionStatus !== "ending") {
+          i = v[_];
+          break;
+        }
+        _ -= 1;
+      }
+    i ? i.ref?.current?.focus() : o?.focus({
+      preventScroll: !0
+    });
+  }
+  const b = U(() => {
+    X.current || (X.current = !0, N.current.forEach((n) => {
+      if (n.timeout) {
+        n.timeout.clear();
+        const m = Date.now() - n.start, w = n.delay - m;
+        n.remaining = w > 0 ? w : 0;
+      }
+    }));
+  }), I = U(() => {
+    X.current && (X.current = !1, N.current.forEach((n, m) => {
+      n.remaining = n.remaining > 0 ? n.remaining : n.delay, n.timeout ??= Oe.create(), n.timeout.start(n.remaining, () => {
+        N.current.delete(m), n.callback();
+      }), n.start = Date.now();
+    }));
+  }), L = U((n) => {
+    u((i) => {
+      const _ = i.map((p) => p.id === n ? {
+        ...p,
+        transitionStatus: "ending",
+        height: 0
+      } : p), r = _.filter((p) => p.transitionStatus !== "ending");
+      return _.map((p) => {
+        if (p.transitionStatus === "ending")
+          return p;
+        const x = r.indexOf(p) >= F;
+        return {
+          ...p,
+          limited: x
+        };
+      });
+    });
+    const m = N.current.get(n);
+    m && m.timeout && (m.timeout.clear(), N.current.delete(n)), v.find((i) => i.id === n)?.onClose?.(), j(n), v.length === 1 && (t(!1), y(!1));
+  }), q = U((n) => {
+    u((w) => w.filter((i) => i.id !== n)), v.find((w) => w.id === n)?.onRemove?.();
+  }), B = U((n, m, w) => {
+    const i = Date.now(), _ = C.current && !g && !d, r = _ ? Oe.create() : void 0;
+    r?.start(m, () => {
+      N.current.delete(n), w();
+    }), N.current.set(n, {
+      timeout: r,
+      start: _ ? i : 0,
+      delay: m,
+      remaining: m,
+      callback: w
+    });
+  }), G = U((n) => {
+    const m = n.id || xt("toast"), w = {
+      ...n,
+      id: m,
+      transitionStatus: "starting"
+    };
+    u((_) => {
+      const r = [w, ..._], p = r.filter((x) => x.transitionStatus !== "ending");
+      if (p.length > F) {
+        const x = p.length - F, T = p.slice(-x);
+        return r.map((H) => T.some((Z) => Z.id === H.id) ? {
+          ...H,
+          limited: !0
+        } : {
+          ...H,
+          limited: !1
+        });
+      }
+      return r.map((x) => ({
+        ...x,
+        limited: !1
+      }));
+    });
+    const i = w.timeout ?? s;
+    return w.type !== "loading" && i > 0 && B(m, i, () => L(m)), (g || d || !C.current) && b(), m;
+  }), K = U((n, m) => {
+    u((w) => w.map((i) => i.id === n ? {
+      ...i,
+      ...m
+    } : i));
+  }), O = U((n, m) => {
+    const w = be(m.loading), i = G({
+      ...w,
+      type: "loading"
+    }), _ = n.then((r) => {
+      const p = be(m.success, r);
+      K(i, {
+        ...p,
+        type: "success"
+      });
+      const x = p.timeout ?? s;
+      return x > 0 && B(i, x, () => L(i)), (g || d || !C.current) && b(), r;
+    }).catch((r) => {
+      const p = be(m.error, r);
+      K(i, {
+        ...p,
+        type: "error"
+      });
+      const x = p.timeout ?? s;
+      return x > 0 && B(i, x, () => L(i)), (g || d || !C.current) && b(), Promise.reject(r);
+    });
+    return {}.hasOwnProperty.call(m, "setPromise") && m.setPromise(_), _;
+  });
+  e.useEffect(function() {
+    return M ? M[" subscribe"](({
+      action: w,
+      options: i
+    }) => {
+      const _ = i.id;
+      w === "promise" && i.promise ? O(i.promise, i) : w === "update" && _ ? K(_, i) : w === "close" && _ ? L(_) : G(i);
+    }) : void 0;
+  }, [G, K, B, s, M, O, L]);
+  const J = e.useMemo(() => ({
+    toasts: v,
+    setToasts: u,
+    hovering: g,
+    setHovering: t,
+    focused: d,
+    setFocused: y,
+    expanded: R,
+    add: G,
+    close: L,
+    remove: q,
+    update: K,
+    promise: O,
+    pauseTimers: b,
+    resumeTimers: I,
+    prevFocusElement: o,
+    setPrevFocusElement: E,
+    viewportRef: z,
+    scheduleTimer: B,
+    windowFocusedRef: C
+  }), [G, L, d, g, R, b, o, O, q, I, B, v, K]);
+  return /* @__PURE__ */ D(it.Provider, {
+    value: J,
+    children: h
+  });
+};
+process.env.NODE_ENV !== "production" && (ke.displayName = "ToastProvider");
+const Ve = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Ve.displayName = "ToastViewportContext");
+let Tt = /* @__PURE__ */ (function(a) {
+  return a.frontmostHeight = "--toast-frontmost-height", a;
+})({});
+const Be = /* @__PURE__ */ e.forwardRef(function(c, h) {
+  const {
+    render: s,
+    className: F,
+    children: M,
+    ...v
+  } = c, {
+    toasts: u,
+    pauseTimers: g,
+    resumeTimers: t,
+    setHovering: d,
+    setFocused: y,
+    viewportRef: o,
+    windowFocusedRef: E,
+    prevFocusElement: R,
+    setPrevFocusElement: N,
+    expanded: z,
+    focused: C
+  } = Re(), X = e.useRef(!1), j = e.useRef(!1), b = u.length, I = u[0]?.height ?? 0, L = e.useMemo(() => u.some((r) => r.transitionStatus === "ending"), [u]);
+  e.useEffect(() => {
+    if (!o.current)
+      return;
+    function r(x) {
+      b !== 0 && x.key === "F6" && x.target !== o.current && (x.preventDefault(), N(pe(ne(o.current))), o.current?.focus({
+        preventScroll: !0
+      }), g(), y(!0));
+    }
+    const p = Ce(o.current);
+    return p.addEventListener("keydown", r), () => {
+      p.removeEventListener("keydown", r);
+    };
+  }, [g, y, N, b, o]), e.useEffect(() => {
+    if (!o.current || !b)
+      return;
+    const r = Ce(o.current);
+    function p(T) {
+      T.target === r && (E.current = !1, g());
+    }
+    function x(T) {
+      if (T.relatedTarget || T.target === r)
+        return;
+      const H = Ee(T), Z = pe(ne(o.current));
+      (!se(o.current, H) || !De(Z)) && t(), setTimeout(() => {
+        E.current = !0;
+      });
+    }
+    return r.addEventListener("blur", p, !0), r.addEventListener("focus", x, !0), () => {
+      r.removeEventListener("blur", p, !0), r.removeEventListener("focus", x, !0);
+    };
+  }, [
+    g,
+    t,
+    o,
+    E,
+    y,
+    // `viewportRef.current` isn't available on the first render,
+    // since the portal node hasn't yet been created.
+    // By adding this dependency, we ensure the window listeners
+    // are added when toasts have been created, once the ref is available.
+    b
+  ]), e.useEffect(() => {
+    const r = o.current;
+    if (!r || b === 0)
+      return;
+    const p = ne(r);
+    function x(T) {
+      if (T.pointerType !== "touch")
+        return;
+      const H = Ee(T);
+      se(r, H) || (t(), d(!1), y(!1));
+    }
+    return p.addEventListener("pointerdown", x, !0), () => {
+      p.removeEventListener("pointerdown", x, !0);
+    };
+  }, [b, t, y, d, o]);
+  function q(r) {
+    o.current && (X.current = !0, r.relatedTarget === o.current ? u[0]?.ref?.current?.focus() : R?.focus({
+      preventScroll: !0
+    }));
+  }
+  function B(r) {
+    r.key === "Tab" && r.shiftKey && r.target === o.current && (r.preventDefault(), R?.focus({
+      preventScroll: !0
+    }), t());
+  }
+  e.useEffect(() => {
+    !E.current || L || !j.current || (t(), d(!1), j.current = !1);
+  }, [L, t, d, E]);
+  function G() {
+    g(), d(!0), j.current = !1;
+  }
+  function K() {
+    u.some((r) => r.transitionStatus === "ending") ? j.current = !0 : (t(), d(!1));
+  }
+  function O() {
+    if (X.current) {
+      X.current = !1;
+      return;
+    }
+    C || De(ne(o.current).activeElement) && (y(!0), g());
+  }
+  function J(r) {
+    !C || se(o.current, r.relatedTarget) || (y(!1), t());
+  }
+  const n = {
+    tabIndex: -1,
+    role: "region",
+    "aria-live": "polite",
+    "aria-atomic": !1,
+    "aria-relevant": "additions text",
+    "aria-label": "Notifications",
+    onMouseEnter: G,
+    onMouseMove: G,
+    onMouseLeave: K,
+    onFocus: O,
+    onBlur: J,
+    onKeyDown: B,
+    onClick: O
+  }, m = e.useMemo(() => ({
+    expanded: z
+  }), [z]), w = ie("div", c, {
+    ref: [h, o],
+    state: m,
+    props: [n, {
+      style: {
+        [Tt.frontmostHeight]: I ? `${I}px` : void 0
+      }
+    }, v, {
+      children: /* @__PURE__ */ re(e.Fragment, {
+        children: [b > 0 && R && /* @__PURE__ */ D(Te, {
+          onFocus: q
+        }), M, b > 0 && R && /* @__PURE__ */ D(Te, {
+          onFocus: q
+        })]
+      })
+    }]
+  }), i = e.useMemo(() => ({
+    viewportRef: o
+  }), [o]), _ = e.useMemo(() => u.filter((r) => r.priority === "high"), [u]);
+  return /* @__PURE__ */ re(Ve.Provider, {
+    value: i,
+    children: [b > 0 && R && /* @__PURE__ */ D(Te, {
+      onFocus: q
+    }), w, !C && _.length > 0 && /* @__PURE__ */ D("div", {
+      style: mt,
+      children: _.map((r) => /* @__PURE__ */ re("div", {
+        role: "alert",
+        "aria-atomic": !0,
+        children: [/* @__PURE__ */ D("div", {
+          children: r.title
+        }), /* @__PURE__ */ D("div", {
+          children: r.description
+        })]
+      }, r.id))
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Be.displayName = "ToastViewport");
+const Se = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Se.displayName = "ToastRootContext");
+function oe() {
+  const a = e.useContext(Se);
+  if (!a)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>." : _t(66));
+  return a;
+}
+let ee = /* @__PURE__ */ (function(a) {
+  return a.index = "--toast-index", a.offsetY = "--toast-offset-y", a.height = "--toast-height", a.swipeMovementX = "--toast-swipe-movement-x", a.swipeMovementY = "--toast-swipe-movement-y", a;
+})({});
+const bt = {
+  ...wt,
+  swipeDirection(a) {
+    return a ? {
+      "data-swipe-direction": a
+    } : null;
+  }
+}, ae = 40, Dt = 10, Q = 0.5, Et = 1;
+function Ie(a, c, h) {
+  switch (a) {
+    case "up":
+      return -h;
+    case "down":
+      return h;
+    case "left":
+      return -c;
+    case "right":
+      return c;
+    default:
+      return 0;
+  }
+}
+function Rt(a) {
+  const h = window.getComputedStyle(a).transform;
+  let s = 0, F = 0, M = 1;
+  if (h && h !== "none") {
+    const v = h.match(/matrix(?:3d)?\(([^)]+)\)/);
+    if (v) {
+      const u = v[1].split(", ").map(parseFloat);
+      u.length === 6 ? (s = u[4], F = u[5], M = Math.sqrt(u[0] * u[0] + u[1] * u[1])) : u.length === 16 && (s = u[12], F = u[13], M = u[0]);
+    }
+  }
+  return {
+    x: s,
+    y: F,
+    scale: M
+  };
+}
+const $e = /* @__PURE__ */ e.forwardRef(function(c, h) {
+  const {
+    toast: s,
+    render: F,
+    className: M,
+    swipeDirection: v = ["down", "right"],
+    ...u
+  } = c, g = s.positionerProps?.anchor !== void 0;
+  let t = [];
+  g || (t = Array.isArray(v) ? v : [v]);
+  const d = t.length > 0, {
+    toasts: y,
+    focused: o,
+    close: E,
+    remove: R,
+    setToasts: N,
+    pauseTimers: z,
+    expanded: C,
+    setHovering: X
+  } = Re(), [j, b] = e.useState(void 0), [I, L] = e.useState(!1), [q, B] = e.useState(!1), [G, K] = e.useState(!1), [O, J] = e.useState({
+    x: 0,
+    y: 0
+  }), [n, m] = e.useState({
+    x: 0,
+    y: 0,
+    scale: 1
+  }), [w, i] = e.useState(), [_, r] = e.useState(), [p, x] = e.useState(null), T = e.useRef(null), H = e.useRef({
+    x: 0,
+    y: 0
+  }), Z = e.useRef({
+    x: 0,
+    y: 0,
+    scale: 1
+  }), ce = e.useRef(void 0), he = e.useRef(0), ue = e.useRef(!1), $ = e.useRef({
+    x: 0,
+    y: 0
+  }), ge = e.useRef(!1), _e = e.useMemo(() => y.indexOf(s), [s, y]), ye = e.useMemo(() => y.filter((l) => l.transitionStatus !== "ending").indexOf(s), [s, y]), Ge = e.useMemo(() => y.slice(0, y.indexOf(s)).reduce((l, f) => l + (f.height || 0), 0), [y, s]);
+  yt({
+    open: s.transitionStatus !== "ending",
+    ref: T,
+    onComplete() {
+      s.transitionStatus === "ending" && R(s.id);
+    }
+  });
+  const le = U((l = !1) => {
+    const f = T.current;
+    if (!f)
+      return;
+    const S = f.style.height;
+    f.style.height = "auto";
+    const P = f.offsetHeight;
+    f.style.height = S;
+    function A() {
+      N((k) => k.map((V) => V.id === s.id ? {
+        ...V,
+        ref: T,
+        height: P,
+        transitionStatus: void 0
+      } : V));
+    }
+    l ? ht.flushSync(A) : A();
+  });
+  me(le, [le]);
+  function Ke(l, f) {
+    let S = l, P = f;
+    return !t.includes("left") && !t.includes("right") ? S = l > 0 ? l ** Q : -(Math.abs(l) ** Q) : (!t.includes("right") && l > 0 && (S = l ** Q), !t.includes("left") && l < 0 && (S = -(Math.abs(l) ** Q))), !t.includes("up") && !t.includes("down") ? P = f > 0 ? f ** Q : -(Math.abs(f) ** Q) : (!t.includes("down") && f > 0 && (P = f ** Q), !t.includes("up") && f < 0 && (P = -(Math.abs(f) ** Q))), {
+      x: S,
+      y: P
+    };
+  }
+  function We(l) {
+    if (l.button !== 0)
+      return;
+    l.pointerType === "touch" && z();
+    const f = Ee(l.nativeEvent);
+    if (!(f && f.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]'))) {
+      if (ue.current = !1, ce.current = void 0, he.current = 0, H.current = {
+        x: l.clientX,
+        y: l.clientY
+      }, $.current = H.current, T.current) {
+        const P = Rt(T.current);
+        Z.current = P, m(P), J({
+          x: P.x,
+          y: P.y
+        });
+      }
+      X(!0), L(!0), B(!1), x(null), ge.current = !0, T.current?.setPointerCapture(l.pointerId);
+    }
+  }
+  function je(l) {
+    if (!I)
+      return;
+    l.preventDefault(), ge.current && (H.current = {
+      x: l.clientX,
+      y: l.clientY
+    }, ge.current = !1);
+    const {
+      clientY: f,
+      clientX: S,
+      movementX: P,
+      movementY: A
+    } = l;
+    (A < 0 && f > $.current.y || A > 0 && f < $.current.y) && ($.current = {
+      x: $.current.x,
+      y: f
+    }), (P < 0 && S > $.current.x || P > 0 && S < $.current.x) && ($.current = {
+      x: S,
+      y: $.current.y
+    });
+    const k = S - H.current.x, V = f - H.current.y, tt = f - $.current.y, nt = S - $.current.x;
+    if (!q && Math.sqrt(k * k + V * V) >= Et && (B(!0), p === null)) {
+      const de = t.includes("left") || t.includes("right"), rt = t.includes("up") || t.includes("down");
+      if (de && rt) {
+        const st = Math.abs(k), ot = Math.abs(V);
+        x(st > ot ? "horizontal" : "vertical");
+      }
+    }
+    let Y;
+    if (!ce.current)
+      p === "vertical" ? V > 0 ? Y = "down" : V < 0 && (Y = "up") : p === "horizontal" ? k > 0 ? Y = "right" : k < 0 && (Y = "left") : Math.abs(k) >= Math.abs(V) ? Y = k > 0 ? "right" : "left" : Y = V > 0 ? "down" : "up", Y && t.includes(Y) && (ce.current = Y, he.current = Ie(Y, k, V), b(Y));
+    else {
+      const xe = ce.current, de = Ie(xe, nt, tt);
+      de > ae ? (ue.current = !1, b(xe)) : !(t.includes("left") && t.includes("right")) && !(t.includes("up") && t.includes("down")) && he.current - de >= Dt && (ue.current = !0);
+    }
+    const fe = Ke(k, V);
+    let we = Z.current.x, ve = Z.current.y;
+    p === "horizontal" ? (t.includes("left") || t.includes("right")) && (we += fe.x) : (p === "vertical" || (t.includes("left") || t.includes("right")) && (we += fe.x), (t.includes("up") || t.includes("down")) && (ve += fe.y)), J({
+      x: we,
+      y: ve
+    });
+  }
+  function Ue(l) {
+    if (!I)
+      return;
+    if (L(!1), B(!1), x(null), T.current?.releasePointerCapture(l.pointerId), ue.current) {
+      J({
+        x: n.x,
+        y: n.y
+      }), b(void 0);
+      return;
+    }
+    let f = !1;
+    const S = O.x - n.x, P = O.y - n.y;
+    let A;
+    for (const k of t) {
+      switch (k) {
+        case "right":
+          S > ae && (f = !0, A = "right");
+          break;
+        case "left":
+          S < -ae && (f = !0, A = "left");
+          break;
+        case "down":
+          P > ae && (f = !0, A = "down");
+          break;
+        case "up":
+          P < -ae && (f = !0, A = "up");
+          break;
+      }
+      if (f)
+        break;
+    }
+    f ? (b(A), K(!0), E(s.id)) : (J({
+      x: n.x,
+      y: n.y
+    }), b(void 0));
+  }
+  function qe(l) {
+    if (l.key === "Escape") {
+      if (!T.current || !se(T.current, pe(ne(T.current))))
+        return;
+      E(s.id);
+    }
+  }
+  e.useEffect(() => {
+    if (!d)
+      return;
+    const l = T.current;
+    if (!l)
+      return;
+    function f(S) {
+      se(l, S.target) && S.preventDefault();
+    }
+    return l.addEventListener("touchmove", f, {
+      passive: !1
+    }), () => {
+      l.removeEventListener("touchmove", f);
+    };
+  }, [d]);
+  function Je() {
+    if (!I && O.x === n.x && O.y === n.y && !G)
+      return {
+        [ee.swipeMovementX]: "0px",
+        [ee.swipeMovementY]: "0px"
+      };
+    const l = O.x - n.x, f = O.y - n.y;
+    return {
+      transition: I ? "none" : void 0,
+      // While swiping, freeze the element at its current visual transform so it doesn't snap to the
+      // end position.
+      transform: I ? `translateX(${O.x}px) translateY(${O.y}px) scale(${n.scale})` : void 0,
+      [ee.swipeMovementX]: `${l}px`,
+      [ee.swipeMovementY]: `${f}px`
+    };
+  }
+  const Me = s.priority === "high", Qe = {
+    role: Me ? "alertdialog" : "dialog",
+    tabIndex: 0,
+    "aria-modal": !1,
+    "aria-labelledby": w,
+    "aria-describedby": _,
+    "aria-hidden": Me && !o ? !0 : void 0,
+    onPointerDown: d ? We : void 0,
+    onPointerMove: d ? je : void 0,
+    onPointerUp: d ? Ue : void 0,
+    onKeyDown: qe,
+    inert: gt(s.limited),
+    style: {
+      ...Je(),
+      [ee.index]: s.transitionStatus === "ending" ? _e : ye,
+      [ee.offsetY]: `${Ge}px`,
+      [ee.height]: s.height ? `${s.height}px` : void 0
+    }
+  }, te = e.useMemo(() => ({
+    rootRef: T,
+    toast: s,
+    titleId: w,
+    setTitleId: i,
+    descriptionId: _,
+    setDescriptionId: r,
+    swiping: I,
+    swipeDirection: j,
+    recalculateHeight: le,
+    index: _e,
+    visibleIndex: ye,
+    expanded: C
+  }), [s, w, _, I, j, le, _e, ye, C]), Ze = e.useMemo(() => ({
+    transitionStatus: s.transitionStatus,
+    expanded: C,
+    limited: s.limited || !1,
+    type: s.type,
+    swiping: te.swiping,
+    swipeDirection: te.swipeDirection
+  }), [C, s.transitionStatus, s.limited, s.type, te.swiping, te.swipeDirection]), et = ie("div", c, {
+    ref: [h, te.rootRef],
+    state: Ze,
+    stateAttributesMapping: bt,
+    props: [Qe, u]
+  });
+  return /* @__PURE__ */ D(Se.Provider, {
+    value: te,
+    children: et
+  });
+});
+process.env.NODE_ENV !== "production" && ($e.displayName = "ToastRoot");
+const Ae = /* @__PURE__ */ e.forwardRef(function(c, h) {
+  const {
+    render: s,
+    className: F,
+    ...M
+  } = c, {
+    visibleIndex: v,
+    expanded: u,
+    recalculateHeight: g
+  } = oe(), t = e.useRef(null);
+  me(() => {
+    const E = t.current;
+    if (!E || (g(), typeof ResizeObserver != "function" || typeof MutationObserver != "function"))
+      return;
+    const R = new ResizeObserver(() => g(!0)), N = new MutationObserver(() => g(!0));
+    return R.observe(E), N.observe(E, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), () => {
+      R.disconnect(), N.disconnect();
+    };
+  }, [g]);
+  const d = v > 0, y = e.useMemo(() => ({
+    expanded: u,
+    behind: d
+  }), [u, d]);
+  return ie("div", c, {
+    ref: [h, t],
+    state: y,
+    props: M
+  });
+});
+process.env.NODE_ENV !== "production" && (Ae.displayName = "ToastContent");
+const Ye = /* @__PURE__ */ e.forwardRef(function(c, h) {
+  const {
+    render: s,
+    className: F,
+    id: M,
+    children: v,
+    ...u
+  } = c, {
+    toast: g
+  } = oe(), t = v ?? g.description, d = !!t, y = He(M), {
+    setDescriptionId: o
+  } = oe();
+  me(() => {
+    if (d)
+      return o(y), () => {
+        o(void 0);
+      };
+  }, [d, y, o]);
+  const E = e.useMemo(() => ({
+    type: g.type
+  }), [g.type]), R = ie("p", c, {
+    ref: h,
+    state: E,
+    props: {
+      ...u,
+      id: y,
+      children: t
+    }
+  });
+  return d ? R : null;
+});
+process.env.NODE_ENV !== "production" && (Ye.displayName = "ToastDescription");
+const ze = /* @__PURE__ */ e.forwardRef(function(c, h) {
+  const {
+    render: s,
+    className: F,
+    id: M,
+    children: v,
+    ...u
+  } = c, {
+    toast: g
+  } = oe(), t = v ?? g.title, d = !!t, y = He(M), {
+    setTitleId: o
+  } = oe();
+  me(() => {
+    if (d)
+      return o(y), () => {
+        o(void 0);
+      };
+  }, [d, y, o]);
+  const E = e.useMemo(() => ({
+    type: g.type
+  }), [g.type]), R = ie("h2", c, {
+    ref: h,
+    state: E,
+    props: {
+      ...u,
+      id: y,
+      children: t
+    }
+  });
+  return d ? R : null;
+});
+process.env.NODE_ENV !== "production" && (ze.displayName = "ToastTitle");
+const Xe = /* @__PURE__ */ e.forwardRef(function(c, h) {
+  const {
+    render: s,
+    className: F,
+    disabled: M,
+    nativeButton: v = !0,
+    ...u
+  } = c, {
+    close: g,
+    expanded: t
+  } = Re(), {
+    toast: d
+  } = oe(), [y, o] = e.useState(!1), {
+    getButtonProps: E,
+    buttonRef: R
+  } = vt({
+    disabled: M,
+    native: v
+  }), N = e.useMemo(() => ({
+    type: d.type
+  }), [d.type]);
+  return ie("button", c, {
+    ref: [h, R],
+    state: N,
+    props: [{
+      "aria-hidden": !t && !y,
+      onClick() {
+        g(d.id);
+      },
+      onFocus() {
+        o(!0);
+      },
+      onBlur() {
+        o(!1);
+      }
+    }, u, E]
+  });
+});
+process.env.NODE_ENV !== "production" && (Xe.displayName = "ToastClose");
+const St = pt, Mt = "_toaster__viewport_twmyb_2", Nt = "_toaster_twmyb_2", Pt = "_toaster_variant_neutral_twmyb_112", Ot = "_toaster_variant_colorway_twmyb_118", Ct = "_toaster__content_twmyb_124", Ft = "_toaster__header_twmyb_143", It = "_toaster__header_pad_twmyb_147", Lt = "_toaster__title_twmyb_151", Ht = "_toaster__description_twmyb_155", kt = "_toaster__close_twmyb_159", W = {
+  toaster__viewport: Mt,
+  toaster: Nt,
+  toaster_variant_neutral: Pt,
+  toaster_variant_colorway: Ot,
+  toaster__content: Ct,
+  toaster__header: Ft,
+  toaster__header_pad: It,
+  toaster__title: Lt,
+  toaster__description: Ht,
+  toaster__close: kt
+}, Le = {
+  info: "blue",
+  error: "red",
+  warning: "yellow",
+  success: "green"
+};
+function ln({ children: a, ...c }) {
+  return /* @__PURE__ */ re(ke, { ...c, children: [
+    a,
+    /* @__PURE__ */ D(St, { children: /* @__PURE__ */ D(Be, { className: W.toaster__viewport, children: /* @__PURE__ */ D(Vt, {}) }) })
+  ] });
+}
+function Vt() {
+  return at().toasts.map((c) => {
+    const h = c.type && c.type in Le ? Le[c.type] : void 0;
+    return /* @__PURE__ */ D(
+      $e,
+      {
+        toast: c,
+        className: Ne(
+          W.toaster,
+          h ? W.toaster_variant_colorway : W.toaster_variant_neutral
+        ),
+        render: /* @__PURE__ */ D(dt, { background: "default", color: h }),
+        children: /* @__PURE__ */ re(
+          Pe,
+          {
+            render: /* @__PURE__ */ D(Ae, {}),
+            className: W.toaster__content,
+            children: [
+              /* @__PURE__ */ re(
+                Pe,
+                {
+                  className: Ne(
+                    W.toaster__header,
+                    !c.title && W.toaster__header_pad
+                  ),
+                  children: [
+                    /* @__PURE__ */ D(
+                      ze,
+                      {
+                        render: /* @__PURE__ */ D(
+                          ct,
+                          {
+                            level: 2,
+                            size: "lg",
+                            color: "inherit",
+                            className: W.toaster__title
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ D(
+                      Ye,
+                      {
+                        render: /* @__PURE__ */ D(ut, { multiline: !0, color: h ? "inherit" : "dimmer" }),
+                        className: W.toaster__description
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ D(
+                Xe,
+                {
+                  render: /* @__PURE__ */ D(
+                    lt,
+                    {
+                      interactive: h ? `${h}_no-fill` : "no-fill",
+                      icon: "close-line",
+                      size: "sm",
+                      alt: "Close",
+                      className: W.toaster__close
+                    }
+                  )
+                }
+              ),
+              c.action ? /* @__PURE__ */ D(
+                ft,
+                {
+                  ...c.action,
+                  interactive: h ? `${h}_fill` : !0,
+                  children: c.action.children
+                }
+              ) : null
+            ]
+          }
+        )
+      },
+      c.id
+    );
+  });
+}
+export {
+  ln as Toaster
+};