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

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

@@ -1,12 +1,13 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as O from "react";
 import { TokenIcon as z } from "../token-icon/token-icon.js";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as y, Tooltip as T, TooltipTrigger as k, TooltipContent as b } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as v } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function E({
-  balances: u,
+function F({
+  balances: p,
   tokensList: d,
   maxAssets: s = 3,
   iconSize: h = 24,
@@ -17,29 +18,29 @@ function E({
     mode: m = "default",
     showIconTooltip: x = !0,
     otherTooltip: j,
-    onOtherClick: p
+    onOtherClick: u
   } = w || {}, [I, N, R, g] = O.useMemo(() => {
-    const e = u, n = e.slice(0, s), o = e.slice(s), i = o.map((r) => {
+    const t = p, n = t.slice(0, s), o = t.slice(s), i = o.map((r) => {
       const a = typeof r == "string" ? r : r.token;
       return d[a]?.symbol || "unknown";
-    }).join(", "), l = e.length > s;
+    }).join(", "), l = t.length > s;
     return [n, o, i, l];
-  }, [u, s, d]), S = (e) => typeof e == "string" ? e : e.token, M = (e, n, o) => m === "cascade" ? {
+  }, [p, s, d]), S = (t) => typeof t == "string" ? t : t.token, M = (t, n, o) => m === "cascade" ? {
     zIndex: o - n,
-    marginRight: e ? 0 : -12
+    marginRight: t ? 0 : -12
   } : {
-    marginRight: e ? 0 : 4
+    marginRight: t ? 0 : 4
   };
   return /* @__PURE__ */ c("div", { className: v("relative inline-flex items-center", C), children: [
-    I.map((e, n, o) => {
-      const i = S(e), l = d[i], r = n === o.length - 1 && !g, a = M(r, n, o.length), f = /* @__PURE__ */ t(z, { symbol: l?.symbol, size: h });
-      return /* @__PURE__ */ t("div", { className: "relative", style: a, children: x ? /* @__PURE__ */ t(y, { children: /* @__PURE__ */ c(T, { children: [
-        /* @__PURE__ */ t(k, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "cursor-help", children: f }) }),
-        /* @__PURE__ */ t(b, { children: l?.symbol || "Unknown" })
+    I.map((t, n, o) => {
+      const i = S(t), l = d[i], r = n === o.length - 1 && !g, a = M(r, n, o.length), f = /* @__PURE__ */ e(z, { symbol: l?.symbol, size: h });
+      return /* @__PURE__ */ e("div", { className: "relative", style: a, children: x ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
+        /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "cursor-help", children: f }) }),
+        /* @__PURE__ */ e(b, { children: l?.symbol || "Unknown" })
       ] }) }) : f }, i);
     }),
-    g && /* @__PURE__ */ t(y, { children: /* @__PURE__ */ c(T, { children: [
-      /* @__PURE__ */ t(k, { asChild: !0, children: /* @__PURE__ */ c(
+    g && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
+      /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ c(
         "button",
         {
           type: "button",
@@ -52,9 +53,9 @@ function E({
             height: h,
             marginLeft: m === "cascade" ? -12 : 4
           },
-          onClick: p ? (e) => {
-            p(
-              e
+          onClick: u ? (t) => {
+            u(
+              t
             );
           } : void 0,
           children: [
@@ -63,10 +64,10 @@ function E({
           ]
         }
       ) }),
-      /* @__PURE__ */ t(b, { children: j || R })
+      /* @__PURE__ */ e(b, { children: j || R })
     ] }) })
   ] });
 }
 export {
-  E as TokensListCell
+  F as TokensListCell
 };

package/dist/esm/components/tooltip/index.js

@@ -1,7 +1,9 @@
-import { Tooltip as i, TooltipContent as r, TooltipProvider as p, TooltipTrigger as T } from "./tooltip.js";
+import { SimpleTooltip as i } from "./simple-tooltip.js";
+import { Tooltip as r, TooltipContent as e, TooltipProvider as l, TooltipTrigger as T } from "./tooltip.js";
 export {
-  i as Tooltip,
-  r as TooltipContent,
-  p as TooltipProvider,
+  i as SimpleTooltip,
+  r as Tooltip,
+  e as TooltipContent,
+  l as TooltipProvider,
   T as TooltipTrigger
 };

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -0,0 +1,129 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tooltip";
+import * as o from "react";
+import "@gearbox-protocol/sdk";
+import { cn as p } from "../../utils/cn.js";
+import "sonner";
+const C = 7, j = 12;
+function S({
+  children: D,
+  title: u,
+  placement: R = "top",
+  trigger: n = "hover",
+  triangle: T = !0,
+  delayShow: f = 5,
+  maxWidth: E = "200px",
+  minWidth: O,
+  type: P = "tooltip",
+  open: m,
+  onOpenChange: k,
+  className: A,
+  triggerClassName: h
+}) {
+  const [L, N] = o.useState(!1), c = o.useRef(null), s = o.useRef(null), l = m !== void 0, a = l ? m : L, t = o.useCallback(
+    (e) => {
+      l ? k?.(e) : N(e);
+    },
+    [l, k]
+  ), H = o.useCallback(
+    (e) => {
+      n !== "click" && t(e);
+    },
+    [n, t]
+  ), I = o.useCallback(
+    (e) => {
+      n === "click" && (e.stopPropagation(), t(!a));
+    },
+    [n, a, t]
+  ), K = o.useCallback(
+    (e) => {
+      n === "click" && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), t(!a));
+    },
+    [n, a, t]
+  );
+  o.useEffect(() => {
+    if (n !== "click" || !a) return;
+    const e = (d) => {
+      const v = d.target;
+      c.current && !c.current.contains(v) && s.current && !s.current.contains(v) && t(!1);
+    }, w = (d) => {
+      d.key === "Escape" && t(!1);
+    };
+    return document.addEventListener("pointerdown", e), document.addEventListener("keydown", w), () => {
+      document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", w);
+    };
+  }, [n, a, t]);
+  const y = P === "modal-tooltip", b = T && !y, W = p(
+    // Base
+    "break-all",
+    "z-50 pointer-events-auto",
+    "animate-in fade-in-0 duration-100",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-75",
+    // Type-specific
+    y ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white antialiased",
+    A
+  );
+  return /* @__PURE__ */ i(
+    r.Provider,
+    {
+      delayDuration: n === "click" ? 0 : f,
+      skipDelayDuration: 0,
+      children: /* @__PURE__ */ x(
+        r.Root,
+        {
+          open: a,
+          onOpenChange: H,
+          delayDuration: n === "click" ? 0 : f,
+          children: [
+            /* @__PURE__ */ i(r.Trigger, { asChild: !0, children: n === "click" ? /* @__PURE__ */ i(
+              "button",
+              {
+                ref: s,
+                type: "button",
+                onClick: I,
+                onKeyDown: K,
+                className: p(
+                  "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
+                  h
+                ),
+                children: u
+              }
+            ) : /* @__PURE__ */ i(
+              "span",
+              {
+                ref: s,
+                className: p("inline-flex", h),
+                children: u
+              }
+            ) }),
+            /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ x(
+              r.Content,
+              {
+                ref: c,
+                side: R,
+                sideOffset: b ? C + 1 : 4,
+                className: W,
+                style: { maxWidth: E, minWidth: O },
+                children: [
+                  D,
+                  b && /* @__PURE__ */ i(
+                    r.Arrow,
+                    {
+                      width: j,
+                      height: C,
+                      className: "fill-black/85"
+                    }
+                  )
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+S.displayName = "SimpleTooltip";
+export {
+  S as SimpleTooltip
+};

package/dist/esm/components/tooltip/tooltip.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import * as a from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const c = o.Provider, g = o.Root, T = o.Trigger, m = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
   o.Content,
   {

package/dist/esm/components/trading-view/graph-dropdown.js

@@ -1,9 +1,11 @@
-import { jsx as l, jsxs as S } from "react/jsx-runtime";
-import { Check as L, Loader2 as R } from "lucide-react";
-import { useState as A, useRef as z, useEffect as B, useCallback as _, useMemo as p } from "react";
-import { Select as E, SelectTrigger as M, SelectValue as T, SelectContent as q, SelectItem as C } from "../select/select.js";
-function Q({
-  items: i,
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
+import { IconPending as F } from "@gearbox-protocol/static";
+import { useState as A, useRef as R, useEffect as B, useCallback as p, useMemo as _ } from "react";
+import { faCheck as E } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as L } from "../icons/fa-icon.js";
+import { Select as M, SelectTrigger as P, SelectValue as T, SelectContent as q, SelectItem as C } from "../select/select.js";
+function Y({
+  items: l,
   defaultItem: r,
   onSelected: d,
   multiple: a = !1,
@@ -25,34 +27,34 @@ function Q({
     }
     const e = Array.isArray(r) ? r[0] : r;
     return new Set([e?.value].filter(Boolean));
-  }, [t, w] = A(V), [o, v] = A(N()), [O, $] = A(!1), f = z(!1);
+  }, [t, w] = A(V), [o, f] = A(N()), [z, O] = A(!1), v = R(!1);
   B(() => {
     if (a) {
       const e = Array.isArray(r) ? r : [r], n = new Set(e.map((s) => s.value));
-      w(n), e.length > 0 && v(String(e[0].value));
+      w(n), e.length > 0 && f(String(e[0].value));
     } else {
       const e = Array.isArray(r) ? r[0] : r;
-      e?.value && v(String(e.value));
+      e?.value && f(String(e.value));
     }
   }, [r, a]);
-  const j = _(
+  const $ = p(
     (e) => {
-      if (!e && a && f.current) {
-        f.current = !1;
+      if (!e && a && v.current) {
+        v.current = !1;
         return;
       }
-      $(e);
+      O(e);
     },
     [a]
-  ), x = _(
+  ), x = p(
     (e) => {
-      const n = i.find((s) => String(s.value) === e);
+      const n = l.find((s) => String(s.value) === e);
       if (n && !h?.has(n.value)) {
         if (b?.has(n.value) && !(a && t.has(n.value))) {
           g && g(n.value, n.label);
           return;
         }
-        a ? (f.current = !0, w((s) => {
+        a ? (v.current = !0, w((s) => {
           const c = new Set(s);
           if (c.has(n.value)) {
             if (c.size <= 1)
@@ -61,40 +63,40 @@ function Q({
           } else
             c.add(n.value);
           return d(Array.from(c)), c;
-        })) : (v(e), d(n.value));
+        })) : (f(e), d(n.value));
       }
     },
     [
       a,
       d,
-      i,
+      l,
       b,
       h,
       g,
       t
     ]
-  ), y = p(() => {
+  ), y = _(() => {
     if (!a) {
-      const s = i.find((u) => String(u.value) === o), c = Array.isArray(r) ? r[0] : r;
+      const s = l.find((u) => String(u.value) === o), c = Array.isArray(r) ? r[0] : r;
       return s || c;
     }
-    const e = Array.from(t).map((s) => i.find((c) => c.value === s)).filter((s) => !!s);
+    const e = Array.from(t).map((s) => l.find((c) => c.value === s)).filter((s) => !!s);
     return e.length === 0 ? (Array.isArray(r) ? r : [r])[0] : e.length === 1 ? e[0] : {
       value: e[0].value,
       label: `${e.length} selected`
     };
-  }, [a, r, i, t, o]), k = p(() => a ? "__multiple_placeholder__" : o, [a, o]);
-  return !i.length || i.length === 1 && !a ? /* @__PURE__ */ l("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ l("div", { className: "text-xl leading-6", children: y.label }) }) : /* @__PURE__ */ S(
-    E,
+  }, [a, r, l, t, o]), j = _(() => a ? "__multiple_placeholder__" : o, [a, o]);
+  return !l.length || l.length === 1 && !a ? /* @__PURE__ */ i("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ i("div", { className: "text-xl leading-6", children: y.label }) }) : /* @__PURE__ */ S(
+    M,
     {
-      value: k,
+      value: j,
       onValueChange: x,
-      open: O,
-      onOpenChange: j,
+      open: z,
+      onOpenChange: $,
       children: [
-        /* @__PURE__ */ l(M, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ l(T, { children: y.label }) }),
+        /* @__PURE__ */ i(P, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ i(T, { children: y.label }) }),
         /* @__PURE__ */ S(q, { className: "min-w-[16rem]", children: [
-          a && /* @__PURE__ */ l(
+          a && /* @__PURE__ */ i(
             C,
             {
               value: "__multiple_placeholder__",
@@ -103,27 +105,33 @@ function Q({
               children: y.label
             }
           ),
-          i.map((e, n) => {
+          l.map((e, n) => {
             const s = a && t.has(e.value), c = h?.has(e.value), u = c;
-            return /* @__PURE__ */ l(
+            return /* @__PURE__ */ i(
               C,
               {
                 value: String(e.value),
                 disabled: u,
-                onSelect: (F) => {
-                  a && F.preventDefault(), x(String(e.value));
+                onSelect: (k) => {
+                  a && k.preventDefault(), x(String(e.value));
                 },
                 className: u ? "opacity-50 cursor-not-allowed" : "",
                 children: /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
-                  a && /* @__PURE__ */ l(
+                  a && /* @__PURE__ */ i(
                     "span",
                     {
                       className: `flex h-4 w-4 items-center justify-center rounded-[4px] border border-primary shadow transition-colors ${s ? "bg-primary text-primary-foreground" : ""}`,
-                      children: s && /* @__PURE__ */ l(L, { className: "h-4 w-4" })
+                      children: s && /* @__PURE__ */ i(L, { icon: E, className: "size-4" })
                     }
                   ),
                   e.label,
-                  c && /* @__PURE__ */ l(R, { className: "ml-1 h-4 w-4 animate-spin text-muted-foreground" })
+                  c && /* @__PURE__ */ i(
+                    F,
+                    {
+                      size: 16,
+                      className: "ml-1 size-4 animate-spin text-muted-foreground"
+                    }
+                  )
                 ] })
               },
               `graph-item-${n}-${String(e.value)}`
@@ -135,5 +143,5 @@ function Q({
   );
 }
 export {
-  Q as GraphDropdown
+  Y as GraphDropdown
 };

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

@@ -1,12 +1,13 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cva as x } from "class-variance-authority";
 import * as c from "react";
+import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-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,11 +71,12 @@ const p = x("", {
   body: "p",
   bodySmall: "p",
   caption: "span",
-  overline: "span"
+  overline: "span",
+  inherit: "span"
 }, u = c.forwardRef(
   ({
     className: e,
-    variant: t = "body",
+    variant: t = "inherit",
     color: i,
     weight: r,
     align: n,
@@ -81,12 +84,12 @@ const p = x("", {
     truncate: a,
     as: l,
     ...h
-  }, m) => {
-    const d = l || f[t || "body"];
+  }, d) => {
+    const m = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      d,
+      m,
       {
-        ref: m,
+        ref: d,
         className: g(
           p({
             variant: t,

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

@@ -1,12 +1,13 @@
 import { jsxs as e, jsx as t, Fragment as v } from "react/jsx-runtime";
-import { cva as l } from "class-variance-authority";
-import { ArrowRight as w } from "lucide-react";
-import * as V from "react";
+import { cva as m } from "class-variance-authority";
+import * as w from "react";
+import { faArrowRight as V } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as y } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-import { HelpTip as y } from "../help-tip/help-tip.js";
-const j = l("flex flex-nowrap gap-3 items-center", {
+import { HelpTip as I } from "../help-tip/help-tip.js";
+const j = m("flex flex-nowrap gap-3 items-center", {
   variants: {
     align: {
       start: "items-start",
@@ -17,7 +18,7 @@ const j = l("flex flex-nowrap gap-3 items-center", {
   defaultVariants: {
     align: "start"
   }
-}), I = l("text-foreground", {
+}), z = m("text-foreground", {
   variants: {
     size: {
       xs: "text-xs",
@@ -29,7 +30,7 @@ const j = l("flex flex-nowrap gap-3 items-center", {
   defaultVariants: {
     size: "default"
   }
-}), f = l("text-right", {
+}), x = m("text-right", {
   variants: {
     size: {
       xs: "text-xs",
@@ -56,27 +57,27 @@ const j = l("flex flex-nowrap gap-3 items-center", {
     weight: "medium",
     color: "default"
   }
-}), R = V.forwardRef(
+}), R = w.forwardRef(
   ({
     className: u,
-    align: h,
+    align: p,
     label: a,
     description: s,
-    valueDescription: m,
-    tip: d,
-    value: o,
+    valueDescription: l,
+    tip: o,
+    value: d,
     valueTo: i,
     size: n = "default",
     weight: c = "medium",
-    color: x = "default",
-    onPointerEnterTip: p,
-    ...g
+    color: f = "default",
+    onPointerEnterTip: g,
+    ...h
   }, N) => /* @__PURE__ */ e(
     "div",
     {
       ref: N,
-      className: r(j({ align: h }), u),
-      ...g,
+      className: r(j({ align: p }), u),
+      ...h,
       children: [
         (a || s) && /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 h-min", children: [
           a && /* @__PURE__ */ e(
@@ -84,34 +85,40 @@ const j = l("flex flex-nowrap gap-3 items-center", {
             {
               className: r(
                 "flex items-center gap-2 whitespace-nowrap",
-                I({ size: n })
+                z({ size: n })
               ),
               children: [
                 a,
-                d && /* @__PURE__ */ t(y, { onPointerEnter: p, children: d })
+                o && /* @__PURE__ */ t(I, { onPointerEnter: g, children: o })
               ]
             }
           ),
           s && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-left", children: s })
         ] }),
-        o && /* @__PURE__ */ e("div", { className: "flex flex-col flex-auto", children: [
+        d && /* @__PURE__ */ e("div", { className: "flex flex-col flex-auto", children: [
           /* @__PURE__ */ e("div", { className: "flex flex-nowrap gap-3 justify-end items-center", children: [
             /* @__PURE__ */ t(
               "span",
               {
                 className: r(
-                  f({ size: n, weight: c, color: x }),
+                  x({ size: n, weight: c, color: f }),
                   i && "line-through opacity-60"
                 ),
-                children: o
+                children: d
               }
             ),
             i && /* @__PURE__ */ e(v, { children: [
-              /* @__PURE__ */ t(w, { className: "h-3 w-3 text-muted-foreground" }),
-              /* @__PURE__ */ t("span", { className: r(f({ size: n, weight: c, color: x })), children: i })
+              /* @__PURE__ */ t(
+                y,
+                {
+                  icon: V,
+                  className: "size-3 text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ t("span", { className: r(x({ size: n, weight: c, color: f })), children: i })
             ] })
           ] }),
-          m && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right", children: m })
+          l && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right", children: l })
         ] })
       ]
     }