@blofin/blofin-ui 0.7.57 → 0.7.58

package/dist/RadioButton.es.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import * as m from "react";
+import { u as g } from "./useTheme-0688f238.js";
+import { c as i } from "./utils-071abd68.js";
+import { c as b } from "./index-c57db938.js";
+import "./clsx.m-e965ef18.js";
+const x = b("", {
+  variants: {
+    theme: {
+      light: ["!bu-text-light-label"],
+      dark: ["!bu-text-dark-label"]
+    }
+  }
+}), v = ({
+  theme: e,
+  checked: a,
+  disabled: r
+}) => b("bu-cursor-pointer bu-select-none bu-text-sm", {
+  variants: {
+    theme: {
+      light: ["bu-text-light-label-60"],
+      dark: ["bu-text-dark-label-60"]
+    },
+    disabled: {
+      true: ["!bu-cursor-not-allowed"],
+      false: ["group-hover:bu-text-light-label"]
+    },
+    checked: {
+      true: x({ theme: e })
+    }
+  },
+  compoundVariants: [
+    {
+      theme: "light",
+      disabled: !1,
+      class: "group-hover:!bu-text-light-label"
+    },
+    {
+      theme: "dark",
+      disabled: !1,
+      class: "group-hover:!bu-text-dark-label"
+    }
+  ]
+})({ theme: e, checked: a, disabled: r }), y = b("", {
+  variants: {
+    theme: {
+      light: ["bu-bg-light-primary checked:after:bu-border-light-background"],
+      dark: ["bu-bg-dark-primary checked:after:bu-border-dark-background"]
+    }
+  }
+}), w = ({
+  theme: e,
+  arrow: a,
+  check: r,
+  disabled: t
+}) => b(
+  "bu-relative bu-h-[12px] bu-w-[12px] bu-cursor-pointer bu-appearance-none bu-rounded-full bu-border-[1px]",
+  {
+    variants: {
+      theme: {
+        light: [
+          "!bu-border-light-label-60",
+          "checked:!bu-border-light-primary",
+          "checked:after:!bu-bg-light-primary"
+        ],
+        dark: [
+          "!bu-border-dark-label-60",
+          "checked:!bu-border-dark-primary",
+          "checked:after:!bu-bg-dark-primary"
+        ]
+      },
+      arrow: {
+        circle: "bu-bg-transparent checked:after:bu-absolute checked:after:bu-left-1/2 checked:after:bu-top-1/2 checked:after:bu-block checked:after:bu-h-[6px] checked:after:bu-w-[6px] checked:after:bu--translate-x-1/2 checked:after:bu--translate-y-1/2 checked:after:bu-transform checked:after:bu-rounded-full",
+        check: "checked:after:bu-absolute checked:after:bu-left-1/2 checked:after:bu-top-[4.5px] checked:after:bu-block checked:after:bu-h-[6px] checked:after:bu-w-[4px] checked:after:bu--translate-x-1/2 checked:after:bu--translate-y-1/2 checked:after:bu-rotate-[35deg] checked:after:bu-transform checked:after:bu-border-b-[1.8px] checked:after:bu-border-r-[1.8px]"
+      },
+      check: {
+        true: y({ theme: e })
+      },
+      disabled: {
+        true: "!bu-cursor-not-allowed",
+        false: "bu-cursor-pointer"
+      }
+    },
+    compoundVariants: [
+      {
+        theme: "light",
+        disabled: !1,
+        class: "group-hover:!bu-border-light-primary"
+      },
+      {
+        theme: "dark",
+        disabled: !1,
+        class: "group-hover:!bu-border-dark-primary"
+      }
+    ]
+  }
+)({ theme: e, arrow: a, check: r, disabled: t }), $ = m.forwardRef((e, a) => {
+  const {
+    label: r,
+    theme: t,
+    id: c,
+    value: l,
+    selected: n,
+    name: k,
+    onChange: p,
+    arrow: s = "check",
+    ...d
+  } = e, u = l === n, { theme: h } = g();
+  return /* @__PURE__ */ o("div", { className: "bu-group", children: /* @__PURE__ */ f(
+    "label",
+    {
+      htmlFor: c || `bui-radiobutton-${r}`,
+      className: `${i(
+        v({
+          theme: t || h,
+          checked: !!u,
+          arrow: s,
+          disabled: d.disabled || !1
+        })
+      )} bu-flex bu-cursor-pointer bu-items-center bu-gap-[4px]`,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "radio",
+            className: i(
+              w({
+                theme: t || h,
+                arrow: s,
+                check: u,
+                disabled: d.disabled || !1
+              })
+            ),
+            id: c || `bui-radiobutton-${r}`,
+            name: k,
+            ref: a,
+            value: l,
+            ...d,
+            checked: u,
+            onChange: p
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "checkmark" }),
+        r
+      ]
+    }
+  ) });
+});
+export {
+  $ as RadioButton
+};

