@blofin/blofin-ui 0.7.40 → 0.7.42

package/dist/Button.es.js

@@ -1,15 +1,15 @@
-import { j as l } from "./jsx-runtime-944c88e2.js";
-import { c as m } from "./utils-7e50508b.js";
-import { a as e, u as c } from "./index-96a8d125.js";
-import * as g from "react";
-const D = e("bu-text-light-second", {
+import { j as a } from "./jsx-runtime-944c88e2.js";
+import { c as v } from "./utils-7e50508b.js";
+import { a as e, u as g, c as D } from "./index-96a8d125.js";
+import * as o from "react";
+const E = e("bu-text-light-second", {
   variants: {
     theme: {
       light: ["bu-bg-light-primary", "hover:bu-bg-light-hover-primary"],
       dark: ["bu-bg-dark-primary", "hover:bu-bg-dark-hover-primary"]
     }
   }
-}), N = e("", {
+}), $ = e("", {
   variants: {
     theme: {
       light: [
@@ -24,7 +24,7 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), E = e("", {
+}), N = e("", {
   variants: {
     theme: {
       light: [
@@ -50,7 +50,7 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), L = e("", {
+}), M = e("", {
   variants: {
     theme: {
       light: [
@@ -65,7 +65,7 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), R = e("", {
+}), V = e("", {
   variants: {
     theme: {
       light: [
@@ -80,35 +80,35 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), F = e("", {
+}), Z = e("", {
   variants: {
     theme: {
       light: ["bu-text-light-label", "hover:bu-text-light-primary"],
       dark: ["bu-text-dark-label", "hover:bu-text-dark-primary"]
     }
   }
-}), W = e("", {
+}), H = e("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-40", "hover:bu-text-light-label-40"],
       dark: ["bu-text-dark-label-40", "hover:bu-text-dark-label-40"]
     }
   }
-}), M = e("", {
+}), R = e("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-40", "hover:bu-text-light-primary"],
       dark: ["bu-text-dark-label-40", "hover:bu-text-dark-primary"]
     }
   }
-}), P = e("", {
+}), F = e("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-40", "hover:bu-text-light-label-40"],
       dark: ["bu-text-dark-label-40", "hover:bu-text-dark-label-40"]
     }
   }
-}), T = e("", {
+}), W = e("", {
   variants: {
     theme: {
       light: [
@@ -129,7 +129,7 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), V = e("", {
+}), P = e("", {
   variants: {
     theme: {
       light: [
@@ -150,7 +150,28 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), x = e("", {
+}), T = e("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-text-light-label",
+        "hover:bu-text-light-label",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-light-label",
+        "hover:bu-bg-light-fill-secondary"
+      ],
+      dark: [
+        "bu-text-dark-label",
+        "hover:bu-text-dark-label",
+        "bu-border",
+        "bu-border-solid",
+        "bu-border-dark-label",
+        "hover:bu-bg-dark-fill-secondary"
+      ]
+    }
+  }
+}), n = e("", {
   variants: {
     theme: {
       light: [
@@ -171,28 +192,28 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), Z = e("bu-text-white", {
+}), q = e("bu-text-white", {
   variants: {
     theme: {
       light: ["bu-bg-light-green", "hover:bu-bg-light-hover-green"],
       dark: ["bu-bg-dark-green", "hover:bu-bg-dark-hover-green"]
     }
   }
-}), q = e("bu-text-white", {
+}), z = e("bu-text-white", {
   variants: {
     theme: {
       light: ["bu-bg-light-label-20", "hover:bu-bg-light-label-20"],
       dark: ["bu-bg-dark-label-20", "hover:bu-bg-dark-label-20"]
     }
   }
-}), z = e("bu-text-white", {
+}), A = e("bu-text-white", {
   variants: {
     theme: {
       light: ["bu-bg-light-red", "hover:bu-bg-light-hover-red"],
       dark: ["bu-bg-dark-red", "hover:bu-bg-dark-hover-red"]
     }
   }
-}), A = e("bu-text-white", {
+}), G = e("bu-text-white", {
   variants: {
     theme: {
       light: ["bu-bg-light-label-20", "hover:bu-bg-light-label-20"],
@@ -212,50 +233,54 @@ const D = e("bu-text-light-second", {
       ]
     }
   }
-}), v = {
+}), y = {
   primary: {
-    variant: D,
-    disabled: N
+    variant: E,
+    disabled: $
   },
   secondary: {
-    variant: E,
+    variant: N,
     disabled: B
   },
   tertiary: {
-    variant: L,
-    disabled: R
+    variant: M,
+    disabled: V
   },
   text: {
-    variant: F,
-    disabled: W
+    variant: Z,
+    disabled: H
   },
   ghost: {
-    variant: T,
-    disabled: x
+    variant: W,
+    disabled: n
   },
   ghost2: {
-    variant: V,
-    disabled: x
+    variant: P,
+    disabled: n
+  },
+  ghost3: {
+    variant: T,
+    disabled: n
   },
   info: {
-    variant: M,
-    disabled: P
+    variant: R,
+    disabled: F
   },
   buy: {
-    variant: Z,
-    disabled: q
+    variant: q,
+    disabled: z
   },
   sell: {
-    variant: z,
-    disabled: A
+    variant: A,
+    disabled: G
   },
   function: {
     variant: p,
     disabled: p
     //this not have disabled
   }
-}, G = (t) => {
-  const { theme: a, variant: d, disabled: u, shape: b } = t, r = u ? "" : v[d].variant({ theme: a });
+}, J = (t) => {
+  const { theme: l, variant: b, disabled: d, shape: i } = t, r = d ? "" : y[b].variant({ theme: l });
   return e("bu-box-border bu-inline-flex bu-items-center bu-justify-center bu-font-medium", {
     variants: {
       variant: {
@@ -265,28 +290,29 @@ const D = e("bu-text-light-second", {
         text: r,
         ghost: r,
         ghost2: r,
+        ghost3: r,
         info: r,
         buy: r,
         sell: r,
         function: r
       },
       size: {
-        small: `${b === "circle" ? "bu-h-[28px] bu-min-w-[30px]" : "bu-h-[28px] bu-min-w-[80px] bu-rounded-[var(--btn-rounded-small)]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
-        "m-small": `${b === "circle" ? "bu-h-[32px] bu-min-w-[30px]" : "bu-h-[32px] bu-min-w-[80px] bu-rounded-[var(--btn-rounded-small)]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
-        medium: `${b === "circle" ? "bu-h-[40px] bu-min-w-[40px]" : "bu-h-[40px] bu-min-w-[100px] bu-rounded-[var(--btn-rounded-medium)]"} bu-px-[16px] bu-text-[14px] bu-leading-[20px]`,
-        large: `${b === "circle" ? "bu-h-[48px] bu-min-w-[48px]" : "bu-h-[48px] bu-min-w-[140px] bu-rounded-[var(--btn-rounded-medium)]"}  bu-px-[24px] bu-text-[16px] bu-leading-[24px]`,
-        max: `${b === "circle" ? "bu-h-[56px] bu-min-w-[56px]" : "bu-h-[56px] bu-min-w-[180px] bu-rounded-[var(--btn-rounded-medium)]"} bu-px-[24px] bu-text-[18px] bu-leading-[26px]`
+        small: `${i === "circle" ? "bu-h-[28px] bu-min-w-[30px]" : "bu-h-[28px] bu-min-w-[80px] bu-rounded-[var(--btn-rounded-small)]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
+        "m-small": `${i === "circle" ? "bu-h-[32px] bu-min-w-[30px]" : "bu-h-[32px] bu-min-w-[80px] bu-rounded-[var(--btn-rounded-small)]"} bu-px-[12px] bu-text-[12px] bu-leading-[18px]`,
+        medium: `${i === "circle" ? "bu-h-[40px] bu-min-w-[40px]" : "bu-h-[40px] bu-min-w-[100px] bu-rounded-[var(--btn-rounded-medium)]"} bu-px-[16px] bu-text-[14px] bu-leading-[20px]`,
+        large: `${i === "circle" ? "bu-h-[48px] bu-min-w-[48px]" : "bu-h-[48px] bu-min-w-[140px] bu-rounded-[var(--btn-rounded-medium)]"}  bu-px-[24px] bu-text-[16px] bu-leading-[24px]`,
+        max: `${i === "circle" ? "bu-h-[56px] bu-min-w-[56px]" : "bu-h-[56px] bu-min-w-[180px] bu-rounded-[var(--btn-rounded-medium)]"} bu-px-[24px] bu-text-[18px] bu-leading-[26px]`
       },
       shape: {
         normal: "",
         circle: "bu-rounded-[50%] bu-px-[0px] bu-py-[0px]"
       },
       disabled: {
-        true: v[d].disabled({ theme: a })
+        true: y[b].disabled({ theme: l })
       }
     }
   })(t);
-}, H = e("bu-animate-spin", {
+}, K = e("bu-animate-spin", {
   variants: {
     size: {
       small: "bu-h-[14px] bu-w-[14px]",
@@ -296,7 +322,7 @@ const D = e("bu-text-light-second", {
       max: "bu-h-[28px] bu-w-[28px]"
     }
   }
-}), i = {
+}), u = {
   "loader-medium": "_loader-medium_amaox_2",
   "animloader-medium": "_animloader-medium_amaox_1",
   "loader-light": "_loader-light_amaox_12",
@@ -307,71 +333,89 @@ const D = e("bu-text-light-second", {
   "animloader-small": "_animloader-small_amaox_1",
   "loader-m-small": "_loader-m-small_amaox_82",
   "animloader-m-small": "_animloader-m-small_amaox_1"
-}, J = ({ size: t, theme: a }) => {
-  const d = {
-    small: i["loader-small"],
-    medium: i["loader-medium"],
-    large: i["loader-large"],
-    max: i["loader-large"],
-    "m-small": i["loader-m-small"]
-  }, u = {
-    light: i["loader-light"],
-    dark: i["loader-dark"]
+}, O = ({ size: t, theme: l }) => {
+  const b = {
+    small: u["loader-small"],
+    medium: u["loader-medium"],
+    large: u["loader-large"],
+    max: u["loader-large"],
+    "m-small": u["loader-m-small"]
+  }, d = {
+    light: u["loader-light"],
+    dark: u["loader-dark"]
   };
-  return /* @__PURE__ */ l.jsx("span", { className: `${d[t]} ${u[a]}` });
-}, K = (t) => /* @__PURE__ */ g.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ g.createElement("path", { d: "M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.9519 2 19.3684 4.29238 20.9922 7.61993L19.2011 8.51103C17.905 5.84083 15.1675 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z", fill: "#DEDFE0" })), y = ({
+  return /* @__PURE__ */ a.jsx("span", { className: `${b[t]} ${d[l]}` });
+}, Q = (t) => /* @__PURE__ */ o.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.9519 2 19.3684 4.29238 20.9922 7.61993L19.2011 8.51103C17.905 5.84083 15.1675 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z", fill: "#DEDFE0" })), U = (t) => /* @__PURE__ */ o.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M12 6C12 2.68629 9.31371 0 6 0H0V6C0 9.31371 2.68629 12 6 12H12V6Z", fill: "currentColor" }), /* @__PURE__ */ o.createElement("path", { d: "M5.1663 7.32125L8.99647 3.49109L9.58571 4.08034L5.1663 8.49975L2.51465 5.84812L3.10391 5.25887L5.1663 7.32125Z", fill: "white" })), X = (t) => /* @__PURE__ */ o.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M12 6C12 2.68629 9.31371 0 6 0H0V6C0 9.31371 2.68629 12 6 12H12V6Z", fill: "currentColor" }), /* @__PURE__ */ o.createElement("path", { d: "M5.1663 7.32125L8.99647 3.49109L9.58571 4.08034L5.1663 8.49975L2.51465 5.84812L3.10391 5.25887L5.1663 7.32125Z", fill: "black" })), h = ({
   size: t = "large",
-  disabled: a = !1,
-  variant: d = "primary",
-  children: u,
-  startIcon: b,
+  disabled: l = !1,
+  variant: b = "primary",
+  children: d,
+  startIcon: i,
   endIcon: r,
   icon: k,
-  onClick: s,
+  onClick: m,
   shape: f = "normal",
-  className: _ = "",
-  theme: h,
-  loading: o,
-  loadingType: w = "default",
+  className: w = "",
+  theme: x,
+  loading: s,
+  loadingType: _ = "default",
   ...S
 }) => {
-  const j = (C) => {
-    o || s && s(C);
-  }, { theme: n } = c(), $ = {
-    variant: o ? "tertiary" : d,
+  const C = (j) => {
+    s || m && m(j);
+  }, { theme: c } = g(), L = {
+    variant: s ? "tertiary" : b,
     size: t,
-    theme: h || n,
+    theme: x || c,
     shape: f,
-    disabled: o ? !0 : a
+    disabled: s ? !0 : l
   };
-  return /* @__PURE__ */ l.jsx(
+  return /* @__PURE__ */ a.jsx(
     "button",
     {
       type: "button",
-      onClick: j,
-      className: `${m(G($))} ${_}`,
-      disabled: a,
+      onClick: C,
+      className: `${v(J(L))} ${w}`,
+      disabled: l,
       ...S,
-      children: o ? w === "refresh" ? /* @__PURE__ */ l.jsx(K, { className: m(H({ size: t })) }) : /* @__PURE__ */ l.jsx(J, { size: t, theme: n }) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-        b && /* @__PURE__ */ l.jsx("span", { className: "bu-mr-[9px]", children: b }),
-        u,
-        r && /* @__PURE__ */ l.jsx("span", { className: "bu-ml-[9px] bu-flex bu-items-center", children: r }),
+      children: s ? _ === "refresh" ? /* @__PURE__ */ a.jsx(Q, { className: v(K({ size: t })) }) : /* @__PURE__ */ a.jsx(O, { size: t, theme: c }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+        i && /* @__PURE__ */ a.jsx("span", { className: "bu-mr-[9px]", children: i }),
+        d,
+        r && /* @__PURE__ */ a.jsx("span", { className: "bu-ml-[9px] bu-flex bu-items-center", children: r }),
         k
       ] })
     }
   );
-}, O = (t) => {
-  const { theme: a } = c();
-  return /* @__PURE__ */ l.jsx(
-    y,
+}, Y = (t) => {
+  const { theme: l } = g(), { checked: b } = t;
+  return /* @__PURE__ */ a.jsxs("div", { className: "bu-relative", children: [
+    /* @__PURE__ */ a.jsx(h, { ...t, variant: "ghost3" }),
+    /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        className: D(
+          "bu-absolute bu-right-0 bu-top-0",
+          l === "light" ? "bu-text-light-label" : "bu-text-dark-label",
+          "bu-rounded-bl-[8px] bu-rounded-br-none bu-rounded-tl-none bu-rounded-tr-[8px]",
+          "bu-flex bu-items-center bu-justify-center"
+        ),
+        children: b ? l === "light" ? /* @__PURE__ */ a.jsx(U, {}) : /* @__PURE__ */ a.jsx(X, {}) : null
+      }
+    )
+  ] });
+}, I = (t) => {
+  const { theme: l } = g();
+  return /* @__PURE__ */ a.jsx(
+    h,
     {
       ...t,
       variant: "ghost",
-      className: `bu-border-light-background bu-text-light-background ${a === "light" ? "hover:!bu-text-light-primary" : "hover:!bu-text-dark-primary"}  bu-font-medium hover:!bu-bg-light-background`
+      className: `bu-border-light-background bu-text-light-background ${l === "light" ? "hover:!bu-text-light-primary" : "hover:!bu-text-dark-primary"}  bu-font-medium hover:!bu-bg-light-background`
     }
   );
 };
-y.WhiteButton = O;
+h.WhiteButton = I;
+h.CheckButton = Y;
 export {
-  y as Button
+  h as Button
 };