@blofin/blofin-ui 0.7.12 → 0.7.13

package/dist/Slider.es.js

@@ -1,33 +1,33 @@
 import { j as t } from "./jsx-runtime-944c88e2.js";
-import { forwardRef as V, useRef as $, useState as S, useCallback as w } from "react";
+import { forwardRef as S, useRef as x, useState as w, useCallback as E } from "react";
 import { a as l, u as R } from "./index-96a8d125.js";
 import { c as i } from "./utils-7e50508b.js";
-const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_tooltip_1f4y3_53", P = "_thumb_1f4y3_50", n = {
+const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", L = "_mark_1f4y3_23", P = "_tooltip_1f4y3_53", A = "_thumb_1f4y3_50", n = {
   "slider-container": "_slider-container_1f4y3_1",
   "slider-content": "_slider-content_1f4y3_4",
   rail: T,
   track: X,
   "mark-container": "_mark-container_1f4y3_23",
-  mark: E,
+  mark: L,
   "mark-label": "_mark-label_1f4y3_39",
   "thumb-container": "_thumb-container_1f4y3_50",
-  tooltip: L,
-  thumb: P
-}, A = l("", {
+  tooltip: P,
+  thumb: A
+}, B = l("", {
   variants: {
     theme: {
       light: ["bu-bg-light-line-secondary"],
       dark: ["bu-bg-dark-line-secondary"]
     }
   }
-}), B = l("", {
+}), q = l("", {
   variants: {
     theme: {
       light: ["bu-bg-light-primary"],
       dark: ["bu-bg-dark-primary"]
     }
   }
-}), q = l("", {
+}), z = l("", {
   variants: {
     theme: {
       light: ["bu-bg-light-label-60"],
@@ -41,35 +41,35 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
       dark: ["bu-border-dark-line-secondary bu-bg-dark-background"]
     }
   }
-}), z = l("bu-transition-colors", {
+}), F = l("bu-transition-colors", {
   variants: {
     theme: {
       light: ["bu-border-light-primary"],
       dark: ["bu-border-dark-primary"]
     }
   }
-}), x = l("", {
+}), j = l("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-60"],
       dark: ["bu-text-dark-label-60"]
     }
   }
