@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

@@ -1,33 +1,40 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Skeleton as n } from "../skeleton/skeleton.js";
+import { Skeleton as p } from "../skeleton/skeleton.js";
 import "react";
-import { cn as d } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-function b({
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+function y({
   height: e = "70px",
   columns: i = 6,
-  className: t,
-  ...o
+  cellClassName: o,
+  last: m,
+  className: n,
+  ...d
 }) {
   return /* @__PURE__ */ r(
     "div",
     {
-      className: d("contents", t),
+      className: t("contents", n),
       style: { minHeight: e },
-      ...o,
-      children: Array.from({ length: i }, (l, m) => /* @__PURE__ */ r(
+      ...d,
+      children: Array.from({ length: i }, (s, l) => /* @__PURE__ */ r(
         "div",
         {
-          className: "border-b border-border p-4 flex items-center",
+          className: t(
+            "flex items-center",
+            !m && "border-b border-border",
+            o || "p-4"
+          ),
           style: { minHeight: e },
-          children: /* @__PURE__ */ r(n, { width: "full", height: "md" })
+          children: /* @__PURE__ */ r(p, { width: "full", height: "md" })
         },
-        `${m}-${i}`
+        `${l}-${i}`
       ))
     }
   );
 }
 export {
-  b as GridLoadingLine
+  y as GridLoadingLine
 };

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

@@ -1,10 +1,11 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cva as c } 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 { cn as s } from "../../utils/cn.js";
-const V = c("w-full", {
+import { jsx as s } from "react/jsx-runtime";
+import { cva as y } from "class-variance-authority";
+import * as l from "react";
+import { BaseLink as D } from "../base-link/base-link.js";
+import { Col as j } from "../layout/col/col.js";
+import { Grid as w } from "../layout/grid/grid.js";
+import { cn as r } from "../../utils/cn.js";
+const K = y("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -15,147 +16,169 @@ 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,
+}), A = l.forwardRef(
+  ({ className: e, size: t, cols: a = 12, gap: n = 0, ...i }, f) => /* @__PURE__ */ s("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ s(
+    w,
     {
-      ref: n,
+      ref: f,
       cols: a,
-      gap: o,
-      className: s(V({ size: t, className: e })),
+      gap: n,
+      className: r(K({ size: t, className: e })),
       ...i
     }
   ) })
 );
-C.displayName = "GridTable";
-const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+A.displayName = "GridTable";
+const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
-    className: s(
+    className: r(
       "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(
+F.displayName = "GridTableHeader";
+const R = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
-    className: s("contents [&>*:last-child>*]:after:hidden", e),
+    className: r("contents [&>*:last-child>*]:after:hidden", e),
     ...t
   }
 ));
 R.displayName = "GridTableBody";
-const D = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+const S = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
-    className: s(
+    className: r(
       "contents [&>*]:border-t [&>*]:bg-muted/50 [&>*]:font-medium",
       e
     ),
     ...t
   }
 ));
