@gearbox-protocol/ui-kit 3.14.0-next.46 → 3.14.0-next.47

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("@gearbox-protocol/sdk"),f=require("class-variance-authority");require("react");const H=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");const _=require("../status-elements/status-elements.cjs"),a=15e3,l=11e3,g=10500,d=e=>{if(e)return e>=a?"good":e>l?"medium":e>g?"bad":e>u.PERCENTAGE_FACTOR?"critical":"liquidation"},A=f.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 C({value:e,debt:o,decimals:m=3,zone:t,zoneType:i="color",className:q,...v}){const s=o!==void 0&&o===0n,r=!s&&i==="color"?t===void 0?d(e):t:void 0,c=r===void 0?void 0:r===null?"unset":r,x=()=>{if(s)return"N/A";const F=Number(e);return u.formatPercentage(F,m)};return n.jsxs("span",{className:H.cn(A(c!==void 0?{zone:c}:{}),q),...v,children:[t&&i==="bars"&&n.jsx("span",{className:"mr-6 shrink-0",children:n.jsx(_.StatusBars,{zone:t})}),x()]})}exports.BAD_HF=l;exports.GOOD_HF=a;exports.HealthFactor=C;exports.getHFZones=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@gearbox-protocol/sdk"),h=require("class-variance-authority");require("react");const j=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");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=h.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:q=3,zone:e,zoneType:s="color",className:x,...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,_=()=>{if(n)return"N/A";const g=Number(t);return u.formatPercentage(g,q)};return r.jsxs("span",{className:j.cn(D(c!==void 0?{zone:c}:{}),x),...v,children:[f&&r.jsx("span",{className:"mr-6 shrink-0",children:r.jsx(a.StatusBars,{zone:e})}),_(),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/health-factor/health-factor.js

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

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

@@ -18,21 +18,24 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
     /** Pre-computed zone; if not set, derived from value. */
     zone?: HFZones | null;
     /**
-     * How to indicate zone: "color" (text color only) or "bars" (StatusBars before value).
+     * How to indicate zone: "color" (text color only), "bars" (StatusBars before value),
+     * or "dot" (HealthDot after value, text stays default color).
      * @default "color"
      */
-    zoneType?: "color" | "bars";
+    zoneType?: "color" | "bars" | "dot";
 }
 /**
  * HealthFactor — displays health factor value with optional zone color or StatusBars.
  *
  * @usage
  * Use for account/collateral health: value in basis points, zero debt shows "N/A".
- * zoneType "color" colors the text; zoneType "bars" shows StatusBars (and optional color).
+ * zoneType "color" colors the text; zoneType "bars" shows StatusBars;
+ * zoneType "dot" shows a HealthDot dot after the value while keeping text default color.
  *
  * @example
  * ```tsx
  * <HealthFactor value={15000} debt={1000000n} />
+ * <HealthFactor value={15000} debt={1000000n} zoneType="dot" zone="good" />
  * <HealthFactor value={12000} debt={1000000n} zoneType="bars" zone="medium" />
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```

package/package.json

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