@gearbox-protocol/permissionless-ui 1.22.0-next.2 → 1.22.0-next.21

package/dist/esm/components/short-string/short-string.js

@@ -1,27 +1,23 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { TooltipProvider as p, Tooltip as c, TooltipTrigger as d, TooltipContent as f } from "../tooltip/tooltip.js";
-import { cn as a } from "../../utils/cn.js";
-function m({
-  children: t,
-  maxLength: i,
-  className: n,
-  showTooltip: o = !0
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { TooltipProvider as c, Tooltip as f, TooltipTrigger as m, TooltipContent as d } from "../tooltip/tooltip.js";
+import "react";
+import { cn as u } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+import { isLongString as T, shortenString as a } from "../../utils/shorten-string.js";
+import { Z_INDEX as S } from "../../utils/z-index.js";
+function N({
+  children: o,
+  maxLength: t,
+  showTooltip: l = !0,
+  className: i
 }) {
-  if (i === void 0) {
-    const l = /* @__PURE__ */ r("span", { className: a("inline-block max-w-full truncate", n), children: t });
-    return o ? /* @__PURE__ */ r(p, { delayDuration: 200, children: /* @__PURE__ */ u(c, { children: [
-      /* @__PURE__ */ r(d, { asChild: !0, children: l }),
-      /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("p", { children: t }) })
-    ] }) }) : l;
-  }
-  if (!t || t.length <= i)
-    return /* @__PURE__ */ r("span", { className: n, children: t });
-  const e = `${t.slice(0, i)}...`;
-  return o ? /* @__PURE__ */ r(p, { delayDuration: 200, children: /* @__PURE__ */ u(c, { children: [
-    /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r("span", { className: n, children: e }) }),
-    /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("p", { children: t }) })
-  ] }) }) : /* @__PURE__ */ r("span", { className: n, children: e });
+  const e = (n, p) => p === "text-overflow" ? /* @__PURE__ */ r("span", { className: u("inline-block max-w-full truncate", i), children: n }) : /* @__PURE__ */ r("span", { className: i, children: a(n, p) });
+  return typeof o == "string" && t !== void 0 ? l && (t === "text-overflow" || T(o, t)) ? /* @__PURE__ */ r(c, { delayDuration: 200, children: /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ r(m, { asChild: !0, children: e(o, t) }),
+    /* @__PURE__ */ r(d, { className: S.TOOLTIP, children: /* @__PURE__ */ r("p", { children: o }) })
+  ] }) }) : e(o, t) : o;
 }
 export {
-  m as ShortString
+  N as ShortString
 };

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

@@ -36,6 +36,8 @@ const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
       "contents",
       // Full-width border for header (no insets)
       "[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border",
+      // Disable hover effect on header rows by default
+      "hover:[&>*>*]:before:!opacity-0",
       e
     ),
     ...t

package/dist/esm/components/token-icon/token-icon.js

