@gearbox-protocol/permissionless-ui 1.22.0-next.28 → 1.22.0-next.29

package/dist/esm/components/pool-apy-tooltip/pool-apy-tooltip.js

@@ -1,83 +1,109 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { TooltipProvider as f, Tooltip as v, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
-function w({
-  children: o,
-  totalAPY: s,
-  extraAPYTotal: i,
-  loading7DAgo: c,
-  loading: h,
-  baseAPY: d,
-  extraAPY: a,
-  apy7DAgo: l,
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import { TooltipProvider as y, Tooltip as g, TooltipTrigger as N, TooltipContent as b } from "../tooltip/tooltip.js";
+function F({
+  children: c,
+  totalAPY: r,
+  extraAPYTotal: m,
+  loading7DAgo: u,
+  loading: x,
+  baseAPY: l,
+  extraAPY: t,
+  points: s,
+  apy7DAgo: i,
+  externalAPY: o,
   tokensList: p,
-  className: u
+  className: h
 }) {
-  if (!(s !== void 0 || d?.length || a?.length) || h)
-    return /* @__PURE__ */ t("span", { className: u, children: o });
-  const m = typeof l == "object" ? l?.value : l;
-  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ n(v, { children: [
-    /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t("span", { className: u, children: o }) }),
-    /* @__PURE__ */ t(g, { className: "max-w-xs", children: /* @__PURE__ */ n("div", { className: "space-y-2 text-sm", children: [
-      d && d.length > 0 && /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
-        d.map((e, r) => /* @__PURE__ */ n(
+  if (!(r !== void 0 || l?.length || t?.length || s?.length) || x)
+    return /* @__PURE__ */ a("span", { className: h, children: c });
+  const f = typeof i == "object" ? i?.value : i;
+  return /* @__PURE__ */ a(y, { children: /* @__PURE__ */ e(g, { children: [
+    /* @__PURE__ */ a(N, { asChild: !0, children: /* @__PURE__ */ a("span", { className: h, children: c }) }),
+    /* @__PURE__ */ a(b, { className: "max-w-xs", children: /* @__PURE__ */ e("div", { className: "space-y-2 text-sm", children: [
+      l && l.length > 0 && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
+        l.map((n, d) => /* @__PURE__ */ e(
           "div",
           {
             className: "flex justify-between gap-4",
             children: [
-              /* @__PURE__ */ t("span", { children: e.type === "supplyAPY" ? "Supply" : e.type || "Base" }),
-              /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-                e.apy.toFixed(2),
+              /* @__PURE__ */ a("span", { children: n.type === "supplyAPY" ? "Supply" : n.type || "Base" }),
+              /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+                n.apy.toFixed(2),
                 "%"
               ] })
             ]
           },
-          `base-${e.type || r}-${e.apy}`
+          `base-${n.type || d}-${n.apy}`
         ))
       ] }),
-      a && a.length > 0 && /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Rewards" }),
-        a.map((e, r) => {
-          const x = e.token && p ? p[e.token]?.symbol : e.token;
-          return /* @__PURE__ */ n(
+      t && t.length > 0 && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "Rewards" }),
+        t.map((n, d) => {
+          const v = n.token && p ? p[n.token]?.symbol : n.token;
+          return /* @__PURE__ */ e(
             "div",
             {
               className: "flex justify-between gap-4",
               children: [
-                /* @__PURE__ */ t("span", { children: x || e.type || "Reward" }),
-                /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-                  e.apy.toFixed(2),
+                /* @__PURE__ */ a("span", { children: v || n.type || "Reward" }),
+                /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+                  n.apy.toFixed(2),
                   "%"
                 ] })
               ]
             },
-            `extra-${e.token || r}-${e.apy}`
+            `extra-${n.token || d}-${n.apy}`
           );
         }),
-        i !== void 0 && /* @__PURE__ */ n("div", { className: "flex justify-between gap-4 text-muted-foreground", children: [
-          /* @__PURE__ */ t("span", { children: "Total Extra" }),
-          /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-            i.toFixed(2),
+        m !== void 0 && /* @__PURE__ */ e("div", { className: "flex justify-between gap-4 text-muted-foreground", children: [
+          /* @__PURE__ */ a("span", { children: "Total Extra" }),
+          /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+            m.toFixed(2),
             "%"
           ] })
         ] })
       ] }),
-      s !== void 0 && /* @__PURE__ */ n("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
-        /* @__PURE__ */ t("span", { children: "Total APY" }),
-        /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-          s.toFixed(2),
+      o && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "External" }),
+        /* @__PURE__ */ e("div", { className: "flex justify-between gap-4", children: [
+          /* @__PURE__ */ a("span", { children: o.name }),
+          /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+            o.apy.toFixed(2),
+            "%"
+          ] })
+        ] })
+      ] }),
+      s && s.length > 0 && /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ a("div", { className: "font-medium text-muted-foreground mb-1", children: "Points" }),
+        s.map((n, d) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex justify-between gap-4",
+            children: [
+              /* @__PURE__ */ a("span", { children: n.name }),
+              /* @__PURE__ */ a("span", { className: "tabular-nums", children: n.amount })
+            ]
+          },
+          `point-${n.name}-${d}`
+        ))
+      ] }),
+      r !== void 0 && /* @__PURE__ */ e("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
+        /* @__PURE__ */ a("span", { children: "Total APY" }),
+        /* @__PURE__ */ e("span", { className: "tabular-nums", children: [
+          r.toFixed(2),
           "%"
         ] })
       ] }),
