@gearbox-protocol/ui-kit 4.0.0-next.47 → 4.0.0-next.48

package/dist/cjs/components/base/health-factor-block/health-factor-block.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("../text/use-title-text.cjs"),d=require("../../fadeout-loading/fadeout-loading.cjs"),u=require("../../health-factor/health-factor.cjs"),h=require("../../typed-intl/index.cjs"),v=require("../../vertical-indicator/vertical-indicator.cjs"),m=require("../../../utils/format.cjs"),t=require("./constants.cjs");function j({healthFactor:o,healthFactorTo:s,debt:l,debtTo:x,approximate:c,zone:n,isLoading:r,title:i,tip:p,testId:F}){const T=_.useTitleText(),a=s!==void 0;return e.jsx(v.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":F??t.HealthFactorBlockTest.root,label:i!==void 0?T(i):e.jsx(h.FormattedMessageTyped,{messageId:"components.healthFactorBlock.label"}),tip:p??e.jsx(h.FormattedMessageTyped,{messageId:"components.healthFactorBlock.tip"}),value:e.jsx(d.FadeoutLoading,{loading:r,children:o===void 0?e.jsx("span",{"data-testid":t.HealthFactorBlockTest.value,children:"—"}):e.jsxs("span",{className:"inline-flex items-center","data-testid":t.HealthFactorBlockTest.value,children:[c&&!a?e.jsx("span",{className:"mr-0.5",children:m.APPROXIMATE_SYMBOL}):null,e.jsx(u.HealthFactor,{value:o,debt:l,zone:a?void 0:n})]})}),valueTo:a?e.jsx(d.FadeoutLoading,{loading:r,children:e.jsxs("span",{className:"inline-flex items-center","data-testid":t.HealthFactorBlockTest.valueTo,children:[c?e.jsx("span",{className:"mr-0.5",children:m.APPROXIMATE_SYMBOL}):null,e.jsx(u.HealthFactor,{value:s,debt:x??l,zone:n})]})}):void 0})}exports.HealthFactorBlockTest=t.HealthFactorBlockTest;exports.HealthFactorBlock=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("../text/use-title-text.cjs"),d=require("../../fadeout-loading/fadeout-loading.cjs"),u=require("../../health-factor/health-factor.cjs"),h=require("../../typed-intl/index.cjs"),T=require("../../vertical-indicator/vertical-indicator.cjs"),t=require("./constants.cjs");function _({healthFactor:o,healthFactorTo:s,debt:c,debtTo:m,approximate:l,zone:n,isLoading:r,title:i,tip:x,testId:p}){const F=v.useTitleText(),a=s!==void 0;return e.jsx(T.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":p??t.HealthFactorBlockTest.root,label:i!==void 0?F(i):e.jsx(h.FormattedMessageTyped,{messageId:"components.healthFactorBlock.label"}),tip:x??e.jsx(h.FormattedMessageTyped,{messageId:"components.healthFactorBlock.tip"}),value:e.jsx(d.FadeoutLoading,{loading:r,children:o===void 0?e.jsx("span",{"data-testid":t.HealthFactorBlockTest.value,children:"—"}):e.jsx("span",{className:"inline-flex items-center","data-testid":t.HealthFactorBlockTest.value,children:e.jsx(u.HealthFactor,{value:o,debt:c,zone:a?void 0:n,approximate:l&&!a})})}),valueTo:a?e.jsx(d.FadeoutLoading,{loading:r,children:e.jsx("span",{className:"inline-flex items-center","data-testid":t.HealthFactorBlockTest.valueTo,children:e.jsx(u.HealthFactor,{value:s,debt:m??c,zone:n,approximate:l})})}):void 0})}exports.HealthFactorBlockTest=t.HealthFactorBlockTest;exports.HealthFactorBlock=_;

