@mci-ui/mci-ui 0.0.86 → 0.0.88

package/dist/shared/ui/mciPicker/MciPicker.js

@@ -1,256 +1,424 @@
-import { jsx as r, jsxs as d, Fragment as G } from "react/jsx-runtime";
-import { Calendar as je, AltArrowLeft as H, AltArrowRight as J, DoubleAltArrowLeft as Ee, DoubleAltArrowRight as Le } from "@solar-icons/react";
-import { forwardRef as Oe, useState as v, useRef as Pe, useMemo as de, useCallback as x, useEffect as O } from "react";
-import { useClickOutside as Be, useEscapeKey as $e, cn as M } from "../../lib/utils.js";
-import { locales as Te } from "../../lib/locales.js";
+import { jsx as r, jsxs as h, Fragment as U } from "react/jsx-runtime";
+import { Calendar as Oe, AltArrowLeft as X, AltArrowRight as Z, DoubleAltArrowLeft as Pe, DoubleAltArrowRight as Be } from "@solar-icons/react";
+import { forwardRef as $e, useState as w, useRef as Te, useMemo as de, useCallback as N, useEffect as $ } from "react";
+import { useClickOutside as Ke, useEscapeKey as Ve, cn as a } from "../../lib/utils.js";
+import { locales as We } from "../../lib/locales.js";
 /* empty css                 */
