@memobit/libs 3.8.0 → 3.8.2

package/dist/components/Calendar/Calendar2.js

@@ -1,10 +1,10 @@
 import './Calendar.css';
-import { Tooltip as f } from "../Tooltip/Tooltip2.js";
-import { addMonths as H, getMonthMatrix as ue, isAfter as _e, isBefore as x, isSameDay as _, isToday as he, isWeekend as me } from "../../helpers/Datetime.js";
+import { Tooltip as _ } from "../Tooltip/Tooltip2.js";
+import { addMonths as H, formatDate as ue, getMonthMatrix as _e, isAfter as he, isBefore as A, isSameDay as h, isToday as me, isWeekend as fe } from "../../helpers/Datetime.js";
 /* empty css         */
-import { useMemo as fe, useState as M } from "react";
-import { Fragment as V, jsx as n, jsxs as h } from "react/jsx-runtime";
-var d = 12, T = [
+import { useMemo as ye, useState as M } from "react";
+import { Fragment as V, jsx as n, jsxs as m } from "react/jsx-runtime";
+var d = 12, S = [
   "January",
   "February",
   "March",
@@ -17,7 +17,7 @@ var d = 12, T = [
   "October",
   "November",
   "December"
-], ye = [
+], ge = [
   "Sun",
   "Mon",
   "Tue",
@@ -25,7 +25,7 @@ var d = 12, T = [
   "Thu",
   "Fri",
   "Sat"
-], ge = [
+], be = [
   "Mon",
   "Tue",
   "Wed",
@@ -33,7 +33,7 @@ var d = 12, T = [
   "Fri",
   "Sat",
   "Sun"
-], Fe = ({ value: r, onChange: m, mode: i = "single", minDate: A, maxDate: v, disabledDates: p, firstDayOfWeek: D = 0, showToday: j = !0, yearOnly: I = !1, className: G = "", currentMonth: R, onMonthChange: c, showHeader: F = !0, rangeStart: J, onRangeStartChange: Y }) => {
+], we = ({ value: r, onChange: f, mode: i = "single", minDate: T, maxDate: v, disabledDates: p, firstDayOfWeek: D = 0, showToday: j = !0, yearOnly: R = !1, className: G = "", currentMonth: I, onMonthChange: c, showHeader: F = !0, rangeStart: J, onRangeStartChange: Y }) => {
   const [P, u] = M(() => {
     if (r) {
       if (r instanceof Date) return new Date(r.getFullYear(), r.getMonth(), 1);
@@ -41,17 +41,17 @@ var d = 12, T = [
       if (Array.isArray(r) && r.length > 0) return new Date(r[0].getFullYear(), r[0].getMonth(), 1);
     }
     return new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 1);
-  }), [y, g] = M("days"), [b, S] = M(() => {
-    const e = (R ?? P).getFullYear();
+  }), [y, g] = M("days"), [b, k] = M(() => {
+    const e = (I ?? P).getFullYear();
     return Math.floor(e / d) * d;
-  }), [O, E] = M(null), a = R ?? P, o = J ?? O, B = fe(() => ue(a.getFullYear(), a.getMonth(), D), [a, D]), W = D === 1 ? ge : ye, k = (e) => A && x(e, A) || v && _e(e, v) ? !0 : p ? typeof p == "function" ? p(e) : p.some((t) => _(t, e)) : !1, q = (e) => {
+  }), [O, E] = M(null), a = I ?? P, o = J ?? O, B = ye(() => _e(a.getFullYear(), a.getMonth(), D), [a, D]), W = D === 1 ? be : ge, w = (e) => T && A(e, T) || v && he(e, v) ? !0 : p ? typeof p == "function" ? p(e) : p.some((t) => h(t, e)) : !1, q = (e) => {
     if (!r) return !1;
-    if (i === "single" && r instanceof Date) return _(e, r);
+    if (i === "single" && r instanceof Date) return h(e, r);
     if (i === "range") {
-      if (o) return _(e, o);
-      if (r && "start" in r) return _(e, r.start) || _(e, r.end);
+      if (o) return h(e, o);
+      if (r && "start" in r) return h(e, r.start) || h(e, r.end);
     }
-    return i === "multiple" && Array.isArray(r) ? r.some((t) => _(t, e)) : !1;
+    return i === "multiple" && Array.isArray(r) ? r.some((t) => h(t, e)) : !1;
   }, z = (e) => {
     if (i === "range" && r && "start" in r) {
       const { start: t, end: l } = r, s = e.getTime();
@@ -59,24 +59,24 @@ var d = 12, T = [
     }
     return !1;
   }, K = (e) => i === "range" && o ? e.getTime() > o.getTime() : !1, L = (e) => e.getMonth() === a.getMonth(), Q = (e) => {
-    if (!k(e)) {
-      if (i === "single") m?.(e);
+    if (!w(e)) {
+      if (i === "single") f?.(e);
       else if (i === "range")
         if (!o)
-          Y ? Y(e) : (E(e), m?.(void 0));
+          Y ? Y(e) : (E(e), f?.(void 0));
         else {
-          const t = x(e, o) ? e : o, l = x(e, o) ? o : e;
-          m?.({
+          const t = A(e, o) ? e : o, l = A(e, o) ? o : e;
+          f?.({
             start: t,
             end: l
           }), Y ? Y(null) : E(null);
         }
       else if (i === "multiple") {
-        const t = Array.isArray(r) ? r : [], l = t.findIndex((s) => _(s, e));
+        const t = Array.isArray(r) ? r : [], l = t.findIndex((s) => h(s, e));
         if (l >= 0) {
-          const s = t.filter((w, N) => N !== l);
-          m?.(s.length > 0 ? s : void 0);
-        } else m?.([...t, e]);
+          const s = t.filter((x, N) => N !== l);
+          f?.(s.length > 0 ? s : void 0);
+        } else f?.([...t, e]);
       }
     }
   }, U = () => {
@@ -87,11 +87,11 @@ var d = 12, T = [
     c ? c(e) : u(e);
   }, Z = () => {
     const e = /* @__PURE__ */ new Date(), t = new Date(e.getFullYear(), e.getMonth(), 1);
-    c ? c(t) : u(t), g("days"), i === "single" && m?.(e);
+    c ? c(t) : u(t), g("days"), i === "single" && f?.(e);
   }, C = () => {
     F && g("months");
   }, $ = () => {
-    F && (S(Math.floor(a.getFullYear() / d) * d), g("years"));
+    F && (k(Math.floor(a.getFullYear() / d) * d), g("years"));
   }, ee = (e) => {
     const t = new Date(a.getFullYear(), e, 1);
     c ? c(t) : u(t), g("days");
@@ -99,9 +99,9 @@ var d = 12, T = [
     const t = new Date(e, a.getMonth(), 1);
     c ? c(t) : u(t), g("months");
   }, ne = () => {
-    S(b - d);
+    k(b - d);
   }, re = () => {
-    S(b + d);
+    k(b + d);
   }, ae = () => {
     const e = new Date(a.getFullYear() - 1, a.getMonth(), 1);
     c ? c(e) : u(e);
@@ -114,11 +114,11 @@ var d = 12, T = [
     return e;
   }, ce = (e) => {
     const t = ["calendar__day"];
-    return L(e) ? (q(e) && t.push("calendar__day--selected"), z(e) && t.push("calendar__day--in-range"), K(e) && t.push("calendar__day--hover-range")) : t.push("calendar__day--other-month"), he(e) && t.push("calendar__day--today"), me(e) && t.push("calendar__day--weekend"), k(e) && t.push("calendar__day--disabled"), t.join(" ");
-  }, ie = () => y === "years" ? /* @__PURE__ */ h("div", {
+    return L(e) ? (q(e) && t.push("calendar__day--selected"), z(e) && t.push("calendar__day--in-range"), K(e) && t.push("calendar__day--hover-range")) : t.push("calendar__day--other-month"), me(e) && t.push("calendar__day--today"), fe(e) && t.push("calendar__day--weekend"), w(e) && t.push("calendar__day--disabled"), t.join(" ");
+  }, ie = () => y === "years" ? /* @__PURE__ */ m("div", {
     className: "calendar__header",
     children: [
-      /* @__PURE__ */ n(f, {
+      /* @__PURE__ */ n(_, {
         title: "Previous years",
         children: /* @__PURE__ */ n("button", {
           type: "button",
@@ -127,7 +127,7 @@ var d = 12, T = [
           children: "‹"
         })
       }),
-      /* @__PURE__ */ h("div", {
+      /* @__PURE__ */ m("div", {
         className: "calendar__month-year",
         children: [
           b,
@@ -135,7 +135,7 @@ var d = 12, T = [
           b + d - 1
         ]
       }),
-      /* @__PURE__ */ n(f, {
+      /* @__PURE__ */ n(_, {
         title: "Next years",
         children: /* @__PURE__ */ n("button", {
           type: "button",
@@ -145,10 +145,10 @@ var d = 12, T = [
         })
       })
     ]
-  }) : y === "months" ? /* @__PURE__ */ h("div", {
+  }) : y === "months" ? /* @__PURE__ */ m("div", {
     className: "calendar__header",
     children: [
-      /* @__PURE__ */ n(f, {
+      /* @__PURE__ */ n(_, {
         title: "Previous year",
         children: /* @__PURE__ */ n("button", {
           type: "button",
@@ -163,7 +163,7 @@ var d = 12, T = [
         onClick: $,
         children: a.getFullYear()
       }),
-      /* @__PURE__ */ n(f, {
+      /* @__PURE__ */ n(_, {
         title: "Next year",
         children: /* @__PURE__ */ n("button", {
           type: "button",
@@ -173,10 +173,10 @@ var d = 12, T = [
         })
       })
     ]
-  }) : /* @__PURE__ */ h("div", {
+  }) : /* @__PURE__ */ m("div", {
     className: "calendar__header",
     children: [
-      /* @__PURE__ */ n(f, {
+      /* @__PURE__ */ n(_, {
         title: "Previous month",
         children: /* @__PURE__ */ n("button", {
           type: "button",
@@ -187,14 +187,14 @@ var d = 12, T = [
       }),
       /* @__PURE__ */ n("div", {
         className: "calendar__month-year",
-        children: I ? /* @__PURE__ */ n("span", {
+        children: R ? /* @__PURE__ */ n("span", {
           className: "calendar__header-label",
-          children: T[a.getMonth()]
-        }) : /* @__PURE__ */ h(V, { children: [/* @__PURE__ */ n("button", {
+          children: S[a.getMonth()]
+        }) : /* @__PURE__ */ m(V, { children: [/* @__PURE__ */ n("button", {
           type: "button",
           className: "calendar__header-button",
           onClick: C,
-          children: T[a.getMonth()]
+          children: S[a.getMonth()]
         }), /* @__PURE__ */ n("button", {
           type: "button",
           className: "calendar__header-button",
@@ -202,7 +202,7 @@ var d = 12, T = [
           children: a.getFullYear()
         })] })
       }),
-      /* @__PURE__ */ n(f, {
+      /* @__PURE__ */ n(_, {
         title: "Next month",
         children: /* @__PURE__ */ n("button", {
           type: "button",
@@ -227,22 +227,22 @@ var d = 12, T = [
     const e = (/* @__PURE__ */ new Date()).getMonth(), t = (/* @__PURE__ */ new Date()).getFullYear(), l = a.getMonth(), s = a.getFullYear();
     return /* @__PURE__ */ n("div", {
       className: "calendar__months-grid",
-      children: T.map((w, N) => /* @__PURE__ */ n("button", {
+      children: S.map((x, N) => /* @__PURE__ */ n("button", {
         type: "button",
         className: `calendar__month-item ${N === l && s === a.getFullYear() ? "calendar__month-item--selected" : ""} ${N === e && t === a.getFullYear() ? "calendar__month-item--current" : ""}`,
         onClick: () => ee(N),
-        children: w.substring(0, 3)
-      }, w))
+        children: x.substring(0, 3)
+      }, x))
     });
   };
-  return /* @__PURE__ */ h("div", {
+  return /* @__PURE__ */ m("div", {
     className: `calendar ${G}`,
     children: [
       F && ie(),
       y === "years" && oe(),
       y === "months" && de(),
-      y === "days" && /* @__PURE__ */ h(V, { children: [
-        j && !I && /* @__PURE__ */ n("div", {
+      y === "days" && /* @__PURE__ */ m(V, { children: [
+        j && !R && /* @__PURE__ */ n("div", {
           className: "calendar__today-section",
           children: /* @__PURE__ */ n("button", {
             type: "button",
@@ -262,13 +262,15 @@ var d = 12, T = [
           className: "calendar__days",
           children: B.map((e, t) => /* @__PURE__ */ n("div", {
             className: "calendar__week",
-            children: e.map((l, s) => /* @__PURE__ */ n("button", {
-              type: "button",
-              className: ce(l),
-              onClick: () => Q(l),
-              disabled: k(l),
-              title: l.toDateString(),
-              children: l.getDate()
+            children: e.map((l, s) => /* @__PURE__ */ n(_, {
+              title: ue(l, "DD MMM YYYY"),
+              children: /* @__PURE__ */ n("button", {
+                type: "button",
+                className: ce(l),
+                onClick: () => Q(l),
+                disabled: w(l),
+                children: l.getDate()
+              })
             }, s))
           }, t))
         })
@@ -277,5 +279,5 @@ var d = 12, T = [
   });
 };
 export {
-  Fe as Calendar
+  we as Calendar
 };

package/dist/components/DatePicker/DatePicker.css

@@ -1 +1 @@
-:root{--radius-sm:4px;--radius:8px;--radius-full:9999px;--checkbox-size:18px;--radio-size:18px;--body-background-glow:none;--spacing-1:1px;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;--spacing-20:20px;--spacing-24:24px;--spacing-32:32px;--spacing-40:40px;--spacing-48:48px;--spacing-60:60px;--spacing-64:64px;--spacing-80:80px;--spacing-100:100px;--spacing-200:200px;--spacing-300:300px;--spacing-400:400px;--font-size-xxs:.625rem;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-xxl:2rem;--font-size-xxxl:3rem;--font-family-display:var(--font-family,sans-serif);--font-family-mono:ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;--form-control-font-family:var(--font-family,sans-serif);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-none:1;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-loose:1.8;--duration-hover:.2s;--duration-fade:.3s;--duration-slide:.4s;--transition-fast:.15s ease-in-out;--transition-moderate:.3s ease-in-out;--transition-slow:.5s ease-in-out}.datepicker{width:100%;max-width:300px;display:inline-block;position:relative}.datepicker__input{background-color:var(--form-control-background-color);border:var(--spacing-1) solid var(--form-control-border-color);border-radius:var(--radius-sm);color:var(--form-control-color);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--spacing-8);padding:var(--spacing-12);font-size:var(--font-size-sm);line-height:var(--line-height-normal);box-sizing:border-box;transition:border-color .2s,background-color .2s;display:flex}.datepicker__input:hover:not(.datepicker__input--disabled){border-color:var(--form-control-focus-border-color)}.datepicker__input--open{border-color:var(--form-control-focus-border-color);background-color:var(--form-control-focus-background-color)}.datepicker__input--disabled{opacity:.5;cursor:not-allowed}.datepicker__value{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.datepicker__value--placeholder{color:var(--form-control-placeholder-color)}.datepicker__actions{align-items:center;gap:var(--spacing-4);display:flex}.datepicker__clear{color:var(--form-control-placeholder-color);cursor:pointer;font-size:var(--font-size-md);background:0 0;border:none;padding:0;line-height:1;transition:color .2s}.datepicker__clear:hover{color:var(--form-control-color)}.datepicker__icon{font-size:var(--font-size-md);line-height:1}.datepicker__dropdown{background-color:var(--calendar-background-color);border:1px solid var(--calendar-border-color);border-radius:var(--radius);padding:var(--spacing-16);box-sizing:border-box;min-width:280px;max-height:calc(100vh - var(--spacing-32));z-index:1100;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.datepicker__dropdown--inline{margin-top:var(--spacing-12);box-shadow:none;z-index:auto;max-height:none;position:static;overflow:visible}.datepicker__dropdown-close{width:var(--spacing-32);height:var(--spacing-32);margin:calc(var(--spacing-16) * -1) calc(var(--spacing-16) * -1) 0 auto;border-radius:var(--radius-full);color:var(--body-sub-title-color);cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;transition:color .2s,background-color .2s;display:flex;position:sticky;top:0}.datepicker__dropdown-close:hover{color:var(--body-color);background-color:var(--card-background-accent-color)}.datepicker__time{border-top:1px solid var(--calendar-border-color);margin-top:var(--spacing-16);padding-top:var(--spacing-16)}
+:root{--radius-sm:4px;--radius:8px;--radius-full:9999px;--checkbox-size:18px;--radio-size:18px;--body-background-glow:none;--spacing-1:1px;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;--spacing-20:20px;--spacing-24:24px;--spacing-32:32px;--spacing-40:40px;--spacing-48:48px;--spacing-60:60px;--spacing-64:64px;--spacing-80:80px;--spacing-100:100px;--spacing-200:200px;--spacing-300:300px;--spacing-400:400px;--font-size-xxs:.625rem;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-xxl:2rem;--font-size-xxxl:3rem;--font-family-display:var(--font-family,sans-serif);--font-family-mono:ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;--form-control-font-family:var(--font-family,sans-serif);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-none:1;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-loose:1.8;--duration-hover:.2s;--duration-fade:.3s;--duration-slide:.4s;--transition-fast:.15s ease-in-out;--transition-moderate:.3s ease-in-out;--transition-slow:.5s ease-in-out}.datepicker{width:100%;max-width:300px;display:inline-block;position:relative}.datepicker__input{background-color:var(--form-control-background-color);border:var(--spacing-1) solid var(--form-control-border-color);border-radius:var(--radius-sm);color:var(--form-control-color);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--spacing-8);padding:var(--spacing-12);font-size:var(--font-size-sm);line-height:var(--line-height-normal);box-sizing:border-box;transition:border-color .2s,background-color .2s;display:flex}.datepicker__input:hover:not(.datepicker__input--disabled){border-color:var(--form-control-focus-border-color)}.datepicker__input--open{border-color:var(--form-control-focus-border-color);background-color:var(--form-control-focus-background-color)}.datepicker__input--disabled{opacity:.5;cursor:not-allowed}.datepicker__value{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.datepicker__value--placeholder{color:var(--form-control-placeholder-color)}.datepicker__actions{align-items:center;gap:var(--spacing-4);display:flex}.datepicker__clear{color:var(--form-control-placeholder-color);cursor:pointer;font-size:var(--font-size-md);background:0 0;border:none;padding:0;line-height:1;transition:color .2s}.datepicker__clear:hover{color:var(--form-control-color)}.datepicker__icon{font-size:var(--font-size-md);line-height:1}.datepicker__dropdown{gap:var(--spacing-12);background-color:var(--calendar-background-color);border:1px solid var(--calendar-border-color);border-radius:var(--radius);padding:var(--spacing-8) var(--spacing-16) var(--spacing-16);box-sizing:border-box;min-width:280px;max-height:calc(100vh - var(--spacing-32));z-index:1100;flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.datepicker__dropdown>*{flex-shrink:0}.datepicker__dropdown .calendar{background-color:#0000;border:none;border-radius:0;padding:0}.datepicker__dropdown--inline{margin-top:var(--spacing-12);padding-top:var(--spacing-16);box-shadow:none;z-index:auto;max-height:none;position:static;overflow:visible}.datepicker__dropdown-close{width:var(--spacing-32);height:var(--spacing-32);border-radius:var(--radius-full);color:var(--body-sub-title-color);cursor:pointer;z-index:1;background:0 0;border:none;flex-shrink:0;justify-content:center;align-self:flex-end;align-items:center;transition:color .2s,background-color .2s;display:flex;position:sticky;top:0}.datepicker__dropdown-close:hover{color:var(--body-color);background-color:var(--card-background-accent-color)}.datepicker__time{border-top:1px solid var(--calendar-border-color);padding-top:var(--spacing-16)}

package/dist/components/DatePicker/DatePicker2.js

@@ -1,22 +1,22 @@
 import './DatePicker.css';
 import { Icon as H } from "../Icon/Icon2.js";
-import { Tooltip as Y } from "../Tooltip/Tooltip2.js";
+import { Tooltip as E } from "../Tooltip/Tooltip2.js";
 import { APP_DATE_FORMAT as Z, formatDate as l } from "../../helpers/Datetime.js";
 import { Calendar as O } from "../Calendar/Calendar2.js";
 import { TimePicker as ee } from "../TimePicker/TimePicker2.js";
 /* empty css           */
-import { useCallback as te, useEffect as x, useRef as E, useState as D } from "react";
-import { Fragment as ne, jsx as i, jsxs as h } from "react/jsx-runtime";
+import { useCallback as te, useEffect as x, useRef as L, useState as D } from "react";
+import { Fragment as ne, jsx as r, jsxs as h } from "react/jsx-runtime";
 import { createPortal as re } from "react-dom";
-var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFormat: L = "24h", withSeconds: w = !1, withClock: M = !1, clockSize: P = 208, minuteStep: I = 1, dateFormat: _ = Z, placeholder: z = "Select date...", disabled: b = !1, clearable: F = !0, autoClose: N = !0, alwaysOpen: r = !1, ...C }) => {
-  const [j, u] = D(!1), [k, S] = D({
+var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFormat: M = "24h", withSeconds: w = !1, withClock: P = !1, clockSize: I = 208, minuteStep: z = 1, dateFormat: _ = Z, placeholder: F = "Select date...", disabled: b = !1, clearable: j = !0, autoClose: N = !0, alwaysOpen: i = !1, ...C }) => {
+  const [B, u] = D(!1), [k, S] = D({
     hours: 0,
     minutes: 0,
     seconds: 0
-  }), [B, p] = D(null), [q, $] = D({
+  }), [q, p] = D(null), [y, $] = D({
     position: "fixed",
     visibility: "hidden"
-  }), m = E(null), c = E(null);
+  }), m = L(null), c = L(null);
   x(() => {
     f && t instanceof Date && S({
       hours: t.getHours(),
@@ -24,26 +24,26 @@ var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFor
       seconds: t.getSeconds()
     });
   }, [t, f]);
-  const o = r ? !b : j;
+  const o = i ? !b : B;
   x(() => {
-    if (r) return;
+    if (i) return;
     const e = (n) => {
       o && m.current && c.current && !m.current.contains(n.target) && !c.current.contains(n.target) && (p(null), u(!1));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [r, o]);
+  }, [i, o]);
   const a = te(() => {
-    if (r || !o || !m.current || !c.current) return;
-    const e = m.current.getBoundingClientRect(), n = c.current.getBoundingClientRect(), d = 16, A = 8, Q = window.innerHeight - e.bottom - d, T = e.top - d, U = Q < n.height && T > n.height ? e.top - n.height - A : e.bottom + A, V = Math.max(d, Math.min(U, window.innerHeight - n.height - d)), X = Math.max(d, Math.min(e.left, window.innerWidth - n.width - d));
+    if (i || !o || !m.current || !c.current) return;
+    const e = m.current.getBoundingClientRect(), n = c.current.getBoundingClientRect(), d = 16, A = 8, T = window.innerHeight - e.bottom - d, U = e.top - d, V = T < n.height && U > n.height ? e.top - n.height - A : e.bottom + A, X = Math.max(d, Math.min(V, window.innerHeight - n.height - d)), Y = Math.max(d, Math.min(e.left, window.innerWidth - n.width - d));
     $({
       position: "fixed",
-      top: `${V}px`,
-      left: `${X}px`,
+      top: `${X}px`,
+      left: `${Y}px`,
       zIndex: 1100
     });
-  }, [r, o]);
+  }, [i, o]);
   x(() => {
-    if (r || !o) {
+    if (i || !o) {
       $({
         position: "fixed",
         visibility: "hidden"
@@ -57,48 +57,48 @@ var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFor
       cancelAnimationFrame(e), n.disconnect(), window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0);
     };
   }, [
-    r,
+    i,
     o,
     a
   ]);
-  const y = () => {
+  const W = () => {
     if (!t) return "";
     if (s === "single" && t instanceof Date) {
       const e = l(t, _);
       return f ? `${e} ${w ? l(t, "HH:mm:ss") : l(t, "HH:mm")}` : e;
     }
     return s === "range" && t && "start" in t ? `${l(t.start, _)} - ${l(t.end, _)}` : s === "multiple" && Array.isArray(t) ? t.map((e) => l(e, _)).join(", ") : "";
-  }, W = (e) => {
+  }, G = (e) => {
     if (!f || !(e instanceof Date)) {
-      g?.(e), N && s !== "multiple" && !r && u(!1);
+      g?.(e), N && s !== "multiple" && !i && u(!1);
       return;
     }
     const n = new Date(e);
-    n.setHours(k.hours, k.minutes, k.seconds), g?.(n), N && !r && u(!1);
-  }, G = (e) => {
+    n.setHours(k.hours, k.minutes, k.seconds), g?.(n), N && !i && u(!1);
+  }, J = (e) => {
     if (S(e), !(t instanceof Date)) return;
     const n = new Date(t);
     n.setHours(e.hours, e.minutes, e.seconds), g?.(n);
-  }, J = (e) => {
+  }, K = (e) => {
     e.stopPropagation(), p(null), g?.(void 0);
-  }, K = () => {
+  }, Q = () => {
     p(null), u(!1);
-  }, R = y(), v = () => /* @__PURE__ */ h(ne, { children: [/* @__PURE__ */ i(O, {
+  }, R = W(), v = () => /* @__PURE__ */ h(ne, { children: [/* @__PURE__ */ r(O, {
     ...C,
     mode: s,
     value: t,
-    onChange: W,
-    rangeStart: s === "range" ? B : C.rangeStart,
+    onChange: G,
+    rangeStart: s === "range" ? q : C.rangeStart,
     onRangeStartChange: s === "range" ? p : C.onRangeStartChange
-  }), f && s === "single" && t instanceof Date && /* @__PURE__ */ i("div", {
+  }), f && s === "single" && t instanceof Date && /* @__PURE__ */ r("div", {
     className: "datepicker__time",
-    children: /* @__PURE__ */ i(ee, {
-      clockSize: P,
-      format: L,
-      minuteStep: I,
-      onChange: G,
+    children: /* @__PURE__ */ r(ee, {
+      clockSize: I,
+      format: M,
+      minuteStep: z,
+      onChange: J,
       value: k,
-      withClock: M,
+      withClock: P,
       withSeconds: w
     })
   })] });
@@ -108,40 +108,42 @@ var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFor
       ref: m,
       className: `datepicker__input ${b ? "datepicker__input--disabled" : ""} ${o ? "datepicker__input--open" : ""}`,
       onClick: () => {
-        b || r || (o && p(null), u(!o));
+        b || i || (o && p(null), u(!o));
       },
-      children: [/* @__PURE__ */ i("span", {
+      children: [/* @__PURE__ */ r("span", {
         className: `datepicker__value ${R ? "" : "datepicker__value--placeholder"}`,
-        children: R || z
+        children: R || F
       }), /* @__PURE__ */ h("div", {
         className: "datepicker__actions",
-        children: [F && R && /* @__PURE__ */ i(Y, {
+        children: [j && R && /* @__PURE__ */ r(E, {
           title: "Clear",
-          children: /* @__PURE__ */ i("button", {
+          children: /* @__PURE__ */ r("button", {
             type: "button",
             className: "datepicker__clear",
-            onClick: J,
+            onClick: K,
             children: "×"
           })
-        }), /* @__PURE__ */ i("span", {
+        }), /* @__PURE__ */ r("span", {
           className: "datepicker__icon",
-          children: /* @__PURE__ */ i(H, { name: "calendar" })
+          children: /* @__PURE__ */ r(H, { name: "calendar" })
         })]
       })]
-    }), o && (r ? /* @__PURE__ */ i("div", {
+    }), o && (i ? /* @__PURE__ */ r("div", {
       ref: c,
       className: "datepicker__dropdown datepicker__dropdown--inline",
       children: v()
     }) : re(/* @__PURE__ */ h("div", {
       ref: c,
       className: "datepicker__dropdown",
-      style: q,
-      children: [/* @__PURE__ */ i("button", {
-        type: "button",
-        className: "datepicker__dropdown-close",
-        onClick: K,
+      style: y,
+      children: [/* @__PURE__ */ r(E, {
         title: "Close",
-        children: /* @__PURE__ */ i(H, { name: "clear" })
+        children: /* @__PURE__ */ r("button", {
+          type: "button",
+          className: "datepicker__dropdown-close",
+          onClick: Q,
+          children: /* @__PURE__ */ r(H, { name: "clear" })
+        })
       }), v()]
     }), document.body))]
   });

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 488,
+    libBuildNumber: 493,
     libCommit: n,
     libBuildDate: t
   };

package/dist/memobit-icons.json

@@ -31,6 +31,7 @@
     "key",
     "link",
     "lock",
+    "logout",
     "map",
     "menu-hamburger",
     "next",
@@ -48,6 +49,7 @@
     "star",
     "table",
     "target",
+    "theme-picker",
     "time",
     "tree",
     "tune",

package/dist/version.js

@@ -1,7 +1,7 @@
-var I = "3.8.0", B = 488, L = "e4aa259", _ = "2026-10-12T07:30:32.085Z", a = "488";
+var I = "3.8.2", B = 493, L = "26077c7", _ = "2026-10-13T14:15:24.319Z", r = "493";
 export {
   _ as LIB_BUILD_DATE,
-  a as LIB_BUILD_ID,
+  r as LIB_BUILD_ID,
   B as LIB_BUILD_NUMBER,
   L as LIB_COMMIT,
   I as LIB_VERSION

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.8.0",
-  "buildNumber": 488,
-  "commit": "e4aa259",
-  "buildDate": "2026-10-12T07:30:32.085Z"
+  "version": "3.8.2",
+  "buildNumber": 493,
+  "commit": "26077c7",
+  "buildDate": "2026-10-13T14:15:24.319Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",