@mci-ui/mci-ui 0.0.84 → 0.0.86

package/dist/shared/ui/mciInput/mci-input.utils.js

@@ -0,0 +1,49 @@
+const p = {
+  sm: {
+    input: "h-9 text-sm",
+    icon: "w-4 h-4",
+    leftIcon: "left-2",
+    rightIcon: "right-2",
+    labelFont: "text-sm",
+    iconWrapper: "h-4"
+  },
+  md: {
+    input: "h-10 text-sm",
+    icon: "w-4 h-4",
+    leftIcon: "left-2",
+    rightIcon: "right-2",
+    labelFont: "text-base",
+    iconWrapper: "h-4"
+  },
+  base: {
+    input: "h-12 text-base",
+    icon: "w-5 h-5",
+    leftIcon: "left-3",
+    rightIcon: "right-3",
+    labelFont: "text-base",
+    iconWrapper: "h-5"
+  }
+};
+function u(e, r) {
+  const t = (n) => n === "sm" ? e && r ? "pl-7 pr-7" : e ? "pl-7 pr-2" : r ? "pl-2 pr-7" : "px-2" : n === "md" ? e && r ? "pl-8 pr-8" : e ? "pl-8 pr-2" : r ? "pl-2 pr-8" : "px-4" : e && r ? "pl-9 pr-9" : e ? "pl-9 pr-3" : r ? "pl-3 pr-9" : "px-4";
+  return {
+    sm: { ...p.sm, padding: t("sm") },
+    md: { ...p.md, padding: t("md") },
+    base: { ...p.base, padding: t("base") }
+  };
+}
+function i(e) {
+  return e ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+}
+function f(e, r, t) {
+  return e ? "text-slate-400" : r ? "text-red-600" : t ? "text-black" : "text-slate-400";
+}
+function d(e, r) {
+  return r <= 0 ? "" : e === "sm" ? r >= 3 ? "pr-14" : r === 2 ? "pr-11" : "pr-7" : e === "md" ? r >= 3 ? "pr-16" : r === 2 ? "pr-12" : "pr-8" : r >= 3 ? "pr-20" : r === 2 ? "pr-16" : "pr-10";
+}
+export {
+  f as getInputIconColor,
+  d as getInputRightPaddingClass,
+  u as getInputSizes,
+  i as getInputStateStyles
+};

package/dist/shared/ui/mciLoader/MciLoader.js

@@ -0,0 +1,38 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
+import a from "../../../assets/icons/loaderIcon.svg.js";
+function d({
+  className: o,
+  size: e = 150,
+  iconClassName: t,
+  isLoading: i = !1,
+  isFullPage: n = !0,
+  variant: u = "yellow"
+}) {
+  return i ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(
+        "z-[99px] flex flex-col items-center justify-center transition-all duration-300",
+        n ? "fixed inset-0 backdrop-blur-[2px]" : "absolute inset-0 w-full h-full rounded-[inherit]",
+        o
+      ),
+      children: /* @__PURE__ */ r(
+        a,
+        {
+          width: e,
+          height: e,
+          className: l(
+            "animate-spin",
+            !t && (u === "blue" ? "text-blue-600" : "text-yellow-500"),
+            t
+          ),
+          style: { fill: "currentColor", stroke: "currentColor" }
+        }
+      )
+    }
+  ) : null;
+}
+export {
+  d as default
+};

package/dist/shared/ui/mciPagination/MciPagination.js

