@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.10

package/dist/esm/components/base/chart-with-side-card/chart-with-side-card.js

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { ChartWithSideCardTest as i } from "./constants.js";
+function m({
+  chart: a,
+  side: t
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex w-full flex-wrap gap-4",
+      "data-testid": i.root,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "min-w-[min(100%,40rem)] grow-[999] basis-0",
+            "data-testid": i.chart,
+            children: a
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "min-w-[min(100%,300px)] grow-0 shrink-0 basis-[22.5rem]",
+            "data-testid": i.side,
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  m as ChartWithSideCard,
+  i as ChartWithSideCardTest
+};

package/dist/esm/components/base/chart-with-side-card/constants.js

@@ -0,0 +1,8 @@
+class a {
+  static root = "chart-with-side-card-root";
+  static chart = "chart-with-side-card-chart";
+  static side = "chart-with-side-card-side";
+}
+export {
+  a as ChartWithSideCardTest
+};

package/dist/esm/components/base/chart-with-side-card/index.js

@@ -0,0 +1,6 @@
+import { ChartWithSideCard as e } from "./chart-with-side-card.js";
+import { ChartWithSideCardTest as d } from "./constants.js";
+export {
+  e as ChartWithSideCard,
+  d as ChartWithSideCardTest
+};

package/dist/esm/components/base/detailed-page-title/constants.js

@@ -0,0 +1,7 @@
+class e {
+  static root = "detailed-page-title-root";
+  static actions = "detailed-page-title-actions";
+}
+export {
+  e as DetailedPageTitleTest
+};

package/dist/esm/components/base/detailed-page-title/detailed-page-title.js

@@ -0,0 +1,95 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { PageTitle as N } from "../page-title/page-title.js";
+import { Stack as i } from "../stack/stack.js";
+import { DetailedPageTitleCopyButton as j } from "../../detailed-page-title/detailed-page-title-copy-button.js";
+import { DetailedPageTitleExplorerDropdown as x } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
+import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as m } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { DetailedPageTitleTest as s } from "./constants.js";
+function K({
+  title: c,
+  browserTitle: p,
+  token: n,
+  icon: d,
+  tokenIconSize: u = 32,
+  disabled: g = !1,
+  toCopy: l,
+  explorerLinks: t,
+  badges: f,
+  actions: a,
+  buttonsSlot: o,
+  meta: w,
+  actionsPosition: h = "left",
+  className: T
+}) {
+  const D = n ? /* @__PURE__ */ e(
+    "span",
+    {
+      className: m(
+        "inline-flex shrink-0 self-center",
+        g ? "grayscale" : void 0
+      ),
+      children: /* @__PURE__ */ e(y, { size: u, token: n })
+    }
+  ) : d, P = o != null || a != null || l != null || t != null && t.length > 0 ? /* @__PURE__ */ r(
+    i,
+    {
+      direction: "row",
+      align: "center",
+      gap: "sm",
+      wrap: !0,
+      "data-testid": s.actions,
+      children: [
+        a,
+        o,
+        l != null ? /* @__PURE__ */ e(j, { toCopy: l }) : null,
+        t != null && t.length > 0 ? /* @__PURE__ */ e(
+          x,
+          {
+            explorerLinks: [...t]
+          }
+        ) : null
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ r(
+    i,
+    {
+      gap: "sm",
+      className: m("min-w-0", T),
+      "data-testid": s.root,
+      children: [
+        /* @__PURE__ */ r(
+          i,
+          {
+            direction: "row",
+            align: "center",
+            gap: "sm",
+            justify: h === "right" ? "between" : "start",
+            wrap: !0,
+            className: "w-full",
+            children: [
+              /* @__PURE__ */ r(i, { direction: "row", align: "center", gap: "sm", wrap: !0, className: "min-w-0", children: [
+                D,
+                /* @__PURE__ */ e(N, { title: c, browserTitle: p }),
+                f
+              ] }),
+              P
+            ]
+          }
+        ),
+        w
+      ]
+    }
+  );
+}
+export {
+  K as DetailedPageTitle,
+  s as DetailedPageTitleTest
+};

package/dist/esm/components/base/detailed-page-title/index.js

@@ -0,0 +1,6 @@
+import { DetailedPageTitle as a } from "./detailed-page-title.js";
+import { DetailedPageTitleTest as l } from "./constants.js";
+export {
+  a as DetailedPageTitle,
+  l as DetailedPageTitleTest
+};

package/dist/esm/components/base/details-view/constants.js

@@ -0,0 +1,13 @@
+class e {
+  static root = "details-view-root";
+  static leftPane = "details-view-left-pane";
+  static managePane = "details-view-manage-pane";
+}
+class a {
+  static root = "detail-aside-wrapper-root";
+  static stickyContent = "detail-aside-wrapper-sticky-content";
+}
+export {
+  a as DetailAsideWrapperTest,
+  e as DetailsViewTest
+};

package/dist/esm/components/base/details-view/detail-aside/constants.js

@@ -0,0 +1,21 @@
+const _ = 75, A = 16, l = 24, x = [
+  "relative mx-auto min-w-0",
+  "flex-col lg:flex-row lg:items-start",
+  "max-w-[calc(80rem+420px+1.5rem)]",
+  "xl:max-w-[calc(80rem+460px+1.5rem)]"
+].join(" "), a = [
+  "w-full min-w-0 shrink-0",
+  "lg:flex lg:self-stretch lg:flex-col",
+  "lg:w-[420px] lg:min-w-[420px] lg:max-w-[420px]",
+  "xl:w-[460px] xl:min-w-[460px] xl:max-w-[460px]"
+].join(" "), t = "data-aside-align-anchor", T = "data-aside-form-top", E = "data-detail-aside-mode";
+export {
+  t as ASIDE_ALIGN_ANCHOR_ATTR,
+  T as ASIDE_FORM_TOP_ATTR,
+  E as DETAIL_ASIDE_MODE_ATTR,
+  _ as DETAIL_ASIDE_SPACER_PX,
+  l as DETAIL_ASIDE_STICKY_OFFSET_BOTTOM_PX,
+  A as DETAIL_ASIDE_STICKY_OFFSET_TOP_PX,
+  a as DETAIL_MAIN_ASIDE_CLASS_NAME,
+  x as DETAIL_MAIN_ASIDE_LAYOUT_CLASS_NAME
+};

package/dist/esm/components/base/details-view/detail-aside/detail-aside-scope.js

@@ -0,0 +1,39 @@
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as l, useContext as a, useCallback as s, useRef as A, useMemo as f } from "react";
+import { defaultQuerySelectorAnchor as d } from "./sticky-controller.js";
+const i = l(null);
+function g({
+  children: t
+}) {
+  const r = A(null), n = s((c) => {
+    r.current = c;
+  }, []), e = s(() => r.current ?? d(), []), o = f(
+    () => ({
+      getAnchor: e,
+      registerAnchor: n
+    }),
+    [e, n]
+  );
+  return /* @__PURE__ */ u(i.Provider, { value: o, children: t });
+}
+function p() {
+  return a(i)?.getAnchor;
+}
+function C({
+  children: t,
+  className: r,
+  ...n
+}) {
+  const e = a(i), o = s(
+    (c) => {
+      e?.registerAnchor(c);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ u("div", { ref: o, className: r, "data-aside-align-anchor": !0, ...n, children: t });
+}
+export {
+  C as AsideAlignAnchor,
+  g as DetailAsideScope,
+  p as useDetailAsideAnchorGetter
+};

package/dist/esm/components/base/details-view/detail-aside/detail-aside-screen-layout.js

@@ -0,0 +1,42 @@
+import { jsx as i } from "react/jsx-runtime";
+import { MainAsideLayout as n } from "../../../layout/main-aside-layout/main-aside-layout.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../utils/z-index.js";
+import { DETAIL_MAIN_ASIDE_CLASS_NAME as d, DETAIL_MAIN_ASIDE_LAYOUT_CLASS_NAME as c } from "./constants.js";
+import { DetailAsideScope as _ } from "./detail-aside-scope.js";
+import { DetailAsideWrapper as f } from "./detail-aside-wrapper.js";
+function x({
+  children: t,
+  aside: r,
+  mainRef: e,
+  asidePosition: m,
+  centeredMain: a,
+  className: p,
+  asideClassName: A,
+  mainClassName: s
+}) {
+  const l = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
+  return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+    n,
+    {
+      className: o(c, p),
+      asideClassName: o(d, A),
+      mainClassName: s,
+      mainRef: e,
+      aside: l,
+      asidePosition: m,
+      centeredMain: a,
+      variant: "detail",
+      stickyAside: !1,
+      children: t
+    }
+  ) });
+}
+export {
+  x as DetailAsideScreenLayout
+};

package/dist/esm/components/base/details-view/detail-aside/detail-aside-wrapper.js

@@ -0,0 +1,42 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useRef as t } from "react";
+import { DetailAsideWrapperTest as l } from "../constants.js";
+import { useDetailAsideSticky as d } from "./use-detail-aside-sticky.js";
+function p({
+  children: r
+}) {
+  const i = t(null), o = t(null), s = t(null), { spacerPx: n } = d({
+    rootRef: i,
+    contentRef: o,
+    motionRef: s
+  });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: i,
+      className: "w-full min-h-0 lg:flex-1",
+      "data-testid": l.root,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "hidden overflow-hidden transition-[height] duration-200 ease-out lg:block",
+            style: { height: n }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            ref: o,
+            className: "w-full",
+            "data-testid": l.stickyContent,
+            children: /* @__PURE__ */ e("div", { ref: s, className: "w-full", children: r })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  p as DetailAsideWrapper
+};

