@blofin/blofin-ui 0.7.33 → 0.7.35

package/dist/Slider.es.js

@@ -1,75 +1,108 @@
-import { j as i } from "./jsx-runtime-944c88e2.js";
-import { forwardRef as J, useRef as T, useMemo as K, useState as Q, useCallback as E } from "react";
-import { a as g, u as U } from "./index-96a8d125.js";
-import { c as p } from "./utils-7e50508b.js";
-const W = "_rail_ppjl3_7", Y = "_track_ppjl3_15", Z = "_mark_ppjl3_23", ee = "_tooltip_ppjl3_67", te = "_thumb_ppjl3_64", h = {
-  "slider-container": "_slider-container_ppjl3_1",
-  "slider-content": "_slider-content_ppjl3_4",
-  rail: W,
-  track: Y,
-  "mark-container": "_mark-container_ppjl3_23",
-  mark: Z,
-  "mark-label": "_mark-label_ppjl3_46",
-  "thumb-container": "_thumb-container_ppjl3_64",
-  tooltip: ee,
-  thumb: te
-}, re = g("", {
+import { j as o } from "./jsx-runtime-944c88e2.js";
+import { forwardRef as K, useRef as T, useMemo as Q, useState as U, useCallback as E } from "react";
+import { a as k, u as W } from "./index-96a8d125.js";
+import { c as g } from "./utils-7e50508b.js";
+const Y = "_rail_kp7zk_7", Z = "_track_kp7zk_15", ee = "_mark_kp7zk_23", te = "_tooltip_kp7zk_61", re = "_thumb_kp7zk_58", ae = "_disabled_kp7zk_88", u = {
+  "slider-container": "_slider-container_kp7zk_1",
+  "slider-content": "_slider-content_kp7zk_4",
+  rail: Y,
+  track: Z,
+  "mark-container": "_mark-container_kp7zk_23",
+  mark: ee,
+  "mark-label": "_mark-label_kp7zk_46",
+  "thumb-container": "_thumb-container_kp7zk_58",
+  tooltip: te,
+  thumb: re,
+  disabled: ae
+}, ne = k("", {
   variants: {
     theme: {
       light: ["bu-bg-light-line-secondary"],
       dark: ["bu-bg-dark-line-secondary"]
     }
   }
-}), ae = g("", {
+}), le = k("", {
   variants: {
     theme: {
       light: ["bu-bg-light-primary"],
       dark: ["bu-bg-dark-primary"]
     }
   }
-}), ne = g("", {
+}), ie = k("", {
   variants: {
     theme: {
       light: ["bu-bg-light-label-60"],
       dark: ["bu-bg-dark-label"]
+    },
+    disabled: {
+      true: ["bu-bg-light-fill-secondary"],
+      false: ""
     }
-  }
-}), le = g("", {
+  },
+  compoundVariants: [
+    {
+      theme: "light",
+      disabled: !0,
+      class: "bu-bg-light-fill-secondary"
+    },
+    {
+      theme: "dark",
+      disabled: !0,
+      class: "bu-bg-dark-fill-secondary"
+    }
+  ]
+}), se = k("", {
   variants: {
     theme: {
       light: ["bu-border-light-line-secondary bu-bg-light-background"],
       dark: ["bu-border-dark-line-secondary bu-bg-dark-background"]
     }
   }
-}), oe = g("bu-transition-colors", {
+}), oe = k("bu-transition-colors", {
   variants: {
     theme: {
       light: ["bu-border-light-primary"],
       dark: ["bu-border-dark-primary"]
     }
   }
-}), se = g("", {
+}), ce = k("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-60"],
       dark: ["bu-text-dark-label-60"]
     }
   }
