@gearbox-protocol/permissionless-ui 1.22.0-next.4 → 1.22.0-next.40

package/dist/esm/components/text-button/text-button.js

@@ -1,55 +1,107 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { cn as g } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as v, Fragment as D, jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+import * as g from "react";
 import "@gearbox-protocol/sdk";
-const v = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
-}, m = {
-  primary: "text-primary hover:text-primary/80",
-  secondary: "text-secondary-foreground hover:text-secondary-foreground/80",
-  muted: "text-muted-foreground hover:text-foreground",
-  primaryDashed: "text-primary hover:text-primary/80 border-b border-dashed border-primary",
-  secondaryDashed: "text-secondary-foreground hover:text-secondary-foreground/80 border-b border-dashed border-secondary-foreground",
-  empty: "text-foreground hover:text-foreground/80"
-}, N = d.forwardRef(
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+const f = n("", {
+  variants: {
+    buttonColor: {
+      primaryDashed: "text-foreground",
+      secondaryDashed: "text-secondary-foreground group-hover:text-foreground",
+      empty: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    buttonColor: "primaryDashed"
+  }
+}), w = n("", {
+  variants: {
+    size: {
+      sm: "text-[13px] leading-[15px]",
+      default: "",
+      md: "",
+      lg: "text-base"
+    },
+    width: {
+      compact: "w-auto",
+      wide: "w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    width: "compact"
+  }
+}), N = n("", {
+  variants: {
+    borderColor: {
+      primaryDashed: "border-b border-dashed border-secondary-foreground group-hover:border-foreground",
+      secondaryDashed: "border-b border-dashed border-secondary-foreground group-hover:border-foreground",
+      empty: ""
+    },
+    defaultVariants: {
+      primaryDashed: "primaryDashed"
+    }
+  }
+}), V = g.forwardRef(
   ({
-    children: o,
-    $icon: i,
-    icon: c,
-    $size: l = "md",
-    size: p,
-    $color: x = "primary",
-    color: u,
-    as: t = "button",
-    className: f,
-    ...s
-  }, n) => {
-    const r = c || i, y = p || l, b = u || x, a = g(
-      "inline-flex items-center gap-1 bg-transparent border-none cursor-pointer transition-colors",
-      "hover:underline underline-offset-2",
-      v[y],
-      m[b] || m.primary,
-      f
-    );
-    return t === "button" ? /* @__PURE__ */ h("button", { ref: n, className: a, ...s, children: [
-      /* @__PURE__ */ e("span", { children: o }),
-      r && /* @__PURE__ */ e("span", { className: "ml-1", children: r })
-    ] }) : d.createElement(
-      t,
+    children: y,
+    icon: s,
+    size: h = "default",
+    buttonColor: e = "primaryDashed",
+    width: x = "compact",
+    as: a = "button",
+    className: b,
+    disabled: r,
+    ...d
+  }, c) => {
+    const i = a === "a", l = o(
+      "group inline-block p-0 leading-[100%] font-normal bg-transparent border-none cursor-pointer transition-colors",
+      w({ size: h, width: x }),
+      !i && f({ buttonColor: e }),
+      r && "text-gray-110 cursor-default [&_svg]:text-gray-110",
+      b
+    ), p = i ? o(f({ buttonColor: e }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ t(
+        "span",
+        {
+          className: o(
+            "inline-block",
+            N({ borderColor: e }),
+            r && e !== "empty" && "border-gray-110"
+          ),
+          children: y
+        }
+      ),
+      s && /* @__PURE__ */ t(
+        "span",
+        {
+          className: o(
+            "ml-1.5 [&_svg]:fill-current",
+            r ? "text-gray-110" : "text-gray-90 group-hover:text-foreground"
+          ),
+          children: s
+        }
+      )
+    ] }), m = p ? /* @__PURE__ */ t("span", { className: p, children: u }) : u;
+    return a === "button" ? /* @__PURE__ */ t(
+      "button",
       {
-        ref: n,
-        className: a,
-        ...s
-      },
-      /* @__PURE__ */ e("span", { children: o }),
-      r && /* @__PURE__ */ e("span", { className: "ml-1", children: r })
+        ref: c,
+        type: "button",
+        className: l,
+        disabled: r,
+        ...d,
+        children: m
+      }
+    ) : g.createElement(
+      a,
+      { ref: c, className: l, ...d },
+      m
     );
   }
 );
-N.displayName = "TextButton";
+V.displayName = "TextButton";
 export {
-  N as TextButton
+  V as TextButton
 };

package/dist/esm/components/textarea/textarea.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as s from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const d = l(
   "flex w-full rounded-md border border-[rgb(100,100,100)] px-3 py-2 shadow-sm transition-colors placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none",
   {

package/dist/esm/components/tip-card/tip-card.js

@@ -1,75 +1,111 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { cva as b } from "class-variance-authority";
-import * as g from "react";
-import { cn as a } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { cva as t } from "class-variance-authority";
+import * as f from "react";
 import "@gearbox-protocol/sdk";
-const m = b(
-  "relative flex items-start gap-3 rounded-lg border p-4 text-sm",
+import { cn as e } from "../../utils/cn.js";
+import "sonner";
+const p = t("rounded-lg p-5 text-[14px]", {
+  variants: {
+    backgroundColor: {
+      transparent: "bg-transparent",
+      light: "bg-gray-30",
+      dark: "bg-card",
+      "gray-10": "bg-gray-10",
+      "gray-20": "bg-gray-20",
+      "gray-30": "bg-gray-30",
+      "gray-40": "bg-gray-40",
+      "gray-50": "bg-gray-50",
+      "gray-60": "bg-gray-60",
+      "gray-70": "bg-gray-70",
+      "gray-80": "bg-gray-80",
+      "gray-90": "bg-gray-90",
+      "gray-100": "bg-gray-100",
+      "gray-110": "bg-gray-110"
+    },
+    textColor: {
+      unset: "",
+      light: "text-foreground",
+      dark: "text-secondary-foreground"
+    },
+    borderColor: {
+      light: "border border-gray-20",
+      dark: "border border-gray-10",
+      none: "border-0",
+      gradient: e(
+        // Gradient border via masked pseudo-element (matches styled-components):
+        // Only the border ring is painted; the interior remains the card background.
+        "relative border-0 isolate",
+        "before:content-[''] before:absolute before:z-[-1]",
+        "before:p-px before:-inset-px before:rounded-[inherit]",
+        "before:bg-[linear-gradient(135deg,rgb(246,44,161)_0%,rgb(255,127,35)_100%)]",
+        "before:[mask:linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)_content-box_exclude,_linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)]",
+        "before:[mask-composite:exclude] before:[-webkit-mask-composite:xor]"
+      )
+    }
+  },
+  defaultVariants: {
+    textColor: "unset",
+    backgroundColor: "transparent",
+    borderColor: "dark"
+  }
+}), y = t(
+  // Translated from styled-components:
+  // - absolute, top/left 0, w/h 100%, overflow hidden, pointer-events none
+  // - border-radius: theme borderRadius.sm
+  // - ::after: absolute top/left 0, block, 4px width, 100% height, content ""
+  "",
   {
     variants: {
-      variant: {
-        default: "border-border bg-card text-foreground",
-        info: "border-blue-500/30 bg-blue-500/10 text-blue-200",
-        warning: "border-yellow-500/30 bg-yellow-500/10 text-yellow-200",
-        error: "border-red-500/30 bg-red-500/10 text-red-200",
-        success: "border-green-500/30 bg-green-500/10 text-green-200",
-        light: "border-border/50 bg-muted/50 text-muted-foreground"
-      },
-      hasIndicator: {
-        true: "pl-5",
-        false: ""
+      attributeColor: {
+        // Color only the 4px stripe (the ::after pseudo-element)
+        warning: "after:bg-warning",
+        alert: "after:bg-destructive",
+        success: "after:bg-success",
+        primary: "after:bg-primary"
       }
-    },
-    defaultVariants: {
-      variant: "default",
-      hasIndicator: !1
     }
   }
-), u = {
-  default: "bg-muted-foreground",
-  info: "bg-blue-500",
-  warning: "bg-yellow-500",
-  error: "bg-red-500",
-  success: "bg-green-500",
-  light: "bg-muted-foreground",
-  primary: "bg-primary",
-  alert: "bg-red-500"
-}, f = g.forwardRef(
+), c = f.forwardRef(
   ({
-    className: d,
-    variant: o = "default",
-    indicatorColor: r,
-    icon: t,
-    children: l,
-    ...s
-  }, i) => /* @__PURE__ */ n(
+    className: o,
+    textColor: g,
+    backgroundColor: a,
+    borderColor: n = a === "dark" ? "dark" : "light",
+    attributeColor: r,
+    children: b,
+    ...i
+  }, d) => /* @__PURE__ */ s(
     "div",
     {
-      ref: i,
-      className: a(
-        m({ variant: o, hasIndicator: !!r }),
-        d
+      ref: d,
+      className: e(
+        r ? "relative" : "",
+        p({
+          textColor: g,
+          backgroundColor: a,
+          borderColor: n
+        }),
+        o
       ),
-      ...s,
+      ...i,
       children: [
-        r && /* @__PURE__ */ e(
+        r && /* @__PURE__ */ l(
           "div",
           {
-            className: a(
-              "absolute left-0 top-0 bottom-0 w-1 rounded-l-lg",
-              u[r]
+            className: e(
+              "absolute inset-0 h-full w-full overflow-hidden pointer-events-none rounded-lg z-0",
+              "after:absolute after:top-0 after:left-0 after:block after:w-1 after:h-full after:content-['']",
+              y({ attributeColor: r })
             )
           }
         ),
-        t && /* @__PURE__ */ e("div", { className: "shrink-0", children: t }),
-        /* @__PURE__ */ e("div", { className: "flex-1", children: l })
+        b
       ]
     }
   )
 );
-f.displayName = "TipCard";
+c.displayName = "TipCard";
 export {
-  f as TipCard,
-  m as tipCardVariants
+  c as TipCard,
+  p as tipCardVariants
 };

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

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

@@ -1,24 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
 import "react";
-import { cn as f } from "../../utils/cn.js";
+import { bnToPrettyView as T } from "../../utils/bn-to-pretty-view.js";
+import "clsx";
+import "tailwind-merge";
 import "sonner";
 import "@gearbox-protocol/sdk";
-import { negativeTokenTemplate as T, tokenTemplate as l } from "../../utils/templates.js";
-import { tokenTemplateString as N } from "../../utils/templates.js";
-function h({
-  value: t,
+import { negativeTokenTemplate as I, tokenTemplateString as N } from "../../utils/templates.js";
+import { FormattedNumberString as d } from "../formatted-number/formatted-number.js";
+import { ShortString as g } from "../short-string/short-string.js";
+function A({
+  value: r,
   token: e,
-  precision: o,
-  spaceSymbol: r = " ",
-  maxLength: m,
-  allowNegative: n = !1,
-  className: p
+  precision: m,
+  formatter: n = T,
+  noFormattedAmountValue: i = "-",
+  showSymbol: p = !0,
+  maxLength: a = 1 / 0,
+  ...f
 }) {
-  const i = n ? T(t, e, o, r) : l(t, e, o, r, m);
-  return /* @__PURE__ */ a("span", { className: f(p), children: i });
+  const { decimals: l = 18, title: s } = e || {}, t = n(r, l, m), c = t === i;
+  return /* @__PURE__ */ u("span", { children: [
+    /* @__PURE__ */ o(d, { value: t, ...f }),
+    " ",
+    !c && p && /* @__PURE__ */ o(g, { maxLength: a, children: s })
+  ] });
 }
 export {
-  h as TokenTemplate,
-  T as negativeTokenTemplate,
+  A as TokenTemplate,
+  I as negativeTokenTemplate,
   N as tokenTemplateString
 };