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

package/dist/esm/components/base/apy-breakdown-body/apy-breakdown-body.js

@@ -0,0 +1,110 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { cn as i } from "../../../utils/cn.js";
+import { bpsToPercent as l } from "../../../utils/internal/bps-to-percent.js";
+const x = "—", p = "400px";
+function b(e, n, t) {
+  return e === "7d" ? t : n;
+}
+function g(e, n = !1) {
+  const t = l(e), s = `${Math.abs(t).toFixed(2)}%`;
+  return n && t < 0 ? `−${s}` : s;
+}
+function h(e) {
+  return Number(Math.abs(l(e)).toFixed(2));
+}
+function N({
+  title: e,
+  chip: n,
+  chipPositive: t = !1,
+  chipTestId: s,
+  children: r,
+  testId: o
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "flex w-full min-w-0 flex-col gap-4 rounded-xl border border-border bg-card p-4",
+      "data-testid": o,
+      children: [
+        /* @__PURE__ */ d("div", { className: "flex min-h-6 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ a("span", { className: "min-w-0 text-base font-semibold leading-5 text-foreground", children: e }),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: i(
+                "shrink-0 rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
+                t ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
+              ),
+              "data-testid": s,
+              children: n
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: r })
+      ]
+    }
+  );
+}
+function w({
+  label: e,
+  value: n,
+  subtext: t,
+  muted: s = !1,
+  testId: r,
+  valueTestId: o,
+  captionTestId: c
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "flex items-start justify-between gap-3",
+      "data-testid": r,
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: i(
+              "min-w-0 text-sm font-semibold leading-5",
+              s ? "text-muted-foreground" : "text-foreground"
+            ),
+            children: e
+          }
+        ),
+        /* @__PURE__ */ d("span", { className: "flex shrink-0 flex-col items-end", children: [
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: i(
+                "text-sm font-semibold leading-5 tabular-nums",
+                s ? "text-muted-foreground" : "text-foreground"
+              ),
+              "data-testid": o,
+              children: n
+            }
+          ),
+          t != null ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "text-xs leading-4 text-muted-foreground",
+              "data-testid": c,
+              children: t
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function y() {
+  return /* @__PURE__ */ a("div", { className: "h-px w-full bg-divider" });
+}
+export {
+  p as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  N as ApyBreakdownBody,
+  y as ApyBreakdownDivider,
+  w as ApyBreakdownRow,
+  x as BREAKDOWN_DASH,
+  h as breakdownRateValue,
+  g as formatBreakdownRate,
+  b as periodMessageId
+};

package/dist/esm/components/base/apy-breakdown-body/index.js

@@ -0,0 +1,11 @@
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as a, ApyBreakdownBody as r, ApyBreakdownDivider as d, ApyBreakdownRow as A, BREAKDOWN_DASH as B, breakdownRateValue as w, formatBreakdownRate as k, periodMessageId as n } from "./apy-breakdown-body.js";
+export {
+  a as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  r as ApyBreakdownBody,
+  d as ApyBreakdownDivider,
+  A as ApyBreakdownRow,
+  B as BREAKDOWN_DASH,
+  w as breakdownRateValue,
+  k as formatBreakdownRate,
+  n as periodMessageId
+};

package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js

@@ -5,15 +5,11 @@ import { FormattedMessageTyped as e } from "../../typed-intl/index.js";
 import { Typography as d } from "../../typography/typography.js";
 import { VSpace as f } from "../../vspace/vspace.js";
 import { InfoList as b, InfoLine as i } from "../info-list/info-list.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import "../../help-tip/help-tip.js";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-import "../../points-icon/points-icon.js";
 import { ApyValue as a } from "../values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
@@ -24,7 +20,7 @@ function p(t) {
 function u(t) {
   return typeof t == "number" ? t : t?.base;
 }
-function q({
+function j({
   data: t,
   dataTo: r
 }) {
@@ -85,6 +81,6 @@ function q({
   ) }) });
 }
 export {
-  q as BorrowRateBlock,
+  j as BorrowRateBlock,
   n as BorrowRateBlockTest
 };

