@gearbox-protocol/ui-kit 3.14.0-next.8 → 4.0.0-next.1

package/dist/esm/components/base/stat-badge/stat-badge.js

@@ -0,0 +1,115 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Stack as g } from "../stack/stack.js";
+import { useTitleText as f } from "../text/use-title-text.js";
+import { Skeleton as u } from "../../skeleton/skeleton.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as d } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { StatBadgeTest as m } from "./constants.js";
+const p = {
+  sm: "p-4",
+  md: "p-5",
+  default: "p-6"
+}, x = {
+  sm: "mb-2.5",
+  md: "mb-2",
+  default: "mb-3"
+}, S = {
+  sm: "text-xs leading-[0.8125rem]",
+  md: "text-xs leading-[0.9rem]",
+  default: "text-sm leading-[1.0625rem]"
+}, h = {
+  sm: "text-sm leading-[1.0625rem]",
+  md: "text-base leading-[1.25rem]",
+  default: "text-xl leading-[1.5625rem]"
+};
+function A({
+  title: i,
+  value: r,
+  isLoading: o = !1,
+  size: t = "default",
+  action: l,
+  className: s,
+  testId: n
+}) {
+  const c = f();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: d(
+        "h-full w-full rounded-lg border border-border bg-card",
+        p[t],
+        s
+      ),
+      "data-testid": n ?? m.root,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: d(
+              "flex items-center justify-between gap-2",
+              x[t]
+            ),
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: d("font-medium text-muted-foreground", S[t]),
+                  children: c(i)
+                }
+              ),
+              l != null ? /* @__PURE__ */ e("div", { className: "shrink-0", "data-testid": m.action, children: l }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d("font-medium text-foreground", h[t]), children: /* @__PURE__ */ e(u, { width: 80, loading: o, children: /* @__PURE__ */ e(g, { gap: "xs", align: "start", children: r }) }) })
+      ]
+    }
+  );
+}
+const b = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+}, I = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+}, _ = {
+  sm: "gap-2",
+  default: "gap-4",
+  lg: "gap-6"
+};
+function B({
+  cols: i = 1,
+  colsLg: r,
+  gap: o = "default",
+  children: t,
+  className: l
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: d(
+        "grid w-full",
+        b[i],
+        r ? I[r] : void 0,
+        _[o],
+        l
+      ),
+      "data-testid": m.grid,
+      children: t
+    }
+  );
+}
+export {
+  A as StatBadge,
+  B as StatBadgeGrid,
+  m as StatBadgeTest
+};

package/dist/esm/components/base/sticky-bar/constants.js

@@ -0,0 +1,6 @@
+class o {
+  static root = "sticky-bar-root";
+}
+export {
+  o as StickyBarTest
+};

package/dist/esm/components/base/sticky-bar/index.js

@@ -0,0 +1,6 @@
+import { StickyBar as o } from "./sticky-bar.js";
+import { StickyBarTest as a } from "./constants.js";
+export {
+  o as StickyBar,
+  a as StickyBarTest
+};

package/dist/esm/components/base/sticky-bar/sticky-bar.js

@@ -0,0 +1,31 @@
+import { jsx as m } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as p } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { StickyBarTest as i } from "./constants.js";
+function f({
+  children: t,
+  className: r,
+  testId: o = i.root
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: p(
+        "sticky top-0 z-20 -mx-1 px-1 pt-3 sm:pt-4",
+        "bg-background/75 backdrop-blur-md backdrop-saturate-150",
+        r
+      ),
+      "data-testid": o,
+      children: t
+    }
+  );
+}
+export {
+  f as StickyBar,
+  i as StickyBarTest
+};

package/dist/esm/components/base/tabber/constants.js

@@ -0,0 +1,8 @@
+class a {
+  static root = "tabber-root";
+  static bar = "tabber-bar";
+  static section = "tabber-section";
+}
+export {
+  a as TabberTest
+};

package/dist/esm/components/base/tabber/index.js

@@ -0,0 +1,10 @@
+import { Tabber as b, TabberSection as o, isTabber as t } from "./tabber.js";
+import { useDetailScrollSpy as T } from "./use-detail-scroll-spy.js";
+import { TabberTest as f } from "./constants.js";
+export {
+  b as Tabber,
+  o as TabberSection,
+  f as TabberTest,
+  t as isTabber,
+  T as useDetailScrollSpy
+};