-      m !== void 0 && !c && /* @__PURE__ */ n("div", { className: "text-xs text-muted-foreground", children: [
+      f !== void 0 && !u && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: [
         "7d ago: ",
-        m.toFixed(2),
+        f.toFixed(2),
         "%"
       ] }),
-      c && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground", children: "Loading 7d data..." })
+      u && /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: "Loading 7d data..." })
     ] }) })
   ] }) });
 }
 export {
-  w as PoolAPYTooltip
+  F as PoolAPYTooltip
 };

package/dist/esm/components/table/grid-table.js

@@ -1,10 +1,10 @@
 import { jsx as l } from "react/jsx-runtime";
-import { cva as c } from "class-variance-authority";
+import { cva as u } from "class-variance-authority";
 import * as r from "react";
-import { Col as h } from "../layout/col/col.js";
-import { Grid as T } from "../layout/grid/grid.js";
+import { Col as T } from "../layout/col/col.js";
+import { Grid as G } from "../layout/grid/grid.js";
 import { cn as s } from "../../utils/cn.js";
-const V = c("w-full", {
+const B = u("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -15,20 +15,20 @@ const V = c("w-full", {
   defaultVariants: {
     size: "default"
   }
-}), C = r.forwardRef(
-  ({ className: e, size: t, cols: a = 12, gap: o = 0, ...i }, n) => /* @__PURE__ */ l("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ l(
-    T,
+}), V = r.forwardRef(
+  ({ className: e, size: t, cols: a = 12, gap: d = 0, ...i }, n) => /* @__PURE__ */ l("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ l(
+    G,
     {
       ref: n,
       cols: a,
-      gap: o,
-      className: s(V({ size: t, className: e })),
+      gap: d,
+      className: s(B({ size: t, className: e })),
       ...i
     }
   ) })
 );