@@ -1,47 +1,53 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as s, useRef as h } from "react";
-import { cn as m } from "../../utils/cn.js";
-const a = "https://static.gearbox.fi/tokens/default.svg", i = /* @__PURE__ */ new Set();
-function w(t) {
-  const e = t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
-  if (!e) return a;
-  const r = `https://static.gearbox.fi/tokens/${e}.svg`;
-  return i.has(r) ? a : r;
+import { jsx as s } from "react/jsx-runtime";
+import l from "react";
+import { getStatic as c } from "../../utils/static.js";
+import { RoundedImage as m } from "../rounded-image/rounded-image.js";
+const r = c("/tokens/default.svg");
+function d(e) {
+  return e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
 }
-function I({ symbol: t, size: e = 48, className: r }) {
-  const n = w(t), [o, l] = s(n), [f, d] = s(!1), c = h(!1), u = () => {
-    c.current || (c.current = !0, i.add(o), l(a));
-  }, g = () => {
-    d(!0);
-  };
-  return (
-    // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
-    /* @__PURE__ */ p(
-      "img",
+function a(e) {
+  if (!e) return r;
+  if (typeof e == "object" && e !== null && "icon" in e)
+    return e.icon;
+  const n = d(e);
+  return n ? c(`/tokens/${n}.svg`) : r;
+}
+const g = l.forwardRef(
+  ({
+    symbol: e,
+    size: n = 48,
+    fit: o = "contain",
+    rounded: t = !1,
+    className: f,
+    ...i
+  }, u) => {
+    const p = a(e);
+    return /* @__PURE__ */ s(
+      m,
       {
-        src: o,
+        ref: u,
+        className: f,
+        src: p,
         alt: "",
-        width: e,
-        height: e,
-        className: m(
-          "object-contain",
-          !f && "bg-gray-200 dark:bg-gray-700 rounded-full",
-          r
-        ),
-        style: { width: e, height: e },
-        onError: u,
-        onLoad: g
+        rounded: t,
+        fit: o,
+        width: n,
+        height: n,
+        size: n,
+        ...i
       }
-    )
-  );
-}
-function x(t) {
-  t.forEach((e) => {
-    const n = `https://static.gearbox.fi/tokens/${e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase()}.svg`, o = new window.Image();
-    o.src = n;
+    );
+  }
+);
+g.displayName = "TokenIcon";
+function h(e) {
+  e.forEach((n) => {
+    const o = a(n), t = new window.Image();
+    t.src = o;
   });
 }
 export {
-  I as TokenIcon,
-  x as preloadTokenIcons
+  g as TokenIcon,
+  h as preloadTokenIcons
 };

package/dist/esm/components/token-symbol/token-symbol.js

@@ -1,50 +1,108 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { TokenIcon as d } from "../token-icon/token-icon.js";
-import "react";
-import { cn as u } from "../../utils/cn.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cva as T } from "class-variance-authority";
+import N from "react";
+import { RoundedImage as y } from "../rounded-image/rounded-image.js";
+import { ShortString as x } from "../short-string/short-string.js";
+import { TokenIcon as s } from "../token-icon/token-icon.js";
+import { TooltipProvider as I, Tooltip as S, TooltipTrigger as b, TooltipContent as _ } from "../tooltip/tooltip.js";
+import { cn as O } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-function p(e) {
-  if (e)
-    return typeof e == "string" ? e : e.symbol;
+import { getNetworkIcon as R } from "../../utils/network-icons.js";
+import { Z_INDEX as j } from "../../utils/z-index.js";
+const z = T("", {
+  variants: {
+    marginSize: {
+      sm: "gap-1",
+      md: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    marginSize: "md"
+  }
+});
+function C(r) {
+  if (r)
+    return typeof r == "string" ? r : r.icon ? { icon: r.icon } : r.symbol;
 }
-function g(e) {
-  if (e)
-    return typeof e == "string" ? e : e.title;
+function D(r) {
+  if (r)
+    return typeof r == "string" ? r : r.title;
 }
-function I({
-  token: e,
-  title: m,
-  className: o,
-  comment: r,
-  showIcon: l = !0,
-  showSymbol: c = !1,
-  size: a = 24,
-  chainId: x,
-  network: h,
-  maxLength: v,
-  ...f
-}) {
-  const i = p(e), n = m || g(e);
-  return /* @__PURE__ */ t("div", { className: u("flex items-center gap-3", o), ...f, children: [
-    l && i && /* @__PURE__ */ s(
-      d,
+const P = N.forwardRef(
+  ({
+    className: r,
+    marginSize: d = "lg",
+    token: n,
+    title: l,
+    size: a = 24,
+    showSymbol: f = !1,
+    showIcon: p = !0,
+    maxLength: g,
+    chainId: V,
+    comment: m,
+    network: t,
+    ...u
+  }, h) => {
+    const o = C(n), v = l || D(n), c = () => t ? /* @__PURE__ */ i("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          symbol: o,
+          size: a,
+          className: "shrink-0 self-center"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ e(
+        y,
+        {
+          src: R(t),
+          alt: t,
+          size: 14,
+          rounded: !0
+        }
+      ) })
+    ] }) : /* @__PURE__ */ e(
+      s,
       {
-        symbol: i,
+        symbol: o,
         size: a,
         className: "shrink-0 self-center"
       }
-    ),
-    c && n && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-      /* @__PURE__ */ s("div", { className: "text-xs sm:text-sm md:text-base font-medium truncate whitespace-pre-wrap leading-tight", children: n }),
-      r && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
-        "(",
-        r,
-        ")"
-      ] })
-    ] })
-  ] });
-}
+    );
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: h,
+        className: O(
+          "flex items-center",
+          z({ marginSize: d }),
+          r
+        ),
+        ...u,
+        children: [
+          p && o && (t !== void 0 ? /* @__PURE__ */ e(I, { delayDuration: 200, children: /* @__PURE__ */ i(S, { children: [
+            /* @__PURE__ */ e(b, { asChild: !0, children: c() }),
+            /* @__PURE__ */ e(_, { className: j.TOOLTIP, children: /* @__PURE__ */ i("p", { children: [
+              "Network: ",
+              t
+            ] }) })
+          ] }) }) : c()),
+          (l || f) && /* @__PURE__ */ i("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(x, { maxLength: g, children: v }) }),
+            m && /* @__PURE__ */ i("div", { className: "text-md text-muted-foreground leading-tight", children: [
+              "(",
+              m,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+P.displayName = "TokenSymbol";
 export {
-  I as TokenSymbol
+  P as TokenSymbol
 };

package/dist/esm/components/typography/typography.js

@@ -7,6 +7,7 @@ import "@gearbox-protocol/sdk";
 const p = x("", {
   variants: {
     variant: {
+      inherit: "",
       h1: "text-4xl font-bold tracking-tight",
       h2: "text-3xl font-semibold tracking-tight",
       h3: "text-2xl font-semibold",
@@ -25,7 +26,8 @@ const p = x("", {
       success: "text-success",
       warning: "text-warning",
       destructive: "text-destructive",
-      primary: "text-primary"
+      primary: "text-primary",
+      secondary: "text-secondary-foreground"
     },
     weight: {
       inherit: "",
@@ -69,36 +71,37 @@ const p = x("", {
   body: "p",
   bodySmall: "p",
   caption: "span",
-  overline: "span"
+  overline: "span",
+  inherit: "span"
 }, u = c.forwardRef(
   ({
     className: e,
     variant: t = "body",
-    color: i,
-    weight: r,
+    color: r,
+    weight: i,
     align: n,
     leading: o,
     truncate: a,
     as: l,
-    ...h
-  }, m) => {
-    const d = l || f[t || "body"];
+    ...d
+  }, h) => {
+    const m = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      d,
+      m,
       {
-        ref: m,
+        ref: h,
         className: g(
           p({
             variant: t,
-            color: i,
-            weight: r,
+            color: r,
+            weight: i,
             align: n,
             leading: o,
             truncate: a
           }),
           e
         ),
-        ...h
+        ...d
       }
     );
   }

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

@@ -1,69 +1,75 @@
-import { jsx as s } from "react/jsx-runtime";
-import { cva as g } from "class-variance-authority";
-import * as a from "react";
-import { cn as i } from "../../utils/cn.js";
+import { jsx as i } from "react/jsx-runtime";
+import { cva as c } from "class-variance-authority";
+import * as r from "react";
+import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const u = g("flex flex-col", {
+const u = c("flex flex-col [&>li:empty]:hidden", {
   variants: {
-    gap: {
-      xs: "gap-1",
-      sm: "gap-2",
-      default: "gap-3",
-      md: "gap-4",
-      lg: "gap-6"
+    rowGap: {
+      xs: "gap-1 [&>li:empty+li]:-mt-1",
+      default: "gap-4 [&>li:empty+li]:-mt-4",
+      md: "gap-6 [&>li:empty+li]:-mt-6"
     },
     divided: {
       true: "",
       false: ""
+    },
+    nested: {
+      true: t(
+        "relative py-[2px] pr-0 pl-3",
+        "before:content-[''] before:absolute before:top-0 before:left-0 before:block",
+        "before:h-full before:border-l-2 before:border-l-gray-40"
+      ),
+      false: ""
     }
   },
   defaultVariants: {
-    gap: "default",
-    divided: !1
+    rowGap: "default",
+    divided: !1,
+    nested: !1
   }
-}), v = a.forwardRef(
+}), y = r.forwardRef(
   ({
-    className: o,
-    gap: m = "default",
-    divided: r = !1,
-    nested: p = !1,
-    children: f,
+    className: s,
+    rowGap: f = "default",
+    divided: l = !1,
+    nested: m = !1,
+    children: p,
     ...n
   }, d) => {
-    const t = a.Children.toArray(f).filter(
+    const a = r.Children.toArray(p).filter(
       (e) => e != null
     );
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ i(
       "ul",
       {
         ref: d,
-        className: i(
-          u({ gap: m, divided: r }),
-          p && "m-0 p-0",
+        className: t(
+          u({ rowGap: f, divided: l, nested: m }),
           "list-none",
-          o
+          s
         ),
         ...n,
-        children: t.map((e, l) => {
-          const c = a.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
-          return /* @__PURE__ */ s(
+        children: a.map((e, o) => {
+          const b = r.isValidElement(e) && e.key ? e.key : `vertical-list-item-${o}`;
+          return /* @__PURE__ */ i(
             "li",
             {
-              className: i(
-                r && l !== t.length - 1 && "pb-3 border-b border-border"
+              className: t(
+                l && o !== a.length - 1 && "pb-3 border-b border-border"
               ),
               children: e
             },
-            c
+            b
           );
         })
       }
     );
   }
 );
-v.displayName = "VerticalList";
+y.displayName = "VerticalList";
 export {
-  v as VerticalList,
+  y as VerticalList,
   u as verticalListVariants
 };

package/dist/esm/configs/tailwind-preset.js

@@ -1,6 +1,6 @@
 import r from "../_virtual/index.js";
 import a from "tailwindcss-animate";
-const s = {
+const e = {
   darkMode: "class",
   safelist: [
     // Grid columns - dynamically generated in Grid component
@@ -58,6 +58,8 @@ const s = {
           foreground: "hsl(var(--destructive-foreground))"
         },
         success: "hsl(var(--success))",
+        "success-foreground": "hsl(var(--success-foreground))",
+        "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
         liquidation: "hsl(var(--liquidation))",
         border: "hsl(var(--border))",
@@ -128,6 +130,6 @@ const s = {
   plugins: [a, r({ nocompatible: !0 })]
 };
 export {
-  s as default,
-  s as preset
+  e as default,
+  e as preset
 };