package/dist/esm/components/base/tabber/tabber.js

@@ -0,0 +1,116 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { createContext as j, useContext as k, useMemo as p, Children as I, useRef as b, useEffect as O, isValidElement as w } from "react";
+import { SectionHeading as A } from "../section-heading/section-heading.js";
+import { Stack as h } from "../stack/stack.js";
+import { StickyBar as B } from "../sticky-bar/sticky-bar.js";
+import { useTitleText as v } from "../text/use-title-text.js";
+import { TabItem as E, TabControl as H } from "../../tab-control/tab-control.js";
+import { TabberTest as x } from "./constants.js";
+import { useDetailScrollSpy as q } from "./use-detail-scroll-spy.js";
+const C = j({});
+function N({
+  id: e,
+  title: r,
+  heading: s = r,
+  actions: d,
+  children: c
+}) {
+  const i = k(C), n = v();
+  return /* @__PURE__ */ o(
+    "section",
+    {
+      ref: i[e],
+      className: "scroll-mt-28",
+      "data-scroll-section": e,
+      "data-testid": x.section,
+      children: /* @__PURE__ */ l(h, { gap: "md", children: [
+        /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ o(A, { children: n(s) }),
+          d
+        ] }),
+        c
+      ] })
+    }
+  );
+}
+N.displayName = "TabberSection";
+function D(e) {
+  return w(e) && e.type === N;
+}
+function F({
+  item: e,
+  ...r
+}) {
+  return /* @__PURE__ */ l("div", { className: "flex items-stretch overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:h-0 [scrollbar-width:none]", children: [
+    /* @__PURE__ */ o("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ o(H, { ...r, showBorder: !0 }) }),
+    e && /* @__PURE__ */ o("div", { className: "w-auto shrink-0 grow-0 basis-auto", children: e })
+  ] });
+}
+function M({
+  children: e,
+  observeKey: r,
+  initialSection: s,
+  testId: d
+}) {
+  const c = p(
+    () => I.toArray(e).filter(D),
+    [e]
+  ), i = c.map((t) => t.props.id).join("|"), n = p(
+    () => i === "" ? [] : i.split("|"),
+    [i]
+  ), T = b({}), a = p(() => {
+    const t = {
+      ...T.current
+    };
+    for (const g of n)
+      t[g] === void 0 && (t[g] = { current: null });
+    return T.current = t, t;
+  }, [n]), y = v(), { activeSection: f, scrollToSection: u } = q(
+    a,
+    n,
+    r
+  ), m = b(!1), S = b(r);
+  O(() => {
+    if (r !== S.current && (S.current = r, m.current = !1), m.current || !r) return;
+    const t = s ?? n[0];
+    m.current = !0, !(t === void 0 || t === n[0]) && a[t] !== void 0 && requestAnimationFrame(() => {
+      u(t);
+    });
+  }, [r, s, u, n, a]);
+  const R = c.map((t) => ({
+    id: t.props.id,
+    item: /* @__PURE__ */ o(
+      E,
+      {
+        selected: f === t.props.id,
+        label: y(t.props.title)
+      }
+    )
+  }));
+  return /* @__PURE__ */ l(h, { gap: "lg", "data-testid": d ?? x.root, children: [
+    /* @__PURE__ */ o(B, { testId: x.bar, children: /* @__PURE__ */ o(
+      F,
+      {
+        state: {
+          id: f,
+          index: n.indexOf(f),
+          handleTabChange: (t) => {
+            u(t);
+          }
+        },
+        tabs: R,
+        item: null
+      }
+    ) }),
+    /* @__PURE__ */ o(C.Provider, { value: a, children: /* @__PURE__ */ o(h, { gap: "xl", children: e }) })
+  ] });
+}
+function X(e) {
+  return w(e) && e.type === M;
+}
+export {
+  M as Tabber,
+  N as TabberSection,
+  x as TabberTest,
+  X as isTabber
+};

package/dist/esm/components/base/tabber/use-detail-scroll-spy.js

@@ -0,0 +1,44 @@
+import { useState as S, useEffect as h, useCallback as x } from "react";
+function k(n, c, u) {
+  const f = c[0] ?? "", [b, r] = S(f);
+  h(() => {
+    const e = /* @__PURE__ */ new Map(), v = () => {
+      let o, t = 0;
+      for (const s of c) {
+        const l = n[s]?.current;
+        if (!l) continue;
+        const a = e.get(l) ?? 0;
+        a > t && (t = a, o = s);
+      }
+      o !== void 0 && t > 0 && r(o);
+    }, i = new IntersectionObserver(
+      (o) => {
+        for (const t of o)
+          e.set(t.target, t.intersectionRatio);
+        v();
+      },
+      {
+        root: null,
+        rootMargin: "-80px 0px -45% 0px",
+        threshold: [0, 0.05, 0.1, 0.2, 0.35, 0.5, 0.75, 1]
+      }
+    );
+    for (const o of c) {
+      const t = n[o]?.current;
+      t && i.observe(t);
+    }
+    return () => {
+      i.disconnect(), e.clear();
+    };
+  }, [n, u, c]);
+  const p = x(
+    (e) => {
+      n[e]?.current?.scrollIntoView({ behavior: "smooth", block: "start" }), r(e);
+    },
+    [n]
+  );
+  return { activeSection: b, scrollToSection: p };
+}
+export {
+  k as useDetailScrollSpy
+};

package/dist/esm/components/base/text/index.js

@@ -0,0 +1,4 @@
+import { useTitleText as o } from "./use-title-text.js";
+export {
+  o as useTitleText
+};

package/dist/esm/components/base/text/use-title-text.js

@@ -0,0 +1,8 @@
+import { useIntlTyped as t } from "../../typed-intl/index.js";
+function o() {
+  const s = t();
+  return (e) => typeof e == "string" ? s.formatMessage({ messageId: e }) : e;
+}
+export {
+  o as useTitleText
+};

package/dist/esm/components/base/time-to-liquidation-block/constants.js

@@ -0,0 +1,8 @@
+class i {
+  static root = "time-to-liquidation-block-root";
+  static value = "time-to-liquidation-block-value";
+  static valueTo = "time-to-liquidation-block-value-to";
+}
+export {
+  i as TimeToLiquidationBlockTest
+};

package/dist/esm/components/base/time-to-liquidation-block/index.js

@@ -0,0 +1,6 @@
+import { TimeToLiquidationBlockTest as e } from "./constants.js";
+import { TimeToLiquidationBlock as T } from "./time-to-liquidation-block.js";
+export {
+  T as TimeToLiquidationBlock,
+  e as TimeToLiquidationBlockTest
+};

package/dist/esm/components/base/time-to-liquidation-block/time-to-liquidation-block.js

@@ -0,0 +1,60 @@
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { useTitleText as T } from "../text/use-title-text.js";
+import { FadeoutLoading as r } from "../../fadeout-loading/fadeout-loading.js";
+import { HealthDot as f } from "../../status-elements/status-elements.js";
+import { FormattedMessageTyped as s } from "../../typed-intl/index.js";
+import { VerticalIndicator as h } from "../../vertical-indicator/vertical-indicator.js";
+import { ttlLeft as g, getTTLZones as x } from "../../../utils/ttl.js";
+import { TimeToLiquidationBlockTest as d } from "./constants.js";
+function j({
+  seconds: i,
+  secondsTo: l,
+  zone: n,
+  isLoading: o,
+  title: e,
+  tip: a,
+  testId: c
+}) {
+  const p = T(), m = l !== void 0;
+  return /* @__PURE__ */ t(
+    h,
+    {
+      align: "center",
+      dimPreviousValue: !1,
+      "data-testid": c ?? d.root,
+      label: e !== void 0 ? p(e) : /* @__PURE__ */ t(s, { messageId: "components.timeToLiquidationBlock.label" }),
+      tip: a ?? /* @__PURE__ */ t(s, { messageId: "components.timeToLiquidationBlock.tip" }),
+      value: /* @__PURE__ */ t(r, { loading: o, children: /* @__PURE__ */ t(
+        u,
+        {
+          seconds: i,
+          zone: m ? void 0 : n,
+          testId: d.value
+        }
+      ) }),
+      valueTo: m ? /* @__PURE__ */ t(r, { loading: o, children: /* @__PURE__ */ t(
+        u,
+        {
+          seconds: l ?? null,
+          zone: n,
+          testId: d.valueTo
+        }
+      ) }) : void 0
+    }
+  );
+}
+function u({
+  seconds: i,
+  zone: l,
+  testId: n
+}) {
+  const o = i == null ? null : i * 1e3, e = o === null ? void 0 : g(o), a = l ?? (o === null ? void 0 : x(o));
+  return /* @__PURE__ */ v("span", { className: "inline-flex items-center", "data-testid": n, children: [
+    i === void 0 ? "—" : o === null ? "N/A" : e?.months !== void 0 ? `${e.months}mo` : e?.day !== void 0 ? `${e.day}d` : "<1d",
+    o !== null && a ? /* @__PURE__ */ t("span", { className: "ml-1.5", children: /* @__PURE__ */ t(f, { zone: a }) }) : null
+  ] });
+}
+export {
+  j as TimeToLiquidationBlock,
+  d as TimeToLiquidationBlockTest
+};

package/dist/esm/components/base/token-amount/constants.js

@@ -0,0 +1,6 @@
+class t {
+  static root = "token-amount-root";
+}
+export {
+  t as TokenAmountTest
+};

package/dist/esm/components/base/token-amount/index.js

@@ -0,0 +1,6 @@
+import { TokenAmount as t } from "./token-amount.js";
+import { TokenAmountTest as n } from "./constants.js";
+export {
+  t as TokenAmount,
+  n as TokenAmountTest
+};

package/dist/esm/components/base/token-amount/token-amount.js

@@ -0,0 +1,29 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { Stack as i } from "../stack/stack.js";
+import { TokenTemplate as m } from "../../token-template/token-template.js";
+import { Typography as s } from "../../typography/typography.js";
+import { formatMoney as l } from "../../../utils/format-money.js";
+import { TokenAmountTest as t } from "./constants.js";
+function T({
+  data: o,
+  token: n
+}) {
+  if (o === null)
+    return /* @__PURE__ */ r(
+      "span",
+      {
+        className: "text-secondary-foreground",
+        "data-testid": t.root,
+        children: "—"
+      }
+    );
+  const e = n ?? o.token;
+  return /* @__PURE__ */ a(i, { gap: "xs", align: "start", "data-testid": t.root, children: [
+    /* @__PURE__ */ r(m, { value: o.value, token: e }),
+    /* @__PURE__ */ r(s, { as: "span", variant: "caption", color: "secondary", children: o.valueUsd === null ? "—" : l(o.valueUsd) })
+  ] });
+}
+export {
+  T as TokenAmount,
+  t as TokenAmountTest
+};

package/dist/esm/components/base/values/constants.js

@@ -0,0 +1,17 @@
+class a {
+  static apy = "value-apy";
+  static usd = "value-usd";
+  static leverage = "value-leverage";
+  static utilization = "value-utilization";
+  static healthFactor = "value-health-factor";
+  static pnl = "value-pnl";
+  static tokenBigint = "value-token-bigint";
+  static placeholder = "value-placeholder";
+}
+class e {
+  static root = "position-short-label";
+}
+export {
+  e as PositionShortLabelTest,
+  a as ValueTest
+};

package/dist/esm/components/base/values/index.js

@@ -0,0 +1,18 @@
+import { PositionShortLabelTest as t, ValueTest as a } from "./constants.js";
+import { PnlValue as l } from "./pnl-value.js";
+import { PositionShortLabel as n } from "./position-short-label.js";
+import { PositionTypeBadge as u } from "./position-type-badge.js";
+import { ApyValue as s, HealthFactorValue as f, LeverageValue as m, TokenBigint as x, UsdValue as P, UtilizationValue as T } from "./scalars.js";
+export {
+  s as ApyValue,
+  f as HealthFactorValue,
+  m as LeverageValue,
+  l as PnlValue,
+  n as PositionShortLabel,
+  t as PositionShortLabelTest,
+  u as PositionTypeBadge,
+  x as TokenBigint,
+  P as UsdValue,
+  T as UtilizationValue,
+  a as ValueTest
+};

package/dist/esm/components/base/values/pnl-value.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { ValueTest as o } from "./constants.js";
+function x({
+  data: r
+}) {
+  if (r === void 0)
+    return /* @__PURE__ */ e("span", { "data-testid": o.placeholder, children: "—" });
+  const t = r.total.valueUsd ?? 0, i = t > 0 ? "+" : t < 0 ? "−" : "";
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "data-testid": o.pnl,
+      className: s(t > 0 && "text-success", t < 0 && "text-destructive"),
+      children: `${i}$${Math.abs(t).toFixed(2)}`
+    }
+  );
+}
+export {
+  x as PnlValue
+};

