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

package/dist/esm/components/app-bar/app-bar-frame.js

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as i } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+const s = t.forwardRef(
+  ({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+    "nav",
+    {
+      ref: p,
+      className: i(
+        "relative flex flex-row flex-nowrap items-center w-full",
+        "py-4 px-4 md:px-10",
+        e
+      ),
+      ...r,
+      children: a
+    }
+  )
+);
+s.displayName = "AppBar";
+const l = t.forwardRef(({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: p,
+    className: i("flex flex-row flex-nowrap items-center gap-2", e),
+    ...r,
+    children: a
+  }
+));
+l.displayName = "AppBarSidePanel";
+const n = t.forwardRef(
+  ({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: p,
+      className: i(
+        "relative grow shrink-0 basis-[0%] flex justify-center self-end",
+        "px-0 md:px-3",
+        e
+      ),
+      ...r,
+      children: a
+    }
+  )
+);
+n.displayName = "AppBarCenter";
+const m = t.forwardRef(({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: p,
+    className: i(
+      "absolute bottom-[-15px] [&>div>div]:overflow-visible whitespace-nowrap w-min",
+      "hidden md:block",
+      e
+    ),
+    ...r,
+    children: a
+  }
+));
+m.displayName = "AppBarCenterContent";
+export {
+  s as AppBar,
+  n as AppBarCenter,
+  m as AppBarCenterContent,
+  l as AppBarSidePanel
+};

package/dist/esm/components/app-bar/app-bar.js

@@ -1,81 +1,22 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { faBars as u } from "@fortawesome/free-solid-svg-icons";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { faBars as f } from "@fortawesome/free-solid-svg-icons";
 import * as p from "react";
 import { Button as c } from "../buttons/button/button.js";
-import { FaIcon as x } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
+import { FaIcon as g } from "../icons/fa-icon.js";
 import { cn as t } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import { Z_INDEX as g } from "../../utils/z-index.js";
-const w = p.forwardRef(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-    "nav",
-    {
-      ref: o,
-      className: t(
-        "relative flex flex-row flex-nowrap items-center w-full",
-        "py-4 px-4 md:px-10",
-        e
-      ),
-      ...r,
-      children: a
-    }
-  )
-);
-w.displayName = "AppBar";
-const v = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-  "div",
-  {
-    ref: o,
-    className: t("flex flex-row flex-nowrap items-center gap-2", e),
-    ...r,
-    children: a
-  }
-));
-v.displayName = "AppBarSidePanel";
-const N = p.forwardRef(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-    "div",
-    {
-      ref: o,
-      className: t(
-        "relative grow shrink-0 basis-[0%] flex justify-center self-end",
-        "px-0 md:px-3",
-        e
-      ),
-      ...r,
-      children: a
-    }
-  )
-);
-N.displayName = "AppBarCenter";
-const h = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-  "div",
-  {
-    ref: o,
-    className: t(
-      "absolute bottom-[-15px] [&>div>div]:overflow-visible whitespace-nowrap w-min",
-      "hidden md:block",
-      e
-    ),
-    ...r,
-    children: a
-  }
-));
-h.displayName = "AppBarCenterContent";
-const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className: o, ...s }, i) => /* @__PURE__ */ d(
+import "@gearbox-protocol/sdk/onchain";
+import { Z_INDEX as x } from "../../utils/z-index.js";
+const N = p.forwardRef(({ attribute: e, hasHover: a = !0, children: o, className: n, ...s }, i) => /* @__PURE__ */ m(
   "div",
   {
     ref: i,
     className: t(
       "relative text-[15px] leading-[125%] text-foreground cursor-pointer group/app-nav-item",
-      o
+      n
     ),
     ...s,
     children: [
-      a && /* @__PURE__ */ n(
+      a && /* @__PURE__ */ r(
         "div",
         {
           "aria-hidden": "true",
@@ -88,9 +29,9 @@ const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className
           )
         }
       ),
-      /* @__PURE__ */ d("div", { className: "relative flex items-center", children: [
-        r,
-        e != null && /* @__PURE__ */ n(
+      /* @__PURE__ */ m("div", { className: "relative flex items-center", children: [
+        o,
+        e != null && /* @__PURE__ */ r(
           "div",
           {
             className: t(
@@ -107,56 +48,56 @@ const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className
     ]
   }
 ));
-B.displayName = "AppBarNavItem";
-const f = {
+N.displayName = "AppBarNavItem";
+const u = {
   sm: "sm",
   md: "default",
   lg: "lg"
-}, m = {
+}, d = {
   sm: 12,
   md: 14,
   lg: 16
-}, y = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+}, h = p.forwardRef(({ size: e = "lg", className: a, ...o }, n) => /* @__PURE__ */ r(
   c,
   {
-    ref: o,
+    ref: n,
     variant: "outline",
-    size: f[e],
+    size: u[e],
     width: "compact",
     className: t("inline-flex", a),
-    ...r,
-    children: /* @__PURE__ */ n(
-      x,
+    ...o,
+    children: /* @__PURE__ */ r(
+      g,
       {
-        icon: u,
+        icon: f,
         className: "text-foreground",
-        style: { width: m[e], height: m[e] }
+        style: { width: d[e], height: d[e] }
       }
     )
   }
 ));
-y.displayName = "AppBarHamburgerButton";
-const b = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+h.displayName = "AppBarHamburgerButton";
+const v = p.forwardRef(({ size: e = "lg", className: a, ...o }, n) => /* @__PURE__ */ r(
   c,
   {
-    ref: o,
+    ref: n,
     variant: "outline",
-    size: f[e],
+    size: u[e],
     width: "compact",
     className: t("inline-flex", a),
-    ...r,
-    children: /* @__PURE__ */ n(A, {})
+    ...o,
+    children: /* @__PURE__ */ r(w, {})
   }
 ));
-b.displayName = "AppBarDotsButton";
-function A() {
-  return /* @__PURE__ */ d("span", { className: "inline-flex items-center justify-center gap-[2px]", children: [
-    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
-    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
-    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" })
+v.displayName = "AppBarDotsButton";
+function w() {
+  return /* @__PURE__ */ m("span", { className: "inline-flex items-center justify-center gap-[2px]", children: [
+    /* @__PURE__ */ r("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
+    /* @__PURE__ */ r("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
+    /* @__PURE__ */ r("span", { className: "block w-1 h-1 rounded-full bg-foreground" })
   ] });
 }
-const R = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, ...s }, i) => /* @__PURE__ */ n(
+const y = p.forwardRef(({ children: e, className: a, onClick: o, onKeyDown: n, ...s }, i) => /* @__PURE__ */ r(
   "div",
   {
     ref: i,
@@ -172,40 +113,36 @@ const R = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, .
       "transition-colors",
       a
     ),
-    onClick: r,
+    onClick: o,
     onKeyDown: (l) => {
-      (l.key === "Enter" || l.key === " ") && r?.(l), o?.(l);
+      (l.key === "Enter" || l.key === " ") && o?.(l), n?.(l);
     },
     ...s,
     children: e
   }
 ));
-R.displayName = "AppBarMenuItem";
-const D = p.forwardRef(({ children: e, className: a, ...r }, o) => /* @__PURE__ */ n(
+y.displayName = "AppBarMenuItem";
+const B = p.forwardRef(({ children: e, className: a, ...o }, n) => /* @__PURE__ */ r(
   "div",
   {
-    ref: o,
+    ref: n,
     role: "menu",
     className: t(
       "mt-2 p-1 overflow-hidden min-w-40",
       "bg-gray-40 rounded-xl",
       "shadow-[0_2px_16px_rgba(0,0,0,0.6)]",
-      g.DROPDOWN,
+      x.DROPDOWN,
       a
     ),
-    ...r,
+    ...o,
     children: e
   }
 ));
-D.displayName = "AppBarDropdownMenu";
+B.displayName = "AppBarDropdownMenu";
 export {
-  w as AppBar,
-  N as AppBarCenter,
-  h as AppBarCenterContent,
-  b as AppBarDotsButton,
-  D as AppBarDropdownMenu,
-  y as AppBarHamburgerButton,
-  R as AppBarMenuItem,
-  B as AppBarNavItem,
-  v as AppBarSidePanel
+  v as AppBarDotsButton,
+  B as AppBarDropdownMenu,
+  h as AppBarHamburgerButton,
+  y as AppBarMenuItem,
+  N as AppBarNavItem
 };

package/dist/esm/components/app-bar/index.js

@@ -1,12 +1,8 @@
-import { AppBar as e, AppBarCenter as a, AppBarCenterContent as t, AppBarDotsButton as B, AppBarDropdownMenu as n, AppBarHamburgerButton as A, AppBarMenuItem as o, AppBarNavItem as u, AppBarSidePanel as m } from "./app-bar.js";
+import { AppBarDotsButton as t, AppBarDropdownMenu as a, AppBarHamburgerButton as o, AppBarMenuItem as B, AppBarNavItem as e } from "./app-bar.js";
 export {
-  e as AppBar,
-  a as AppBarCenter,
-  t as AppBarCenterContent,
-  B as AppBarDotsButton,
-  n as AppBarDropdownMenu,
-  A as AppBarHamburgerButton,
-  o as AppBarMenuItem,
-  u as AppBarNavItem,
-  m as AppBarSidePanel
+  t as AppBarDotsButton,
+  a as AppBarDropdownMenu,
+  o as AppBarHamburgerButton,
+  B as AppBarMenuItem,
+  e as AppBarNavItem
 };

package/dist/esm/components/assets-list-cell/assets-list-cell.js

@@ -1,212 +1,145 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { IconExternal as R } from "@gearbox-protocol/static";
-import { useMemo as S } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { IconExternal as j } from "@gearbox-protocol/static";
+import { useMemo as A } from "react";
 import "../buttons/back-button/back-button.js";
-import { Button as $ } from "../buttons/button/button.js";
+import { Button as z } from "../buttons/button/button.js";
 import "../buttons/copy-button/copy-button.js";
 import "../buttons/external-button/external-button.js";
-import "../buttons/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
-import "@gearbox-protocol/sdk";
-import { cn as T } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
-import { CollateralAllocationTooltip as B } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
-import { TokenIcon as j } from "../token-icon/token-icon.js";
-import { SimpleTooltip as M } from "../tooltip/simple-tooltip.js";
+import { CollateralAllocationTooltip as L } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
+import { TokenIcon as N } from "../token-icon/token-icon.js";
+import { SimpleTooltip as v } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-function z(t, n) {
-  return t ? /* @__PURE__ */ e(B, { data: t, children: n }) : n;
+import { cn as f } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+function M(e, n) {
+  return e ? /* @__PURE__ */ t(L, { data: e, children: n }) : n;
 }
-function O({
-  count: t,
+function S({
+  count: e,
   iconSize: n,
   onOtherClick: o,
-  otherTooltip: i,
-  fallbackTooltip: m
+  otherTooltip: r,
+  fallbackTooltip: l
 }) {
-  const l = T(
+  const i = f(
     "inline-flex items-center justify-center rounded-full shrink-0",
     "bg-gray-50 text-foreground ml-1!",
     o && "cursor-pointer hover:bg-gray-70 transition-colors"
-  ), c = {
+  ), s = {
     width: n,
     height: n,
     minWidth: n,
     minHeight: n,
     zIndex: 0
-  }, u = /* @__PURE__ */ p("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
+  }, a = /* @__PURE__ */ d("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
     "+",
-    t
+    e
   ] });
-  return !o && !i ? /* @__PURE__ */ e("span", { className: l, style: c, children: u }) : /* @__PURE__ */ e(M, { title: o ? /* @__PURE__ */ e(
+  return !o && !r ? /* @__PURE__ */ t("span", { className: i, style: s, children: a }) : /* @__PURE__ */ t(v, { title: o ? /* @__PURE__ */ t(
     "button",
     {
       type: "button",
       onClick: o,
-      className: l,
-      style: c,
-      children: u
+      className: i,
+      style: s,
+      children: a
     }
-  ) : /* @__PURE__ */ e("span", { className: l, style: c, children: u }), placement: "top", children: i || m });
+  ) : /* @__PURE__ */ t("span", { className: i, style: s, children: a }), placement: "top", children: r || l });
 }
-function E(t) {
-  return "balances" in t && t.balances !== void 0;
+function $(e) {
+  return "tokens" in e && e.tokens !== void 0;
 }
-function H(t) {
-  return "tokens" in t && t.tokens !== void 0;
-}
-function W({
-  assetAddress: t,
+function B({
+  assetAddress: e,
   symbol: n,
   iconSymbol: o,
-  comment: i,
-  explorerUrl: m,
-  iconSize: l = 24,
-  className: c
+  comment: r,
+  explorerUrl: l,
+  iconSize: i = 24,
+  className: s
 }) {
-  return /* @__PURE__ */ p("div", { className: T("flex items-center gap-3", c), children: [
-    /* @__PURE__ */ e(j, { token: o ?? n, size: l }),
-    /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e("div", { className: "font-medium", children: n }),
-      i && /* @__PURE__ */ p("div", { className: "text-md text-muted-foreground", children: [
+  return /* @__PURE__ */ d("div", { className: f("flex items-center gap-3", s), children: [
+    /* @__PURE__ */ t(N, { token: o ?? n, size: i }),
+    /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ t("div", { className: "font-medium", children: n }),
+      r && /* @__PURE__ */ d("div", { className: "text-md text-muted-foreground", children: [
         "(",
-        i,
+        r,
         ")"
       ] }),
-      m && /* @__PURE__ */ e(
-        $,
+      l && /* @__PURE__ */ t(
+        z,
         {
           variant: "ghost",
           size: "sm",
           className: "text-muted-foreground hover:text-foreground p-0 h-auto",
-          onClick: () => window.open(`${m}/address/${t}`, "_blank"),
-          children: /* @__PURE__ */ e(R, { size: 12, className: "size-3" })
+          onClick: () => window.open(`${l}/address/${e}`, "_blank"),
+          children: /* @__PURE__ */ t(j, { size: 12, className: "size-3" })
         }
       )
     ] })
   ] });
 }
-function _({
-  balances: t,
-  tokensList: n,
-  maxAssets: o = 3,
-  iconSize: i = 24,
-  options: m,
+function E({
+  tokens: e,
+  maxAssets: n = 3,
+  iconSize: o = 24,
+  options: r,
   className: l
 }) {
   const {
-    mode: c = "default",
-    showIconTooltip: u = !0,
-    otherTooltip: x,
-    onOtherClick: v,
+    mode: i = "default",
+    showIconTooltip: s = !0,
+    otherTooltip: a,
+    onOtherClick: p,
     allocation: g
-  } = m || {}, w = c === "cascade", k = u && !g, [y, C, I, h] = S(() => {
-    const s = t, r = s.slice(0, o), a = s.slice(o), f = a.map((b) => {
-      const N = typeof b == "string" ? b : b.token;
-      return n[N]?.title || n[N]?.symbol || "unknown";
-    }).join(", "), d = s.length > o;
-    return [r, a, f, d];
-  }, [t, o, n]);
-  return z(
+  } = r || {}, x = i === "cascade", T = s && !g, [k, w, y, C] = A(() => {
+    const m = e.slice(0, n), c = e.slice(n), u = c.map((h) => h.symbol || "unknown").join(", ");
+    return [m, c, u, e.length > n];
+  }, [e, n]);
+  return M(
     g,
-    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", l), children: [
-      y.map((s, r, a) => {
-        const f = typeof s == "string" ? s : s.token, d = n[f], b = r === a.length - 1, N = w ? a.length - r : void 0, A = /* @__PURE__ */ e(j, { token: d, size: i });
-        return /* @__PURE__ */ e(
-          "div",
-          {
-            className: "flex-shrink-0 flex",
-            style: {
-              zIndex: N,
-              marginRight: b ? 0 : w ? -Math.round(i * 0.5) : 4
-            },
-            children: k ? /* @__PURE__ */ e(
-              M,
-              {
-                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: A }),
-                placement: "top",
-                children: d?.title || d?.symbol || "unknown"
-              }
-            ) : A
-          },
-          f ?? r
-        );
-      }),
-      h && /* @__PURE__ */ e(
-        O,
-        {
-          count: C.length,
-          iconSize: i,
-          onOtherClick: v,
-          otherTooltip: x,
-          fallbackTooltip: I
-        }
-      )
-    ] })
-  );
-}
-function q({
-  tokens: t,
-  maxAssets: n = 3,
-  iconSize: o = 24,
-  options: i,
-  className: m
-}) {
-  const {
-    mode: l = "default",
-    showIconTooltip: c = !0,
-    otherTooltip: u,
-    onOtherClick: x,
-    allocation: v
-  } = i || {}, g = l === "cascade", w = c && !v, [k, y, C, I] = S(() => {
-    const h = t.slice(0, n), s = t.slice(n), r = s.map((a) => a.symbol || "unknown").join(", ");
-    return [h, s, r, t.length > n];
-  }, [t, n]);
-  return z(
-    v,
-    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", m), children: [
-      k.map((h, s, r) => {
-        const a = s === r.length - 1, f = g ? r.length - s : void 0, d = /* @__PURE__ */ e(j, { token: h, size: o });
-        return /* @__PURE__ */ e(
+    /* @__PURE__ */ d("div", { className: f("relative inline-flex items-center", l), children: [
+      k.map((m, c, u) => {
+        const h = c === u.length - 1, I = x ? u.length - c : void 0, b = /* @__PURE__ */ t(N, { token: m, size: o });
+        return /* @__PURE__ */ t(
           "div",
           {
             className: "flex-shrink-0 flex",
             style: {
-              zIndex: f,
-              marginRight: a ? 0 : g ? -Math.round(o * 0.5) : 4
+              zIndex: I,
+              marginRight: h ? 0 : x ? -Math.round(o * 0.5) : 4
             },
-            children: w ? /* @__PURE__ */ e(
-              M,
+            children: T ? /* @__PURE__ */ t(
+              v,
               {
-                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: d }),
+                title: /* @__PURE__ */ t("span", { className: "inline-flex", children: b }),
                 placement: "top",
-                children: h.symbol || "unknown"
+                children: m.symbol || "unknown"
               }
-            ) : d
+            ) : b
           },
-          h.address ?? s
+          m.address ?? c
         );
       }),
-      I && /* @__PURE__ */ e(
-        O,
+      C && /* @__PURE__ */ t(
+        S,
         {
-          count: y.length,
+          count: w.length,
           iconSize: o,
-          onOtherClick: x,
-          otherTooltip: u,
-          fallbackTooltip: C
+          onOtherClick: p,
+          otherTooltip: a,
+          fallbackTooltip: y
         }
       )
     ] })
   );
 }
-function lt(t) {
-  return H(t) ? /* @__PURE__ */ e(q, { ...t }) : E(t) ? /* @__PURE__ */ e(_, { ...t }) : /* @__PURE__ */ e(W, { ...t });
+function Y(e) {
+  return $(e) ? /* @__PURE__ */ t(E, { ...e }) : /* @__PURE__ */ t(B, { ...e });
 }
 export {
-  lt as AssetsListCell
+  Y as AssetsListCell
 };

package/dist/esm/components/badge/badge.js

@@ -1,11 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as a } 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 d = n(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-auto",
@@ -29,10 +25,9 @@ const d = n(
     }
   }
 );
-function l({ className: r, variant: e, ...t }) {
+function g({ className: r, variant: e, ...t }) {
   return /* @__PURE__ */ o("div", { className: a(d({ variant: e }), r), ...t });
 }
 export {
-  l as Badge,
-  d as badgeVariants
+  g as Badge
 };