package/dist/cjs/components/health-factor/health-factor.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@gearbox-protocol/sdk/onchain"),g=require("class-variance-authority");require("react");const j=require("../../utils/cn.cjs");require("sonner");require("luxon");require("../../utils/z-index.cjs");const a=require("../status-elements/status-elements.cjs"),l=15e3,d=11e3,A=10500,m=t=>{if(t)return t>=l?"good":t>d?"medium":t>A?"bad":t>u.PERCENTAGE_FACTOR?"critical":"liquidation"},D=g.cva("inline-flex items-center font-medium [text-decoration:inherit]",{variants:{zone:{good:"text-success",medium:"text-warning",bad:"text-destructive",critical:"text-destructive",liquidation:"text-liquidation",unset:"[color:unset]"}}});function b({value:t,debt:i,decimals:x=3,zone:e,zoneType:o="color",className:q,...v}){const n=i!==void 0&&i===0n,F=!n&&o==="color",H=!n&&e&&o==="dot",f=!n&&e&&o==="bars",s=F?e===void 0?m(t):e:void 0,c=s===void 0?void 0:s===null?"unset":s,h=()=>{if(n)return"N/A";const _=Number(t);return u.formatPercentage(_,x)};return r.jsxs("span",{className:j.cn(D(c!==void 0?{zone:c}:{}),q),...v,children:[f&&r.jsx("span",{className:"mr-6 shrink-0",children:r.jsx(a.StatusBars,{zone:e})}),h(),H&&r.jsx("span",{className:"ml-1.5",children:r.jsx(a.HealthDot,{zone:e})})]})}exports.BAD_HF=d;exports.GOOD_HF=l;exports.HealthFactor=b;exports.getHFZones=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@gearbox-protocol/sdk/onchain"),g=require("class-variance-authority");require("react");const j=require("../../utils/cn.cjs");require("sonner");const O=require("../../utils/format.cjs");require("luxon");require("../../utils/z-index.cjs");const a=require("../status-elements/status-elements.cjs"),l=15e3,d=11e3,D=10500,m=t=>{if(t)return t>=l?"good":t>d?"medium":t>D?"bad":t>u.PERCENTAGE_FACTOR?"critical":"liquidation"},N=g.cva("inline-flex items-center font-medium [text-decoration:inherit]",{variants:{zone:{good:"text-success",medium:"text-warning",bad:"text-destructive",critical:"text-destructive",liquidation:"text-liquidation",unset:"[color:unset]"}}});function b({value:t,debt:i,decimals:x=3,zone:e,zoneType:s="color",approximate:q,className:v,..._}){const n=i!==void 0&&i===0n,f=!n&&s==="color",h=!n&&e&&s==="dot",F=!n&&e&&s==="bars",o=f?e===void 0?m(t):e:void 0,c=o===void 0?void 0:o===null?"unset":o,H=()=>{if(n)return"N/A";const A=Number(t);return u.formatPercentage(A,x)};return r.jsxs("span",{className:j.cn(N(c!==void 0?{zone:c}:{}),v),..._,children:[F&&r.jsx("span",{className:"mr-6 shrink-0",children:r.jsx(a.StatusBars,{zone:e})}),q&&!n?r.jsx("span",{className:"mr-0.5",children:O.APPROXIMATE_SYMBOL}):null,H(),h&&r.jsx("span",{className:"ml-1.5",children:r.jsx(a.HealthDot,{zone:e})})]})}exports.BAD_HF=d;exports.GOOD_HF=l;exports.HealthFactor=b;exports.getHFZones=m;

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

@@ -1,72 +1,67 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useTitleText as x } from "../text/use-title-text.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useTitleText as g } from "../text/use-title-text.js";
 import { FadeoutLoading as c } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthFactor as p } from "../../health-factor/health-factor.js";
-import { FormattedMessageTyped as u } from "../../typed-intl/index.js";
-import { VerticalIndicator as B } from "../../vertical-indicator/vertical-indicator.js";
-import { APPROXIMATE_SYMBOL as v } from "../../../utils/format.js";
+import { HealthFactor as m } from "../../health-factor/health-factor.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as x } from "../../vertical-indicator/vertical-indicator.js";
 import { HealthFactorBlockTest as t } from "./constants.js";
