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

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

@@ -1,210 +1,212 @@
-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 { 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: m
+}) {
+  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 || m });
+}
+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: m,
+  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,
+      m && /* @__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(`${m}/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: m,
+  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
+  } = m || {}, 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(", "), d = s.length > o;
+    return [r, a, f, d];
+  }, [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, d = n[f], b = r === a.length - 1, N = w ? a.length - r : void 0, A = /* @__PURE__ */ e(j, { token: d, 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: d?.title || d?.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: m
 }) {
   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", m), children: [
+      k.map((h, s, r) => {
+        const a = s === r.length - 1, f = g ? r.length - s : void 0, d = /* @__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: d }),
+                placement: "top",
+                children: h.symbol || "unknown"
+              }
+            ) : d
+          },
+          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 lt(t) {
+  return H(t) ? /* @__PURE__ */ e(q, { ...t }) : E(t) ? /* @__PURE__ */ e(_, { ...t }) : /* @__PURE__ */ e(W, { ...t });
 }
 export {
-  et as AssetsListCell
+  lt as AssetsListCell
 };

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

@@ -1,13 +1,13 @@
-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 { 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 +15,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 +29,10 @@ const a = n(
     }
   }
 );
-function v({ className: r, variant: t, ...o }) {
-  return /* @__PURE__ */ e("div", { className: i(a({ variant: t }), r), ...o });
+function l({ className: r, variant: e, ...t }) {
+  return /* @__PURE__ */ o("div", { className: a(d({ variant: e }), r), ...t });
 }
 export {
-  v as Badge,
-  a as badgeVariants
+  l as Badge,
+  d as badgeVariants
 };

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

@@ -0,0 +1,47 @@
+import { jsx as r } from "react/jsx-runtime";
+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";
+import { Badge as p } from "./badge.js";
+class s {
+  static root = "chip-root";
+}
+class e {
+  static root = "chips-root";
+  static chip = s.root;
+}
+function C({
+  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 g({ 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 {
+  C as Chip,
+  s as ChipTest,
+  g 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/borrow-rate-block/borrow-rate-block.js

@@ -16,6 +16,7 @@ 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";
 import { BorrowRateBlockTest as n } from "./constants.js";
 function p(t) {
   return typeof t == "number" ? t : t?.total;
@@ -23,7 +24,7 @@ function p(t) {
 function u(t) {
   return typeof t == "number" ? t : t?.base;
 }
-function _({
+function q({
   data: t,
   dataTo: r
 }) {
@@ -84,6 +85,6 @@ function _({
   ) }) });
 }
 export {
-  _ as BorrowRateBlock,
+  q as BorrowRateBlock,
   n 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 a } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import { ChartWithSideCardTest as i } from "./constants.js";
 function m({
-  chart: r,
+  chart: a,
   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__ */ a(
+        /* @__PURE__ */ r(
           "div",
           {
             className: "min-w-[min(100%,40rem)] grow-[999] basis-0",
             "data-testid": i.chart,
-            children: r
+            children: a
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "div",
           {
-            className: "min-w-0 grow shrink-0 basis-[calc((100%-3rem)/4)]",
+            className: "min-w-[min(100%,300px)] grow-0 shrink-0 basis-[22.5rem]",
             "data-testid": i.side,
             children: t
           }