welcome-ui 8.0.0 → 8.1.0-alpha.0

package/dist/Toast.mjs

@@ -1,23 +1,24 @@
 "use client";
-import d, { useEffect as C, useCallback as I, useState as M, useMemo as _, cloneElement as z, useContext as H } from "react";
-import v, { css as T, th as m, ThemeContext as L, ThemeProvider as W } from "@xstyled/styled-components";
-import { r as Y } from "./index-BYdkhqH4.mjs";
+import { j as d } from "./jsx-runtime-B7I4PJ0H.mjs";
+import x, { th as f, css as T, ThemeContext as R, ThemeProvider as z } from "@xstyled/styled-components";
+import { useEffect as C, useCallback as I, useState as O, useMemo as H, cloneElement as L, useContext as W } from "react";
+import { r as Y } from "./index-CBBbX29m.mjs";
 import { Box as $ } from "./Box.mjs";
-import { Alert as B } from "./Alert.mjs";
-import { CloseButton as N } from "./CloseButton.mjs";
+import { CloseButton as M } from "./CloseButton.mjs";
 import { forwardRef as D } from "./System.mjs";
-import { Button as U } from "./Button.mjs";
-var j = (t) => typeof t == "function", A = (t, e) => j(t) ? t(e) : t, q = /* @__PURE__ */ (() => {
+import { Alert as B } from "./Alert.mjs";
+import { Button as _ } from "./Button.mjs";
+var U = (t) => typeof t == "function", A = (t, e) => U(t) ? t(e) : t, q = /* @__PURE__ */ (() => {
   let t = 0;
   return () => (++t).toString();
-})(), F = 20, E = /* @__PURE__ */ new Map(), J = 1e3, O = (t) => {
-  if (E.has(t)) return;
+})(), F = 20, k = /* @__PURE__ */ new Map(), J = 1e3, E = (t) => {
+  if (k.has(t)) return;
   let e = setTimeout(() => {
-    E.delete(t), h({ type: 4, toastId: t });
+    k.delete(t), h({ type: 4, toastId: t });
   }, J);
-  E.set(t, e);
+  k.set(t, e);
 }, K = (t) => {
-  let e = E.get(t);
+  let e = k.get(t);
   e && clearTimeout(e);
 }, S = (t, e) => {
   switch (e.type) {
@@ -29,10 +30,10 @@ var j = (t) => typeof t == "function", A = (t, e) => j(t) ? t(e) : t, q = /* @__
       let { toast: s } = e;
       return t.toasts.find((o) => o.id === s.id) ? S(t, { type: 1, toast: s }) : S(t, { type: 0, toast: s });
     case 3:
-      let { toastId: a } = e;
-      return a ? O(a) : t.toasts.forEach((o) => {
-        O(o.id);
-      }), { ...t, toasts: t.toasts.map((o) => o.id === a || a === void 0 ? { ...o, visible: !1 } : o) };
+      let { toastId: i } = e;
+      return i ? E(i) : t.toasts.forEach((o) => {
+        E(o.id);
+      }), { ...t, toasts: t.toasts.map((o) => o.id === i || i === void 0 ? { ...o, visible: !1 } : o) };
     case 4:
       return e.toastId === void 0 ? { ...t, toasts: [] } : { ...t, toasts: t.toasts.filter((o) => o.id !== e.toastId) };
     case 5:
@@ -41,37 +42,37 @@ var j = (t) => typeof t == "function", A = (t, e) => j(t) ? t(e) : t, q = /* @__
       let r = e.time - (t.pausedAt || 0);
       return { ...t, pausedAt: void 0, toasts: t.toasts.map((o) => ({ ...o, pauseDuration: o.pauseDuration + r })) };
   }
-}, k = [], w = { toasts: [], pausedAt: void 0 }, h = (t) => {
-  w = S(w, t), k.forEach((e) => {
-    e(w);
+}, w = [], j = { toasts: [], pausedAt: void 0 }, h = (t) => {
+  j = S(j, t), w.forEach((e) => {
+    e(j);
   });
 }, Q = { blank: 4e3, error: 4e3, success: 2e3, loading: 1 / 0, custom: 4e3 }, V = (t = {}) => {
-  let [e, s] = M(w);
-  C(() => (k.push(s), () => {
-    let r = k.indexOf(s);
-    r > -1 && k.splice(r, 1);
+  let [e, s] = O(j);
+  C(() => (w.push(s), () => {
+    let r = w.indexOf(s);
+    r > -1 && w.splice(r, 1);
   }), [e]);
-  let a = e.toasts.map((r) => {
-    var o, i;
-    return { ...t, ...t[r.type], ...r, duration: r.duration || ((o = t[r.type]) == null ? void 0 : o.duration) || (t == null ? void 0 : t.duration) || Q[r.type], style: { ...t.style, ...(i = t[r.type]) == null ? void 0 : i.style, ...r.style } };
+  let i = e.toasts.map((r) => {
+    var o, n;
+    return { ...t, ...t[r.type], ...r, duration: r.duration || ((o = t[r.type]) == null ? void 0 : o.duration) || (t == null ? void 0 : t.duration) || Q[r.type], style: { ...t.style, ...(n = t[r.type]) == null ? void 0 : n.style, ...r.style } };
   });
-  return { ...e, toasts: a };
-}, X = (t, e = "blank", s) => ({ createdAt: Date.now(), visible: !0, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: t, pauseDuration: 0, ...s, id: (s == null ? void 0 : s.id) || q() }), x = (t) => (e, s) => {
-  let a = X(e, t, s);
-  return h({ type: 2, toast: a }), a.id;
-}, u = (t, e) => x("blank")(t, e);
-u.error = x("error");
-u.success = x("success");
-u.loading = x("loading");
-u.custom = x("custom");
+  return { ...e, toasts: i };
+}, X = (t, e = "blank", s) => ({ createdAt: Date.now(), visible: !0, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: t, pauseDuration: 0, ...s, id: (s == null ? void 0 : s.id) || q() }), b = (t) => (e, s) => {
+  let i = X(e, t, s);
+  return h({ type: 2, toast: i }), i.id;
+}, u = (t, e) => b("blank")(t, e);
+u.error = b("error");
+u.success = b("success");
+u.loading = b("loading");
+u.custom = b("custom");
 u.dismiss = (t) => {
   h({ type: 3, toastId: t });
 };
 u.remove = (t) => h({ type: 4, toastId: t });
 u.promise = (t, e, s) => {
-  let a = u.loading(e.loading, { ...s, ...s == null ? void 0 : s.loading });
-  return t.then((r) => (u.success(A(e.success, r), { id: a, ...s, ...s == null ? void 0 : s.success }), r)).catch((r) => {
-    u.error(A(e.error, r), { id: a, ...s, ...s == null ? void 0 : s.error });
+  let i = u.loading(e.loading, { ...s, ...s == null ? void 0 : s.loading });
+  return t.then((r) => (u.success(A(e.success, r), { id: i, ...s, ...s == null ? void 0 : s.success }), r)).catch((r) => {
+    u.error(A(e.error, r), { id: i, ...s, ...s == null ? void 0 : s.error });
   }), t;
 };
 var Z = (t, e) => {
@@ -82,47 +83,47 @@ var Z = (t, e) => {
   let { toasts: e, pausedAt: s } = V(t);
   C(() => {
     if (s) return;
-    let o = Date.now(), i = e.map((n) => {
-      if (n.duration === 1 / 0) return;
-      let c = (n.duration || 0) + n.pauseDuration - (o - n.createdAt);
+    let o = Date.now(), n = e.map((a) => {
+      if (a.duration === 1 / 0) return;
+      let c = (a.duration || 0) + a.pauseDuration - (o - a.createdAt);
       if (c < 0) {
-        n.visible && u.dismiss(n.id);
+        a.visible && u.dismiss(a.id);
         return;
       }
-      return setTimeout(() => u.dismiss(n.id), c);
+      return setTimeout(() => u.dismiss(a.id), c);
     });
     return () => {
-      i.forEach((n) => n && clearTimeout(n));
+      n.forEach((a) => a && clearTimeout(a));
     };
   }, [e, s]);
-  let a = I(() => {
+  let i = I(() => {
     s && h({ type: 6, time: Date.now() });
-  }, [s]), r = I((o, i) => {
-    let { reverseOrder: n = !1, gutter: c = 8, defaultPosition: f } = i || {}, p = e.filter((l) => (l.position || f) === (o.position || f) && l.height), g = p.findIndex((l) => l.id === o.id), y = p.filter((l, b) => b < g && l.visible).length;
-    return p.filter((l) => l.visible).slice(...n ? [y + 1] : [0, y]).reduce((l, b) => l + (b.height || 0) + c, 0);
+  }, [s]), r = I((o, n) => {
+    let { reverseOrder: a = !1, gutter: c = 8, defaultPosition: p } = n || {}, m = e.filter((l) => (l.position || p) === (o.position || p) && l.height), g = m.findIndex((l) => l.id === o.id), v = m.filter((l, y) => y < g && l.visible).length;
+    return m.filter((l) => l.visible).slice(...a ? [v + 1] : [0, v]).reduce((l, y) => l + (y.height || 0) + c, 0);
   }, [e]);
-  return { toasts: e, handlers: { updateHeight: Z, startPause: tt, endPause: a, calculateOffset: r } };
+  return { toasts: e, handlers: { updateHeight: Z, startPause: tt, endPause: i, calculateOffset: r } };
 }, P = u;
 function st(t = !1) {
-  const [e, s] = M(!1);
+  const [e, s] = O(!1);
   return C(() => {
     s(!0);
-  }, []), _(() => t ? (a) => a : e ? (a, r, o) => Y.createPortal(a, r || document.body, o) : () => null, [t, e]);
+  }, []), H(() => t ? (i) => i : e ? (i, r, o) => Y.createPortal(i, r || document.body, o) : () => null, [t, e]);
 }
-const ot = v($)(
+const ot = x($)(
   ({ isBottom: t }) => T`
-    ${m("toasts.default")}
-    ${t ? m("toasts.bottom") : m("toasts.top")}
+    ${f("toasts.default")}
+    ${t ? f("toasts.bottom") : f("toasts.top")}
 
     position: fixed;
     z-index: 9999;
     transition: all 400ms ease-out;
   `
-), rt = v(B)(
+), rt = x(B)(
   () => T`
     position: relative;
     padding: lg;
-    ${m("toasts.growls.default")};
+    ${f("toasts.growls.default")};
 
     div:first-of-type {
       align-self: baseline;
@@ -132,132 +133,138 @@ const ot = v($)(
       flex-shrink: 0;
     }
   `
-), at = v($)(
+), it = x($)(
   () => T`
     display: flex;
     align-items: center;
     padding-bottom: xs;
-    ${m("toasts.growls.title")};
+    ${f("toasts.growls.title")};
 
     & > *:first-child {
       flex-shrink: 0;
     }
   `
-), nt = v(B)`
+), at = x(B)`
   display: flex;
   align-items: center;
   padding: sm md;
-  ${m("toasts.snackbar.default")};
+  ${f("toasts.snackbar.default")};
 
   > div {
     align-self: center !important;
   }
-`, it = v.divBox(
+`, nt = x.divBox(
   ({ variant: t }) => T`
-    ${m("toasts.snackbar.separator.default")};
-    ${m(`toasts.snackbar.separator.${t}`)};
+    ${f("toasts.snackbar.separator.default")};
+    ${f(`toasts.snackbar.separator.${t}`)};
     padding-left: sm;
   `
-), lt = {
-  "top-left": { top: 0, left: 0 },
-  "top-center": { top: 0, left: "50%" },
-  "top-right": { top: 0, right: 0 },
-  "bottom-left": { bottom: 0, left: 0 },
+), N = D(
+  ({ children: t, dataTestId: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default" }, n) => {
+    const a = e ? `${e}-close-button` : void 0;
+    return /* @__PURE__ */ d.jsxs(
+      rt,
+      {
+        "data-testid": e,
+        hasCloseButton: s,
+        icon: i,
+        ref: n,
+        variant: o,
+        children: [
+          s && /* @__PURE__ */ d.jsx(
+            M,
+            {
+              dataTestId: a,
+              onClick: r,
+              position: "absolute",
+              right: "sm",
+              top: "sm"
+            }
+          ),
+          /* @__PURE__ */ d.jsx($, { pr: "xl", children: t })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "Growl";
+const G = D(
+  ({ children: t, cta: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default", ...n }, a) => /* @__PURE__ */ d.jsx(at, { icon: i, ref: a, variant: o, ...n, children: /* @__PURE__ */ d.jsxs($, { alignItems: "center", display: "flex", gap: "sm", children: [
+    t,
+    e && /* @__PURE__ */ d.jsx(nt, { variant: o, children: e }),
+    s && /* @__PURE__ */ d.jsx(M, { onClick: r, size: "xs" })
+  ] }) })
+), lt = D((t, e) => /* @__PURE__ */ d.jsx(_, { flexShrink: 0, ref: e, size: "xs", variant: "ghost", ...t }));
+G.displayName = "Snackbar";
+const dt = {
   "bottom-center": { bottom: 0, left: "50%" },
-  "bottom-right": { bottom: 0, right: 0 }
-}, dt = ({
+  "bottom-left": { bottom: 0, left: 0 },
+  "bottom-right": { bottom: 0, right: 0 },
+  "top-center": { left: "50%", top: 0 },
+  "top-left": { left: 0, top: 0 },
+  "top-right": { right: 0, top: 0 }
+}, ut = ({
   calculateOffset: t,
   toast: e,
   updateHeight: s
 }) => {
-  var p, g, y;
+  var m, g, v;
   if (typeof e.message == "string")
     return console.warn("You must pass a React component or a HTML element."), null;
-  const a = t(e, { reverseOrder: !1, gutter: 0 }), r = (l) => {
+  const i = t(e, { gutter: 0, reverseOrder: !1 }), r = (l) => {
     if (l && typeof e.height != "number") {
-      const b = l.getBoundingClientRect().height;
-      s(e.id, b);
+      const y = l.getBoundingClientRect().height;
+      s(e.id, y);
     }
-  }, o = (p = e.position) == null ? void 0 : p.includes("center"), i = (g = e.position) == null ? void 0 : g.includes("top"), n = (y = e.position) == null ? void 0 : y.includes("bottom"), c = () => {
+  }, o = (m = e.position) == null ? void 0 : m.includes("center"), n = (g = e.position) == null ? void 0 : g.includes("top"), a = (v = e.position) == null ? void 0 : v.includes("bottom"), c = () => {
     e.onClose && e.onClose(), P.dismiss(e.id);
-  }, f = {
+  }, p = {
     opacity: e.visible ? 1 : 0,
-    transform: `translate(${o ? "-50%" : "0"}, ${a * (i ? 1 : -1)}px)`,
-    ...lt[e.position]
+    transform: `translate(${o ? "-50%" : "0"}, ${i * (n ? 1 : -1)}px)`,
+    ...dt[e.position || "top-center"]
   };
-  return /* @__PURE__ */ d.createElement(
+  return /* @__PURE__ */ d.jsx(
     ot,
     {
-      isBottom: n,
-      opacity: f.opacity,
+      isBottom: a || !1,
+      opacity: p.opacity,
       ref: r,
-      style: f,
-      transform: f.transform,
-      ...e.ariaProps
-    },
-    z(e.message, { onClose: c })
+      style: p,
+      transform: p.transform,
+      ...e.ariaProps,
+      children: L(e.message, { onClose: c })
+    }
   );
-}, G = D(
-  ({ children: t, dataTestId: e, hasCloseButton: s = !0, icon: a, onClose: r, variant: o = "default" }, i) => {
-    const n = e ? `${e}-close-button` : void 0;
-    return /* @__PURE__ */ d.createElement(
-      rt,
-      {
-        "data-testid": e,
-        hasCloseButton: s,
-        icon: a,
-        ref: i,
-        variant: o
-      },
-      s && /* @__PURE__ */ d.createElement(
-        N,
-        {
-          dataTestId: n,
-          onClick: r,
-          position: "absolute",
-          right: "sm",
-          top: "sm"
-        }
-      ),
-      /* @__PURE__ */ d.createElement($, { pr: "xl" }, t)
-    );
-  }
-);
-G.displayName = "Growl";
-const R = D(
-  ({ children: t, cta: e, hasCloseButton: s = !0, icon: a, onClose: r, variant: o = "default", ...i }, n) => /* @__PURE__ */ d.createElement(nt, { icon: a, ref: n, variant: o, ...i }, /* @__PURE__ */ d.createElement($, { alignItems: "center", display: "flex", gap: "sm" }, t, e && /* @__PURE__ */ d.createElement(it, { variant: o }, e), s && /* @__PURE__ */ d.createElement(N, { onClick: r, size: "xs" })))
-), ut = D((t, e) => /* @__PURE__ */ d.createElement(U, { flexShrink: 0, ref: e, size: "xs", variant: "ghost", ...t }));
-R.displayName = "Snackbar";
-const xt = ({ pauseOnHover: t = !0 }) => {
-  const e = H(L), s = st(), { handlers: a, toasts: r } = et(), { calculateOffset: o, endPause: i, startPause: n, updateHeight: c } = a, f = t ? n : void 0, p = t ? i : void 0;
-  return /* @__PURE__ */ d.createElement(W, { theme: e }, r.length > 0 && s(
-    /* @__PURE__ */ d.createElement("div", { "data-wui-persistent": !0, onMouseEnter: f, onMouseLeave: p }, r.map((g) => /* @__PURE__ */ d.createElement(
-      dt,
+}, kt = ({ pauseOnHover: t = !0 }) => {
+  const e = W(R), s = st(), { handlers: i, toasts: r } = et(), { calculateOffset: o, endPause: n, startPause: a, updateHeight: c } = i, p = t ? a : void 0, m = t ? n : void 0;
+  return r.length === 0 ? null : /* @__PURE__ */ d.jsx(z, { theme: e || {}, children: s(
+    /* @__PURE__ */ d.jsx("div", { "data-wui-persistent": !0, onMouseEnter: p, onMouseLeave: m, children: r.map((g) => /* @__PURE__ */ d.jsx(
+      ut,
       {
         calculateOffset: o,
-        key: g.id,
         toast: g,
         updateHeight: c
-      }
-    )))
-  ));
-}, ct = ({ children: t, ...e }) => /* @__PURE__ */ d.createElement(at, { ...e }, t), Et = (t, e) => {
-  var o, i;
+      },
+      g.id
+    )) })
+  ) });
+}, ct = ({ children: t, ...e }) => /* @__PURE__ */ d.jsx(it, { ...e, children: t }), wt = (t, e) => {
+  var o, n;
   const r = {
     duration: 7e3,
-    position: (typeof t == "string" ? void 0 : ((o = t == null ? void 0 : t.type) == null ? void 0 : o.displayName) || ((i = t == null ? void 0 : t.type) == null ? void 0 : i.name)) === "Growl" ? "top-right" : "bottom-center",
+    position: (typeof t == "string" ? void 0 : ((o = t == null ? void 0 : t.type) == null ? void 0 : o.displayName) || ((n = t == null ? void 0 : t.type) == null ? void 0 : n.name)) === "Growl" ? "top-right" : "bottom-center",
     ...e
   };
   return P(t, r);
-}, kt = (t) => {
+}, jt = (t) => {
   P.remove(t);
-}, wt = (t) => {
+}, Tt = (t) => {
   P.dismiss(t);
-}, Tt = { Title: ct, Growl: G, Snackbar: R, SnackbarAction: ut };
+}, $t = { Growl: N, Snackbar: G, SnackbarAction: lt, Title: ct };
 export {
-  xt as Notifications,
-  Tt as Toast,
-  wt as dismiss,
-  kt as remove,
-  Et as toast
+  kt as Notifications,
+  $t as Toast,
+  Tt as dismiss,
+  jt as remove,
+  wt as toast
 };

package/dist/Toggle.mjs

@@ -1,23 +1,23 @@
 "use client";
-import r from "react";
-import s, { css as i, th as t, system as f } from "@xstyled/styled-components";
-import { shouldForwardProp as g, forwardRef as $ } from "./System.mjs";
-import { C as c, a as u } from "./index-BDeIsk2X.mjs";
-const b = s(c).withConfig({ shouldForwardProp: g })(
-  ({ order: o = "-1", size: e }) => i`
+import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { C as f, a as $ } from "./index-5HBq1O6Z.mjs";
+import { shouldForwardProp as g, forwardRef as c } from "./System.mjs";
+import r, { th as t, system as h, css as i } from "@xstyled/styled-components";
+const u = r(f).withConfig({ shouldForwardProp: g })(
+  ({ order: e = "-1", size: o }) => i`
     ${t("toggles.item.default")};
-    ${t(`toggles.item.sizes.${e}`)};
+    ${t(`toggles.item.sizes.${o}`)};
     position: relative;
     display: block;
     appearance: none;
     outline: none !important; /* important for firefox */
     cursor: pointer;
     transition: medium;
-    order: ${o};
+    order: ${e};
 
     &::after {
       ${t("toggles.after.default")};
-      ${t(`toggles.after.sizes.${e}`)};
+      ${t(`toggles.after.sizes.${o}`)};
       content: '';
       top: 0;
       bottom: 0;
@@ -40,7 +40,7 @@ const b = s(c).withConfig({ shouldForwardProp: g })(
     &:checked {
       &::after {
         /* border + left padding + right padding */
-        transform: translateX(calc(${t(`toggles.item.sizes.${e}.width`)} - 100% - 0.3rem));
+        transform: translateX(calc(${t(`toggles.item.sizes.${o}.width`)} - 100% - 0.3rem));
       }
 
       &:not(:disabled) {
@@ -52,39 +52,42 @@ const b = s(c).withConfig({ shouldForwardProp: g })(
       }
     }
 
-    ${f};
+    ${h};
   `
-), h = s.divBox`
+), x = r.divBox`
   position: relative;
   display: inline-block;
   cursor: pointer;
-`, x = s.divBox.withConfig({ shouldForwardProp: g })(
-  ({ checked: o, size: e }) => i`
+`, b = r.divBox.withConfig({ shouldForwardProp: g })(
+  ({ checked: e, size: o }) => i`
     position: absolute;
     z-index: 1;
     display: flex;
     align-items: center;
-    height: ${t(`toggles.item.sizes.${e}.height`)};
+    height: ${t(`toggles.item.sizes.${o}.height`)};
     bottom: 0;
 
     > svg,
     i {
-      ${t(`toggles.icon.sizes.${e}`)}
+      ${t(`toggles.icon.sizes.${o}`)}
     }
 
-    ${o && i`
-      left: ${t(`toggles.icon.position.${e}.left`)};
+    ${e && i`
+      left: ${t(`toggles.icon.position.${o}.left`)};
       color: neutral-90;
     `}
 
-    ${!o && i`
-      right: ${t(`toggles.icon.position.${e}.right`)};
+    ${!e && i`
+      right: ${t(`toggles.icon.position.${o}.right`)};
     `}
   `
-), w = $(
-  ({ checked: o, checkedIcon: e, onClick: a, size: l = "xs", uncheckedIcon: n, ...m }, d) => {
-    const p = e && n;
-    return /* @__PURE__ */ r.createElement(h, { onClick: a }, p && /* @__PURE__ */ r.createElement(x, { checked: o, onClick: a, size: l }, o ? e : n), /* @__PURE__ */ r.createElement(u, { ...m, Component: b, checked: o, ref: d, size: l }));
+), w = c(
+  ({ checked: e, checkedIcon: o, onClick: n, size: a = "xs", uncheckedIcon: l, ...d }, p) => {
+    const m = o && l;
+    return /* @__PURE__ */ s.jsxs(x, { onClick: n, children: [
+      m && /* @__PURE__ */ s.jsx(b, { checked: e, onClick: n, size: a, children: e ? o : l }),
+      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: u, ref: p, size: a })
+    ] });
   }
 );
 w.displayName = "Toggle";