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

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/amount-input/amount-input.js

@@ -0,0 +1,200 @@
+import { jsxs as c, Fragment as L, jsx as e } from "react/jsx-runtime";
+import { cva as g } from "class-variance-authority";
+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";
+import { parseInputToBN as S } from "../../../utils/parse-input-to-bn.js";
+import { BalanceIndicator as W } from "./balance-indicator.js";
+import { AmountInputTest as m } from "./constants.js";
+import { TokenButton as k } from "./token-button.js";
+import { TokenSelectPanel as X } from "./token-select-panel.js";
+const Y = g(
+  "relative w-full text-foreground bg-gray-20 border border-gray-30 transition-[background-color] duration-100 ease-linear [&:hover]:bg-gray-30 [&:hover]:border-gray-40 data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px] data-[disabled=true]:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-[7px] min-h-[60px] rounded-[8px]",
+        md: "pl-4 pr-3 py-[10px] min-h-[82px] rounded-lg"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Z = g("font-medium text-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), _ = g(
+  "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "text-[18px]! leading-[21px]!",
+        md: "text-[28px]! leading-[33px]!"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function ge({
+  amount: t,
+  onAmount: s,
+  token: r,
+  tokens: n,
+  onToken: o,
+  balance: u,
+  balances: B,
+  usdPrices: j,
+  label: h,
+  maxLabel: v,
+  usdPrice: b,
+  size: A,
+  disabled: a = !1,
+  testId: D
+}) {
+  const O = J(), y = G(), U = Q(), i = A ?? (U ? "sm" : "md"), l = r.decimals, [p, w] = x(
+    () => t === 0n ? "" : M(t, l)
+  ), [P, z] = x(!1), [N, f] = x(!1);
+  q(() => {
+    const [d] = S(p, l);
+    d !== t && w(t === 0n ? "" : M(t, l));
+  }, [t, l]);
+  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);
+  }, C = () => f(!1);
+  return /* @__PURE__ */ c(L, { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        "data-testid": D ?? m.root,
+        "data-active": P,
+        "data-disabled": a,
+        className: Y({ size: i }),
+        children: [
+          /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: R(
+                  Z({ size: i }),
+                  "grow shrink-0 basis-0"
+                ),
+                "data-testid": m.label,
+                children: h !== void 0 ? y(h) : /* @__PURE__ */ e(K, { messageId: "components.amountInput.label" })
+              }
+            ),
+            u !== void 0 ? /* @__PURE__ */ e(
+              W,
+              {
+                title: v !== void 0 ? y(v) : void 0,
+                token: r,
+                balance: u,
+                disabled: a,
+                onMax: () => s(u)
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ c("div", { className: "flex w-full max-w-full shrink-0 basis-full items-center", children: [
+            /* @__PURE__ */ e("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                inputMode: "decimal",
+                autoComplete: "off",
+                autoCorrect: "off",
+                spellCheck: "false",
+                pattern: "^[0-9]*[.,]?[0-9]*$",
+                placeholder: "0",
+                value: p,
+                onChange: $,
+                onFocus: () => z(!0),
+                onBlur: () => z(!1),
+                disabled: a,
+                minLength: 1,
+                maxLength: 79,
+                title: O.formatMessage({
+                  messageId: "components.amountInput.inputTitle"
+                }),
+                "data-testid": m.input,
+                className: _({ size: i })
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: "shrink-0", children: I ? /* @__PURE__ */ e(
+              k,
+              {
+                token: r,
+                size: i,
+                active: N,
+                onClick: () => f(!0)
+              }
+            ) : /* @__PURE__ */ e(
+              k,
+              {
+                token: r,
+                size: i,
+                disabled: a
+              }
+            ) })
+          ] }),
+          T ? /* @__PURE__ */ e(
+            "div",
+            {
+              className: "mt-1 text-xs leading-[130%] text-secondary-foreground",
+              "data-testid": m.usd,
+              children: T
+            }
+          ) : null
+        ]
+      }
+    ),
+    I && n ? /* @__PURE__ */ e(
+      H,
+      {
+        show: N,
+        onClickOutside: C,
+        className: "sm:w-[440px]",
+        children: /* @__PURE__ */ e(
+          X,
+          {
+            tokens: n,
+            balances: B,
+            usdPrices: j,
+            onSelect: E,
+            onClose: C
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+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;
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: o ? 2 : 0,
+      maximumFractionDigits: o ? 2 : 0
+    }).format(n);
+  } catch {
+    return "$0";
+  }
+}
+export {
+  ge as AmountInput,
+  m as AmountInputTest
+};

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

