UNPKG

welcome-ui

Version:

Customizable design system with react, typescript, tailwindcss and ariakit.

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