@gearbox-protocol/ui-kit 3.14.0-next.5 → 3.14.0-next.51

package/dist/esm/components/smart-number-input/smart-number-input.js

@@ -1,25 +1,28 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { cva as I } from "class-variance-authority";
-import * as n from "react";
-import { createPortal as ne } from "react-dom";
-import { Checkbox as se } from "../checkbox/checkbox.js";
+import { cva as k } from "class-variance-authority";
+import * as s from "react";
+import { createPortal as de } from "react-dom";
+import { Checkbox as ue } from "../checkbox/checkbox.js";
 import "../checkbox/checkbox-labeled.js";
-import { CurrencyButton as ae } from "../currency-button/currency-button.js";
-import { faXmark as oe } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as ie } from "../icons/fa-icon.js";
-import { useIntlTyped as le, FormattedMessageTyped as B } from "../typed-intl/index.js";
-import { useIsMobile as ce, useIsTablet as de, useIsDesktop as ue } from "../../hooks/use-media-query.js";
+import { CurrencyButton as me } from "../currency-button/currency-button.js";
+import { HealthFactor as fe } from "../health-factor/health-factor.js";
+import { faXmark as pe } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as he } from "../icons/fa-icon.js";
+import { Slider as ge } from "../slider/slider.js";
+import "../slider/slider-context.js";
+import { useIntlTyped as xe, FormattedMessageTyped as B } from "../typed-intl/index.js";
+import { useIsMobile as be, useIsTablet as ve, useIsDesktop as we } from "../../hooks/use-media-query.js";
 import { smartNumberInputTestIds as w } from "../../test-ids/smart-number-input.js";
-import { bnToInputView as me } from "../../utils/bn-to-input-view.js";
+import { bnToInputView as ye } from "../../utils/bn-to-input-view.js";
 import "@gearbox-protocol/sdk";
-import { parseInputToBN as fe } from "../../utils/parse-input-to-bn.js";
-import { cn as v } from "../../utils/cn.js";
+import { parseInputToBN as Ne } from "../../utils/parse-input-to-bn.js";
+import { cn as y } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { BalanceIndicator as pe } from "./balance-indicator.js";
-const he = I(
+import { BalanceIndicator as Ie } from "./balance-indicator.js";
+const Ce = k(
   "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: {
@@ -30,7 +33,7 @@ const he = I(
     },
     defaultVariants: { size: "md" }
   }
-), ge = I("font-medium text-foreground", {
+), ke = k("font-medium text-foreground", {
   variants: {
     size: {
       sm: "text-xs",
@@ -38,7 +41,7 @@ const he = I(
     }
   },
   defaultVariants: { size: "md" }
-}), xe = I(
+}), Me = k(
   "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
   {
     variants: {
@@ -50,90 +53,98 @@ const he = I(
     defaultVariants: { size: "md" }
   }
 );
-function be(p, s) {
-  const u = parseFloat(p.replace(",", ".") || "0");
-  if (!Number.isFinite(u) || u === 0) return "$0";
-  const a = u * s, g = Math.abs(a) < 100;
+function C(a) {
+  return Math.round(a * 100);
+}
+function ze(a) {
+  return a / 100;
+}
+function Fe(a, r) {
+  if (!r) return null;
+  const f = parseFloat(a.replace(",", ".") || "0");
+  if (!Number.isFinite(f) || f === 0) return null;
+  const o = f * r, x = Math.abs(o) < 100;
   try {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-      minimumFractionDigits: g ? 2 : 0,
-      maximumFractionDigits: g ? 2 : 0
-    }).format(a);
+      minimumFractionDigits: x ? 2 : 0,
+      maximumFractionDigits: x ? 2 : 0
+    }).format(o);
   } catch {
     return "$0";
   }
 }