package/dist/esm/components/base/details-view/detail-aside/geometry.js

@@ -0,0 +1,43 @@
+import { DETAIL_ASIDE_STICKY_OFFSET_TOP_PX as o, DETAIL_ASIDE_STICKY_OFFSET_BOTTOM_PX as r } from "./constants.js";
+function c(t, i, e = o, n = r) {
+  return {
+    availableHeight: t - e - n,
+    bottomTop: t - n - i,
+    contentHeight: i,
+    top: e
+  };
+}
+function a(t) {
+  return t.contentHeight <= t.availableHeight;
+}
+function S(t, i, e) {
+  return Math.max(0, Math.round(t - i - e));
+}
+function p(t, i, e) {
+  return Math.min(
+    Math.max(0, t - i),
+    Math.max(0, e)
+  );
+}
+function _(t, i, e = o, n = r) {
+  return {
+    topLimit: t + e,
+    bottomLimit: t + i - n
+  };
+}
+function T({
+  limits: t,
+  contentTop: i,
+  contentBottom: e,
+  scrollLimits: n
+}) {
+  return a(t) || i >= n.topLimit ? "top" : e <= n.bottomLimit ? "bottom" : "relative";
+}
+export {
+  p as computeRelativeTop,
+  _ as computeScrollLimits,
+  S as computeSpacerPx,
+  c as computeStickyLimits,
+  a as isShortAside,
+  T as reconcileAsideStickyMode
+};

