UNPKG

welcome-ui

Version:

Customizable design system with react • styled-components • styled-system and ariakit.

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