-}), ie = g("", {
+}), de = k("", {
   variants: {
     theme: {
       light: ["bu-border-light-primary bu-bg-light-background"],
       dark: ["bu-border-dark-primary bu-bg-dark-background"]
     }
   }
-}), L = g("", {
+}), L = k("", {
   variants: {
     theme: {
       light: ["!bu-border-light-label-60 bu-bg-light-background"],
       dark: ["!bu-border-dark-label bu-bg-dark-background"]
+    },
+    disabled: {
+      true: ["bu-bg-light-fill-tertiary"],
+      false: ""
     }
-  }
-}), ce = g("after:border", {
+  },
+  compoundVariants: [
+    {
+      theme: "light",
+      disabled: !0,
+      class: "bu-bg-light-fill-tertiary"
+    },
+    {
+      theme: "dark",
+      disabled: !0,
+      class: "bu-bg-dark-fill-tertiary"
+    }
+  ]
+}), ue = k("after:border", {
   variants: {
     theme: {
       light: [
@@ -81,175 +114,176 @@ const W = "_rail_ppjl3_7", Y = "_track_ppjl3_15", Z = "_mark_ppjl3_23", ee = "_t
     }
   }
 });
-function P(m, t, o) {
-  return Math.max(t, Math.min(m, o));
+function P(m, t, n) {
+  return Math.max(t, Math.min(m, n));
 }
-function R(m, t, o, u) {
-  if (o === t)
+function R(m, t, n, d) {
+  if (n === t)
     return 0;
-  let s = (m - t) / (o - t) * 100;
-  return typeof u == "number" && (s = Number(s.toFixed(A(u)))), s;
+  let s = (m - t) / (n - t) * 100;
+  return typeof d == "number" && (s = Number(s.toFixed(A(d)))), s;
 }
 function A(m) {
   const t = m.toString();
   return t.indexOf(".") === -1 ? 0 : t.split(".")[1].length;
 }
-function F(m, t, o, u, s, n) {
-  if (s === u)
+function F(m, t, n, d, s, l) {
+  if (s === d)
     return t;
-  let c = (m - u) / (s - u);
+  let c = (m - d) / (s - d);
   c = P(c, 0, 1);
-  let a = t + c * (o - t);
-  return a = Math.round((a - t) / n) * n + t, a = Number(a.toFixed(A(n))), P(a, t, o);
+  let a = t + c * (n - t);
+  return a = Math.round((a - t) / l) * l + t, a = Number(a.toFixed(A(l))), P(a, t, n);
 }
-const me = J((m, t) => {
+const ge = K((m, t) => {
   const {
-    value: o,
-    onSliderChange: u,
+    value: n,
+    onSliderChange: d,
     onDragEnd: s,
-    theme: n,
+    theme: l,
     id: c,
     min: a = 0,
-    max: d = 100,
-    step: k = 1,
+    max: b = 100,
+    step: f = 1,
     marks: _ = [25, 50, 75],
-    labels: y = [0, 100],
+    labels: $ = [0, 100],
     className: X,
-    renderLabel: w = (e) => `${e}%`
-  } = m, { theme: b } = U(), j = T(null), B = K(() => {
-    const e = Array.from(new Set(_.concat([a, ...y, d]))).sort((r, f) => r - f), l = [];
+    renderLabel: N = (e) => `${e}%`,
+    disabled: p = !1
+  } = m, { theme: h } = W(), x = T(null), B = Q(() => {
+    const e = Array.from(new Set(_.concat([a, ...$, b]))).sort((r, v) => r - v), i = [];
     return e.forEach((r) => {
-      r >= a && r <= d && l.push({
+      r >= a && r <= b && i.push({
         value: r,
-        showLabel: y.includes(r) || r === a || r === d,
-        showMark: _.includes(r) || r === a || r === d
+        showLabel: $.includes(r) || r === a || r === b,
+        showMark: _.includes(r) || r === a || r === b
       });
-    }), l;
-  }, [_, a, d, k, y]), O = (e) => p(
-    le({ theme: n || b }),
-    o >= e ? $ ? oe({ theme: n || b }) : L({ theme: n || b }) : ""
-  ), q = () => $ ? p(ie({ theme: n || b })) : L({ theme: n || b }), z = () => $ ? p(ae({ theme: n || b })) : ne({ theme: n || b }), x = T(!1), [$, N] = Q(!1), S = E(
+    }), i;
+  }, [_, a, b, f, $]), O = (e) => g(
+    se({ theme: l || h }),
+    n >= e ? j ? oe({ theme: l || h }) : L({ theme: l || h }) : ""
+  ), q = () => j ? g(de({ theme: l || h })) : L({ theme: l || h }), G = () => j ? g(le({ theme: l || h })) : ie({ theme: l || h, disabled: p }), M = T(!1), [j, S] = U(!1), V = E(
     (e) => {
-      var v;
+      var y;
       e.stopPropagation(), e.preventDefault();
-      const l = (v = j.current) == null ? void 0 : v.getBoundingClientRect();
-      if (!l)
+      const i = (y = x.current) == null ? void 0 : y.getBoundingClientRect();
+      if (!i)
         return;
-      const { left: r, right: f } = l, M = F(e.clientX, a, d, r, f, k);
-      u(M);
+      const { left: r, right: v } = i, w = F(e.clientX, a, b, r, v, f);
+      d(w);
     },
-    [a, d, k, u]
+    [a, b, f, d]
   ), D = E(
     (e) => {
-      x.current && S(e);
+      M.current && V(e);
     },
-    [S]
-  ), G = (e) => {
-    e.stopPropagation(), e.preventDefault(), document.activeElement.blur(), x.current = !0, N(!0), document.addEventListener(
+    [V]
+  ), H = (e) => {
+    e.stopPropagation(), e.preventDefault(), document.activeElement.blur(), M.current = !0, S(!0), document.addEventListener(
       "mouseup",
       () => {
-        x.current = !1, N(!1), document.removeEventListener("mousemove", D), s && s(o);
+        M.current = !1, S(!1), document.removeEventListener("mousemove", D), s && s(n);
       },
       { once: !0 }
     ), document.addEventListener("mousemove", D);
-  }, H = (e, l) => {
-    e.stopPropagation(), u(l), s && s(l);
-  }, I = (e) => {
+  }, I = (e, i) => {
+    e.stopPropagation(), d(i), s && s(i);
+  }, J = (e) => {
     var C;
-    const l = (C = j.current) == null ? void 0 : C.getBoundingClientRect();
-    if (!l)
+    const i = (C = x.current) == null ? void 0 : C.getBoundingClientRect();
+    if (!i)
       return;
-    const { left: r, right: f } = l, M = e.clientX, v = F(M, a, d, r, f, k);
-    u(v), s && s(v);
-  }, V = R(o, a, d, k);
-  return /* @__PURE__ */ i.jsxs(
+    const { left: r, right: v } = i, w = e.clientX, y = F(w, a, b, r, v, f);
+    d(y), s && s(y);
+  }, z = R(n, a, b, f);
+  return /* @__PURE__ */ o.jsxs(
     "div",
     {
       id: c ? `${c}-slider-container` : "",
-      className: p(h["slider-container"], X),
+      className: g(u["slider-container"], p && u.disabled, X),
       children: [
-        /* @__PURE__ */ i.jsxs("div", { className: h["slider-content"], children: [
-          /* @__PURE__ */ i.jsx(
+        /* @__PURE__ */ o.jsxs("div", { className: u["slider-content"], children: [
+          /* @__PURE__ */ o.jsx(
             "div",
             {
-              ref: j,
-              className: `${h.rail} ${p(re({ theme: n || b }))}`
+              ref: x,
+              className: `${u.rail} ${g(ne({ theme: l || h }))} rail`
             }
           ),
-          /* @__PURE__ */ i.jsx(
+          /* @__PURE__ */ o.jsx(
             "div",
             {
-              className: `${h.track} ${z()}`,
-              style: { width: `${V}%` }
+              className: `${u.track} ${G()} track`,
+              style: { width: `${z}%` }
             }
           ),
-          /* @__PURE__ */ i.jsx(
+          /* @__PURE__ */ o.jsx(
             "div",
             {
               id: c ? `${c}-mark-container` : "",
-              className: h["mark-container"],
-              onClick: I,
+              className: `${u["mark-container"]} mark-container`,
+              onClick: p ? void 0 : J,
               children: B.map((e) => {
-                const l = R(e.value, a, d, k);
-                return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  e.showMark && /* @__PURE__ */ i.jsx(
+                const i = R(e.value, a, b, f);
+                return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+                  e.showMark && /* @__PURE__ */ o.jsx(
                     "div",
                     {
-                      className: `${h.mark} ${O(e.value)} mark`,
-                      style: { left: `${l}%` },
-                      onClick: (r) => H(r, e.value)
+                      className: `${u.mark} ${O(e.value)} mark ${e.value <= n ? "mark-active" : ""}`,
+                      style: { left: `${i}%` },
+                      onClick: (r) => p ? void 0 : I(r, e.value)
                     },
                     e.value
                   ),
-                  e.showLabel && /* @__PURE__ */ i.jsx(
+                  e.showLabel && /* @__PURE__ */ o.jsx(
                     "span",
                     {
-                      className: `${h["mark-label"]} ${p(
-                        se({ theme: n || b })
+                      className: `${u["mark-label"]} ${g(
+                        ce({ theme: l || h })
                       )} mark-label`,
-                      style: { left: `${l}%` },
-                      children: w(e.value)
+                      style: { left: `${i}%` },
+                      children: N(e.value)
                     }
                   )
                 ] });
               })
             }
           ),
-          /* @__PURE__ */ i.jsxs(
+          /* @__PURE__ */ o.jsxs(
             "div",
             {
               id: c ? `${c}-thumb-container` : "",
-              className: h["thumb-container"],
+              className: `${u["thumb-container"]} thumb-container`,
               style: {
-                left: `${V}%`
+                left: `${z}%`
               },
               children: [
-                /* @__PURE__ */ i.jsx(
+                /* @__PURE__ */ o.jsx(
                   "div",
                   {
-                    className: `${h.tooltip} ${p(
-                      ce({ theme: n || b })
+                    className: `${u.tooltip} ${g(
+                      ue({ theme: l || h })
                     )}`,
-                    children: w(o)
+                    children: N(n)
                   }
                 ),
-                /* @__PURE__ */ i.jsx(
+                /* @__PURE__ */ o.jsx(
                   "div",
                   {
                     id: c ? `${c}-thumb` : "",
-                    className: `${h.thumb} ${q()} thumb`,
-                    onMouseDown: G
+                    className: `${u.thumb} ${q()} thumb`,
+                    onMouseDown: p ? void 0 : H
                   }
                 )
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ i.jsx("input", { type: "hidden", value: o, ref: t })
+        /* @__PURE__ */ o.jsx("input", { type: "hidden", value: n, ref: t })
       ]
     }
   );
 });
 export {
-  me as Slider
+  ge as Slider
 };