-C.displayName = "GridTable";
-const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+V.displayName = "GridTable";
+const C = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -43,8 +43,8 @@ const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-H.displayName = "GridTableHeader";
-const R = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+C.displayName = "GridTableHeader";
+const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -52,8 +52,8 @@ const R = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-R.displayName = "GridTableBody";
-const D = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+H.displayName = "GridTableBody";
+const R = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -64,39 +64,39 @@ const D = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-D.displayName = "GridTableFooter";
-const B = r.forwardRef(
+R.displayName = "GridTableFooter";
+const D = r.forwardRef(
   ({
     className: e,
     cols: t,
     gap: a = 0,
-    last: o,
+    last: d,
     height: i,
     hideValue: n,
-    noHover: v,
+    noHover: m,
     noRound: b,
     onRowClick: f,
-    style: u,
-    children: p,
-    ...g
-  }, y) => {
-    const m = typeof i == "number" ? `${i}px` : i, w = r.useCallback(
-      (d) => {
-        !f || d.target.closest("a, button, input, select, textarea, [role='button']") || f(d);
+    style: p,
+    children: g,
+    ...y
+  }, x) => {
+    const c = typeof i == "number" ? `${i}px` : i, j = r.useCallback(
+      (o) => {
+        !f || o.target.closest("a, button, input, select, textarea, [role='button']") || f(o);
       },
       [f]
-    ), z = r.useCallback(
-      (d) => {
-        if (f && (d.key === "Enter" || d.key === " ")) {
-          if (d.preventDefault(), d.target.closest(
+    ), w = r.useCallback(
+      (o) => {
+        if (f && (o.key === "Enter" || o.key === " ")) {
+          if (o.preventDefault(), o.target.closest(
             "a, button, input, select, textarea, [role='button']"
           ))
             return;
-          f(d);
+          f(o);
         }
       },
       [f]
-    ), x = s(
+    ), h = s(
       "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
       // Bottom border via ::after with insets on first/last cells to avoid rounded corners
       "md:[&>*]:after:absolute md:[&>*]:after:bottom-0 md:[&>*]:after:inset-x-0 md:[&>*]:after:h-px md:[&>*]:after:bg-border",
@@ -105,14 +105,14 @@ const B = r.forwardRef(
         "md:[&>*:last-child]:after:right-3"
       ],
       // Hover background with optional rounded corners on first and last cells (unless noHover)
-      !v && [
+      !m && [
         "[&>*]:z-0",
         "[&>*]:before:absolute [&>*]:before:inset-0 [&>*]:before:-z-10 [&>*]:before:bg-muted/50 [&>*]:before:opacity-0 [&>*]:before:transition-opacity",
         "hover:[&>*]:before:opacity-100",
         // Only add rounded corners if noRound is not set
         !b && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
       ],
-      o && "md:[&>*]:after:hidden",
+      d && "md:[&>*]:after:hidden",
       n && "[&>*]:opacity-0"
     );
     return f ? (
@@ -120,40 +120,40 @@ const B = r.forwardRef(
       /* @__PURE__ */ l(
         "div",
         {
-          ref: y,
+          ref: x,
           role: "row",
           tabIndex: 0,
           className: s(
             // Use subgrid to inherit parent grid columns
             "grid grid-cols-subgrid col-span-full",
-            x,
+            h,
             "cursor-pointer",
             e
           ),
-          style: { ...u, ...m ? { height: m } : {} },
-          onClick: w,
-          onKeyDown: z,
-          ...g,
-          children: p
+          style: { ...p, ...c ? { height: c } : {} },
+          onClick: j,
+          onKeyDown: w,
+          ...y,
+          children: g
         }
       )
     ) : /* @__PURE__ */ l(
-      T,
+      G,
       {
-        ref: y,
+        ref: x,
         cols: t,
         gap: a,
-        className: s("contents", x, e),
-        style: { ...u, ...m ? { height: m } : {} },
-        ...g,
-        children: p
+        className: s("contents", h, e),
+        style: { ...p, ...c ? { height: c } : {} },
+        ...y,
+        children: g
       }
     );
   }
 );
-B.displayName = "GridTableRow";
-const F = c(
-  "flex items-center justify-startborder-b text-left align-middle font-medium text-muted-foreground !bg-transparent",
+D.displayName = "GridTableRow";
+const A = u(
+  "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
       size: {
@@ -165,26 +165,34 @@ const F = c(
         start: "justify-start",
         center: "justify-center",
         end: "justify-end"
+      },
+      gapBefore: {
+        sm: "pl-5",
+        md: "pl-10",
+        none: ""
       }
     },
     defaultVariants: {
       size: "default",
-      justify: "start"
+      justify: "start",
+      gapBefore: "none"
     }
   }
-), G = r.forwardRef(
-  ({ className: e, size: t, span: a = 1, justify: o = "start", ...i }, n) => /* @__PURE__ */ l(
-    h,
+), N = r.forwardRef(
+  ({ className: e, size: t, span: a = 1, justify: d = "start", gapBefore: i, ...n }, m) => /* @__PURE__ */ l(
+    T,
     {
-      ref: n,
+      ref: m,
       span: a,
-      className: s(F({ size: t, justify: o, className: e })),
-      ...i
+      className: s(
+        A({ size: t, justify: d, gapBefore: i, className: e })
+      ),
+      ...n
     }
   )
 );
-G.displayName = "GridTableHead";
-const K = c("align-middle", {
+N.displayName = "GridTableHead";
+const F = u("flex items-center align-middle", {
   variants: {
     size: {
       sm: "p-2",
@@ -192,27 +200,36 @@ const K = c("align-middle", {
       lg: "p-6"
     },
     textAlign: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
+      left: "text-left justify-start",
+      center: "text-center justify-center",
+      right: "text-right justify-end"
+    },
+    gapBefore: {
+      sm: "pl-5",
+      md: "pl-10",
+      none: ""
     }
   },
   defaultVariants: {
-    size: "default"
+    size: "default",
+    textAlign: "left",
+    gapBefore: "none"
   }
-}), N = r.forwardRef(
-  ({ className: e, size: t, span: a = 1, textAlign: o, ...i }, n) => /* @__PURE__ */ l(
-    h,
+}), v = r.forwardRef(
+  ({ className: e, size: t, span: a = 1, textAlign: d, gapBefore: i, ...n }, m) => /* @__PURE__ */ l(
+    T,
     {
-      ref: n,
+      ref: m,
       span: a,
-      className: s(K({ size: t, textAlign: o, className: e })),
-      ...i
+      className: s(
+        F({ size: t, textAlign: d, gapBefore: i, className: e })
+      ),
+      ...n
     }
   )
 );
-N.displayName = "GridTableCell";
-const A = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+v.displayName = "GridTableCell";
+const K = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -223,20 +240,20 @@ const A = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-A.displayName = "GridTableCaption";
-const q = N, J = G;
+K.displayName = "GridTableCaption";
+const q = v, J = N;
 export {
-  C as GridTable,
-  R as GridTableBody,
-  A as GridTableCaption,
-  N as GridTableCell,
-  D as GridTableFooter,
-  G as GridTableHead,
-  H as GridTableHeader,
-  B as GridTableRow,
+  V as GridTable,
+  H as GridTableBody,
+  K as GridTableCaption,
+  v as GridTableCell,
+  R as GridTableFooter,
+  N as GridTableHead,
+  C as GridTableHeader,
+  D as GridTableRow,
   q as Td,
   J as Th,
-  K as gridTableCellVariants,
-  F as gridTableHeadVariants,
-  V as gridTableVariants
+  F as gridTableCellVariants,
+  A as gridTableHeadVariants,
+  B as gridTableVariants
 };

package/dist/esm/components/table/table-sm.js

@@ -10,7 +10,7 @@ function h({
   ...l
 }) {
   return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", o), ...l, children: [
-    s && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground font-medium", children: s }),
+    s && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: s }),
     /* @__PURE__ */ e("div", { className: "text-sm", children: r })
   ] });
 }
@@ -21,10 +21,10 @@ function S({
   columnsMd: l,
   columns: a,
   className: n,
-  children: x,
-  ...g
+  children: p,
+  ...x
 }) {
-  const m = o, c = r ?? m, d = l ?? c, p = a ?? d;
+  const c = o, m = r ?? c, d = l ?? m, g = a ?? d;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -32,7 +32,7 @@ function S({
         "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
         n
       ),
-      ...g,
+      ...x,
       children: [
         s && /* @__PURE__ */ e("div", { className: "font-medium mb-2", children: s }),
         /* @__PURE__ */ e(
@@ -40,12 +40,12 @@ function S({
           {
             className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
-              "--grid-cols-xs": m,
-              "--grid-cols-sm": c,
+              "--grid-cols-xs": c,
+              "--grid-cols-sm": m,
               "--grid-cols-md": d,
-              "--grid-cols-lg": p
+              "--grid-cols-lg": g
             },
-            children: x
+            children: p
           }
         )
       ]

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

@@ -3,7 +3,7 @@ import { cva as d } from "class-variance-authority";
 import { ArrowDown as u } from "lucide-react";
 import * as l from "react";
 import { Button as g } from "../buttons/button/button.js";
-import { TooltipProvider as h, Tooltip as x, TooltipTrigger as T, TooltipContent as N } from "../tooltip/tooltip.js";
+import { TooltipProvider as x, Tooltip as h, TooltipTrigger as T, TooltipContent as N } from "../tooltip/tooltip.js";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
@@ -80,7 +80,7 @@ const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
 ));
 C.displayName = "TableRow";
 const H = d(
-  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input flex items-center",
   {
     variants: {
       size: {
@@ -104,7 +104,7 @@ const H = d(
   )
 );
 n.displayName = "TableHead";
-const V = d("align-middle", {
+const V = d("align-middle flex items-center", {
   variants: {
     size: {
       sm: "p-1",
@@ -145,7 +145,7 @@ const S = l.forwardRef(
     children: m,
     className: b,
     ...c
-  }, p) => /* @__PURE__ */ r(n, { ref: p, className: b, ...c, children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ i(x, { delayDuration: 200, children: [
+  }, p) => /* @__PURE__ */ r(n, { ref: p, className: b, ...c, children: /* @__PURE__ */ r(x, { children: /* @__PURE__ */ i(h, { delayDuration: 200, children: [
     /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ i(
       "div",
       {