package/dist/esm/components/base/details-view/detail-aside/scroll-parent.js

@@ -0,0 +1,13 @@
+function o(n) {
+  let e = n.parentElement;
+  for (; e; ) {
+    const t = window.getComputedStyle(e).overflowY;
+    if (t === "auto" || t === "scroll" || t === "overlay")
+      return e;
+    e = e.parentElement;
+  }
+  return window;
+}
+export {
+  o as findScrollParentFromElement
+};

package/dist/esm/components/base/details-view/detail-aside/sticky-controller.js

@@ -0,0 +1,137 @@
+import { ASIDE_ALIGN_ANCHOR_ATTR as N, DETAIL_ASIDE_STICKY_OFFSET_TOP_PX as q, DETAIL_ASIDE_STICKY_OFFSET_BOTTOM_PX as X, ASIDE_FORM_TOP_ATTR as Y, DETAIL_ASIDE_SPACER_PX as G, DETAIL_ASIDE_MODE_ATTR as K } from "./constants.js";
+import { computeSpacerPx as V, computeStickyLimits as Q, computeScrollLimits as U, reconcileAsideStickyMode as W, computeRelativeTop as j } from "./geometry.js";
+import { findScrollParentFromElement as J } from "./scroll-parent.js";
+function Z() {
+  return document.querySelector(`[${N}]`);
+}
+function ie({
+  root: s,
+  content: t,
+  motion: r,
+  getAnchor: L = Z,
+  onSpacerChange: x,
+  offsetTop: T = q,
+  offsetBottom: _ = X
+}) {
+  let o = "relative", m = 0, R = G, g = null, i = null, v = null;
+  const F = 120, h = () => {
+    t.setAttribute(K, o);
+  }, a = (() => {
+    const e = s.parentElement;
+    return e ? J(e) : window;
+  })(), u = a === window ? null : a, y = () => u ? u.getBoundingClientRect().height : window.innerHeight, E = () => u ? u.scrollTop : window.scrollY, S = () => Q(
+    y(),
+    t.offsetHeight,
+    T,
+    _
+  ), b = () => {
+    const e = s.getBoundingClientRect(), n = t.getBoundingClientRect(), c = e.top + R, p = Math.max(
+      0,
+      s.offsetHeight - R - t.offsetHeight
+    );
+    return j(
+      n.top,
+      c,
+      p
+    );
+  }, P = (e) => {
+    r.removeAttribute("data-detail-aside-bounce"), r.offsetWidth, r.setAttribute("data-detail-aside-bounce", e);
+  }, B = (e) => {
+    e.target === r && r.removeAttribute("data-detail-aside-bounce");
+  }, d = (e = !1) => {
+    const n = o;
+    o = "top", t.style.position = "sticky", t.style.top = `${T}px`, h(), e && n !== "top" && P("top");
+  }, C = (e = !1) => {
+    const n = o;
+    o = "bottom", t.style.position = "sticky", t.style.top = `${Math.round(S().bottomTop)}px`, h(), e && n !== "bottom" && P("bottom");
+  }, A = (e) => {
+    o = "relative", t.style.position = "relative", t.style.top = `${Math.round(e)}px`, h();
+  }, k = () => {
+    A(b());
+  }, w = () => {
+    const e = L();
+    if (e) {
+      const p = (s.querySelector(`[${Y}]`) ?? t).getBoundingClientRect().top - t.getBoundingClientRect().top, l = V(
+        e.getBoundingClientRect().top,
+        s.getBoundingClientRect().top,
+        p
+      );
+      l !== R && (R = l, x(l));
+    }
+    const n = S();
+    if (n.contentHeight <= n.availableHeight) {
+      d();
+      return;
+    }
+    o === "top" ? d() : o === "bottom" ? C() : k();
+  }, I = () => {
+    const e = S();
+    if (e.contentHeight <= e.availableHeight) {
+      o !== "top" && d();
+      return;
+    }
+    const c = u?.getBoundingClientRect()?.top ?? 0, p = U(
+      c,
+      y(),
+      T,
+      _
+    ), l = t.getBoundingClientRect(), f = W({
+      limits: e,
+      contentTop: l.top,
+      contentBottom: l.bottom,
+      scrollLimits: p
+    });
+    if (f !== o) {
+      if (f === "top") {
+        d();
+        return;
+      }
+      if (f === "bottom") {
+        C();
+        return;
+      }
+      A(b());
+    }
+  }, O = () => {
+    i !== null && clearTimeout(i), i = setTimeout(() => {
+      i = null, m = E(), I();
+    }, F);
+  }, z = () => {
+    const e = E(), n = e - m;
+    if (m = e, n === 0) {
+      O();
+      return;
+    }
+    const c = S();
+    if (c.contentHeight <= c.availableHeight) {
+      d();
+      return;
+    }
+    const l = u?.getBoundingClientRect()?.top ?? 0, f = l + T, $ = l + y() - _;
+    n > 0 ? (o === "top" && A(b()), o === "relative" && t.getBoundingClientRect().bottom <= $ && C(!0)) : (o === "bottom" && A(b()), o === "relative" && t.getBoundingClientRect().top >= f && d(!0));
+  }, D = () => {
+    g === null && (g = window.requestAnimationFrame(() => {
+      g = null, z(), O();
+    }));
+  }, M = () => {
+    i !== null && (clearTimeout(i), i = null), m = E(), I();
+  }, H = () => {
+    w();
+  };
+  return {
+    bind() {
+      m = E(), w(), v = new ResizeObserver(w), v.observe(s), v.observe(t);
+      const e = L();
+      e && v.observe(e), r.addEventListener("animationend", B), a.addEventListener("scroll", D, { passive: !0 }), a.addEventListener("scrollend", M, {
+        passive: !0
+      }), window.addEventListener("resize", H, { passive: !0 });
+    },
+    unbind() {
+      g !== null && window.cancelAnimationFrame(g), i !== null && clearTimeout(i), v?.disconnect(), r.removeEventListener("animationend", B), a.removeEventListener("scroll", D), a.removeEventListener("scrollend", M), window.removeEventListener("resize", H);
+    }
+  };
+}
+export {
+  ie as createDetailAsideStickyController,
+  Z as defaultQuerySelectorAnchor
+};