package/dist/esm/components/base/borrow-rate-block/constants.js

@@ -1,8 +1,8 @@
-class t {
-  static root = "borrow-rate-block-root";
-  static trigger = "borrow-rate-block-trigger";
-  static details = "borrow-rate-block-details";
-}
+const o = {
+  root: "borrow-rate-block-root",
+  trigger: "borrow-rate-block-trigger",
+  details: "borrow-rate-block-details"
+};
 export {
-  t as BorrowRateBlockTest
+  o as BorrowRateBlockTest
 };

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

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

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

@@ -1,8 +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";
-}
+const t = {
+  root: "chart-with-side-card-root",
+  chart: "chart-with-side-card-chart",
+  side: "chart-with-side-card-side"
+};
 export {
-  a as ChartWithSideCardTest
+  t as ChartWithSideCardTest
 };

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

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

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

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { faCheck as p } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as m } from "@gearbox-protocol/static";
+import * as f from "react";
+import { IconButton as d } from "../../icon-button/icon-button.js";
+import { FaIcon as u } from "../../icons/fa-icon.js";
+import { SimpleTooltip as y } from "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import { FormattedMessageTyped as C } from "../../typed-intl/index.js";
+import { useCopyToClipboard as x } from "../../../hooks/use-copy-to-clipboard.js";
+import { useIsMobile as g } from "../../../hooks/use-media-query.js";
+import { cn as i } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../../utils/z-index.js";
+const T = f.forwardRef(function({ toCopy: t, className: r }, s) {
+  const n = g(), { isCopied: o, copy: a } = x(), c = n ? 32 : 40;
+  return t ? /* @__PURE__ */ e(
+    y,
+    {
+      title: /* @__PURE__ */ l(
+        d,
+        {
+          ref: s,
+          buttonType: "outlined",
+          size: c,
+          onClick: () => t && a(t),
+          title: o ? "Copied!" : void 0,
+          className: i("relative", r),
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: i(
+                  "absolute inset-0 flex items-center justify-center transition-all duration-200",
+                  o ? "opacity-100 scale-100 text-success" : "opacity-0 scale-50 text-foreground"
+                ),
+                children: /* @__PURE__ */ e(u, { icon: p, className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: i(
+                  "flex items-center justify-center transition-all duration-200 text-foreground",
+                  o ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                ),
+                children: /* @__PURE__ */ e(m, { size: 15 })
+              }
+            )
+          ]
+        }
+      ),
+      placement: "top",
+      children: /* @__PURE__ */ e(C, { messageId: "components.openCopyButtons.copy" })
+    }
+  ) : null;
+});
+T.displayName = "DetailedPageTitleCopyButton";
+export {
+  T as DetailedPageTitleCopyButton
+};

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

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

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

@@ -1,13 +1,12 @@
-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";
-}
+const e = {
+  root: "details-view-root",
+  leftPane: "details-view-left-pane",
+  managePane: "details-view-manage-pane"
+}, t = {
+  root: "detail-aside-wrapper-root",
+  stickyContent: "detail-aside-wrapper-sticky-content"
+};
 export {
-  a as DetailAsideWrapperTest,
+  t as DetailAsideWrapperTest,
   e as DetailsViewTest
 };

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

@@ -1,42 +1,38 @@
 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 { MainAsideLayout as p } from "../../../layout/main-aside-layout/main-aside-layout.js";
+import { cn as r } from "../../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 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
+function y({
+  children: o,
+  aside: e,
+  mainRef: t,
+  asidePosition: a,
+  centeredMain: m,
+  className: A,
+  asideClassName: s,
+  mainClassName: l
 }) {
-  const l = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
+  const n = e != null ? /* @__PURE__ */ i(f, { children: e }) : null;
   return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
-    n,
+    p,
     {
-      className: o(c, p),
-      asideClassName: o(d, A),
-      mainClassName: s,
-      mainRef: e,
-      aside: l,
-      asidePosition: m,
-      centeredMain: a,
+      className: r(c, A),
+      asideClassName: r(d, s),
+      mainClassName: l,
+      mainRef: t,
+      aside: n,
+      asidePosition: a,
+      centeredMain: m,
       variant: "detail",
       stickyAside: !1,
-      children: t
+      children: o
     }
   ) });
 }
 export {
-  x as DetailAsideScreenLayout
+  y as DetailAsideScreenLayout
 };

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