-import Ke from "../mciInput/MciInput.js";
-import { toSafeDate as w, formatDateByPattern as Ve, isDateOutsideBounds as We, normalizeDate as I, isSameCalendarDay as _e, parseDateFromInput as ue, formatManualDateInput as qe, getCalendarDays as Ge, shiftYear as He, shiftMonth as Je } from "./mci-picker.utils.js";
-const Qe = Oe(
+import _e from "../mciInput/MciInput.js";
+import { toSafeDate as D, formatDateByPattern as qe, isDateOutsideBounds as Ge, normalizeDate as F, isSameCalendarDay as He, parseDateFromInput as he, formatManualDateInput as Je, getCalendarDays as Qe, shiftYear as Ue, shiftMonth as Xe } from "./mci-picker.utils.js";
+const Ze = $e(
   ({
     type: s = "date",
-    value: P,
-    onChange: i,
-    placeholder: B,
+    value: T,
+    onChange: u,
+    placeholder: K,
     label: fe,
-    disabled: z = !1,
+    darkMode: l = !1,
+    disabled: A = !1,
     required: me = !1,
-    className: he,
-    format: Q = "DD.MM.YYYY",
-    minDate: U,
-    maxDate: X,
+    className: be,
+    format: k = "DD.MM.YYYY",
+    minDate: M,
+    maxDate: ee,
     error: ge,
-    showClear: be = !0,
-    allowManualInput: Z = !0,
-    locale: pe = "uz",
-    startView: N = "day",
-    iconPosition: ee = "left",
-    align: $ = "auto"
+    showClear: pe = !0,
+    allowManualInput: te = !0,
+    locale: xe = "uz",
+    startView: y = "day",
+    iconPosition: ne = "left",
+    align: V = "auto"
   }, ve) => {
-    const [h, T] = v(!1), [te, g] = v(
+    const [f, W] = w(!1), [re, p] = w(
       s === "range" ? [null, null] : null
-    ), [D, Y] = v([null, null]), [u, f] = v(/* @__PURE__ */ new Date()), [ne, C] = v(N), [xe, K] = v(0), [A, c] = v(""), [re, se] = v(!1), [V, oe] = v($), S = Pe(null), m = de(() => {
-      const e = P !== void 0 ? P : te;
-      if (s === "date") return w(e);
+    ), [I, R] = w([null, null]), [m, b] = w(/* @__PURE__ */ new Date()), [le, Y] = w(y), [we, _] = w(0), [j, d] = w(""), [q, se] = w(!1), [G, oe] = w(V), E = Te(null), g = de(() => {
+      const e = T !== void 0 ? T : re;
+      if (s === "date") return D(e);
       const t = e;
-      return [w(t[0]), w(t[1])];
-    }, [P, te, s]), W = Te[pe], a = x(
-      (e) => Ve(e, Q),
-      [Q]
-    ), F = x(
-      (e) => We(e, U, X),
-      [U, X]
-    ), k = de(() => {
-      if (s === "date") return a(m);
-      const [e, t] = m;
-      return !e && !t ? "" : e && t ? `${a(e)} - ${a(t)}` : e ? `${a(e)} - ...` : "...";
-    }, [s, m, a]);
-    O(() => {
-      (!h && !re || A === "" && k !== "") && c(k);
-    }, [k, h, A, re]), O(() => {
-      if (h)
+      return [D(t[0]), D(t[1])];
+    }, [T, re, s]), H = We[xe], c = N(
+      (e) => qe(e, k),
+      [k]
+    ), S = N(
+      (e) => Ge(e, M, ee),
+      [M, ee]
+    ), C = de(() => {
+      if (s === "date") return c(g);
+      const [e, t] = g;
+      return !e && !t ? "" : e && t ? `${c(e)} - ${c(t)}` : e ? `${c(e)} - ...` : "...";
+    }, [s, g, c]);
+    $(() => {
+      (!f && !q || j === "" && C !== "") && d(C);
+    }, [C, f, j, q]), $(() => {
+      if (f)
         if (s === "range") {
-          const e = m;
-          Y(e), e[0] ? f(e[0]) : e[1] ? f(e[1]) : f(/* @__PURE__ */ new Date());
+          const e = g;
+          R(e), e[0] ? b(e[0]) : e[1] ? b(e[1]) : b(/* @__PURE__ */ new Date());
         } else {
-          const e = m;
-          f(e || /* @__PURE__ */ new Date());
+          const e = g;
+          b(e || /* @__PURE__ */ new Date());
         }
-    }, [h, s, m]), O(() => {
-      if (h && $ === "auto" && S.current) {
-        const e = S.current.getBoundingClientRect(), t = window.innerWidth - e.right, n = e.left;
+    }, [f, s, g]), $(() => {
+      if (f && V === "auto" && E.current) {
+        const e = E.current.getBoundingClientRect(), t = window.innerWidth - e.right, n = e.left;
         t < 300 && n > 300 ? oe("right") : oe("left");
       }
-    }, [h, $]);
-    const b = x(() => {
-      T(!1), C(N), K(0), c(k);
-    }, [N, k]), we = x((e) => {
-      z || (e.preventDefault(), e.stopPropagation(), T((t) => !t));
-    }, [z]), { handleClick: _ } = Be(S, b), { handleEscape: q } = $e(b);
-    O(() => {
-      if (h)
-        return document.addEventListener("mousedown", _), document.addEventListener("keydown", q), () => {
-          document.removeEventListener("mousedown", _), document.removeEventListener("keydown", q);
+    }, [f, V]);
+    const x = N(() => {
+      W(!1), Y(y), _(0), d(C);
+    }, [y, C]), Ne = N((e) => {
+      A || (e.preventDefault(), e.stopPropagation(), W((t) => !t));
+    }, [A]), { handleClick: J } = Ke(E, x), { handleEscape: Q } = Ve(x);
+    $(() => {
+      if (f)
+        return document.addEventListener("mousedown", J), document.addEventListener("keydown", Q), () => {
+          document.removeEventListener("mousedown", J), document.removeEventListener("keydown", Q);
         };
-    }, [h, _, q]);
-    const Ne = () => {
-      se(!0), !(z || h) && (s === "range" || !Z) && (T(!0), C(N));
-    }, De = () => {
+    }, [f, J, Q]);
+    const De = () => {
+      se(!0), !(A || f) && (s === "range" || !te) && (W(!0), Y(y));
+    }, ye = () => {
       if (se(!1), s !== "date") return;
-      const e = A.trim();
+      const e = j.trim();
       if (!e) {
-        g(null), i?.(null);
+        p(null), u?.(null);
         return;
       }
-      const t = ue(e);
-      if (t && !F(t)) {
-        const n = I(t);
-        g(n), i?.(n), c(a(n)), f(n);
+      const t = he(e);
+      if (t && !S(t)) {
+        const n = F(t);
+        p(n), u?.(n), d(c(n)), b(n);
         return;
       }
-      c(k);
-    }, ke = (e) => {
+      d(C);
+    }, Ie = (e) => {
       if (s !== "date") return;
-      const t = e.target.value, n = qe(t), l = n.replace(/\D/g, "");
-      if (!(l.length >= 1 && Number.parseInt(l[0] ?? "0", 10) > 3)) {
-        if (l.length >= 2) {
-          const o = Number.parseInt(l.slice(0, 2), 10);
+      const t = e.target.value, n = Je(t), i = n.replace(/\D/g, "");
+      if (!(i.length >= 1 && Number.parseInt(i[0] ?? "0", 10) > 3)) {
+        if (i.length >= 2) {
+          const o = Number.parseInt(i.slice(0, 2), 10);
           if (o < 1 || o > 31) return;
         }
-        if (!(l.length >= 3 && Number.parseInt(l[2] ?? "0", 10) > 1)) {
-          if (l.length >= 4) {
-            const o = Number.parseInt(l.slice(2, 4), 10);
+        if (!(i.length >= 3 && Number.parseInt(i[2] ?? "0", 10) > 1)) {
+          if (i.length >= 4) {
+            const o = Number.parseInt(i.slice(2, 4), 10);
             if (o < 1 || o > 12) return;
           }
-          if (c(n), n.length === 10) {
-            const o = ue(n);
-            o && !F(o) && (g(o), i?.(o), f(o));
-          } else n === "" && (g(null), i?.(null));
+          if (d(n), n.length === 10) {
+            const o = he(n);
+            o && !S(o) && (p(o), u?.(o), b(o));
+          } else n === "" && (p(null), u?.(null));
         }
       }
-    }, ye = x(() => {
+    }, Ce = N(() => {
       const e = s === "range" ? [null, null] : null;
-      g(e), Y([null, null]), i?.(e), c("");
-    }, [s, i]), Me = x(
+      p(e), R([null, null]), u?.(e), d("");
+    }, [s, u]), ze = N(
       (e) => {
-        if (F(e)) return;
-        const t = I(e);
+        if (S(e)) return;
+        const t = F(e);
         if (s === "date")
-          g(t), i?.(t), c(a(t)), b();
+          p(t), u?.(t), d(c(t)), x();
         else {
-          const [n, l] = D;
-          if (!n && !l || n && l)
-            Y([t, null]), c(`${a(t)} - ...`);
-          else if (n && !l) {
+          const [n, i] = I;
+          if (!n && !i || n && i)
+            R([t, null]), d(`${c(t)} - ...`);
+          else if (n && !i) {
             const o = t < n ? [t, n] : [n, t];
-            Y(o), g(o), i?.(o);
-            const [y, p] = o;
-            c(`${a(y)} - ${a(p)}`), b();
+            R(o), p(o), u?.(o);
+            const [z, v] = o;
+            d(`${c(z)} - ${c(v)}`), x();
           }
         }
       },
-      [s, D, F, i, b, a]
-    ), Ie = x((e) => {
-      const t = new Date(u.getFullYear(), e, 1);
-      f(t), N === "month" && s === "date" ? (g(t), i?.(t), c(a(t)), b()) : C("day");
-    }, [u, N, i, b, s, a]), Ce = x((e) => {
-      const t = new Date(e, u.getMonth(), 1);
-      f(t), N === "year" && s === "date" ? (g(t), i?.(t), c(a(t)), b()) : C("month");
-    }, [u, N, i, b, s, a]), le = (e) => {
-      f((t) => Je(t, e));
-    }, R = (e) => {
-      f((t) => He(t, e));
-    }, j = x((e, t) => _e(e, t), []), ze = (e) => {
-      const t = I(e);
-      if (s === "date") return m && j(t, m);
-      const [n] = D[0] ? D : m;
-      return w(n) && j(t, w(n));
-    }, Fe = (e) => {
+      [s, I, S, u, x, c]
+    ), Fe = N((e) => {
+      const t = new Date(m.getFullYear(), e, 1);
+      b(t), y === "month" && s === "date" ? (p(t), u?.(t), d(c(t)), x()) : Y("day");
+    }, [m, y, u, x, s, c]), Ye = N((e) => {
+      const t = new Date(e, m.getMonth(), 1);
+      b(t), y === "year" && s === "date" ? (p(t), u?.(t), d(c(t)), x()) : Y("month");
+    }, [m, y, u, x, s, c]), ae = (e) => {
+      b((t) => Xe(t, e));
+    }, L = (e) => {
+      b((t) => Ue(t, e));
+    }, O = N((e, t) => He(e, t), []), Ae = (e) => {
+      const t = F(e);
+      if (s === "date") return g && O(t, g);
+      const [n] = I[0] ? I : g;
+      return D(n) && O(t, D(n));
+    }, Se = (e) => {
       if (s !== "range") return !1;
-      const t = I(e), [, n] = D[1] ? D : m;
-      return w(n) && j(t, w(n));
-    }, Ye = (e) => {
+      const t = F(e), [, n] = I[1] ? I : g;
+      return D(n) && O(t, D(n));
+    }, Re = (e) => {
       if (s !== "range") return !1;
-      const t = I(e), [n, l] = D[0] ? D : m, o = w(n), y = w(l);
-      return o && !y ? !1 : o && y && t > I(o) && t < I(y);
-    }, ae = (e, t, n) => {
-      const l = Ge(e);
-      return /* @__PURE__ */ d("div", { className: "w-[300px] p-2 select-none", children: [
-        /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-4 py-1", children: [
-          /* @__PURE__ */ r("div", { className: "flex gap-2 w-16", children: t && /* @__PURE__ */ d(G, { children: [
-            /* @__PURE__ */ r("button", { onClick: () => R(-1), type: "button", className: "hover:bg-slate-100 p-1 rounded transition-colors text-slate-500", children: /* @__PURE__ */ r(Ee, { size: 18 }) }),
-            /* @__PURE__ */ r("button", { onClick: () => le(-1), type: "button", className: "hover:bg-slate-100 p-1 rounded transition-colors text-slate-500", children: /* @__PURE__ */ r(H, { size: 18 }) })
+      const t = F(e), [n, i] = I[0] ? I : g, o = D(n), z = D(i);
+      return o && !z ? !1 : o && z && t > F(o) && t < F(z);
+    }, ie = (e, t, n) => {
+      const i = Qe(e);
+      return /* @__PURE__ */ h("div", { className: "w-[300px] p-2 select-none", children: [
+        /* @__PURE__ */ h("div", { className: "flex items-center justify-between mb-4 py-1", children: [
+          /* @__PURE__ */ r("div", { className: "flex gap-2 w-16", children: t && /* @__PURE__ */ h(U, { children: [
+            /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => L(-1),
+                type: "button",
+                className: a(
+                  "rounded p-1 transition-colors",
+                  l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+                ),
+                children: /* @__PURE__ */ r(Pe, { size: 18 })
+              }
+            ),
+            /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => ae(-1),
+                type: "button",
+                className: a(
+                  "rounded p-1 transition-colors",
+                  l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+                ),
+                children: /* @__PURE__ */ r(X, { size: 18 })
+              }
+            )
           ] }) }),
-          /* @__PURE__ */ d("div", { className: "flex gap-1 font-semibold text-slate-700 text-sm whitespace-nowrap", children: [
-            /* @__PURE__ */ r("span", { className: "cursor-pointer hover:text-blue-600 transition-colors p-1 rounded hover:bg-slate-50", onClick: () => C("month"), children: W.months[e.getMonth()] }),
-            /* @__PURE__ */ r("span", { className: "cursor-pointer hover:text-blue-600 transition-colors p-1 rounded hover:bg-slate-50", onClick: () => C("year"), children: e.getFullYear() })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "flex gap-2 w-16 justify-end", children: n && /* @__PURE__ */ d(G, { children: [
-            /* @__PURE__ */ r("button", { onClick: () => le(1), type: "button", className: "hover:bg-slate-100 p-1 rounded transition-colors text-slate-500", children: /* @__PURE__ */ r(J, { size: 18 }) }),
-            /* @__PURE__ */ r("button", { onClick: () => R(1), type: "button", className: "hover:bg-slate-100 p-1 rounded transition-colors text-slate-500", children: /* @__PURE__ */ r(Le, { size: 18 }) })
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: a(
+                "flex gap-1 text-sm font-semibold whitespace-nowrap",
+                l ? "text-neutral-50" : "text-slate-700"
+              ),
+              children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: a(
+                      "cursor-pointer rounded p-1 transition-colors",
+                      l ? "hover:bg-neutral-300 hover:text-white" : "hover:bg-slate-50 hover:text-blue-600"
+                    ),
+                    onClick: () => Y("month"),
+                    children: H.months[e.getMonth()]
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: a(
+                      "cursor-pointer rounded p-1 transition-colors",
+                      l ? "hover:bg-neutral-300 hover:text-white" : "hover:bg-slate-50 hover:text-blue-600"
+                    ),
+                    onClick: () => Y("year"),
+                    children: e.getFullYear()
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex gap-2 w-16 justify-end", children: n && /* @__PURE__ */ h(U, { children: [
+            /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => ae(1),
+                type: "button",
+                className: a(
+                  "rounded p-1 transition-colors",
+                  l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+                ),
+                children: /* @__PURE__ */ r(Z, { size: 18 })
+              }
+            ),
+            /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => L(1),
+                type: "button",
+                className: a(
+                  "rounded p-1 transition-colors",
+                  l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+                ),
+                children: /* @__PURE__ */ r(Be, { size: 18 })
+              }
+            )
           ] }) })
         ] }),
-        /* @__PURE__ */ r("div", { className: "grid grid-cols-7 mb-1 text-center text-[11px] font-bold text-blue-600 uppercase", children: W.weekdaysShort.map((o) => /* @__PURE__ */ r("div", { className: "py-1", children: o }, o)) }),
-        /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-y-1 relative", children: l.map((o, y) => {
-          const p = o.date, ce = F(p), E = ze(p), L = Fe(p), Re = Ye(p);
-          return /* @__PURE__ */ r("div", { className: M("h-10 flex items-center justify-center relative", Re && "bg-blue-50", E && s === "range" && L ? "bg-blue-50 rounded-full" : E && s === "range" ? "bg-gradient-to-r from-transparent to-blue-50 rounded-l-full" : "", L && s === "range" ? "bg-gradient-to-l from-transparent to-blue-50 rounded-r-full" : ""), children: /* @__PURE__ */ r("button", { type: "button", onClick: () => Me(p), disabled: ce, className: M("w-9 h-9 cursor-pointer rounded-full flex items-center justify-center text-sm font-medium transition-all z-10", o.isCurrentMonth ? "text-slate-700" : "text-slate-300", ce && "opacity-20 cursor-not-allowed", E || L ? "bg-blue-600 text-white shadow-md shadow-blue-200 hover:bg-blue-700" : "hover:bg-blue-50", j(p, /* @__PURE__ */ new Date()) && !E && !L && "text-blue-600 border border-blue-600"), children: p.getDate() }) }, y);
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: a(
+              "mb-1 grid grid-cols-7 text-center text-[11px] font-bold uppercase",
+              l ? "text-blue-500" : "text-blue-600"
+            ),
+            children: H.weekdaysShort.map((o) => /* @__PURE__ */ r("div", { className: "py-1", children: o }, o))
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-y-1 relative", children: i.map((o, z) => {
+          const v = o.date, ue = S(v), P = Ae(v), B = Se(v), Le = Re(v);
+          return /* @__PURE__ */ r(
+            "div",
+            {
+              className: a(
+                "relative flex h-10 items-center justify-center",
+                Le && (l ? "bg-blue-500/15" : "bg-blue-50"),
+                P && s === "range" && B ? l ? "rounded-full bg-blue-500" : "rounded-full bg-blue-50" : P && s === "range" ? l ? "rounded-l-full bg-gradient-to-r from-transparent to-blue-500/15" : "rounded-l-full bg-gradient-to-r from-transparent to-blue-50" : "",
+                B && s === "range" ? l ? "rounded-r-full bg-gradient-to-l from-transparent to-blue-500/15" : "rounded-r-full bg-gradient-to-l from-transparent to-blue-50" : ""
+              ),
+              children: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => ze(v),
+                  disabled: ue,
+                  className: a(
+                    "z-10 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-sm font-medium transition-all",
+                    o.isCurrentMonth ? l ? "text-neutral-50" : "text-slate-700" : l ? "text-neutral-100/40" : "text-slate-300",
+                    ue && "cursor-not-allowed opacity-20",
+                    P || B ? "bg-blue-600 text-white shadow-md shadow-blue-200 hover:bg-blue-700" : l ? "hover:bg-neutral-300 hover:text-white" : "hover:bg-blue-50",
+                    O(v, /* @__PURE__ */ new Date()) && !P && !B && (l ? "border border-blue-500 text-blue-500" : "border border-blue-600 text-blue-600")
+                  ),
+                  children: v.getDate()
+                }
+              )
+            },
+            z
+          );
         }) })
       ] });
-    }, Ae = () => /* @__PURE__ */ d("div", { className: "w-[300px] p-3", children: [
-      /* @__PURE__ */ d("div", { className: "flex justify-between items-center mb-4 px-2", children: [
-        /* @__PURE__ */ r("button", { type: "button", onClick: () => R(-1), className: "p-1 hover:bg-slate-100 rounded text-slate-500", children: /* @__PURE__ */ r(H, { size: 20 }) }),
-        /* @__PURE__ */ r("span", { className: "font-bold text-slate-800", children: u.getFullYear() }),
-        /* @__PURE__ */ r("button", { type: "button", onClick: () => R(1), className: "p-1 hover:bg-slate-100 rounded text-slate-500", children: /* @__PURE__ */ r(J, { size: 20 }) })
+    }, je = () => /* @__PURE__ */ h("div", { className: "w-[300px] p-3", children: [
+      /* @__PURE__ */ h("div", { className: "flex justify-between items-center mb-4 px-2", children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => L(-1),
+            className: a(
+              "rounded p-1",
+              l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+            ),
+            children: /* @__PURE__ */ r(X, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: a("font-bold", l ? "text-neutral-50" : "text-slate-800"), children: m.getFullYear() }),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => L(1),
+            className: a(
+              "rounded p-1",
+              l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+            ),
+            children: /* @__PURE__ */ r(Z, { size: 20 })
+          }
+        )
       ] }),
-      /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: W.monthsShort.map((e, t) => /* @__PURE__ */ r("button", { type: "button", onClick: () => Ie(t), className: M("hover:cursor-pointer py-3 rounded-lg text-sm font-semibold transition-colors", u.getMonth() === t ? "bg-blue-600 text-white" : "hover:bg-blue-50 text-slate-600"), children: e }, e)) })
-    ] }), Se = () => {
-      const e = Math.floor(u.getFullYear() / 12) * 12 + xe * 12, t = Array.from({ length: 12 }, (n, l) => e + l);
-      return /* @__PURE__ */ d("div", { className: "w-[300px] p-3", children: [
-        /* @__PURE__ */ d("div", { className: "flex justify-between items-center mb-4 px-2", children: [
-          /* @__PURE__ */ r("button", { type: "button", onClick: () => K((n) => n - 1), className: "p-1 hover:bg-slate-100 rounded text-slate-500", children: /* @__PURE__ */ r(H, { size: 20 }) }),
-          /* @__PURE__ */ d("span", { className: "font-bold text-slate-800", children: [
+      /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: H.monthsShort.map((e, t) => /* @__PURE__ */ r("button", { type: "button", onClick: () => Fe(t), className: a("py-3 rounded-lg text-sm font-semibold transition-colors hover:cursor-pointer", m.getMonth() === t ? "bg-blue-600 text-white" : l ? "text-neutral-50 hover:bg-neutral-300 hover:text-white" : "text-slate-600 hover:bg-blue-50"), children: e }, e)) })
+    ] }), Ee = () => {
+      const e = Math.floor(m.getFullYear() / 12) * 12 + we * 12, t = Array.from({ length: 12 }, (n, i) => e + i);
+      return /* @__PURE__ */ h("div", { className: "w-[300px] p-3", children: [
+        /* @__PURE__ */ h("div", { className: "flex justify-between items-center mb-4 px-2", children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: () => _((n) => n - 1),
+              className: a(
+                "rounded p-1",
+                l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+              ),
+              children: /* @__PURE__ */ r(X, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ h("span", { className: a("font-bold", l ? "text-neutral-50" : "text-slate-800"), children: [
             t[0],
             " - ",
             t[11]
           ] }),
-          /* @__PURE__ */ r("button", { type: "button", onClick: () => K((n) => n + 1), className: "p-1 hover:bg-slate-100 rounded text-slate-500", children: /* @__PURE__ */ r(J, { size: 20 }) })
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: () => _((n) => n + 1),
+              className: a(
+                "rounded p-1",
+                l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
+              ),
+              children: /* @__PURE__ */ r(Z, { size: 20 })
+            }
+          )
         ] }),
-        /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: t.map((n) => /* @__PURE__ */ r("button", { type: "button", onClick: () => Ce(n), className: M("hover:cursor-pointer py-3 rounded-lg text-sm font-semibold transition-colors", u.getFullYear() === n ? "bg-blue-600 text-white" : "hover:bg-blue-50 text-slate-600"), children: n }, n)) })
+        /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: t.map((n) => /* @__PURE__ */ r("button", { type: "button", onClick: () => Ye(n), className: a("py-3 rounded-lg text-sm font-semibold transition-colors hover:cursor-pointer", m.getFullYear() === n ? "bg-blue-600 text-white" : l ? "text-neutral-50 hover:bg-neutral-300 hover:text-white" : "text-slate-600 hover:bg-blue-50"), children: n }, n)) })
       ] });
-    }, ie = /* @__PURE__ */ r(
+    }, ce = /* @__PURE__ */ r(
       "div",
       {
-        onClick: we,
-        className: M(
-          "cursor-pointer flex items-center justify-center p-1 rounded-md transition-colors",
-          z ? "pointer-events-none opacity-50" : "hover:bg-slate-100 active:bg-slate-200"
+        onClick: Ne,
+        className: a(
+          "flex cursor-pointer items-center justify-center rounded-md p-1 transition-colors",
+          A ? "pointer-events-none opacity-50" : l ? "hover:bg-neutral-300 active:bg-neutral-200" : "hover:bg-slate-100 active:bg-slate-200"
         ),
-        children: /* @__PURE__ */ r(je, { weight: "Linear", size: 20, className: "text-slate-400" })
+        children: /* @__PURE__ */ r(
+          Oe,
+          {
+            weight: "Linear",
+            size: 20,
+            className: a(
+              l ? f || q ? "text-white" : "text-neutral-100" : "text-slate-400"
+            )
+          }
+        )
       }
     );
-    return /* @__PURE__ */ d("div", { ref: S, className: M("relative w-full group", he), children: [
+    return /* @__PURE__ */ h("div", { ref: E, className: a("relative w-full group", be), children: [
       /* @__PURE__ */ r("div", { ref: ve, children: /* @__PURE__ */ r(
-        Ke,
+        _e,
         {
           label: fe,
-          placeholder: Array.isArray(B) ? B[0] : B,
-          value: A,
-          onChange: ke,
-          icon: ee === "left" ? ie : void 0,
-          rightIcon: ee === "right" ? ie : void 0,
-          disabled: z,
+          placeholder: Array.isArray(K) ? K[0] : K,
+          value: j,
+          onChange: Ie,
+          icon: ne === "left" ? ce : void 0,
+          rightIcon: ne === "right" ? ce : void 0,
+          disabled: A,
           required: me,
           error: ge,
+          darkMode: l,
           maxLength: s === "date" ? 10 : void 0,
-          onFocus: Ne,
-          onBlur: De,
-          readOnly: !Z || s === "range",
-          showClearButton: be,
-          onClear: ye
+          onFocus: De,
+          onBlur: ye,
+          readOnly: !te || s === "range",
+          showClearButton: pe,
+          onClear: Ce
         }
       ) }),
-      h && /* @__PURE__ */ r(
+      f && /* @__PURE__ */ r(
         "div",
         {
-          className: M(
-            "absolute top-[calc(100%+4px)] z-[100] bg-white rounded-xl shadow-xl border border-slate-200",
-            "flex flex-col md:flex-row overflow-hidden animate-in fade-in zoom-in-95 duration-200",
-            V === "right" && "right-0 origin-top-right",
-            V === "left" && "left-0 origin-top-left",
-            V === "center" && "left-1/2 -translate-x-1/2 origin-top"
+          className: a(
+            "absolute top-[calc(100%+4px)] z-[100] rounded-xl border shadow-xl",
+            "flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200 md:flex-row",
+            l ? "border-neutral-200 bg-[#1F2025]" : "border-slate-200 bg-white",
+            G === "right" && "right-0 origin-top-right",
+            G === "left" && "left-0 origin-top-left",
+            G === "center" && "left-1/2 -translate-x-1/2 origin-top"
           ),
           style: { width: "max-content" },
           onMouseDown: (e) => e.stopPropagation(),
-          children: ne === "day" ? /* @__PURE__ */ d(G, { children: [
-            ae(u, !0, s !== "range"),
-            s === "range" && /* @__PURE__ */ r("div", { className: "hidden md:block border-l border-slate-100", children: ae(new Date(u.getFullYear(), u.getMonth() + 1, 1), !1, !0) })
-          ] }) : ne === "month" ? Ae() : Se()
+          children: le === "day" ? /* @__PURE__ */ h(U, { children: [
+            ie(m, !0, s !== "range"),
+            s === "range" && /* @__PURE__ */ r("div", { className: a(
+              "hidden border-l md:block",
+              l ? "border-neutral-200" : "border-slate-100"
+            ), children: ie(new Date(m.getFullYear(), m.getMonth() + 1, 1), !1, !0) })
+          ] }) : le === "month" ? je() : Ee()
         }
       )
     ] });
   }
 );
-Qe.displayName = "MciPicker";
+Ze.displayName = "MciPicker";
 export {
-  Qe as default
+  Ze as default
 };