package/dist/esm/components/base/details-view/detail-aside/use-detail-aside-sticky.js

@@ -0,0 +1,31 @@
+import { useState as p, useRef as S, useLayoutEffect as d } from "react";
+import { DETAIL_ASIDE_SPACER_PX as h } from "./constants.js";
+import { useDetailAsideAnchorGetter as D } from "./detail-aside-scope.js";
+import { defaultQuerySelectorAnchor as t, createDetailAsideStickyController as y } from "./sticky-controller.js";
+function R({
+  rootRef: i,
+  contentRef: s,
+  motionRef: f,
+  getAnchor: e = t,
+  enabled: a = !0
+}) {
+  const [A, l] = p(h), m = D(), r = S(e ?? t);
+  return r.current = m ?? e ?? t, d(() => {
+    if (!a) return;
+    const o = i.current, n = s.current, c = f.current;
+    if (!o || !n || !c) return;
+    const u = y({
+      root: o,
+      content: n,
+      motion: c,
+      getAnchor: () => r.current(),
+      onSpacerChange: l
+    });
+    return u.bind(), () => {
+      u.unbind();
+    };
+  }, []), { spacerPx: A };
+}
+export {
+  R as useDetailAsideSticky
+};

package/dist/esm/components/base/details-view/details-view.js

