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

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

@@ -1,64 +1,60 @@
-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 "luxon";
+import { jsx as m, jsxs as w } from "react/jsx-runtime";
+import { useRef as f, useState as k, useCallback as U, useEffect as v } from "react";
+import { cn as g } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 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 };
+function y(o) {
+  if (!o) return null;
+  const { width: n = 0, height: i = 0 } = o?.getBoundingClientRect() || {}, a = o?.offsetTop || 0, l = o?.offsetLeft || 0;
+  return { width: n, height: i, left: l, top: a };
 }
-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(o, n, i) {
+  const a = f(null), [l, d] = k(null), s = f(null), u = U((e) => {
+    d(e), s.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 v(() => {
+    const e = i.current[o], c = () => {
+      const r = y(e), b = r?.height !== s.current?.height, h = r?.width !== s.current?.width, p = r?.left !== s.current?.left, x = r?.top !== s.current?.top;
+      (b || h || p || x) && u(r);
     };
-    i.current = d, d();
-    const t = e ? new ResizeObserver(d) : null;
+    a.current = c, c();
+    const t = e ? new ResizeObserver(c) : null;
     return e && t?.observe(e), () => {
       e && t?.unobserve(e);
     };
-  }, [n, s, c]), N(() => {
-    const e = r ? new ResizeObserver(() => {
-      i.current?.();
+  }, [o, i, u]), v(() => {
+    const e = n ? new ResizeObserver(() => {
+      a.current?.();
     }) : null;
-    return r && e?.observe(r), () => {
-      r && e?.unobserve(r);
+    return n && e?.observe(n), () => {
+      n && e?.unobserve(n);
     };
-  }, [r]), o;
+  }, [n]), l;
 }
-function B({
-  className: n,
-  tabs: r,
-  state: s,
-  showBorder: i = !0,
-  tabItemWrapPadding: o,
-  variant: u = "auto"
+function z({
+  className: o,
+  tabs: n,
+  state: i,
+  showBorder: a = !0,
+  tabItemWrapPadding: l,
+  variant: d = "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 s = f(null), u = f({}), e = C(
+    i.id,
+    s.current,
+    u
+  ), c = (t, r) => () => i.handleTabChange(t, r);
+  return /* @__PURE__ */ m("div", { className: g("relative w-full flex flex-col flex-wrap", o), children: /* @__PURE__ */ w(
     "div",
     {
-      ref: l,
-      className: m(
+      ref: s,
+      className: g(
         "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"
+        a && "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__ */ m(
           "div",
           {
             className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
@@ -68,26 +64,32 @@ function B({
             }
           }
         ),
-        r.map((t, a, h) => {
-          const x = a === h.length - 1;
-          return /* @__PURE__ */ f(
+        n.map((t, r, b) => {
+          const h = r === b.length - 1;
+          return /* @__PURE__ */ m(
             "button",
             {
-              ref: (g) => {
-                c.current[t.id] = g;
+              ref: (p) => {
+                u.current[t.id] = p;
               },
               type: "button",
-              onClick: t.disabled ? void 0 : d(t.id, a),
+              onClick: t.disabled ? void 0 : c(t.id, r),
               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: g(
+                // `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",
+                l ? "" : "p-0 pb-3.5",
+                d === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !h && "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: l ? { padding: l } : void 0,
               children: t.item
             },
             `tab-item-${t.id}`
@@ -97,87 +99,6 @@ function B({
     }
   ) });
 }
-function F({
-  icon: n,
-  label: r,
-  selected: s,
-  textSize: i = "default",
-  amount: o
-}) {
-  return /* @__PURE__ */ T(S, { children: [
-    n && /* @__PURE__ */ f(
-      "div",
-      {
-        className: m(
-          "mr-3",
-          s ? "text-foreground" : "text-secondary-foreground"
-        ),
-        children: n
-      }
-    ),
-    /* @__PURE__ */ f(
-      "div",
-      {
-        className: m(
-          "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"
-        ),
-        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 }) })
-  ] });
-}
-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
+  z as TabControl
 };

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

@@ -0,0 +1,40 @@
+import { jsxs as s, Fragment as m, 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 c({
+  icon: r,
+  label: d,
+  selected: t,
+  textSize: n = "default",
+  amount: o
+}) {
+  return /* @__PURE__ */ s(m, { children: [
+    r && /* @__PURE__ */ e(
+      "div",
+      {
+        className: a(
+          "mr-3",
+          t ? "text-foreground" : "text-secondary-foreground"
+        ),
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: a(
+          "m-0 p-0 whitespace-nowrap",
+          n === "default" && "text-sm leading-[17px] font-normal",
+          n === "unset" && "text-[unset] leading-[unset] font-[unset]",
+          t ? "text-foreground" : "text-secondary-foreground"
+        ),
+        children: d
+      }
+    ),
+    !!o && /* @__PURE__ */ e("div", { className: "ml-1.5", children: /* @__PURE__ */ e("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
+  ] });
+}
+export {
+  c as TabItem
+};

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

@@ -1,42 +1,39 @@
 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 "luxon";
+import { cn as t } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-function v({
-  height: i = "70px",
-  columns: t = 6,
+function x({
+  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
+  x as GridLoadingLine
 };

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

@@ -1,11 +1,11 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } 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 * as n from "react";
+import { BaseLink as H } 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 k } from "../layout/grid/grid.js";
 import { cn as r } from "../../utils/cn.js";
-const K = g("w-full", {
+const D = g("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -16,20 +16,20 @@ 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,
+}), C = n.forwardRef(
+  ({ className: e, size: t, cols: a = 12, gap: d = 0, wrapperClassName: s, ...f }, c) => /* @__PURE__ */ i("div", { className: r("relative w-full overflow-auto", s), children: /* @__PURE__ */ i(
+    k,
     {
       ref: c,
       cols: a,
-      gap: n,
-      className: r(K({ size: t, className: e })),
+      gap: d,
+      className: r(D({ size: t, className: e })),
       ...f
     }
   ) })
 );
-A.displayName = "GridTable";
-const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+C.displayName = "GridTable";
+const K = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ i(
   "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 = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ i(
   "div",
   {
     ref: a,
@@ -53,55 +53,43 @@ const R = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...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(
+A.displayName = "GridTableBody";
+const S = n.forwardRef(
   ({
     className: e,
     cols: t,
     gap: a = 0,
-    last: n,
-    height: i,
+    last: d,
+    height: s,
     hideValue: f,
     noHover: c,
     noRound: y,
-    onRowClick: o,
+    onRowClick: l,
     href: x,
-    target: B,
-    rel: V,
-    style: C,
-    children: m,
-    ...u
+    target: z,
+    rel: w,
+    style: B,
+    children: u,
+    ...m
   }, b) => {
-    const T = typeof i == "number" ? `${i}px` : i, v = l.useCallback(
-      (d) => {
-        !o || d.target.closest(
+    const T = typeof s == "number" ? `${s}px` : s, v = n.useCallback(
+      (o) => {
+        !l || o.target.closest(
           "a, button, input, select, textarea, [role='button']"
-        ) || o(d);
+        ) || l(o);
       },
-      [o]
-    ), h = l.useCallback(
-      (d) => {
-        if (o && (d.key === "Enter" || d.key === " ")) {
-          if (d.preventDefault(), d.target.closest(
+      [l]
+    ), h = n.useCallback(
+      (o) => {
+        if (l && (o.key === "Enter" || o.key === " ")) {
+          if (o.preventDefault(), o.target.closest(
             "a, button, input, select, textarea, [role='button']"
           ))
             return;
-          o(d);
+          l(o);
         }
       },
-      [o]
+      [l]
     ), N = r(
       "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
       "[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",
@@ -115,7 +103,7 @@ const E = l.forwardRef(
         "hover:[&>*]:before:opacity-100",
         !y && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
       ],
-      n && "[&>*]:after:hidden",
+      d && "[&>*]:after:hidden",
       f && "[&>*]:opacity-0"
     ), G = r(
       "grid grid-cols-subgrid col-span-full",
@@ -123,28 +111,28 @@ const E = l.forwardRef(
       "cursor-pointer",
       e
     ), p = {
-      ...C,
+      ...B,
       ...T ? { height: T } : {}
     };
-    return x ? /* @__PURE__ */ s(
-      k,
+    return x ? /* @__PURE__ */ i(
+      H,
       {
         ref: b,
         href: x,
-        target: B,
-        rel: V,
+        target: z,
+        rel: w,
         size: "unset",
         variant: "unset",
         className: r("no-underline text-foreground!", G),
         style: p,
-        onClick: o ? v : void 0,
-        onKeyDown: o ? h : void 0,
-        ...u,
-        children: m
+        onClick: l ? v : void 0,
+        onKeyDown: l ? h : void 0,
+        ...m,
+        children: u
       }
-    ) : o ? (
+    ) : l ? (
       // biome-ignore lint/a11y/useSemanticElements: Using div with subgrid layout, not a semantic table
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ i(
         "div",
         {
           ref: b,
@@ -154,11 +142,11 @@ const E = l.forwardRef(
           style: p,
           onClick: v,
           onKeyDown: h,
-          ...u,
-          children: m
+          ...m,
+          children: u
         }
       )
-    ) : /* @__PURE__ */ s(
+    ) : /* @__PURE__ */ i(
       "div",
       {
         ref: b,
@@ -168,14 +156,14 @@ const E = l.forwardRef(
           e
         ),
         style: p,
-        ...u,
-        children: m
+        ...m,
+        children: u
       }
     );
   }
 );
-E.displayName = "GridTableRow";
-const I = g(
+S.displayName = "GridTableRow";
+const E = g(
   "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
@@ -201,20 +189,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(
+), I = n.forwardRef(
+  ({ className: e, size: t, span: a = 1, justify: d = "start", gapBefore: s, ...f }, c) => /* @__PURE__ */ i(
     j,
     {
       ref: c,
       span: a,
       className: r(
-        I({ size: t, justify: n, gapBefore: i, className: e })
+        E({ 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 +226,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(
+}), $ = n.forwardRef(
+  ({ className: e, size: t, span: a = 1, textAlign: d, gapBefore: s, ...f }, c) => /* @__PURE__ */ i(
     j,
     {
       ref: c,
       span: a,
       className: r(
-        L({ size: t, textAlign: n, gapBefore: i, className: e })
+        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;
+$.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
+  C as GridTable,
+  A as GridTableBody,
+  $ as GridTableCell,
+  I as GridTableHead,
+  K as GridTableHeader,
+  S as GridTableRow
 };