package/dist/Select.d.ts

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

package/dist/Select.es.js

@@ -0,0 +1,316 @@
+"use client";
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import * as r from "react";
+import { createPortal as ae } from "react-dom";
+import { u as se } from "./useTheme-0688f238.js";
+import { TextField as le } from "./TextField.es.js";
+import { Typography as q } from "./Typography.es.js";
+import { S as ne } from "./arrow-fill-70becd96.js";
+import { k as oe } from "./helper-221987f8.js";
+import { c as G } from "./utils-071abd68.js";
+import { S as ce } from "./search-b79a3be5.js";
+import { S as ie } from "./close-bg-6d2211ef.js";
+import { c as i } from "./index-c57db938.js";
+import { b as ue, a as me, u as be } from "./useDelayEvent-f577f6a3.js";
+import "./styles-85a9fe64.js";
+import "./clsx.m-e965ef18.js";
+import "./_commonjsHelpers-1d52fb73.js";
+const de = (n) => /* @__PURE__ */ r.createElement("svg", { width: 8, height: 4, viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ r.createElement("path", { d: "M1 0.5L4 3.5L7 0.5", stroke: "currentColor", strokeOpacity: 1, strokeLinecap: "round", strokeLinejoin: "round" })), pe = i("", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label-60",
+      dark: "bu-text-dark-label-60"
+    }
+  }
+}), he = i("", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label",
+      dark: "bu-text-white"
+    }
+  }
+}), fe = i("bu-border-[1px]", {
+  variants: {
+    theme: {
+      light: "bu-border-light-line-secondary bu-bg-light-background",
+      dark: "bu-border-dark-line-primary bu-bg-dark-background"
+    }
+  }
+}), ge = i("", {
+  variants: {
+    theme: {
+      light: "bu-text-light-primary",
+      dark: "bu-text-dark-primary"
+    }
+  }
+}), ve = ({ theme: n, active: b }) => i(
+  "bu-tracking-[-0.2px bu-w-full bu-cursor-pointer bu-p-[8px] bu-text-[12px] bu-leading-[18px]",
+  {
+    variants: {
+      theme: {
+        light: "bu-bg-light-background hover:bu-bg-light-fill-secondary",
+        dark: "bu-bg-dark-background bu-text-dark-label hover:bu-bg-dark-fill-secondary"
+      },
+      active: {
+        true: ge({ theme: n }),
+        false: ""
+      }
+    }
+  }
+)({ theme: n, active: b }), ye = i("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"
+    }
+  }
+}), H = i("bu-mx-[8px]", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label-40",
+      dark: "bu-text-dark-label-40"
+    }
+  }
+}), ke = i("", {
+  variants: {
+    show: {
+      true: "bu-opacity-1 bu-visible bu-z-[10000]",
+      false: "bu-invisible bu-z-[-100] bu-opacity-0"
+    }
+  }
+}), xe = {
+  "select-container": "_select-container_d7gu0_1"
+}, Se = r.forwardRef((n, b) => {
+  const {
+    value: d,
+    items: a,
+    enter: u,
+    align: m,
+    parent: E,
+    handleSelect: R,
+    activeColor: p,
+    theme: o,
+    menuWrapperClassName: A,
+    customSelectItems: h,
+    search: f,
+    searchClear: k,
+    searchEmpty: x,
+    searchChange: s,
+    rowKey: I,
+    styles: F,
+    x: L = 0,
+    y: M = 0,
+    container: S
+  } = n, C = r.useRef(null), l = r.useRef(null), { styles: g, attributes: B, update: v, state: _ } = ue(E, C.current, {
+    placement: m === "left" ? "bottom-start" : "bottom-end",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [L, M]
+        }
+      },
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: [m === "left" ? "top-start" : "top-end"]
+        }
+      }
+    ]
+  }), P = (e) => {
+    s && s(e);
+  };
+  return r.useEffect(() => {
+    v && v(), !u && l.current && (l.current.value = "");
+  }, [u]), ae(
+    /* @__PURE__ */ t("div", { ref: b, children: /* @__PURE__ */ j(
+      "div",
+      {
+        ref: C,
+        className: `${xe["select-container"]} ${ke({ show: u })} ${f ? "bu-pb-[8px]" : "bu-py-[8px]"} ${fe({
+          theme: o
+        })} ${A || ""}`,
+        style: { ...g.popper, ...F },
+        ...B.popper,
+        children: [
+          f && /* @__PURE__ */ t("div", { className: ye({ theme: o }), children: /* @__PURE__ */ t(
+            le,
+            {
+              ref: l,
+              variant: "outlined",
+              className: "bu-h-[38px]",
+              startAdornment: /* @__PURE__ */ t(ce, { className: H({ theme: o }) }),
+              endAdornment: k && l.current && l.current.value ? /* @__PURE__ */ t(
+                ie,
+                {
+                  className: `${H({ theme: o })} bu-cursor-pointer`,
+                  onClick: () => {
+                    l.current && (l.current.value = ""), setTimeout(() => {
+                      P("");
+                    }, 0);
+                  }
+                }
+              ) : null,
+              onChange: (e) => P(e.target.value)
+            }
+          ) }),
+          f && x && !a.length && x,
+          /* @__PURE__ */ t("ul", { children: a == null ? void 0 : a.map((e) => /* @__PURE__ */ t(
+            "li",
+            {
+              className: ve({
+                theme: o,
+                active: p && d === e.value
+              }),
+              onClick: () => R(e.value, e),
+              children: h ? h(e) : e.label
+            },
+            e[I || d]
+          )) })
+        ]
+      }
+    ) }),
+    S || document.body
+  );
+}), _e = r.forwardRef((n, b) => {
+  var O, W;
+  const {
+    name: d,
+    value: a,
+    selectItems: u,
+    theme: m,
+    align: E = "left",
+    selectType: R = "filled",
+    handleChange: p,
+    labelClassName: o,
+    scrollable: A = !1,
+    wrapper: h,
+    activeColor: f = !0,
+    arrowClassName: k = "",
+    offsetParent: x,
+    trigger: s = "click",
+    menuWrapperClassName: I,
+    adsorb: F = !1,
+    labelId: L,
+    customSelectItems: M,
+    search: S,
+    searchClear: C,
+    searchEmpty: l,
+    searchChange: g,
+    rowKey: B,
+    labelField: v = "label",
+    styles: _,
+    inputDisabled: P = !1,
+    hoverClassName: e,
+    x: J,
+    y: Q,
+    container: U,
+    ...V
+  } = n, { theme: T } = se(), { isClient: X } = me(), w = r.useRef(null), z = r.useRef(null), [c, y] = be(!1, 100), Y = oe(u, "value"), D = r.useMemo(() => Y, [a, u]), Z = ($, N) => {
+    p && p($, N), y(!1);
+  }, ee = () => {
+    s === "hover" && y(!0);
+  }, te = () => {
+    s === "hover" && y(!1);
+  }, re = () => {
+    s === "click" && c === !1 && y(!0);
+  }, K = ($) => {
+    var N;
+    (N = z.current) != null && N.contains($.target) || (w.current && !w.current.contains($.target) && y(!1), g && g(""));
+  };
+  return r.useEffect(() => (s === "click" && document.addEventListener("click", K), () => {
+    s === "click" && document.removeEventListener("click", K);
+  }), [s]), /* @__PURE__ */ j("div", { className: "bu-flex", children: [
+    /* @__PURE__ */ j(
+      "div",
+      {
+        id: L,
+        ref: w,
+        className: "bu-flex bu-cursor-pointer bu-select-none bu-items-center bu-justify-center",
+        onMouseEnter: ee,
+        onMouseLeave: te,
+        onClick: re,
+        children: [
+          h ? h(
+            /* @__PURE__ */ t(
+              q,
+              {
+                variant: "body4",
+                className: `${o} ${c ? e : ""}`,
+                children: (O = D[String(a)]) == null ? void 0 : O[v]
+              }
+            )
+          ) : /* @__PURE__ */ t(
+            q,
+            {
+              variant: "body4",
+              className: `${o} ${c ? e : ""}`,
+              children: (W = D[String(a)]) == null ? void 0 : W[v]
+            }
+          ),
+          R === "filled" ? /* @__PURE__ */ t(
+            ne,
+            {
+              className: `bu-h-[16px] bu-w-[16px] ${c ? "" : "bu-rotate-180"} ${G(
+                pe({
+                  theme: m || T
+                })
+              )} ${k} ${c ? e : ""}`
+            }
+          ) : /* @__PURE__ */ t(
+            de,
+            {
+              className: `bu-ml-[4px] bu-h-[10px] bu-w-[10px] ${c ? "bu-rotate-180" : ""} ${G(
+                he({
+                  theme: m || T
+                })
+              )} ${k} ${c ? e : ""}`
+            }
+          ),
+          X && /* @__PURE__ */ t(
+            Se,
+            {
+              ref: z,
+              enter: c,
+              parent: w.current,
+              search: S,
+              searchClear: C,
+              searchEmpty: l,
+              searchChange: g,
+              value: String(a),
+              items: u,
+              customSelectItems: M,
+              align: E,
+              handleSelect: Z,
+              activeColor: f,
+              theme: m || T,
+              offsetParent: x,
+              menuWrapperClassName: I,
+              rowKey: B,
+              styles: _,
+              x: J,
+              y: Q,
+              container: U
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        className: "bu-hidden",
+        name: d,
+        id: `bu-select-${d}`,
+        type: "hidden",
+        ref: b,
+        value: a,
+        ...V
+      }
+    )
+  ] });
+});
+export {
+  _e as Select
+};