@@ -0,0 +1,51 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { TokenTemplate as i } from "../../token-template/token-template.js";
+import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
+import { cn as d } from "../../../utils/cn.js";
+import { AmountInputTest as n } from "./constants.js";
+function f({
+  title: s,
+  token: t,
+  balance: r,
+  disabled: m,
+  onMax: l
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex shrink-0 basis-auto items-center",
+      "data-testid": n.balance,
+      children: [
+        /* @__PURE__ */ a("span", { className: "text-sm font-normal leading-[130%] text-foreground", children: [
+          s ?? /* @__PURE__ */ e(o, { messageId: "components.amountInput.balance" }),
+          ": ",
+          /* @__PURE__ */ e(
+            i,
+            {
+              value: r,
+              token: { symbol: t.symbol, decimals: t.decimals },
+              showSymbol: !1
+            }
+          )
+        ] }),
+        !m && /* @__PURE__ */ e("div", { className: "ml-2", children: /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: l,
+            "data-testid": n.max,
+            className: d(
+              "rounded-[6px] border-0 py-[3px] px-1 text-[11px]! leading-[13px]!",
+              "text-center uppercase text-foreground",
+              "bg-gray-70 hover:bg-gray-90 transition-colors"
+            ),
+            children: /* @__PURE__ */ e(o, { messageId: "components.amountInput.max" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  f as BalanceIndicator
+};

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

@@ -0,0 +1,14 @@
+class a {
+  static root = "amount-input-root";
+  static input = "amount-input-field";
+  static max = "amount-input-max";
+  static token = "amount-input-token";
+  static label = "amount-input-label";
+  static balance = "amount-input-balance";
+  static usd = "amount-input-usd";
+  static selectPanel = "amount-input-select-panel";
+  static selectOption = "amount-input-select-option";
+}
+export {
+  a as AmountInputTest
+};

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

@@ -0,0 +1,8 @@
+import { AmountInput as e } from "./amount-input.js";
+import { TokenSelectPanel as r } from "./token-select-panel.js";
+import { AmountInputTest as p } from "./constants.js";
+export {
+  e as AmountInput,
+  p as AmountInputTest,
+  r as TokenSelectPanel
+};

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

@@ -0,0 +1,90 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { IconExpand as x } from "@gearbox-protocol/static";
+import { cva as l } from "class-variance-authority";
+import { TokenSymbol as f } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
+import { cn as d } from "../../../utils/cn.js";
+import { AmountInputTest as v } from "./constants.js";
+const y = l(
+  "flex flex-row items-center text-foreground cursor-[unset]",
+  {
+    variants: {
+      size: {
+        sm: "text-[16px] leading-[21px]",
+        md: "text-[21px] leading-[33px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), b = l(
+  "ml-0.5 leading-none text-gray-100 transition-transform duration-100 ease-[ease]",
+  {
+    variants: {
+      size: {
+        sm: "px-1",
+        md: "px-1.5"
+      },
+      active: {
+        true: "rotate-180",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", active: !1 }
+  }
+), w = {
+  sm: { symbol: 16, arrow: 8 },
+  md: { symbol: 28, arrow: 12 }
+};
+function V({
+  token: n,
+  onClick: e,
+  interactive: p = !1,
+  active: c = !1,
+  disabled: s,
+  size: o = "md"
+}) {
+  const m = !!((e || p) && !s), r = !!(e && !s), i = w[o];
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: reference markup uses a div block; role + keyboard added for a11y
+    /* @__PURE__ */ u(
+      "div",
+      {
+        role: r ? "button" : void 0,
+        tabIndex: r ? 0 : void 0,
+        "data-testid": v.token,
+        onClick: r ? e : void 0,
+        onKeyDown: r && e ? (a) => {
+          (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e());
+        } : void 0,
+        className: d(
+          "group",
+          y({ size: o }),
+          m && "cursor-pointer hover:[&_.expand-wrap]:text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ t(
+            f,
+            {
+              token: n,
+              showSymbol: !0,
+              size: i.symbol,
+              marginSize: o,
+              maxLength: 13
+            }
+          ),
+          n ? null : /* @__PURE__ */ t("span", { className: "text-muted-foreground truncate", children: /* @__PURE__ */ t(g, { messageId: "components.amountInput.selectToken" }) }),
+          m ? /* @__PURE__ */ t(
+            "span",
+            {
+              className: d("expand-wrap", b({ size: o, active: c })),
+              children: /* @__PURE__ */ t(x, { size: i.arrow })
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+export {
+  V as TokenButton
+};

package/dist/esm/components/base/amount-input/token-select-panel.js

@@ -0,0 +1,85 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
+import "react-intl";
+import "../../buttons/button/button.js";
+import { VSpace as b } from "../../vspace/vspace.js";
+import { GridTable as g, GridTableBody as v, GridTableRow as w, GridTableCell as s } from "../../table/grid-table.js";
+import "../../skeleton/skeleton.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { formatAssetAmount as T } from "../../../utils/format-asset-amount.js";
+import { formatMoney as y } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import "../../table/table.js";
+import { TokenSymbol as N } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as z } from "../../typed-intl/index.js";
+import { AmountInputTest as n } from "./constants.js";
+function d(o, i) {
+  if (o)
+    return o[i] ?? o[i.toLowerCase()];
+}
+function Q({
+  tokens: o,
+  balances: i,
+  usdPrices: p,
+  onSelect: c,
+  onClose: f
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": n.selectPanel,
+      className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
+      children: [
+        /* @__PURE__ */ e(
+          h,
+          {
+            title: /* @__PURE__ */ e(z, { messageId: "components.amountInput.selectToken" }),
+            onClose: f
+          }
+        ),
+        /* @__PURE__ */ e(b, { size: 16 }),
+        /* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
+          g,
+          {
+            cols: "minmax(0,1fr) 120px",
+            gap: 0,
+            size: "sm",
+            wrapperClassName: "overflow-visible",
+            children: /* @__PURE__ */ e(v, { children: o.map((r, x) => {
+              const l = d(i, r.address) ?? 0n, m = d(p, r.address), u = Number(l) / 10 ** r.decimals, a = m !== void 0 ? y(u * m, 4) : void 0;
+              return /* @__PURE__ */ t(
+                w,
+                {
+                  last: x === o.length - 1,
+                  height: "56px",
+                  "data-testid": n.selectOption,
+                  onRowClick: () => c(r),
+                  children: [
+                    /* @__PURE__ */ e(s, { size: "sm", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ e(N, { token: r, size: 24, showSymbol: !1 }),
+                      /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
+                    ] }) }),
+                    /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: T(l, r.decimals) }),
+                      a !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: a }) : null
+                    ] }) })
+                  ]
+                },
+                r.address
+              );
+            }) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Q as TokenSelectPanel
+};

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

@@ -0,0 +1,90 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { SimpleAccordion as l, SimpleAccordionItem as s } from "../../simple-accordion/simple-accordion.js";
+import { TipCard as c } from "../../tip-card/tip-card.js";
+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 "clsx";
+import "tailwind-merge";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+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;
+}
+function u(t) {
+  return typeof t == "number" ? t : t?.base;
+}
+function q({
+  data: t,
+  dataTo: r
+}) {
+  return /* @__PURE__ */ o("div", { "data-testid": n.root, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+    s,
+    {
+      value: "borrow-rate",
+      last: !0,
+      triggerClassName: "flex-nowrap py-0 font-normal",
+      className: "[&_[role=region]_>div]:pb-0 border-b-0",
+      title: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "min-w-0 flex-1 pr-1.5",
+          "data-testid": n.trigger,
+          children: /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.label",
+              tip: /* @__PURE__ */ o(e, { messageId: "components.borrowRateBlock.tip" }),
+              value: /* @__PURE__ */ o(a, { data: p(t) }),
+              valueTo: r !== void 0 ? /* @__PURE__ */ o(a, { data: p(r) }) : void 0
+            }
+          )
+        }
+      ),
+      description: /* @__PURE__ */ m("div", { "data-testid": n.details, children: [
+        /* @__PURE__ */ o(f, { size: 16 }),
+        /* @__PURE__ */ o(c, { backgroundColor: "transparent", textColor: "unset", children: /* @__PURE__ */ m(b, { children: [
+          /* @__PURE__ */ o(d, { as: "span", variant: "caption", color: "secondary", children: /* @__PURE__ */ o(e, { messageId: "components.borrowRateBlock.description" }) }),
+          /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.baseRate",
+              value: /* @__PURE__ */ o(a, { data: u(r ?? t) })
+            }
+          ),
+          /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.normalization",
+              tip: /* @__PURE__ */ o(
+                e,
+                {
+                  messageId: "components.borrowRateBlock.normalization.tip",
+                  values: {
+                    quota: "Quota Rates",
+                    utilization: "Utilization Rate"
+                  }
+                }
+              ),
+              value: "—"
+            }
+          )
+        ] }) })
+      ] })
+    }
+  ) }) });
+}
+export {
+  q as BorrowRateBlock,
+  n as BorrowRateBlockTest
+};

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

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

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

@@ -0,0 +1,6 @@
+import { BorrowRateBlock as e } from "./borrow-rate-block.js";
+import { BorrowRateBlockTest as B } from "./constants.js";
+export {
+  e as BorrowRateBlock,
+  B as BorrowRateBlockTest
+};