package/dist/esm/components/base/values/position-short-label.js

@@ -0,0 +1,15 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { PositionShortLabelTest as t } from "./constants.js";
+import { LeverageValue as i } from "./scalars.js";
+function m({
+  data: o
+}) {
+  return /* @__PURE__ */ e("span", { "data-testid": t.root, children: [
+    `${o.name} · `,
+    /* @__PURE__ */ r(i, { data: o.leverage })
+  ] });
+}
+export {
+  m as PositionShortLabel,
+  t as PositionShortLabelTest
+};

package/dist/esm/components/base/values/position-type-badge.js

@@ -0,0 +1,38 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Badge as r } from "../../badge/badge.js";
+import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as i } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+const p = {
+  pool: "shrink-0 border-transparent bg-emerald-500/15 font-medium text-emerald-400 hover:bg-emerald-500/15",
+  strategy: "shrink-0 border-transparent bg-blue-500/15 font-medium text-blue-400 hover:bg-blue-500/15",
+  liquidation: "shrink-0 border-transparent bg-purple-500/15 font-medium text-purple-400 hover:bg-purple-500/15"
+}, m = {
+  pool: "components.positionTypeBadge.pool",
+  strategy: "components.positionTypeBadge.strategy",
+  liquidation: "components.positionTypeBadge.liquidation"
+}, a = "text-[10px] leading-none px-1.5 py-0.5 rounded-md";
+function f({
+  data: e,
+  size: t = "table"
+}) {
+  return /* @__PURE__ */ o(
+    r,
+    {
+      variant: "secondary",
+      className: i(
+        p[e],
+        t === "aside" && a
+      ),
+      children: /* @__PURE__ */ o(n, { messageId: m[e] })
+    }
+  );
+}
+export {
+  f as PositionTypeBadge
+};