-}), F = l("", {
+}), G = l("", {
   variants: {
     theme: {
       light: ["bu-border-light-primary bu-bg-light-background"],
       dark: ["bu-border-dark-primary bu-bg-dark-background"]
     }
   }
-}), j = l("", {
+}), N = l("", {
   variants: {
     theme: {
       light: ["!bu-border-light-label-60 bu-bg-light-background"],
       dark: ["!bu-border-dark-label bu-bg-dark-background"]
     }
   }
-}), G = l("after:border", {
+}), H = l("after:border", {
   variants: {
     theme: {
       light: [
@@ -80,46 +80,46 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
       ]
     }
   }
-}), O = V((N, C) => {
-  const { value: s, onSliderChange: u, theme: r, id: o } = N, { theme: a } = R(), v = $(null), k = (e) => {
-    var y;
+}), Q = S((C, M) => {
+  const { value: s, onSliderChange: u, onDragEnd: v, theme: r, id: o } = C, { theme: a } = R(), p = x(null), k = (e) => {
+    var $;
     e.stopPropagation(), e.preventDefault();
-    const { left: c, right: f } = ((y = v.current) == null ? void 0 : y.getBoundingClientRect()) || {
+    const { left: c, right: f } = (($ = p.current) == null ? void 0 : $.getBoundingClientRect()) || {
       left: 0,
       right: 0
     };
     e.clientX >= c && e.clientX <= f ? u(Math.ceil((e.clientX - c) / (f - c) * 100)) : e.clientX < c && e.clientX > 0 ? u(0) : e.clientX > f && u(100);
-  }, h = $(!1), [g, p] = S(!1), M = (e) => {
-    e.stopPropagation(), e.preventDefault(), document.activeElement.blur(), h.current = !0, p(!0), document.addEventListener(
+  }, h = x(!1), [g, _] = w(!1), D = (e) => {
+    e.stopPropagation(), e.preventDefault(), document.activeElement.blur(), h.current = !0, _(!0), document.addEventListener(
       "mouseup",
       () => {
-        h.current = !1, p(!1), document.removeEventListener("mousemove", _);
+        h.current = !1, _(!1), document.removeEventListener("mousemove", y), v && v(s);
       },
       { once: !0 }
-    ), document.addEventListener("mousemove", _);
-  }, _ = w(
+    ), document.addEventListener("mousemove", y);
+  }, y = E(
     (e) => {
       h.current && k(e);
     },
     [h.current, k]
   ), d = (e, c) => {
     e.stopPropagation(), u(c);
-  }, D = (e) => {
+  }, V = (e) => {
     k(e);
-  }, m = () => g ? z({ theme: r || a }) : j({ theme: r || a });
+  }, m = () => g ? F({ theme: r || a }) : N({ theme: r || a });
   return /* @__PURE__ */ t.jsxs("div", { id: o ? `${o}-slider-container` : "", className: n["slider-container"], children: [
     /* @__PURE__ */ t.jsxs("div", { className: n["slider-content"], children: [
       /* @__PURE__ */ t.jsx(
         "div",
         {
-          ref: v,
-          className: `${n.rail} ${i(A({ theme: r || a }))}`
+          ref: p,
+          className: `${n.rail} ${i(B({ theme: r || a }))}`
         }
       ),
       /* @__PURE__ */ t.jsx(
         "div",
         {
-          className: `${n.track} ${g ? i(B({ theme: r || a })) : q({ theme: r || a })}`,
+          className: `${n.track} ${g ? i(q({ theme: r || a })) : z({ theme: r || a })}`,
           style: { width: `${s}%` }
         }
       ),
@@ -128,7 +128,7 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
         {
           id: o ? `${o}-mark-container` : "",
           className: n["mark-container"],
-          onClick: (e) => D(e),
+          onClick: (e) => V(e),
           children: [
             /* @__PURE__ */ t.jsx(
               "div",
@@ -142,7 +142,7 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
                   "span",
                   {
                     className: `${n["mark-label"]} ${i(
-                      x({ theme: r || a })
+                      j({ theme: r || a })
                     )}`,
                     children: "0%"
                   }
@@ -191,7 +191,7 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
                   "span",
                   {
                     className: `${n["mark-label"]} ${i(
-                      x({ theme: r || a })
+                      j({ theme: r || a })
                     )}`,
                     children: "100%"
                   }
@@ -214,7 +214,7 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
               "div",
               {
                 className: `${n.tooltip} ${i(
-                  G({ theme: r || a })
+                  H({ theme: r || a })
                 )}`,
                 children: [
                   s,
@@ -226,17 +226,17 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", E = "_mark_1f4y3_23", L = "_to
               "div",
               {
                 id: o ? `${o}-thumb` : "",
-                className: `${n.thumb} ${g ? i(F({ theme: r || a })) : j({ theme: r || a })}`,
-                onMouseDown: M
+                className: `${n.thumb} ${g ? i(G({ theme: r || a })) : N({ theme: r || a })}`,
+                onMouseDown: D
               }
             )
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsx("input", { type: "hidden", value: s, ref: C })
+    /* @__PURE__ */ t.jsx("input", { type: "hidden", value: s, ref: M })
   ] });
 });
 export {
-  O as Slider
+  Q as Slider
 };

package/dist/components/Slider/Slider.d.ts

@@ -11,6 +11,11 @@ export interface SliderProps {
      * @returns void
      */
     onSliderChange: (value: number) => void;
+    /**
+     * @param value number
+     * @returns void
+     */
+    onDragEnd?: (value: number) => void;
     /**
      * BUI theme
      */

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/blofinex/blofin-ui.git"
   },
-  "version": "0.7.12",
+  "version": "0.7.13",
   "module": "./dist/index.es.js",
   "type": "module",
   "types": "./dist/index.d.ts",