@gearbox-protocol/permissionless-ui 1.17.2 → 1.17.4

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

@@ -1,10 +1,10 @@
 import { jsx as d } from "react/jsx-runtime";
-import { cva as n } from "class-variance-authority";
+import { cva as f } from "class-variance-authority";
 import * as s from "react";
-import { Col as m } from "../layout/col/col.js";
+import { Col as c } from "../layout/col/col.js";
 import { Grid as b } from "../layout/grid/grid.js";
-import { cn as o } from "../../utils/cn.js";
-const G = n("w-full", {
+import { cn as i } from "../../utils/cn.js";
+const h = f("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -15,91 +15,102 @@ const G = n("w-full", {
   defaultVariants: {
     size: "default"
   }
-}), N = s.forwardRef(
-  ({ className: e, size: t, cols: a = 12, gap: i = 0, ...r }, l) => /* @__PURE__ */ d("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ d(
+}), G = s.forwardRef(
+  ({ className: e, size: t, cols: a = 12, gap: l = 0, ...r }, o) => /* @__PURE__ */ d("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ d(
     b,
     {
-      ref: l,
+      ref: o,
       cols: a,
-      gap: i,
-      className: o(G({ size: t, className: e })),
+      gap: l,
+      className: i(h({ size: t, className: e })),
       ...r
     }
   ) })
 );
-N.displayName = "GridTable";
-const v = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
+G.displayName = "GridTable";
+const N = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
   "div",
   {
     ref: a,
-    className: o("contents [&>*]:border-b [&>*]:border-border", e),
+    className: i(
+      "contents",
+      // Full-width border for header (no insets)
+      "[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border",
+      e
+    ),
     ...t
   }
 ));
-v.displayName = "GridTableHeader";
-const w = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
+N.displayName = "GridTableHeader";
+const v = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
   "div",
   {
     ref: a,
-    className: o("contents [&>*:last-child>*]:border-0", e),
+    className: i("contents [&>*:last-child>*]:after:hidden", e),
     ...t
   }
 ));
-w.displayName = "GridTableBody";
-const h = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
+v.displayName = "GridTableBody";
+const w = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
   "div",
   {
     ref: a,
-    className: o(
+    className: i(
       "contents [&>*]:border-t [&>*]:bg-muted/50 [&>*]:font-medium",
       e
     ),
     ...t
   }
 ));
