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

package/dist/esm/components/vertical-indicator/vertical-indicator.js

@@ -1,11 +1,8 @@
-import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { jsxs as t, jsx as e, Fragment as v } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
-import * as v from "react";
-import "@gearbox-protocol/sdk";
-import { cn as r } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import * as b from "react";
+import { cn as n } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 import { HelpTip as V } from "../help-tip/help-tip.js";
 import { Typography as u } from "../typography/typography.js";
@@ -18,8 +15,7 @@ const k = l(
       align: {
         start: "items-start",
         center: "items-center",
-        end: "items-end",
-        baseline: "items-baseline"
+        end: "items-end"
       }
     },
     defaultVariants: { align: "start" }
@@ -65,17 +61,17 @@ const k = l(
     weight: "medium",
     color: "default"
   }
-}), I = v.forwardRef(
+}), z = b.forwardRef(
   ({
     className: h,
     align: p,
-    label: n,
+    label: r,
     description: s,
     valueDescription: o,
     tip: d,
-    value: m,
+    value: c,
     valueTo: a,
-    dimPreviousValue: c = !0,
+    dimPreviousValue: m = !0,
     size: i = "sm",
     weight: x = "medium",
     color: f = "default",
@@ -85,12 +81,12 @@ const k = l(
     "div",
     {
       ref: N,
-      className: r(k({ align: p }), h),
+      className: n(k({ align: p }), h),
       ...y,
       children: [
-        (n || s) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
-          n && /* @__PURE__ */ t("div", { className: r(j({ size: i })), children: [
-            n,
+        (r || s) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
+          r && /* @__PURE__ */ t("div", { className: n(j({ size: i })), children: [
+            r,
             d && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(V, { onPointerEnter: w, children: d }) })
           ] }),
           s && /* @__PURE__ */ e(
@@ -104,11 +100,11 @@ const k = l(
             }
           )
         ] }),
-        m && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
+        c && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
           /* @__PURE__ */ t(
             "div",
             {
-              className: r(
+              className: n(
                 "flex flex-nowrap",
                 "w-full max-w-full grow-0 shrink-0 basis-full",
                 "justify-end items-center"
@@ -117,21 +113,21 @@ const k = l(
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: r(
+                    className: n(
                       g({
                         size: i,
                         weight: x,
-                        color: a && c ? "secondary" : f
+                        color: a && m ? "secondary" : f
                       }),
                       a && "line-through [&_*]:line-through",
-                      a && c && "[&_*]:text-secondary-foreground"
+                      a && m && "[&_*]:text-secondary-foreground"
                     ),
-                    children: m
+                    children: c
                   }
                 ),
-                a && /* @__PURE__ */ t(b, { children: [
+                a && /* @__PURE__ */ t(v, { children: [
                   /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
-                  /* @__PURE__ */ e("span", { className: r(g({ size: i, weight: x, color: f })), children: a })
+                  /* @__PURE__ */ e("span", { className: n(g({ size: i, weight: x, color: f })), children: a })
                 ] })
               ]
             }
@@ -151,8 +147,7 @@ const k = l(
     }
   )
 );
-I.displayName = "VerticalIndicator";
+z.displayName = "VerticalIndicator";
 export {
-  I as VerticalIndicator,
-  k as verticalIndicatorVariants
+  z as VerticalIndicator
 };

package/dist/esm/components/vspace/vspace.js

@@ -1,33 +1,29 @@
 import { jsx as p } from "react/jsx-runtime";
-import { SPACE_HEIGHT as d, SPACE_PX as n } from "../base/spacing.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import { SPACE_HEIGHT as n, SPACE_PX as c } from "./vspace-spacing.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";
-const i = (r, t) => typeof r == "number" ? r : n[r][t];
-function y({
+const e = (r, t) => typeof r == "number" ? r : c[r][t];
+function u({
   size: r,
   mobileSize: t,
   className: o
 }) {
   if (typeof r != "number" && t === void 0)
-    return /* @__PURE__ */ p("div", { className: m(d[r], o), "aria-hidden": !0 });
-  const e = {
-    "--vspace-h": `${i(t ?? r, "mobile")}px`,
-    "--vspace-h-md": `${i(r, "desktop")}px`
+    return /* @__PURE__ */ p("div", { className: m(n[r], o), "aria-hidden": !0 });
+  const d = {
+    "--vspace-h": `${e(t ?? r, "mobile")}px`,
+    "--vspace-h-md": `${e(r, "desktop")}px`
   };
   return /* @__PURE__ */ p(
     "div",
     {
       className: m("h-(--vspace-h) md:h-(--vspace-h-md)", o),
-      style: e,
+      style: d,
       "aria-hidden": !0
     }
   );
 }
 export {
-  y as VSpace
+  u as VSpace
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -1,195 +1,54 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { IconCopy as v } from "@gearbox-protocol/static";
-import { useState as w, useRef as k } from "react";
-import { faCheck as N } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as j } from "../icons/fa-icon.js";
-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";
-import "../accordion/accordion.js";
-import "../alert-badge/alert-badge.js";
-import "../alert-dialog/alert-dialog.js";
-import "../alert-modal/alert-modal.js";
-import "../buttons/back-button/back-button.js";
-import "../buttons/button/button.js";
-import "../buttons/copy-button/copy-button.js";
-import "../buttons/external-button/external-button.js";
-import "../buttons/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
-import "../buttons/tab-button/tab-button.js";
-import "../token-icon/token-icon.js";
-import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { faCheck as y } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as f } from "@gearbox-protocol/static";
+import { FaIcon as h } from "../icons/fa-icon.js";
+import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "../badge/badge.js";
-import "../badge/chip.js";
-import "../base/amount-input/amount-input.js";
-import "../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../table/grid-table.js";
-import "../skeleton/skeleton.js";
-import "../table/table.js";
-import "../token-symbol/token-symbol.js";
-import "../simple-accordion/simple-accordion.js";
-import "../tip-card/tip-card.js";
-import "../typography/typography.js";
-import "../points-icon/points-icon.js";
-import "../vertical-indicator/vertical-indicator.js";
-import "../base/page-title/page-title.js";
-import "../detailed-page-title/detailed-page-title-copy-button.js";
-import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import "../base/details-view/detail-aside/detail-aside-scope.js";
-import "../layout/main-aside-layout/main-aside-layout.js";
-import "../base/details-view/details-view.js";
-import "../fadeout-loading/fadeout-loading.js";
-import "../health-factor/health-factor.js";
-import "../checkbox/checkbox.js";
-import "../checkbox/checkbox-labeled.js";
-import "../select/select.js";
-import "../breakpoint-provider.js";
-import "lightweight-charts";
-import "../graph/formatters.js";
-import "../graph/graph-view.js";
-import "../base/info-portal/info-portal.js";
-import "../edit-input/edit-input.js";
-import "../slider/slider.js";
-import "../slider/slider-context.js";
-import "../text-button/text-button.js";
-import "../with-title/with-title.js";
-import "react-router-dom";
-import "../status-elements/status-elements.js";
-import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import "../modal/modal.js";
-import "@radix-ui/react-dialog";
-import "../dialog/dialog-container.js";
-import "../dialog/dialog-content.js";
-import "../dialog/dialog-description.js";
-import "../dialog/dialog-footer.js";
-import "../dialog/dialog-header.js";
-import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal-container.js";
-import "../dialog/dialog-overlay.js";
-import "viem";
-import "../input/input.js";
-import "../label/label.js";
-import "../simple-dropdown/simple-dropdown.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
-import "../base/tabber/tabber.js";
-import "../link/link.js";
-import "../rounded-image/rounded-image.js";
-import "../network-icon/network-indicator.js";
-import "../base-link/base-link.js";
-import "../help-tip/help-tip.js";
-import "../base-table/base-table-line.js";
-import "../navigation-context/navigation-context.js";
-import "../cards/card/card.js";
-import "../checkbox-item/checkbox-item.js";
-import "../client-adapters/styled-button/styled-button.js";
-import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
-import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
-import "../composites/tx-preview/confirm/dialog/constants.js";
-import "../spinner/spinner.js";
-import "../spinner-loader/spinner-loader.js";
-import "../detailed-apy/detailed-apy.js";
-import "../dropdown-menu/dropdown-menu.js";
-import "../dropdown-menu/dropdown-menu-checkbox-item.js";
-import "../dropdown-menu/dropdown-menu-content.js";
-import "../dropdown-menu/dropdown-menu-item.js";
-import "../dropdown-menu/dropdown-menu-label.js";
-import "../dropdown-menu/dropdown-menu-radio-item.js";
-import "../dropdown-menu/dropdown-menu-separator.js";
-import "../dropdown-menu/dropdown-menu-shortcut.js";
-import "../dropdown-menu/dropdown-menu-sub-content.js";
-import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import "../filter/filter-block.js";
-import "../filter/filter-checkbox-item.js";
-import "../filter/filter-chip.js";
-import "../filter/filter-chips.js";
-import "../filter/filter-dropdown-item.js";
-import "../filter/filter-group.js";
-import "../filter/filter-label.js";
-import "../search-line/search-line.js";
-import "../tabs/tabs.js";
-import "../filter/filter-modal-item.js";
-import "../filter/filter-radio-item.js";
-import "../filter/filter-separator.js";
-import "../filter/variants.js";
-import "../icon-button/icon-button.js";
-import "../layout/app-footer/app-footer.js";
-import "../layout/app-header/app-header.js";
-import "../layout/col/col.js";
-import "../layout/container/container.js";
-import "../layout/grid/grid.js";
-import "../layout/layout/layout.js";
-import "../legal-agreement/legal-agreement-theme.js";
-import "../loader/loader.js";
-import "../loading/loading.js";
-import "../loading-bar/loading-bar.js";
-import "../segmented-control/segmented-control.js";
-import "../separate-line/separate-line.js";
-import "../split-list/split-list.js";
-import "../status-dot/status-dot.js";
-import "../textarea/textarea.js";
-import "../theme-provider.js";
-function tr({
-  toCopy: u,
-  children: d,
-  onCopySuccess: f,
-  iconSize: o = 14,
-  icon: y,
-  className: h,
-  buttonClassName: x,
-  successDuration: b = 1500,
-  trigger: r = "button",
-  tooltip: a
+import { useCopyToClipboard as x } from "../../hooks/use-copy-to-clipboard.js";
+import { cn as a } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+const e = 14;
+function E({
+  toCopy: l,
+  children: p,
+  trigger: o = "button",
+  tooltip: r
 }) {
-  const [p, s] = w(!1), m = k(null), e = async () => {
-    try {
-      await navigator.clipboard.writeText(u), m.current && clearTimeout(m.current), s(!0), m.current = setTimeout(() => {
-        s(!1);
-      }, b), f?.();
-    } catch (n) {
-      console.error("Failed to copy:", n);
-    }
-  }, C = (n) => {
-    n.key === "Enter" && e();
-  }, c = () => (
+  const { isCopied: i, copy: m } = x(), n = () => m(l), u = (d) => {
+    d.key === "Enter" && n();
+  }, s = () => (
     // biome-ignore lint/a11y/noStaticElementInteractions: Root should be clickable and shouldn't be a button
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "div",
       {
-        className: i("group flex items-center min-w-0", h),
-        onClick: r === "root" ? e : void 0,
-        onKeyDown: r === "root" ? C : void 0,
-        role: r === "root" ? "button" : void 0,
+        className: "group flex items-center min-w-0",
+        onClick: o === "root" ? n : void 0,
+        onKeyDown: o === "root" ? u : void 0,
+        role: o === "root" ? "button" : void 0,
         children: [
-          /* @__PURE__ */ t("span", { className: "truncate", children: d }),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ t("span", { className: "truncate", children: p }),
+          /* @__PURE__ */ c(
             "button",
             {
               type: "button",
-              onClick: r === "button" ? e : void 0,
-              className: i(
-                "ml-1 cursor-pointer relative flex-shrink-0",
-                x
-              ),
-              style: { width: o, height: o },
-              title: p ? "Copied!" : "Copy to clipboard",
+              onClick: o === "button" ? n : void 0,
+              className: "ml-1 cursor-pointer relative flex-shrink-0",
+              style: { width: e, height: e },
+              title: i ? "Copied!" : "Copy to clipboard",
               children: [
                 /* @__PURE__ */ t(
                   "span",
                   {
-                    className: i(
+                    className: a(
                       "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                      p ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                      i ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
                     ),
                     children: /* @__PURE__ */ t(
-                      j,
+                      h,
                       {
-                        icon: N,
-                        style: { fontSize: o },
+                        icon: y,
+                        style: { fontSize: e },
                         className: "block"
                       }
                     )
@@ -198,11 +57,11 @@ function tr({
                 /* @__PURE__ */ t(
                   "span",
                   {
-                    className: i(
+                    className: a(
                       "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                      p ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 group-hover:text-white"
+                      i ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 group-hover:text-white"
                     ),
-                    children: y ?? /* @__PURE__ */ t(v, { size: o })
+                    children: /* @__PURE__ */ t(f, { size: e })
                   }
                 )
               ]
@@ -212,8 +71,8 @@ function tr({
       }
     )
   );
-  return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
+  return r ? /* @__PURE__ */ t(C, { placement: "top", triangle: !0, title: s(), children: r }) : s();
 }
 export {
-  tr as WithCopy
+  E as WithCopy
 };

package/dist/esm/components/yield-breakdown-tooltip/index.js

@@ -1,4 +1,4 @@
-import { YieldBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
+import { ApyBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
 export {
-  r as YieldBreakdownTooltip
+  r as ApyBreakdownTooltip
 };

package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js

@@ -1,165 +1,31 @@
-import { jsxs as a, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { PointsIcon as N } from "../points-icon/points-icon.js";
-import { TokenIcon as P } from "../token-icon/token-icon.js";
-import { SimpleTooltip as A } from "../tooltip/simple-tooltip.js";
+import { jsx as l } from "react/jsx-runtime";
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as o } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { SimpleTooltip as f } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "react";
-import { tokenRewardsOf as I, pointProgramsOf as B, totalApyOf as T } from "../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk";
-import { bpsToPercent as $ } from "../../utils/bps.js";
-import { cn as p } from "../../utils/cn.js";
-import "sonner";
-import { formatLeverage as j } from "../../utils/format-leverage.js";
-import { formatCompactPercent as R } from "../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-function i(n) {
-  const o = $(n), r = R(Math.abs(o));
-  return o < 0 ? `-${r}` : r;
-}
-function U({
-  supplyApy: n,
-  maxLeverage: o,
-  collateralApy: r,
-  borrowApy: c,
-  additionalBorrowApy: u,
-  children: h,
-  className: f
+function W({
+  title: t,
+  children: i,
+  placement: r = "left",
+  open: m,
+  className: p,
+  triggerClassName: e
 }) {
-  const g = o !== void 0 && o > 0, l = r ?? n, w = I(l), y = B(n), b = T(n), d = c != null || u != null ? -((c ?? 0) + (u ?? 0)) : void 0, x = y.filter((t) => t.multiplier != null), v = /* @__PURE__ */ a(
-    "div",
-    {
-      className: p(
-        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
-        "rounded-xl",
-        "bg-card text-card-foreground",
-        "border border-border",
-        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
-        "text-left font-normal"
-      ),
-      children: [
-        /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3", children: [
-          /* @__PURE__ */ e("span", { className: "text-base font-semibold leading-4 text-foreground", children: g ? /* @__PURE__ */ e(
-            s,
-            {
-              messageId: "components.yieldBreakdown.titleNetAtLeverage",
-              values: {
-                leverage: j(o)
-              }
-            }
-          ) : /* @__PURE__ */ e(s, { messageId: "components.apyParts.totalAPY" }) }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: p(
-                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
-                b > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
-              ),
-              children: i(b)
-            }
-          )
-        ] }),
-        l.organicApy != null && /* @__PURE__ */ e(
-          m,
-          {
-            muted: l.organicApy < 0,
-            label: /* @__PURE__ */ e(s, { messageId: "components.yieldBreakdown.collateralApy" }),
-            value: i(l.organicApy)
-          }
-        ),
-        w.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
-          m,
-          {
-            muted: t.supplyApr < 0,
-            label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                s,
-                {
-                  messageId: "components.apyParts.extraAPY",
-                  values: { symbol: t.token.symbol }
-                }
-              ) }),
-              /* @__PURE__ */ e(P, { token: t.token, size: 20 })
-            ] }),
-            value: i(t.supplyApr)
-          },
-          `incentive-${t.token.address}-${t.supplyApr}`
-        )),
-        g && d != null && /* @__PURE__ */ e(
-          m,
-          {
-            muted: d < 0,
-            label: /* @__PURE__ */ e(s, { messageId: "components.yieldBreakdown.borrowRate" }),
-            value: i(d)
-          }
-        ),
-        x.length > 0 && /* @__PURE__ */ a(k, { children: [
-          /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
-          x.map((t) => /* @__PURE__ */ e(
-            m,
-            {
-              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  s,
-                  {
-                    messageId: "components.yieldBreakdown.programPoints",
-                    values: { name: t.name }
-                  }
-                ) }),
-                /* @__PURE__ */ e(
-                  N,
-                  {
-                    reward: {
-                      name: t.name,
-                      type: t.id
-                    },
-                    size: 20
-                  }
-                )
-              ] }),
-              value: `${t.multiplier}×`
-            },
-            `points-${t.id}`
-          ))
-        ] })
-      ]
-    }
-  );
-  return /* @__PURE__ */ e(
-    A,
+  return /* @__PURE__ */ l(
+    f,
     {
-      placement: "bottom",
+      placement: r,
       triangle: !1,
       type: "modal-tooltip",
-      minWidth: "100%",
-      maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: f, children: h }),
-      triggerClassName: f,
-      children: v
+      minWidth: o,
+      maxWidth: o,
+      title: t,
+      open: m,
+      className: p,
+      triggerClassName: e,
+      children: i
     }
   );
 }
-function m({
-  label: n,
-  value: o,
-  muted: r = !1
-}) {
-  return /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3 text-sm leading-5", children: [
-    /* @__PURE__ */ e("span", { className: "min-w-0 font-normal text-muted-foreground", children: n }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: p(
-          "shrink-0 font-semibold tabular-nums",
-          r ? "text-muted-foreground" : "text-foreground"
-        ),
-        children: o
-      }
-    )
-  ] });
-}
 export {
-  U as YieldBreakdownTooltip
+  W as ApyBreakdownTooltip
 };