@blofin/blofin-ui 0.7.36 → 0.7.37

package/dist/Slider.es.js

@@ -1,34 +1,35 @@
-import { j as d } from "./jsx-runtime-944c88e2.js";
+import { j as c } from "./jsx-runtime-944c88e2.js";
 import { forwardRef as J, useRef as E, useMemo as L, useState as K, useCallback as R } from "react";
-import { a as g, u as Q } from "./index-96a8d125.js";
-import { c as m } from "./utils-7e50508b.js";
-const U = "_rail_lnvsg_7", W = "_track_lnvsg_15", Y = "_mark_lnvsg_23", Z = "_tooltip_lnvsg_61", ee = "_thumb_lnvsg_58", te = "_disabled_lnvsg_88", u = {
-  "slider-container": "_slider-container_lnvsg_1",
-  "slider-content": "_slider-content_lnvsg_4",
+import { a as m, u as Q } from "./index-96a8d125.js";
+import { c as g } from "./utils-7e50508b.js";
+const U = "_rail_ku8lc_8", W = "_track_ku8lc_16", Y = "_mark_ku8lc_24", Z = "_tooltip_ku8lc_62", ee = "_thumb_ku8lc_59", te = "_disabled_ku8lc_93", d = {
+  "slider-container": "_slider-container_ku8lc_1",
+  "slider-content": "_slider-content_ku8lc_5",
   rail: U,
   track: W,
-  "mark-container": "_mark-container_lnvsg_23",
+  "mark-container": "_mark-container_ku8lc_24",
   mark: Y,
-  "mark-label": "_mark-label_lnvsg_46",
-  "thumb-container": "_thumb-container_lnvsg_58",
+  "mark-label": "_mark-label_ku8lc_47",
+  "thumb-container": "_thumb-container_ku8lc_59",
   tooltip: Z,
   thumb: ee,
+  "tooltip-drag": "_tooltip-drag_ku8lc_89",
   disabled: te
-}, re = g("", {
+}, re = m("", {
   variants: {
     theme: {
       light: ["bu-bg-light-line-secondary"],
       dark: ["bu-bg-dark-line-secondary"]
     }
   }
-}), ae = g("", {
+}), ae = m("", {
   variants: {
     theme: {
       light: ["bu-bg-light-primary"],
       dark: ["bu-bg-dark-primary"]
     }
   }
-}), ne = g("", {
+}), ne = m("", {
   variants: {
     theme: {
       light: ["bu-bg-light-label-60"],
@@ -51,35 +52,35 @@ const U = "_rail_lnvsg_7", W = "_track_lnvsg_15", Y = "_mark_lnvsg_23", Z = "_to
       class: "bu-bg-dark-fill-secondary"
     }
   ]
-}), le = g("", {
+}), le = m("", {
   variants: {
     theme: {
       light: ["bu-border-light-line-secondary bu-bg-light-background"],
       dark: ["bu-border-dark-line-secondary bu-bg-dark-background"]
     }
   }
-}), se = g("bu-transition-colors", {
+}), ie = m("bu-transition-colors", {
   variants: {
     theme: {
       light: ["bu-border-light-primary"],
       dark: ["bu-border-dark-primary"]
     }
   }
-}), ie = g("", {
+}), se = m("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-60"],
       dark: ["bu-text-dark-label-60"]
     }
   }
