@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.40

package/dist/esm/components/assets-list-cell/assets-list-cell.js

@@ -1,210 +1,211 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { IconExternal as O } from "@gearbox-protocol/static";
-import { useMemo as M } from "react";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { IconExternal as R } from "@gearbox-protocol/static";
+import { useMemo as S } from "react";
 import "../buttons/back-button/back-button.js";
-import { Button as A } from "../buttons/button/button.js";
+import { Button as $ } from "../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 "@gearbox-protocol/sdk";
-import { cn as g } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as T } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
-import { TokenIcon as I } from "../token-icon/token-icon.js";
-import { SimpleTooltip as w } from "../tooltip/simple-tooltip.js";
+import { CollateralAllocationTooltip as B } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
+import { TokenIcon as j } from "../token-icon/token-icon.js";
+import { SimpleTooltip as M } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-function H(t) {
+function z(t, n) {
+  return t ? /* @__PURE__ */ e(B, { data: t, children: n }) : n;
+}
+function O({
+  count: t,
+  iconSize: n,
+  onOtherClick: o,
+  otherTooltip: i,
+  fallbackTooltip: d
+}) {
+  const l = T(
+    "inline-flex items-center justify-center rounded-full shrink-0",
+    "bg-gray-50 text-foreground ml-1!",
+    o && "cursor-pointer hover:bg-gray-70 transition-colors"
+  ), c = {
+    width: n,
+    height: n,
+    minWidth: n,
+    minHeight: n,
+    zIndex: 0
+  }, u = /* @__PURE__ */ p("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
+    "+",
+    t
+  ] });
+  return !o && !i ? /* @__PURE__ */ e("span", { className: l, style: c, children: u }) : /* @__PURE__ */ e(M, { title: o ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: o,
+      className: l,
+      style: c,
+      children: u
+    }
+  ) : /* @__PURE__ */ e("span", { className: l, style: c, children: u }), placement: "top", children: i || d });
+}
+function E(t) {
   return "balances" in t && t.balances !== void 0;
 }
