@gearbox-protocol/permissionless-ui 1.22.0-next.40 → 1.22.0-next.41

package/dist/esm/components/status-elements/status-elements.js

@@ -1,48 +1,66 @@
 import { jsx as a } from "react/jsx-runtime";
+import { cva as u } from "class-variance-authority";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-const s = {
+const d = {
   good: "bg-success",
   medium: "bg-warning",
   bad: "bg-destructive",
   critical: "bg-destructive",
   liquidation: "bg-liquidation"
-}, l = {
-  good: 3,
-  medium: 2,
-  bad: 1,
-  critical: 1,
-  liquidation: 1
-}, u = 3;
-function b({ zone: t, size: i = 8 }) {
+};
+function O({ zone: i, size: t = 8 }) {
   return /* @__PURE__ */ a(
     "div",
     {
-      className: o("rounded-full shrink-0", s[t]),
-      style: { width: i, height: i },
+      className: o("rounded-full shrink-0", d[i]),
+      style: { width: t, height: t },
       "aria-hidden": !0
     }
   );
 }
-function v({ zone: t }) {
-  const i = l[t], n = s[t], c = ["first", "second", "third"], d = Array.from({ length: u }, (e, r) => ({
-    key: c[r],
-    isActive: r < i
-  })).reverse();
-  return /* @__PURE__ */ a("div", { className: "flex w-2 flex-wrap gap-0.5", "aria-hidden": !0, children: d.map(({ key: e, isActive: r }) => /* @__PURE__ */ a(
-    "div",
-    {
-      className: o(
-        "h-[3px] w-full min-w-[3px] flex-1 rounded-[1.5px]",
-        r ? n : "bg-gray-50"
-      )
-    },
-    e
-  )) });
+const l = {
+  good: 3,
+  medium: 2,
+  bad: 1,
+  critical: 1,
+  liquidation: 1
+}, g = 3, m = {
+  good: "success",
+  medium: "warning",
+  bad: "destructive",
+  critical: "destructive",
+  liquidation: "liquidation"
+}, b = u(
+  [
+    "h-[3px] rounded-[1.5px]",
+    "w-full max-w-full grow-0 shrink-0 basis-full"
+  ].join(" "),
+  {
+    variants: {
+      color: {
+        success: "bg-success",
+        warning: "bg-warning",
+        destructive: "bg-destructive",
+        liquidation: "bg-liquidation",
+        "gray-50": "bg-gray-50"
+      }
+    }
+  }
+);
+function B({ zone: i }) {
+  const t = l[i], e = m[i], n = Array.from({ length: g }, (s, r) => {
+    const c = r < t;
+    return {
+      key: r,
+      color: c ? e : "gray-50"
+    };
+  }).reverse();
+  return /* @__PURE__ */ a("div", { className: o("flex flex-wrap gap-0.5 w-2"), "aria-hidden": !0, children: n.map(({ key: s, color: r }) => /* @__PURE__ */ a("div", { className: b({ color: r }) }, s)) });
 }
 export {
-  b as HealthDot,
-  v as StatusBars
+  O as HealthDot,
+  B as StatusBars
 };

package/dist/esm/components/vertical-indicator/vertical-indicator.js

@@ -1,55 +1,60 @@
-import { jsxs as e, jsx as t, Fragment as v } from "react/jsx-runtime";
-import { cva as m } from "class-variance-authority";
-import * as w from "react";
-import { faArrowRight as V } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as y } from "../icons/fa-icon.js";
+import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { cva as l } from "class-variance-authority";
+import * as V from "react";
 import "@gearbox-protocol/sdk";
-import { cn as r } from "../../utils/cn.js";
+import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import { HelpTip as I } from "../help-tip/help-tip.js";
-const j = m("flex flex-nowrap gap-3 items-center", {
-  variants: {
-    align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end"
-    }
-  },
-  defaultVariants: {
-    align: "start"
+import { Description as f } from "../description/description.js";
+import { HelpTip as v } from "../help-tip/help-tip.js";
+const y = l(
+  ["flex flex-nowrap", "w-full max-w-full grow-0 shrink-0 basis-full"].join(
+    " "
+  ),
+  {
+    variants: {
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        baseline: "items-baseline"
+      }
+    },
+    defaultVariants: { align: "start" }
   }
-}), z = m("text-foreground", {
-  variants: {
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-base",
-      unset: ""
-    }
-  },
-  defaultVariants: {
-    size: "default"
+), k = l(
+  "flex items-center grow shrink-0 basis-[0%] text-left text-foreground",
+  {
+    variants: {
+      size: {
+        xs: "text-xs leading-[14px]",
+        sm: "text-sm leading-[17px]",
+        default: "text-base leading-[19px]",
+        unset: "text-[length:unset] leading-[unset]"
+      }
+    },
+    defaultVariants: { size: "default" }
   }
-}), x = m("text-right", {
+), u = l("text-right font-medium", {
   variants: {
     size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-base",
-      unset: ""
+      xs: "text-xs leading-[14px]",
+      sm: "text-sm leading-[17px]",
+      default: "text-base leading-[19px]",
+      unset: "text-[length:unset] leading-[unset]"
     },
     weight: {
       normal: "font-normal",
       medium: "font-medium",
-      unset: ""
+      unset: "[font-weight:unset]"
     },
     color: {
       default: "text-foreground",
-      muted: "text-muted-foreground",
-      success: "text-green-500",
-      warning: "text-yellow-500",
+      muted: "text-gray-70",
+      success: "text-success",
+      warning: "text-warning",
       alert: "text-destructive",
-      primary: "text-primary"
+      primary: "text-primary",
+      secondary: "text-secondary-foreground"
     }
   },
   defaultVariants: {
@@ -57,75 +62,70 @@ const j = m("flex flex-nowrap gap-3 items-center", {
     weight: "medium",
     color: "default"
   }
-}), R = w.forwardRef(
+}), j = V.forwardRef(
   ({
-    className: u,
-    align: p,
-    label: a,
-    description: s,
-    valueDescription: l,
-    tip: o,
-    value: d,
-    valueTo: i,
-    size: n = "default",
+    className: g,
+    align: h,
+    label: s,
+    description: n,
+    valueDescription: m,
+    tip: d,
+    value: o,
+    valueTo: r,
+    size: i = "sm",
     weight: c = "medium",
-    color: f = "default",
-    onPointerEnterTip: g,
-    ...h
-  }, N) => /* @__PURE__ */ e(
+    color: x = "default",
+    onPointerEnterTip: p,
+    ...w
+  }, N) => /* @__PURE__ */ t(
     "div",
     {
       ref: N,
-      className: r(j({ align: p }), u),
-      ...h,
+      className: a(y({ align: h }), g),
+      ...w,
       children: [
-        (a || s) && /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 h-min", children: [
-          a && /* @__PURE__ */ e(
+        (s || n) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
+          s && /* @__PURE__ */ t("div", { className: a(k({ size: i })), children: [
+            s,
+            d && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(v, { onPointerEnter: p, children: d }) })
+          ] }),
+          n && /* @__PURE__ */ e(f, { className: "text-left", children: n })
+        ] }),
+        o && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
+          /* @__PURE__ */ t(
             "div",
             {
-              className: r(
-                "flex items-center gap-2 whitespace-nowrap",
-                z({ size: n })
+              className: a(
+                "flex flex-nowrap",
+                "w-full max-w-full grow-0 shrink-0 basis-full",
+                "justify-end items-center"
               ),
               children: [
-                a,
-                o && /* @__PURE__ */ t(I, { onPointerEnter: g, children: o })
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      u({ size: i, weight: c, color: x }),
+                      r && "line-through [&>*]:line-through"
+                    ),
+                    children: o
+                  }
+                ),
+                r && /* @__PURE__ */ t(b, { children: [
+                  /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
+                  /* @__PURE__ */ e("span", { className: a(u({ size: i, weight: c, color: x })), children: r })
+                ] })
               ]
             }
           ),
-          s && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-left", children: s })
-        ] }),
-        d && /* @__PURE__ */ e("div", { className: "flex flex-col flex-auto", children: [
-          /* @__PURE__ */ e("div", { className: "flex flex-nowrap gap-3 justify-end items-center", children: [
-            /* @__PURE__ */ t(
-              "span",
-              {
-                className: r(
-                  x({ size: n, weight: c, color: f }),
-                  i && "line-through opacity-60"
-                ),
-                children: d
-              }
-            ),
-            i && /* @__PURE__ */ e(v, { children: [
-              /* @__PURE__ */ t(
-                y,
-                {
-                  icon: V,
-                  className: "size-3 text-muted-foreground"
-                }
-              ),
-              /* @__PURE__ */ t("span", { className: r(x({ size: n, weight: c, color: f })), children: i })
-            ] })
-          ] }),
-          l && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right", children: l })
+          m && /* @__PURE__ */ e(f, { className: "text-right", children: m })
         ] })
       ]
     }
   )
 );
-R.displayName = "VerticalIndicator";
+j.displayName = "VerticalIndicator";
 export {
-  R as VerticalIndicator,
-  j as verticalIndicatorVariants
+  j as VerticalIndicator,
+  y as verticalIndicatorVariants
 };