welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
574 lines (569 loc) • 20.2 kB
JavaScript
"use client";
import './Toast.css';
import { jsxs as E, jsx as y, Fragment as Y } from "react/jsx-runtime";
import * as f from "react";
import { useRef as Z, useCallback as k, useEffect as C, useState as ge, forwardRef as q, cloneElement as ye } from "react";
import { Text as L } from "./Text.js";
import { c as M } from "./index-B6iGEm-i.js";
import { Button as K } from "./Button.js";
import { CloseButton as Q } from "./CloseButton.js";
import { Icon as V } from "./Icon.js";
import { f as J } from "./forwardRefWithAs-8eP3ZN15.js";
let be = { data: "" }, he = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || be, ve = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, xe = /\/\*[^]*?\*\/| +/g, B = /\n+/g, w = (e, t) => {
let a = "", s = "", i = "";
for (let o in e) {
let r = e[o];
o[0] == "@" ? o[1] == "i" ? a = o + " " + r + ";" : s += o[1] == "f" ? w(r, o) : o + "{" + w(r, o[1] == "k" ? "" : t) + "}" : typeof r == "object" ? s += w(r, t ? t.replace(/([^,])+/g, (n) => o.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (l) => /&/.test(l) ? l.replace(/&/g, n) : n ? n + " " + l : l)) : o) : r != null && (o = /^--/.test(o) ? o : o.replace(/[A-Z]/g, "-$&").toLowerCase(), i += w.p ? w.p(o, r) : o + ":" + r + ";");
}
return a + (t && i ? t + "{" + i + "}" : i) + s;
}, v = {}, X = (e) => {
if (typeof e == "object") {
let t = "";
for (let a in e) t += a + X(e[a]);
return t;
}
return e;
}, we = (e, t, a, s, i) => {
let o = X(e), r = v[o] || (v[o] = ((l) => {
let d = 0, c = 11;
for (; d < l.length; ) c = 101 * c + l.charCodeAt(d++) >>> 0;
return "go" + c;
})(o));
if (!v[r]) {
let l = o !== e ? e : ((d) => {
let c, p, m = [{}];
for (; c = ve.exec(d.replace(xe, "")); ) c[4] ? m.shift() : c[3] ? (p = c[3].replace(B, " ").trim(), m.unshift(m[0][p] = m[0][p] || {})) : m[0][c[1]] = c[2].replace(B, " ").trim();
return m[0];
})(e);
v[r] = w(i ? { ["@keyframes " + r]: l } : l, a ? "" : "." + r);
}
let n = a && v.g ? v.g : null;
return a && (v.g = v[r]), ((l, d, c, p) => {
p ? d.data = d.data.replace(p, l) : d.data.indexOf(l) === -1 && (d.data = c ? l + d.data : d.data + l);
})(v[r], t, s, n), r;
}, _e = (e, t, a) => e.reduce((s, i, o) => {
let r = t[o];
if (r && r.call) {
let n = r(a), l = n && n.props && n.props.className || /^go/.test(n) && n;
r = l ? "." + l : n && typeof n == "object" ? n.props ? "" : w(n, "") : n === !1 ? "" : n;
}
return s + i + (r ?? "");
}, "");
function z(e) {
let t = this || {}, a = e.call ? e(t.p) : e;
return we(a.unshift ? a.raw ? _e(a, [].slice.call(arguments, 1), t.p) : a.reduce((s, i) => Object.assign(s, i && i.call ? i(t.p) : i), {}) : a, he(t.target), t.g, t.o, t.k);
}
let ee, R, F;
z.bind({ g: 1 });
let x = z.bind({ k: 1 });
function Ne(e, t, a, s) {
w.p = t, ee = e, R = a, F = s;
}
function _(e, t) {
let a = this || {};
return function() {
let s = arguments;
function i(o, r) {
let n = Object.assign({}, o), l = n.className || i.className;
a.p = Object.assign({ theme: R && R() }, n), a.o = / *go\d+/.test(l), n.className = z.apply(a, s) + (l ? " " + l : "");
let d = e;
return e[0] && (d = n.as || e, delete n.as), F && d[0] && F(n), ee(d, n);
}
return i;
};
}
var ke = (e) => typeof e == "function", A = (e, t) => ke(e) ? e(t) : e, $e = /* @__PURE__ */ (() => {
let e = 0;
return () => (++e).toString();
})(), te = /* @__PURE__ */ (() => {
let e;
return () => {
if (e === void 0 && typeof window < "u") {
let t = matchMedia("(prefers-reduced-motion: reduce)");
e = !t || t.matches;
}
return e;
};
})(), Ee = 20, H = "default", ae = (e, t) => {
let { toastLimit: a } = e.settings;
switch (t.type) {
case 0:
return { ...e, toasts: [t.toast, ...e.toasts].slice(0, a) };
case 1:
return { ...e, toasts: e.toasts.map((r) => r.id === t.toast.id ? { ...r, ...t.toast } : r) };
case 2:
let { toast: s } = t;
return ae(e, { type: e.toasts.find((r) => r.id === s.id) ? 1 : 0, toast: s });
case 3:
let { toastId: i } = t;
return { ...e, toasts: e.toasts.map((r) => r.id === i || i === void 0 ? { ...r, dismissed: !0, visible: !1 } : r) };
case 4:
return t.toastId === void 0 ? { ...e, toasts: [] } : { ...e, toasts: e.toasts.filter((r) => r.id !== t.toastId) };
case 5:
return { ...e, pausedAt: t.time };
case 6:
let o = t.time - (e.pausedAt || 0);
return { ...e, pausedAt: void 0, toasts: e.toasts.map((r) => ({ ...r, pauseDuration: r.pauseDuration + o })) };
}
}, D = [], re = { toasts: [], pausedAt: void 0, settings: { toastLimit: Ee } }, h = {}, se = (e, t = H) => {
h[t] = ae(h[t] || re, e), D.forEach(([a, s]) => {
a === t && s(h[t]);
});
}, oe = (e) => Object.keys(h).forEach((t) => se(e, t)), Te = (e) => Object.keys(h).find((t) => h[t].toasts.some((a) => a.id === e)), I = (e = H) => (t) => {
se(t, e);
}, Oe = { blank: 4e3, error: 4e3, success: 2e3, loading: 1 / 0, custom: 4e3 }, je = (e = {}, t = H) => {
let [a, s] = ge(h[t] || re), i = Z(h[t]);
C(() => (i.current !== h[t] && s(h[t]), D.push([t, s]), () => {
let r = D.findIndex(([n]) => n === t);
r > -1 && D.splice(r, 1);
}), [t]);
let o = a.toasts.map((r) => {
var n, l, d;
return { ...e, ...e[r.type], ...r, removeDelay: r.removeDelay || ((n = e[r.type]) == null ? void 0 : n.removeDelay) || (e == null ? void 0 : e.removeDelay), duration: r.duration || ((l = e[r.type]) == null ? void 0 : l.duration) || (e == null ? void 0 : e.duration) || Oe[r.type], style: { ...e.style, ...(d = e[r.type]) == null ? void 0 : d.style, ...r.style } };
});
return { ...a, toasts: o };
}, De = (e, t = "blank", a) => ({ createdAt: Date.now(), visible: !0, dismissed: !1, type: t, ariaProps: { role: "status", "aria-live": "polite" }, message: e, pauseDuration: 0, ...a, id: (a == null ? void 0 : a.id) || $e() }), T = (e) => (t, a) => {
let s = De(t, e, a);
return I(s.toasterId || Te(s.id))({ type: 2, toast: s }), s.id;
}, u = (e, t) => T("blank")(e, t);
u.error = T("error");
u.success = T("success");
u.loading = T("loading");
u.custom = T("custom");
u.dismiss = (e, t) => {
let a = { type: 3, toastId: e };
t ? I(t)(a) : oe(a);
};
u.dismissAll = (e) => u.dismiss(void 0, e);
u.remove = (e, t) => {
let a = { type: 4, toastId: e };
t ? I(t)(a) : oe(a);
};
u.removeAll = (e) => u.remove(void 0, e);
u.promise = (e, t, a) => {
let s = u.loading(t.loading, { ...a, ...a == null ? void 0 : a.loading });
return typeof e == "function" && (e = e()), e.then((i) => {
let o = t.success ? A(t.success, i) : void 0;
return o ? u.success(o, { id: s, ...a, ...a == null ? void 0 : a.success }) : u.dismiss(s), i;
}).catch((i) => {
let o = t.error ? A(t.error, i) : void 0;
o ? u.error(o, { id: s, ...a, ...a == null ? void 0 : a.error }) : u.dismiss(s);
}), e;
};
var Ae = 1e3, ze = (e, t = "default") => {
let { toasts: a, pausedAt: s } = je(e, t), i = Z(/* @__PURE__ */ new Map()).current, o = k((p, m = Ae) => {
if (i.has(p)) return;
let g = setTimeout(() => {
i.delete(p), r({ type: 4, toastId: p });
}, m);
i.set(p, g);
}, []);
C(() => {
if (s) return;
let p = Date.now(), m = a.map((g) => {
if (g.duration === 1 / 0) return;
let O = (g.duration || 0) + g.pauseDuration - (p - g.createdAt);
if (O < 0) {
g.visible && u.dismiss(g.id);
return;
}
return setTimeout(() => u.dismiss(g.id, t), O);
});
return () => {
m.forEach((g) => g && clearTimeout(g));
};
}, [a, s, t]);
let r = k(I(t), [t]), n = k(() => {
r({ type: 5, time: Date.now() });
}, [r]), l = k((p, m) => {
r({ type: 1, toast: { id: p, height: m } });
}, [r]), d = k(() => {
s && r({ type: 6, time: Date.now() });
}, [s, r]), c = k((p, m) => {
let { reverseOrder: g = !1, gutter: O = 8, defaultPosition: U } = m || {}, S = a.filter((b) => (b.position || U) === (p.position || U) && b.height), fe = S.findIndex((b) => b.id === p.id), W = S.filter((b, P) => P < fe && b.visible).length;
return S.filter((b) => b.visible).slice(...g ? [W + 1] : [0, W]).reduce((b, P) => b + (P.height || 0) + O, 0);
}, [a]);
return C(() => {
a.forEach((p) => {
if (p.dismissed) o(p.id, p.removeDelay);
else {
let m = i.get(p.id);
m && (clearTimeout(m), i.delete(p.id));
}
});
}, [a, o]), { toasts: a, handlers: { updateHeight: l, startPause: n, endPause: d, calculateOffset: c } };
}, Ie = x`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`, Se = x`
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}`, Pe = x`
from {
transform: scale(0) rotate(90deg);
opacity: 0;
}
to {
transform: scale(1) rotate(90deg);
opacity: 1;
}`, Ce = _("div")`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${(e) => e.primary || "#ff4b4b"};
position: relative;
transform: rotate(45deg);
animation: ${Ie} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after,
&:before {
content: '';
animation: ${Se} 0.15s ease-out forwards;
animation-delay: 150ms;
position: absolute;
border-radius: 3px;
opacity: 0;
background: ${(e) => e.secondary || "#fff"};
bottom: 9px;
left: 4px;
height: 2px;
width: 12px;
}
&:before {
animation: ${Pe} 0.15s ease-out forwards;
animation-delay: 180ms;
transform: rotate(90deg);
}
`, Re = x`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`, Fe = _("div")`
width: 12px;
height: 12px;
box-sizing: border-box;
border: 2px solid;
border-radius: 100%;
border-color: ${(e) => e.secondary || "#e0e0e0"};
border-right-color: ${(e) => e.primary || "#616161"};
animation: ${Re} 1s linear infinite;
`, Le = x`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`, Me = x`
0% {
height: 0;
width: 0;
opacity: 0;
}
40% {
height: 0;
width: 6px;
opacity: 1;
}
100% {
opacity: 1;
height: 10px;
}`, He = _("div")`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${(e) => e.primary || "#61d345"};
position: relative;
transform: rotate(45deg);
animation: ${Le} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after {
content: '';
box-sizing: border-box;
animation: ${Me} 0.2s ease-out forwards;
opacity: 0;
animation-delay: 200ms;
position: absolute;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: ${(e) => e.secondary || "#fff"};
bottom: 6px;
left: 6px;
height: 10px;
width: 6px;
}
`, Ge = _("div")`
position: absolute;
`, Ue = _("div")`
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 20px;
min-height: 20px;
`, We = x`
from {
transform: scale(0.6);
opacity: 0.4;
}
to {
transform: scale(1);
opacity: 1;
}`, Be = _("div")`
position: relative;
transform: scale(0.6);
opacity: 0.4;
min-width: 20px;
animation: ${We} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
`, Ye = ({ toast: e }) => {
let { icon: t, type: a, iconTheme: s } = e;
return t !== void 0 ? typeof t == "string" ? f.createElement(Be, null, t) : t : a === "blank" ? null : f.createElement(Ue, null, f.createElement(Fe, { ...s }), a !== "loading" && f.createElement(Ge, null, a === "error" ? f.createElement(Ce, { ...s }) : f.createElement(He, { ...s })));
}, Ze = (e) => `
0% {transform: translate3d(0,${e * -200}%,0) scale(.6); opacity:.5;}
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
`, qe = (e) => `
0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
100% {transform: translate3d(0,${e * -150}%,-1px) scale(.6); opacity:0;}
`, Ke = "0%{opacity:0;} 100%{opacity:1;}", Qe = "0%{opacity:1;} 100%{opacity:0;}", Ve = _("div")`
display: flex;
align-items: center;
background: #fff;
color: #363636;
line-height: 1.3;
will-change: transform;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
max-width: 350px;
pointer-events: auto;
padding: 8px 10px;
border-radius: 8px;
`, Je = _("div")`
display: flex;
justify-content: center;
margin: 4px 10px;
color: inherit;
flex: 1 1 auto;
white-space: pre-line;
`, Xe = (e, t) => {
let a = e.includes("top") ? 1 : -1, [s, i] = te() ? [Ke, Qe] : [Ze(a), qe(a)];
return { animation: t ? `${x(s)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards` : `${x(i)} 0.4s forwards cubic-bezier(.06,.71,.55,1)` };
}, et = f.memo(({ toast: e, position: t, style: a, children: s }) => {
let i = e.height ? Xe(e.position || t || "top-center", e.visible) : { opacity: 0 }, o = f.createElement(Ye, { toast: e }), r = f.createElement(Je, { ...e.ariaProps }, A(e.message, e));
return f.createElement(Ve, { className: e.className, style: { ...i, ...a, ...e.style } }, typeof s == "function" ? s({ icon: o, message: r }) : f.createElement(f.Fragment, null, o, r));
});
Ne(f.createElement);
var tt = ({ id: e, className: t, style: a, onHeightUpdate: s, children: i }) => {
let o = f.useCallback((r) => {
if (r) {
let n = () => {
let l = r.getBoundingClientRect().height;
s(e, l);
};
n(), new MutationObserver(n).observe(r, { subtree: !0, childList: !0, characterData: !0 });
}
}, [e, s]);
return f.createElement("div", { ref: o, className: t, style: a }, i);
}, at = (e, t) => {
let a = e.includes("top"), s = a ? { top: 0 } : { bottom: 0 }, i = e.includes("center") ? { justifyContent: "center" } : e.includes("right") ? { justifyContent: "flex-end" } : {};
return { left: 0, right: 0, display: "flex", position: "absolute", transition: te() ? void 0 : "all 230ms cubic-bezier(.21,1.02,.73,1)", transform: `translateY(${t * (a ? 1 : -1)}px)`, ...s, ...i };
}, rt = z`
z-index: 9999;
> * {
pointer-events: auto;
}
`, j = 16, ie = ({ reverseOrder: e, position: t = "top-center", toastOptions: a, gutter: s, children: i, toasterId: o, containerStyle: r, containerClassName: n }) => {
let { toasts: l, handlers: d } = ze(a, o);
return f.createElement("div", { "data-rht-toaster": o || "", style: { position: "fixed", zIndex: 9999, top: j, left: j, right: j, bottom: j, pointerEvents: "none", ...r }, className: n, onMouseEnter: d.startPause, onMouseLeave: d.endPause }, l.map((c) => {
let p = c.position || t, m = d.calculateOffset(c, { reverseOrder: e, gutter: s, defaultPosition: t }), g = at(p, m);
return f.createElement(tt, { id: c.id, key: c.id, onHeightUpdate: d.updateHeight, className: c.visible ? rt : "", style: g }, c.type === "custom" ? A(c.message, c) : i ? i(c) : f.createElement(et, { toast: c, position: p }));
}));
};
const st = "_root_eg55x_2", ot = "_icon_eg55x_17", it = "_progress_eg55x_40", nt = "_snackbar_eg55x_63", lt = "_growl_eg55x_71", ct = "_content_eg55x_79", dt = "_title_eg55x_91", G = {
root: st,
icon: ot,
"variant-error": "_variant-error_eg55x_24",
"variant-warning": "_variant-warning_eg55x_28",
"variant-success": "_variant-success_eg55x_32",
"variant-info": "_variant-info_eg55x_36",
progress: it,
"progress-bar": "_progress-bar_eg55x_45",
"toast-progress": "_toast-progress_eg55x_1",
"hide-progress-bar": "_hide-progress-bar_eg55x_52",
snackbar: nt,
growl: lt,
content: ct,
"close-button": "_close-button_eg55x_85",
title: dt
}, N = M(G), ne = q(
({
children: e,
className: t,
cta: a,
duration: s,
hasCloseButton: i = !0,
onClose: o,
showProgressBar: r = !1,
variant: n = "info",
...l
}, d) => /* @__PURE__ */ E(
"div",
{
className: N("root", `variant-${n}`, t),
"data-wui-persistent": !0,
onClick: (c) => c.stopPropagation(),
ref: d,
...l,
children: [
/* @__PURE__ */ E("div", { className: N("growl"), children: [
n ? /* @__PURE__ */ y(V, { className: N("icon"), name: pe[n], size: "lg" }) : null,
/* @__PURE__ */ E("div", { className: N("content"), children: [
/* @__PURE__ */ y("div", { children: e }),
a ? /* @__PURE__ */ y(Y, { children: a }) : null
] }),
i ? /* @__PURE__ */ y(
Q,
{
className: N("close-button"),
onClick: (c) => {
c.preventDefault(), c.stopPropagation(), o == null || o();
},
size: "sm"
}
) : null
] }),
/* @__PURE__ */ y(
"div",
{
className: N(r && "progress"),
style: {
"--duration": i ? `${s}ms` : "5000ms"
},
children: /* @__PURE__ */ y("div", { className: N("progress-bar") })
}
)
]
}
)
);
ne.displayName = "Toast.Growl";
const le = J((e, t) => /* @__PURE__ */ y(K, { ref: t, size: "md", variant: "secondary", ...e }));
le.displayName = "Toast.GrowlAction";
const $ = M(G), ce = q(
({
children: e,
className: t,
cta: a,
duration: s,
hasCloseButton: i = !0,
hideProgressBar: o = !1,
onClose: r,
variant: n = "info",
...l
}, d) => /* @__PURE__ */ E(
"div",
{
className: $("root", `variant-${n}`, t),
"data-wui-persistent": !0,
onClick: (c) => c.stopPropagation(),
ref: d,
...l,
children: [
/* @__PURE__ */ E("div", { className: $("snackbar"), children: [
n ? /* @__PURE__ */ y(V, { className: $("icon"), name: pe[n], size: "lg" }) : null,
/* @__PURE__ */ y(L, { variant: "body-md-strong", children: e }),
a ? /* @__PURE__ */ y(Y, { children: a }) : null,
i ? /* @__PURE__ */ y(
Q,
{
onClick: (c) => {
c.preventDefault(), c.stopPropagation(), r == null || r();
},
size: "sm"
}
) : null
] }),
/* @__PURE__ */ y(
"div",
{
className: $("progress", o && "hide-progress-bar"),
style: {
"--duration": i ? `${s}ms` : "5000ms"
},
children: /* @__PURE__ */ y("div", { className: $("progress-bar") })
}
)
]
}
)
);
ce.displayName = "Toast.Snackbar";
const de = J((e, t) => /* @__PURE__ */ y(K, { ref: t, size: "md", variant: "secondary", ...e }));
de.displayName = "Toast.SnackbarAction";
const { dismiss: wt, remove: _t } = u, pt = M(G), pe = {
error: "exclamation-octagon",
info: "info-circle",
success: "check-circle",
warning: "exclamation-triangle"
}, ut = {
error: 8e3,
info: 7e3,
success: 7e3,
warning: 8e3
}, ue = ({ children: e, className: t, ...a }) => /* @__PURE__ */ y(L, { className: pt("title", t), variant: "label-md-strong", ...a, children: e });
ue.displayName = "Toast.Title";
const me = ({ children: e, ...t }) => /* @__PURE__ */ y(L, { variant: "body-md", ...t, children: e });
me.displayName = "Toast.Subtitle";
const Nt = (e, t) => {
const s = ("type" in e ? e.type.displayName || e.type.name : void 0) === "Growl" ? "top-right" : "bottom-center", i = () => {
t != null && t.onClose && t.onClose(), u.dismiss(t == null ? void 0 : t.id);
}, o = e.props.variant || "info", r = {
duration: ut[o],
position: s,
style: {
backgroundColor: "transparent",
boxShadow: "none",
maxWidth: "100%",
padding: 0
},
...t
};
return u(
ye(e, { duration: r.duration, onClose: i }),
r
);
};
ie.displayName = "Toast";
const kt = Object.assign(ie, {
Growl: ne,
GrowlAction: le,
Snackbar: ce,
SnackbarAction: de,
Subtitle: me,
Title: ue
});
export {
pe as ICON,
kt as Toast,
wt as dismiss,
_t as remove,
Nt as toast,
G as toastClasses
};