-}), oe = g("", {
+}), oe = m("", {
   variants: {
     theme: {
       light: ["bu-border-light-primary bu-bg-light-background"],
       dark: ["bu-border-dark-primary bu-bg-dark-background"]
     }
   }
-}), B = g("", {
+}), B = m("", {
   variants: {
     theme: {
       light: ["!bu-border-light-label-60 bu-bg-light-background"],
@@ -102,7 +103,7 @@ const U = "_rail_lnvsg_7", W = "_track_lnvsg_15", Y = "_mark_lnvsg_23", Z = "_to
       class: "bu-bg-dark-fill-tertiary"
     }
   ]
-}), ce = g("after:border", {
+}), ce = m("after:border", {
   variants: {
     theme: {
       light: [
@@ -114,151 +115,151 @@ const U = "_rail_lnvsg_7", W = "_track_lnvsg_15", Y = "_mark_lnvsg_23", Z = "_to
     }
   }
 });
-function F(l, e, r) {
-  return Math.max(e, Math.min(l, r));
+function F(a, e, r) {
+  return Math.max(e, Math.min(a, r));
 }
-function A(l, e, r, s) {
-  return r === e ? 0 : ((l - e) / (r - e) * 100).toFixed(s);
+function A(a, e, r, n) {
+  return r === e ? 0 : ((a - e) / (r - e) * 100).toFixed(n);
 }
-function de(l) {
-  const e = l.toString();
+function ue(a) {
+  const e = a.toString();
   return e.indexOf(".") === -1 ? 0 : e.split(".")[1].length;
 }
-function X(l, e, r, s, i, h, b) {
-  if (i === s)
+function X(a, e, r, n, i, h, b) {
+  if (i === n)
     return e;
-  let o = (l - s) / (i - s);
-  o = F(o, 0, 1);
-  let n = e + o * (r - e);
-  return n = Math.round((n - e) / h) * h + e, n = Number(n.toFixed(b)), F(n, e, r);
+  let u = (a - n) / (i - n);
+  u = F(u, 0, 1);
+  let s = e + u * (r - e);
+  return s = Math.round((s - e) / h) * h + e, s = Number(s.toFixed(b)), F(s, e, r);
 }
-const ue = (l, e, r) => l ? m(oe({ theme: r || e }), "thumb-drag") : B({ theme: r || e }), be = (l, e, r, s) => l ? m(ae({ theme: s || e }), "track-drag") : ne({ theme: s || e, disabled: r }), he = (l, e, r, s, i) => m(
+const de = (a, e, r) => a ? g(oe({ theme: r || e }), "thumb-drag") : B({ theme: r || e }), be = (a, e, r, n) => a ? g(ae({ theme: n || e }), "track-drag") : ne({ theme: n || e, disabled: r }), he = (a, e, r, n, i) => g(
   le({ theme: i || e }),
-  s >= l ? r ? m(se({ theme: i || e }), "mark-drag") : B({ theme: i || e }) : ""
-), ve = J((l, e) => {
+  n >= a ? r ? g(ie({ theme: i || e }), "mark-drag") : B({ theme: i || e }) : ""
+), pe = J((a, e) => {
   const {
     value: r,
-    onSliderChange: s,
+    onSliderChange: n,
     onDragEnd: i,
     theme: h,
     id: b,
-    min: o = 0,
-    max: n = 100,
+    min: u = 0,
+    max: s = 100,
     step: k = 1,
-    marks: $ = [25, 50, 75],
-    labels: x = [0, 100],
+    marks: x = [0, 25, 50, 75, 100],
+    labels: M = [],
     className: O,
     renderLabel: V = (t) => `${t}%`,
-    disabled: v = !1,
+    disabled: p = !1,
     showTooltip: q = !0
-  } = l, { theme: f } = Q(), M = E(null), z = L(() => {
-    const t = Array.from(new Set($.concat([o, ...x, n]))).sort((a, _) => a - _), c = [];
-    return t.forEach((a) => {
-      a >= o && a <= n && c.push({
-        value: a,
-        showLabel: x.includes(a) || a === o || a === n,
-        showMark: $.includes(a) || a === o || a === n
+  } = a, { theme: f } = Q(), w = E(null), z = L(() => {
+    const t = Array.from(new Set(x.concat(M))).sort((l, _) => l - _), o = [];
+    return t.forEach((l) => {
+      l >= u && l <= s && o.push({
+        value: l,
+        showLabel: M.includes(l),
+        showMark: x.includes(l) || l === u || l === s
       });
-    }), c;
-  }, [$, o, n, k, x]), w = E(!1), [j, D] = K(!1), p = L(() => de(k), [k]), N = R(
+    }), o;
+  }, [x, u, s, k, M]), j = E(!1), [$, D] = K(!1), v = L(() => ue(k), [k]), N = R(
     (t) => {
       var y;
       t.stopPropagation(), t.preventDefault();
-      const c = (y = M.current) == null ? void 0 : y.getBoundingClientRect();
-      if (!c)
+      const o = (y = w.current) == null ? void 0 : y.getBoundingClientRect();
+      if (!o)
         return;
-      const { left: a, right: _ } = c, S = X(
+      const { left: l, right: _ } = o, S = X(
         t.clientX,
-        o,
-        n,
-        a,
+        u,
+        s,
+        l,
         _,
         k,
-        p
+        v
       );
-      s(S);
+      n(S);
     },
-    [o, n, k, s, p]
+    [u, s, k, n, v]
   ), C = R(
     (t) => {
-      w.current && N(t);
+      j.current && N(t);
     },
     [N]
   ), G = (t) => {
-    t.stopPropagation(), t.preventDefault(), document.activeElement.blur(), w.current = !0, D(!0), document.addEventListener(
+    t.stopPropagation(), t.preventDefault(), document.activeElement.blur(), j.current = !0, D(!0), document.addEventListener(
       "mouseup",
       () => {
-        w.current = !1, D(!1), document.removeEventListener("mousemove", C), i && i(r);
+        j.current = !1, D(!1), document.removeEventListener("mousemove", C), i && i(r);
       },
       { once: !0 }
     ), document.addEventListener("mousemove", C);
-  }, H = (t, c) => {
-    t.stopPropagation(), s(c), i && i(c);
+  }, H = (t, o) => {
+    t.stopPropagation(), n(o), i && i(o);
   }, I = (t) => {
     var P;
-    const c = (P = M.current) == null ? void 0 : P.getBoundingClientRect();
-    if (!c)
+    const o = (P = w.current) == null ? void 0 : P.getBoundingClientRect();
+    if (!o)
       return;
-    const { left: a, right: _ } = c, S = t.clientX, y = X(S, o, n, a, _, k, p);
-    s(y), i && i(y);
-  }, T = A(r, o, n, p);
-  return /* @__PURE__ */ d.jsxs(
+    const { left: l, right: _ } = o, S = t.clientX, y = X(S, u, s, l, _, k, v);
+    n(y), i && i(y);
+  }, T = A(r, u, s, v);
+  return /* @__PURE__ */ c.jsxs(
     "div",
     {
       id: b ? `${b}-slider-container` : "",
-      className: m(u["slider-container"], v && u.disabled, O),
+      className: g(d["slider-container"], p && d.disabled, O),
       children: [
-        /* @__PURE__ */ d.jsxs("div", { className: u["slider-content"], children: [
-          /* @__PURE__ */ d.jsx(
+        /* @__PURE__ */ c.jsxs("div", { className: d["slider-content"], children: [
+          /* @__PURE__ */ c.jsx(
             "div",
             {
-              ref: M,
-              className: `${u.rail} ${m(re({ theme: h || f }))} rail`
+              ref: w,
+              className: `${d.rail} ${g(re({ theme: h || f }))} rail`
             }
           ),
-          /* @__PURE__ */ d.jsx(
+          /* @__PURE__ */ c.jsx(
             "div",
             {
-              className: `${u.track} ${be(
-                j,
+              className: `${d.track} ${be(
+                $,
                 f,
-                v,
+                p,
                 h
               )} track`,
               style: { width: `${T}%` }
             }
           ),
-          /* @__PURE__ */ d.jsx(
+          /* @__PURE__ */ c.jsx(
             "div",
             {
               id: b ? `${b}-mark-container` : "",
-              className: `${u["mark-container"]} mark-container`,
-              onClick: v ? void 0 : I,
+              className: `${d["mark-container"]} mark-container`,
+              onClick: p ? void 0 : I,
               children: z.map((t) => {
-                const c = A(t.value, o, n, p);
-                return /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
-                  t.showMark && t.value !== r && /* @__PURE__ */ d.jsx(
+                const o = A(t.value, u, s, v);
+                return /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
+                  t.showMark && t.value !== r && /* @__PURE__ */ c.jsx(
                     "div",
                     {
-                      className: `${u.mark} ${he(
+                      className: `${d.mark} ${he(
                         t.value,
                         f,
-                        j,
+                        $,
                         r,
                         h
                       )} mark ${t.value <= r ? "mark-active" : ""}`,
-                      style: { left: `${c}%` },
-                      onClick: (a) => v ? void 0 : H(a, t.value)
+                      style: { left: `${o}%` },
+                      onClick: (l) => p ? void 0 : H(l, t.value)
                     },
                     t.value
                   ),
-                  t.showLabel && /* @__PURE__ */ d.jsx(
+                  t.showLabel && /* @__PURE__ */ c.jsx(
                     "span",
                     {
-                      className: `${u["mark-label"]} ${m(
-                        ie({ theme: h || f })
+                      className: `${d["mark-label"]} ${g(
+                        se({ theme: h || f })
                       )} mark-label ${t.value <= r ? "mark-label-active" : ""}`,
-                      style: { left: `${c}%` },
+                      style: { left: `${o}%` },
                       children: V(t.value)
                     }
                   )
@@ -266,41 +267,41 @@ const ue = (l, e, r) => l ? m(oe({ theme: r || e }), "thumb-drag") : B({ theme:
               })
             }
           ),
-          /* @__PURE__ */ d.jsxs(
+          /* @__PURE__ */ c.jsxs(
             "div",
             {
               id: b ? `${b}-thumb-container` : "",
-              className: `${u["thumb-container"]} thumb-container`,
+              className: `${d["thumb-container"]} thumb-container`,
               style: {
                 left: `${T}%`
               },
               children: [
-                q && /* @__PURE__ */ d.jsx(
+                q && /* @__PURE__ */ c.jsx(
                   "div",
                   {
-                    className: `${u.tooltip} ${m(
+                    className: `${d.tooltip} ${$ ? d["tooltip-drag"] : ""} ${g(
                       ce({ theme: h || f })
                     )}`,
                     children: V(r)
                   }
                 ),
-                /* @__PURE__ */ d.jsx(
+                /* @__PURE__ */ c.jsx(
                   "div",
                   {
                     id: b ? `${b}-thumb` : "",
-                    className: `${u.thumb} ${ue(j, f, h)} thumb`,
-                    onMouseDown: v ? void 0 : G
+                    className: `${d.thumb} ${de($, f, h)} thumb`,
+                    onMouseDown: p ? void 0 : G
                   }
                 )
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ d.jsx("input", { type: "hidden", value: r, ref: e })
+        /* @__PURE__ */ c.jsx("input", { type: "hidden", value: r, ref: e })
       ]
     }
   );
 });
 export {
-  ve as Slider
+  pe as Slider
 };