@konstructio/ui 0.0.12-alpha.0 → 0.0.12-alpha.10

package/dist/components/Toast/Toast.js

@@ -1,32 +1,30 @@
-import { jsxs as D, jsx as c, Fragment as se } from "react/jsx-runtime";
-import { u as ae, S as j } from "../../index-DoOsnuB6.js";
+import { jsx as c, jsxs as D, Fragment as se } from "react/jsx-runtime";
+import { u as ae, S as j } from "../../index-B_6_jmOO.js";
 import * as s from "react";
-import { useState as Re, useRef as be, useEffect as ge, useMemo as oe, isValidElement as re, useCallback as Se } from "react";
-import { P as L, r as Ie, d as Ne } from "../../index-BaNV0qac.js";
-import { c as Ae, a as Fe, b as X, d as b, u as _e } from "../../index-8vgf-x5i.js";
-import { c as De } from "../../index-BBjak_0p.js";
-import { B as Le, R as Oe, P as Me } from "../../index-BedjZUuB.js";
-import { P as ke } from "../../index-D4Q2rMby.js";
-import { V as ie, R as Ve } from "../../index-BtibbG81.js";
-import "../../contexts/theme.context.js";
-import { useTheme as Ke } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
+import { useRef as Re, useEffect as be, useMemo as oe, isValidElement as re, useCallback as ge } from "react";
+import { P as L, r as Se, d as Ie } from "../../index-D7QNmo_D.js";
+import { c as Ne, a as Ae, b, d as X, u as Fe } from "../../index-Cva-e5M4.js";
+import { c as _e } from "../../index-BbsJ0VIJ.js";
+import { B as De, R as Le, P as Me } from "../../index-D_76wh4w.js";
+import { P as Oe } from "../../index-Dj1pom3_.js";
+import { V as ie, R as ke } from "../../index-CbTU3cnP.js";
 import { cn as q } from "../../utils/index.js";
-import { toastVariants as He, closeToastVariants as We, viewportToastVariants as Xe } from "./Toast.variants.js";
-import { X as $e } from "../../x-CRBgmX1Q.js";
-var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, It] = Ae("Toast", [Ye]), [Be, $] = ce(Z), ue = (e) => {
+import { closeToastVariants as Ve, toastVariants as Ke, viewportToastVariants as He } from "./Toast.variants.js";
+import { X as We } from "../../x-DU-Zw-L_.js";
+import { useTheme as Xe } from "../../contexts/theme.hook.js";
+var Z = "ToastProvider", [ee, $e, Ue] = _e("Toast"), [ce, bt] = Ne("Toast", [Ue]), [Ye, $] = ce(Z), ue = (e) => {
   const {
     __scopeToast: r,
     label: o = "Notification",
     duration: t = 5e3,
     swipeDirection: u = "right",
     swipeThreshold: d = 50,
-    children: p
-  } = e, [m, v] = s.useState(null), [n, w] = s.useState(0), E = s.useRef(!1), I = s.useRef(!1);
+    children: f
+  } = e, [m, v] = s.useState(null), [n, y] = s.useState(0), w = s.useRef(!1), S = s.useRef(!1);
   return o.trim() || console.error(
     `Invalid prop \`label\` supplied to \`${Z}\`. Expected non-empty \`string\`.`
   ), /* @__PURE__ */ c(ee.Provider, { scope: r, children: /* @__PURE__ */ c(
-    Be,
+    Ye,
     {
       scope: r,
       label: o,
@@ -36,90 +34,90 @@ var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, It] = Ae("Toast", [Ye]
       toastCount: n,
       viewport: m,
       onViewportChange: v,
-      onToastAdd: s.useCallback(() => w((R) => R + 1), []),
-      onToastRemove: s.useCallback(() => w((R) => R - 1), []),
-      isFocusedToastEscapeKeyDownRef: E,
-      isClosePausedRef: I,
-      children: p
+      onToastAdd: s.useCallback(() => y((g) => g + 1), []),
+      onToastRemove: s.useCallback(() => y((g) => g - 1), []),
+      isFocusedToastEscapeKeyDownRef: w,
+      isClosePausedRef: S,
+      children: f
     }
   ) });
 };
 ue.displayName = Z;