@@ -1,7 +1,7 @@
 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 { isTabber as A } from "../tabber/is-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";

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

@@ -1,12 +1,10 @@
 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";
+import { DetailsView as o, DetailsViewLeftPane as r, DetailsViewManagePane as s } from "./details-view.js";
+import { DetailsViewTest as n } from "./constants.js";
 export {
   t as AsideAlignAnchor,
-  o as DetailAsideScreenLayout,
-  s as DetailsView,
-  l as DetailsViewLeftPane,
-  n as DetailsViewManagePane,
-  D as DetailsViewTest
+  o as DetailsView,
+  r as DetailsViewLeftPane,
+  s as DetailsViewManagePane,
+  n as DetailsViewTest
 };

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

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

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

@@ -1,52 +1,67 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useTitleText as h } from "../text/use-title-text.js";
-import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthFactor as c } from "../../health-factor/health-factor.js";
-import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
-import { VerticalIndicator as g } from "../../vertical-indicator/vertical-indicator.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useTitleText as g } from "../text/use-title-text.js";
+import { FadeoutLoading as c } from "../../fadeout-loading/fadeout-loading.js";
+import { HealthFactor as m } from "../../health-factor/health-factor.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as x } from "../../vertical-indicator/vertical-indicator.js";
 import { HealthFactorBlockTest as t } from "./constants.js";
-function b({
-  healthFactor: e,
-  healthFactorTo: a,
-  debt: r,
-  debtTo: p,
-  zone: i,
-  isLoading: l,
+function N({
+  healthFactor: a,
+  healthFactorTo: i,
+  debt: l,
+  debtTo: u,
+  approximate: r,
+  zone: n,
+  isLoading: s,
   title: d,
-  tip: u,
-  testId: v
+  tip: v,
+  testId: f
 }) {
-  const f = h(), m = a !== void 0;
-  return /* @__PURE__ */ o(
-    g,
+  const h = g(), o = i !== void 0;
+  return /* @__PURE__ */ e(
+    x,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": v ?? t.root,
-      label: d !== void 0 ? f(d) : /* @__PURE__ */ o(n, { messageId: "components.healthFactorBlock.label" }),
-      tip: u ?? /* @__PURE__ */ o(n, { messageId: "components.healthFactorBlock.tip" }),
-      value: /* @__PURE__ */ o(s, { loading: l, children: e === void 0 ? /* @__PURE__ */ o("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ o(
-        c,
+      "data-testid": f ?? t.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.label" }),
+      tip: v ?? /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.tip" }),
+      value: /* @__PURE__ */ e(c, { loading: s, children: a === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ e(
+        "span",
         {
-          value: e,
-          debt: r,
-          zone: m ? void 0 : i,
-          "data-testid": t.value
+          className: "inline-flex items-center",
+          "data-testid": t.value,
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: a,
+              debt: l,
+              zone: o ? void 0 : n,
+              approximate: r && !o
+            }
+          )
         }
       ) }),
-      valueTo: m ? /* @__PURE__ */ o(s, { loading: l, children: /* @__PURE__ */ o(
-        c,
+      valueTo: o ? /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e(
+        "span",
         {
-          value: a,
-          debt: p ?? r,
-          zone: i,
-          "data-testid": t.valueTo
+          className: "inline-flex items-center",
+          "data-testid": t.valueTo,
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: i,
+              debt: u ?? l,
+              zone: n,
+              approximate: r
+            }
+          )
         }
       ) }) : void 0
     }
   );
 }
 export {
-  b as HealthFactorBlock,
+  N as HealthFactorBlock,
   t as HealthFactorBlockTest
 };