@gearbox-protocol/ui-kit 4.0.0-next.47 → 4.0.0-next.49

package/dist/esm/components/tab-control/tab-control.js

@@ -1,63 +1,61 @@
-import { jsx as f, jsxs as T, Fragment as k } from "react/jsx-runtime";
-import { useRef as g, useState as v, useCallback as m, useMemo as w, useEffect as N } from "react";
-import { useNavigationAdapter as C } from "../navigation-context/navigation-context.js";
+import { jsx as u, jsxs as v, Fragment as y } from "react/jsx-runtime";
+import { useRef as h, useState as N, useCallback as k, useEffect as x } from "react";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as b } from "../../utils/cn.js";
-import "sonner";
+import { cn as f } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-function S(n) {
+function U(n) {
   if (!n) return null;
-  const { width: r = 0, height: s = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, o = n?.offsetLeft || 0;
-  return { width: r, height: s, left: o, top: i };
+  const { width: r = 0, height: o = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, s = n?.offsetLeft || 0;
+  return { width: r, height: o, left: s, top: i };
 }
-function U(n, r, s) {
-  const i = g(null), [o, u] = v(null), l = g(null), c = m((e) => {
-    u(e), l.current = e;
+function C(n, r, o) {
+  const i = h(null), [s, b] = N(null), a = h(null), d = k((e) => {
+    b(e), a.current = e;
   }, []);
-  return N(() => {
-    const e = s.current[n], d = () => {
-      const a = S(e), h = a?.height !== l.current?.height, p = a?.width !== l.current?.width, x = a?.left !== l.current?.left, y = a?.top !== l.current?.top;
-      (h || p || x || y) && c(a);
+  return x(() => {
+    const e = o.current[n], c = () => {
+      const l = U(e), m = l?.height !== a.current?.height, p = l?.width !== a.current?.width, g = l?.left !== a.current?.left, w = l?.top !== a.current?.top;
+      (m || p || g || w) && d(l);
     };
-    i.current = d, d();
-    const t = e ? new ResizeObserver(d) : null;
+    i.current = c, c();
+    const t = e ? new ResizeObserver(c) : null;
     return e && t?.observe(e), () => {
       e && t?.unobserve(e);
     };
-  }, [n, s, c]), N(() => {
+  }, [n, o, d]), x(() => {
     const e = r ? new ResizeObserver(() => {
       i.current?.();
     }) : null;
     return r && e?.observe(r), () => {
       r && e?.unobserve(r);
     };
-  }, [r]), o;
+  }, [r]), s;
 }
-function A({
+function O({
   className: n,
   tabs: r,
-  state: s,
+  state: o,
   showBorder: i = !0,
-  tabItemWrapPadding: o,
-  variant: u = "auto"
+  tabItemWrapPadding: s,
+  variant: b = "auto"
 }) {
-  const l = g(null), c = g({}), e = U(
-    s.id,
-    l.current,
-    c
-  ), d = (t, a) => () => s.handleTabChange(t, a);
-  return /* @__PURE__ */ f("div", { className: b("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ T(
+  const a = h(null), d = h({}), e = C(
+    o.id,
+    a.current,
+    d
+  ), c = (t, l) => () => o.handleTabChange(t, l);
+  return /* @__PURE__ */ u("div", { className: f("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ v(
     "div",
     {
-      ref: l,
-      className: b(
+      ref: a,
+      className: f(
         "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
         "scrollbar-hidden",
         i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
       ),
       children: [
-        e && /* @__PURE__ */ f(
+        e && /* @__PURE__ */ u(
           "div",
           {
             className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
@@ -67,18 +65,18 @@ function A({
             }
           }
         ),
-        r.map((t, a, h) => {
-          const p = a === h.length - 1;
-          return /* @__PURE__ */ f(
+        r.map((t, l, m) => {
+          const p = l === m.length - 1;
+          return /* @__PURE__ */ u(
             "button",
             {
-              ref: (x) => {
-                c.current[t.id] = x;
+              ref: (g) => {
+                d.current[t.id] = g;
               },
               type: "button",
-              onClick: t.disabled ? void 0 : d(t.id, a),
+              onClick: t.disabled ? void 0 : c(t.id, l),
               disabled: t.disabled,
-              className: b(
+              className: f(
                 // `outline-none` with nothing in its place left these triggers
                 // with no visible focus at all: a keyboard reader tabbing the
                 // strip could not see where they were. The ring matches the
@@ -86,13 +84,13 @@ function A({
                 // focused.
                 "flex items-center bg-transparent border-none shrink-0 text-foreground",
                 "outline-none ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                o ? "" : "p-0 pb-3.5",
-                u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !p && "mr-10 max-[500px]:mr-8",
+                s ? "" : "p-0 pb-3.5",
+                b === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !p && "mr-10 max-[500px]:mr-8",
                 t.disabled && "cursor-not-allowed",
                 !t.disabled && "cursor-pointer",
                 !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
               ),
-              style: o ? { padding: o } : void 0,
+              style: s ? { padding: s } : void 0,
               children: t.item
             },
             `tab-item-${t.id}`
@@ -102,87 +100,40 @@ function A({
     }
   ) });
 }
-function B({
+function q({
   icon: n,
   label: r,
-  selected: s,
+  selected: o,
   textSize: i = "default",
-  amount: o
+  amount: s
 }) {
-  return /* @__PURE__ */ T(k, { children: [
-    n && /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(y, { children: [
+    n && /* @__PURE__ */ u(
       "div",
       {
-        className: b(
+        className: f(
           "mr-3",
-          s ? "text-foreground" : "text-secondary-foreground"
+          o ? "text-foreground" : "text-secondary-foreground"
         ),
         children: n
       }
     ),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ u(
       "div",
       {
-        className: b(
+        className: f(
           "m-0 p-0 whitespace-nowrap",
           i === "default" && "text-sm leading-[17px] font-normal",
           i === "unset" && "text-[unset] leading-[unset] font-[unset]",
-          s ? "text-foreground" : "text-secondary-foreground"
+          o ? "text-foreground" : "text-secondary-foreground"
         ),
         children: r
       }
     ),
-    !!o && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
+    !!s && /* @__PURE__ */ u("div", { className: "ml-1.5", children: /* @__PURE__ */ u("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: s }) })
   ] });
 }
-function F(n, r = 0) {
-  const [s, i] = v(n), [o, u] = v(r), l = m((c, e) => {
-    i(c), u(e);
-  }, []);
-  return { id: s, index: o, handleTabChange: l };
-}
-function I(n) {
-  const { useLocation: r, useNavigate: s } = C(), { hash: i } = r(), o = s(), u = w(
-    () => n.reduce(
-      (t, a, h) => (t[a.id] = { id: a.id, index: h }, t),
-      {}
-    ),
-    [n]
-  ), l = w(() => i.slice(1).toLowerCase(), [i]), { id: c, index: e } = u[l] || {}, d = m(
-    (t) => {
-      o(`#${t}`);
-    },
-    [o]
-  );
-  return {
-    id: c,
-    index: e,
-    handleTabChange: d
-  };
-}
-function M({
-  defaultTabs: n,
-  pathRoot: r,
-  selectedSection: s
-}) {
-  const { useNavigate: i } = C(), o = i(), u = w(
-    () => n.reduce(
-      (d, t, a) => (d[t.id] = { id: t.id, index: a }, d),
-      {}
-    ),
-    [n]
-  ), l = m(
-    (d) => {
-      o(`${r}/${d}`);
-    },
-    [o, r]
-  ), { id: c, index: e } = u[s] || {};
-  return { id: c, index: e, handleTabChange: l };
-}
 export {
-  A as TabControl,
-  B as TabItem,
-  I as useHashTabs,
-  M as useSectionTab,
-  F as useTabControl
+  O as TabControl,
+  q as TabItem
 };

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

@@ -1,12 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Skeleton as l } from "../skeleton/skeleton.js";
+import { Skeleton as p } from "../skeleton/skeleton.js";
 import "react";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as t } from "../../utils/cn.js";
-import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-function u({
+function y({
   height: e = "70px",
   columns: i = 6,
   cellClassName: o,
@@ -20,7 +19,7 @@ function u({
       className: t("contents", n),
       style: { minHeight: e },
       ...d,
-      children: Array.from({ length: i }, (s, p) => /* @__PURE__ */ r(
+      children: Array.from({ length: i }, (s, l) => /* @__PURE__ */ r(
         "div",
         {
           className: t(
@@ -29,13 +28,13 @@ function u({
             o || "p-4"
           ),
           style: { minHeight: e },
-          children: /* @__PURE__ */ r(l, { width: "full", height: "md" })
+          children: /* @__PURE__ */ r(p, { width: "full", height: "md" })
         },
-        `${p}-${i}`
+        `${l}-${i}`
       ))
     }
   );
 }
 export {
-  u as GridLoadingLine
+  y as GridLoadingLine
 };

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

@@ -1,11 +1,11 @@
 import { jsx as s } 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 { BaseLink as C } 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 { Grid as H } from "../layout/grid/grid.js";
 import { cn as r } from "../../utils/cn.js";
-const K = g("w-full", {
+const k = g("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -16,20 +16,20 @@ const K = g("w-full", {
   defaultVariants: {
     size: "default"
   }
-}), A = l.forwardRef(
+}), D = 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,
+    H,
     {
       ref: c,
       cols: a,
       gap: n,
-      className: r(K({ size: t, className: e })),
+      className: r(k({ size: t, className: e })),
       ...f
     }
   ) })
 );
-A.displayName = "GridTable";
-const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+D.displayName = "GridTable";
+const K = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
@@ -44,8 +44,8 @@ const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-F.displayName = "GridTableHeader";
-const R = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+K.displayName = "GridTableHeader";
+const A = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
@@ -53,8 +53,8 @@ const R = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-R.displayName = "GridTableBody";
-const S = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+A.displayName = "GridTableBody";
+const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
@@ -65,8 +65,8 @@ const S = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-S.displayName = "GridTableFooter";
-const E = l.forwardRef(
+F.displayName = "GridTableFooter";
+const R = l.forwardRef(
   ({
     className: e,
     cols: t,
@@ -78,9 +78,9 @@ const E = l.forwardRef(
     noRound: y,
     onRowClick: o,
     href: x,
-    target: B,
-    rel: V,
-    style: C,
+    target: w,
+    rel: z,
+    style: B,
     children: m,
     ...u
   }, b) => {
@@ -91,7 +91,7 @@ const E = l.forwardRef(
         ) || o(d);
       },
       [o]
-    ), h = l.useCallback(
+    ), N = l.useCallback(
       (d) => {
         if (o && (d.key === "Enter" || d.key === " ")) {
           if (d.preventDefault(), d.target.closest(
@@ -102,7 +102,7 @@ const E = l.forwardRef(
         }
       },
       [o]
-    ), N = r(
+    ), h = r(
       "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
       "[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",
       !y && [
@@ -119,26 +119,26 @@ const E = l.forwardRef(
       f && "[&>*]:opacity-0"
     ), G = r(
       "grid grid-cols-subgrid col-span-full",
-      N,
+      h,
       "cursor-pointer",
       e
     ), p = {
-      ...C,
+      ...B,
       ...T ? { height: T } : {}
     };
     return x ? /* @__PURE__ */ s(
-      k,
+      C,
       {
         ref: b,
         href: x,
-        target: B,
-        rel: V,
+        target: w,
+        rel: z,
         size: "unset",
         variant: "unset",
         className: r("no-underline text-foreground!", G),
         style: p,
         onClick: o ? v : void 0,
-        onKeyDown: o ? h : void 0,
+        onKeyDown: o ? N : void 0,
         ...u,
         children: m
       }
@@ -153,7 +153,7 @@ const E = l.forwardRef(
           className: G,
           style: p,
           onClick: v,
-          onKeyDown: h,
+          onKeyDown: N,
           ...u,
           children: m
         }
@@ -164,7 +164,7 @@ const E = l.forwardRef(
         ref: b,
         className: r(
           "grid grid-cols-subgrid col-span-full",
-          N,
+          h,
           e
         ),
         style: p,
@@ -174,8 +174,8 @@ const E = l.forwardRef(
     );
   }
 );
-E.displayName = "GridTableRow";
-const I = g(
+R.displayName = "GridTableRow";
+const S = g(
   "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
@@ -201,21 +201,21 @@ const I = g(
       gapBefore: "none"
     }
   }
-), w = l.forwardRef(
+), E = l.forwardRef(
   ({ className: e, size: t, span: a = 1, justify: n = "start", gapBefore: i, ...f }, c) => /* @__PURE__ */ s(
     j,
     {
       ref: c,
       span: a,
       className: r(
-        I({ size: t, justify: n, gapBefore: i, className: e })
+        S({ size: t, justify: n, gapBefore: i, className: e })
       ),
       ...f
     }
   )
 );
-w.displayName = "GridTableHead";
-const L = g("flex items-center align-middle", {
+E.displayName = "GridTableHead";
+const I = g("flex items-center align-middle", {
   variants: {
     size: {
       sm: "px-1 py-2",
@@ -238,20 +238,20 @@ const L = g("flex items-center align-middle", {
     textAlign: "left",
     gapBefore: "none"
   }
-}), z = l.forwardRef(
+}), L = l.forwardRef(
   ({ className: e, size: t, span: a = 1, textAlign: n, gapBefore: i, ...f }, c) => /* @__PURE__ */ s(
     j,
     {
       ref: c,
       span: a,
       className: r(
-        L({ size: t, textAlign: n, gapBefore: i, className: e })
+        I({ size: t, textAlign: n, gapBefore: i, className: e })
       ),
       ...f
     }
   )
 );
-z.displayName = "GridTableCell";
+L.displayName = "GridTableCell";
 const $ = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   "div",
   {
@@ -264,19 +264,16 @@ const $ = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   }
 ));
 $.displayName = "GridTableCaption";
-const U = z, W = w;
 export {
-  A as GridTable,
-  R as GridTableBody,
+  D as GridTable,
+  A 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
+  L as GridTableCell,
+  F as GridTableFooter,
+  E as GridTableHead,
+  K as GridTableHeader,
+  R as GridTableRow,
+  I as gridTableCellVariants,
+  S as gridTableHeadVariants,
+  k as gridTableVariants
 };

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

@@ -1,14 +1,14 @@
 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 { GridLoadingLine as d } from "./grid-loading-line.js";
+import { GridTable as b, GridTableBody as i, GridTableCaption as T, GridTableCell as t, GridTableFooter as n, GridTableHead as G, GridTableHeader as m, GridTableRow as p, gridTableCellVariants as f, gridTableHeadVariants as x, gridTableVariants as s } from "./grid-table.js";
+import { Table as H, TableBody as L, TableCell as V, TableHead as g, TableHeader as w, TableRow as y, tableCellVariants as B, tableHeadVariants as R, tableVariants as S } from "./table.js";
+import { TableLoader as E } from "./table-loader.js";
+import { TableLoaderGuard as c } from "./table-loader-guard.js";
+import { TableCellSm as j, TableLineSm as k } from "./table-sm.js";
 export {
   r as GridErrorLine,
-  o as GridLoadingLine,
-  d as GridTable,
+  d as GridLoadingLine,
+  b as GridTable,
   i as GridTableBody,
   T as GridTableCaption,
   t as GridTableCell,
@@ -16,25 +16,20 @@ export {
   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,
+  H as Table,
+  L as TableBody,
+  V as TableCell,
+  j as TableCellSm,
+  g as TableHead,
+  w as TableHeader,
+  k as TableLineSm,
+  E as TableLoader,
+  c as TableLoaderGuard,
+  y as TableRow,
+  f as gridTableCellVariants,
+  x as gridTableHeadVariants,
   s as gridTableVariants,
-  u as tableCellVariants,
-  E as tableHeadVariants,
-  c as tableVariants
+  B as tableCellVariants,
+  R as tableHeadVariants,
+  S as tableVariants
 };

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

@@ -1,24 +1,22 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import "react";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as t } from "../../utils/cn.js";
-import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-function j({
+function h({
   title: s,
-  className: e,
+  className: r,
   children: o,
   ...l
 }) {
-  return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", e), ...l, children: [
-    s && /* @__PURE__ */ r("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: s }),
-    /* @__PURE__ */ r("div", { className: "text-sm", children: o })
+  return /* @__PURE__ */ i("div", { className: t("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 y({
+function S({
   title: s,
-  columnsXs: e = 1,
+  columnsXs: r = 1,
   columnsSm: o,
   columnsMd: l,
   columns: a,
@@ -26,7 +24,7 @@ function y({
   children: p,
   ...x
 }) {
-  const m = e, c = o ?? m, d = l ?? c, g = a ?? d;
+  const c = r, d = o ?? c, m = l ?? d, g = a ?? m;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -36,15 +34,15 @@ function y({
       ),
       ...x,
       children: [
-        s && /* @__PURE__ */ r("div", { className: "font-medium mb-2", children: s }),
-        /* @__PURE__ */ r(
+        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": m,
-              "--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
@@ -55,6 +53,6 @@ function y({
   );
 }
 export {
-  j as TableCellSm,
-  y as TableLineSm
+  h as TableCellSm,
+  S as TableLineSm
 };