@mci-ui/mci-ui 0.0.83 → 0.0.85

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
+};

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

@@ -0,0 +1,184 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useRef as G, useEffect as Y, useMemo as z, useState as f, useCallback as g } from "react";
+import { TransferVertical as q } from "@solar-icons/react";
+import { useClickOutside as H, cn as b } from "../../lib/utils.js";
+/* empty css                 */
+import J from "../mciCheck/MciCheck.js";
+function Z({
+  open: m,
+  onClose: w,
+  columns: s,
+  hidden: A,
+  onToggle: N,
+  onMove: y,
+  onMoveByKey: h,
+  minVisible: C = 5
+}) {
+  const T = G(null), { handleClick: p } = H(T, w);
+  Y(() => {
+    if (m)
+      return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
+  }, [m, p]);
+  const x = z(() => new Set(A), [A]), I = z(() => {
+    let e = 0;
+    for (const t of s) x.has(t.key) || e++;
+    return e;
+  }, [s, x]), [v, S] = f(null), [O, k] = f(null), [F, E] = f(null), [u, D] = f("before"), L = g(
+    (e, t, r) => {
+      let a = r === "after" ? t + 1 : t;
+      return e < a && (a -= 1), a;
+    },
+    []
+  ), d = g(() => {
+    S(null), E(null), k(null), D("before");
+  }, []), R = g(
+    (e, t, r) => {
+      S(t), E(String(r)), k(null), D("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
+      const a = new Image();
+      a.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", e.dataTransfer.setDragImage(a, 0, 0);
+    },
+    []
+  ), Q = g(
+    (e, t) => {
+      e.preventDefault();
+      const r = v ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
+      if (!Number.isFinite(r) || r < 0) {
+        d();
+        return;
+      }
+      const a = s[r], c = s[t];
+      if (!a || !c) {
+        d();
+        return;
+      }
+      const l = L(r, t, u);
+      l !== r && (h ? h(a.key, c.key, u) : y(r, l)), d();
+    },
+    [s, L, v, u, y, h, d]
+  ), B = g(
+    (e, t) => {
+      t || N(e);
+    },
+    [N]
+  );
+  return m ? /* @__PURE__ */ i(
+    "div",
+    {
+      ref: T,
+      className: b(
+        "absolute right-0 top-full z-50 mt-2 w-[320px]",
+        "rounded-2xl p-4 bg-white",
+        "border border-slate-200"
+      ),
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ n("h4", { className: "text-slate-600 text-large font-normal", children: "Settings" }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: w,
+              className: "rounded-lg px-2 py-1 text-slate-500 hover:bg-slate-100",
+              "aria-label": "Close",
+              children: "✕"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: "my-4 h-px bg-slate-100" }),
+        /* @__PURE__ */ i("p", { className: "mb-3 text-xs text-slate-500", children: [
+          "Active columns: ",
+          I,
+          "/",
+          s.length
+        ] }),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: b(
+              "max-h-[275px] overflow-auto",
+              "[&::-webkit-scrollbar]:w-1.5",
+              "[&::-webkit-scrollbar-track]:bg-transparent",
+              "[&::-webkit-scrollbar-thumb]:bg-slate-200",
+              "[&::-webkit-scrollbar-thumb]:rounded-full",
+              "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300"
+            ),
+            children: s.map((e, t) => {
+              const r = !x.has(e.key), a = r && I <= C, c = O === t, l = F === e.key;
+              return /* @__PURE__ */ i("div", { className: "relative", children: [
+                c && !l && /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: b(
+                      "pointer-events-none absolute left-2 right-2 z-10 h-0.5 rounded-full bg-blue-300",
+                      u === "before" ? "top-0" : "bottom-0"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  "div",
+                  {
+                    draggable: !0,
+                    onDragStart: (o) => R(o, t, e.key),
+                    onDragOver: (o) => {
+                      if (v == null) return;
+                      o.preventDefault(), o.dataTransfer.dropEffect = "move";
+                      const P = o.currentTarget.getBoundingClientRect(), j = o.clientY - P.top > P.height / 2 ? "after" : "before";
+                      O !== t && k(t), u !== j && D(j);
+                    },
+                    onDrop: (o) => Q(o, t),
+                    onDragEnd: d,
+                    className: b(
+                      "group flex items-center py-2 px-1 gap-4",
+                      "rounded-md box-border overflow-visible",
+                      "transition-[background,transform] duration-150",
+                      !l && !c && "hover:bg-slate-50",
+                      c && !l && "bg-slate-50",
+                      l && "bg-slate-50 opacity-100 scale-[0.99] cursor-grabbing"
+                    ),
+                    children: [
+                      /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          className: b(
+                            "shrink-0 text-slate-400",
+                            "cursor-grab active:cursor-grabbing",
+                            "rounded-lg p-1 hover:bg-slate-100",
+                            l && "cursor-grabbing"
+                          ),
+                          "aria-label": "Drag",
+                          children: /* @__PURE__ */ n(q, { weight: "Linear", size: 20 })
+                        }
+                      ),
+                      /* @__PURE__ */ n("div", { className: "shrink-0", children: /* @__PURE__ */ n(
+                        J,
+                        {
+                          checked: r,
+                          disabled: a,
+                          onChange: () => B(e.key, a),
+                          variant: "blue"
+                        }
+                      ) }),
+                      /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ n("h4", { className: "truncate text-slate-700 text-base font-medium", title: e.title, children: e.title }),
+                        a && /* @__PURE__ */ i("p", { className: "text-xs text-slate-400 mt-0.5", children: [
+                          "Минимум ",
+                          C,
+                          " колонок"
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                t !== s.length - 1 && /* @__PURE__ */ n("div", { className: "mx-2 h-px bg-slate-100" })
+              ] }, e.key);
+            })
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+export {
+  Z as default
+};

package/dist/shared/ui/mciTable/mci-table.utils.js

@@ -0,0 +1,14 @@
+function i(n) {
+  if (n != null)
+    return typeof n == "number" ? `${n}px` : n;
+}
+function o(n, r, f) {
+  return !r || f ? n : [...n].sort((l, t) => {
+    const u = l[r.key], e = t[r.key];
+    return u == null ? 1 : e == null ? -1 : u < e ? r.direction === "asc" ? -1 : 1 : u > e ? r.direction === "asc" ? 1 : -1 : 0;
+  });
+}
+export {
+  i as normalizeColWidth,
+  o as sortRows
+};

package/dist/shared/ui/mciTabs/MciTabs.js

@@ -0,0 +1,131 @@
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { useState as x, useRef as b, useCallback as C, useEffect as w } from "react";
+import { cn as t } from "../../lib/utils.js";
+const I = {
+  top: "flex-col",
+  bottom: "flex-col-reverse",
+  left: "flex-row",
+  right: "flex-row-reverse"
+}, L = {
+  top: "flex-row",
+  bottom: "flex-row",
+  left: "flex-col",
+  right: "flex-col"
+}, j = {
+  top: "mt-4",
+  bottom: "mb-4",
+  left: "ml-4",
+  right: "mr-4"
+};
+function _({
+  tabs: i,
+  defaultTab: h,
+  position: n = "top",
+  className: p,
+  tabListClassName: v,
+  contentClassName: N,
+  extra: u,
+  onChange: S
+}) {
+  const [s, g] = x(h || i[0]?.id), [y, E] = x({}), a = b([]), o = C(() => {
+    requestAnimationFrame(() => {
+      const e = i.findIndex((c) => c?.id === s), f = a.current[e];
+      if (f) {
+        const { offsetLeft: c, offsetTop: m, offsetWidth: T, offsetHeight: A } = f;
+        E({
+          left: `${c}px`,
+          top: `${m}px`,
+          width: `${T}px`,
+          height: `${A}px`,
+          transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
+        });
+      }
+    });
+  }, [s, i]);
+  w(() => (o(), window.addEventListener("resize", o), "fonts" in document && document.fonts.ready.then(o), () => window.removeEventListener("resize", o)), [n, o]), w(() => {
+    a.current = a.current.slice(0, i.length);
+  }, [i]);
+  const r = n === "left" || n === "right";
+  return /* @__PURE__ */ d("div", { className: t("flex w-full", I[n], p), children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: t(
+          "flex w-full gap-4",
+          r ? "flex-col items-start" : "flex-row flex-wrap items-center"
+        ),
+        children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: t(
+                "flex-1",
+                r ? "w-full" : "min-w-[520px]"
+              ),
+              children: /* @__PURE__ */ d(
+                "div",
+                {
+                  className: t(
+                    "relative flex rounded-xl bg-slate-100 p-1",
+                    L[n],
+                    !r && "w-full overflow-hidden",
+                    r ? "min-w-48" : "",
+                    v
+                  ),
+                  children: [
+                    /* @__PURE__ */ l(
+                      "div",
+                      {
+                        className: t("absolute rounded-lg bg-white", r ? "w-full" : "h-full"),
+                        style: y
+                      }
+                    ),
+                    i?.map((e, f) => {
+                      const c = s === e.id;
+                      return /* @__PURE__ */ d(
+                        "button",
+                        {
+                          ref: (m) => {
+                            a.current[f] = m;
+                          },
+                          onClick: () => {
+                            e?.disabled || (g(e?.id), S?.(e?.id));
+                          },
+                          disabled: e?.disabled,
+                          className: t(
+                            "relative z-10 flex items-center justify-center whitespace-nowrap px-3 py-2 text-base font-normal text-black transition-colors duration-300 hover:cursor-pointer",
+                            e?.disabled && "cursor-not-allowed opacity-50",
+                            r ? "w-full justify-start" : "flex-1 min-w-0"
+                          ),
+                          children: [
+                            e?.icon && /* @__PURE__ */ l("span", { className: t("shrink-0 transition-transform duration-200", c && "scale-110"), children: e?.icon }),
+                            /* @__PURE__ */ l("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
+                          ]
+                        },
+                        e?.id
+                      );
+                    })
+                  ]
+                }
+              )
+            }
+          ),
+          u && /* @__PURE__ */ l(
+            "div",
+            {
+              className: t(
+                "shrink-0 ml-auto",
+                r ? "w-full" : "max-w-full"
+              ),
+              children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-end gap-2", children: u })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: t("w-full flex-1 overflow-hidden", j[n], N), children: /* @__PURE__ */ l("div", { className: "animate-fade-in w-full", style: { animationDuration: "0.35s" }, children: i?.find((e) => e.id === s)?.content }, s) })
+  ] });
+}
+export {
+  _ as default
+};

package/dist/shared/ui/mciTag/MciTag.js

@@ -0,0 +1,46 @@
+import { jsxs as x, jsx as s } from "react/jsx-runtime";
+import { cn as a } from "../../lib/utils.js";
+const c = {
+  sm: "px-2 py-0.5",
+  md: "px-2 py-1",
+  lg: "px-3 py-2"
+}, n = {
+  sm: "w-3 h-3",
+  md: "w-3 h-3",
+  lg: "w-3 h-3"
+}, p = {
+  success: "bg-green-50 text-green-600",
+  warning: "bg-orange-50 text-orange-600",
+  error: "bg-red-50 text-red-600",
+  gray: "bg-slate-200 text-slate-700",
+  blue: "bg-blue-50 text-blue-600"
+};
+function i({
+  children: l,
+  variant: g = "success",
+  size: t = "lg",
+  icon: e,
+  iconPosition: r = "left",
+  className: m
+}) {
+  return /* @__PURE__ */ x(
+    "span",
+    {
+      className: a(
+        "inline-flex animate-[fadeIn_0.3s_ease-out] items-center rounded-lg text-extra-small font-medium",
+        c[t],
+        p[g],
+        e && "gap-[2px]",
+        m
+      ),
+      children: [
+        e && r === "left" && /* @__PURE__ */ s("span", { className: `flex items-center ${a(n[t])}`, children: e }),
+        /* @__PURE__ */ s("span", { children: l }),
+        e && r === "right" && /* @__PURE__ */ s("span", { className: `flex items-center ${a(n[t])}`, children: e })
+      ]
+    }
+  );
+}
+export {
+  i as default
+};

package/dist/shared/ui/mciTextarea/MciTextarea.js

@@ -0,0 +1,56 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as p } from "react";
+import { cn as a } from "../../lib/utils.js";
+const w = h(
+  ({
+    label: s,
+    placeholder: r,
+    value: o = "",
+    onChange: d,
+    required: n = !1,
+    disabled: i = !1,
+    error: e,
+    className: m,
+    rows: u = 4,
+    name: b
+  }, c) => {
+    const f = p(() => e ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600", [e]);
+    return /* @__PURE__ */ l("div", { className: a("relative w-full", m), children: [
+      s && /* @__PURE__ */ l(
+        "label",
+        {
+          className: a(
+            "mb-2 block text-base font-medium",
+            e ? "text-red-600" : "text-slate-700"
+          ),
+          children: [
+            s,
+            n && /* @__PURE__ */ t("span", { className: "ml-1 text-red-600", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        "textarea",
+        {
+          ref: c,
+          name: b,
+          rows: u,
+          value: o,
+          onChange: (x) => d?.(x.target.value),
+          disabled: i,
+          placeholder: r,
+          className: a(
+            "w-full resize-none rounded-xl border bg-white text-base font-normal transition-all duration-300 ease-in-out outline-none",
+            "p-3 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
+            f
+          )
+        }
+      ),
+      e && /* @__PURE__ */ t("p", { className: "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal text-red-600", children: e })
+    ] });
+  }
+);
+w.displayName = "MciTextarea";
+export {
+  w as default
+};