@mci-ui/mci-ui 0.0.84 → 0.0.86

package/dist/shared/ui/mciPicker/mci-picker.utils.js

@@ -0,0 +1,62 @@
+function s(e) {
+  if (!e) return null;
+  const t = new Date(e);
+  return Number.isNaN(t.getTime()) ? null : t;
+}
+function l(e) {
+  return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function c(e, t) {
+  if (!e) return "";
+  const n = e.getDate().toString().padStart(2, "0"), r = (e.getMonth() + 1).toString().padStart(2, "0"), i = e.getFullYear().toString();
+  return t.replace("DD", n).replace("MM", r).replace("YYYY", i);
+}
+function g(e) {
+  if (!e || e.length !== 10) return null;
+  const t = e.replace(/\D/g, "");
+  if (t.length !== 8) return null;
+  const n = parseInt(t.slice(0, 2), 10), r = parseInt(t.slice(2, 4), 10), i = parseInt(t.slice(4, 8), 10);
+  if (i < 1e3 || r < 1 || r > 12 || n < 1 || n > 31) return null;
+  const u = new Date(i, r - 1, n);
+  return u.getFullYear() !== i || u.getMonth() !== r - 1 || u.getDate() !== n ? null : u;
+}
+function f(e) {
+  let t = e.replace(/\D/g, "");
+  return t.length > 8 && (t = t.slice(0, 8)), t.length > 4 ? `${t.slice(0, 2)}.${t.slice(2, 4)}.${t.slice(4)}` : t.length > 2 ? `${t.slice(0, 2)}.${t.slice(2)}` : t;
+}
+function D(e, t, n) {
+  const r = l(e);
+  return !!(t && r < l(t) || n && r > l(n));
+}
+function h(e, t) {
+  return new Date(e.getFullYear(), e.getMonth() + t, 1);
+}
+function p(e, t) {
+  return new Date(e.getFullYear() + t, e.getMonth(), 1);
+}
+function M(e) {
+  const t = e.getFullYear(), n = e.getMonth(), r = new Date(t, n, 1).getDay(), i = new Date(t, n + 1, 0).getDate(), u = [];
+  for (let a = r; a > 0; a -= 1)
+    u.push({ date: new Date(t, n, 1 - a), isCurrentMonth: !1 });
+  for (let a = 1; a <= i; a += 1)
+    u.push({ date: new Date(t, n, a), isCurrentMonth: !0 });
+  const o = 42 - u.length;
+  for (let a = 1; a <= o; a += 1)
+    u.push({ date: new Date(t, n + 1, a), isCurrentMonth: !1 });
+  return u;
+}
+function m(e, t) {
+  return l(e).getTime() === l(t).getTime();
+}
+export {
+  c as formatDateByPattern,
+  f as formatManualDateInput,
+  M as getCalendarDays,
+  D as isDateOutsideBounds,
+  m as isSameCalendarDay,
+  l as normalizeDate,
+  g as parseDateFromInput,
+  h as shiftMonth,
+  p as shiftYear,
+  s as toSafeDate
+};

package/dist/shared/ui/mciSelect/MciSelect.js

@@ -0,0 +1,226 @@
+import { jsxs as C, jsx as l } from "react/jsx-runtime";
+import { AltArrowDown as ae } from "@solar-icons/react";
+import oe from "../../../assets/icons/close.svg.js";
+import { forwardRef as se, useState as g, useRef as q, useMemo as E, useCallback as d, useEffect as B } from "react";
+import { useClickOutside as ce, useEscapeKey as ie, cn as o } from "../../lib/utils.js";
+import { getFilteredOptions as ue, getSelectStateStyles as de, getSelectIconColor as fe, SELECT_SIZES as me } from "./mci-select.utils.js";
+const pe = se(
+  ({
+    label: _,
+    placeholder: D = "Выберите...",
+    options: I = [],
+    icon: x,
+    iconPosition: O = "left",
+    size: r = "base",
+    error: s,
+    disabled: t = !1,
+    required: G = !1,
+    value: u,
+    onChange: v,
+    onFocus: j,
+    onBlur: w,
+    className: J,
+    clearable: Q = !1,
+    searchable: f = !1,
+    onSearch: b,
+    name: A
+  }, X) => {
+    const [n, k] = g(!1), [L, R] = g(!1), [Y, P] = g(""), [T, m] = g(""), [y, c] = g(-1), U = q(null), F = q(null), p = u !== void 0 ? u : Y, W = I.find((e) => e.value === p), $ = p !== "" && p !== void 0, N = Q && $ && !t, S = !!(x && O === "right"), a = me[r], z = E(() => S && N ? r === "sm" || r === "md" ? "pr-16" : "pr-20" : S || N ? r === "sm" ? "pr-11" : r === "md" ? "pr-12" : "pr-14" : r === "sm" ? "pr-8" : r === "md" ? "pr-9" : "pr-10", [S, N, r]), i = E(() => ue(I, T, f, !!b), [I, T, f, b]), H = d(() => {
+      k(!1), R(!1), m(""), c(-1), w?.();
+    }, [w]), { handleClick: K } = ce(U, H), { handleEscape: M } = ie(H);
+    B(() => {
+      if (n)
+        return document.addEventListener("mousedown", K), document.addEventListener("keydown", M), () => {
+          document.removeEventListener("mousedown", K), document.removeEventListener("keydown", M);
+        };
+    }, [n, K, M]), B(() => {
+      n && f && F.current && F.current.focus();
+    }, [n, f]);
+    const ee = d(() => {
+      t || (k((e) => !e), n ? (m(""), c(-1)) : (R(!0), j?.()));
+    }, [t, n, j]), V = d(
+      (e) => {
+        u === void 0 && P(e), v?.(e), k(!1), R(!1), m(""), c(-1), w?.();
+      },
+      [u, v, w]
+    ), te = d(
+      (e) => {
+        if (!t) {
+          if (!n && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter")) {
+            e.preventDefault(), k(!0);
+            return;
+          }
+          if (n)
+            switch (e.key) {
+              case "ArrowDown":
+                e.preventDefault(), c(
+                  (h) => h < i.length - 1 ? h + 1 : 0
+                );
+                break;
+              case "ArrowUp":
+                e.preventDefault(), c(
+                  (h) => h > 0 ? h - 1 : i.length - 1
+                );
+                break;
+              case "Enter":
+                e.preventDefault(), y >= 0 && i[y] && V(i[y].value);
+                break;
+            }
+        }
+      },
+      [n, i, y, t, V]
+    ), ne = d(
+      (e) => {
+        e.stopPropagation(), !t && (u === void 0 && P(""), v?.(""), m(""), c(-1));
+      },
+      [u, v, t]
+    ), re = d(
+      (e) => {
+        m(e), b?.(e), c(0);
+      },
+      [b]
+    ), le = E(() => de(t, s), [s, t]), Z = E(
+      () => fe(t, s, n, L),
+      [t, s, n, L]
+    );
+    return /* @__PURE__ */ C("div", { className: o("w-full", J), ref: X, children: [
+      _ && /* @__PURE__ */ C(
+        "label",
+        {
+          htmlFor: A,
+          className: o(
+            "mb-2 block text-base font-medium",
+            s ? "text-red-600" : "text-slate-700",
+            a.label
+          ),
+          children: [
+            _,
+            G && /* @__PURE__ */ l("span", { className: "ml-1 text-red-600", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ C(
+        "div",
+        {
+          ref: U,
+          className: "relative",
+          onKeyDown: te,
+          children: [
+            /* @__PURE__ */ C(
+              "div",
+              {
+                role: "combobox",
+                "aria-expanded": n,
+                "aria-haspopup": "listbox",
+                "aria-controls": `${A}-listbox`,
+                "aria-disabled": t,
+                tabIndex: t ? -1 : 0,
+                onClick: ee,
+                className: o(
+                  "flex w-full items-center border font-normal transition-all duration-300 ease-in-out",
+                  r === "base" ? "rounded-xl" : "rounded-lg",
+                  a.container,
+                  x && O === "left" ? a.iconPaddingLeft : a.padding,
+                  z,
+                  le,
+                  !t && L && "shadow-blue border-blue-600"
+                ),
+                children: [
+                  x && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: o(
+                        "absolute top-1/2 -translate-y-1/2 pointer-events-none transition-colors duration-300",
+                        O === "left" ? a.iconWrapper : a.rightIconWrapper,
+                        Z
+                      ),
+                      children: x
+                    }
+                  ),
+                  f && n ? /* @__PURE__ */ l(
+                    "input",
+                    {
+                      ref: F,
+                      type: "text",
+                      value: T,
+                      onChange: (e) => re(e.target.value),
+                      placeholder: D,
+                      className: "w-full min-w-0 flex-1 bg-transparent outline-none",
+                      onClick: (e) => e.stopPropagation()
+                    }
+                  ) : /* @__PURE__ */ l(
+                    "span",
+                    {
+                      title: W?.label || D,
+                      className: o(
+                        "block min-w-0 flex-1 truncate select-none",
+                        !$ && !t && "text-slate-400"
+                      ),
+                      children: W?.label || D
+                    }
+                  ),
+                  N && /* @__PURE__ */ l(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: ne,
+                      className: o(
+                        "absolute top-1/2 -translate-y-1/2 text-slate-400 hover:text-black transition-colors cursor-pointer",
+                        S ? r === "sm" ? "right-8" : r === "md" ? "right-9" : "right-10" : r === "sm" ? "right-7" : r === "md" ? "right-8" : "right-9"
+                      ),
+                      "aria-label": "Очистить",
+                      children: /* @__PURE__ */ l(oe, { className: a.iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: o(
+                        "absolute top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300",
+                        r === "sm" ? "right-2" : "right-3",
+                        n && "rotate-180",
+                        Z
+                      ),
+                      children: /* @__PURE__ */ l(ae, { className: a.iconSize })
+                    }
+                  )
+                ]
+              }
+            ),
+            n && !t && /* @__PURE__ */ l(
+              "div",
+              {
+                id: `${A}-listbox`,
+                role: "listbox",
+                className: o(
+                  "absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-md p-1 text-black",
+                  a.dropdown
+                ),
+                children: i.length === 0 ? /* @__PURE__ */ l("div", { className: "px-3 py-2 text-center text-base font-normal text-slate-500", children: "Ничего не найдено" }) : i.map((e) => /* @__PURE__ */ l(
+                  "div",
+                  {
+                    role: "option",
+                    "aria-selected": p === e.value,
+                    onClick: () => V(e.value),
+                    title: e.label,
+                    className: o(
+                      "cursor-pointer truncate px-3 py-2 font-normal transition-colors hover:bg-slate-100 rounded-sm",
+                      p === e.value ? "bg-slate-100" : ""
+                    ),
+                    children: e.label
+                  },
+                  e.value
+                ))
+              }
+            )
+          ]
+        }
+      ),
+      s && /* @__PURE__ */ l("p", { className: "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal text-red-600", children: s })
+    ] });
+  }
+);
+pe.displayName = "MciSelect";
+export {
+  pe as default
+};

package/dist/shared/ui/mciSelect/mci-select.utils.js

@@ -0,0 +1,52 @@
+const a = {
+  sm: {
+    container: "h-9 text-sm",
+    padding: "px-2",
+    iconPaddingLeft: "pl-7",
+    iconPaddingRight: "pr-7",
+    iconSize: "w-4 h-4",
+    iconWrapper: "left-2",
+    rightIconWrapper: "right-2",
+    label: "text-sm",
+    dropdown: "text-sm"
+  },
+  md: {
+    container: "h-10 text-sm",
+    padding: "px-4",
+    iconPaddingLeft: "pl-8",
+    iconPaddingRight: "pr-8",
+    iconSize: "w-5 h-5",
+    iconWrapper: "left-3",
+    rightIconWrapper: "right-3",
+    label: "text-sm",
+    dropdown: "text-sm"
+  },
+  base: {
+    container: "h-12 text-base",
+    padding: "px-4",
+    iconPaddingLeft: "pl-10",
+    iconPaddingRight: "pr-10",
+    iconSize: "w-5 h-5",
+    iconWrapper: "left-4",
+    rightIconWrapper: "right-16",
+    label: "text-base",
+    dropdown: "text-base"
+  }
+};
+function d(e, t, r, n) {
+  if (!r || n) return e;
+  const i = t.toLowerCase();
+  return e.filter((o) => o.label.toLowerCase().includes(i));
+}
+function l(e, t) {
+  return e ? "border-slate-200 bg-slate-100 text-slate-400 cursor-not-allowed" : t ? "border-red-600 focus:border-red-600 shadow-red bg-white" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600 bg-white";
+}
+function c(e, t, r, n) {
+  return e ? "text-slate-400" : t ? "text-red-600" : r || n ? "text-black" : "text-slate-400";
+}
+export {
+  a as SELECT_SIZES,
+  d as getFilteredOptions,
+  c as getSelectIconColor,
+  l as getSelectStateStyles
+};

package/dist/shared/ui/mciSkeleton/MciSkeleton.js

@@ -0,0 +1,29 @@
+import { jsx as d } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+function t({
+  className: l,
+  variant: o = "default",
+  width: e = "100%",
+  height: r = "1rem"
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: m(
+        "relative overflow-hidden bg-slate-200",
+        "rounded-lg",
+        o === "circle" && "rounded-full",
+        o === "rounded" && "rounded-md",
+        l
+      ),
+      style: {
+        width: typeof e == "number" ? `${e}px` : e,
+        height: typeof r == "number" ? `${r}px` : r
+      },
+      children: /* @__PURE__ */ d("div", { className: "shimmer-mask absolute inset-0" })
+    }
+  );
+}
+export {
+  t as default
+};

package/dist/shared/ui/mciTable/MciTable.js

@@ -0,0 +1,153 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { ConfoundedSquare as E, SortVertical as G, SortFromTopToBottom as I, SortFromBottomToTop as W } from "@solar-icons/react";
+import { useState as _, useMemo as k, useEffect as H, useCallback as J } from "react";
+import { cn as h } from "../../lib/utils.js";
+/* empty css                 */
+import T from "../mciCheck/MciCheck.js";
+import z from "../mciSkeleton/MciSkeleton.js";
+import K from "./MciTableClamp2.js";
+import { sortRows as O, normalizeColWidth as Q } from "./mci-table.utils.js";
+function le({
+  columns: m,
+  data: y = [],
+  loading: b = !1,
+  skeletonRows: A = 5,
+  noDataText: M = "",
+  sort: a,
+  onSortChange: v,
+  className: B,
+  headerClassName: N,
+  bodyClassName: w,
+  rowKey: f = "id",
+  rowSelection: l
+}) {
+  const [D, C] = _(null), n = a ?? D, u = k(() => Array.isArray(y) ? y : [], [y]), R = k(() => O(u, n, !!a), [u, n, a]);
+  H(() => {
+    a !== void 0 && C(null);
+  }, [a]);
+  const o = k(
+    () => b ? [] : a ? u : R,
+    [b, a, u, R]
+  ), L = J(
+    (e) => {
+      if (!e.sortable) return;
+      let s = null;
+      n?.key !== e.key ? s = { key: e.key, direction: "asc" } : n.direction === "asc" && (s = { key: e.key, direction: "desc" }), a !== void 0 ? v?.(s) : C(s);
+    },
+    [n, a, v]
+  ), P = (e) => {
+    if (!l) return;
+    const { onChange: s, getCheckboxProps: c } = l;
+    if (e.target.checked) {
+      const i = o.filter((d) => !c?.(d)?.disabled).map((d) => d[f]);
+      s(i);
+    } else
+      s([]);
+  }, F = (e, s) => {
+    if (!l) return;
+    const { selectedRowKeys: c, onChange: g } = l, p = e[f], i = s ? [...c, p] : c.filter((d) => d !== p);
+    g(i);
+  }, V = k(() => {
+    if (!l || o.length === 0) return !1;
+    const e = o.filter((s) => !l.getCheckboxProps?.(s)?.disabled);
+    return e.length === 0 ? !1 : e.every(
+      (s) => l.selectedRowKeys.includes(s[f])
+    );
+  }, [l, o, f]), q = (e) => e.sortable ? !n || n.key !== e.key ? /* @__PURE__ */ t(G, { weight: "Linear", size: 20, className: "text-slate-base shrink-0" }) : n.direction === "asc" ? /* @__PURE__ */ t(I, { weight: "Linear", size: 20, className: "text-slate-base shrink-0" }) : /* @__PURE__ */ t(W, { weight: "Linear", size: 20, className: "text-slate-base shrink-0" }) : null, j = () => /* @__PURE__ */ r("colgroup", { children: [
+    l && /* @__PURE__ */ t("col", { style: { width: 48 } }),
+    m.map((e) => /* @__PURE__ */ t("col", { style: { width: Q(e.width) ?? "auto" } }, e.key))
+  ] });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: h(
+        "w-full overflow-x-auto pb-0.5",
+        "[&::-webkit-scrollbar]:h-1",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:bg-slate-200",
+        "[&::-webkit-scrollbar-thumb]:rounded-full",
+        "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300",
+        B
+      ),
+      children: /* @__PURE__ */ r("div", { className: "inline-block min-w-full align-middle", children: [
+        /* @__PURE__ */ t("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-slate-100", children: /* @__PURE__ */ r("table", { className: "w-full table-fixed", children: [
+          j(),
+          /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("tr", { children: [
+            l && /* @__PURE__ */ t("th", { className: h("w-12 px-4 py-3", N), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ t(
+              T,
+              {
+                checked: V,
+                onChange: P,
+                variant: "yellow",
+                disabled: b || o.length === 0
+              }
+            ) }) }),
+            m.map((e) => /* @__PURE__ */ t(
+              "th",
+              {
+                onClick: () => L(e),
+                className: h(
+                  "px-4 py-3 text-left text-sm font-medium text-slate-700 transition-colors",
+                  "whitespace-nowrap overflow-hidden text-ellipsis",
+                  e.align === "center" && "text-center",
+                  e.align === "right" && "text-right",
+                  e.sortable && "cursor-pointer hover:bg-slate-200",
+                  N
+                ),
+                children: /* @__PURE__ */ r("div", { className: h("flex items-center gap-2 min-w-0", e.align === "right" && "justify-end"), children: [
+                  /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", title: e.title, children: e.title }),
+                  q(e)
+                ] })
+              },
+              e.key
+            ))
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ t("div", { className: "rounded-xl border border-t-0 border-slate-200 bg-white overflow-hidden", children: /* @__PURE__ */ r("table", { className: "w-full table-fixed", children: [
+          j(),
+          /* @__PURE__ */ t("tbody", { className: "divide-y divide-slate-200", children: b ? Array.from({ length: A }).map((e, s) => /* @__PURE__ */ r("tr", { children: [
+            l && /* @__PURE__ */ t("td", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ t(z, { height: 20, width: 20, variant: "rounded" }) }),
+            m.map((c) => /* @__PURE__ */ t("td", { className: "px-4 py-3", children: /* @__PURE__ */ t(z, { height: 30, variant: "rounded" }) }, c.key))
+          ] }, s)) : o.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: m.length + (l ? 1 : 0), className: "py-20", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ t("div", { className: "relative mb-4", children: /* @__PURE__ */ t(E, { weight: "Bold", size: 64, className: "animate-float text-slate-400" }) }),
+            /* @__PURE__ */ t("p", { className: "text-sm font-medium text-slate-400", children: M })
+          ] }) }) }) : o.map((e, s) => {
+            const c = e[f], g = l?.selectedRowKeys.includes(c), p = l?.getCheckboxProps?.(e)?.disabled;
+            return /* @__PURE__ */ r("tr", { className: "group transition-colors hover:bg-slate-50", children: [
+              l && /* @__PURE__ */ t("td", { className: h("w-12 px-4 py-3 align-top", w), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center pt-1", children: /* @__PURE__ */ t(
+                T,
+                {
+                  checked: g,
+                  disabled: p,
+                  variant: "yellow",
+                  onChange: (i) => F(e, i.target.checked)
+                }
+              ) }) }),
+              m.map((i) => {
+                const d = e[i.key], x = i.render ? i.render(d, e) : String(d ?? "-");
+                return /* @__PURE__ */ t(
+                  "td",
+                  {
+                    className: h(
+                      "align-top px-4 py-3 text-sm font-normal text-black",
+                      "min-w-0 whitespace-normal",
+                      i.align === "center" && "text-center",
+                      i.align === "right" && "text-right",
+                      w,
+                      i.className
+                    ),
+                    children: /* @__PURE__ */ t(K, { title: typeof x == "string" ? x : void 0, children: x })
+                  },
+                  i.key
+                );
+              })
+            ] }, s);
+          }) })
+        ] }) })
+      ] })
+    }
+  );
+}
+export {
+  le as default
+};

package/dist/shared/ui/mciTable/MciTableClamp2.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+function l({ children: t, title: a }) {
+  return /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("div", { className: "clamp-2 break-words", title: a ?? (typeof t == "string" ? t : void 0), children: t }) });
+}
+export {
+  l as default
+};