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

package/dist/esm/components/health-factor/health-factor.js

@@ -1,5 +1,5 @@
 import { jsxs as f, jsx as c } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as p, formatPercentage as v } from "@gearbox-protocol/sdk";
+import { formatPercentage as p, PERCENTAGE_FACTOR as v } from "@gearbox-protocol/sdk";
 import { cva as x } from "class-variance-authority";
 import "react";
 import { cn as C } from "../../utils/cn.js";
@@ -10,7 +10,7 @@ import "../../utils/z-index.js";
 import { StatusBars as F } from "../status-elements/status-elements.js";
 const g = 15e3, A = 11e3, H = 10500, N = (t) => {
   if (t)
-    return t >= g ? "good" : t > A ? "medium" : t > H ? "bad" : t > p ? "critical" : "liquidation";
+    return t >= g ? "good" : t > A ? "medium" : t > H ? "bad" : t > v ? "critical" : "liquidation";
 }, b = x(
   "inline-flex items-center font-medium [text-decoration:inherit]",
   {
@@ -38,7 +38,7 @@ function G({
   const n = e !== void 0 && e === 0n, r = !n && i === "color" ? o === void 0 ? N(t) : o : void 0, s = r === void 0 ? void 0 : r === null ? "unset" : r, d = () => {
     if (n) return "N/A";
     const l = Number(t);
-    return v(l, a);
+    return p(l, a);
   };
   return /* @__PURE__ */ f(
     "span",

package/dist/esm/components/layout/main-aside-layout/main-aside-layout.js

@@ -1,35 +1,118 @@
-import { jsx as s, jsxs as f } from "react/jsx-runtime";
-import * as c from "react";
+import { jsx as m, jsxs as d } from "react/jsx-runtime";
+import * as h from "react";
 import { cn as a } from "../../../utils/cn.js";
-const d = c.forwardRef(
+const y = h.forwardRef(
   ({
-    children: i,
-    aside: e,
-    asidePosition: l = "right",
-    asideClassName: t,
-    className: m,
-    ...o
-  }, n) => {
-    const r = e == null ? null : /* @__PURE__ */ s("aside", { className: a("min-w-0 shrink-0", t), children: e });
-    return /* @__PURE__ */ f(
+    children: t,
+    aside: i,
+    asidePosition: x = "right",
+    asideClassName: w,
+    mainClassName: o,
+    mainRef: c,
+    variant: f = "default",
+    centeredMain: s = !1,
+    className: g,
+    ...u
+  }, v) => {
+    const e = f === "detail", r = x === "left", l = e && s, p = i == null ? null : /* @__PURE__ */ m(
+      "aside",
+      {
+        className: a(
+          "min-w-0 shrink-0",
+          e && !l && [
+            "w-full",
+            "z-30 lg:w-[420px] lg:min-w-[420px] lg:max-w-[420px]",
+            "xl:w-[460px] xl:min-w-[460px] xl:max-w-[460px]",
+            "max-h-full lg:max-h-[100vh] overflow-y-visible lg:overflow-y-auto",
+            // sticky below 2450px, fixed at ≥2450px
+            "lg:max-[2449px]:sticky lg:max-[2449px]:top-4",
+            "min-[2450px]:fixed min-[2450px]:top-28",
+            // fixed anchor matches asidePosition
+            r ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
+          ],
+          l && [
+            "w-full",
+            "z-30 lg:w-[420px] lg:min-w-[420px] lg:max-w-[420px]",
+            "xl:w-[460px] xl:min-w-[460px] xl:max-w-[460px]",
+            "overflow-y-visible lg:max-h-[100vh] lg:overflow-y-auto",
+            // sticky in the LP-style fill range (lg…1799px)
+            "lg:max-[1799px]:sticky lg:max-[1799px]:top-4"
+          ],
+          w
+        ),
+        children: i
+      }
+    ), n = l ? /* @__PURE__ */ m(
+      "div",
+      {
+        "aria-hidden": !0,
+        className: "hidden shrink-0 min-[1800px]:block min-[1800px]:w-[8rem]"
+      }
+    ) : null;
+    return /* @__PURE__ */ d(
       "div",
       {
-        ref: n,
+        ref: v,
         className: a(
-          "flex w-full flex-col-reverse gap-6 lg:flex-row lg:items-start",
-          m
+          // base: mobile stack (column-reverse), desktop row
+          "flex w-full flex-col-reverse gap-6 lg:items-start",
+          !l && "lg:flex-row",
+          e && !l && [
+            "relative mx-auto min-w-0",
+            // cap width so aside doesn't overflow on medium-wide screens
+            "max-w-[calc(80rem+420px+1.5rem)]",
+            "xl:max-w-[calc(80rem+460px+1.5rem)]",
+            // at ≥2450px aside is fixed → switch wrapper to block so main can
+            // centre independently
+            "min-[2450px]:block min-[2450px]:max-w-none min-[2450px]:gap-0"
+          ],
+          // centred-main (hybrid): below 1800px behave like the LP detail row
+          // (aside in flow, main fills the rest, wrapper capped + centred as a
+          // unit). At ≥1800px the wrapper spans the full width and centres the
+          // aside + main + mirror-spacer group, so the main column is optically
+          // centred on the viewport while still scaling up to 80rem.
+          l && [
+            "relative mx-auto min-w-0 lg:flex-row",
+            "max-w-[calc(80rem+420px+1.5rem)] xl:max-w-[calc(80rem+460px+1.5rem)]",
+            "min-[1800px]:max-w-none min-[1800px]:justify-center"
+          ],
+          g
         ),
-        ...o,
+        ...u,
         children: [
-          l === "left" && r,
-          /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: i }),
-          l === "right" && r
+          x === "left" && p,
+          x === "right" && n,
+          /* @__PURE__ */ m(
+            "div",
+            {
+              ref: c,
+              className: a(
+                "min-w-0",
+                !l && "flex-1",
+                e && !l && [
+                  "relative z-0 w-full",
+                  // at ≥2450px: stop growing and centre with explicit max-width
+                  // (leaves room for the fixed 460px aside + 8rem inset offset)
+                  "min-[2450px]:mx-auto min-[2450px]:flex-none",
+                  "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]",
+                  // when aside is on the left, push main column off the fixed aside
+                  r && "min-[2450px]:ml-[calc(460px+8rem)]"
+                ],
+                // centred-main: fill the available row width, capped at 96rem
+                l && "relative z-0 w-full flex-1 lg:max-w-[96rem]",
+                o
+              ),
+              children: t
+            }
+          ),
+          x === "left" && n,
+          x === "right" && p
         ]
       }
     );
   }
 );
-d.displayName = "MainAsideLayout";
+y.displayName = "MainAsideLayout";
 export {
-  d as MainAsideLayout
+  y as MainAsideLayout
 };

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

@@ -1,32 +1,39 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { cva as m } from "class-variance-authority";
-import * as v from "react";
-import { CurrencyButton as G } from "../currency-button/currency-button.js";
-import { faXmark as H } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as J } from "../icons/fa-icon.js";
-import { useIsMobile as K, useIsTablet as O, useIsDesktop as P } from "../../hooks/use-media-query.js";
-import { smartNumberInputTestIds as n } from "../../test-ids/smart-number-input.js";
-import { bnToInputView as Q } from "../../utils/bn-to-input-view.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+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 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 ye } from "../../utils/bn-to-input-view.js";
 import "@gearbox-protocol/sdk";
-import { parseInputToBN as U } from "../../utils/parse-input-to-bn.js";
-import { cn as u } 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 W } from "./balance-indicator.js";
-const Y = m(
+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: {
       size: {
-        sm: "px-3 py-[7px] h-[60px] rounded-[8px]",
-        md: "pl-4 pr-3 py-[10px] h-[82px] rounded-lg"
+        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 = m("font-medium text-foreground", {
+), ke = k("font-medium text-foreground", {
   variants: {
     size: {
       sm: "text-xs",
@@ -34,7 +41,7 @@ const Y = m(
     }
   },
   defaultVariants: { size: "md" }
-}), _ = m(
+}), Me = k(
   "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
   {
     variants: {
@@ -45,97 +52,172 @@ const Y = m(
     },
     defaultVariants: { size: "md" }
   }
-), A = v.forwardRef(
+);
+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: x ? 2 : 0,
+      maximumFractionDigits: x ? 2 : 0
+    }).format(o);
+  } catch {
+    return "$0";
+  }
+}
+const Le = s.forwardRef(
   ({
-    amount: y,
-    token: t,
-    label: w = "Amount",
-    maxAmount: a,
-    maxAmountLimit: l,
-    maxButtonLabel: z,
-    chainId: N,
-    network: I,
-    maxButton: C = !0,
-    disabled: r = !1,
-    active: V = !1,
-    size: B = "md",
-    onSetAmount: s,
-    onShowSelectDialog: p,
-    onRemove: f,
-    onFocus: k,
-    onBlur: M
-  }, j) => {
-    const h = t?.decimals ?? 18, F = (i) => {
-      const d = i.target.value, [x, b] = U(d, h);
-      x === null || b === null || s && s(x, b);
-    }, L = () => {
-      if (s) {
-        const i = a && l && a > l ? l : a || 0n, d = Q(i, h);
-        s(i, d);
+    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: 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);
       }
-    }, [T, g] = v.useState(!1), D = () => {
-      g(!0), k?.();
-    }, R = () => {
-      g(!1), M?.();
-    }, o = B ?? "md", S = K(), X = O(), $ = P(), q = S ? 20 : X ? 30 : $ ? 22 : 30, E = !!(t || p);
-    return /* @__PURE__ */ c(
+    }, [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 n = b.current?.getBoundingClientRect();
+        n && oe({
+          position: "fixed",
+          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);
+      };
+    }, [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);
+    }, [m]);
+    const v = !!(N && N.length > 0), ie = !u && v ? () => I((e) => !e) : M, le = !!(r || M || v);
+    return /* @__PURE__ */ l(
       "div",
       {
-        ref: j,
-        className: Y({ size: o }),
-        "data-testid": n.root,
-        "data-active": T,
-        "data-disabled": r,
+        ref: O,
+        className: Ce({ size: h }),
+        "data-testid": w.root,
+        "data-active": J,
+        "data-disabled": u,
         children: [
-          f && /* @__PURE__ */ e(
+          z && /* @__PURE__ */ t(
             "div",
             {
               className: "absolute top-0 right-0 flex h-5 w-5 translate-x-1/2 -translate-y-1/2 items-center justify-center",
-              "data-testid": n.close,
-              children: /* @__PURE__ */ e(
+              "data-testid": w.close,
+              children: /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: f,
+                  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__ */ e(J, { icon: H, className: "size-3" })
+                  children: /* @__PURE__ */ t(he, { icon: pe, className: "size-3" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ l("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+            /* @__PURE__ */ t(
               "span",
               {
-                className: u(
-                  Z({ size: o }),
+                className: y(
+                  ke({ size: h }),
                   "grow shrink-0 basis-0"
                 ),
-                "data-testid": n.label,
-                children: w
+                "data-testid": w.label,
+                children: f ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.amountLabel" })
               }
             ),
-            a !== void 0 && t && /* @__PURE__ */ e(
-              W,
+            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: z,
-                token: t,
-                maxAmount: a,
-                size: o,
-                disabled: r,
-                maxButton: C,
-                onMaxButtonClick: L
+                title: x,
+                token: r,
+                maxAmount: o,
+                size: h,
+                disabled: u,
+                maxButton: R,
+                onMaxButtonClick: G
               }
             )
           ] }),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ l(
             "div",
             {
-              className: u(
+              className: y(
                 "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(
+                /* @__PURE__ */ t("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ t(
                   "input",
                   {
                     type: "text",
@@ -145,44 +227,111 @@ const Y = m(
                     spellCheck: "false",
                     pattern: "^[0-9]*[.,]?[0-9]*$",
                     placeholder: "0",
-                    value: y,
-                    onChange: F,
-                    onFocus: D,
-                    onBlur: R,
-                    disabled: r || !s,
-                    className: u(
-                      _({ size: o }),
-                      r && "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": n.input,
+                    "data-testid": w.input,
                     minLength: 1,
                     maxLength: 79,
-                    title: "Amount"
+                    title: P({
+                      messageId: "components.smartNumberInput.inputTitle"
+                    })
                   }
                 ) }),
-                E ? /* @__PURE__ */ e(
-                  G,
-                  {
-                    active: V,
-                    size: o,
-                    disabled: r,
-                    token: t,
-                    showSelectDialog: p,
-                    chainId: N,
-                    network: I,
-                    maxLength: q,
-                    children: t?.symbol ?? "Select token"
-                  }
-                ) : null
+                le ? /* @__PURE__ */ l("div", { ref: b, className: "shrink-0", children: [
+                  /* @__PURE__ */ t(
+                    me,
+                    {
+                      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" })
+                    }
+                  ),
+                  v && m && de(
+                    /* @__PURE__ */ t(
+                      "div",
+                      {
+                        ref: V,
+                        style: ae,
+                        className: "overflow-hidden rounded-lg border border-gray-30 bg-gray-20 shadow-lg",
+                        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: d,
+                              children: [
+                                /* @__PURE__ */ t(
+                                  ue,
+                                  {
+                                    id: i,
+                                    checked: !!e.checked,
+                                    color: "secondary",
+                                    size: "md",
+                                    className: "shrink-0",
+                                    onCheckedChange: () => e.onSelect()
+                                  }
+                                ),
+                                /* @__PURE__ */ l(
+                                  "label",
+                                  {
+                                    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,
+                                      /* @__PURE__ */ t("span", { className: "truncate", children: e.label })
+                                    ]
+                                  }
+                                )
+                              ]
+                            },
+                            n
+                          ) : /* @__PURE__ */ l(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                e.onSelect(), I(!1);
+                              },
+                              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 })
+                              ]
+                            },
+                            n
+                          );
+                        })
+                      }
+                    ),
+                    document.body
+                  )
+                ] }) : null
               ]
             }
-          )
+          ),
+          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;
+          })()
         ]
       }
     );
   }
 );
-A.displayName = "SmartNumberInput";
+Le.displayName = "SmartNumberInput";
 export {
-  A as SmartNumberInput
+  Le as SmartNumberInput
 };