@blofin/blofin-ui 0.7.57 → 0.7.58

package/dist/MultiSelect.es.js

@@ -0,0 +1,425 @@
+"use client";
+import { jsx as t, jsxs as $ } from "react/jsx-runtime";
+import * as r from "react";
+import { createPortal as Q } from "react-dom";
+import { u as X } from "./useTheme-0688f238.js";
+import { c as V } from "./utils-071abd68.js";
+import { c as a } from "./index-c57db938.js";
+import { S as Z } from "./arrow-down-l-line-97e4fe24.js";
+import { S as Y } from "./close-bg-6d2211ef.js";
+import { S as ee } from "./close-0df24351.js";
+import { u as te } from "./useAlign-916ed3be.js";
+import { TextField as re } from "./TextField.es.js";
+import { S as se } from "./search-b79a3be5.js";
+import "./clsx.m-e965ef18.js";
+import "./styles-85a9fe64.js";
+const ae = "_menus_1u4o4_1", K = {
+  menus: ae,
+  "options-wrapper": "_options-wrapper_1u4o4_5"
+}, oe = a("", {
+  variants: {
+    theme: {
+      light: "bu-border-transparent bu-bg-light-fill-secondary focus-within:!bu-border-light-primary hover:bu-border-[1px] hover:bu-border-light-primary",
+      dark: "bu-border-transparent bu-bg-dark-fill-secondary focus-within:!bu-border-dark-primary hover:bu-border-[1px] hover:bu-border-dark-primary"
+    }
+  }
+}), le = a("", {
+  variants: {
+    theme: {
+      light: [
+        "bu-border-light-line-secondary focus-within:bu-border-light-primary focus-within:!bu-bg-transparent hover:bu-border-light-primary"
+      ],
+      dark: [
+        "bu-border-dark-line-secondary focus-within:bu-border-light-primary focus-within:!bu-bg-transparent hover:bu-border-dark-primary"
+      ]
+    }
+  }
+}), ne = a("", {
+  variants: {
+    theme: {
+      light: "bu-border-light-primary",
+      dark: "bu-border-dark-primary"
+    }
+  }
+}), ie = ({
+  theme: l,
+  size: h,
+  variant: i
+}) => a("bu-flex bu-items-center bu-justify-between bu-rounded-[8px] bu-border-[1px]", {
+  variants: {
+    variant: {
+      filled: oe({ theme: l }),
+      outlined: le({ theme: l })
+    },
+    theme: {
+      light: [],
+      dark: []
+    },
+    size: {
+      sm: ["bu-min-h-[32px]", "bu-px-[8px]"],
+      md: ["bu-min-h-[40px]", "bu-px-[8px]"],
+      lg: ["bu-min-h-[48px]", "bu-px-[12px]"]
+    }
+  },
+  defaultVariants: {
+    theme: "light",
+    size: "md"
+  }
+})({ theme: l, size: h, variant: i }), ue = a(
+  "bu-flex bu-flex-[1] bu-flex-wrap bu-items-center bu-justify-start bu-gap-[4px]",
+  {
+    variants: {
+      size: {
+        sm: "bu-py-[3px]",
+        md: "bu-py-[7px]",
+        lg: "bu-py-[9px]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), ce = a("bu-flex bu-items-center bu-justify-center", {
+  variants: {
+    size: {
+      sm: "bu-h-[16px] bu-w-[16px]",
+      md: "bu-h-[20px] bu-w-[20px]",
+      lg: "bu-h-[20px] bu-w-[20px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), be = a("bu-border-[1px] bu-border-solid", {
+  variants: {
+    theme: {
+      light: "bu-border-light-line-secondary bu-bg-light-background",
+      dark: "bu-border-dark-line-primary bu-bg-dark-background"
+    }
+  }
+}), de = a("bu-select-none", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label-40",
+      dark: "bu-text-dark-label-40"
+    },
+    size: {
+      sm: "bu-text-[12px] bu-leading-[18px]",
+      md: "bu-text-[14px] bu-leading-[20px]",
+      lg: "bu-text-[16px] bu-leading-[24px]"
+    }
+  }
+}), pe = a("bu-sticky bu-top-0 bu-mb-[8px] bu-px-[8px] bu-pt-[8px]", {
+  variants: {
+    theme: {
+      light: "bu-bg-light-background",
+      dark: "bu-bg-dark-background"
+    }
+  }
+}), he = a("bu-mx-[8px]", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label-40",
+      dark: "bu-text-dark-label-40"
+    }
+  }
+}), me = a("bu-mx-[8px] bu-cursor-pointer", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label-40",
+      dark: "bu-text-dark-label-40"
+    }
+  }
+}), fe = a("!bu-cursor-not-allowed", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label-40",
+      dark: "bu-text-dark-label-40"
+    }
+  }
+}), ge = a("", {
+  variants: {
+    theme: {
+      light: "bu-text-light-primary",
+      dark: "bu-text-dark-primary"
+    }
+  }
+}), U = ({
+  theme: l,
+  disabled: h,
+  isSelected: i
+}) => a(
+  "bu-flex bu-cursor-pointer bu-items-center bu-justify-start bu-p-[8px] bu-text-[12px] bu-leading-[18px]",
+  {
+    variants: {
+      theme: {
+        light: "bu-text-light-label hover:bu-bg-light-fill-secondary",
+        dark: "bu-text-dark-label hover:bu-bg-dark-fill-secondary"
+      },
+      disabled: {
+        true: fe({ theme: l }),
+        false: ""
+      },
+      isSelected: {
+        true: ge({ theme: l }),
+        false: ""
+      }
+    },
+    defaultVariants: {
+      theme: "light"
+    }
+  }
+)({ theme: l, disabled: h, isSelected: i }), xe = r.forwardRef((l, h) => {
+  const {
+    parent: i,
+    theme: m,
+    size: _,
+    scrollContainer: b,
+    auto: M,
+    offsetPixels: R = -2,
+    menusClassName: H,
+    search: x = !0,
+    searchClassName: S,
+    searchChange: v,
+    options: C,
+    optionsFormat: N,
+    currentSelected: s,
+    setCurrentSelected: d,
+    setIsShowOptions: y,
+    setIsHover: u,
+    multiLimit: E
+  } = l, { theme: n } = X(), c = m || n, [p, O] = r.useState(C), L = r.useRef(null), [T, z] = r.useState(0), { offset: o, resize: f } = te(i), { offsetX: k, offsetY: P } = o, [A, B] = r.useState(!1), { height: q, width: G } = i ? i.getBoundingClientRect() : { width: 0, height: 0 }, [W, J] = r.useState(""), F = (e) => {
+    if (J(e), v && typeof v == "function")
+      v(e);
+    else {
+      if (!e) {
+        O(C);
+        return;
+      }
+      const g = C.filter((I) => I.label.toLowerCase().includes(e.toLowerCase())).sort((I, j) => I.label.toLowerCase() === e.toLowerCase() ? -1 : j.label.toLowerCase() === e.toLowerCase() ? 1 : I.label.toLowerCase().startsWith(e.toLowerCase()) ? -1 : j.label.toLowerCase().startsWith(e.toLowerCase()) ? 1 : I.label.localeCompare(j.label));
+      O(g);
+    }
+  }, D = (e) => {
+    if (!e.disabled && d && s) {
+      if (E && s.length >= E)
+        return;
+      !!s.includes(e.value) || d([...s, e.value]), u && u(!1), y(!1);
+    }
+  };
+  return r.useEffect(() => (b && b.addEventListener("scroll", f), () => {
+    b && b.removeEventListener("scroll", f);
+  }), [b]), r.useEffect(() => {
+    M && setTimeout(() => {
+      if (L.current) {
+        const e = window.innerHeight || document.documentElement.clientHeight, { bottom: w, height: g } = L.current.getBoundingClientRect();
+        z(g), w > e ? B(!0) : B(!1);
+      }
+    }, 0);
+  }, [M]), k !== 0 && P !== 0 ? Q(
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: `${K.menus} ${H} ${be({ theme: n })}`,
+        style: {
+          top: A ? P - T - 4 : P + q + 4 + "px",
+          left: k + "px"
+        },
+        onClick: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        onMouseUp: (e) => e.stopPropagation(),
+        onMouseMove: (e) => e.stopPropagation(),
+        onMouseLeave: (e) => e.stopPropagation(),
+        onMouseEnter: (e) => e.stopPropagation(),
+        onTouchStart: (e) => e.stopPropagation(),
+        onTouchEnd: (e) => e.stopPropagation(),
+        onTouchMove: (e) => e.stopPropagation(),
+        onTouchCancel: (e) => e.stopPropagation(),
+        onContextMenu: (e) => e.stopPropagation(),
+        ref: L,
+        children: /* @__PURE__ */ $(
+          "div",
+          {
+            ref: h,
+            style: { width: G + R + "px" },
+            className: "bu-flex bu-h-full bu-flex-col bu-gap-[8px]",
+            children: [
+              x && /* @__PURE__ */ t("div", { className: `${pe({ theme: n })} ${S}`, children: /* @__PURE__ */ t(
+                re,
+                {
+                  value: W,
+                  variant: "outlined",
+                  startAdornment: /* @__PURE__ */ t(se, { className: he({ theme: n }) }),
+                  endAdornment: W ? /* @__PURE__ */ t(
+                    Y,
+                    {
+                      className: me({ theme: n }),
+                      onClick: () => F("")
+                    }
+                  ) : null,
+                  onChange: (e) => F(e.target.value)
+                }
+              ) }),
+              /* @__PURE__ */ t("ul", { className: K["options-wrapper"], children: p.map((e, w) => {
+                const g = s == null ? void 0 : s.includes(e.value);
+                return N ? /* @__PURE__ */ t(
+                  "li",
+                  {
+                    className: V(
+                      U({
+                        theme: c,
+                        disabled: !!e.disabled,
+                        isSelected: !!g
+                      })
+                    ),
+                    onClick: () => {
+                      D(e);
+                    },
+                    children: N({ ...e, isSelected: g })
+                  },
+                  `${w}-${e.value}`
+                ) : /* @__PURE__ */ $(
+                  "li",
+                  {
+                    className: V(
+                      U({
+                        theme: c,
+                        disabled: !!e.disabled,
+                        isSelected: !!g
+                      })
+                    ),
+                    onClick: () => {
+                      D(e);
+                    },
+                    children: [
+                      e.icon && /* @__PURE__ */ t(
+                        "img",
+                        {
+                          src: e.icon,
+                          alt: e.label,
+                          className: "bu-mr-[4px] bu-h-[20px] bu-w-[20px]"
+                        }
+                      ),
+                      /* @__PURE__ */ t("div", { children: e.label })
+                    ]
+                  },
+                  `${w}-${e.value}`
+                );
+              }) })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  ) : null;
+}), $e = r.forwardRef((l, h) => {
+  r.useImperativeHandle(h, () => ({
+    close: O,
+    clear: L
+  }));
+  const {
+    id: i,
+    size: m = "md",
+    className: _,
+    theme: b,
+    variant: M = "outlined",
+    clearIcon: R = !0,
+    placeholder: H = "placeholder",
+    values: x,
+    onChange: S,
+    labelShowKey: v,
+    options: C
+  } = l, { theme: N } = X(), s = r.useRef(null), d = b || N, [y, u] = r.useState(!1), [E, n] = r.useState(!1), [c, p] = r.useState([]), O = () => {
+    u(!1), n(!1), p([]), s.current && s.current.blur();
+  }, L = () => {
+    p([]), u(!1);
+  }, T = () => {
+    u(!y);
+  }, z = (o) => {
+    o.stopPropagation(), p([]), u(!1);
+  };
+  return r.useEffect(() => {
+    const o = (f) => {
+      s.current && !s.current.contains(f.target) && u(!1);
+    };
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
+    };
+  }, []), r.useEffect(() => {
+    x && Array.isArray(x) && p(x);
+  }, [x]), r.useEffect(() => {
+    S && typeof S == "function" && S(c);
+  }, [c]), /* @__PURE__ */ $(
+    "div",
+    {
+      ref: s,
+      className: V(
+        ie({ theme: d, size: m, variant: M }),
+        y ? ne({ theme: N }) : null,
+        _
+      ),
+      id: i,
+      onMouseEnter: () => n(!0),
+      onMouseLeave: () => n(!1),
+      onClick: T,
+      children: [
+        /* @__PURE__ */ t("div", { className: ue({ size: m }), children: c.length > 0 ? c.map((o) => {
+          const f = C.find((k) => k.value === o);
+          return /* @__PURE__ */ $(
+            "div",
+            {
+              className: `bu-flex bu-items-center bu-gap-[2px] bu-rounded-[4px] bu-px-[4px] bu-py-[2px] ${d === "dark" ? "bu-bg-dark-hover-fill-primary" : "bu-bg-light-hover-fill-primary"}`,
+              children: [
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: `bu-text-[16px] bu-leading-[24px] ${d === "dark" ? "bu-text-dark-label" : "bu-text-light-label"}`,
+                    children: f && v ? f[v] : o
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  ee,
+                  {
+                    onClick: (k) => {
+                      k.stopPropagation(), p((P) => P.filter((A) => A !== o));
+                    },
+                    className: `bu-h-[20px] bu-w-[20px] bu-cursor-pointer ${d === "dark" ? "bu-text-dark-label-40" : "bu-text-light-label-40"}`
+                  }
+                )
+              ]
+            },
+            o
+          );
+        }) : /* @__PURE__ */ t("div", { className: de({ theme: d, size: m }), children: H }) }),
+        /* @__PURE__ */ t("div", { className: ce({ size: m }), children: R && E && c.length > 0 ? /* @__PURE__ */ t(
+          Y,
+          {
+            className: "bu-h-full bu-w-full bu-cursor-pointer",
+            onClick: (o) => {
+              z(o);
+            }
+          }
+        ) : /* @__PURE__ */ t(
+          Z,
+          {
+            className: `bu-h-full bu-w-full bu-transition-all ${y ? "bu-rotate-180" : ""}`
+          }
+        ) }),
+        y && /* @__PURE__ */ t(
+          xe,
+          {
+            ...l,
+            parent: s.current,
+            currentSelected: c,
+            setCurrentSelected: p,
+            setIsShowOptions: u,
+            setIsHover: n
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  $e as MultiSelect
+};

package/dist/Notification.d.ts

@@ -0,0 +1 @@
+export * from './components/Notification/index'

package/dist/Notification.es.js

@@ -0,0 +1,12 @@
+"use client";
+import { b as f } from "./index-40023d52.js";
+import "react/jsx-runtime";
+import "react";
+import "react-dom";
+import "./index-c57db938.js";
+import "./clsx.m-e965ef18.js";
+import "./useTheme-0688f238.js";
+import "./close-0df24351.js";
+export {
+  f as Notification
+};

package/dist/Pagination.d.ts

@@ -0,0 +1 @@
+export * from './components/Pagination/index'

package/dist/Pagination.es.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import * as p from "react";
+import { c as O } from "./clsx.m-e965ef18.js";
+import { u as A } from "./useTheme-0688f238.js";
+import { T as D, S as N } from "./index-9349bf2d.js";
+import { c as L } from "./index-c57db938.js";
+import "react-dom";
+import "./TextField.es.js";
+import "./utils-071abd68.js";
+import "./styles-85a9fe64.js";
+import "./useAlign-916ed3be.js";
+import "./arrow-down-011b02c7.js";
+import "./search-b79a3be5.js";
+const E = L(
+  "bu-min-w-[24px] bu-cursor-pointer bu-rounded-[4px] bu-px-[4px] bu-py-[2px] bu-text-center bu-text-md bu-leading-[20px] bu-transition-colors",
+  {
+    variants: {
+      theme: {
+        dark: "bu-text-dark-label data-[current='true']:bu-bg-dark-primary data-[current='true']:bu-text-light-second",
+        light: "bu-text-light-label data-[current='true']:bu-bg-light-primary data-[current='true']:bu-text-dark-second"
+      }
+    }
+  }
+), T = L(
+  "bu-h-[24px] bu-cursor-pointer data-[disabled='true']:bu-cursor-not-allowed",
+  {
+    variants: {
+      theme: {
+        dark: "bu-text-dark-label data-[disabled='true']:bu-text-dark-label-40",
+        light: "bu-text-light-label data-[disabled='true']:bu-text-light-label-40"
+      }
+    }
+  }
+), W = () => {
+}, q = [10, 20, 30, 40, 50];
+function B(t) {
+  const e = p.useRef(null), { theme: d } = A(), {
+    sizeCanChange: m = !1,
+    onPageSizeChange: n = W,
+    sizeOptions: l = q,
+    pageSize: i = 10,
+    disabled: h,
+    theme: u = d,
+    countPerPage: b
+  } = t;
+  return m ? /* @__PURE__ */ a("div", { className: "bu-h-[34px] bu-w-[97px]", children: /* @__PURE__ */ a(
+    D,
+    {
+      ref: e,
+      options: l.map((s) => ({
+        value: String(s),
+        label: String(s)
+      })),
+      defaultValue: l.indexOf(i) !== -1 ? String(i) : String(l[0]),
+      onChange: (s) => {
+        n(Number(s) || 10);
+      },
+      className: "bu-max-h-[150px] bu-overflow-y-scroll",
+      base: "div",
+      inputDisabled: h,
+      selectItemClassName: `!bu-px-[8px] !bu-leading-[18px] ${u === "light" ? "!bu-bg-light-background hover:!bu-bg-light-hover-fill-primary" : "!bu-bg-dark-background hover:!bu-bg-dark-hover-fill-primary"}`,
+      valueClassName: "!bu-h-[34px]",
+      inputClassName: "!bu-h-[34px]",
+      customSelectItems: (s) => {
+        const v = l.indexOf(i) !== -1 ? String(i) : String(l[0]);
+        return /* @__PURE__ */ g(
+          "div",
+          {
+            className: v === s.value ? u === "light" ? "!bu-text-light-primary" : "!bu-text-dark-primary" : "",
+            children: [
+              s.label,
+              " / ",
+              b
+            ]
+          }
+        );
+      },
+      customLabel: (s) => /* @__PURE__ */ g(
+        "div",
+        {
+          className: `${u === "light" ? "!bu-text-light-label" : "!bu-text-dark-label"}`,
+          children: [
+            s.label,
+            " / ",
+            b
+          ]
+        }
+      ),
+      auto: !1
+    }
+  ) }) : null;
+}
+const R = 10;
+function x(t = R, e) {
+  return Math.ceil(e / t);
+}
+function G(t) {
+  return t && t.length ? t[0] : R;
+}
+function te({
+  totalPages: t,
+  currentPage: e,
+  onChange: d,
+  className: m,
+  theme: n,
+  activeStyle: l,
+  total: i,
+  sizeOptions: h,
+  sizeCanChange: u,
+  onPageChange: b,
+  pageSizeChangeResetCurrent: s = !0,
+  countPerPage: v = "Page",
+  pageSize: y
+}) {
+  const [c, $] = p.useState(
+    y || G(h)
+  ), [_, V] = p.useState(
+    () => j(
+      e,
+      u ? x(c, i) : t
+    )
+  ), w = p.useRef(!0), { theme: S } = A(), F = e === 1, I = p.useMemo(() => {
+    const r = u ? x(c, i) : t;
+    return e === r;
+  }, [e, t, u, c, i]), k = (r) => () => {
+    const o = (f) => {
+      u ? b && b(f, c) : d && d(f);
+    };
+    if (r === "prev")
+      return e > 1 && o(e - 1);
+    if (r === "next") {
+      const f = u ? x(c, i) : t;
+      return e < f && o(e + 1);
+    }
+    r !== e && o(r);
+  }, M = (r) => {
+    const o = x(r, i);
+    $(r), b && b(
+      s ? 1 : e > o ? o : e,
+      r
+    );
+  };
+  return p.useEffect(() => {
+    w.current ? w.current = !1 : V(
+      j(
+        e,
+        u ? x(c, i) : t
+      )
+    );
+  }, [t, e, u, c, i]), !u && (!e || !t || t < e) ? null : (u && !b && console.error(
+    "Warning: you have provide current prop for pagination but without onPageSizeChange handler , this will cause no-change when you change page. "
+  ), /* @__PURE__ */ g("div", { className: `bu-flex bu-items-center bu-justify-center bu-gap-[16px] ${m}`, children: [
+    /* @__PURE__ */ g(
+      "ul",
+      {
+        className: O(
+          "bu-flex bu-items-center bu-justify-center bu-gap-[16px] bu-text-dark-label md:bu-gap-[24px]"
+        ),
+        children: [
+          /* @__PURE__ */ a(
+            "li",
+            {
+              className: T({ theme: n || S }),
+              "data-disabled": F,
+              onClick: k("prev"),
+              children: /* @__PURE__ */ a(N, { className: "bu-h-[24px] bu-w-[24px] bu-rotate-90" })
+            }
+          ),
+          _.map((r, o) => /* @__PURE__ */ a(
+            "li",
+            {
+              ...e === r ? { "data-current": !0, style: l } : { "data-current": !1 },
+              className: E({ theme: n || S }),
+              children: typeof r == "string" ? /* @__PURE__ */ a("span", { children: r }) : /* @__PURE__ */ a("button", { onClick: k(r), children: r })
+            },
+            `${r}-${o}`
+          )),
+          /* @__PURE__ */ a(
+            "li",
+            {
+              className: T({ theme: n || S }),
+              "data-disabled": I,
+              onClick: k("next"),
+              children: /* @__PURE__ */ a(N, { className: "bu-h-[24px] bu-w-[24px] -bu-rotate-90" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(
+      B,
+      {
+        theme: n,
+        sizeCanChange: u,
+        sizeOptions: h,
+        onPageSizeChange: M,
+        pageSize: c,
+        countPerPage: v
+      }
+    )
+  ] }));
+}
+function j(t, e) {
+  if (e <= 4)
+    return Array.from({ length: e }, (l, i) => i + 1);
+  if (t === 1)
+    return [1, 2, 3, "...", e];
+  if (t === e)
+    return [1, "...", e - 2, e - 1, e];
+  const d = Array.from({ length: 3 }, (l, i) => t + i - 1).filter(
+    (l) => l > 1 && l < e
+  ), m = t - 2 > 1 ? [1, "..."] : [1], n = t + 2 >= e ? [e] : ["...", e];
+  return [...m, ...d, ...n];
+}
+export {
+  B as PageOption,
+  te as Pagination
+};

package/dist/Picker.d.ts

@@ -0,0 +1 @@
+export * from './components/Picker/index'