-D.displayName = "GridTableFooter";
-const B = r.forwardRef(
+S.displayName = "GridTableFooter";
+const E = l.forwardRef(
   ({
     className: e,
     cols: t,
     gap: a = 0,
-    last: o,
+    last: n,
     height: i,
-    hideValue: n,
-    noHover: v,
-    noRound: b,
-    onRowClick: f,
-    style: u,
-    children: p,
-    ...g
-  }, y) => {
-    const m = typeof i == "number" ? `${i}px` : i, w = r.useCallback(
+    hideValue: f,
+    noHover: m,
+    noRound: g,
+    onRowClick: o,
+    href: x,
+    target: V,
+    rel: C,
+    style: H,
+    children: c,
+    ...u
+  }, b) => {
+    const T = typeof i == "number" ? `${i}px` : i, v = l.useCallback(
       (d) => {
-        !f || d.target.closest("a, button, input, select, textarea, [role='button']") || f(d);
+        !o || d.target.closest(
+          "a, button, input, select, textarea, [role='button']"
+        ) || o(d);
       },
-      [f]
-    ), z = r.useCallback(
+      [o]
+    ), h = l.useCallback(
       (d) => {
-        if (f && (d.key === "Enter" || d.key === " ")) {
+        if (o && (d.key === "Enter" || d.key === " ")) {
           if (d.preventDefault(), d.target.closest(
             "a, button, input, select, textarea, [role='button']"
           ))
             return;
-          f(d);
+          o(d);
         }
       },
-      [f]
-    ), x = s(
+      [o]
+    ), N = r(
       "[&>*]: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 && [
+      !g && [
         "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"
+        !g && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
       ],
-      o && "md:[&>*]:after:hidden",
-      n && "[&>*]:opacity-0"
-    );
-    return f ? (
+      n && "md:[&>*]:after:hidden",
+      f && "[&>*]:opacity-0"
+    ), G = r(
+      "grid grid-cols-subgrid col-span-full",
+      N,
+      "cursor-pointer",
+      e
+    ), p = {
+      ...H,
+      ...T ? { height: T } : {}
+    };
+    return x ? /* @__PURE__ */ s(
+      D,
+      {
+        ref: b,
+        href: x,
+        target: V,
+        rel: C,
+        size: "unset",
+        variant: "unset",
+        className: r(G, "no-underline text-foreground!"),
+        style: p,
+        onClick: o ? v : void 0,
+        onKeyDown: o ? h : void 0,
+        ...u,
+        children: c
+      }
+    ) : o ? (
       // biome-ignore lint/a11y/useSemanticElements: Using div with subgrid layout, not a semantic table
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ s(
         "div",
         {
-          ref: y,
+          ref: b,
           role: "row",
           tabIndex: 0,
-          className: s(
-            // Use subgrid to inherit parent grid columns
-            "grid grid-cols-subgrid col-span-full",
-            x,
-            "cursor-pointer",
-            e
-          ),
-          style: { ...u, ...m ? { height: m } : {} },
-          onClick: w,
-          onKeyDown: z,
-          ...g,
-          children: p
+          className: G,
+          style: p,
+          onClick: v,
+          onKeyDown: h,
+          ...u,
+          children: c
         }
       )
-    ) : /* @__PURE__ */ l(
-      T,
+    ) : /* @__PURE__ */ s(
+      w,
       {
-        ref: y,
+        ref: b,
         cols: t,
         gap: a,
-        className: s("contents", x, e),
-        style: { ...u, ...m ? { height: m } : {} },
-        ...g,
-        children: p
+        className: r("contents", N, e),
+        style: p,
+        ...u,
+        children: c
       }
     );
   }
 );
-B.displayName = "GridTableRow";
-const F = c(
-  "flex items-center justify-startborder-b text-left align-middle font-medium text-muted-foreground !bg-transparent",
+E.displayName = "GridTableRow";
+const I = y(
+  "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
       size: {
-        sm: "min-h-8 px-1 py-2 text-xs",
+        sm: "min-h-8 px-1 py-2 text-sm",
         default: "min-h-10 px-2 py-2.5",
         lg: "min-h-12 px-4 py-3"
       },
@@ -163,78 +186,95 @@ 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,
+), z = l.forwardRef(
+  ({ className: e, size: t, span: a = 1, justify: n = "start", gapBefore: i, ...f }, m) => /* @__PURE__ */ s(
+    j,
     {
-      ref: n,
+      ref: m,
       span: a,
-      className: s(F({ size: t, justify: o, className: e })),
-      ...i
+      className: r(
+        I({ size: t, justify: n, gapBefore: i, className: e })
+      ),
+      ...f
     }
   )
 );
-G.displayName = "GridTableHead";
-const K = c("align-middle", {
+z.displayName = "GridTableHead";
+const L = y("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,
+}), B = l.forwardRef(
+  ({ className: e, size: t, span: a = 1, textAlign: n, gapBefore: i, ...f }, m) => /* @__PURE__ */ s(
+    j,
     {
-      ref: n,
+      ref: m,
       span: a,
-      className: s(K({ size: t, textAlign: o, className: e })),
-      ...i
+      className: r(
+        L({ size: t, textAlign: n, gapBefore: i, className: e })
+      ),
+      ...f
     }
   )
 );
-N.displayName = "GridTableCell";
-const A = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+B.displayName = "GridTableCell";
+const $ = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
-    className: s(
+    className: r(
       "col-span-full mt-4 text-sm text-muted-foreground",
       e
     ),
     ...t
   }
 ));
-A.displayName = "GridTableCaption";
-const q = N, J = G;
+$.displayName = "GridTableCaption";
+const U = B, W = z;
 export {
-  C as GridTable,
+  A as GridTable,
   R as GridTableBody,
-  A as GridTableCaption,
-  N as GridTableCell,
-  D as GridTableFooter,
-  G as GridTableHead,
-  H as GridTableHeader,
-  B as GridTableRow,
-  q as Td,
-  J as Th,
-  K as gridTableCellVariants,
-  F as gridTableHeadVariants,
-  V as gridTableVariants
+  $ as GridTableCaption,
+  B as GridTableCell,
+  S as GridTableFooter,
+  z as GridTableHead,
+  F as GridTableHeader,
+  E as GridTableRow,
+  U as Td,
+  W as Th,
+  L as gridTableCellVariants,
+  I as gridTableHeadVariants,
+  K 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,30 +1,31 @@
 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({
+import "luxon";
+function S({
   title: s,
   className: o,
   children: r,
   ...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 })
   ] });
 }
-function S({
+function j({
   title: s,
   columnsXs: o = 1,
   columnsSm: r,
   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 m = o, c = r ?? m, d = l ?? c, g = a ?? d;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -32,7 +33,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(
@@ -43,9 +44,9 @@ function S({
               "--grid-cols-xs": m,
               "--grid-cols-sm": c,
               "--grid-cols-md": d,
-              "--grid-cols-lg": p
+              "--grid-cols-lg": g
             },
-            children: x
+            children: p
           }
         )
       ]
@@ -53,6 +54,6 @@ function S({
   );
 }
 export {
-  h as TableCellSm,
-  S as TableLineSm
+  S as TableCellSm,
+  j as TableLineSm
 };