-function R(t) {
+function H(t) {
   return "tokens" in t && t.tokens !== void 0;
 }
 function W({
   assetAddress: t,
-  symbol: i,
+  symbol: n,
   iconSymbol: o,
-  comment: r,
-  explorerUrl: a,
-  iconSize: u = 24,
-  className: f
+  comment: i,
+  explorerUrl: d,
+  iconSize: l = 24,
+  className: c
 }) {
-  return /* @__PURE__ */ m("div", { className: g("flex items-center gap-3", f), children: [
-    /* @__PURE__ */ e(I, { token: o ?? i, size: u }),
-    /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e("div", { className: "font-medium", children: i }),
-      r && /* @__PURE__ */ m("div", { className: "text-md text-muted-foreground", children: [
+  return /* @__PURE__ */ p("div", { className: T("flex items-center gap-3", c), children: [
+    /* @__PURE__ */ e(j, { token: o ?? n, size: l }),
+    /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e("div", { className: "font-medium", children: n }),
+      i && /* @__PURE__ */ p("div", { className: "text-md text-muted-foreground", children: [
         "(",
-        r,
+        i,
         ")"
       ] }),
-      a && /* @__PURE__ */ e(
-        A,
+      d && /* @__PURE__ */ e(
+        $,
         {
           variant: "ghost",
           size: "sm",
           className: "text-muted-foreground hover:text-foreground p-0 h-auto",
-          onClick: () => window.open(`${a}/address/${t}`, "_blank"),
-          children: /* @__PURE__ */ e(O, { size: 12, className: "size-3" })
+          onClick: () => window.open(`${d}/address/${t}`, "_blank"),
+          children: /* @__PURE__ */ e(R, { size: 12, className: "size-3" })
         }
       )
     ] })
   ] });
 }
-function $({
+function _({
   balances: t,
-  tokensList: i,
+  tokensList: n,
   maxAssets: o = 3,
-  iconSize: r = 24,
-  options: a,
-  className: u
+  iconSize: i = 24,
+  options: d,
+  className: l
 }) {
   const {
-    mode: f = "default",
-    showIconTooltip: y = !0,
-    otherTooltip: N,
-    onOtherClick: x
-  } = a || {}, k = f === "cascade", [b, T, C, d] = M(() => {
-    const n = t, s = n.slice(0, o), l = n.slice(o), h = l.map((p) => {
-      const v = typeof p == "string" ? p : p.token;
-      return i[v]?.title || i[v]?.symbol || "unknown";
-    }).join(", "), c = n.length > o;
-    return [s, l, h, c];
-  }, [t, o, i]);
-  return /* @__PURE__ */ m("div", { className: g("relative inline-flex items-center", u), children: [
-    b.map((n, s, l) => {
-      const h = typeof n == "string" ? n : n.token, c = i[h], p = s === l.length - 1, v = k ? l.length - s : void 0, j = /* @__PURE__ */ e(I, { token: c, size: r });
-      return /* @__PURE__ */ e(
-        "div",
-        {
-          className: "flex-shrink-0 flex",
-          style: {
-            zIndex: v,
-            marginRight: p ? 0 : k ? -Math.round(r * 0.5) : 4
-          },
-          children: y ? /* @__PURE__ */ e(
-            w,
-            {
-              title: /* @__PURE__ */ e("span", { className: "inline-flex", children: j }),
-              placement: "top",
-              children: c?.title || c?.symbol || "unknown"
-            }
-          ) : j
-        },
-        h ?? s
-      );
-    }),
-    d && /* @__PURE__ */ e(
-      w,
-      {
-        title: /* @__PURE__ */ e(
-          "button",
+    mode: c = "default",
+    showIconTooltip: u = !0,
+    otherTooltip: x,
+    onOtherClick: v,
+    allocation: g
+  } = d || {}, w = c === "cascade", k = u && !g, [y, C, I, h] = S(() => {
+    const s = t, r = s.slice(0, o), a = s.slice(o), f = a.map((b) => {
+      const N = typeof b == "string" ? b : b.token;
+      return n[N]?.title || n[N]?.symbol || "unknown";
+    }).join(", "), m = s.length > o;
+    return [r, a, f, m];
+  }, [t, o, n]);
+  return z(
+    g,
+    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", l), children: [
+      y.map((s, r, a) => {
+        const f = typeof s == "string" ? s : s.token, m = n[f], b = r === a.length - 1, N = w ? a.length - r : void 0, A = /* @__PURE__ */ e(j, { token: m, size: i });
+        return /* @__PURE__ */ e(
+          "div",
           {
-            type: "button",
-            onClick: x,
-            className: g(
-              "inline-flex items-center justify-center rounded-full shrink-0",
-              "cursor-pointer",
-              "bg-gray-50 hover:bg-gray-70 text-foreground transition-colors",
-              "ml-1!"
-            ),
+            className: "flex-shrink-0 flex",
             style: {
-              width: r,
-              height: r,
-              minWidth: r,
-              minHeight: r,
-              zIndex: 0
+              zIndex: N,
+              marginRight: b ? 0 : w ? -Math.round(i * 0.5) : 4
             },
-            children: /* @__PURE__ */ m("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
-              "+",
-              T.length
-            ] })
-          }
-        ),
-        placement: "top",
-        children: N || C
-      }
-    )
-  ] });
+            children: k ? /* @__PURE__ */ e(
+              M,
+              {
+                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: A }),
+                placement: "top",
+                children: m?.title || m?.symbol || "unknown"
+              }
+            ) : A
+          },
+          f ?? r
+        );
+      }),
+      h && /* @__PURE__ */ e(
+        O,
+        {
+          count: C.length,
+          iconSize: i,
+          onOtherClick: v,
+          otherTooltip: x,
+          fallbackTooltip: I
+        }
+      )
+    ] })
+  );
 }
