welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
857 lines (856 loc) • 21.5 kB
JavaScript
"use client";
import * as v from "react";
import { isValidElement as Tt, useMemo as O, useLayoutEffect as Ft, useEffect as g, useState as x, useCallback as ct, useReducer as At, useRef as P, createContext as It, useContext as St } from "react";
import { jsx as h } from "react/jsx-runtime";
function he(...t) {
}
function we(t, e) {
if (t === e) return !0;
if (!t || !e || typeof t != "object" || typeof e != "object") return !1;
const n = Object.keys(t), r = Object.keys(e), { length: u } = n;
if (r.length !== u) return !1;
for (const o of n)
if (t[o] !== e[o])
return !1;
return !0;
}
function xe(t, e) {
if (Pt(t)) {
const n = Rt(e) ? e() : e;
return t(n);
}
return t;
}
function Pt(t) {
return typeof t == "function";
}
function Rt(t) {
return typeof t == "function";
}
function V(t, e) {
return typeof Object.hasOwn == "function" ? Object.hasOwn(t, e) : Object.prototype.hasOwnProperty.call(t, e);
}
function Ce(...t) {
return (...e) => {
for (const n of t)
typeof n == "function" && n(...e);
};
}
function Te(t) {
return t.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
function Fe(t, e) {
const n = { ...t };
for (const r of e)
V(n, r) && delete n[r];
return n;
}
function Ae(t, e) {
const n = {};
for (const r of e)
V(t, r) && (n[r] = t[r]);
return n;
}
function Ie(t) {
return t;
}
function Se(t, e) {
if (!t)
throw typeof e != "string" ? new Error("Invariant failed") : new Error(e);
}
function Pe(t) {
return Object.keys(t);
}
function Re(t, ...e) {
const n = typeof t == "function" ? t(...e) : t;
return n == null ? !1 : !n;
}
function Nt(t) {
return t.disabled || t["aria-disabled"] === !0 || t["aria-disabled"] === "true";
}
function Mt(t) {
const e = {};
for (const n in t)
t[n] !== void 0 && (e[n] = t[n]);
return e;
}
function Ne(...t) {
for (const e of t)
if (e !== void 0) return e;
}
function Dt(t, e) {
typeof t == "function" ? t(e) : t && (t.current = e);
}
function Lt(t) {
return !t || !Tt(t) ? !1 : "ref" in t.props || "ref" in t;
}
function Ot(t) {
return Lt(t) ? { ...t.props }.ref || t.ref : null;
}
function Vt(t, e) {
const n = { ...t };
for (const r in e) {
if (!V(e, r)) continue;
if (r === "className") {
const o = "className";
n[o] = t[o] ? `${t[o]} ${e[o]}` : e[o];
continue;
}
if (r === "style") {
const o = "style";
n[o] = t[o] ? { ...t[o], ...e[o] } : e[o];
continue;
}
const u = e[r];
if (typeof u == "function" && r.startsWith("on")) {
const o = t[r];
if (typeof o == "function") {
n[r] = (...s) => {
u(...s), o(...s);
};
continue;
}
}
n[r] = u;
}
return n;
}
var C = kt();
function kt() {
var t;
return typeof window < "u" && !!((t = window.document) != null && t.createElement);
}
function F(t) {
return t ? "self" in t ? t.document : t.ownerDocument || document : document;
}
function Me(t) {
return t ? "self" in t ? t.self : F(t).defaultView || window : self;
}
function T(t, e = !1) {
var n;
const { activeElement: r } = F(t);
if (!(r != null && r.nodeName))
return null;
if (k(r) && ((n = r.contentDocument) != null && n.body))
return T(
r.contentDocument.body,
e
);
if (e) {
const u = r.getAttribute("aria-activedescendant");
if (u) {
const o = F(r).getElementById(u);
if (o)
return o;
}
}
return r;
}
function A(t, e) {
return t === e || t.contains(e);
}
function k(t) {
return t.tagName === "IFRAME";
}
function Kt(t) {
const e = t.tagName.toLowerCase();
return e === "button" ? !0 : e === "input" && t.type ? Bt.indexOf(t.type) !== -1 : !1;
}
var Bt = [
"button",
"color",
"file",
"image",
"reset",
"submit"
];
function _t(t) {
if (typeof t.checkVisibility == "function")
return t.checkVisibility();
const e = t;
return e.offsetWidth > 0 || e.offsetHeight > 0 || t.getClientRects().length > 0;
}
function K(t) {
try {
const e = t instanceof HTMLInputElement && t.selectionStart !== null, n = t.tagName === "TEXTAREA";
return e || n || !1;
} catch {
return !1;
}
}
function De(t) {
return t.isContentEditable || K(t);
}
function Le(t) {
if (K(t))
return t.value;
if (t.isContentEditable) {
const e = F(t).createRange();
return e.selectNodeContents(t), e.toString();
}
return "";
}
function Oe(t) {
let e = 0, n = 0;
if (K(t))
e = t.selectionStart || 0, n = t.selectionEnd || 0;
else if (t.isContentEditable) {
const r = F(t).getSelection();
if (r != null && r.rangeCount && r.anchorNode && A(t, r.anchorNode) && r.focusNode && A(t, r.focusNode)) {
const u = r.getRangeAt(0), o = u.cloneRange();
o.selectNodeContents(t), o.setEnd(u.startContainer, u.startOffset), e = o.toString().length, o.setEnd(u.endContainer, u.endOffset), n = o.toString().length;
}
}
return { start: e, end: n };
}
function Wt(t, e) {
const n = ["dialog", "menu", "listbox", "tree", "grid"], r = t == null ? void 0 : t.getAttribute("role");
return r && n.indexOf(r) !== -1 ? r : e;
}
function Ve(t, e) {
var n;
const r = {
menu: "menuitem",
listbox: "option",
tree: "treeitem"
}, u = Wt(t);
return u && (n = r[u]) != null ? n : e;
}
function qt(t) {
if (!t) return null;
const e = (n) => n === "auto" || n === "scroll";
if (t.clientHeight && t.scrollHeight > t.clientHeight) {
const { overflowY: n } = getComputedStyle(t);
if (e(n)) return t;
} else if (t.clientWidth && t.scrollWidth > t.clientWidth) {
const { overflowX: n } = getComputedStyle(t);
if (e(n)) return t;
}
return qt(t.parentElement) || document.scrollingElement || document.body;
}
function ke(t, e) {
const n = t.map((u, o) => [o, u]);
let r = !1;
return n.sort(([u, o], [s, a]) => {
const l = e(o), c = e(a);
return l === c || !l || !c ? 0 : Ut(l, c) ? (u > s && (r = !0), -1) : (u < s && (r = !0), 1);
}), r ? n.map(([u, o]) => o) : t;
}
function Ut(t, e) {
return !!(e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_PRECEDING);
}
function jt() {
return C && !!navigator.maxTouchPoints;
}
function ft() {
return C ? /mac|iphone|ipad|ipod/i.test(navigator.platform) : !1;
}
function Xt() {
return C && ft() && /apple/i.test(navigator.vendor);
}
function Ke() {
return C && /firefox\//i.test(navigator.userAgent);
}
function Be() {
return C && navigator.platform.startsWith("Mac") && !jt();
}
function Gt(t) {
return !!(t.currentTarget && !A(t.currentTarget, t.target));
}
function Q(t) {
return t.target === t.currentTarget;
}
function _e(t) {
const e = t.currentTarget;
if (!e) return !1;
const n = ft();
if (n && !t.metaKey || !n && !t.ctrlKey) return !1;
const r = e.tagName.toLowerCase();
return r === "a" || r === "button" && e.type === "submit" || r === "input" && e.type === "submit";
}
function We(t) {
const e = t.currentTarget;
if (!e) return !1;
const n = e.tagName.toLowerCase();
return t.altKey ? n === "a" || n === "button" && e.type === "submit" || n === "input" && e.type === "submit" : !1;
}
function qe(t, e, n) {
const r = new Event(e, n);
return t.dispatchEvent(r);
}
function Ue(t, e) {
const n = new FocusEvent("blur", e), r = t.dispatchEvent(n), u = { ...e, bubbles: !0 };
return t.dispatchEvent(new FocusEvent("focusout", u)), r;
}
function je(t, e, n) {
const r = new KeyboardEvent(e, n);
return t.dispatchEvent(r);
}
function Xe(t, e) {
const n = new MouseEvent("click", e);
return t.dispatchEvent(n);
}
function Ht(t, e) {
const n = e || t.currentTarget, r = t.relatedTarget;
return !r || !A(n, r);
}
function D(t, e, n, r) {
const o = ((a) => {
const l = requestAnimationFrame(a);
return () => cancelAnimationFrame(l);
})(() => {
t.removeEventListener(e, s, !0), n();
}), s = () => {
o(), n();
};
return t.addEventListener(e, s, { once: !0, capture: !0 }), o;
}
function p(t, e, n, r = window) {
const u = [];
try {
r.document.addEventListener(t, e, n);
for (const s of Array.from(r.frames))
u.push(p(t, e, n, s));
} catch {
}
return () => {
try {
r.document.removeEventListener(t, e, n);
} catch {
}
for (const s of u)
s();
};
}
var lt = { ...v }, Z = lt.useId, tt = lt.useInsertionEffect, R = C ? Ft : g;
function Ge(t) {
const [e] = x(t);
return e;
}
function He(t) {
const e = P(t);
return R(() => {
e.current = t;
}), e;
}
function m(t) {
const e = P(() => {
throw new Error("Cannot call an event handler while rendering.");
});
return tt ? tt(() => {
e.current = t;
}) : e.current = t, ct((...n) => {
var r;
return (r = e.current) == null ? void 0 : r.call(e, ...n);
}, []);
}
function Ye(t) {
const [e, n] = x(null);
return R(() => {
if (e == null || !t) return;
let r = null;
return t((u) => (r = u, e)), () => {
t(r);
};
}, [e, t]), [e, n];
}
function B(...t) {
return O(() => {
if (t.some(Boolean))
return (e) => {
for (const n of t)
Dt(n, e);
};
}, t);
}
function $e(t) {
if (Z) {
const r = Z();
return t || r;
}
const [e, n] = x(t);
return R(() => {
if (t || e) return;
const r = Math.random().toString(36).slice(2, 8);
n(`id-${r}`);
}, [t, e]), t || e;
}
function Yt(t, e) {
const n = (o) => {
if (typeof o == "string")
return o;
}, [r, u] = x(() => n(e));
return R(() => {
const o = t && "current" in t ? t.current : t;
u((o == null ? void 0 : o.tagName.toLowerCase()) || n(e));
}, [t, e]), r;
}
function ze(t, e) {
const n = P(!1);
g(() => {
if (n.current)
return t();
n.current = !0;
}, e), g(
() => () => {
n.current = !1;
},
[]
);
}
function Je() {
return At(() => [], []);
}
function Qe(t) {
return m(
typeof t == "function" ? t : () => t
);
}
function Ze(t, e, n = []) {
const r = ct(
(u) => (t.wrapElement && (u = t.wrapElement(u)), e(u)),
[...n, t.wrapElement]
);
return { ...t, wrapElement: r };
}
function tn(t = !1, e) {
const [n, r] = x(null);
return { portalRef: B(r, e), portalNode: n, domReady: !t || n };
}
function en(t, e, n) {
const r = t.onLoadedMetadataCapture, u = O(() => Object.assign(() => {
}, { ...r, [e]: n }), [r, e, n]);
return [r == null ? void 0 : r[e], { onLoadedMetadataCapture: u }];
}
var et = !1;
function nn() {
return g(() => {
et || (p("mousemove", zt, !0), p("mousedown", S, !0), p("mouseup", S, !0), p("keydown", S, !0), p("scroll", S, !0), et = !0);
}, []), m(() => _);
}
var _ = !1, nt = 0, rt = 0;
function $t(t) {
const e = t.movementX || t.screenX - nt, n = t.movementY || t.screenY - rt;
return nt = t.screenX, rt = t.screenY, e || n || process.env.NODE_ENV === "test";
}
function zt(t) {
$t(t) && (_ = !0);
}
function S() {
_ = !1;
}
function Jt(t) {
const e = v.forwardRef(
// @ts-ignore Incompatible with React 19 types. Ignore for now.
(n, r) => t({ ...n, ref: r })
);
return e.displayName = t.displayName || t.name, e;
}
function rn(t, e) {
return v.memo(t, e);
}
function Qt(t, e) {
const { wrapElement: n, render: r, ...u } = e, o = B(e.ref, Ot(r));
let s;
if (v.isValidElement(r)) {
const a = {
// @ts-ignore Incompatible with React 19 types. Ignore for now.
...r.props,
ref: o
};
s = v.cloneElement(r, Vt(u, a));
} else r ? s = r(u) : s = /* @__PURE__ */ h(t, { ...u });
return n ? n(s) : s;
}
function Zt(t) {
const e = (n = {}) => t(n);
return e.displayName = t.name, e;
}
function on(t = [], e = []) {
const n = v.createContext(void 0), r = v.createContext(void 0), u = () => v.useContext(n), o = (c = !1) => {
const d = v.useContext(r), y = u();
return c ? d : d || y;
}, s = () => {
const c = v.useContext(r), d = u();
if (!(c && c === d))
return d;
}, a = (c) => t.reduceRight(
(d, y) => /* @__PURE__ */ h(y, { ...c, children: d }),
/* @__PURE__ */ h(n.Provider, { ...c })
);
return {
context: n,
scopedContext: r,
useContext: u,
useScopedContext: o,
useProviderContext: s,
ContextProvider: a,
ScopedContextProvider: (c) => /* @__PURE__ */ h(a, { ...c, children: e.reduceRight(
(d, y) => /* @__PURE__ */ h(y, { ...c, children: d }),
/* @__PURE__ */ h(r.Provider, { ...c })
) })
};
}
var te = It(!0), N = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
function ee(t) {
return Number.parseInt(t.getAttribute("tabindex") || "0", 10) < 0;
}
function w(t) {
return !(!t.matches(N) || !_t(t) || t.closest("[inert]"));
}
function I(t) {
if (!w(t) || ee(t)) return !1;
if (!("form" in t) || !t.form || t.checked || t.type !== "radio") return !0;
const e = t.form.elements.namedItem(t.name);
if (!e || !("length" in e)) return !0;
const n = T(t);
return !n || n === t || !("form" in n) || n.form !== t.form || n.name !== t.name;
}
function W(t, e) {
const n = Array.from(
t.querySelectorAll(N)
);
e && n.unshift(t);
const r = n.filter(w);
return r.forEach((u, o) => {
var s;
if (!k(u)) return;
const a = (s = u.contentDocument) == null ? void 0 : s.body;
a && r.splice(o, 1, ...W(a));
}), r;
}
function q(t, e, n) {
const r = Array.from(
t.querySelectorAll(N)
), u = r.filter(I);
return e && I(t) && u.unshift(t), u.forEach((o, s) => {
var a;
if (!k(o)) return;
const l = (a = o.contentDocument) == null ? void 0 : a.body;
if (!l) return;
const c = q(
l,
!1,
n
);
u.splice(s, 1, ...c);
}), !u.length && n ? r : u;
}
function un(t, e, n) {
const [r] = q(
t,
e,
n
);
return r || null;
}
function ne(t, e, n, r) {
const u = T(t), o = W(t, e), s = o.indexOf(u), a = o.slice(s + 1);
return a.find(I) || (n ? o.find(I) : null) || (r ? a[0] : null) || null;
}
function sn(t, e) {
return ne(
document.body,
!1,
t,
e
);
}
function re(t, e, n, r) {
const u = T(t), o = W(t, e).reverse(), s = o.indexOf(u);
return o.slice(s + 1).find(I) || null || null || null;
}
function an(t, e) {
return re(
document.body,
!1
);
}
function oe(t) {
for (; t && !w(t); )
t = t.closest(N);
return t || null;
}
function ot(t) {
const e = T(t);
if (!e) return !1;
if (e === t) return !0;
const n = e.getAttribute("aria-activedescendant");
return n ? n === t.id : !1;
}
function ue(t) {
const e = T(t);
if (!e) return !1;
if (A(t, e)) return !0;
const n = e.getAttribute("aria-activedescendant");
return !n || !("id" in t) ? !1 : n === t.id ? !0 : !!t.querySelector(`#${CSS.escape(n)}`);
}
function ie(t) {
!ue(t) && w(t) && t.focus();
}
function se(t) {
var e;
const n = (e = t.getAttribute("tabindex")) != null ? e : "";
t.setAttribute("data-tabindex", n), t.setAttribute("tabindex", "-1");
}
function cn(t, e) {
const n = q(t, e);
for (const r of n)
se(r);
}
function fn(t) {
const e = t.querySelectorAll("[data-tabindex]"), n = (r) => {
const u = r.getAttribute("data-tabindex");
r.removeAttribute("data-tabindex"), u ? r.setAttribute("tabindex", u) : r.removeAttribute("tabindex");
};
t.hasAttribute("data-tabindex") && n(t);
for (const r of e)
n(r);
}
function ln(t, e) {
"scrollIntoView" in t ? (t.focus({ preventScroll: !0 }), t.scrollIntoView({ block: "nearest", inline: "nearest", ...e })) : t.focus();
}
var ae = "div", ut = Xt(), ce = [
"text",
"search",
"url",
"tel",
"email",
"password",
"number",
"date",
"month",
"week",
"time",
"datetime",
"datetime-local"
], dt = Symbol("safariFocusAncestor");
function dn(t) {
return t ? !!t[dt] : !1;
}
function it(t, e) {
t && (t[dt] = e);
}
function fe(t) {
const { tagName: e, readOnly: n, type: r } = t;
return e === "TEXTAREA" && !n || e === "SELECT" && !n ? !0 : e === "INPUT" && !n ? ce.includes(r) : !!(t.isContentEditable || t.getAttribute("role") === "combobox" && t.dataset.name);
}
function le(t) {
return "labels" in t ? t.labels : null;
}
function st(t) {
return t.tagName.toLowerCase() === "input" && t.type ? t.type === "radio" || t.type === "checkbox" : !1;
}
function de(t) {
return t ? t === "button" || t === "summary" || t === "input" || t === "select" || t === "textarea" || t === "a" : !0;
}
function be(t) {
return t ? t === "button" || t === "input" || t === "select" || t === "textarea" : !0;
}
function ve(t, e, n, r, u) {
return t ? e ? n && !r ? -1 : void 0 : n ? u : u || 0 : u;
}
function L(t, e) {
return m((n) => {
t == null || t(n), !n.defaultPrevented && e && (n.stopPropagation(), n.preventDefault());
});
}
var at = !1, U = !0;
function pe(t) {
const e = t.target;
e && "hasAttribute" in e && (e.hasAttribute("data-focus-visible") || (U = !1));
}
function me(t) {
t.metaKey || t.ctrlKey || t.altKey || (U = !0);
}
var ge = Zt(
function({
focusable: e = !0,
accessibleWhenDisabled: n,
autoFocus: r,
onFocusVisible: u,
...o
}) {
const s = P(null);
g(() => {
e && (at || (p("mousedown", pe, !0), p("keydown", me, !0), at = !0));
}, [e]), ut && g(() => {
if (!e) return;
const i = s.current;
if (!i || !st(i)) return;
const f = le(i);
if (!f) return;
const b = () => queueMicrotask(() => i.focus());
for (const E of f)
E.addEventListener("mouseup", b);
return () => {
for (const E of f)
E.removeEventListener("mouseup", b);
};
}, [e]);
const a = e && Nt(o), l = !!a && !n, [c, d] = x(!1);
g(() => {
e && l && c && d(!1);
}, [e, l, c]), g(() => {
if (!e || !c) return;
const i = s.current;
if (!i || typeof IntersectionObserver > "u") return;
const f = new IntersectionObserver(() => {
w(i) || d(!1);
});
return f.observe(i), () => f.disconnect();
}, [e, c]);
const y = L(
o.onKeyPressCapture,
a
), bt = L(
o.onMouseDownCapture,
a
), vt = L(o.onClickCapture, a), j = o.onMouseDown, pt = m((i) => {
if (j == null || j(i), i.defaultPrevented || !e) return;
const f = i.currentTarget;
if (!ut || Gt(i) || !Kt(f) && !st(f)) return;
let b = !1;
const E = () => {
b = !0;
}, Ct = { capture: !0, once: !0 };
f.addEventListener("focusin", E, Ct);
const J = oe(f.parentElement);
it(J, !0), D(f, "mouseup", () => {
f.removeEventListener("focusin", E, !0), it(J, !1), !b && ie(f);
});
}), X = (i, f) => {
if (f && (i.currentTarget = f), !e) return;
const b = i.currentTarget;
b && ot(b) && (u == null || u(i), !i.defaultPrevented && (b.dataset.focusVisible = "true", d(!0)));
}, G = o.onKeyDownCapture, mt = m((i) => {
if (G == null || G(i), i.defaultPrevented || !e || c || i.metaKey || i.altKey || i.ctrlKey || !Q(i)) return;
const f = i.currentTarget;
D(f, "focusout", () => X(i, f));
}), H = o.onFocusCapture, gt = m((i) => {
if (H == null || H(i), i.defaultPrevented || !e) return;
if (!Q(i)) {
d(!1);
return;
}
const f = i.currentTarget, b = () => X(i, f);
U || fe(i.target) ? D(i.target, "focusout", b) : d(!1);
}), Y = o.onBlur, yt = m((i) => {
Y == null || Y(i), e && Ht(i) && (i.currentTarget.removeAttribute("data-focus-visible"), d(!1));
}), Et = St(te), ht = m((i) => {
e && r && i && Et && queueMicrotask(() => {
ot(i) || w(i) && i.focus();
});
}), $ = Yt(s), wt = e && de($), z = e && be($), M = o.style, xt = O(() => l ? { pointerEvents: "none", ...M } : M, [l, M]);
return o = {
"data-focus-visible": e && c || void 0,
"data-autofocus": r || void 0,
"aria-disabled": a || void 0,
...o,
ref: B(s, ht, o.ref),
style: xt,
tabIndex: ve(
e,
l,
wt,
z,
o.tabIndex
),
disabled: z && l ? !0 : void 0,
// TODO: Test Focusable contentEditable.
contentEditable: a ? void 0 : o.contentEditable,
onKeyPressCapture: y,
onClickCapture: vt,
onMouseDownCapture: bt,
onMouseDown: pt,
onKeyDownCapture: mt,
onFocusCapture: gt,
onBlur: yt
}, Mt(o);
}
);
Jt(function(e) {
const n = ge(e);
return Qt(ae, n);
});
export {
sn as $,
Re as A,
Nt as B,
Ve as C,
Wt as D,
We as E,
_e as F,
Ge as G,
we as H,
xe as I,
Me as J,
en as K,
Yt as L,
Kt as M,
Fe as N,
Ae as O,
Pe as P,
Ce as Q,
he as R,
Ie as S,
He as T,
Ke as U,
D as V,
Xe as W,
ge as X,
Je as Y,
Dt as Z,
Ht as _,
Qt as a,
an as a0,
fn as a1,
cn as a2,
te as a3,
p as a4,
dn as a5,
_t as a6,
ft as a7,
Be as a8,
q as a9,
tn as aa,
T as ab,
un as ac,
w as ad,
ie as ae,
Xt as af,
Gt as ag,
De as ah,
Oe as ai,
Le as aj,
qt as ak,
Ye as al,
ln as am,
Ue as an,
je as ao,
on as b,
Zt as c,
K as d,
Q as e,
Jt as f,
F as g,
Ze as h,
Se as i,
$e as j,
R as k,
nn as l,
Qe as m,
Te as n,
ue as o,
ot as p,
B as q,
Mt as r,
ke as s,
A as t,
m as u,
V as v,
rn as w,
Ne as x,
ze as y,
qe as z
};