@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

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

@@ -1,11 +1,11 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { cva as g } from "class-variance-authority";
-import * as l from "react";
-import { BaseLink as k } from "../base-link/base-link.js";
-import { Col as j } from "../layout/col/col.js";
-import { Grid as D } from "../layout/grid/grid.js";
-import { cn as r } from "../../utils/cn.js";
-const K = g("w-full", {
+import * as n from "react";
+import { BaseLink as H } from "../base-link/base-link.js";
+import { Col as z } from "../layout/col/col.js";
+import { Grid as C } from "../layout/grid/grid.js";
+import { cn as a } from "../../utils/cn.js";
+const D = g("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -16,24 +16,24 @@ const K = g("w-full", {
   defaultVariants: {
     size: "default"
   }
-}), A = l.forwardRef(
-  ({ className: e, size: t, cols: a = 12, gap: n = 0, wrapperClassName: i, ...f }, c) => /* @__PURE__ */ s("div", { className: r("relative w-full overflow-auto", i), children: /* @__PURE__ */ s(
-    D,
+}), K = n.forwardRef(
+  ({ className: e, size: t, cols: r = 12, gap: d = 0, wrapperClassName: s, ...f }, u) => /* @__PURE__ */ o("div", { className: a("relative w-full overflow-auto", s), children: /* @__PURE__ */ o(
+    C,
     {
-      ref: c,
-      cols: a,
-      gap: n,
-      className: r(K({ size: t, className: e })),
+      ref: u,
+      cols: r,
+      gap: d,
+      className: a(D({ size: t, className: e })),
       ...f
     }
   ) })
 );
-A.displayName = "GridTable";
-const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+K.displayName = "GridTable";
+const A = n.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
-    className: r(
+    ref: r,
+    className: a(
       "contents",
       // Full-width border for header (no insets)
       "[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border",
@@ -44,138 +44,130 @@ const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-F.displayName = "GridTableHeader";
-const R = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+A.displayName = "GridTableHeader";
+const E = n.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
-    className: r("contents [&>*:last-child>*]:after:hidden", e),
+    ref: r,
+    className: a("contents [&>*:last-child>*]:after:hidden", e),
     ...t
   }
 ));
-R.displayName = "GridTableBody";
-const S = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
-  "div",
-  {
-    ref: a,
-    className: r(
-      "contents [&>*]:border-t [&>*]:bg-muted/50 [&>*]:font-medium",
-      e
-    ),
-    ...t
-  }
-));
-S.displayName = "GridTableFooter";
-const E = l.forwardRef(
+E.displayName = "GridTableBody";
+function j(e) {
+  const t = e.target.closest(
+    "a, button, input, select, textarea, [role='button']"
+  );
+  return t !== null && t !== e.currentTarget;
+}
+const S = n.forwardRef(
   ({
     className: e,
     cols: t,
-    gap: a = 0,
-    last: n,
-    height: i,
+    gap: r = 0,
+    last: d,
+    height: s,
     hideValue: f,
-    noHover: c,
-    noRound: y,
-    onRowClick: o,
-    href: x,
-    target: B,
-    rel: V,
-    style: C,
+    noHover: u,
+    noRound: x,
+    onRowClick: l,
+    href: c,
+    target: w,
+    rel: B,
+    style: V,
     children: m,
-    ...u
-  }, b) => {
-    const T = typeof i == "number" ? `${i}px` : i, v = l.useCallback(
-      (d) => {
-        !o || d.target.closest(
-          "a, button, input, select, textarea, [role='button']"
-        ) || o(d);
+    ...b
+  }, p) => {
+    const v = typeof s == "number" ? `${s}px` : s, T = n.useCallback(
+      (i) => {
+        l && (j(i) || l(i));
       },
-      [o]
-    ), h = l.useCallback(
-      (d) => {
-        if (o && (d.key === "Enter" || d.key === " ")) {
-          if (d.preventDefault(), d.target.closest(
-            "a, button, input, select, textarea, [role='button']"
-          ))
-            return;
-          o(d);
+      [l]
+    ), h = n.useCallback(
+      (i) => {
+        if (l && !(i.key !== "Enter" && i.key !== " ") && !j(i)) {
+          if (c) {
+            if (i.key !== "Enter") return;
+          } else
+            i.preventDefault();
+          l(i);
         }
       },
-      [o]
-    ), N = r(
+      [l, c]
+    ), N = a(
       "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
       "[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",
-      !y && [
+      !x && [
         "[&>*:first-child]:after:left-3",
         "[&>*:last-child]:after:right-3"
       ],
-      !c && [
+      !u && [
         "[&>*]:z-0",
         "[&>*]: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",
-        !y && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
+        !x && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
       ],
-      n && "[&>*]:after:hidden",
+      d && "[&>*]:after:hidden",
       f && "[&>*]:opacity-0"
-    ), G = r(
+    ), G = a(
       "grid grid-cols-subgrid col-span-full",
       N,
       "cursor-pointer",
       e
-    ), p = {
-      ...C,
-      ...T ? { height: T } : {}
+    ), y = {
+      ...V,
+      ...v ? { height: v } : {}
     };
-    return x ? /* @__PURE__ */ s(
-      k,
+    return c ? /* @__PURE__ */ o(
+      H,
       {
-        ref: b,
-        href: x,
-        target: B,
-        rel: V,
+        ref: p,
+        href: c,
+        target: w,
+        rel: B,
         size: "unset",
         variant: "unset",
-        className: r("no-underline text-foreground!", G),
-        style: p,
-        onClick: o ? v : void 0,
-        onKeyDown: o ? h : void 0,
-        ...u,
+        className: a("no-underline text-foreground!", G),
+        style: y,
+        onClick: l ? T : void 0,
+        onKeyDown: l ? h : void 0,
+        ...b,
         children: m
       }
-    ) : o ? (
+    ) : l ? (
       // biome-ignore lint/a11y/useSemanticElements: Using div with subgrid layout, not a semantic table
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "div",
         {
-          ref: b,
+          ref: p,
           role: "row",
           tabIndex: 0,
           className: G,
-          style: p,
-          onClick: v,
+          style: y,
+          onClick: T,
           onKeyDown: h,
-          ...u,
+          ...b,
           children: m
         }
       )
-    ) : /* @__PURE__ */ s(
+    ) : /* @__PURE__ */ o(
       "div",
       {
-        ref: b,
-        className: r(
+        ref: p,
+        className: a(
           "grid grid-cols-subgrid col-span-full",
           N,
           e
         ),
-        style: p,
-        ...u,
+        style: y,
+        ...b,
         children: m
       }
     );
   }
 );
-E.displayName = "GridTableRow";
-const I = g(
+S.displayName = "GridTableRow";
+const k = g(
   "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
@@ -201,20 +193,20 @@ const I = g(
       gapBefore: "none"
     }
   }
-), w = l.forwardRef(
-  ({ className: e, size: t, span: a = 1, justify: n = "start", gapBefore: i, ...f }, c) => /* @__PURE__ */ s(
-    j,
+), I = n.forwardRef(
+  ({ className: e, size: t, span: r = 1, justify: d = "start", gapBefore: s, ...f }, u) => /* @__PURE__ */ o(
+    z,
     {
-      ref: c,
-      span: a,
-      className: r(
-        I({ size: t, justify: n, gapBefore: i, className: e })
+      ref: u,
+      span: r,
+      className: a(
+        k({ size: t, justify: d, gapBefore: s, className: e })
       ),
       ...f
     }
   )
 );
-w.displayName = "GridTableHead";
+I.displayName = "GridTableHead";
 const L = g("flex items-center align-middle", {
   variants: {
     size: {
@@ -238,45 +230,25 @@ const L = g("flex items-center align-middle", {
     textAlign: "left",
     gapBefore: "none"
   }
-}), z = l.forwardRef(
-  ({ className: e, size: t, span: a = 1, textAlign: n, gapBefore: i, ...f }, c) => /* @__PURE__ */ s(
-    j,
+}), O = n.forwardRef(
+  ({ className: e, size: t, span: r = 1, textAlign: d, gapBefore: s, ...f }, u) => /* @__PURE__ */ o(
+    z,
     {
-      ref: c,
-      span: a,
-      className: r(
-        L({ size: t, textAlign: n, gapBefore: i, className: e })
+      ref: u,
+      span: r,
+      className: a(
+        L({ size: t, textAlign: d, gapBefore: s, className: e })
       ),
       ...f
     }
   )
 );
-z.displayName = "GridTableCell";
-const $ = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
-  "div",
-  {
-    ref: a,
-    className: r(
-      "col-span-full mt-4 text-sm text-muted-foreground",
-      e
-    ),
-    ...t
-  }
-));
-$.displayName = "GridTableCaption";
-const U = z, W = w;
+O.displayName = "GridTableCell";
 export {
-  A as GridTable,
-  R as GridTableBody,
-  $ as GridTableCaption,
-  z as GridTableCell,
-  S as GridTableFooter,
-  w as GridTableHead,
-  F as GridTableHeader,
-  E as GridTableRow,
-  U as Td,
-  W as Th,
-  L as gridTableCellVariants,
-  I as gridTableHeadVariants,
-  K as gridTableVariants
+  K as GridTable,
+  E as GridTableBody,
+  O as GridTableCell,
+  I as GridTableHead,
+  A as GridTableHeader,
+  S as GridTableRow
 };

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

@@ -1,40 +1,11 @@
-import { GridErrorLine as r } from "./grid-error-line.js";
-import { GridLoadingLine as o } from "./grid-loading-line.js";
-import { GridTable as d, GridTableBody as i, GridTableCaption as T, GridTableCell as t, GridTableFooter as n, GridTableHead as G, GridTableHeader as m, GridTableRow as p, Td as f, Th as x, gridTableCellVariants as C, gridTableHeadVariants as H, gridTableVariants as s } from "./grid-table.js";
-import { SortingTableHead as V, Table as g, TableBody as S, TableCaption as w, TableCell as y, TableFooter as B, TableHead as F, TableHeader as R, TableRow as h, tableCellVariants as u, tableHeadVariants as E, tableVariants as c } from "./table.js";
-import { TableLoader as k } from "./table-loader.js";
-import { TableLoaderGuard as v } from "./table-loader-guard.js";
-import { TableCellSm as A, TableLineSm as D } from "./table-sm.js";
+import { GridErrorLine as a } from "./grid-error-line.js";
+import { Table as o, TableBody as b, TableCell as T, TableHead as d, TableHeader as f, TableRow as i } from "./table.js";
 export {
-  r as GridErrorLine,
-  o as GridLoadingLine,
-  d as GridTable,
-  i as GridTableBody,
-  T as GridTableCaption,
-  t as GridTableCell,
-  n as GridTableFooter,
-  G as GridTableHead,
-  m as GridTableHeader,
-  p as GridTableRow,
-  V as SortingTableHead,
-  g as Table,
-  S as TableBody,
-  w as TableCaption,
-  y as TableCell,
-  A as TableCellSm,
-  B as TableFooter,
-  F as TableHead,
-  R as TableHeader,
-  D as TableLineSm,
-  k as TableLoader,
-  v as TableLoaderGuard,
-  h as TableRow,
-  f as Td,
-  x as Th,
-  C as gridTableCellVariants,
-  H as gridTableHeadVariants,
-  s as gridTableVariants,
-  u as tableCellVariants,
-  E as tableHeadVariants,
-  c as tableVariants
+  a as GridErrorLine,
+  o as Table,
+  b as TableBody,
+  T as TableCell,
+  d as TableHead,
+  f as TableHeader,
+  i as TableRow
 };

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

@@ -1,51 +1,47 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as t } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-function y({
-  title: r,
-  className: o,
-  children: e,
-  ...m
+function N({
+  title: s,
+  className: r,
+  children: o,
+  ...l
 }) {
-  return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", o), ...m, children: [
-    r && /* @__PURE__ */ s("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: r }),
-    /* @__PURE__ */ s("div", { className: "text-sm", children: e })
+  return /* @__PURE__ */ i("div", { className: a("flex flex-col gap-1", r), ...l, children: [
+    s && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: s }),
+    /* @__PURE__ */ e("div", { className: "text-sm", children: o })
   ] });
 }
-function L({
-  title: r,
-  columnsXs: o = 1,
-  columnsSm: e,
-  columnsMd: m,
-  columns: a,
+function h({
+  title: s,
+  columnsXs: r = 1,
+  columnsSm: o,
+  columnsMd: l,
+  columns: t,
   className: n,
   children: p,
   ...x
 }) {
-  const l = o, c = e ?? l, d = m ?? c, g = a ?? d;
+  const c = r, d = o ?? c, m = l ?? d, g = t ?? m;
   return /* @__PURE__ */ i(
     "div",
     {
-      className: t(
+      className: a(
         "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border last:border-b-0",
         n
       ),
       ...x,
       children: [
-        r && /* @__PURE__ */ s("div", { className: "font-medium mb-2", children: r }),
-        /* @__PURE__ */ s(
+        s && /* @__PURE__ */ e("div", { className: "font-medium mb-2", children: s }),
+        /* @__PURE__ */ e(
           "div",
           {
             className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
-              "--grid-cols-xs": l,
-              "--grid-cols-sm": c,
-              "--grid-cols-md": d,
+              "--grid-cols-xs": c,
+              "--grid-cols-sm": d,
+              "--grid-cols-md": m,
               "--grid-cols-lg": g
             },
             children: p
@@ -56,6 +52,6 @@ function L({
   );
 }
 export {
-  y as TableCellSm,
-  L as TableLineSm
+  N as TableCellSm,
+  h as TableLineSm
 };

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

@@ -1,15 +1,12 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { faCaretUp as h, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
 import { cva as d } from "class-variance-authority";
 import * as i from "react";
-import { faCaretUp as h, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as y } from "../icons/fa-icon.js";
 import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as N, Tooltip as v, TooltipTrigger as w, TooltipContent as R } from "../tooltip/tooltip.js";
-import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const C = d("w-full caption-bottom", {
   variants: {
@@ -106,7 +103,7 @@ const S = d(
       size: "default"
     }
   }
-), c = i.forwardRef(
+), m = i.forwardRef(
   ({ className: a, size: t, ...e }, l) => /* @__PURE__ */ r(
     "th",
     {
@@ -116,7 +113,7 @@ const S = d(
     }
   )
 );
-c.displayName = "TableHead";
+m.displayName = "TableHead";
 const j = d("align-middle", {
   variants: {
     size: {
@@ -158,7 +155,7 @@ const I = i.forwardRef(function({
   className: p,
   ...u
 }, g) {
-  const x = e && l === "asc" ? h : T, m = /* @__PURE__ */ r(
+  const x = e && l === "asc" ? h : T, c = /* @__PURE__ */ r(
     "span",
     {
       className: o(
@@ -168,7 +165,7 @@ const I = i.forwardRef(function({
       children: /* @__PURE__ */ r(y, { icon: x, className: "size-3 text-muted-foreground" })
     }
   );
-  return /* @__PURE__ */ r(c, { ref: g, className: p, ...u, children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ n(v, { delayDuration: 200, children: [
+  return /* @__PURE__ */ r(m, { ref: g, className: p, ...u, children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ n(v, { delayDuration: 200, children: [
     /* @__PURE__ */ r(w, { asChild: !0, children: /* @__PURE__ */ n(
       "button",
       {
@@ -179,9 +176,9 @@ const I = i.forwardRef(function({
           "cursor-pointer hover:text-foreground transition-colors"
         ),
         children: [
-          f === "left" && m,
+          f === "left" && c,
           b,
-          f === "right" && m
+          f === "right" && c
         ]
       }
     ) }),
@@ -193,16 +190,10 @@ const I = i.forwardRef(function({
 });
 I.displayName = "SortingTableHead";
 export {
-  I as SortingTableHead,
   z as Table,
   V as TableBody,
-  D as TableCaption,
   B as TableCell,
-  _ as TableFooter,
-  c as TableHead,
+  m as TableHead,
   H as TableHeader,
-  F as TableRow,
-  j as tableCellVariants,
-  S as tableHeadVariants,
-  C as tableVariants
+  F as TableRow
 };

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

@@ -1,50 +1,47 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-tabs";
-import * as a from "react";
-import "@gearbox-protocol/sdk";
+import * as i from "react";
 import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const v = e.Root, n = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
+const g = e.Root, n = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
   e.List,
   {
-    ref: o,
+    ref: r,
     className: s(
       "inline-flex h-fit items-center justify-start bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6 overflow-x-auto overflow-y-hidden navbar-scrollbar min-w-max",
       t
     ),
-    ...r
+    ...a
   }
 ));
 n.displayName = e.List.displayName;
-const d = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
+const d = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
   e.Trigger,
   {
-    ref: o,
+    ref: r,
     className: s(
       "inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer shrink-0",
       t
     ),
-    ...r
+    ...a
   }
 ));
 d.displayName = e.Trigger.displayName;
-const f = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
+const f = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
   e.Content,
   {
-    ref: o,
+    ref: r,
     className: s(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       t
     ),
-    ...r
+    ...a
   }
 ));
 f.displayName = e.Content.displayName;
 export {
-  v as Tabs,
+  g as Tabs,
   f as TabsContent,
   n as TabsList,
   d as TabsTrigger