-function B({
+function q({
   tokens: t,
-  maxAssets: i = 3,
+  maxAssets: n = 3,
   iconSize: o = 24,
-  options: r,
-  className: a
+  options: i,
+  className: d
 }) {
   const {
-    mode: u = "default",
-    showIconTooltip: f = !0,
-    otherTooltip: y,
-    onOtherClick: N
-  } = r || {}, x = u === "cascade", [k, b, T, C] = M(() => {
-    const d = t.slice(0, i), n = t.slice(i), s = n.map((l) => l.symbol || "unknown").join(", ");
-    return [d, n, s, t.length > i];
-  }, [t, i]);
-  return /* @__PURE__ */ m("div", { className: g("relative inline-flex items-center", a), children: [
-    k.map((d, n, s) => {
-      const l = n === s.length - 1, h = x ? s.length - n : void 0, c = /* @__PURE__ */ e(I, { token: d, size: o });
-      return /* @__PURE__ */ e(
-        "div",
-        {
-          className: "flex-shrink-0 flex",
-          style: {
-            zIndex: h,
-            marginRight: l ? 0 : x ? -Math.round(o * 0.5) : 4
-          },
-          children: f ? /* @__PURE__ */ e(
-            w,
-            {
-              title: /* @__PURE__ */ e("span", { className: "inline-flex", children: c }),
-              placement: "top",
-              children: d.symbol || "unknown"
-            }
-          ) : c
-        },
-        d.address ?? n
-      );
-    }),
-    C && /* @__PURE__ */ e(
-      w,
-      {
-        title: /* @__PURE__ */ e(
-          "button",
+    mode: l = "default",
+    showIconTooltip: c = !0,
+    otherTooltip: u,
+    onOtherClick: x,
+    allocation: v
+  } = i || {}, g = l === "cascade", w = c && !v, [k, y, C, I] = S(() => {
+    const h = t.slice(0, n), s = t.slice(n), r = s.map((a) => a.symbol || "unknown").join(", ");
+    return [h, s, r, t.length > n];
+  }, [t, n]);
+  return z(
+    v,
+    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", d), children: [
+      k.map((h, s, r) => {
+        const a = s === r.length - 1, f = g ? r.length - s : void 0, m = /* @__PURE__ */ e(j, { token: h, size: o });
+        return /* @__PURE__ */ e(
+          "div",
           {
-            type: "button",
-            onClick: N,
-            className: g(
-              "inline-flex items-center justify-center rounded-full shrink-0",
-              "cursor-pointer",
-              "bg-gray-50 hover:bg-gray-70 text-foreground transition-colors",
-              "ml-1!"
-            ),
+            className: "flex-shrink-0 flex",
             style: {
-              width: o,
-              height: o,
-              minWidth: o,
-              minHeight: o,
-              zIndex: 0
+              zIndex: f,
+              marginRight: a ? 0 : g ? -Math.round(o * 0.5) : 4
             },
-            children: /* @__PURE__ */ m("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
-              "+",
-              b.length
-            ] })
-          }
-        ),
-        placement: "top",
-        children: y || T
-      }
-    )
-  ] });
+            children: w ? /* @__PURE__ */ e(
+              M,
+              {
+                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: m }),
+                placement: "top",
+                children: h.symbol || "unknown"
+              }
+            ) : m
+          },
+          h.address ?? s
+        );
+      }),
+      I && /* @__PURE__ */ e(
+        O,
+        {
+          count: y.length,
+          iconSize: o,
+          onOtherClick: x,
+          otherTooltip: u,
+          fallbackTooltip: C
+        }
+      )
+    ] })
+  );
 }
