UNPKG

welcome-ui

Version:

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

472 lines (471 loc) 21.8 kB
"use client"; function K(t) { return t.split("-")[1]; } function ft(t) { return t === "y" ? "height" : "width"; } function W(t) { return t.split("-")[0]; } function j(t) { return ["top", "bottom"].includes(W(t)) ? "x" : "y"; } function gt(t, e, o) { let { reference: n, floating: r } = t; const i = n.x + n.width / 2 - r.width / 2, l = n.y + n.height / 2 - r.height / 2, a = j(e), s = ft(a), c = n[s] / 2 - r[s] / 2, p = a === "x"; let f; switch (W(e)) { case "top": f = { x: i, y: n.y - r.height }; break; case "bottom": f = { x: i, y: n.y + n.height }; break; case "right": f = { x: n.x + n.width, y: l }; break; case "left": f = { x: n.x - r.width, y: l }; break; default: f = { x: n.x, y: n.y }; } switch (K(e)) { case "start": f[a] -= c * (o && p ? -1 : 1); break; case "end": f[a] += c * (o && p ? -1 : 1); } return f; } const kt = async (t, e, o) => { const { placement: n = "bottom", strategy: r = "absolute", middleware: i = [], platform: l } = o, a = i.filter(Boolean), s = await (l.isRTL == null ? void 0 : l.isRTL(e)); let c = await l.getElementRects({ reference: t, floating: e, strategy: r }), { x: p, y: f } = gt(c, n, s), h = n, d = {}, m = 0; for (let u = 0; u < a.length; u++) { const { name: g, fn: w } = a[u], { x: y, y: x, data: R, reset: v } = await w({ x: p, y: f, initialPlacement: n, placement: h, strategy: r, middlewareData: d, rects: c, platform: l, elements: { reference: t, floating: e } }); p = y ?? p, f = x ?? f, d = { ...d, [g]: { ...d[g], ...R } }, v && m <= 50 && (m++, typeof v == "object" && (v.placement && (h = v.placement), v.rects && (c = v.rects === !0 ? await l.getElementRects({ reference: t, floating: e, strategy: r }) : v.rects), { x: p, y: f } = gt(c, h, s)), u = -1); } return { x: p, y: f, placement: h, strategy: r, middlewareData: d }; }; function V(t, e) { return typeof t == "function" ? t(e) : t; } function Rt(t) { return typeof t != "number" ? function(e) { return { top: 0, right: 0, bottom: 0, left: 0, ...e }; }(t) : { top: t, right: t, bottom: t, left: t }; } function tt(t) { return { ...t, top: t.y, left: t.x, right: t.x + t.width, bottom: t.y + t.height }; } async function ut(t, e) { var o; e === void 0 && (e = {}); const { x: n, y: r, platform: i, rects: l, elements: a, strategy: s } = t, { boundary: c = "clippingAncestors", rootBoundary: p = "viewport", elementContext: f = "floating", altBoundary: h = !1, padding: d = 0 } = V(e, t), m = Rt(d), u = a[h ? f === "floating" ? "reference" : "floating" : f], g = tt(await i.getClippingRect({ element: (o = await (i.isElement == null ? void 0 : i.isElement(u))) == null || o ? u : u.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(a.floating)), boundary: c, rootBoundary: p, strategy: s })), w = f === "floating" ? { ...l.floating, x: n, y: r } : l.reference, y = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(a.floating)), x = await (i.isElement == null ? void 0 : i.isElement(y)) && await (i.getScale == null ? void 0 : i.getScale(y)) || { x: 1, y: 1 }, R = tt(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: w, offsetParent: y, strategy: s }) : w); return { top: (g.top - R.top + m.top) / x.y, bottom: (R.bottom - g.bottom + m.bottom) / x.y, left: (g.left - R.left + m.left) / x.x, right: (R.right - g.right + m.right) / x.x }; } const Q = Math.min, X = Math.max; function st(t, e, o) { return X(t, Q(e, o)); } const Nt = (t) => ({ name: "arrow", options: t, async fn(e) { const { x: o, y: n, placement: r, rects: i, platform: l, elements: a } = e, { element: s, padding: c = 0 } = V(t, e) || {}; if (s == null) return {}; const p = Rt(c), f = { x: o, y: n }, h = j(r), d = ft(h), m = await l.getDimensions(s), u = h === "y", g = u ? "top" : "left", w = u ? "bottom" : "right", y = u ? "clientHeight" : "clientWidth", x = i.reference[d] + i.reference[h] - f[h] - i.floating[d], R = f[h] - i.reference[h], v = await (l.getOffsetParent == null ? void 0 : l.getOffsetParent(s)); let b = v ? v[y] : 0; b && await (l.isElement == null ? void 0 : l.isElement(v)) || (b = a.floating[y] || i.floating[d]); const T = x / 2 - R / 2, P = b / 2 - m[d] / 2 - 1, C = Q(p[g], P), M = Q(p[w], P), L = C, $ = b - m[d] - M, A = b / 2 - m[d] / 2 + T, D = st(L, A, $), S = K(r) != null && A != D && i.reference[d] / 2 - (A < L ? C : M) - m[d] / 2 < 0 ? A < L ? L - A : $ - A : 0; return { [h]: f[h] - S, data: { [h]: D, centerOffset: A - D + S } }; } }), Ft = ["top", "right", "bottom", "left"]; Ft.reduce((t, e) => t.concat(e, e + "-start", e + "-end"), []); const Wt = { left: "right", right: "left", bottom: "top", top: "bottom" }; function et(t) { return t.replace(/left|right|bottom|top/g, (e) => Wt[e]); } function Ht(t, e, o) { o === void 0 && (o = !1); const n = K(t), r = j(t), i = ft(r); let l = r === "x" ? n === (o ? "end" : "start") ? "right" : "left" : n === "start" ? "bottom" : "top"; return e.reference[i] > e.floating[i] && (l = et(l)), { main: l, cross: et(l) }; } const Bt = { start: "end", end: "start" }; function lt(t) { return t.replace(/start|end/g, (e) => Bt[e]); } const It = function(t) { return t === void 0 && (t = {}), { name: "flip", options: t, async fn(e) { var o; const { placement: n, middlewareData: r, rects: i, initialPlacement: l, platform: a, elements: s } = e, { mainAxis: c = !0, crossAxis: p = !0, fallbackPlacements: f, fallbackStrategy: h = "bestFit", fallbackAxisSideDirection: d = "none", flipAlignment: m = !0, ...u } = V(t, e), g = W(n), w = W(l) === l, y = await (a.isRTL == null ? void 0 : a.isRTL(s.floating)), x = f || (w || !m ? [et(l)] : function(L) { const $ = et(L); return [lt(L), $, lt($)]; }(l)); f || d === "none" || x.push(...function(L, $, A, D) { const S = K(L); let E = function(N, I, Ot) { const ht = ["left", "right"], pt = ["right", "left"], Pt = ["top", "bottom"], Ct = ["bottom", "top"]; switch (N) { case "top": case "bottom": return Ot ? I ? pt : ht : I ? ht : pt; case "left": case "right": return I ? Pt : Ct; default: return []; } }(W(L), A === "start", D); return S && (E = E.map((N) => N + "-" + S), $ && (E = E.concat(E.map(lt)))), E; }(l, m, d, y)); const R = [l, ...x], v = await ut(e, u), b = []; let T = ((o = r.flip) == null ? void 0 : o.overflows) || []; if (c && b.push(v[g]), p) { const { main: L, cross: $ } = Ht(n, i, y); b.push(v[L], v[$]); } if (T = [...T, { placement: n, overflows: b }], !b.every((L) => L <= 0)) { var P, C; const L = (((P = r.flip) == null ? void 0 : P.index) || 0) + 1, $ = R[L]; if ($) return { data: { index: L, overflows: T }, reset: { placement: $ } }; let A = (C = T.filter((D) => D.overflows[0] <= 0).sort((D, S) => D.overflows[1] - S.overflows[1])[0]) == null ? void 0 : C.placement; if (!A) switch (h) { case "bestFit": { var M; const D = (M = T.map((S) => [S.placement, S.overflows.filter((E) => E > 0).reduce((E, N) => E + N, 0)]).sort((S, E) => S[1] - E[1])[0]) == null ? void 0 : M[0]; D && (A = D); break; } case "initialPlacement": A = l; } if (n !== A) return { reset: { placement: A } }; } return {}; } }; }, Xt = function(t) { return t === void 0 && (t = 0), { name: "offset", options: t, async fn(e) { const { x: o, y: n } = e, r = await async function(i, l) { const { placement: a, platform: s, elements: c } = i, p = await (s.isRTL == null ? void 0 : s.isRTL(c.floating)), f = W(a), h = K(a), d = j(a) === "x", m = ["left", "top"].includes(f) ? -1 : 1, u = p && d ? -1 : 1, g = V(l, i); let { mainAxis: w, crossAxis: y, alignmentAxis: x } = typeof g == "number" ? { mainAxis: g, crossAxis: 0, alignmentAxis: null } : { mainAxis: 0, crossAxis: 0, alignmentAxis: null, ...g }; return h && typeof x == "number" && (y = h === "end" ? -1 * x : x), d ? { x: y * u, y: w * m } : { x: w * m, y: y * u }; }(e, t); return { x: o + r.x, y: n + r.y, data: r }; } }; }; function Lt(t) { return t === "x" ? "y" : "x"; } const Yt = function(t) { return t === void 0 && (t = {}), { name: "shift", options: t, async fn(e) { const { x: o, y: n, placement: r } = e, { mainAxis: i = !0, crossAxis: l = !1, limiter: a = { fn: (g) => { let { x: w, y } = g; return { x: w, y }; } }, ...s } = V(t, e), c = { x: o, y: n }, p = await ut(e, s), f = j(W(r)), h = Lt(f); let d = c[f], m = c[h]; if (i) { const g = f === "y" ? "bottom" : "right"; d = st(d + p[f === "y" ? "top" : "left"], d, d - p[g]); } if (l) { const g = h === "y" ? "bottom" : "right"; m = st(m + p[h === "y" ? "top" : "left"], m, m - p[g]); } const u = a.fn({ ...e, [f]: d, [h]: m }); return { ...u, data: { x: u.x - o, y: u.y - n } }; } }; }, _t = function(t) { return t === void 0 && (t = {}), { options: t, fn(e) { const { x: o, y: n, placement: r, rects: i, middlewareData: l } = e, { offset: a = 0, mainAxis: s = !0, crossAxis: c = !0 } = V(t, e), p = { x: o, y: n }, f = j(r), h = Lt(f); let d = p[f], m = p[h]; const u = V(a, e), g = typeof u == "number" ? { mainAxis: u, crossAxis: 0 } : { mainAxis: 0, crossAxis: 0, ...u }; if (s) { const x = f === "y" ? "height" : "width", R = i.reference[f] - i.floating[x] + g.mainAxis, v = i.reference[f] + i.reference[x] - g.mainAxis; d < R ? d = R : d > v && (d = v); } if (c) { var w, y; const x = f === "y" ? "width" : "height", R = ["top", "left"].includes(W(r)), v = i.reference[h] - i.floating[x] + (R && ((w = l.offset) == null ? void 0 : w[h]) || 0) + (R ? 0 : g.crossAxis), b = i.reference[h] + i.reference[x] + (R ? 0 : ((y = l.offset) == null ? void 0 : y[h]) || 0) - (R ? g.crossAxis : 0); m < v ? m = v : m > b && (m = b); } return { [f]: d, [h]: m }; } }; }, jt = function(t) { return t === void 0 && (t = {}), { name: "size", options: t, async fn(e) { const { placement: o, rects: n, platform: r, elements: i } = e, { apply: l = () => { }, ...a } = V(t, e), s = await ut(e, a), c = W(o), p = K(o), f = j(o) === "x", { width: h, height: d } = n.floating; let m, u; c === "top" || c === "bottom" ? (m = c, u = p === (await (r.isRTL == null ? void 0 : r.isRTL(i.floating)) ? "start" : "end") ? "left" : "right") : (u = c, m = p === "end" ? "top" : "bottom"); const g = d - s[m], w = h - s[u], y = !e.middlewareData.shift; let x = g, R = w; if (f) { const b = h - s.left - s.right; R = p || y ? Q(w, b) : b; } else { const b = d - s.top - s.bottom; x = p || y ? Q(g, b) : b; } if (y && !p) { const b = X(s.left, 0), T = X(s.right, 0), P = X(s.top, 0), C = X(s.bottom, 0); f ? R = h - 2 * (b !== 0 || T !== 0 ? b + T : X(s.left, s.right)) : x = d - 2 * (P !== 0 || C !== 0 ? P + C : X(s.top, s.bottom)); } await l({ ...e, availableWidth: R, availableHeight: x }); const v = await r.getDimensions(i.floating); return h !== v.width || d !== v.height ? { reset: { rects: !0 } } : {}; } }; }; function O(t) { var e; return ((e = t.ownerDocument) == null ? void 0 : e.defaultView) || window; } function k(t) { return O(t).getComputedStyle(t); } function At(t) { return t instanceof O(t).Node; } function z(t) { return At(t) ? (t.nodeName || "").toLowerCase() : "#document"; } function F(t) { return t instanceof O(t).HTMLElement; } function H(t) { return t instanceof O(t).Element; } function yt(t) { return typeof ShadowRoot < "u" && (t instanceof O(t).ShadowRoot || t instanceof ShadowRoot); } function U(t) { const { overflow: e, overflowX: o, overflowY: n, display: r } = k(t); return /auto|scroll|overlay|hidden|clip/.test(e + n + o) && !["inline", "contents"].includes(r); } function Mt(t) { return ["table", "td", "th"].includes(z(t)); } function ct(t) { const e = dt(), o = k(t); return o.transform !== "none" || o.perspective !== "none" || !e && !!o.backdropFilter && o.backdropFilter !== "none" || !e && !!o.filter && o.filter !== "none" || ["transform", "perspective", "filter"].some((n) => (o.willChange || "").includes(n)) || ["paint", "layout", "strict", "content"].some((n) => (o.contain || "").includes(n)); } function dt() { return !(typeof CSS > "u" || !CSS.supports) && CSS.supports("-webkit-backdrop-filter", "none"); } function it(t) { return ["html", "body", "#document"].includes(z(t)); } const at = Math.min, q = Math.max, nt = Math.round, Z = Math.floor, Y = (t) => ({ x: t, y: t }); function Tt(t) { const e = k(t); let o = parseFloat(e.width) || 0, n = parseFloat(e.height) || 0; const r = F(t), i = r ? t.offsetWidth : o, l = r ? t.offsetHeight : n, a = nt(o) !== i || nt(n) !== l; return a && (o = i, n = l), { width: o, height: n, $: a }; } function mt(t) { return H(t) ? t : t.contextElement; } function G(t) { const e = mt(t); if (!F(e)) return Y(1); const o = e.getBoundingClientRect(), { width: n, height: r, $: i } = Tt(e); let l = (i ? nt(o.width) : o.width) / n, a = (i ? nt(o.height) : o.height) / r; return l && Number.isFinite(l) || (l = 1), a && Number.isFinite(a) || (a = 1), { x: l, y: a }; } const xt = Y(0); function Et(t, e, o) { var n, r; if (e === void 0 && (e = !0), !dt()) return xt; const i = t ? O(t) : window; return !o || e && o !== i ? xt : { x: ((n = i.visualViewport) == null ? void 0 : n.offsetLeft) || 0, y: ((r = i.visualViewport) == null ? void 0 : r.offsetTop) || 0 }; } function _(t, e, o, n) { e === void 0 && (e = !1), o === void 0 && (o = !1); const r = t.getBoundingClientRect(), i = mt(t); let l = Y(1); e && (n ? H(n) && (l = G(n)) : l = G(t)); const a = Et(i, o, n); let s = (r.left + a.x) / l.x, c = (r.top + a.y) / l.y, p = r.width / l.x, f = r.height / l.y; if (i) { const h = O(i), d = n && H(n) ? O(n) : n; let m = h.frameElement; for (; m && n && d !== h; ) { const u = G(m), g = m.getBoundingClientRect(), w = getComputedStyle(m), y = g.left + (m.clientLeft + parseFloat(w.paddingLeft)) * u.x, x = g.top + (m.clientTop + parseFloat(w.paddingTop)) * u.y; s *= u.x, c *= u.y, p *= u.x, f *= u.y, s += y, c += x, m = O(m).frameElement; } } return tt({ width: p, height: f, x: s, y: c }); } function B(t) { return ((At(t) ? t.ownerDocument : t.document) || window.document).documentElement; } function rt(t) { return H(t) ? { scrollLeft: t.scrollLeft, scrollTop: t.scrollTop } : { scrollLeft: t.pageXOffset, scrollTop: t.pageYOffset }; } function $t(t) { return _(B(t)).left + rt(t).scrollLeft; } function J(t) { if (z(t) === "html") return t; const e = t.assignedSlot || t.parentNode || yt(t) && t.host || B(t); return yt(e) ? e.host : e; } function Dt(t) { const e = J(t); return it(e) ? t.ownerDocument ? t.ownerDocument.body : t.body : F(e) && U(e) ? e : Dt(e); } function ot(t, e) { var o; e === void 0 && (e = []); const n = Dt(t), r = n === ((o = t.ownerDocument) == null ? void 0 : o.body), i = O(n); return r ? e.concat(i, i.visualViewport || [], U(n) ? n : []) : e.concat(n, ot(n)); } function wt(t, e, o) { let n; if (e === "viewport") n = function(r, i) { const l = O(r), a = B(r), s = l.visualViewport; let c = a.clientWidth, p = a.clientHeight, f = 0, h = 0; if (s) { c = s.width, p = s.height; const d = dt(); (!d || d && i === "fixed") && (f = s.offsetLeft, h = s.offsetTop); } return { width: c, height: p, x: f, y: h }; }(t, o); else if (e === "document") n = function(r) { const i = B(r), l = rt(r), a = r.ownerDocument.body, s = q(i.scrollWidth, i.clientWidth, a.scrollWidth, a.clientWidth), c = q(i.scrollHeight, i.clientHeight, a.scrollHeight, a.clientHeight); let p = -l.scrollLeft + $t(r); const f = -l.scrollTop; return k(a).direction === "rtl" && (p += q(i.clientWidth, a.clientWidth) - s), { width: s, height: c, x: p, y: f }; }(B(t)); else if (H(e)) n = function(r, i) { const l = _(r, !0, i === "fixed"), a = l.top + r.clientTop, s = l.left + r.clientLeft, c = F(r) ? G(r) : Y(1); return { width: r.clientWidth * c.x, height: r.clientHeight * c.y, x: s * c.x, y: a * c.y }; }(e, o); else { const r = Et(t); n = { ...e, x: e.x - r.x, y: e.y - r.y }; } return tt(n); } function St(t, e) { const o = J(t); return !(o === e || !H(o) || it(o)) && (k(o).position === "fixed" || St(o, e)); } function vt(t, e) { return F(t) && k(t).position !== "fixed" ? e ? e(t) : t.offsetParent : null; } function bt(t, e) { const o = O(t); if (!F(t)) return o; let n = vt(t, e); for (; n && Mt(n) && k(n).position === "static"; ) n = vt(n, e); return n && (z(n) === "html" || z(n) === "body" && k(n).position === "static" && !ct(n)) ? o : n || function(r) { let i = J(r); for (; F(i) && !it(i); ) { if (ct(i)) return i; i = J(i); } return null; }(t) || o; } function Vt(t, e, o) { const n = F(e), r = B(e), i = o === "fixed", l = _(t, !0, i, e); let a = { scrollLeft: 0, scrollTop: 0 }; const s = Y(0); if (n || !n && !i) if ((z(e) !== "body" || U(r)) && (a = rt(e)), F(e)) { const c = _(e, !0, i, e); s.x = c.x + e.clientLeft, s.y = c.y + e.clientTop; } else r && (s.x = $t(r)); return { x: l.left + a.scrollLeft - s.x, y: l.top + a.scrollTop - s.y, width: l.width, height: l.height }; } const zt = { getClippingRect: function(t) { let { element: e, boundary: o, rootBoundary: n, strategy: r } = t; const i = o === "clippingAncestors" ? function(c, p) { const f = p.get(c); if (f) return f; let h = ot(c).filter((g) => H(g) && z(g) !== "body"), d = null; const m = k(c).position === "fixed"; let u = m ? J(c) : c; for (; H(u) && !it(u); ) { const g = k(u), w = ct(u); w || g.position !== "fixed" || (d = null), (m ? !w && !d : !w && g.position === "static" && d && ["absolute", "fixed"].includes(d.position) || U(u) && !w && St(c, u)) ? h = h.filter((y) => y !== u) : d = g, u = J(u); } return p.set(c, h), h; }(e, this._c) : [].concat(o), l = [...i, n], a = l[0], s = l.reduce((c, p) => { const f = wt(e, p, r); return c.top = q(f.top, c.top), c.right = at(f.right, c.right), c.bottom = at(f.bottom, c.bottom), c.left = q(f.left, c.left), c; }, wt(e, a, r)); return { width: s.right - s.left, height: s.bottom - s.top, x: s.left, y: s.top }; }, convertOffsetParentRelativeRectToViewportRelativeRect: function(t) { let { rect: e, offsetParent: o, strategy: n } = t; const r = F(o), i = B(o); if (o === i) return e; let l = { scrollLeft: 0, scrollTop: 0 }, a = Y(1); const s = Y(0); if ((r || !r && n !== "fixed") && ((z(o) !== "body" || U(i)) && (l = rt(o)), F(o))) { const c = _(o); a = G(o), s.x = c.x + o.clientLeft, s.y = c.y + o.clientTop; } return { width: e.width * a.x, height: e.height * a.y, x: e.x * a.x - l.scrollLeft * a.x + s.x, y: e.y * a.y - l.scrollTop * a.y + s.y }; }, isElement: H, getDimensions: function(t) { return Tt(t); }, getOffsetParent: bt, getDocumentElement: B, getScale: G, async getElementRects(t) { let { reference: e, floating: o, strategy: n } = t; const r = this.getOffsetParent || bt, i = this.getDimensions; return { reference: Vt(e, await r(o), n), floating: { x: 0, y: 0, ...await i(o) } }; }, getClientRects: (t) => Array.from(t.getClientRects()), isRTL: (t) => k(t).direction === "rtl" }; function qt(t, e, o, n) { n === void 0 && (n = {}); const { ancestorScroll: r = !0, ancestorResize: i = !0, elementResize: l = !0, layoutShift: a = typeof IntersectionObserver == "function", animationFrame: s = !1 } = n, c = mt(t), p = r || i ? [...c ? ot(c) : [], ...ot(e)] : []; p.forEach((u) => { r && u.addEventListener("scroll", o, { passive: !0 }), i && u.addEventListener("resize", o); }); const f = c && a ? function(u, g) { let w, y = null; const x = B(u); function R() { clearTimeout(w), y && y.disconnect(), y = null; } return function v(b, T) { b === void 0 && (b = !1), T === void 0 && (T = 1), R(); const { left: P, top: C, width: M, height: L } = u.getBoundingClientRect(); if (b || g(), !M || !L) return; const $ = Z(C), A = Z(x.clientWidth - (P + M)), D = Z(x.clientHeight - (C + L)), S = Z(P); let E = !0; y = new IntersectionObserver((N) => { const I = N[0].intersectionRatio; if (I !== T) { if (!E) return v(); I ? v(!1, I) : w = setTimeout(() => { v(!1, 1e-7); }, 100); } E = !1; }, { rootMargin: -$ + "px " + -A + "px " + -D + "px " + -S + "px", threshold: q(0, at(1, T)) || 1 }), y.observe(u); }(!0), R; }(c, o) : null; let h, d = null; l && (d = new ResizeObserver(o), c && !s && d.observe(c), d.observe(e)); let m = s ? _(t) : null; return s && function u() { const g = _(t); !m || g.x === m.x && g.y === m.y && g.width === m.width && g.height === m.height || o(), m = g, h = requestAnimationFrame(u); }(), o(), () => { p.forEach((u) => { r && u.removeEventListener("scroll", o), i && u.removeEventListener("resize", o); }), f && f(), d && d.disconnect(), d = null, s && cancelAnimationFrame(h); }; } const Gt = (t, e, o) => { const n = /* @__PURE__ */ new Map(), r = { platform: zt, ...o }, i = { ...r.platform, _c: n }; return kt(t, e, { ...r, platform: i }); }; export { It as A, qt as B, jt as C, Xt as L, Gt as N, Yt as O, _t as a, Nt as g };