@@ -0,0 +1,135 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { AltArrowDown as k, AltArrowLeft as j, MenuDots as M, AltArrowRight as L } from "@solar-icons/react";
+import { useMemo as z } from "react";
+import { cn as r } from "../../lib/utils.js";
+import { createPageRange as E } from "./mci-pagination.utils.js";
+const I = {
+  medium: "h-9 text-sm",
+  large: "h-10 text-base"
+}, S = {
+  yellow: {
+    active: "bg-yellow-500 text-white border-yellow-500",
+    inactive: "bg-slate-100 border-slate-200 text-black hover:bg-slate-200",
+    disabled: "text-slate-400 border-slate-200",
+    arrow: "text-black"
+  },
+  blue: {
+    active: "bg-blue-600 text-white border-blue-600",
+    inactive: "bg-slate-100 border-slate-200 text-black hover:bg-slate-200",
+    disabled: "text-slate-400 border-slate-300",
+    arrow: "text-black"
+  }
+};
+function G({
+  totalItems: o,
+  currentPage: m,
+  perPage: c,
+  onPageChange: d,
+  onPerPageChange: u,
+  siblingCount: h = 1,
+  perPageOptions: v = [10, 30, 50, 100],
+  showPerPage: g = !0,
+  variant: N = "yellow",
+  size: f = "large",
+  paginationClassName: y
+}) {
+  const w = Number.isFinite(o) && o > 0 ? o : 0, x = Number.isFinite(c) && c > 0 ? c : 10, a = Math.max(1, Number.isFinite(m) ? m : 1), i = Math.ceil(w / x), A = z(() => E(a, h, i), [a, h, i]), s = I[f], l = S[N ?? "yellow"];
+  return i <= 1 || w === 0 ? null : /* @__PURE__ */ n("div", { className: r(
+    "flex items-center justify-between gap-4 w-full",
+    y
+  ), children: [
+    g && u && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: "whitespace-nowrap text-extra-small text-slate-base font-normal",
+          children: "Строк на странице:"
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
+          "select",
+          {
+            value: x,
+            onChange: (t) => u(Number(t.target.value)),
+            className: r(
+              "appearance-none bg-white border border-slate-200 rounded-lg pl-3 pr-8 text-base text-black font-medium focus:outline-none cursor-pointer",
+              f === "large" ? "h-10" : "h-9"
+            ),
+            "aria-label": "Количество строк на странице",
+            children: v.map((t) => /* @__PURE__ */ e("option", { value: t, children: t }, t))
+          }
+        ),
+        /* @__PURE__ */ e(
+          k,
+          {
+            className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400",
+            weight: "Linear",
+            size: 20
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n("nav", { "aria-label": "Пагинация", className: "flex items-center gap-1 shrink-0 whitespace-nowrap", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => d(a - 1),
+          disabled: a === 1,
+          "aria-label": "Предыдущая страница",
+          className: r(
+            "flex items-center justify-center rounded-lg border transition-all bg-slate-100 min-w-10",
+            s,
+            a === 1 ? r("cursor-not-allowed opacity-50", l.disabled) : r("hover:cursor-pointer", l.arrow, "border-slate-200")
+          ),
+          children: /* @__PURE__ */ e(j, { weight: "Linear", size: 20 })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: A.map((t, p) => {
+        if (t === "...")
+          return /* @__PURE__ */ e(
+            "span",
+            {
+              className: r("flex items-center justify-center text-black font-medium min-w-10", s),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(M, { weight: "Bold", size: 20 })
+            },
+            p
+          );
+        const b = t === a;
+        return /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => d(t),
+            "aria-label": `Страница ${t}${b ? ", текущая" : ""}`,
+            "aria-current": b ? "page" : void 0,
+            className: r(
+              "flex items-center justify-center rounded-lg border font-medium transition-all hover:cursor-pointer min-w-10 px-2",
+              s,
+              b ? l.active : l.inactive
+            ),
+            children: t
+          },
+          p
+        );
+      }) }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => d(a + 1),
+          disabled: a === i,
+          "aria-label": "Следующая страница",
+          className: r(
+            "flex items-center justify-center rounded-lg border transition-all bg-slate-100 min-w-10",
+            s,
+            a === i ? r("cursor-not-allowed opacity-50", l.disabled) : r("hover:cursor-pointer", l.arrow, "border-slate-200")
+          ),
+          children: /* @__PURE__ */ e(L, { size: 20, weight: "Linear" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  G as default
+};

package/dist/shared/ui/mciPagination/mci-pagination.utils.js

@@ -0,0 +1,12 @@
+function m(n, i, r) {
+  const h = [], u = i * 2 + 5;
+  if (r <= u)
+    return Array.from({ length: r }, (f, c) => c + 1);
+  const p = Math.max(n - i, 2), e = Math.min(n + i, r - 1);
+  h.push(1), p > 2 && h.push("...");
+  for (let f = p; f <= e; f += 1) h.push(f);
+  return e < r - 1 && h.push("..."), r > 1 && h.push(r), h;
+}
+export {
+  m as createPageRange
+};

package/dist/shared/ui/mciPhone/MciPhone.js

@@ -0,0 +1,83 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { forwardRef as B, useState as E, useMemo as h } from "react";
+import { cn as s } from "../../lib/utils.js";
+import { Phone as I } from "@solar-icons/react";
+import { PHONE_SIZES as L, getPhoneStateStyles as V, getPhoneIconColor as k, formatPhoneValue as z } from "./mci-phone.utils.js";
+const H = B(
+  ({
+    label: d,
+    placeholder: p = "+998 (__) ___ __ __",
+    size: r = "base",
+    error: e,
+    disabled: a = !1,
+    required: x = !1,
+    value: l = "",
+    onChange: o,
+    onFocus: g,
+    onBlur: b,
+    className: N,
+    name: P,
+    showIcon: m = !1
+  }, _) => {
+    const [i, u] = E(!1), y = (C) => {
+      const f = C.target.value;
+      if (f.length < 5) {
+        o?.("+998");
+        return;
+      }
+      const M = z(f);
+      o?.(M);
+    }, S = () => {
+      u(!0), (!l || l === "") && o?.("+998"), g?.();
+    }, w = () => {
+      u(!1), b?.();
+    }, t = L[r], F = m ? t.iconPadding : t.defaultPadding, j = h(() => V(e), [e]), v = h(
+      () => k(a, e, i),
+      [e, i, a]
+    );
+    return /* @__PURE__ */ c("div", { className: s("w-full", N), children: [
+      d && /* @__PURE__ */ c("label", { className: s(
+        "mb-2 block font-medium transition-colors duration-200",
+        e ? "text-red-600" : i ? "text-blue-600" : "text-slate-700",
+        t.labelFont
+      ), children: [
+        d,
+        x && /* @__PURE__ */ n("span", { className: "text-red-600 ml-1", children: "*" })
+      ] }),
+      /* @__PURE__ */ c("div", { className: "relative flex items-center", children: [
+        m && /* @__PURE__ */ n("div", { className: s(
+          "absolute top-1/2 flex -translate-y-1/2 items-center justify-center transition-all duration-300",
+          t.iconLeft,
+          v
+        ), children: /* @__PURE__ */ n("div", { className: s("flex items-center justify-center", t.iconWrapper), children: /* @__PURE__ */ n(I, { className: s(t.iconSize), weight: "Linear" }) }) }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: _,
+            name: P,
+            type: "tel",
+            value: l,
+            onChange: y,
+            onFocus: S,
+            onBlur: w,
+            disabled: a,
+            placeholder: p,
+            className: s(
+              "w-full border bg-white font-normal transition-all duration-300 outline-none",
+              r === "base" ? "rounded-xl" : "rounded-lg",
+              "disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed",
+              t.input,
+              F,
+              j
+            )
+          }
+        )
+      ] }),
+      e && /* @__PURE__ */ n("p", { className: "mt-2 animate-slide-up text-sm font-normal text-red-600", children: e })
+    ] });
+  }
+);
+H.displayName = "MciPhone";
+export {
+  H as default
+};

package/dist/shared/ui/mciPhone/mci-phone.utils.js

@@ -0,0 +1,47 @@
+const r = {
+  sm: {
+    input: "h-9 text-sm",
+    iconPadding: "pl-8 pr-2",
+    defaultPadding: "px-2",
+    iconSize: "w-4 h-4",
+    iconLeft: "left-2",
+    labelFont: "text-sm",
+    iconWrapper: "h-4"
+  },
+  md: {
+    input: "h-10 text-sm",
+    iconPadding: "pl-10 pr-4",
+    defaultPadding: "px-4",
+    iconSize: "w-4 h-4",
+    iconLeft: "left-3",
+    labelFont: "text-base",
+    iconWrapper: "h-4"
+  },
+  base: {
+    input: "h-12 text-base",
+    iconPadding: "pl-11 pr-4",
+    defaultPadding: "px-4",
+    iconSize: "w-5 h-5",
+    iconLeft: "left-3",
+    labelFont: "text-base",
+    iconWrapper: "h-5"
+  }
+};
+function i(n) {
+  let e = n.replace(/\D/g, "");
+  e.startsWith("998") || (e = `998${e}`), e = e.substring(0, 12);
+  let t = "+998";
+  return e.length > 3 && (t += ` (${e.substring(3, 5)}`), e.length > 5 && (t += `) ${e.substring(5, 8)}`), e.length > 8 && (t += ` ${e.substring(8, 10)}`), e.length > 10 && (t += ` ${e.substring(10, 12)}`), t;
+}
+function o(n) {
+  return n ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+}
+function l(n, e, t) {
+  return n ? "text-slate-400" : e ? "text-red-600" : t ? "text-black" : "text-slate-400";
+}
+export {
+  r as PHONE_SIZES,
+  i as formatPhoneValue,
+  l as getPhoneIconColor,
+  o as getPhoneStateStyles
+};

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

@@ -0,0 +1,256 @@
+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";
+/* 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(
+  ({
+    type: s = "date",
+    value: P,
+    onChange: i,
+    placeholder: B,
+    label: fe,
+    disabled: z = !1,
+    required: me = !1,
+    className: he,
+    format: Q = "DD.MM.YYYY",
+    minDate: U,
+    maxDate: X,
+    error: ge,
+    showClear: be = !0,
+    allowManualInput: Z = !0,
+    locale: pe = "uz",
+    startView: N = "day",
+    iconPosition: ee = "left",
+    align: $ = "auto"
+  }, ve) => {
+    const [h, T] = v(!1), [te, g] = v(
+      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);
+      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)
+        if (s === "range") {
+          const e = m;
+          Y(e), e[0] ? f(e[0]) : e[1] ? f(e[1]) : f(/* @__PURE__ */ new Date());
+        } else {
+          const e = m;
+          f(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;
+        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);
+        };
+    }, [h, _, q]);
+    const Ne = () => {
+      se(!0), !(z || h) && (s === "range" || !Z) && (T(!0), C(N));
+    }, De = () => {
+      if (se(!1), s !== "date") return;
+      const e = A.trim();
+      if (!e) {
+        g(null), i?.(null);
+        return;
+      }
+      const t = ue(e);
+      if (t && !F(t)) {
+        const n = I(t);
+        g(n), i?.(n), c(a(n)), f(n);
+        return;
+      }
+      c(k);
+    }, ke = (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);
+          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 (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));
+        }
+      }
+    }, ye = x(() => {
+      const e = s === "range" ? [null, null] : null;
+      g(e), Y([null, null]), i?.(e), c("");
+    }, [s, i]), Me = x(
+      (e) => {
+        if (F(e)) return;
+        const t = I(e);
+        if (s === "date")
+          g(t), i?.(t), c(a(t)), b();
+        else {
+          const [n, l] = D;
+          if (!n && !l || n && l)
+            Y([t, null]), c(`${a(t)} - ...`);
+          else if (n && !l) {
+            const o = t < n ? [t, n] : [n, t];
+            Y(o), g(o), i?.(o);
+            const [y, p] = o;
+            c(`${a(y)} - ${a(p)}`), b();
+          }
+        }
+      },
+      [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) => {
+      if (s !== "range") return !1;
+      const t = I(e), [, n] = D[1] ? D : m;
+      return w(n) && j(t, w(n));
+    }, Ye = (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 }) })
+          ] }) }),
+          /* @__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__ */ 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);
+        }) })
+      ] });
+    }, 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 }) })
+      ] }),
+      /* @__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: [
+            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("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)) })
+      ] });
+    }, ie = /* @__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"
+        ),
+        children: /* @__PURE__ */ r(je, { weight: "Linear", size: 20, className: "text-slate-400" })
+      }
+    );
+    return /* @__PURE__ */ d("div", { ref: S, className: M("relative w-full group", he), children: [
+      /* @__PURE__ */ r("div", { ref: ve, children: /* @__PURE__ */ r(
+        Ke,
+        {
+          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,
+          required: me,
+          error: ge,
+          maxLength: s === "date" ? 10 : void 0,
+          onFocus: Ne,
+          onBlur: De,
+          readOnly: !Z || s === "range",
+          showClearButton: be,
+          onClear: ye
+        }
+      ) }),
+      h && /* @__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"
+          ),
+          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()
+        }
+      )
+    ] });
+  }
+);
+Qe.displayName = "MciPicker";
+export {
+  Qe as default
+};