-function j({
-  healthFactor: o,
-  healthFactorTo: l,
-  debt: i,
-  debtTo: f,
+function N({
+  healthFactor: a,
+  healthFactorTo: i,
+  debt: l,
+  debtTo: u,
   approximate: r,
-  zone: s,
-  isLoading: n,
+  zone: n,
+  isLoading: s,
   title: d,
-  tip: h,
-  testId: T
+  tip: v,
+  testId: f
 }) {
-  const g = x(), a = l !== void 0;
+  const h = g(), o = i !== void 0;
   return /* @__PURE__ */ e(
-    B,
+    x,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": T ?? t.root,
-      label: d !== void 0 ? g(d) : /* @__PURE__ */ e(u, { messageId: "components.healthFactorBlock.label" }),
-      tip: h ?? /* @__PURE__ */ e(u, { messageId: "components.healthFactorBlock.tip" }),
-      value: /* @__PURE__ */ e(c, { loading: n, children: o === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ m(
+      "data-testid": f ?? t.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.label" }),
+      tip: v ?? /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.tip" }),
+      value: /* @__PURE__ */ e(c, { loading: s, children: a === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ e(
         "span",
         {
           className: "inline-flex items-center",
           "data-testid": t.value,
-          children: [
-            r && !a ? /* @__PURE__ */ e("span", { className: "mr-0.5", children: v }) : null,
-            /* @__PURE__ */ e(
-              p,
-              {
-                value: o,
-                debt: i,
-                zone: a ? void 0 : s
-              }
-            )
-          ]
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: a,
+              debt: l,
+              zone: o ? void 0 : n,
+              approximate: r && !o
+            }
+          )
         }
       ) }),
-      valueTo: a ? /* @__PURE__ */ e(c, { loading: n, children: /* @__PURE__ */ m(
+      valueTo: o ? /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e(
         "span",
         {
           className: "inline-flex items-center",
           "data-testid": t.valueTo,
-          children: [
-            r ? /* @__PURE__ */ e("span", { className: "mr-0.5", children: v }) : null,
-            /* @__PURE__ */ e(
-              p,
-              {
-                value: l,
-                debt: f ?? i,
-                zone: s
-              }
-            )
-          ]
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: i,
+              debt: u ?? l,
+              zone: n,
+              approximate: r
+            }
+          )
         }
       ) }) : void 0
     }
   );
 }
 export {
-  j as HealthFactorBlock,
+  N as HealthFactorBlock,
   t as HealthFactorBlockTest
 };

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

@@ -1,16 +1,17 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as h, formatPercentage as C } from "@gearbox-protocol/sdk/onchain";
-import { cva as F } from "class-variance-authority";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as A, formatPercentage as N } from "@gearbox-protocol/sdk/onchain";
+import { cva as C } from "class-variance-authority";
 import "react";
-import { cn as H } from "../../utils/cn.js";
+import { cn as F } from "../../utils/cn.js";
 import "sonner";