-var le = "ToastViewport", je = ["F8"], G = "toast.viewportPause", J = "toast.viewportResume", de = s.forwardRef(
+var le = "ToastViewport", Be = ["F8"], G = "toast.viewportPause", J = "toast.viewportResume", de = s.forwardRef(
   (e, r) => {
     const {
       __scopeToast: o,
-      hotkey: t = je,
+      hotkey: t = Be,
       label: u = "Notifications ({hotkey})",
       ...d
-    } = e, p = $(le, o), m = Ue(o), v = s.useRef(null), n = s.useRef(null), w = s.useRef(null), E = s.useRef(null), I = ae(r, E, p.onViewportChange), R = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), g = p.toastCount > 0;
+    } = e, f = $(le, o), m = $e(o), v = s.useRef(null), n = s.useRef(null), y = s.useRef(null), w = s.useRef(null), S = ae(r, w, f.onViewportChange), g = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), R = f.toastCount > 0;
     s.useEffect(() => {
-      const a = (P) => {
+      const a = (h) => {
         var T;
-        t.length !== 0 && t.every((h) => P[h] || P.code === h) && ((T = E.current) == null || T.focus());
+        t.length !== 0 && t.every((E) => h[E] || h.code === E) && ((T = w.current) == null || T.focus());
       };
       return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
     }, [t]), s.useEffect(() => {
-      const a = v.current, P = E.current;
-      if (g && a && P) {
-        const f = () => {
-          if (!p.isClosePausedRef.current) {
-            const C = new CustomEvent(G);
-            P.dispatchEvent(C), p.isClosePausedRef.current = !0;
+      const a = v.current, h = w.current;
+      if (R && a && h) {
+        const p = () => {
+          if (!f.isClosePausedRef.current) {
+            const P = new CustomEvent(G);
+            h.dispatchEvent(P), f.isClosePausedRef.current = !0;
           }
         }, T = () => {
-          if (p.isClosePausedRef.current) {
-            const C = new CustomEvent(J);
-            P.dispatchEvent(C), p.isClosePausedRef.current = !1;
+          if (f.isClosePausedRef.current) {
+            const P = new CustomEvent(J);
+            h.dispatchEvent(P), f.isClosePausedRef.current = !1;
           }
-        }, h = (C) => {
-          !a.contains(C.relatedTarget) && T();
-        }, y = () => {
+        }, E = (P) => {
+          !a.contains(P.relatedTarget) && T();
+        }, C = () => {
           a.contains(document.activeElement) || T();
         };
-        return a.addEventListener("focusin", f), a.addEventListener("focusout", h), a.addEventListener("pointermove", f), a.addEventListener("pointerleave", y), window.addEventListener("blur", f), window.addEventListener("focus", T), () => {
-          a.removeEventListener("focusin", f), a.removeEventListener("focusout", h), a.removeEventListener("pointermove", f), a.removeEventListener("pointerleave", y), window.removeEventListener("blur", f), window.removeEventListener("focus", T);
+        return a.addEventListener("focusin", p), a.addEventListener("focusout", E), a.addEventListener("pointermove", p), a.addEventListener("pointerleave", C), window.addEventListener("blur", p), window.addEventListener("focus", T), () => {
+          a.removeEventListener("focusin", p), a.removeEventListener("focusout", E), a.removeEventListener("pointermove", p), a.removeEventListener("pointerleave", C), window.removeEventListener("blur", p), window.removeEventListener("focus", T);
         };
       }
-    }, [g, p.isClosePausedRef]);
+    }, [R, f.isClosePausedRef]);
     const l = s.useCallback(
       ({ tabbingDirection: a }) => {
-        const f = m().map((T) => {
-          const h = T.ref.current, y = [h, ...at(h)];
-          return a === "forwards" ? y : y.reverse();
+        const p = m().map((T) => {
+          const E = T.ref.current, C = [E, ...st(E)];
+          return a === "forwards" ? C : C.reverse();
         });
-        return (a === "forwards" ? f.reverse() : f).flat();
+        return (a === "forwards" ? p.reverse() : p).flat();
       },
       [m]
     );
     return s.useEffect(() => {
-      const a = E.current;
+      const a = w.current;
       if (a) {
-        const P = (f) => {
-          var y, C, N;
-          const T = f.altKey || f.ctrlKey || f.metaKey;
-          if (f.key === "Tab" && !T) {
-            const O = document.activeElement, F = f.shiftKey;
-            if (f.target === a && F) {
-              (y = n.current) == null || y.focus();
+        const h = (p) => {
+          var C, P, N;
+          const T = p.altKey || p.ctrlKey || p.metaKey;
+          if (p.key === "Tab" && !T) {
+            const M = document.activeElement, F = p.shiftKey;
+            if (p.target === a && F) {
+              (C = n.current) == null || C.focus();
               return;
             }
-            const A = l({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((i) => i === O);
-            z(A.slice(V + 1)) ? f.preventDefault() : F ? (C = n.current) == null || C.focus() : (N = w.current) == null || N.focus();
+            const A = l({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((i) => i === M);
+            z(A.slice(V + 1)) ? p.preventDefault() : F ? (P = n.current) == null || P.focus() : (N = y.current) == null || N.focus();
           }
         };
-        return a.addEventListener("keydown", P), () => a.removeEventListener("keydown", P);
+        return a.addEventListener("keydown", h), () => a.removeEventListener("keydown", h);
       }
     }, [m, l]), /* @__PURE__ */ D(
-      Le,
+      De,
       {
         ref: v,
         role: "region",
-        "aria-label": u.replace("{hotkey}", R),
+        "aria-label": u.replace("{hotkey}", g),
         tabIndex: -1,
-        style: { pointerEvents: g ? void 0 : "none" },
+        style: { pointerEvents: R ? void 0 : "none" },
         children: [
-          g && /* @__PURE__ */ c(
+          R && /* @__PURE__ */ c(
             Q,
             {
               ref: n,
@@ -131,11 +129,11 @@ var le = "ToastViewport", je = ["F8"], G = "toast.viewportPause", J = "toast.vie
               }
             }
           ),
-          /* @__PURE__ */ c(ee.Slot, { scope: o, children: /* @__PURE__ */ c(L.ol, { tabIndex: -1, ...d, ref: I }) }),
-          g && /* @__PURE__ */ c(
+          /* @__PURE__ */ c(ee.Slot, { scope: o, children: /* @__PURE__ */ c(L.ol, { tabIndex: -1, ...d, ref: S }) }),
+          R && /* @__PURE__ */ c(
             Q,
             {
-              ref: w,
+              ref: y,
               onFocusFromOutsideViewport: () => {
                 const a = l({
                   tabbingDirection: "backwards"
@@ -150,9 +148,9 @@ var le = "ToastViewport", je = ["F8"], G = "toast.viewportPause", J = "toast.vie
   }
 );
 de.displayName = le;
-var pe = "ToastFocusProxy", Q = s.forwardRef(
+var fe = "ToastFocusProxy", Q = s.forwardRef(
   (e, r) => {
-    const { __scopeToast: o, onFocusFromOutsideViewport: t, ...u } = e, d = $(pe, o);
+    const { __scopeToast: o, onFocusFromOutsideViewport: t, ...u } = e, d = $(fe, o);
     return /* @__PURE__ */ c(
       ie,
       {
@@ -161,28 +159,28 @@ var pe = "ToastFocusProxy", Q = s.forwardRef(
         ...u,
         ref: r,
         style: { position: "fixed" },
-        onFocus: (p) => {
+        onFocus: (f) => {
           var n;
-          const m = p.relatedTarget;
+          const m = f.relatedTarget;
           !((n = d.viewport) != null && n.contains(m)) && t();
         }
       }
     );
   }
 );
-Q.displayName = pe;
-var U = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.swipeCancel", Je = "toast.swipeEnd", fe = s.forwardRef(
+Q.displayName = fe;
+var U = "Toast", je = "toast.swipeStart", qe = "toast.swipeMove", ze = "toast.swipeCancel", Ge = "toast.swipeEnd", pe = s.forwardRef(
   (e, r) => {
-    const { forceMount: o, open: t, defaultOpen: u, onOpenChange: d, ...p } = e, [m = !0, v] = Fe({
+    const { forceMount: o, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [m = !0, v] = Ae({
       prop: t,
       defaultProp: u,
       onChange: d
     });
-    return /* @__PURE__ */ c(ke, { present: o || m, children: /* @__PURE__ */ c(
-      et,
+    return /* @__PURE__ */ c(Oe, { present: o || m, children: /* @__PURE__ */ c(
+      Ze,
       {
         open: m,
-        ...p,
+        ...f,
         ref: r,
         onClose: () => v(!1),
         onPause: X(e.onPause),
@@ -191,46 +189,46 @@ var U = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.sw
           n.currentTarget.setAttribute("data-swipe", "start");
         }),
         onSwipeMove: b(e.onSwipeMove, (n) => {
-          const { x: w, y: E } = n.detail.delta;
-          n.currentTarget.setAttribute("data-swipe", "move"), n.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${w}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${E}px`);
+          const { x: y, y: w } = n.detail.delta;
+          n.currentTarget.setAttribute("data-swipe", "move"), n.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${y}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${w}px`);
         }),
         onSwipeCancel: b(e.onSwipeCancel, (n) => {
           n.currentTarget.setAttribute("data-swipe", "cancel"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
         }),
         onSwipeEnd: b(e.onSwipeEnd, (n) => {
-          const { x: w, y: E } = n.detail.delta;
-          n.currentTarget.setAttribute("data-swipe", "end"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${w}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${E}px`), v(!1);
+          const { x: y, y: w } = n.detail.delta;
+          n.currentTarget.setAttribute("data-swipe", "end"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${y}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${w}px`), v(!1);
         })
       }
     ) });
   }
 );
-fe.displayName = U;
-var [Qe, Ze] = ce(U, {
+pe.displayName = U;
+var [Je, Qe] = ce(U, {
   onClose() {
   }
-}), et = s.forwardRef(
+}), Ze = s.forwardRef(
   (e, r) => {
     const {
       __scopeToast: o,
       type: t = "foreground",
       duration: u,
       open: d,
-      onClose: p,
+      onClose: f,
       onEscapeKeyDown: m,
       onPause: v,
       onResume: n,
-      onSwipeStart: w,
-      onSwipeMove: E,
-      onSwipeCancel: I,
-      onSwipeEnd: R,
-      ...g
-    } = e, l = $(U, o), [a, P] = s.useState(null), f = ae(r, (i) => P(i)), T = s.useRef(null), h = s.useRef(null), y = u || l.duration, C = s.useRef(0), N = s.useRef(y), O = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = X(() => {
+      onSwipeStart: y,
+      onSwipeMove: w,
+      onSwipeCancel: S,
+      onSwipeEnd: g,
+      ...R
+    } = e, l = $(U, o), [a, h] = s.useState(null), p = ae(r, (i) => h(i)), T = s.useRef(null), E = s.useRef(null), C = u || l.duration, P = s.useRef(0), N = s.useRef(C), M = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = X(() => {
       var x;
-      (a == null ? void 0 : a.contains(document.activeElement)) && ((x = l.viewport) == null || x.focus()), p();
+      (a == null ? void 0 : a.contains(document.activeElement)) && ((x = l.viewport) == null || x.focus()), f();
     }), A = s.useCallback(
       (i) => {
-        !i || i === 1 / 0 || (window.clearTimeout(O.current), C.current = (/* @__PURE__ */ new Date()).getTime(), O.current = window.setTimeout(_, i));
+        !i || i === 1 / 0 || (window.clearTimeout(M.current), P.current = (/* @__PURE__ */ new Date()).getTime(), M.current = window.setTimeout(_, i));
       },
       [_]
     );
@@ -239,21 +237,21 @@ var [Qe, Ze] = ce(U, {
       if (i) {
         const x = () => {
           A(N.current), n == null || n();
-        }, S = () => {
-          const M = (/* @__PURE__ */ new Date()).getTime() - C.current;
-          N.current = N.current - M, window.clearTimeout(O.current), v == null || v();
+        }, I = () => {
+          const O = (/* @__PURE__ */ new Date()).getTime() - P.current;
+          N.current = N.current - O, window.clearTimeout(M.current), v == null || v();
         };
-        return i.addEventListener(G, S), i.addEventListener(J, x), () => {
-          i.removeEventListener(G, S), i.removeEventListener(J, x);
+        return i.addEventListener(G, I), i.addEventListener(J, x), () => {
+          i.removeEventListener(G, I), i.removeEventListener(J, x);
         };
       }
-    }, [l.viewport, y, v, n, A]), s.useEffect(() => {
-      d && !l.isClosePausedRef.current && A(y);
-    }, [d, y, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
-    const V = s.useMemo(() => a ? Pe(a) : null, [a]);
+    }, [l.viewport, C, v, n, A]), s.useEffect(() => {
+      d && !l.isClosePausedRef.current && A(C);
+    }, [d, C, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
+    const V = s.useMemo(() => a ? Ce(a) : null, [a]);
     return l.viewport ? /* @__PURE__ */ D(se, { children: [
       V && /* @__PURE__ */ c(
-        tt,
+        et,
         {
           __scopeToast: o,
           role: "status",
@@ -262,9 +260,9 @@ var [Qe, Ze] = ce(U, {
           children: V
         }
       ),
-      /* @__PURE__ */ c(Qe, { scope: o, onClose: _, children: Ie.createPortal(
+      /* @__PURE__ */ c(Je, { scope: o, onClose: _, children: Se.createPortal(
         /* @__PURE__ */ c(ee.ItemSlot, { scope: o, children: /* @__PURE__ */ c(
-          Oe,
+          Le,
           {
             asChild: !0,
             onEscapeKeyDown: b(m, () => {
@@ -279,8 +277,8 @@ var [Qe, Ze] = ce(U, {
                 tabIndex: 0,
                 "data-state": d ? "open" : "closed",
                 "data-swipe-direction": l.swipeDirection,
-                ...g,
-                ref: f,
+                ...R,
+                ref: p,
                 style: { userSelect: "none", touchAction: "none", ...e.style },
                 onKeyDown: b(e.onKeyDown, (i) => {
                   i.key === "Escape" && (m == null || m(i.nativeEvent), i.nativeEvent.defaultPrevented || (l.isFocusedToastEscapeKeyDownRef.current = !0, _()));
@@ -290,27 +288,27 @@ var [Qe, Ze] = ce(U, {
                 }),
                 onPointerMove: b(e.onPointerMove, (i) => {
                   if (!T.current) return;
-                  const x = i.clientX - T.current.x, S = i.clientY - T.current.y, M = !!h.current, k = ["left", "right"].includes(l.swipeDirection), K = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Ce = k ? K(0, x) : 0, xe = k ? 0 : K(0, S), B = i.pointerType === "touch" ? 10 : 2, H = { x: Ce, y: xe }, te = { originalEvent: i, delta: H };
-                  M ? (h.current = H, W(ze, E, te, {
+                  const x = i.clientX - T.current.x, I = i.clientY - T.current.y, O = !!E.current, k = ["left", "right"].includes(l.swipeDirection), K = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Pe = k ? K(0, x) : 0, xe = k ? 0 : K(0, I), B = i.pointerType === "touch" ? 10 : 2, H = { x: Pe, y: xe }, te = { originalEvent: i, delta: H };
+                  O ? (E.current = H, W(qe, w, te, {
                     discrete: !1
-                  })) : ne(H, l.swipeDirection, B) ? (h.current = H, W(qe, w, te, {
+                  })) : ne(H, l.swipeDirection, B) ? (E.current = H, W(je, y, te, {
                     discrete: !1
-                  }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(x) > B || Math.abs(S) > B) && (T.current = null);
+                  }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(x) > B || Math.abs(I) > B) && (T.current = null);
                 }),
                 onPointerUp: b(e.onPointerUp, (i) => {
-                  const x = h.current, S = i.target;
-                  if (S.hasPointerCapture(i.pointerId) && S.releasePointerCapture(i.pointerId), h.current = null, T.current = null, x) {
-                    const M = i.currentTarget, k = { originalEvent: i, delta: x };
-                    ne(x, l.swipeDirection, l.swipeThreshold) ? W(Je, R, k, {
+                  const x = E.current, I = i.target;
+                  if (I.hasPointerCapture(i.pointerId) && I.releasePointerCapture(i.pointerId), E.current = null, T.current = null, x) {
+                    const O = i.currentTarget, k = { originalEvent: i, delta: x };
+                    ne(x, l.swipeDirection, l.swipeThreshold) ? W(Ge, g, k, {
                       discrete: !0
                     }) : W(
-                      Ge,
-                      I,
+                      ze,
+                      S,
                       k,
                       {
                         discrete: !0
                       }
-                    ), M.addEventListener("click", (K) => K.preventDefault(), {
+                    ), O.addEventListener("click", (K) => K.preventDefault(), {
                       once: !0
                     });
                   }
@@ -323,9 +321,9 @@ var [Qe, Ze] = ce(U, {
       ) })
     ] }) : null;
   }
-), tt = (e) => {
-  const { __scopeToast: r, children: o, ...t } = e, u = $(U, r), [d, p] = s.useState(!1), [m, v] = s.useState(!1);
-  return nt(() => p(!0)), s.useEffect(() => {
+), et = (e) => {
+  const { __scopeToast: r, children: o, ...t } = e, u = $(U, r), [d, f] = s.useState(!1), [m, v] = s.useState(!1);
+  return rt(() => f(!0)), s.useEffect(() => {
     const n = window.setTimeout(() => v(!0), 1e3);
     return () => window.clearTimeout(n);
   }, []), m ? null : /* @__PURE__ */ c(Me, { asChild: !0, children: /* @__PURE__ */ c(ie, { ...t, children: d && /* @__PURE__ */ D(se, { children: [
@@ -333,20 +331,20 @@ var [Qe, Ze] = ce(U, {
     " ",
     o
   ] }) }) });
-}, ot = "ToastTitle", me = s.forwardRef(
+}, tt = "ToastTitle", me = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e;
     return /* @__PURE__ */ c(L.div, { ...t, ref: r });
   }
 );
-me.displayName = ot;
-var rt = "ToastDescription", Te = s.forwardRef(
+me.displayName = tt;
+var ot = "ToastDescription", Te = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e;
     return /* @__PURE__ */ c(L.div, { ...t, ref: r });
   }
 );
-Te.displayName = rt;
+Te.displayName = ot;
 var ve = "ToastAction", we = s.forwardRef(
   (e, r) => {
     const { altText: o, ...t } = e;
@@ -358,7 +356,7 @@ var ve = "ToastAction", we = s.forwardRef(
 we.displayName = ve;
 var Ee = "ToastClose", he = s.forwardRef(
   (e, r) => {
-    const { __scopeToast: o, ...t } = e, u = Ze(Ee, o);
+    const { __scopeToast: o, ...t } = e, u = Qe(Ee, o);
     return /* @__PURE__ */ c(ye, { asChild: !0, children: /* @__PURE__ */ c(
       L.button,
       {
@@ -383,42 +381,42 @@ var ye = s.forwardRef((e, r) => {
     }
   );
 });
-function Pe(e) {
+function Ce(e) {
   const r = [];
   return Array.from(e.childNodes).forEach((t) => {
-    if (t.nodeType === t.TEXT_NODE && t.textContent && r.push(t.textContent), st(t)) {
+    if (t.nodeType === t.TEXT_NODE && t.textContent && r.push(t.textContent), nt(t)) {
       const u = t.ariaHidden || t.hidden || t.style.display === "none", d = t.dataset.radixToastAnnounceExclude === "";
       if (!u)
         if (d) {
-          const p = t.dataset.radixToastAnnounceAlt;
-          p && r.push(p);
+          const f = t.dataset.radixToastAnnounceAlt;
+          f && r.push(f);
         } else
-          r.push(...Pe(t));
+          r.push(...Ce(t));
     }
   }), r;
 }
 function W(e, r, o, { discrete: t }) {
   const u = o.originalEvent.currentTarget, d = new CustomEvent(e, { bubbles: !0, cancelable: !0, detail: o });
-  r && u.addEventListener(e, r, { once: !0 }), t ? Ne(u, d) : u.dispatchEvent(d);
+  r && u.addEventListener(e, r, { once: !0 }), t ? Ie(u, d) : u.dispatchEvent(d);
 }
 var ne = (e, r, o = 0) => {
   const t = Math.abs(e.x), u = Math.abs(e.y), d = t > u;
   return r === "left" || r === "right" ? d && t > o : !d && u > o;
 };
-function nt(e = () => {
+function rt(e = () => {
 }) {
   const r = X(e);
-  _e(() => {
+  Fe(() => {
     let o = 0, t = 0;
     return o = window.requestAnimationFrame(() => t = window.requestAnimationFrame(r)), () => {
       window.cancelAnimationFrame(o), window.cancelAnimationFrame(t);
     };
   }, [r]);
 }
-function st(e) {
+function nt(e) {
   return e.nodeType === e.ELEMENT_NODE;
 }
-function at(e) {
+function st(e) {
   const r = [], o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (t) => {
       const u = t.tagName === "INPUT" && t.type === "hidden";
@@ -432,49 +430,62 @@ function z(e) {
   const r = document.activeElement;
   return e.some((o) => o === r ? !0 : (o.focus(), document.activeElement !== r));
 }
-var it = ue, ct = de, ut = fe, lt = me, dt = Te, pt = we;
-const Nt = ({
+var at = ue, it = de, ct = pe, ut = me, lt = Te, dt = we;
+const gt = ({
   title: e,
   duration: r = 5e3,
   titleClassName: o,
   descriptionClassName: t,
   description: u,
   children: d,
-  theme: p,
+  theme: f,
   showCloseButton: m = !0,
-  className: v
+  closeButtonClassName: v,
+  className: n,
+  open: y = !1,
+  setOpen: w
 }) => {
-  const [n, w] = Re(!1), E = be(0), { theme: I } = Ke(), R = p ?? I;
-  ge(() => () => clearTimeout(E.current), []);
-  const g = oe(() => re(e) ? /* @__PURE__ */ c(j, { className: o, children: e }) : /* @__PURE__ */ c("h6", { className: o, children: e }), [e, o]), l = oe(() => re(u) ? /* @__PURE__ */ c(j, { className: t, children: u }) : /* @__PURE__ */ c("h6", { className: t, children: u }), [u, t]), a = Se(() => {
-    w(!1), E.current = window.setTimeout(() => w(!0), 100);
-  }, []);
-  return /* @__PURE__ */ D(it, { swipeDirection: "right", duration: r, children: [
-    /* @__PURE__ */ c(j, { onClick: a, children: d }),
+  const S = Re(0), { theme: g } = Xe(), R = f ?? g;
+  be(() => () => clearTimeout(S.current), []);
+  const l = oe(() => re(e) ? /* @__PURE__ */ c(j, { className: o, children: e }) : e, [e, o]), a = oe(() => re(u) ? /* @__PURE__ */ c(j, { className: t, children: u }) : u, [u, t]), h = ge(() => {
+    w(!1), S.current = window.setTimeout(() => w(!0), 100);
+  }, [w]);
+  return /* @__PURE__ */ D(at, { swipeDirection: "right", duration: r, children: [
+    /* @__PURE__ */ c(j, { onClick: h, children: d }),
     /* @__PURE__ */ D(
-      ut,
+      ct,
       {
-        className: q(He({ theme: R, className: v })),
-        open: n,
+        className: q(Ke({ theme: R, className: n })),
+        open: y,
         onOpenChange: w,
         children: [
-          /* @__PURE__ */ c(lt, { asChild: !0, className: "text-lg mb-2 font-semibold", children: g }),
-          /* @__PURE__ */ c(dt, { asChild: !0, children: l }),
-          m && /* @__PURE__ */ c(pt, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ D("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
-            /* @__PURE__ */ c($e, { className: q(We({ theme: R })) }),
-            /* @__PURE__ */ c(Ve, { children: "Close toast" })
+          /* @__PURE__ */ c(ut, { asChild: !0, className: o, children: l }),
+          a && /* @__PURE__ */ c(lt, { asChild: !0, children: a }),
+          m && /* @__PURE__ */ c(dt, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ D("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
+            /* @__PURE__ */ c(
+              We,
+              {
+                className: q(
+                  Ve({
+                    theme: R,
+                    className: v
+                  })
+                )
+              }
+            ),
+            /* @__PURE__ */ c(ke, { children: "Close toast" })
           ] }) })
         ]
       }
     ),
     /* @__PURE__ */ c(
-      ct,
+      it,
       {
-        className: q(Xe({ theme: R }))
+        className: q(He({ theme: R }))
       }
     )
   ] });
 };
 export {
-  Nt as Toast
+  gt as Toast
 };

package/dist/components/Toast/Toast.variants.js

@@ -1,7 +1,6 @@
 import { c as e } from "../../index-BNmRGtA6.js";
 const a = e(
   [
-    "bg-white",
     "rounded-md",
     "shadow-md",
     "p-4",
@@ -55,7 +54,7 @@ const a = e(
       theme: "kubefirst"
     }
   }
-), i = e(["top-2", "right-2", "w-4", "h-4"], {
+), o = e(["top-2", "right-2", "w-4", "h-4"], {
   variants: {
     theme: {
       kubefirst: ["text-kubefirst-primary"],
@@ -68,7 +67,7 @@ const a = e(
   }
 });
 export {
-  i as closeToastVariants,
+  o as closeToastVariants,
   a as toastVariants,
   r as viewportToastVariants
 };