@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.60

package/dist/esm/components/split-list/split-list.js

@@ -1,13 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
-import { cva as c } from "class-variance-authority";
+import { cva as m } from "class-variance-authority";
 import * as t from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as u } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const b = c(
+const b = m(
   [
     /* layout */
     "relative flex items-center",
@@ -38,7 +36,7 @@ const b = c(
           l
         ),
         children: n.map((r, o, f) => {
-          const p = typeof e == "function" ? e(o, f) : e, m = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
+          const p = typeof e == "function" ? e(o, f) : e, c = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
           return /* @__PURE__ */ a(
             "div",
             {
@@ -47,7 +45,7 @@ const b = c(
               }),
               children: r
             },
-            m
+            c
           );
         })
       }

package/dist/esm/components/status-elements/status-elements.js

@@ -1,10 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cva as u } from "class-variance-authority";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as o } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
 const d = {
@@ -14,11 +11,11 @@ const d = {
   critical: "bg-destructive",
   liquidation: "bg-liquidation"
 };
-function A({ zone: i, size: t = 8 }) {
+function O({ zone: i, size: t = 8 }) {
   return /* @__PURE__ */ a(
     "div",
     {
-      className: s("rounded-full shrink-0", d[i]),
+      className: o("rounded-full shrink-0", d[i]),
       style: { width: t, height: t },
       "aria-hidden": !0
     }
@@ -30,7 +27,7 @@ const l = {
   bad: 1,
   critical: 1,
   liquidation: 1
-}, m = 3, g = {
+}, g = 3, m = {
   good: "success",
   medium: "warning",
   bad: "destructive",
@@ -53,17 +50,17 @@ const l = {
     }
   }
 );
-function x({ zone: i }) {
-  const t = l[i], e = g[i], n = Array.from({ length: m }, (o, r) => {
+function B({ zone: i }) {
+  const t = l[i], e = m[i], n = Array.from({ length: g }, (s, r) => {
     const c = r < t;
     return {
       key: r,
       color: c ? e : "gray-50"
     };
   }).reverse();
-  return /* @__PURE__ */ a("div", { className: s("flex flex-wrap gap-0.5 w-2"), "aria-hidden": !0, children: n.map(({ key: o, color: r }) => /* @__PURE__ */ a("div", { className: b({ color: r }) }, o)) });
+  return /* @__PURE__ */ a("div", { className: o("flex flex-wrap gap-0.5 w-2"), "aria-hidden": !0, children: n.map(({ key: s, color: r }) => /* @__PURE__ */ a("div", { className: b({ color: r }) }, s)) });
 }
 export {
-  A as HealthDot,
-  x as StatusBars
+  O as HealthDot,
+  B as StatusBars
 };

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

@@ -1,8 +1,5 @@
-import { TabControl as e, TabItem as b, useHashTabs as s, useSectionTab as t, useTabControl as T } from "./tab-control.js";
+import { TabControl as t, TabItem as a } from "./tab-control.js";
 export {
-  e as TabControl,
-  b as TabItem,
-  s as useHashTabs,
-  t as useSectionTab,
-  T as useTabControl
+  t as TabControl,
+  a as TabItem
 };

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

@@ -1,64 +1,61 @@
-import { jsx as f, jsxs as T, Fragment as S } from "react/jsx-runtime";
-import { useRef as p, useState as v, useCallback as b, useMemo as w, useEffect as N } from "react";
-import { useNavigationAdapter as C } from "../navigation-context/navigation-context.js";
-import "@gearbox-protocol/sdk";
-import { cn as m } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+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 f } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
 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 $(n, r, s) {
-  const i = p(null), [o, u] = v(null), l = p(null), c = b((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 = U(e), h = a?.height !== l.current?.height, x = a?.width !== l.current?.width, g = a?.left !== l.current?.left, y = a?.top !== l.current?.top;
-      (h || x || g || 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 B({
+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 = p(null), c = p({}), e = $(
-    s.id,
-    l.current,
-    c
-  ), d = (t, a) => () => s.handleTabChange(t, a);
-  return /* @__PURE__ */ f("div", { className: m("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: m(
+      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]",
@@ -68,26 +65,32 @@ function B({
             }
           }
         ),
-        r.map((t, a, h) => {
-          const x = a === h.length - 1;
-          return /* @__PURE__ */ f(
+        r.map((t, l, m) => {
+          const p = l === m.length - 1;
+          return /* @__PURE__ */ u(
             "button",
             {
               ref: (g) => {
-                c.current[t.id] = 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: m(
-                "flex items-center bg-transparent border-none shrink-0 text-foreground outline-none",
-                o ? "" : "p-0 pb-3.5",
-                u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
+              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
+                // Radix-backed `Tabs` trigger so the two look the same when
+                // 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",
+                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}`
@@ -97,87 +100,40 @@ function B({
     }
   ) });
 }
-function F({
+function q({
   icon: n,
   label: r,
-  selected: s,
+  selected: o,
   textSize: i = "default",
-  amount: o
+  amount: s
 }) {
-  return /* @__PURE__ */ T(S, { children: [
-    n && /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(y, { children: [
+    n && /* @__PURE__ */ u(
       "div",
       {
-        className: m(
+        className: f(
           "mr-3",
-          s ? "text-foreground" : "text-secondary-foreground"
+          o ? "text-foreground" : "text-secondary-foreground"
         ),
         children: n
       }
     ),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ u(
       "div",
       {
-        className: m(
+        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 I(n, r = 0) {
-  const [s, i] = v(n), [o, u] = v(r), l = b((c, e) => {
-    i(c), u(e);
-  }, []);
-  return { id: s, index: o, handleTabChange: l };
-}
-function M(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 = b(
-    (t) => {
-      o(`#${t}`);
-    },
-    [o]
-  );
-  return {
-    id: c,
-    index: e,
-    handleTabChange: d
-  };
-}
-function D({
-  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 = b(
-    (d) => {
-      o(`${r}/${d}`);
-    },
-    [o, r]
-  ), { id: c, index: e } = u[s] || {};
-  return { id: c, index: e, handleTabChange: l };
-}
 export {
-  B as TabControl,
-  F as TabItem,
-  M as useHashTabs,
-  D as useSectionTab,
-  I as useTabControl
+  O as TabControl,
+  q as TabItem
 };

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

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