+import { APPROXIMATE_SYMBOL as H } from "../../utils/format.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { StatusBars as N, HealthDot as g } from "../status-elements/status-elements.js";
-const A = 15e3, D = 11e3, b = 10500, w = (t) => {
+import { StatusBars as g, HealthDot as D } from "../status-elements/status-elements.js";
+const O = 15e3, _ = 11e3, b = 10500, w = (t) => {
   if (t)
-    return t >= A ? "good" : t > D ? "medium" : t > b ? "bad" : t > h ? "critical" : "liquidation";
-}, V = F(
+    return t >= O ? "good" : t > _ ? "medium" : t > b ? "bad" : t > A ? "critical" : "liquidation";
+}, B = C(
   "inline-flex items-center font-medium [text-decoration:inherit]",
   {
     variants: {
@@ -25,41 +26,43 @@ const A = 15e3, D = 11e3, b = 10500, w = (t) => {
     }
   }
 );
-function P({
+function S({
   value: t,
   debt: s,
   decimals: c = 3,
   zone: o,
-  zoneType: n = "color",
-  className: m,
+  zoneType: i = "color",
+  approximate: m,
+  className: l,
   ...u
 }) {
-  const r = s !== void 0 && s === 0n, d = !r && n === "color", l = !r && o && n === "dot", f = !r && o && n === "bars", e = d ? o === void 0 ? w(t) : o : void 0, a = e === void 0 ? void 0 : e === null ? "unset" : e, p = () => {
+  const r = s !== void 0 && s === 0n, d = !r && i === "color", f = !r && o && i === "dot", p = !r && o && i === "bars", e = d ? o === void 0 ? w(t) : o : void 0, a = e === void 0 ? void 0 : e === null ? "unset" : e, v = () => {
     if (r) return "N/A";
-    const v = Number(t);
-    return C(v, c);
+    const x = Number(t);
+    return N(x, c);
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ h(
     "span",
     {
-      className: H(
-        V(
+      className: F(
+        B(
           a !== void 0 ? { zone: a } : {}
         ),
-        m
+        l
       ),
       ...u,
       children: [
-        f && /* @__PURE__ */ i("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ i(N, { zone: o }) }),
-        p(),
-        l && /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(g, { zone: o }) })
+        p && /* @__PURE__ */ n("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ n(g, { zone: o }) }),
+        m && !r ? /* @__PURE__ */ n("span", { className: "mr-0.5", children: H }) : null,
+        v(),
+        f && /* @__PURE__ */ n("span", { className: "ml-1.5", children: /* @__PURE__ */ n(D, { zone: o }) })
       ]
     }
   );
 }
 export {
-  D as BAD_HF,
-  A as GOOD_HF,
-  P as HealthFactor,
+  _ as BAD_HF,
+  O as GOOD_HF,
+  S as HealthFactor,
   w as getHFZones
 };

package/dist/types/components/base/health-factor-block/health-factor-block.d.ts

@@ -14,10 +14,10 @@ export interface HealthFactorBlockProps {
     /** Debt after the operation (defaults to `debt`). */
     readonly debtTo?: bigint;
     /**
-     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}, for a factor the
-     * operation projects rather than promises. Only the projected side is
-     * marked: on a `from → to` row the "from" is where the account stands now,
-     * which is measured, not estimated.
+     * Marks the figure as projected rather than promised, with a leading `≈` in
+     * the factor's own colour. Only the projected side is marked: on a
+     * `from → to` row the "from" is where the account stands now, which is
+     * measured, not estimated.
      */
     readonly approximate?: boolean;
     /** Pre-computed zone; if not set, derived from the value. */

package/dist/types/components/health-factor/health-factor.d.ts

@@ -23,6 +23,15 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
      * @default "color"
      */
     zoneType?: "color" | "bars" | "dot";
+    /**
+     * Marks the figure as projected rather than measured, with a leading `≈`.
+     *
+     * Drawn here, inside the zone-colored span, because the symbol belongs to the
+     * number: a caller placing it beside this component leaves it uncolored while
+     * the value it qualifies is red. Suppressed on a zero debt, where there is no
+     * factor to approximate — only "N/A".
+     */
+    approximate?: boolean;
 }
 /**
  * HealthFactor — primitive under {@link HealthFactorBlock} (zones / bars / dot).
@@ -41,4 +50,4 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```
  */
-export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): React.JSX.Element;
+export declare function HealthFactor({ value, debt, decimals, zone, zoneType, approximate, className, ...props }: HealthFactorProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.47",
+  "version": "4.0.0-next.48",
   "description": "Internal UI components",
   "repository": {
     "type": "git",