-const we = n.forwardRef(
+const Le = s.forwardRef(
   ({
-    amount: p,
-    token: s,
-    label: u,
-    maxAmount: a,
-    maxAmountLimit: h,
-    maxButtonLabel: g,
-    chainId: T,
-    network: V,
-    maxButton: S = !0,
-    disabled: c = !1,
-    active: E = !1,
-    size: R = "md",
-    symbolMaxLength: D,
-    tokenOptions: y,
-    multiSelectMode: j = !1,
-    onSetAmount: m,
-    onShowSelectDialog: C,
+    amount: a,
+    token: r,
+    label: f,
+    maxAmount: o,
+    maxAmountLimit: g,
+    maxButtonLabel: x,
+    chainId: S,
+    network: E,
+    maxButton: R = !0,
+    disabled: u = !1,
+    active: D = !1,
+    size: j = "md",
+    symbolMaxLength: $,
+    tokenOptions: N,
+    multiSelectMode: H = !1,
+    onSetAmount: p,
+    onShowSelectDialog: M,
     onRemove: z,
-    onFocus: $,
-    onBlur: U,
-    usdPrice: k
-  }, W) => {
-    const { formatMessage: O } = le(), P = n.useId(), L = s?.decimals ?? 18, X = (e) => {
-      const r = e.target.value, [o, i] = fe(r, L);
-      o === null || i === null || m && m(o, i);
-    }, q = () => {
-      if (m) {
-        const e = a && h && a > h ? h : a || 0n, r = me(e, L);
-        m(e, r);
+    onFocus: U,
+    onBlur: W,
+    usdPrice: F,
+    hfSlider: c
+  }, O) => {
+    const { formatMessage: P } = xe(), X = s.useId(), L = r?.decimals ?? 18, q = (e) => {
+      const n = e.target.value, [i, d] = Ne(n, L);
+      i === null || d === null || p && p(i, d);
+    }, G = () => {
+      if (p) {
+        const e = o && g && o > g ? g : o || 0n, n = ye(e, L);
+        p(e, n);
       }
-    }, [G, M] = n.useState(!1), H = () => {
-      M(!0), $?.();
-    }, J = () => {
-      M(!1), U?.();
-    }, f = R ?? "md", K = ce(), Q = de(), Y = ue(), Z = D ?? (K ? 20 : Q ? 30 : Y ? 22 : 30), [d, N] = n.useState(!1), x = n.useRef(null), F = n.useRef(null), [_, A] = n.useState({});
-    n.useLayoutEffect(() => {
-      if (!d || !x.current) return;
+    }, [J, T] = s.useState(!1), K = () => {
+      T(!0), U?.();
+    }, Q = () => {
+      T(!1), W?.();
+    }, Y = be(), Z = c?.min ?? 1, _ = c?.max ?? 3, A = c?.step ?? 0.01, ee = Math.max(1, Math.round(1 / A)), h = j ?? "md", te = Y, ne = ve(), re = we(), se = $ ?? (te ? 20 : ne ? 30 : re ? 22 : 30), [m, I] = s.useState(!1), b = s.useRef(null), V = s.useRef(null), [ae, oe] = s.useState({});
+    s.useLayoutEffect(() => {
+      if (!m || !b.current) return;
       const e = () => {
-        const r = x.current?.getBoundingClientRect();
-        r && A({
+        const n = b.current?.getBoundingClientRect();
+        n && oe({
           position: "fixed",
-          top: r.bottom + 4,
-          right: window.innerWidth - r.right,
-          minWidth: r.width,
+          top: n.bottom + 4,
+          right: window.innerWidth - n.right,
+          minWidth: n.width,
           zIndex: 9999
         });
       };
       return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
         window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
       };
-    }, [d]), n.useEffect(() => {
-      if (!d) return;
-      const e = (r) => {
-        const o = r.target, i = x.current?.contains(o), re = F.current?.contains(o);
-        !i && !re && N(!1);
+    }, [m]), s.useEffect(() => {
+      if (!m) return;
+      const e = (n) => {
+        const i = n.target, d = b.current?.contains(i), ce = V.current?.contains(i);
+        !d && !ce && I(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [d]);
-    const b = !!(y && y.length > 0), ee = !c && b ? () => N((e) => !e) : C, te = !!(s || C || b);
+    }, [m]);
+    const v = !!(N && N.length > 0), ie = !u && v ? () => I((e) => !e) : M, le = !!(r || M || v);
     return /* @__PURE__ */ l(
       "div",
       {
-        ref: W,
-        className: he({ size: f }),
+        ref: O,
+        className: Ce({ size: h }),
         "data-testid": w.root,
-        "data-active": G,
-        "data-disabled": c,
+        "data-active": J,
+        "data-disabled": u,
         children: [
           z && /* @__PURE__ */ t(
             "div",
@@ -146,7 +157,7 @@ const we = n.forwardRef(
                   type: "button",
                   onClick: z,
                   className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
-                  children: /* @__PURE__ */ t(ie, { icon: oe, className: "size-3" })
+                  children: /* @__PURE__ */ t(he, { icon: pe, className: "size-3" })
                 }
               )
             }
@@ -155,31 +166,54 @@ const we = n.forwardRef(
             /* @__PURE__ */ t(
               "span",
               {
-                className: v(
-                  ge({ size: f }),
+                className: y(
+                  ke({ size: h }),
                   "grow shrink-0 basis-0"
                 ),
                 "data-testid": w.label,
-                children: u ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.amountLabel" })
+                children: f ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.amountLabel" })
               }
             ),
-            a !== void 0 && s && /* @__PURE__ */ t(
-              pe,
+            c !== void 0 ? /* @__PURE__ */ l("div", { className: "ml-auto flex w-1/2 min-w-0 items-center gap-1", children: [
+              /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-secondary-foreground", children: "HF" }),
+              /* @__PURE__ */ t("div", { className: "min-w-0 flex-1 [&>div]:px-0 [&>div]:pb-0", children: /* @__PURE__ */ t(
+                ge,
+                {
+                  from: C(Z),
+                  to: C(_),
+                  value: C(c.value),
+                  precision: ee,
+                  markerStep: 0,
+                  epsilon: 0,
+                  onChangeValue: (e) => c.onChange(ze(e))
+                }
+              ) }),
+              /* @__PURE__ */ t(
+                fe,
+                {
+                  value: Math.round(c.value * 1e4),
+                  debt: 1n,
+                  decimals: 2,
+                  className: "shrink-0 text-xs tabular-nums"
+                }
+              )
+            ] }) : o !== void 0 && r && /* @__PURE__ */ t(
+              Ie,
               {
-                title: g,
-                token: s,
-                maxAmount: a,
-                size: f,
-                disabled: c,
-                maxButton: S,
-                onMaxButtonClick: q
+                title: x,
+                token: r,
+                maxAmount: o,
+                size: h,
+                disabled: u,
+                maxButton: R,
+                onMaxButtonClick: G
               }
             )
           ] }),
           /* @__PURE__ */ l(
             "div",
             {
-              className: v(
+              className: y(
                 "flex w-full max-w-full shrink-0 basis-full items-center"
               ),
               children: [
@@ -193,56 +227,56 @@ const we = n.forwardRef(
                     spellCheck: "false",
                     pattern: "^[0-9]*[.,]?[0-9]*$",
                     placeholder: "0",
-                    value: p,
-                    onChange: X,
-                    onFocus: H,
-                    onBlur: J,
-                    disabled: c || !m,
-                    className: v(
-                      xe({ size: f }),
-                      c && "cursor-not-allowed"
+                    value: a,
+                    onChange: q,
+                    onFocus: K,
+                    onBlur: Q,
+                    disabled: u || !p,
+                    className: y(
+                      Me({ size: h }),
+                      u && "cursor-not-allowed"
                     ),
                     "data-testid": w.input,
                     minLength: 1,
                     maxLength: 79,
-                    title: O({
+                    title: P({
                       messageId: "components.smartNumberInput.inputTitle"
                     })
                   }
                 ) }),
-                te ? /* @__PURE__ */ l("div", { ref: x, className: "shrink-0", children: [
+                le ? /* @__PURE__ */ l("div", { ref: b, className: "shrink-0", children: [
                   /* @__PURE__ */ t(
-                    ae,
+                    me,
                     {
-                      active: b ? d : E,
-                      size: f,
-                      disabled: c,
-                      token: s,
-                      showSelectDialog: ee,
-                      chainId: T,
-                      network: V,
-                      maxLength: Z,
-                      children: s?.symbol ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.selectToken" })
+                      active: v ? m : D,
+                      size: h,
+                      disabled: u,
+                      token: r,
+                      showSelectDialog: ie,
+                      chainId: S,
+                      network: E,
+                      maxLength: se,
+                      children: r?.symbol ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.selectToken" })
                     }
                   ),
-                  b && d && ne(
+                  v && m && de(
                     /* @__PURE__ */ t(
                       "div",
                       {
-                        ref: F,
-                        style: _,
+                        ref: V,
+                        style: ae,
                         className: "overflow-hidden rounded-lg border border-gray-30 bg-gray-20 shadow-lg",
-                        children: y?.map((e, r) => {
-                          const o = `${P}-${r}`, i = "flex w-full min-w-0 items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-gray-30";
-                          return j ? /* @__PURE__ */ l(
+                        children: N?.map((e, n) => {
+                          const i = `${X}-${n}`, d = "flex w-full min-w-0 items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-gray-30";
+                          return H ? /* @__PURE__ */ l(
                             "div",
                             {
-                              className: i,
+                              className: d,
                               children: [
                                 /* @__PURE__ */ t(
-                                  se,
+                                  ue,
                                   {
-                                    id: o,
+                                    id: i,
                                     checked: !!e.checked,
                                     color: "secondary",
                                     size: "md",
@@ -253,7 +287,7 @@ const we = n.forwardRef(
                                 /* @__PURE__ */ l(
                                   "label",
                                   {
-                                    htmlFor: o,
+                                    htmlFor: i,
                                     className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left",
                                     children: [
                                       e.icon ? /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 items-center", children: e.icon }) : null,
@@ -263,21 +297,21 @@ const we = n.forwardRef(
                                 )
                               ]
                             },
-                            r
+                            n
                           ) : /* @__PURE__ */ l(
                             "button",
                             {
                               type: "button",
                               onClick: () => {
-                                e.onSelect(), N(!1);
+                                e.onSelect(), I(!1);
                               },
-                              className: v(i, "text-left"),
+                              className: y(d, "text-left"),
                               children: [
                                 e.icon ? /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 items-center", children: e.icon }) : null,
                                 /* @__PURE__ */ t("span", { className: "truncate", children: e.label })
                               ]
                             },
-                            r
+                            n
                           );
                         })
                       }
@@ -288,13 +322,16 @@ const we = n.forwardRef(
               ]
             }
           ),
-          k !== void 0 && /* @__PURE__ */ t("div", { className: "mt-1 text-xs leading-[130%] text-secondary-foreground", children: be(p, k) })
+          F !== void 0 && (() => {
+            const e = Fe(a, F);
+            return e ? /* @__PURE__ */ t("div", { className: "mt-1 text-xs leading-[130%] text-secondary-foreground", children: e }) : null;
+          })()
         ]
       }
     );
   }
 );
-we.displayName = "SmartNumberInput";
+Le.displayName = "SmartNumberInput";
 export {
-  we as SmartNumberInput
+  Le as SmartNumberInput
 };

package/dist/esm/components/time-to-liquidation/time-to-liquidation.js

@@ -48,9 +48,12 @@ import "../input/input.js";
 import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
+import "../composites/credit-account-history/credit-account-history.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../typography/typography.js";
 import "../table/grid-table.js";
 import "../token-symbol/token-symbol.js";
-import "../typography/typography.js";
 import "../help-tip/help-tip.js";
 import "../description/description.js";
 import "../confirm-menu/confirm-menu.js";
@@ -114,6 +117,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.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/footer/footer.js";
@@ -123,6 +128,7 @@ import "../layout/layout/layout.js";
 import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
+import "../legal-agreement/legal-agreement-theme.js";
 import "../link/link.js";
 import "../../utils/reactochart-compat.js";
 import { HealthDot as u } from "../status-elements/status-elements.js";
@@ -135,7 +141,6 @@ import "../navbar/navbar.js";
 import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
-import "../simple-dropdown/simple-dropdown.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
@@ -143,7 +148,6 @@ import "../segmented-control/segmented-control.js";
 import "../select/select.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
 import "../slider/slider.js";
 import "../slider/slider-context.js";
 import "@radix-ui/react-slider";

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

@@ -47,9 +47,12 @@ import "../input/input.js";
 import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
+import "../composites/credit-account-history/credit-account-history.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../typography/typography.js";
 import "../table/grid-table.js";
 import { getSymbolOrIcon as P } from "../token-symbol/token-symbol.js";
-import "../typography/typography.js";
 import "../help-tip/help-tip.js";
 import "../description/description.js";
 import "../confirm-menu/confirm-menu.js";
@@ -113,6 +116,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.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/footer/footer.js";
@@ -122,6 +127,7 @@ import "../layout/layout/layout.js";
 import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
+import "../legal-agreement/legal-agreement-theme.js";
 import "../link/link.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
@@ -134,7 +140,6 @@ import "../navbar/navbar.js";
 import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
-import "../simple-dropdown/simple-dropdown.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
@@ -142,7 +147,6 @@ import "../segmented-control/segmented-control.js";
 import "../select/select.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
 import "../slider/slider.js";
 import "../slider/slider-context.js";
 import "@radix-ui/react-slider";
@@ -160,7 +164,7 @@ import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
-function Ur({
+function Dr({
   balances: a,
   tokensList: l,
   maxAssets: p = 3,
@@ -223,5 +227,5 @@ function Ur({
   ] });
 }
 export {
-  Ur as TokensListCell
+  Dr as TokensListCell
 };