package/dist/esm/components/base/values/scalars.js

@@ -0,0 +1,61 @@
+import { jsx as e } from "react/jsx-runtime";
+import { CompoundAPY as s } from "../../compound-apy/compound-apy.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as c } from "../../../utils/cn.js";
+import "sonner";
+import { formatMoney as a, percentageTemplate as l } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { ValueTest as i } from "./constants.js";
+const p = "—";
+function r() {
+  return /* @__PURE__ */ e("span", { "data-testid": i.placeholder, children: p });
+}
+function o(t) {
+  return l(t / 100);
+}
+function L({ data: t }) {
+  return t === void 0 ? /* @__PURE__ */ e(r, {}) : typeof t == "number" ? /* @__PURE__ */ e("span", { "data-testid": i.apy, children: o(t) }) : /* @__PURE__ */ e("span", { "data-testid": i.apy, children: /* @__PURE__ */ e(s, { apy: t }) });
+}
+function z({
+  data: t
+}) {
+  return t == null ? /* @__PURE__ */ e(r, {}) : /* @__PURE__ */ e("span", { "data-testid": i.usd, children: a(t) });
+}
+function A({
+  data: t
+}) {
+  return t === void 0 ? /* @__PURE__ */ e(r, {}) : /* @__PURE__ */ e("span", { "data-testid": i.leverage, children: `${t}x` });
+}
+function P({
+  data: t
+}) {
+  return t === void 0 ? /* @__PURE__ */ e(r, {}) : /* @__PURE__ */ e("span", { "data-testid": i.utilization, children: o(t) });
+}
+function T({
+  data: t
+}) {
+  if (t === void 0)
+    return /* @__PURE__ */ e(r, {});
+  const n = t < 1e4 ? "text-destructive" : t < 11e3 ? "text-warning" : "text-success";
+  return /* @__PURE__ */ e("span", { "data-testid": i.healthFactor, className: c(n), children: (t / 1e4).toFixed(2) });
+}
+function $({
+  data: t,
+  token: n
+}) {
+  if (t === void 0 || n === void 0)
+    return /* @__PURE__ */ e(r, {});
+  const u = Number(t) / 10 ** n.decimals;
+  return /* @__PURE__ */ e("span", { "data-testid": i.tokenBigint, children: `${u.toLocaleString(void 0, { maximumFractionDigits: 6 })} ${n.symbol}` });
+}
+export {
+  L as ApyValue,
+  T as HealthFactorValue,
+  A as LeverageValue,
+  $ as TokenBigint,
+  z as UsdValue,
+  P as UtilizationValue
+};