-function et(t) {
-  return R(t) ? /* @__PURE__ */ e(B, { ...t }) : H(t) ? /* @__PURE__ */ e($, { ...t }) : /* @__PURE__ */ e(W, { ...t });
+function rt(t) {
+  return H(t) ? /* @__PURE__ */ e(q, { ...t }) : E(t) ? /* @__PURE__ */ e(_, { ...t }) : /* @__PURE__ */ e(W, { ...t });
 }
 export {
-  et as AssetsListCell
+  rt as AssetsListCell
 };

package/dist/esm/components/badge/badge.js

@@ -1,13 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
 import "react";
-import "@gearbox-protocol/sdk";
-import { cn as i } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const a = n(
+const d = n(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-auto",
   {
     variants: {
@@ -15,7 +14,13 @@ const a = n(
         default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "border-input text-foreground"
+        outline: "border-input text-foreground",
+        success: "border-transparent bg-emerald-500/15 font-medium text-emerald-400 hover:bg-emerald-500/15",
+        info: "border-transparent bg-blue-500/15 font-medium text-blue-400 hover:bg-blue-500/15",
+        warning: "border-transparent bg-amber-500/15 font-medium text-amber-400 hover:bg-amber-500/15",
+        danger: "border-transparent bg-red-500/15 font-medium text-red-400 hover:bg-red-500/15",
+        accent: "border-transparent bg-purple-500/15 font-medium text-purple-400 hover:bg-purple-500/15",
+        neutral: "border-transparent font-medium"
       }
     },
     defaultVariants: {
@@ -23,10 +28,10 @@ const a = n(
     }
   }
 );
-function v({ className: r, variant: t, ...o }) {
-  return /* @__PURE__ */ e("div", { className: i(a({ variant: t }), r), ...o });
+function c({ className: r, variant: e, ...t }) {
+  return /* @__PURE__ */ o("div", { className: a(d({ variant: e }), r), ...t });
 }
 export {
-  v as Badge,
-  a as badgeVariants
+  c as Badge,
+  d as badgeVariants
 };

package/dist/esm/components/badge/chip.js

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import "../../utils/z-index.js";
+import { Badge as p } from "./badge.js";
+class s {
+  static root = "chip-root";
+}
+class e {
+  static root = "chips-root";
+  static chip = s.root;
+}
+function x({
+  children: t,
+  tone: o = "neutral",
+  className: a
+}) {
+  return /* @__PURE__ */ r(
+    p,
+    {
+      variant: o,
+      className: i("shrink-0", a),
+      "data-testid": s.root,
+      children: t
+    }
+  );
+}
+function C({ children: t, className: o }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("flex shrink-0 items-center gap-x-2", o),
+      "data-testid": e.root,
+      children: t
+    }
+  );
+}
+export {
+  x as Chip,
+  s as ChipTest,
+  C as Chips,
+  e as ChipsTest
+};

package/dist/esm/components/badge/index.js

@@ -1,5 +1,10 @@
-import { Badge as r, badgeVariants as d } from "./badge.js";
+import { Badge as i, badgeVariants as r } from "./badge.js";
+import { Chip as t, ChipTest as a, Chips as h, ChipsTest as o } from "./chip.js";
 export {
-  r as Badge,
-  d as badgeVariants
+  i as Badge,
+  t as Chip,
+  a as ChipTest,
+  h as Chips,
+  o as ChipsTest,
+  r as badgeVariants
 };

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

@@ -4,7 +4,6 @@ import { useState as x, useEffect as q } from "react";
 import { useTitleText as G } from "../text/use-title-text.js";
 import { Modal as H } from "../../modal/modal.js";
 import { useIntlTyped as J, FormattedMessageTyped as K } from "../../typed-intl/index.js";
-import "@gearbox-protocol/sdk/common-utils";
 import { useIsMobile as Q } from "../../../hooks/use-media-query.js";
 import { bnToInputView as M } from "../../../utils/bn-to-input-view.js";
 import { cn as R } from "../../../utils/cn.js";
@@ -44,12 +43,12 @@ const Y = g(
     defaultVariants: { size: "md" }
   }
 );
-function ge({
+function xe({
   amount: t,
   onAmount: s,
   token: r,
   tokens: n,
-  onToken: o,
+  onToken: a,
   balance: u,
   balances: B,
   usdPrices: j,
@@ -57,7 +56,7 @@ function ge({
   maxLabel: v,
   usdPrice: b,
   size: A,
-  disabled: a = !1,
+  disabled: o = !1,
   testId: D
 }) {
   const O = J(), y = G(), U = Q(), i = A ?? (U ? "sm" : "md"), l = r.decimals, [p, w] = x(
@@ -70,8 +69,8 @@ function ge({
   const $ = (d) => {
     const [F, V] = S(d.target.value, l);
     F === null || V === null || (w(V), s(F));
-  }, I = !!(n && n.length > 1 && o && !a), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
-    o?.(d), f(!1);
+  }, I = !!(n && n.length > 1 && a && !o), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
+    a?.(d), f(!1);
   }, C = () => f(!1);
   return /* @__PURE__ */ c(L, { children: [
     /* @__PURE__ */ c(
@@ -79,7 +78,7 @@ function ge({
       {
         "data-testid": D ?? m.root,
         "data-active": P,
-        "data-disabled": a,
+        "data-disabled": o,
         className: Y({ size: i }),
         children: [
           /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
@@ -100,7 +99,7 @@ function ge({
                 title: v !== void 0 ? y(v) : void 0,
                 token: r,
                 balance: u,
-                disabled: a,
+                disabled: o,
                 onMax: () => s(u)
               }
             ) : null
@@ -120,7 +119,7 @@ function ge({
                 onChange: $,
                 onFocus: () => z(!0),
                 onBlur: () => z(!1),
-                disabled: a,
+                disabled: o,
                 minLength: 1,
                 maxLength: 79,
                 title: O.formatMessage({
@@ -143,7 +142,7 @@ function ge({
               {
                 token: r,
                 size: i,
-                disabled: a
+                disabled: o
               }
             ) })
           ] }),
@@ -182,19 +181,19 @@ function ee(t, s) {
   if (!s) return null;
   const r = Number.parseFloat(t.replace(",", ".") || "0");
   if (!Number.isFinite(r) || r === 0) return null;
-  const n = r * s, o = Math.abs(n) < 100;
+  const n = r * s, a = Math.abs(n) < 100;
   try {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-      minimumFractionDigits: o ? 2 : 0,
-      maximumFractionDigits: o ? 2 : 0
+      minimumFractionDigits: a ? 2 : 0,
+      maximumFractionDigits: a ? 2 : 0
     }).format(n);
   } catch {
     return "$0";
   }
 }
 export {
-  ge as AmountInput,
+  xe as AmountInput,
   m as AmountInputTest
 };