UNPKG

welcome-ui

Version:

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

857 lines (856 loc) 21.5 kB
"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 };