@mci-ui/mci-ui 0.0.88 → 0.0.89

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

@@ -1,122 +1,142 @@
-import { jsxs as g, jsx as l } from "react/jsx-runtime";
-import { useRef as K, useEffect as _, useMemo as F, useState as p, useCallback as d } from "react";
-import { TransferVertical as q } from "@solar-icons/react";
-import { useClickOutside as H, cn as s } from "../../lib/utils.js";
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { useRef as K, useEffect as q, useMemo as Y, useState as p, useCallback as h } from "react";
+import { TransferVertical as J } from "@solar-icons/react";
+import { useClickOutside as U, cn as l } from "../../lib/utils.js";
 /* empty css                 */
-import J from "../mciCheck/MciCheck.js";
-const U = {
+import V from "../mciCheck/MciCheck.js";
+const W = {
   ru: {
     title: "Настройки",
     close: "Закрыть",
     activeColumns: "Активные колонки",
-    minColumns: (c) => `Минимум ${c} колонок`,
+    minColumns: (u) => `Минимум ${u} колонок`,
     drag: "Перетащить"
   },
   uz: {
     title: "Sozlamalar",
     close: "Yopish",
     activeColumns: "Aktiv ustunlar",
-    minColumns: (c) => `Kamida ${c} ta ustun`,
+    minColumns: (u) => `Kamida ${u} ta ustun`,
     drag: "Sudrash"
   }
+}, X = {
+  blue: {
+    dropIndicator: "bg-blue-300",
+    darkDropIndicator: "bg-blue-500",
+    close: "hover:bg-blue-50 hover:text-blue-600 focus-visible:ring-2 focus-visible:ring-[rgba(21,93,252,0.25)]",
+    darkClose: "hover:bg-blue-500/20 hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-[rgba(21,93,252,0.25)]"
+  },
+  yellow: {
+    dropIndicator: "bg-yellow-400",
+    darkDropIndicator: "bg-yellow-500",
+    close: "hover:bg-yellow-50 hover:text-yellow-600 focus-visible:ring-2 focus-visible:ring-yellow-200",
+    darkClose: "hover:bg-yellow-500/20 hover:text-yellow-300 focus-visible:ring-2 focus-visible:ring-yellow-300/40"
+  },
+  orange: {
+    dropIndicator: "bg-orange-400",
+    darkDropIndicator: "bg-orange-600",
+    close: "hover:bg-orange-50 hover:text-orange-600 focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]",
+    darkClose: "hover:bg-orange-600/20 hover:text-orange-400 focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]"
+  }
 };
-function te({
-  open: c,
-  onClose: C,
+function ae({
+  open: u,
+  onClose: N,
   columns: i,
-  hidden: y,
-  onToggle: T,
-  onMove: k,
+  hidden: k,
+  onToggle: I,
+  onMove: T,
   onMoveByKey: x,
   minVisible: S = 5,
-  locale: Q = "ru",
-  darkMode: r = !1
+  locale: _ = "ru",
+  darkMode: r = !1,
+  variant: E = "orange"
 }) {
-  const I = K(null), { handleClick: v } = H(I, C), m = U[Q];
-  _(() => {
-    if (c)
-      return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [c, v]);
-  const w = F(() => new Set(y), [y]), O = F(() => {
+  const L = K(null), { handleClick: w } = U(L, N), f = W[_], v = X[E];
+  q(() => {
+    if (u)
+      return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [u, w]);
+  const D = Y(() => new Set(k), [k]), O = Y(() => {
     let e = 0;
-    for (const t of i) w.has(t.key) || e++;
+    for (const t of i) D.has(t.key) || e++;
     return e;
-  }, [i, w]), [A, E] = p(null), [L, N] = p(null), [Y, z] = p(null), [f, D] = p("before"), P = d(
+  }, [i, D]), [y, P] = p(null), [z, A] = p(null), [$, R] = p(null), [m, C] = p("before"), j = h(
     (e, t, a) => {
       let n = a === "after" ? t + 1 : t;
       return e < n && (n -= 1), n;
     },
     []
-  ), h = d(() => {
-    E(null), z(null), N(null), D("before");
-  }, []), $ = d(
+  ), d = h(() => {
+    P(null), R(null), A(null), C("before");
+  }, []), B = h(
     (e, t, a) => {
-      E(t), z(String(a)), N(null), D("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
+      P(t), R(String(a)), A(null), C("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
       const n = new Image();
       n.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", e.dataTransfer.setDragImage(n, 0, 0);
     },
     []
-  ), B = d(
+  ), G = h(
     (e, t) => {
       e.preventDefault();
-      const a = A ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
+      const a = y ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
       if (!Number.isFinite(a) || a < 0) {
-        h();
+        d();
         return;
       }
       const n = i[a], b = i[t];
       if (!n || !b) {
-        h();
+        d();
         return;
       }
-      const o = P(a, t, f);
-      o !== a && (x ? x(n.key, b.key, f) : k(a, o)), h();
+      const o = j(a, t, m);
+      o !== a && (x ? x(n.key, b.key, m) : T(a, o)), d();
     },
-    [i, P, A, f, k, x, h]
-  ), G = d(
+    [i, j, y, m, T, x, d]
+  ), H = h(
     (e, t) => {
-      t || T(e);
+      t || I(e);
     },
-    [T]
+    [I]
   );
-  return c ? /* @__PURE__ */ g(
+  return u ? /* @__PURE__ */ g(
     "div",
     {
-      ref: I,
-      className: s(
+      ref: L,
+      className: l(
         "absolute right-0 top-full z-50 mt-2 w-[320px]",
         "rounded-2xl p-4",
         r ? "border border-neutral-200 bg-[#22242A] shadow-xl" : "border border-slate-200 bg-white"
       ),
       children: [
         /* @__PURE__ */ g("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ l("h4", { className: s("text-large font-normal", r ? "text-neutral-50" : "text-slate-600"), children: m.title }),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s("h4", { className: l("text-large font-normal", r ? "text-neutral-50" : "text-slate-600"), children: f.title }),
+          /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              onClick: C,
-              className: s(
-                "rounded-lg px-2 py-1",
-                r ? "text-neutral-100 hover:bg-neutral-300" : "text-slate-500 hover:bg-slate-100"
+              onClick: N,
+              className: l(
+                "cursor-pointer rounded-lg px-2 py-1",
+                r ? l("text-neutral-100 hover:bg-neutral-300", v.darkClose) : l("text-slate-500 hover:bg-slate-100", v.close)
               ),
-              "aria-label": m.close,
+              "aria-label": f.close,
               children: "✕"
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { className: s("my-4 h-px", r ? "bg-neutral-200" : "bg-slate-100") }),
-        /* @__PURE__ */ g("p", { className: s("mb-3 text-xs", r ? "text-neutral-100" : "text-slate-500"), children: [
-          m.activeColumns,
+        /* @__PURE__ */ s("div", { className: l("my-4 h-px", r ? "bg-neutral-200" : "bg-slate-100") }),
+        /* @__PURE__ */ g("p", { className: l("mb-3 text-xs", r ? "text-neutral-100" : "text-slate-500"), children: [
+          f.activeColumns,
           ": ",
           O,
           "/",
           i.length
         ] }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ s(
           "div",
           {
-            className: s(
+            className: l(
               "max-h-[275px] overflow-auto",
               "[&::-webkit-scrollbar]:w-1.5",
               "[&::-webkit-scrollbar-track]:bg-transparent",
@@ -125,15 +145,15 @@ function te({
               r ? "hover:[&::-webkit-scrollbar-thumb]:bg-neutral-100" : "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300"
             ),
             children: i.map((e, t) => {
-              const a = !w.has(e.key), n = a && O <= S, b = L === t, o = Y === e.key;
+              const a = !D.has(e.key), n = a && O <= S, b = z === t, o = $ === e.key;
               return /* @__PURE__ */ g("div", { className: "relative", children: [
-                b && !o && /* @__PURE__ */ l(
+                b && !o && /* @__PURE__ */ s(
                   "div",
                   {
-                    className: s(
+                    className: l(
                       "pointer-events-none absolute left-2 right-2 z-10 h-0.5 rounded-full",
-                      r ? "bg-blue-500" : "bg-blue-300",
-                      f === "before" ? "top-0" : "bottom-0"
+                      r ? v.darkDropIndicator : v.dropIndicator,
+                      m === "before" ? "top-0" : "bottom-0"
                     )
                   }
                 ),
@@ -141,57 +161,58 @@ function te({
                   "div",
                   {
                     draggable: !0,
-                    onDragStart: (u) => $(u, t, e.key),
-                    onDragOver: (u) => {
-                      if (A == null) return;
-                      u.preventDefault(), u.dataTransfer.dropEffect = "move";
-                      const R = u.currentTarget.getBoundingClientRect(), j = u.clientY - R.top > R.height / 2 ? "after" : "before";
-                      L !== t && N(t), f !== j && D(j);
+                    onDragStart: (c) => B(c, t, e.key),
+                    onDragOver: (c) => {
+                      if (y == null) return;
+                      c.preventDefault(), c.dataTransfer.dropEffect = "move";
+                      const F = c.currentTarget.getBoundingClientRect(), Q = c.clientY - F.top > F.height / 2 ? "after" : "before";
+                      z !== t && A(t), m !== Q && C(Q);
                     },
-                    onDrop: (u) => B(u, t),
-                    onDragEnd: h,
-                    className: s(
+                    onDrop: (c) => G(c, t),
+                    onDragEnd: d,
+                    className: l(
                       "group flex items-center py-2 px-1 gap-4",
                       "rounded-md box-border overflow-visible",
                       "transition-[background,transform] duration-150",
+                      !o && "cursor-grab",
                       !o && !b && (r ? "hover:bg-neutral-300/60" : "hover:bg-slate-50"),
                       b && !o && (r ? "bg-neutral-300/60" : "bg-slate-50"),
                       o && (r ? "bg-neutral-300 opacity-100 scale-[0.99] cursor-grabbing" : "bg-slate-50 opacity-100 scale-[0.99] cursor-grabbing")
                     ),
                     children: [
-                      /* @__PURE__ */ l(
+                      /* @__PURE__ */ s(
                         "button",
                         {
                           type: "button",
-                          className: s(
+                          className: l(
                             "shrink-0",
                             r ? "text-neutral-100" : "text-slate-400",
                             "cursor-grab active:cursor-grabbing",
                             r ? "rounded-lg p-1 hover:bg-neutral-200" : "rounded-lg p-1 hover:bg-slate-100",
                             o && "cursor-grabbing"
                           ),
-                          "aria-label": m.drag,
-                          children: /* @__PURE__ */ l(q, { weight: "Linear", size: 20 })
+                          "aria-label": f.drag,
+                          children: /* @__PURE__ */ s(J, { weight: "Linear", size: 20 })
                         }
                       ),
-                      /* @__PURE__ */ l("div", { className: "shrink-0", children: /* @__PURE__ */ l(
-                        J,
+                      /* @__PURE__ */ s("div", { className: "shrink-0", children: /* @__PURE__ */ s(
+                        V,
                         {
                           checked: a,
                           disabled: n,
-                          onChange: () => G(e.key, n),
-                          variant: "blue",
+                          onChange: () => H(e.key, n),
+                          variant: E,
                           darkMode: r
                         }
                       ) }),
                       /* @__PURE__ */ g("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ l("h4", { className: s("truncate text-base font-medium", r ? "text-neutral-50" : "text-slate-700"), title: e.title, children: e.title }),
-                        n && /* @__PURE__ */ l("p", { className: s("mt-0.5 text-xs", r ? "text-neutral-100" : "text-slate-400"), children: m.minColumns(S) })
+                        /* @__PURE__ */ s("h4", { className: l("truncate text-base font-medium", r ? "text-neutral-50" : "text-slate-700"), title: e.title, children: e.title }),
+                        n && /* @__PURE__ */ s("p", { className: l("mt-0.5 text-xs", r ? "text-neutral-100" : "text-slate-400"), children: f.minColumns(S) })
                       ] })
                     ]
                   }
                 ),
-                t !== i.length - 1 && /* @__PURE__ */ l("div", { className: s("mx-2 h-px", r ? "bg-neutral-200" : "bg-slate-100") })
+                t !== i.length - 1 && /* @__PURE__ */ s("div", { className: l("mx-2 h-px", r ? "bg-neutral-200" : "bg-slate-100") })
               ] }, e.key);
             })
           }
@@ -201,5 +222,5 @@ function te({
   ) : null;
 }
 export {
-  te as default
+  ae as default
 };

package/dist/shared/ui/mciToggle/MciToggle.js

@@ -1,5 +1,5 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { cn as n } from "../../lib/utils.js";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { cn as r } from "../../lib/utils.js";
 const b = {
   blue: {
     active: "bg-blue-600",
@@ -14,79 +14,87 @@ const b = {
     focus: "focus:ring-2 focus:ring-yellow-200",
     darkActive: "bg-yellow-500",
     darkHover: "hover:bg-yellow-500"
+  },
+  orange: {
+    active: "bg-orange-600",
+    hover: "hover:bg-orange-600",
+    focus: "focus:ring-2 focus:ring-[rgba(227,98,12,0.25)]",
+    darkActive: "bg-orange-600",
+    darkHover: "hover:bg-orange-600"
   }
 };
 function m({
-  checked: l = !1,
-  onChange: i,
-  disabled: t = !1,
-  variant: s = "yellow",
-  darkMode: e = !1,
-  label: a,
-  supportText: u,
-  className: g,
-  ...f
+  checked: o = !1,
+  onChange: c,
+  disabled: e = !1,
+  variant: n = "orange",
+  darkMode: t = !1,
+  label: s,
+  supportText: g,
+  className: i,
+  ...v
 }) {
-  const v = () => {
-    t || i?.(!l);
-  }, o = b[s];
-  return /* @__PURE__ */ c(
+  const f = () => {
+    e || c?.(!o);
+  }, l = b[n];
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: n(
+      className: r(
         "flex items-start gap-3 select-none",
-        g
+        i
       ),
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "button",
           {
-            ...f,
+            ...v,
             type: "button",
-            disabled: t,
-            onClick: v,
-            className: n(
+            disabled: e,
+            onClick: f,
+            className: r(
               "relative h-6 w-11 rounded-xl transition-all duration-300 outline-none",
-              t ? "cursor-not-allowed" : "cursor-pointer",
-              l ? e ? o.darkActive : o.active : e ? "bg-neutral-200" : "bg-slate-200",
-              !t && l && (e ? o.darkHover : o.hover),
-              !t && !l && (e ? "hover:bg-neutral-100" : "hover:bg-slate-300"),
-              !t && o.focus,
-              e && !t && s === "blue" && "focus-visible:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]",
-              e && !t && s === "yellow" && "focus-visible:ring-2 focus-visible:ring-yellow-300/40",
-              t && (e ? "bg-neutral-200/60" : "bg-slate-100")
+              e ? "cursor-not-allowed" : "cursor-pointer",
+              o ? t ? l.darkActive : l.active : t ? "bg-neutral-200" : "bg-slate-200",
+              !e && o && (t ? l.darkHover : l.hover),
+              !e && !o && (t ? "hover:bg-neutral-100" : "hover:bg-slate-300"),
+              !e && l.focus,
+              t && !e && n === "blue" && "focus-visible:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]",
+              t && !e && n === "yellow" && "focus-visible:ring-2 focus-visible:ring-yellow-300/40",
+              t && !e && n === "orange" && "focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]",
+              e && (t ? "bg-neutral-200/60" : "bg-slate-100")
             ),
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ a(
               "span",
               {
-                className: n(
+                className: r(
                   "absolute top-1/2 left-0.5 h-5 w-5 -translate-y-1/2 rounded-full transition-all duration-300",
-                  e ? "bg-black" : "bg-white",
-                  l && "translate-x-5"
+                  t ? "bg-black" : "bg-white",
+                  o && "translate-x-5"
                 )
               }
             )
           }
         ),
-        (a || u) && /* @__PURE__ */ c("div", { className: "flex flex-col leading-tight", children: [
-          a && /* @__PURE__ */ r(
+        (s || g) && /* @__PURE__ */ u("div", { className: "flex flex-col leading-tight", children: [
+          s && /* @__PURE__ */ a(
             "span",
             {
-              className: n(
+              className: r(
                 "text-base font-medium",
-                e ? t ? "text-neutral-50/50" : "text-neutral-50" : t ? "text-slate-400" : "text-black"
+                t ? e ? "text-neutral-50/50" : "text-neutral-50" : e ? "text-slate-400" : "text-black"
               ),
-              children: a
+              children: s
             }
           ),
-          u && /* @__PURE__ */ r(
+          g && /* @__PURE__ */ a(
             "span",
             {
-              className: n(
+              className: r(
                 "text-sm font-normal",
-                e ? t ? "text-neutral-100/50" : "text-neutral-100" : t ? "text-slate-400" : "text-slate-500"
+                t ? e ? "text-neutral-100/50" : "text-neutral-100" : e ? "text-slate-400" : "text-slate-500"
               ),
-              children: u
+              children: g
             }
           )
         ] })