@@ -0,0 +1,72 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { Children as u, cloneElement as g, isValidElement as c } from "react";
+import { Stack as l } from "../stack/stack.js";
+import { isTabber as A } from "../tabber/tabber.js";
+import { Container as P } from "../../layout/container/container.js";
+import { useIsMedium as x } from "../../../hooks/use-media-query.js";
+import { DetailsViewTest as o } from "./constants.js";
+import { AsideAlignAnchor as y } from "./detail-aside/detail-aside-scope.js";
+import { DetailAsideScreenLayout as w } from "./detail-aside/detail-aside-screen-layout.js";
+function N(e) {
+  return c(e) && e.type === b;
+}
+function D(e) {
+  return c(e) && e.type === h;
+}
+function V(e) {
+  return c(e) && e.type === y;
+}
+function q({
+  children: e,
+  mainRef: s,
+  className: n,
+  testId: a
+}) {
+  const t = x(), i = u.toArray(e), m = i.find(N), f = i.find(D)?.props.children ?? null, d = f != null ? /* @__PURE__ */ r(l, { gap: "md", "data-testid": o.managePane, children: f }) : null;
+  return /* @__PURE__ */ r(l, { className: "flex-col-12", "data-testid": a ?? o.root, children: /* @__PURE__ */ r(l, { className: "px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r(
+    w,
+    {
+      className: n,
+      mainRef: s,
+      aside: !t && d ? d : null,
+      children: /* @__PURE__ */ r(P, { padding: !1, children: m ? g(m, {
+        mobileManagePane: t ? d : null
+      }) : null })
+    }
+  ) }) });
+}
+function b({
+  children: e,
+  mobileManagePane: s
+}) {
+  const n = u.toArray(e);
+  if (s == null)
+    return /* @__PURE__ */ r(l, { className: "gap-3.5", "data-testid": o.leftPane, children: n });
+  const a = n.findIndex(A);
+  if (a !== -1) {
+    const i = n[a];
+    return /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
+      n.slice(0, a),
+      c(i) ? g(i, {
+        mobileManagePane: s
+      }) : i,
+      n.slice(a + 1)
+    ] });
+  }
+  let t = n.findIndex(V);
+  return t !== -1 ? t += 1 : t = n.length, /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
+    n.slice(0, t),
+    s,
+    n.slice(t)
+  ] });
+}
+function h(e) {
+  return null;
+}
+h.displayName = "DetailsViewManagePane";
+export {
+  q as DetailsView,
+  b as DetailsViewLeftPane,
+  h as DetailsViewManagePane,
+  o as DetailsViewTest
+};

package/dist/esm/components/base/details-view/index.js

@@ -0,0 +1,12 @@
+import { AsideAlignAnchor as t } from "./detail-aside/detail-aside-scope.js";
+import { DetailAsideScreenLayout as o } from "./detail-aside/detail-aside-screen-layout.js";
+import { DetailsView as s, DetailsViewLeftPane as l, DetailsViewManagePane as n } from "./details-view.js";
+import { DetailsViewTest as D } from "./constants.js";
+export {
+  t as AsideAlignAnchor,
+  o as DetailAsideScreenLayout,
+  s as DetailsView,
+  l as DetailsViewLeftPane,
+  n as DetailsViewManagePane,
+  D as DetailsViewTest
+};

package/dist/esm/components/base/health-factor-block/constants.js

@@ -0,0 +1,8 @@
+class a {
+  static root = "health-factor-block-root";
+  static value = "health-factor-block-value";
+  static valueTo = "health-factor-block-value-to";
+}
+export {
+  a as HealthFactorBlockTest
+};