-h.displayName = "GridTableFooter";
+w.displayName = "GridTableFooter";
 const R = s.forwardRef(
   ({
     className: e,
     cols: t,
     gap: a = 0,
-    last: i,
+    last: l,
     height: r,
-    hideValue: l,
-    noHover: u,
-    noRound: y,
+    hideValue: o,
+    noHover: y,
+    noRound: n,
     style: x,
-    ...T
-  }, g) => {
-    const f = typeof r == "number" ? `${r}px` : r;
+    ...g
+  }, T) => {
+    const m = typeof r == "number" ? `${r}px` : r;
     return /* @__PURE__ */ d(
       b,
       {
-        ref: g,
+        ref: T,
         cols: t,
         gap: a,
-        className: o(
-          "contents md:[&>*]:border-b [&>*]:border-border [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
+        className: i(
+          "contents [&>*]: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",
+          !n && [
+            "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)
-          !u && [
-            "[&>*]:relative [&>*]:z-0",
+          !y && [
+            "[&>*]: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
-            !y && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
+            !n && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
           ],
-          i && "[&>*]:border-b-0",
-          l && "[&>*]:opacity-0",
+          l && "md:[&>*]:after:hidden",
+          o && "[&>*]:opacity-0",
           e
         ),
-        style: { ...x, ...f ? { height: f } : {} },
-        ...T
+        style: { ...x, ...m ? { height: m } : {} },
+        ...g
       }
     );
   }
 );
 R.displayName = "GridTableRow";
-const z = n(
+const z = f(
   "flex items-center justify-startborder-b text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
@@ -119,19 +130,19 @@ const z = n(
       justify: "start"
     }
   }
-), c = s.forwardRef(
-  ({ className: e, size: t, span: a = 1, justify: i = "start", ...r }, l) => /* @__PURE__ */ d(
-    m,
+), p = s.forwardRef(
+  ({ className: e, size: t, span: a = 1, justify: l = "start", ...r }, o) => /* @__PURE__ */ d(
+    c,
     {
-      ref: l,
+      ref: o,
       span: a,
-      className: o(z({ size: t, justify: i, className: e })),
+      className: i(z({ size: t, justify: l, className: e })),
       ...r
     }
   )
 );
-c.displayName = "GridTableHead";
-const j = n("align-middle", {
+p.displayName = "GridTableHead";
+const j = f("align-middle", {
   variants: {
     size: {
       sm: "p-2",
@@ -147,23 +158,23 @@ const j = n("align-middle", {
   defaultVariants: {
     size: "default"
   }
-}), p = s.forwardRef(
-  ({ className: e, size: t, span: a = 1, textAlign: i, ...r }, l) => /* @__PURE__ */ d(
-    m,
+}), u = s.forwardRef(
+  ({ className: e, size: t, span: a = 1, textAlign: l, ...r }, o) => /* @__PURE__ */ d(
+    c,
     {
-      ref: l,
+      ref: o,
       span: a,
-      className: o(j({ size: t, textAlign: i, className: e })),
+      className: i(j({ size: t, textAlign: l, className: e })),
       ...r
     }
   )
 );
-p.displayName = "GridTableCell";
+u.displayName = "GridTableCell";
 const C = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
   "div",
   {
     ref: a,
-    className: o(
+    className: i(
       "col-span-full mt-4 text-sm text-muted-foreground",
       e
     ),
@@ -171,19 +182,19 @@ const C = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ d(
   }
 ));
 C.displayName = "GridTableCaption";
-const S = p, $ = c;
+const S = u, $ = p;
 export {
-  N as GridTable,
-  w as GridTableBody,
+  G as GridTable,
+  v as GridTableBody,
   C as GridTableCaption,
-  p as GridTableCell,
-  h as GridTableFooter,
-  c as GridTableHead,
-  v as GridTableHeader,
+  u as GridTableCell,
+  w as GridTableFooter,
+  p as GridTableHead,
+  N as GridTableHeader,
   R as GridTableRow,
   S as Td,
   $ as Th,
   j as gridTableCellVariants,
   z as gridTableHeadVariants,
-  G as gridTableVariants
+  h as gridTableVariants
 };

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

@@ -1,13 +1,13 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { cva as i } from "class-variance-authority";
+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 T, Tooltip as h, TooltipTrigger as x, TooltipContent as N } from "../tooltip/tooltip.js";
+import { TooltipProvider as h, Tooltip as x, TooltipTrigger as T, TooltipContent as N } from "../tooltip/tooltip.js";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const w = i("w-full caption-bottom", {
+const w = d("w-full caption-bottom", {
   variants: {
     size: {
       sm: "text-xs",
@@ -19,64 +19,67 @@ const w = i("w-full caption-bottom", {
     size: "default"
   }
 }), y = l.forwardRef(
-  ({ className: a, size: t, ...e }, s) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ r(
+  ({ 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",
     {
       ref: s,
-      className: o(w({ size: t, className: a })),
+      className: o(w({ size: a, className: t })),
       ...e
     }
   ) })
 );
 y.displayName = "Table";
-const v = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+const v = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "thead",
   {
     ref: e,
     className: o(
-      "[&_tr]:border-b border-input [&_tr]:hover:bg-transparent",
-      a
+      "[&_tr]:after:inset-x-0 [&_tr]:after:bg-input [&_tr]:hover:bg-transparent [&_tr]:hover:before:opacity-0",
+      t
     ),
-    ...t
+    ...a
   }
 ));
 v.displayName = "TableHeader";
-const R = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tbody",
   {
     ref: e,
-    className: o("[&_tr:last-child]:border-0", a),
-    ...t
+    className: o("[&_tr:last-child]:after:hidden", t),
+    ...a
   }
 ));
 R.displayName = "TableBody";
-const z = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tfoot",
   {
     ref: e,
     className: o(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 ));
 z.displayName = "TableFooter";
-const C = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tr",
   {
     ref: e,
     className: o(
-      "relative border-b transition-colors data-[state=selected]:bg-muted border-border",
+      "relative transition-colors data-[state=selected]:bg-muted",
+      // Hover background with rounded corners
       "before:absolute before:inset-0 before:-z-10 before:rounded-lg before:bg-muted/50 before:opacity-0 before:transition-opacity",
       "hover:before:opacity-100",
-      a
+      // Border line that doesn't extend to rounded corners
+      "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:bg-border",
+      t
     ),
-    ...t
+    ...a
   }
 ));
 C.displayName = "TableRow";
-const H = i(
+const H = d(
   "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
   {
     variants: {
@@ -91,17 +94,17 @@ const H = i(
     }
   }
 ), n = l.forwardRef(
-  ({ className: a, size: t, ...e }, s) => /* @__PURE__ */ r(
+  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
     "th",
     {
       ref: s,
-      className: o(H({ size: t, className: a })),
+      className: o(H({ size: a, className: t })),
       ...e
     }
   )
 );
 n.displayName = "TableHead";
-const V = i("align-middle", {
+const V = d("align-middle", {
   variants: {
     size: {
       sm: "p-1",
@@ -112,38 +115,38 @@ const V = i("align-middle", {
   defaultVariants: {
     size: "default"
   }
-}), B = l.forwardRef(
-  ({ className: a, size: t, ...e }, s) => /* @__PURE__ */ r(
+}), _ = l.forwardRef(
+  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
     "td",
     {
       ref: s,
-      className: o(V({ size: t, className: a })),
+      className: o(V({ size: a, className: t })),
       ...e
     }
   )
 );
-B.displayName = "TableCell";
-const S = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+_.displayName = "TableCell";
+const B = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "caption",
   {
     ref: e,
-    className: o("mt-4 text-sm text-muted-foreground", a),
-    ...t
+    className: o("mt-4 text-sm text-muted-foreground", t),
+    ...a
   }
 ));
-S.displayName = "TableCaption";
-const _ = l.forwardRef(
+B.displayName = "TableCaption";
+const S = l.forwardRef(
   ({
-    title: a,
-    isSorted: t,
+    title: t,
+    isSorted: a,
     direction: e,
     setSort: s,
     placement: f = "right",
     children: m,
     className: b,
     ...c
-  }, p) => /* @__PURE__ */ r(n, { ref: p, className: b, ...c, children: /* @__PURE__ */ r(T, { children: /* @__PURE__ */ d(h, { delayDuration: 200, children: [
-    /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ d(
+  }, 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(
       "div",
       {
         className: o(
@@ -158,7 +161,7 @@ const _ = l.forwardRef(
             {
               variant: "text",
               size: "auto",
-              className: t ? void 0 : "opacity-0 group-hover:opacity-100",
+              className: a ? void 0 : "opacity-0 group-hover:opacity-100",
               children: /* @__PURE__ */ r(
                 u,
                 {
@@ -174,19 +177,19 @@ const _ = l.forwardRef(
         ]
       }
     ) }),
-    /* @__PURE__ */ d(N, { side: "top", children: [
+    /* @__PURE__ */ i(N, { side: "top", children: [
       "Sort by ",
-      a
+      t
     ] })
   ] }) }) })
 );
-_.displayName = "SortingTableHead";
+S.displayName = "SortingTableHead";
 export {
-  _ as SortingTableHead,
+  S as SortingTableHead,
   y as Table,
   R as TableBody,
-  S as TableCaption,
-  B as TableCell,
+  B as TableCaption,
+  _ as TableCell,
   z as TableFooter,
   n as TableHead,
   v as TableHeader,

package/dist/esm/components/token-icon/token-icon.js

@@ -24,8 +24,8 @@ function I({ symbol: t, size: e = 48, className: r }) {
         width: e,
         height: e,
         className: m(
-          "object-contain rounded-full",
-          !f && "bg-gray-200 dark:bg-gray-700",
+          "object-contain",
+          !f && "bg-gray-200 dark:bg-gray-700 rounded-full",
           r
         ),
         style: { width: e, height: e },

package/dist/esm/components/token-symbol/token-symbol.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { TokenIcon as f } from "../token-icon/token-icon.js";
+import { TokenIcon as d } from "../token-icon/token-icon.js";
 import "react";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
@@ -14,25 +14,25 @@ function g(e) {
 }
 function I({
   token: e,
-  title: o,
-  className: m,
+  title: m,
+  className: o,
   comment: r,
   showIcon: l = !0,
   showSymbol: c = !1,
   size: a = 24,
   chainId: x,
   network: h,
-  maxLength: b,
-  ...d
+  maxLength: v,
+  ...f
 }) {
-  const i = p(e), n = o || g(e);
-  return /* @__PURE__ */ t("div", { className: u("flex items-center gap-3", m), ...d, children: [
+  const i = p(e), n = m || g(e);
+  return /* @__PURE__ */ t("div", { className: u("flex items-center gap-3", o), ...f, children: [
     l && i && /* @__PURE__ */ s(
-      f,
+      d,
       {
         symbol: i,
         size: a,
-        className: "rounded-full border-0 shrink-0 self-center"
+        className: "shrink-0 self-center"
       }
     ),
     c && n && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [