@gearbox-protocol/permissionless-ui 1.16.0 → 1.17.1

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

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

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

@@ -18,7 +18,7 @@ const w = i("w-full caption-bottom", {
   defaultVariants: {
     size: "default"
   }
-}), v = l.forwardRef(
+}), 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(
     "table",
     {
@@ -28,8 +28,8 @@ const w = i("w-full caption-bottom", {
     }
   ) })
 );
-v.displayName = "Table";
-const y = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+y.displayName = "Table";
+const v = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
   "thead",
   {
     ref: e,
@@ -40,7 +40,7 @@ const y = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
     ...t
   }
 ));
-y.displayName = "TableHeader";
+v.displayName = "TableHeader";
 const R = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
   "tbody",
   {
@@ -50,7 +50,7 @@ const R = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
   }
 ));
 R.displayName = "TableBody";
-const C = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+const z = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
   "tfoot",
   {
     ref: e,
@@ -61,19 +61,21 @@ const C = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
     ...t
   }
 ));
-C.displayName = "TableFooter";
-const z = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+z.displayName = "TableFooter";
+const C = l.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
   "tr",
   {
     ref: e,
     className: o(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-border",
+      "relative border-b transition-colors data-[state=selected]:bg-muted border-border",
+      "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
     ),
     ...t
   }
 ));
-z.displayName = "TableRow";
+C.displayName = "TableRow";
 const H = i(
   "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
   {
@@ -136,21 +138,21 @@ const _ = l.forwardRef(
     isSorted: t,
     direction: e,
     setSort: s,
-    placement: m = "right",
-    children: f,
-    className: c,
-    ...b
-  }, p) => /* @__PURE__ */ r(n, { ref: p, className: c, ...b, children: /* @__PURE__ */ r(T, { children: /* @__PURE__ */ d(h, { delayDuration: 200, children: [
+    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(
       "div",
       {
         className: o(
           "group flex items-center gap-1 w-fit cursor-pointer hover:text-foreground",
-          m === "left" ? "flex-row-reverse" : "flex-row"
+          f === "left" ? "flex-row-reverse" : "flex-row"
         ),
         onClick: () => s(e === "asc" ? "desc" : "asc"),
         children: [
-          f,
+          m,
           /* @__PURE__ */ r(
             g,
             {
@@ -181,14 +183,14 @@ const _ = l.forwardRef(
 _.displayName = "SortingTableHead";
 export {
   _ as SortingTableHead,
-  v as Table,
+  y as Table,
   R as TableBody,
   S as TableCaption,
   B as TableCell,
-  C as TableFooter,
+  z as TableFooter,
   n as TableHead,
-  y as TableHeader,
-  z as TableRow,
+  v as TableHeader,
+  C as TableRow,
   V as tableCellVariants,
   H as tableHeadVariants,
   w as tableVariants