@blofin/blofin-ui 0.7.57 → 0.7.58

package/dist/DatePickerRange.es.js

@@ -0,0 +1,410 @@
+"use client";
+import { jsx as o, jsxs as i, Fragment as S } from "react/jsx-runtime";
+import * as n from "react";
+import { Calendar as Ye } from "./Calendar.es.js";
+import { f as l, M as me } from "./index-eea69add.js";
+import { Button as ae } from "./Button.es.js";
+import { Divider as _e } from "./Divider.es.js";
+import { Typography as g } from "./Typography.es.js";
+import { h as k } from "./index-b7027a1d.js";
+import { u as le, S as ue, l as Fe } from "./locales-776f0072.js";
+import { Popup as Ee } from "./Popup.es.js";
+import { c as X } from "./index-c57db938.js";
+import { u as Le } from "./useTheme-0688f238.js";
+import { a as he } from "./index.esm-71578db5.js";
+import "./arrow-down-l-line-97e4fe24.js";
+import "./arrow-right-l-line-87881b4d.js";
+import "./utils-071abd68.js";
+import "./clsx.m-e965ef18.js";
+import "./Picker.es.js";
+import "./_commonjsHelpers-1d52fb73.js";
+import "./index.module-fb41ba3b.js";
+const be = (M) => /* @__PURE__ */ n.createElement("svg", { t: 1714113967079, className: "icon", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "p-id": 4332, xmlnsXlink: "http://www.w3.org/1999/xlink", width: 200, height: 200, ...M }, /* @__PURE__ */ n.createElement("path", { d: "M213.333333 469.333333v85.333334h597.333334v-85.333334H213.333333z", fill: "currentColor", "p-id": 4333 })), je = (M) => /* @__PURE__ */ n.createElement("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...M }, /* @__PURE__ */ n.createElement("path", { d: "M11.334 2.55843H14.0007C14.3689 2.55843 14.6673 2.85691 14.6673 3.2251V13.8918C14.6673 14.26 14.3689 14.5584 14.0007 14.5584H2.00065C1.63246 14.5584 1.33398 14.26 1.33398 13.8918V3.2251C1.33398 2.85691 1.63246 2.55843 2.00065 2.55843H4.66732V1.2251H6.00065V2.55843H10.0007V1.2251H11.334V2.55843ZM2.66732 6.55843V13.2251H13.334V6.55843H2.66732ZM4.00065 9.2251H7.33398V11.8918H4.00065V9.2251Z", fill: "#0A0A0A", fillOpacity: 0.4 })), Y = X("", {
+  variants: {
+    theme: {
+      light: "bu-text-light-label",
+      dark: "bu-text-dark-label"
+    }
+  }
+}), H = X("", {
+  variants: {
+    theme: {
+      light: "!bu-text-light-label-40",
+      dark: "!bu-text-dark-label-40"
+    }
+  }
+}), O = X("", {
+  variants: {
+    theme: {
+      light: "bu-bg-light-background bu-border-light-line-secondary",
+      dark: "bu-bg-dark-background bu-border-dark-line-secondary"
+    }
+  }
+}), rt = ({
+  mode: M = "simple",
+  className: ge = "",
+  dateClassName: pe = "",
+  defaultValue: s,
+  setValues: _,
+  disabledDays: fe,
+  quickSelection: F = [],
+  limitDays: $,
+  disabledSameDay: q = !1,
+  includesToday: E = !0,
+  startTime: p,
+  isUtcTime: G = !1,
+  lang: f = "en",
+  selectText: L = "Selected",
+  confirmText: j = "Confirm",
+  cancelText: J = "Cancel",
+  toText: de = "-",
+  distance: we = 5,
+  auto: ve = !0,
+  startPlaceholder: xe = "Start Date",
+  endPlaceholder: Me = "End Date",
+  dateSuffix: K = "",
+  pointClassName: C = "",
+  suffixIcon: Q = null,
+  timeZone: W = "UTC",
+  disabled: A = !1
+}) => {
+  const [e, w] = n.useState(), [R, y] = n.useState(!1), [z, D] = n.useState(!1), [u, I] = n.useState(), [m, V] = n.useState(), [ye, v] = n.useState(), [ee, te] = n.useState(303), [De, B] = n.useState(), [T, Te] = n.useState(null), N = n.useRef(!1), re = n.useRef(null), { theme: a } = Le(), b = $ && $ > 0 && (E ? $ - 1 : $) * 24 * 60 * 60 * 1e3, h = (t) => G ? le(t, W) : new Date(t), Ne = {
+    today: le((/* @__PURE__ */ new Date()).getTime(), W)
+  };
+  n.useEffect(() => {
+    (async () => {
+      const r = await Fe(f);
+      Te(r);
+    })();
+  }, [f]);
+  const oe = n.useMemo(() => {
+    const t = h(b ? (/* @__PURE__ */ new Date()).getTime() : new Date(2100, 10).getTime());
+    t.setHours(0, 0, 0, 0);
+    const r = b ? new Date(t.getTime() - b) : h(new Date(1970, 0).getTime()), c = r.getFullYear(), d = r.getMonth() + 1, ie = t.getFullYear(), Ce = t.getMonth() + 1, U = {};
+    for (let x = c; x <= ie; x++) {
+      U[x] = [];
+      let se = 1, ce = 12;
+      x === c && (se = d), x === ie && (ce = Ce);
+      for (let Z = se; Z <= ce; Z++)
+        U[x].push(Z);
+    }
+    return U;
+  }, [b]), P = (t, r) => t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth() && t.getDate() === r.getDate(), Se = (t) => {
+    B(t);
+    const r = h((/* @__PURE__ */ new Date()).getTime());
+    r.setHours(0, 0, 0, 0);
+    const c = he(r, -t + (E ? 1 : 0));
+    p && c.getTime() < p.getTime() && c.setTime(p.getTime());
+    const d = h(
+      E ? (/* @__PURE__ */ new Date()).getTime() : he((/* @__PURE__ */ new Date()).getTime(), -1).getTime()
+    );
+    N.current = !0, w({ from: c, to: d }), _({
+      start_time: c.getTime(),
+      end_time: d.getTime()
+    }), v(h(c.getTime())), setTimeout(() => {
+      v(void 0);
+    }, 200);
+  }, ke = (t, r) => r.getTime() - t.getTime(), He = (t) => {
+    var r, c;
+    if (B(void 0), t != null && t.from && (t != null && t.to))
+      if (q && P(t.from, t.to)) {
+        w(void 0);
+        return;
+      } else
+        b && ke(t.from, t.to) > b && (t.to.getTime() === ((r = e == null ? void 0 : e.to) == null ? void 0 : r.getTime()) ? t.to = new Date(t.from.getTime() + b) : t.from.getTime() === ((c = e == null ? void 0 : e.from) == null ? void 0 : c.getTime()) && (t.from = new Date(t.to.getTime() - b)));
+    N.current = !1, w(t);
+  }, ne = () => {
+    var t;
+    !N.current && (s != null && s.start_time) && (s != null && s.end_time) && w({
+      from: new Date(s.start_time),
+      to: new Date(s.end_time)
+    }), !(s != null && s.start_time) && !(s != null && s.end_time) && w({
+      from: void 0,
+      to: void 0
+    }), setTimeout(() => {
+      B(void 0), y(!1), D(!1), N.current = !1;
+    }, 500), (t = re.current) == null || t.close();
+  }, $e = () => {
+    if (e != null && e.from && (e != null && e.to)) {
+      if (q && P(e.from, e.to))
+        return;
+      e.from.setHours(0, 0, 0, 0);
+      const t = h((/* @__PURE__ */ new Date()).getTime());
+      t.setHours(0, 0, 0, 0), e.to.getTime() < t.getTime() && e.to.setHours(23, 59, 59, 999), _({
+        start_time: e.from.getTime(),
+        end_time: P(e.to, h((/* @__PURE__ */ new Date()).getTime())) ? h((/* @__PURE__ */ new Date()).getTime()).getTime() : e.to.getTime()
+      });
+    }
+    N.current = !0, !(e != null && e.from) && !(e != null && e.to) && _({
+      start_time: void 0,
+      end_time: void 0
+    }), ne();
+  };
+  return n.useEffect(() => {
+    var t;
+    if (u) {
+      const r = ((t = document.querySelector(".bu-date-picker ")) == null ? void 0 : t.clientHeight) || 303;
+      te(r);
+    }
+  }, [u]), n.useEffect(() => {
+    var t;
+    if (m) {
+      const r = ((t = document.querySelector(".bu-date-picker ")) == null ? void 0 : t.clientHeight) || 303;
+      te(r);
+    }
+  }, [m]), n.useEffect(() => {
+    const { start_time: t, end_time: r } = s;
+    if (t === void 0 || r === void 0)
+      return;
+    const c = new Date(t), d = new Date(r);
+    p && c.getTime() < p.getTime() && c.setTime(p.getTime()), c && d && w({ from: c, to: d });
+  }, [s, p]), /* @__PURE__ */ o("div", { className: `bu-date-picker-range ${ge}`, children: /* @__PURE__ */ o(
+    Ee,
+    {
+      ref: re,
+      distance: we,
+      cancel: ne,
+      auto: ve,
+      disabled: A,
+      title: /* @__PURE__ */ o(
+        "div",
+        {
+          id: "date",
+          className: `bu-flex bu-h-[40px] bu-w-[260px] bu-cursor-pointer bu-items-center bu-justify-between bu-rounded-[8px] bu-border bu-p-[8px] ${O(
+            { theme: a }
+          )} ${pe}`,
+          children: M === "simple" ? e != null && e.from ? e.to ? /* @__PURE__ */ i(S, { children: [
+            /* @__PURE__ */ o(
+              g,
+              {
+                variant: "body3",
+                weight: "regular",
+                className: `bu-leading-[20px] ${C}`,
+                children: l(e.from, "yyyy/MM/dd", void 0, f)
+              }
+            ),
+            /* @__PURE__ */ o(
+              be,
+              {
+                className: `bu-h-4 bu-w-4 ${Y({ theme: a })}`
+              }
+            ),
+            /* @__PURE__ */ o(g, { variant: "body3", weight: "regular", className: "bu-leading-[20px]", children: l(e.to, "yyyy/MM/dd", void 0, f) })
+          ] }) : /* @__PURE__ */ o(
+            g,
+            {
+              variant: "body3",
+              weight: "regular",
+              className: `bu-leading-[20px] ${C}`,
+              children: l(e.from, "yyyy/MM/dd", void 0, f)
+            }
+          ) : /* @__PURE__ */ o("span", {}) : /* @__PURE__ */ i("div", { className: "bu-flex bu-items-center bu-gap-[10px]", children: [
+            /* @__PURE__ */ i("div", { className: "bu-flex bu-flex-1 bu-items-center bu-justify-evenly bu-gap-[10px]", children: [
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: `bu-flex bu-min-w-[138px] bu-items-center bu-justify-center bu-gap-[4px] ${C}`,
+                  children: /* @__PURE__ */ i(
+                    g,
+                    {
+                      variant: "body3",
+                      weight: "regular",
+                      className: `bu-leading-[20px] ${!(e != null && e.from) || A ? H({ theme: a }) : ""}`,
+                      children: [
+                        e != null && e.from ? l(e.from, "yyyy/MM/dd", void 0, f) : xe,
+                        (e == null ? void 0 : e.from) && /* @__PURE__ */ i("span", { className: H({ theme: a }), children: [
+                          " ",
+                          K
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ o(be, { className: `bu-h-4 bu-w-4 ${Y({ theme: a })}` }),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: `bu-flex bu-min-w-[138px] bu-items-center bu-justify-center bu-gap-[4px] ${C}`,
+                  children: /* @__PURE__ */ i(
+                    g,
+                    {
+                      variant: "body3",
+                      weight: "regular",
+                      className: `bu-leading-[20px] ${!(e != null && e.to) || A ? H({ theme: a }) : ""}`,
+                      children: [
+                        e != null && e.to ? l(e.to, "yyyy/MM/dd", void 0, f) : Me,
+                        (e == null ? void 0 : e.to) && /* @__PURE__ */ i("span", { className: H({ theme: a }), children: [
+                          " ",
+                          K
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              )
+            ] }),
+            Q || /* @__PURE__ */ o(
+              je,
+              {
+                className: `bu-h-4 bu-w-4 ${H({ theme: a })}`
+              }
+            )
+          ] })
+        }
+      ),
+      content: /* @__PURE__ */ i(
+        "div",
+        {
+          className: `bu-rounded-[8px] bu-border bu-px-[16px] bu-pb-[8px] ${O({
+            theme: a
+          })}`,
+          children: [
+            /* @__PURE__ */ i("div", { className: "bu-date-picker bu-flex", children: [
+              R && /* @__PURE__ */ i(
+                "div",
+                {
+                  className: `bu-w-[241px] bu-flex-1 bu-border-r  bu-pr-[16px] bu-pt-[16px] ${O(
+                    { theme: a }
+                  )}`,
+                  style: { height: ee + "px" },
+                  children: [
+                    /* @__PURE__ */ i(
+                      "div",
+                      {
+                        className: "bu-flex bu-h-[40px] bu-cursor-pointer bu-items-center bu-gap-[4px] bu-py-[8px]",
+                        onClick: () => y(!1),
+                        children: [
+                          /* @__PURE__ */ o(g, { variant: "body2", weight: "medium", children: u && l(u, "MMM yyy", {
+                            locale: T || k
+                          }) }),
+                          /* @__PURE__ */ o(ue, { className: `bu-h-5 bu-w-5 ${Y({ theme: a })}` })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      me,
+                      {
+                        data: oe,
+                        currentYear: u ? u.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear(),
+                        currentMonth: u ? u.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
+                        setMonth: I,
+                        locale: T || k,
+                        confirmText: j,
+                        cancelText: J,
+                        cancel: y.bind(null, !1),
+                        confirm: () => {
+                          v(u), y(!1), setTimeout(() => {
+                            v(void 0);
+                          }, 200);
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: "flex", children: /* @__PURE__ */ o(
+                Ye,
+                {
+                  initialFocus: !0,
+                  mode: "range",
+                  defaultMonth: e == null ? void 0 : e.from,
+                  selected: e,
+                  onSelect: He,
+                  numberOfMonths: 2,
+                  disabled: fe,
+                  startMonthShow: R,
+                  endMonthShow: z,
+                  setStartMonthShow: y,
+                  setEndMonthShow: D,
+                  setStartMonth: I,
+                  setEndMonth: V,
+                  month: ye,
+                  locale: T || k,
+                  modifiers: G ? Ne : void 0
+                }
+              ) }),
+              z && /* @__PURE__ */ i(
+                "div",
+                {
+                  className: "bu-w-[240px] bu-flex-1 bu-pl-[16px] bu-pt-[16px]",
+                  style: { height: ee + "px" },
+                  children: [
+                    /* @__PURE__ */ i(
+                      "div",
+                      {
+                        className: "bu-flex bu-h-[40px] bu-cursor-pointer bu-items-center bu-gap-[4px] bu-py-[8px]",
+                        onClick: () => D(!1),
+                        children: [
+                          /* @__PURE__ */ o(g, { variant: "body2", weight: "medium", children: m && l(m, "MMM yyy", {
+                            locale: T || k
+                          }) }),
+                          /* @__PURE__ */ o(ue, { className: `bu-h-5 bu-w-5 ${Y({ theme: a })}` })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      me,
+                      {
+                        data: oe,
+                        currentYear: m ? m.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear(),
+                        currentMonth: m ? m.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
+                        setMonth: V,
+                        locale: T || k,
+                        confirmText: j,
+                        cancelText: J,
+                        cancel: D.bind(null, !1),
+                        confirm: () => {
+                          v(
+                            (m == null ? void 0 : m.getMonth()) === 0 ? new Date(m.getFullYear() - 1, 11) : m && new Date(m.getFullYear(), m.getMonth() - 1)
+                          ), D(!1), setTimeout(() => {
+                            v(void 0);
+                          }, 200);
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            F && F.length > 0 && /* @__PURE__ */ o("div", { className: "bu-button-group bu-flex bu-gap-[8px] bu-py-[8px]", children: F.map((t, r) => /* @__PURE__ */ o(
+              ae,
+              {
+                onClick: () => Se(t.value),
+                size: "small",
+                variant: De === t.value ? "tertiary" : "text",
+                children: t.label
+              },
+              r
+            )) }),
+            !R && !z && /* @__PURE__ */ i(S, { children: [
+              /* @__PURE__ */ o(_e, { direction: "horizontal" }),
+              /* @__PURE__ */ i("div", { className: "bu-flex bu-items-center bu-justify-between bu-py-[8px]", children: [
+                /* @__PURE__ */ o(g, { variant: "body3", weight: "medium", children: e != null && e.from ? e.to ? /* @__PURE__ */ i(S, { children: [
+                  L,
+                  ": ",
+                  l(e.from, "yyyy/MM/dd"),
+                  " ",
+                  de,
+                  " ",
+                  l(e.to, "yyyy/MM/dd")
+                ] }) : /* @__PURE__ */ i(S, { children: [
+                  L,
+                  ": ",
+                  l(e.from, "yyyy/MM/dd")
+                ] }) : /* @__PURE__ */ i(S, { children: [
+                  L,
+                  ": "
+                ] }) }),
+                /* @__PURE__ */ o(ae, { onClick: () => $e(), size: "small", variant: "primary", children: j })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  rt as DatePickerRange
+};

package/dist/DateTimePicker.d.ts

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