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

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 b } 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 = b("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, ...o }, 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 })),
-      ...i
+      gap: d,
+      className: s(B({ size: t, className: e })),
+      ...o
     }
   ) })
 );
-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,
@@ -36,13 +36,15 @@ const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
       "contents",
       // Full-width border for header (no insets)
       "[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border",
+      // Disable hover effect on header rows by default
+      "hover:[&>*>*]:before:!opacity-0",
       e
     ),
     ...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,
@@ -50,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,
@@ -62,55 +64,55 @@ 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,
-    height: i,
+    last: d,
+    height: o,
     hideValue: n,
-    noHover: v,
-    noRound: b,
+    noHover: m,
+    noRound: u,
     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 o == "number" ? `${o}px` : o, j = r.useCallback(
+      (i) => {
+        !f || i.target.closest("a, button, input, select, textarea, [role='button']") || f(i);
       },
       [f]
-    ), z = r.useCallback(
-      (d) => {
-        if (f && (d.key === "Enter" || d.key === " ")) {
-          if (d.preventDefault(), d.target.closest(
+    ), w = r.useCallback(
+      (i) => {
+        if (f && (i.key === "Enter" || i.key === " ")) {
+          if (i.preventDefault(), i.target.closest(
             "a, button, input, select, textarea, [role='button']"
           ))
             return;
-          f(d);
+          f(i);
         }
       },
       [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",
-      !b && [
+      !u && [
         "md:[&>*:first-child]:after:left-3",
         "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",
+        "[&>*]:before:absolute [&>*]:before:inset-x-0 [&>*]:before:top-0 [&>*]:before:bottom-px [&>*]: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"
+        !u && "[&>*: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 ? (
@@ -118,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 = b(
+  "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
       size: {
@@ -163,54 +165,71 @@ 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: o, ...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: o, className: e })
+      ),
+      ...n
     }
   )
 );
-G.displayName = "GridTableHead";
-const K = c("align-middle", {
+N.displayName = "GridTableHead";
+const F = b("flex items-center align-middle", {
   variants: {
     size: {
-      sm: "p-2",
+      sm: "px-1 py-2",
       default: "p-4",
       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: o, ...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: o, 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,
@@ -221,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/sortable-head-cell.js

@@ -1,24 +1,25 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { ArrowUp as a, ArrowDown as c, ArrowUpDown as i } from "lucide-react";
-function p({
-  title: e,
-  sortType: r,
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { faArrowUp as i, faArrowDown as c, faArrowsUpDown as l } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as r } from "../icons/fa-icon.js";
+function u({
+  title: s,
+  sortType: e,
   onSort: t,
-  className: s
+  className: n
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
       onClick: t,
-      className: `flex items-center justify-end gap-1 hover:text-foreground transition-colors cursor-pointer ${s || ""}`,
+      className: `flex items-center justify-end gap-1 hover:text-foreground transition-colors cursor-pointer ${n || ""}`,
       children: [
-        e,
-        r === "asc" ? /* @__PURE__ */ o(a, { className: "h-3.5 w-3.5" }) : r === "desc" ? /* @__PURE__ */ o(c, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ o(i, { className: "h-3.5 w-3.5 opacity-50" })
+        s,
+        e === "asc" ? /* @__PURE__ */ o(r, { icon: i, className: "size-3.5" }) : e === "desc" ? /* @__PURE__ */ o(r, { icon: c, className: "size-3.5" }) : /* @__PURE__ */ o(r, { icon: l, className: "size-3.5 opacity-50" })
       ]
     }
   );
 }
 export {
-  p as SortableHeadCell
+  u as SortableHeadCell
 };

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

@@ -1,22 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
-import { GridLoadingLine as d } from "./grid-loading-line.js";
-import { GridTableBody as a } from "./grid-table.js";
-function L({
+import { GridLoadingLine as a } from "./grid-loading-line.js";
+import { GridTableBody as f } from "./grid-table.js";
+function b({
   height: i = "70px",
   columns: e = 6,
   rows: r = 5,
-  className: m,
-  ...n
+  cellClassName: m,
+  className: n,
+  ...t
 }) {
-  return /* @__PURE__ */ o(a, { className: m, ...n, children: Array.from({ length: r }, (f, t) => /* @__PURE__ */ o(
-    d,
+  return /* @__PURE__ */ o(f, { className: n, ...t, children: Array.from({ length: r }, (p, d) => /* @__PURE__ */ o(
+    a,
     {
       height: i,
-      columns: e
+      columns: e,
+      cellClassName: m
     },
-    `${t}-${r}`
+    `${d}-${r}`
   )) });
 }
 export {
-  L as TableLoader
+  b as TableLoader
 };

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

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function h({
   title: s,
   className: o,
@@ -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

@@ -1,12 +1,14 @@
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 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 { Button as u } from "../buttons/button/button.js";
+import { faArrowDown as g } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as x } from "../icons/fa-icon.js";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as h, Tooltip as T, TooltipTrigger as N, TooltipContent as y } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const w = d("w-full caption-bottom", {
   variants: {
     size: {
@@ -18,7 +20,7 @@ const w = d("w-full caption-bottom", {
   defaultVariants: {
     size: "default"
   }
-}), y = l.forwardRef(
+}), v = l.forwardRef(
   ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ r(
     "table",
     {
@@ -28,8 +30,8 @@ const w = d("w-full caption-bottom", {
     }
   ) })
 );
-y.displayName = "Table";
-const v = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+v.displayName = "Table";
+const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "thead",
   {
     ref: e,
@@ -40,8 +42,8 @@ const v = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-v.displayName = "TableHeader";
-const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+R.displayName = "TableHeader";
+const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tbody",
   {
     ref: e,
@@ -49,8 +51,8 @@ const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-R.displayName = "TableBody";
-const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+z.displayName = "TableBody";
+const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tfoot",
   {
     ref: e,
@@ -61,8 +63,8 @@ const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-z.displayName = "TableFooter";
-const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+C.displayName = "TableFooter";
+const H = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tr",
   {
     ref: e,
@@ -78,9 +80,9 @@ const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-C.displayName = "TableRow";
-const H = d(
-  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
+H.displayName = "TableRow";
+const V = d(
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input flex items-center",
   {
     variants: {
       size: {
@@ -98,13 +100,13 @@ const H = d(
     "th",
     {
       ref: s,
-      className: o(H({ size: a, className: t })),
+      className: o(V({ size: a, className: t })),
       ...e
     }
   )
 );
 n.displayName = "TableHead";
-const V = d("align-middle", {
+const _ = d("align-middle flex items-center", {
   variants: {
     size: {
       sm: "p-1",
@@ -115,18 +117,18 @@ const V = d("align-middle", {
   defaultVariants: {
     size: "default"
   }
-}), _ = l.forwardRef(
+}), B = l.forwardRef(
   ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
     "td",
     {
       ref: s,
-      className: o(V({ size: a, className: t })),
+      className: o(_({ size: a, className: t })),
       ...e
     }
   )
 );
-_.displayName = "TableCell";
-const B = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+B.displayName = "TableCell";
+const F = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "caption",
   {
     ref: e,
@@ -134,7 +136,7 @@ const B = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-B.displayName = "TableCaption";
+F.displayName = "TableCaption";
 const S = l.forwardRef(
   ({
     title: t,
@@ -143,10 +145,10 @@ const S = l.forwardRef(
     setSort: s,
     placement: f = "right",
     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: [
-    /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ i(
+    className: c,
+    ...b
+  }, p) => /* @__PURE__ */ r(n, { ref: p, className: c, ...b, children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ i(T, { delayDuration: 200, children: [
+    /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ i(
       "div",
       {
         className: o(
@@ -157,16 +159,17 @@ const S = l.forwardRef(
         children: [
           m,
           /* @__PURE__ */ r(
-            g,
+            u,
             {
               variant: "text",
               size: "auto",
               className: a ? void 0 : "opacity-0 group-hover:opacity-100",
               children: /* @__PURE__ */ r(
-                u,
+                x,
                 {
+                  icon: g,
                   className: o(
-                    "h-4 w-4",
+                    "size-4",
                     e === "desc" ? "rotate-180" : "",
                     "transition-transform duration-200 ease-in-out"
                   )
@@ -177,7 +180,7 @@ const S = l.forwardRef(
         ]
       }
     ) }),
-    /* @__PURE__ */ i(N, { side: "top", children: [
+    /* @__PURE__ */ i(y, { side: "top", children: [
       "Sort by ",
       t
     ] })
@@ -186,15 +189,15 @@ const S = l.forwardRef(
 S.displayName = "SortingTableHead";
 export {
   S as SortingTableHead,
-  y as Table,
-  R as TableBody,
-  B as TableCaption,
-  _ as TableCell,
-  z as TableFooter,
+  v as Table,
+  z as TableBody,
+  F as TableCaption,
+  B as TableCell,
+  C as TableFooter,
   n as TableHead,
-  v as TableHeader,
-  C as TableRow,
-  V as tableCellVariants,
-  H as tableHeadVariants,
+  R as TableHeader,
+  H as TableRow,
+  _ as tableCellVariants,
+  V as tableHeadVariants,
   w as tableVariants
 };

package/dist/esm/components/tabs/tabs.js

@@ -1,9 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-tabs";
 import * as i from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const g = e.Root, n = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
   e.List,
   {