welcome-ui/dist/BYC7LY2E-TZjhdRy3.mjs

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

"use client";
import { a as Ye, b as qe, d as Ie, c as He } from "./JC64G2H7-ifBZq_RU.mjs";
import { m as We, o as Ue, t as Ge, c as Me, b as oe, a as Ce, d as Je } from "./YV4JVR4I-BLeUul5N.mjs";
import { z as Ze, A as Y, C as F, B as M, G as Ke, c as pe, _ as ne, i as se, a5 as Re, b as U, E as ce, D as le, d as $, g as S, f as me, h as ve, t as Qe, a6 as Fe, u as de, P as Ee, a7 as X, a4 as et, e as Te, X as tt, Y as fe, a8 as ot, l as rt, m as nt } from "./LVA2YJMS-B8X1PCyC.mjs";
import { u as $e, P as _e, a as st } from "./MTZPJQMC-DdjKPI9r.mjs";
import { B as it, N as ut, L as at, A as ct, O as lt, g as dt, C as ft, a as pt } from "./floating-ui.dom.browser.min-Bza9K_UR.mjs";
import { useRef as q, useState as he, useEffect as T, useContext as mt, createContext as vt, useCallback as De } from "react";
import { j as re } from "./jsx-runtime-Bqq1Hxg9.mjs";
function Ne(t = {}) {
  var r = t, {
    popover: o
  } = r, e = Ze(r, [
    "popover"
  ]);
  const n = We(
    e.store,
    Ue(o, [
      "arrowElement",
      "anchorElement",
      "contentElement",
      "popoverElement",
      "disclosureElement"
    ])
  );
  Ge(e, n);
  const s = n == null ? void 0 : n.getState(), u = Ye(Y(F({}, e), { store: n })), c = M(
    e.placement,
    s == null ? void 0 : s.placement,
    "bottom"
  ), a = Y(F({}, u.getState()), {
    placement: c,
    currentPlacement: c,
    anchorElement: M(s == null ? void 0 : s.anchorElement, null),
    popoverElement: M(s == null ? void 0 : s.popoverElement, null),
    arrowElement: M(s == null ? void 0 : s.arrowElement, null),
    rendered: Symbol("rendered")
  }), i = Me(a, u, n);
  return Y(F(F({}, u), i), {
    setAnchorElement: (d) => i.setState("anchorElement", d),
    setPopoverElement: (d) => i.setState("popoverElement", d),
    setArrowElement: (d) => i.setState("arrowElement", d),
    render: () => i.setState("rendered", Symbol("rendered"))
  });
}
function je(t, r, o) {
  return Ke(r, [o.popover]), oe(t, o, "placement"), qe(t, r, o);
}
function Lt(t = {}) {
  const [r, o] = Ce(Ne, t);
  return je(r, o, t);
}
var ht = "div";
function Se(t = 0, r = 0, o = 0, e = 0) {
  if (typeof DOMRect == "function")
    return new DOMRect(t, r, o, e);
  const n = {
    x: t,
    y: r,
    width: o,
    height: e,
    top: r,
    right: t + o,
    bottom: r + e,
    left: t
  };
  return $(S({}, n), { toJSON: () => n });
}
function Pt(t) {
  if (!t) return Se();
  const { x: r, y: o, width: e, height: n } = t;
  return Se(r, o, e, n);
}
function gt(t, r) {
  return {
    contextElement: t || void 0,
    getBoundingClientRect: () => {
      const e = t, n = r == null ? void 0 : r(e);
      return n || !e ? Pt(n) : e.getBoundingClientRect();
    }
  };
}
function wt(t) {
  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(t);
}
function ye(t) {
  const r = window.devicePixelRatio || 1;
  return Math.round(t * r) / r;
}
function xt(t, r) {
  return at(({ placement: o }) => {
    var e;
    const n = ((t == null ? void 0 : t.clientHeight) || 0) / 2, s = typeof r.gutter == "number" ? r.gutter + n : (e = r.gutter) != null ? e : n;
    return {
      crossAxis: !!o.split("-")[1] ? void 0 : r.shift,
      mainAxis: s,
      alignmentAxis: r.shift
    };
  });
}
function Et(t) {
  if (t.flip === !1) return;
  const r = typeof t.flip == "string" ? t.flip.split(" ") : void 0;
  return se(
    !r || r.every(wt),
    process.env.NODE_ENV !== "production" && "`flip` expects a spaced-delimited list of placements"
  ), ct({
    padding: t.overflowPadding,
    fallbackPlacements: r
  });
}
function St(t) {
  if (!(!t.slide && !t.overlap))
    return lt({
      mainAxis: t.slide,
      crossAxis: t.overlap,
      padding: t.overflowPadding,
      limiter: pt()
    });
}
function yt(t) {
  return ft({
    padding: t.overflowPadding,
    apply({ elements: r, availableWidth: o, availableHeight: e, rects: n }) {
      const s = r.floating, u = Math.round(n.reference.width);
      o = Math.floor(o), e = Math.floor(e), s.style.setProperty(
        "--popover-anchor-width",
        `${u}px`
      ), s.style.setProperty(
        "--popover-available-width",
        `${o}px`
      ), s.style.setProperty(
        "--popover-available-height",
        `${e}px`
      ), t.sameWidth && (s.style.width = `${u}px`), t.fitViewport && (s.style.maxWidth = `${o}px`, s.style.maxHeight = `${e}px`);
    }
  });
}
function Ot(t, r) {
  if (t)
    return dt({
      element: t,
      padding: r.arrowPadding
    });
}
var Ve = pe(
  function(r) {
    var o = r, {
      store: e,
      modal: n = !1,
      portal: s = !!n,
      preserveTabOrder: u = !0,
      autoFocusOnShow: c = !0,
      wrapperProps: a,
      fixed: i = !1,
      flip: d = !0,
      shift: g = 0,
      slide: P = !0,
      overlap: E = !1,
      sameWidth: h = !1,
      fitViewport: b = !1,
      gutter: w,
      arrowPadding: f = 4,
      overflowPadding: x = 8,
      getAnchorRect: N,
      updatePosition: C
    } = o, p = ne(o, [
      "store",
      "modal",
      "portal",
      "preserveTabOrder",
      "autoFocusOnShow",
      "wrapperProps",
      "fixed",
      "flip",
      "shift",
      "slide",
      "overlap",
      "sameWidth",
      "fitViewport",
      "gutter",
      "arrowPadding",
      "overflowPadding",
      "getAnchorRect",
      "updatePosition"
    ]);
    const j = $e();
    e = e || j, se(
      e,
      process.env.NODE_ENV !== "production" && "Popover must receive a `store` prop or be wrapped in a PopoverProvider component."
    );
    const _ = e.useState("arrowElement"), y = e.useState("anchorElement"), ie = e.useState("disclosureElement"), m = e.useState("popoverElement"), D = e.useState("contentElement"), J = e.useState("placement"), l = e.useState("mounted"), O = e.useState("rendered"), v = q(null), [A, R] = he(!1), { portalRef: ue, domReady: V } = Re(s, p.portalRef), B = U(N), k = U(C), I = !!C;
    ce(() => {
      if (!(m != null && m.isConnected)) return;
      m.style.setProperty(
        "--popover-overflow-padding",
        `${x}px`
      );
      const H = gt(y, B), W = async () => {
        if (!l) return;
        _ || (v.current = v.current || document.createElement("div"));
        const z = _ || v.current, ze = [
          xt(z, { gutter: w, shift: g }),
          Et({ flip: d, overflowPadding: x }),
          St({ slide: P, overlap: E, overflowPadding: x }),
          Ot(z, { arrowPadding: f }),
          yt({
            sameWidth: h,
            fitViewport: b,
            overflowPadding: x
          })
        ], L = await ut(H, m, {
          placement: J,
          strategy: i ? "fixed" : "absolute",
          middleware: ze
        });
        e == null || e.setState("currentPlacement", L.placement), R(!0);
        const Le = ye(L.x), Xe = ye(L.y);
        if (Object.assign(m.style, {
          top: "0",
          left: "0",
          transform: `translate3d(${Le}px,${Xe}px,0)`
        }), z && L.middlewareData.arrow) {
          const { x: K, y: Q } = L.middlewareData.arrow, ge = L.placement.split("-")[0], ee = z.clientWidth / 2, te = z.clientHeight / 2, we = K != null ? K + ee : -ee, xe = Q != null ? Q + te : -te;
          m.style.setProperty(
            "--popover-transform-origin",
            {
              top: `${we}px calc(100% + ${te}px)`,
              bottom: `${we}px ${-te}px`,
              left: `calc(100% + ${ee}px) ${xe}px`,
              right: `${-ee}px ${xe}px`
            }[ge]
          ), Object.assign(z.style, {
            left: K != null ? `${K}px` : "",
            top: Q != null ? `${Q}px` : "",
            [ge]: "100%"
          });
        }
      }, ke = it(H, m, async () => {
        I ? (await k({ updatePosition: W }), R(!0)) : await W();
      }, {
        // JSDOM doesn't support ResizeObserver
        elementResize: typeof ResizeObserver == "function"
      });
      return () => {
        R(!1), ke();
      };
    }, [
      e,
      O,
      m,
      _,
      y,
      m,
      J,
      l,
      V,
      i,
      d,
      g,
      P,
      E,
      h,
      b,
      w,
      f,
      x,
      B,
      I,
      k
    ]), ce(() => {
      if (!l || !V || !(m != null && m.isConnected) || !(D != null && D.isConnected)) return;
      const H = () => {
        m.style.zIndex = getComputedStyle(D).zIndex;
      };
      H();
      let W = requestAnimationFrame(() => {
        W = requestAnimationFrame(H);
      });
      return () => cancelAnimationFrame(W);
    }, [l, V, m, D]);
    const Z = i ? "fixed" : "absolute";
    return p = le(
      p,
      (H) => /* @__PURE__ */ re.jsx(
        "div",
        $(S({}, a), {
          style: S({
            // https://floating-ui.com/docs/computeposition#initial-layout
            position: Z,
            top: 0,
            left: 0,
            width: "max-content"
          }, a == null ? void 0 : a.style),
          ref: e == null ? void 0 : e.setPopoverElement,
          children: H
        })
      ),
      [e, Z, a]
    ), p = le(
      p,
      (H) => /* @__PURE__ */ re.jsx(_e, { value: e, children: H }),
      [e]
    ), p = $(S({
      // data-placing is not part of the public API. We're setting this here so
      // we can wait for the popover to be positioned before other components
      // move focus into it. For example, this attribute is observed by the
      // Combobox component with the autoSelect behavior.
      "data-placing": !A || void 0
    }, p), {
      style: S({
        position: "relative"
      }, p.style)
    }), p = Ie($(S({
      store: e,
      modal: n,
      portal: s,
      preserveTabOrder: u,
      preserveTabOrderAnchor: ie || y,
      autoFocusOnShow: A && c
    }, p), {
      portalRef: ue
    })), p;
  }
), Xt = He(
  me(function(r) {
    const o = Ve(r);
    return ve(ht, o);
  }),
  $e
), G = Qe(
  [st],
  [_e]
);
G.useContext;
G.useScopedContext;
var Pe = G.useProviderContext, Yt = G.ContextProvider, bt = G.ScopedContextProvider;
function At(t = {}) {
  var r;
  const o = (r = t.store) == null ? void 0 : r.getState(), e = Ne(Y(F({}, t), {
    placement: M(
      t.placement,
      o == null ? void 0 : o.placement,
      "bottom"
    )
  })), n = M(t.timeout, o == null ? void 0 : o.timeout, 500), s = Y(F({}, e.getState()), {
    timeout: n,
    showTimeout: M(t.showTimeout, o == null ? void 0 : o.showTimeout),
    hideTimeout: M(t.hideTimeout, o == null ? void 0 : o.hideTimeout),
    autoFocusOnShow: M(o == null ? void 0 : o.autoFocusOnShow, !1)
  }), u = Me(s, e, t.store);
  return Y(F(F({}, e), u), {
    setAutoFocusOnShow: (c) => u.setState("autoFocusOnShow", c)
  });
}
function Ht(t, r, o) {
  return oe(t, o, "timeout"), oe(t, o, "showTimeout"), oe(t, o, "hideTimeout"), je(t, r, o);
}
function qt(t = {}) {
  const [r, o] = Ce(At, t);
  return Ht(r, o, t);
}
function ae(t) {
  return [t.clientX, t.clientY];
}
function Oe(t, r) {
  const [o, e] = t;
  let n = !1;
  const s = r.length;
  for (let u = s, c = 0, a = u - 1; c < u; a = c++) {
    const [i, d] = r[c], [g, P] = r[a], [, E] = r[a === 0 ? u - 1 : a - 1] || [0, 0], h = (d - P) * (o - i) - (i - g) * (e - d);
    if (P < d) {
      if (e >= P && e < d) {
        if (h === 0) return !0;
        h > 0 && (e === P ? e > E && (n = !n) : n = !n);
      }
    } else if (d < P) {
      if (e > d && e <= P) {
        if (h === 0) return !0;
        h < 0 && (e === P ? e < E && (n = !n) : n = !n);
      }
    } else if (e === d && (o >= g && o <= i || o >= i && o <= g))
      return !0;
  }
  return n;
}
function Mt(t, r) {
  const { top: o, right: e, bottom: n, left: s } = r, [u, c] = t, a = u < s ? "left" : u > e ? "right" : null, i = c < o ? "top" : c > n ? "bottom" : null;
  return [a, i];
}
function be(t, r) {
  const o = t.getBoundingClientRect(), { top: e, right: n, bottom: s, left: u } = o, [c, a] = Mt(r, o), i = [r];
  return c ? (a !== "top" && i.push([c === "left" ? u : n, e]), i.push([c === "left" ? n : u, e]), i.push([c === "left" ? n : u, s]), a !== "bottom" && i.push([c === "left" ? u : n, s])) : a === "top" ? (i.push([u, e]), i.push([u, s]), i.push([n, s]), i.push([n, e])) : (i.push([u, s]), i.push([u, e]), i.push([n, e]), i.push([n, s])), i;
}
var Ct = "div";
function Be(t, r, o, e) {
  return ot(r) ? !0 : t ? !!(fe(r, t) || o && fe(o, t) || e != null && e.some((n) => Be(t, n, o))) : !1;
}
function Rt(t) {
  var r = t, {
    store: o
  } = r, e = ne(r, [
    "store"
  ]);
  const [n, s] = he(!1), u = o.useState("mounted");
  T(() => {
    u || s(!1);
  }, [u]);
  const c = e.onFocus, a = U((d) => {
    c == null || c(d), !d.defaultPrevented && s(!0);
  }), i = q(null);
  return T(() => Je(o, ["anchorElement"], (d) => {
    i.current = d.anchorElement;
  }), []), e = $(S({
    autoFocusOnHide: n,
    finalFocus: i
  }, e), {
    onFocus: a
  }), e;
}
var Ae = vt(null), Ft = pe(
  function(r) {
    var o = r, {
      store: e,
      modal: n = !1,
      portal: s = !!n,
      hideOnEscape: u = !0,
      hideOnHoverOutside: c = !0,
      disablePointerEventsOnApproach: a = !!c
    } = o, i = ne(o, [
      "store",
      "modal",
      "portal",
      "hideOnEscape",
      "hideOnHoverOutside",
      "disablePointerEventsOnApproach"
    ]);
    const d = Pe();
    e = e || d, se(
      e,
      process.env.NODE_ENV !== "production" && "Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component."
    );
    const g = q(null), [P, E] = he([]), h = q(0), b = q(null), { portalRef: w, domReady: f } = Re(s, i.portalRef), x = Fe(), N = !!c, C = de(c), p = !!a, j = de(
      a
    ), _ = e.useState("open"), y = e.useState("mounted");
    T(() => {
      if (!f || !y || !N && !p) return;
      const l = g.current;
      return l ? Ee(
        X("mousemove", (v) => {
          if (!e || !x()) return;
          const { anchorElement: A, hideTimeout: R, timeout: ue } = e.getState(), V = b.current, [B] = v.composedPath(), k = A;
          if (Be(B, l, k, P)) {
            b.current = B && k && fe(k, B) ? ae(v) : null, window.clearTimeout(h.current), h.current = 0;
            return;
          }
          if (!h.current) {
            if (V) {
              const I = ae(v), Z = be(l, V);
              if (Oe(I, Z)) {
                if (b.current = I, !j(v)) return;
                v.preventDefault(), v.stopPropagation();
                return;
              }
            }
            C(v) && (h.current = window.setTimeout(() => {
              h.current = 0, e == null || e.hide();
            }, R ?? ue));
          }
        }, !0),
        () => clearTimeout(h.current)
      ) : void 0;
    }, [
      e,
      x,
      f,
      y,
      N,
      p,
      P,
      j,
      C
    ]), T(() => {
      if (!f || !y || !p) return;
      const l = (O) => {
        const v = g.current;
        if (!v) return;
        const A = b.current;
        if (!A) return;
        const R = be(v, A);
        if (Oe(ae(O), R)) {
          if (!j(O)) return;
          O.preventDefault(), O.stopPropagation();
        }
      };
      return Ee(
        // Note: we may need to add pointer events here in the future.
        X("mouseenter", l, !0),
        X("mouseover", l, !0),
        X("mouseout", l, !0),
        X("mouseleave", l, !0)
      );
    }, [f, y, p, j]), T(() => {
      f && (_ || e == null || e.setAutoFocusOnShow(!1));
    }, [e, f, _]);
    const ie = et(_);
    T(() => {
      if (f)
        return () => {
          ie.current || e == null || e.setAutoFocusOnShow(!1);
        };
    }, [e, f]);
    const m = mt(Ae);
    ce(() => {
      if (n || !s || !y || !f) return;
      const l = g.current;
      if (l)
        return m == null ? void 0 : m(l);
    }, [n, s, y, f]);
    const D = De(
      (l) => {
        E((v) => [...v, l]);
        const O = m == null ? void 0 : m(l);
        return () => {
          E(
            (v) => v.filter((A) => A !== l)
          ), O == null || O();
        };
      },
      [m]
    );
    i = le(
      i,
      (l) => /* @__PURE__ */ re.jsx(bt, { value: e, children: /* @__PURE__ */ re.jsx(Ae.Provider, { value: D, children: l }) }),
      [e, D]
    ), i = $(S({}, i), {
      ref: Te(g, i.ref)
    }), i = Rt(S({ store: e }, i));
    const J = e.useState(
      (l) => n || l.autoFocusOnShow
    );
    return i = Ve($(S({
      store: e,
      modal: n,
      portal: s,
      autoFocusOnShow: J
    }, i), {
      portalRef: w,
      hideOnEscape(l) {
        return tt(u, l) ? !1 : (requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            e == null || e.hide();
          });
        }), !0);
      }
    })), i;
  }
), It = He(
  me(function(r) {
    const o = Ft(r);
    return ve(Ct, o);
  }),
  Pe
), Tt = "a", $t = pe(
  function(r) {
    var o = r, { store: e, showOnHover: n = !0 } = o, s = ne(o, ["store", "showOnHover"]);
    const u = Pe();
    e = e || u, se(
      e,
      process.env.NODE_ENV !== "production" && "HovercardAnchor must receive a `store` prop or be wrapped in a HovercardProvider component."
    );
    const c = rt(s), a = q(0);
    T(() => () => window.clearTimeout(a.current), []), T(() => X("mouseleave", (f) => {
      if (!e) return;
      const { anchorElement: x } = e.getState();
      x && f.target === x && (window.clearTimeout(a.current), a.current = 0);
    }, !0), [e]);
    const i = s.onMouseMove, d = de(n), g = Fe(), P = U((w) => {
      if (i == null || i(w), c || !e || w.defaultPrevented || a.current || !g() || !d(w)) return;
      const f = w.currentTarget;
      e.setAnchorElement(f), e.setDisclosureElement(f);
      const { showTimeout: x, timeout: N } = e.getState(), C = () => {
        a.current = 0, g() && (e == null || e.setAnchorElement(f), e == null || e.show(), queueMicrotask(() => {
          e == null || e.setDisclosureElement(f);
        }));
      }, p = x ?? N;
      p === 0 ? C() : a.current = window.setTimeout(C, p);
    }), E = s.onClick, h = U((w) => {
      E == null || E(w), e && (window.clearTimeout(a.current), a.current = 0);
    }), b = De(
      (w) => {
        if (!e) return;
        const { anchorElement: f } = e.getState();
        f != null && f.isConnected || e.setAnchorElement(w);
      },
      [e]
    );
    return s = $(S({}, s), {
      ref: Te(b, s.ref),
      onMouseMove: P,
      onClick: h
    }), s = nt(s), s;
  }
), Wt = me(function(r) {
  const o = $t(r);
  return ve(Tt, o);
});
export {
  Wt as H,
  Xt as P,
  It as a,
  qt as b,
  At as c,
  Ht as d,
  bt as e,
  Yt as f,
  Ft as g,
  $t as h,
  Lt as u
};