@gearbox-protocol/permissionless-ui 1.22.0-next.41 → 1.22.0-next.43

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

@@ -1,84 +1,106 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
 import { IconExpand as g } from "@gearbox-protocol/static";
-import { TokenSymbol as b } from "../token-symbol/token-symbol.js";
+import { cva as u } from "class-variance-authority";
+import { TokenSymbol as k } from "../token-symbol/token-symbol.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as i } from "../../utils/cn.js";
+import { cn as x } from "../../utils/cn.js";
 import "sonner";
-const w = {
-  old: { symbol: 16, arrow: 8 },
+const w = 13, N = u(
+  "flex flex-row items-center text-foreground cursor-[unset]",
+  {
+    variants: {
+      size: {
+        xs: "text-sm leading-[17px]",
+        sm: "text-[16px] leading-[21px]",
+        md: "text-[21px] leading-[33px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), V = {
   sm: { symbol: 16, arrow: 8 },
-  md: { symbol: 28, arrow: 12 },
-  lg: { symbol: 32, arrow: 14 },
-  default: { symbol: 28, arrow: 12 }
-}, z = {
-  old: "px-2 py-1 gap-1",
-  sm: "px-2 py-1 gap-1",
-  md: "px-3 py-1.5 gap-2",
-  lg: "px-4 py-2 gap-2",
-  default: "px-3 py-1.5 gap-2"
-};
-function B({
-  title: a,
-  maxLength: c = 12,
-  token: t,
-  disabled: r,
-  showSelectDialog: o,
-  size: s = "md",
-  active: e = !1,
-  chainId: l,
-  network: u,
-  className: y,
-  children: f
+  md: { symbol: 28, arrow: 12 }
+}, B = u(
+  "ml-0.5 leading-none text-gray-100 transition-transform duration-100 ease-[ease]",
+  {
+    variants: {
+      size: {
+        sm: "px-1",
+        md: "px-1.5"
+      },
+      active: {
+        true: "rotate-180",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", active: !1 }
+  }
+);
+function M({
+  title: n,
+  maxLength: l = w,
+  token: m,
+  disabled: d,
+  showSelectDialog: t,
+  size: o,
+  active: f = !1,
+  chainId: v,
+  network: y,
+  className: z,
+  children: c
 }) {
-  const d = !r && o ? o : void 0, m = w[s], p = o && !r;
-  return /* @__PURE__ */ x(
-    "button",
-    {
-      type: "button",
-      onClick: d,
-      disabled: r,
-      className: i(
-        "inline-flex items-center rounded-full bg-secondary font-medium transition-colors",
-        z[s],
-        p && "cursor-pointer hover:bg-secondary/80",
-        !p && "cursor-default",
-        e && "ring-2 ring-primary ring-offset-1",
-        r && "opacity-50 cursor-not-allowed",
-        y
-      ),
-      children: [
-        t ? /* @__PURE__ */ n(
-          b,
-          {
-            token: t,
-            size: m.symbol,
-            showSymbol: !0,
-            maxLength: c,
-            chainId: l,
-            network: u
-          }
-        ) : /* @__PURE__ */ n("span", { className: "text-muted-foreground", children: f || a || "Select token" }),
-        o && !r && /* @__PURE__ */ n(
-          "span",
-          {
-            className: i(
-              "flex items-center justify-center rounded transition-colors",
-              e && "bg-primary/10"
-            ),
-            children: /* @__PURE__ */ n(
-              g,
-              {
-                size: m.arrow,
-                className: "text-muted-foreground"
-              }
-            )
-          }
-        )
-      ]
-    }
+  const s = !d && t ? t : void 0, e = !!(t && !d), a = o === "xs" ? "sm" : o ?? "md", p = V[a];
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: A uses div (CurrencyBlock); role + keyboard for a11y
+    /* @__PURE__ */ b(
+      "div",
+      {
+        role: e ? "button" : void 0,
+        tabIndex: e ? 0 : void 0,
+        onKeyDown: e && s ? (i) => {
+          (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s());
+        } : void 0,
+        "data-active": e,
+        "data-testid": "currency-button",
+        onClick: s,
+        className: x(
+          "group",
+          N({ size: o }),
+          e && "cursor-pointer",
+          e && "hover:[&_.expand-wrap]:text-foreground",
+          z
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            k,
+            {
+              title: n,
+              size: p.symbol,
+              token: m,
+              showSymbol: !0,
+              maxLength: l,
+              marginSize: a,
+              chainId: v,
+              network: y
+            }
+          ),
+          !m && (c ?? n) ? /* @__PURE__ */ r("span", { className: "text-muted-foreground truncate", children: c ?? n }) : null,
+          t && /* @__PURE__ */ r(
+            "span",
+            {
+              className: x(
+                "expand-wrap",
+                B({ size: a, active: f })
+              ),
+              children: /* @__PURE__ */ r(g, { size: p.arrow })
+            }
+          )
+        ]
+      }
+    )
   );
 }
 export {
-  B as CurrencyButton
+  M as CurrencyButton
 };

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

@@ -1,9 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { IconQuestionCircle as u, IconInfo as v } from "@gearbox-protocol/static";
 import { cva as T } from "class-variance-authority";
 import * as l from "react";
 import "@gearbox-protocol/sdk";
-import { cn as p } from "../../utils/cn.js";
+import { cn as c } from "../../utils/cn.js";
 import "sonner";
 import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
 const H = T("transition-colors", {
@@ -44,7 +44,7 @@ const H = T("transition-colors", {
   ({
     className: t,
     children: r,
-    maxWidth: o,
+    maxWidth: e,
     minWidth: a,
     delayShow: g = 200,
     placement: y = "bottom",
@@ -55,8 +55,8 @@ const H = T("transition-colors", {
     onPointerEnter: m,
     ...d
   }, f) => {
-    const h = /* @__PURE__ */ e(
-      c,
+    const h = /* @__PURE__ */ o(
+      p,
       {
         ref: f,
         iconSize: n,
@@ -68,13 +68,13 @@ const H = T("transition-colors", {
         ...d
       }
     );
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ o(
       C,
       {
         title: h,
         placement: y,
         delayShow: g,
-        maxWidth: o,
+        maxWidth: e,
         minWidth: a,
         children: r
       }
@@ -82,48 +82,48 @@ const H = T("transition-colors", {
   }
 );
 I.displayName = "HelpTip";
-const c = l.forwardRef(
+const p = l.forwardRef(
   ({
     className: t,
     iconSize: r = 14,
-    iconColor: o = "gray-90",
+    iconColor: e = "gray-90",
     iconHoverColor: a = "gray-110",
     iconVariant: g = "question",
     onPointerEnter: y,
     ...n
   }, i) => {
     const s = g === "question" ? u : v;
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ o(
       "span",
       {
         ref: i,
         role: "img",
         "aria-hidden": !0,
-        className: p(
-          "inline-block cursor-help",
-          H({ iconColor: o, iconHoverColor: a }),
+        className: c(
+          "inline-flex items-center justify-center cursor-help",
+          H({ iconColor: e, iconHoverColor: a }),
           t
         ),
         style: { width: r, height: r },
         onPointerEnter: y,
         ...n,
-        children: /* @__PURE__ */ e(s, { size: r })
+        children: /* @__PURE__ */ o(s, { size: r })
       }
     );
   }
 );
-c.displayName = "HelpTipIcon";
-const N = l.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ e(
+p.displayName = "HelpTipIcon";
+const N = l.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ o(
   "span",
   {
-    ref: o,
-    className: p("ml-1.5 inline-block leading-none", t),
+    ref: e,
+    className: c("ml-1.5 inline-block leading-none", t),
     ...r
   }
 ));
 N.displayName = "TipWrap";
 export {
   I as HelpTip,
-  c as HelpTipIcon,
+  p as HelpTipIcon,
   N as TipWrap
 };