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

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
 };