@gearbox-protocol/permissionless-ui 1.22.7 → 1.23.1

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -126,8 +126,8 @@ import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
 import "../page-title/page-title.js";
-import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../rounded-image/rounded-image.js";

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

@@ -1,19 +1,34 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { Progress as c } from "../progress/progress.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as n } from "../../utils/cn.js";
+import { cn as i } from "../../utils/cn.js";
 import "sonner";
-import { percentTemplate as u } from "../../utils/format-money.js";
+import { percentTemplate as l } from "../../utils/format-money.js";
 import "luxon";
 import "../../utils/z-index.js";
+const x = (r) => r >= 90 ? "danger" : r >= 70 ? "warning" : r >= 50 ? "info" : "success";
 function C({
-  percent: t,
-  decimals: r = 2,
-  showColor: e = !0,
-  className: o,
-  ...i
+  percent: r,
+  decimals: e = 2,
+  showColor: o = !0,
+  showProgressBar: s = !0,
+  className: n,
+  ...m
 }) {
-  return /* @__PURE__ */ m("div", { className: n("font-medium", e ? t >= 90 ? "text-destructive" : t >= 70 ? "text-orange-500" : t >= 50 ? "text-yellow-600" : "text-green-600" : "", o), ...i, children: u(t, r) });
+  const a = () => o ? r >= 90 ? "text-destructive" : r >= 70 ? "text-warning" : r >= 50 ? "text-foreground" : "text-success" : "", u = Math.min(100, Math.max(0, r));
+  return /* @__PURE__ */ f("div", { className: i("flex min-w-0 flex-col gap-1", n), ...m, children: [
+    /* @__PURE__ */ t("div", { className: i("font-medium", a()), children: l(r, e) }),
+    s && /* @__PURE__ */ t(
+      c,
+      {
+        value: u,
+        variant: x(r),
+        size: "sm",
+        className: "w-16 shrink-0"
+      }
+    )
+  ] });
 }
 export {
   C as PercentIndicator

package/dist/esm/components/progress/progress.js

@@ -1,12 +1,12 @@
 import { jsxs as a, jsx as l } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-progress";
+import * as s from "@radix-ui/react-progress";
 import * as u from "react";
 import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
+import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-const p = u.forwardRef(
+const g = u.forwardRef(
   ({
     className: o,
     value: e,
@@ -14,8 +14,8 @@ const p = u.forwardRef(
     size: n = "default",
     showLabel: t = !1,
     ...m
-  }, d) => {
-    const f = {
+  }, f) => {
+    const d = {
       sm: "h-1",
       default: "h-2",
       lg: "h-3"
@@ -23,23 +23,24 @@ const p = u.forwardRef(
       default: "bg-primary",
       success: "bg-success",
       warning: "bg-warning",
-      danger: "bg-destructive"
+      danger: "bg-destructive",
+      info: "bg-foreground"
     };
-    return /* @__PURE__ */ a("div", { className: s("flex w-full items-center", t && "gap-3"), children: [
+    return /* @__PURE__ */ a("div", { className: r("flex w-full items-center", t && "gap-3"), children: [
       /* @__PURE__ */ l(
-        r.Root,
+        s.Root,
         {
-          ref: d,
-          className: s(
+          ref: f,
+          className: r(
             "relative w-full overflow-hidden rounded-full bg-secondary",
-            f[n],
+            d[n],
             o
           ),
           ...m,
           children: /* @__PURE__ */ l(
-            r.Indicator,
+            s.Indicator,
             {
-              className: s(
+              className: r(
                 "h-full w-full flex-1 transition-all",
                 c[i]
               ),
@@ -55,7 +56,7 @@ const p = u.forwardRef(
     ] });
   }
 );
-p.displayName = r.Root.displayName;
+g.displayName = s.Root.displayName;
 export {
-  p as Progress
+  g as Progress
 };

package/dist/esm/components/tab-control/tab-control.js

@@ -1,68 +1,68 @@
 import { jsx as f, jsxs as N, Fragment as S } from "react/jsx-runtime";
-import { useRef as b, useState as g, useCallback as p, useMemo as v, useEffect as w } from "react";
+import { useRef as m, useState as g, useCallback as p, useMemo as v, useEffect as w } from "react";
 import { useNavigationAdapter as T } from "../navigation-context/navigation-context.js";
 import "@gearbox-protocol/sdk";
-import { cn as m } from "../../utils/cn.js";
+import { cn as b } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
 function U(t) {
   if (!t) return null;
-  const { width: n = 0, height: i = 0 } = t?.getBoundingClientRect() || {}, s = t?.offsetTop || 0, o = t?.offsetLeft || 0;
-  return { width: n, height: i, left: o, top: s };
+  const { width: n = 0, height: i = 0 } = t?.getBoundingClientRect() || {}, o = t?.offsetTop || 0, s = t?.offsetLeft || 0;
+  return { width: n, height: i, left: s, top: o };
 }
 function $(t, n, i) {
-  const s = b(null), [o, u] = g(null), d = b(null), l = p((r) => {
-    u(r), d.current = r;
+  const o = m(null), [s, u] = g(null), l = m(null), d = p((r) => {
+    u(r), l.current = r;
   }, []);
   return w(() => {
     const r = i.current[t], e = () => {
-      const c = U(r), h = c?.height !== d.current?.height, x = c?.width !== d.current?.width, C = c?.left !== d.current?.left, y = c?.top !== d.current?.top;
-      (h || x || C || y) && l(c);
+      const c = U(r), h = c?.height !== l.current?.height, x = c?.width !== l.current?.width, y = c?.left !== l.current?.left, C = c?.top !== l.current?.top;
+      (h || x || y || C) && d(c);
     };
-    s.current = e, e();
+    o.current = e, e();
     const a = r ? new ResizeObserver(e) : null;
     return r && a?.observe(r), () => {
       r && a?.unobserve(r);
     };
-  }, [t, i, l]), w(() => {
+  }, [t, i, d]), w(() => {
     const r = n ? new ResizeObserver(() => {
-      s.current?.();
+      o.current?.();
     }) : null;
     return n && r?.observe(n), () => {
       n && r?.unobserve(n);
     };
-  }, [n]), o;
+  }, [n]), s;
 }
 function A({
   tabs: t,
   state: n,
-  variant: i = "auto",
-  showBorder: s = !0,
-  tabItemWrapPadding: o
+  showBorder: i = !0,
+  tabItemWrapPadding: o,
+  variant: s = "auto"
 }) {
-  const u = b(null), d = b({}), l = $(
+  const u = m(null), l = m({}), d = $(
     n.id,
     u.current,
-    d
+    l
   ), r = (e, a) => () => n.handleTabChange(e, a);
-  return /* @__PURE__ */ f("div", { className: "relative w-full flex flex-col flex-wrap", children: /* @__PURE__ */ N(
+  return /* @__PURE__ */ f("div", { className: "relative w-full flex flex-col flex-wrap overflow-y-hidden", children: /* @__PURE__ */ N(
     "div",
     {
       ref: u,
-      className: m(
-        "relative bottom-[-1px] w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
+      className: b(
+        "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
         "scrollbar-hidden",
-        s && "border-b border-border"
+        i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
       ),
       children: [
-        l && /* @__PURE__ */ f(
+        d && /* @__PURE__ */ f(
           "div",
           {
-            className: "absolute bottom-[-1px] left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none",
+            className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
             style: {
-              width: `${l.width}px`,
-              transform: `translate(${l.left}px)`
+              width: `${d.width}px`,
+              transform: `translate(${d.left}px)`
             }
           }
         ),
@@ -72,15 +72,15 @@ function A({
             "button",
             {
               ref: (x) => {
-                d.current[e.id] = x;
+                l.current[e.id] = x;
               },
               type: "button",
               onClick: e.disabled ? void 0 : r(e.id, a),
               disabled: e.disabled,
-              className: m(
+              className: b(
                 "flex items-center bg-transparent border-none shrink-0 text-foreground",
                 o ? "" : "p-0 pb-3.5",
-                i === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !h && "mr-10 max-[500px]:mr-8",
+                s === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !h && "mr-10 max-[500px]:mr-8",
                 e.disabled && "cursor-not-allowed",
                 !e.disabled && "cursor-pointer",
                 !e.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
@@ -99,14 +99,14 @@ function B({
   icon: t,
   label: n,
   selected: i,
-  textSize: s = "default",
-  amount: o
+  textSize: o = "default",
+  amount: s
 }) {
   return /* @__PURE__ */ N(S, { children: [
     t && /* @__PURE__ */ f(
       "div",
       {
-        className: m(
+        className: b(
           "mr-3",
           i ? "text-foreground" : "text-secondary-foreground"
         ),
@@ -116,39 +116,39 @@ function B({
     /* @__PURE__ */ f(
       "div",
       {
-        className: m(
+        className: b(
           "m-0 p-0 whitespace-nowrap",
-          s === "default" && "text-sm leading-[17px] font-normal",
-          s === "unset" && "text-[unset] leading-[unset] font-[unset]",
+          o === "default" && "text-sm leading-[17px] font-normal",
+          o === "unset" && "text-[unset] leading-[unset] font-[unset]",
           i ? "text-foreground" : "text-secondary-foreground"
         ),
         children: n
       }
     ),
-    !!o && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
+    !!s && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: s }) })
   ] });
 }
 function F(t, n = 0) {
-  const [i, s] = g(t), [o, u] = g(n), d = p((l, r) => {
-    s(l), u(r);
+  const [i, o] = g(t), [s, u] = g(n), l = p((d, r) => {
+    o(d), u(r);
   }, []);
-  return { id: i, index: o, handleTabChange: d };
+  return { id: i, index: s, handleTabChange: l };
 }
 function I(t) {
-  const { useLocation: n, useNavigate: i } = T(), { hash: s } = n(), o = i(), u = v(
+  const { useLocation: n, useNavigate: i } = T(), { hash: o } = n(), s = i(), u = v(
     () => t.reduce(
       (a, c, h) => (a[c.id] = { id: c.id, index: h }, a),
       {}
     ),
     [t]
-  ), d = v(() => s.slice(1).toLowerCase(), [s]), { id: l, index: r } = u[d] || {}, e = p(
+  ), l = v(() => o.slice(1).toLowerCase(), [o]), { id: d, index: r } = u[l] || {}, e = p(
     (a) => {
-      o(`#${a}`);
+      s(`#${a}`);
     },
-    [o]
+    [s]
   );
   return {
-    id: l,
+    id: d,
     index: r,
     handleTabChange: e
   };
@@ -158,19 +158,19 @@ function M({
   pathRoot: n,
   selectedSection: i
 }) {
-  const { useNavigate: s } = T(), o = s(), u = v(
+  const { useNavigate: o } = T(), s = o(), u = v(
     () => t.reduce(
       (e, a, c) => (e[a.id] = { id: a.id, index: c }, e),
       {}
     ),
     [t]
-  ), d = p(
+  ), l = p(
     (e) => {
-      o(`${n}/${e}`);
+      s(`${n}/${e}`);
     },
-    [o, n]
-  ), { id: l, index: r } = u[i] || {};
-  return { id: l, index: r, handleTabChange: d };
+    [s, n]
+  ), { id: d, index: r } = u[i] || {};
+  return { id: d, index: r, handleTabChange: l };
 }
 export {
   A as TabControl,

package/dist/esm/components/table/index.js

@@ -1,19 +1,18 @@
 import { EditButton as r } from "./edit-button.js";
 import { GridTableCellAsset as o, GridTableCellUpdatable as d, GridTableEditable as b } from "./editable-grid-table.js";
 import { TableCellAsset as i, TableCellUpdatable as T, TableEditable as p } from "./editable-table.js";
-import { GridErrorLine as G } from "./grid-error-line.js";
+import { GridErrorLine as m } from "./grid-error-line.js";
 import { GridLoadingLine as f } from "./grid-loading-line.js";
-import { GridTable as C, GridTableBody as s, GridTableCaption as H, GridTableCell as L, GridTableFooter as V, GridTableHead as g, GridTableHeader as E, GridTableRow as S, Td as u, Th as B, gridTableCellVariants as U, gridTableHeadVariants as w, gridTableVariants as y } from "./grid-table.js";
+import { GridTable as C, GridTableBody as s, GridTableCaption as H, GridTableCell as L, GridTableFooter as V, GridTableHead as g, GridTableHeader as E, GridTableRow as u, Td as B, Th as S, gridTableCellVariants as U, gridTableHeadVariants as w, gridTableVariants as y } from "./grid-table.js";
 import { GridTableLoader as F } from "./grid-table-loader.js";
-import { SortableHeadCell as h } from "./sortable-head-cell.js";
-import { SortingTableHead as j, Table as k, TableBody as q, TableCaption as v, TableCell as z, TableFooter as D, TableHead as I, TableHeader as J, TableRow as K, tableCellVariants as M, tableHeadVariants as N, tableVariants as O } from "./table.js";
-import { TableLoader as Q } from "./table-loader.js";
-import { TableLoaderGuard as X } from "./table-loader-guard.js";
-import { TableCellSm as Z, TableLineSm as _ } from "./table-sm.js";
-import { UpdatedValue as ee } from "./updated-value.js";
+import { SortingTableHead as h, Table as c, TableBody as j, TableCaption as k, TableCell as q, TableFooter as v, TableHead as z, TableHeader as D, TableRow as I, tableCellVariants as J, tableHeadVariants as K, tableVariants as M } from "./table.js";
+import { TableLoader as O } from "./table-loader.js";
+import { TableLoaderGuard as Q } from "./table-loader-guard.js";
+import { TableCellSm as X, TableLineSm as Y } from "./table-sm.js";
+import { UpdatedValue as _ } from "./updated-value.js";
 export {
   r as EditButton,
-  G as GridErrorLine,
+  m as GridErrorLine,
   f as GridLoadingLine,
   C as GridTable,
   s as GridTableBody,
@@ -26,31 +25,30 @@ export {
   g as GridTableHead,
   E as GridTableHeader,
   F as GridTableLoader,
-  S as GridTableRow,
-  h as SortableHeadCell,
-  j as SortingTableHead,
-  k as Table,
-  q as TableBody,
-  v as TableCaption,
-  z as TableCell,
+  u as GridTableRow,
+  h as SortingTableHead,
+  c as Table,
+  j as TableBody,
+  k as TableCaption,
+  q as TableCell,
   i as TableCellAsset,
-  Z as TableCellSm,
+  X as TableCellSm,
   T as TableCellUpdatable,
   p as TableEditable,
-  D as TableFooter,
-  I as TableHead,
-  J as TableHeader,
-  _ as TableLineSm,
-  Q as TableLoader,
-  X as TableLoaderGuard,
-  K as TableRow,
-  u as Td,
-  B as Th,
-  ee as UpdatedValue,
+  v as TableFooter,
+  z as TableHead,
+  D as TableHeader,
+  Y as TableLineSm,
+  O as TableLoader,
+  Q as TableLoaderGuard,
+  I as TableRow,
+  B as Td,
+  S as Th,
+  _ as UpdatedValue,
   U as gridTableCellVariants,
   w as gridTableHeadVariants,
   y as gridTableVariants,
-  M as tableCellVariants,
-  N as tableHeadVariants,
-  O as tableVariants
+  J as tableCellVariants,
+  K as tableHeadVariants,
+  M as tableVariants
 };

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

@@ -126,8 +126,8 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
-import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../rounded-image/rounded-image.js";

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

@@ -125,8 +125,8 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
-import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../rounded-image/rounded-image.js";