@mci-ui/mci-ui 0.0.85 → 0.0.87

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

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

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

@@ -1,4 +1,4 @@
-const a = {
+const i = {
   sm: {
     container: "h-9 text-sm",
     padding: "px-2",
@@ -33,20 +33,20 @@ const a = {
     dropdown: "text-base"
   }
 };
-function d(e, t, r, n) {
+function l(e, t, r, n) {
   if (!r || n) return e;
-  const i = t.toLowerCase();
-  return e.filter((o) => o.label.toLowerCase().includes(i));
+  const o = t.toLowerCase();
+  return e.filter((a) => a.label.toLowerCase().includes(o));
 }
-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 d(e, t, r = !1) {
+  return r ? e ? "border-neutral-200 bg-neutral-300 text-neutral-100/50 cursor-not-allowed" : t ? "border-red-500 bg-transparent text-neutral-50 hover:border-red-500" : "border-neutral-200 bg-transparent text-neutral-50 hover:border-neutral-100" : 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";
+function u(e, t, r, n, o = !1) {
+  return o ? e ? "text-neutral-100/50" : t ? "text-red-500" : r || n ? "text-white" : "text-neutral-100" : 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
+  i as SELECT_SIZES,
+  l as getFilteredOptions,
+  u as getSelectIconColor,
+  d as getSelectStateStyles
 };

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

@@ -1,29 +1,31 @@
-import { jsx as d } from "react/jsx-runtime";
-import { cn as m } from "../../lib/utils.js";
-function t({
-  className: l,
-  variant: o = "default",
+import { jsx as m } from "react/jsx-runtime";
+import { cn as t } from "../../lib/utils.js";
+function a({
+  className: o,
+  variant: l = "default",
   width: e = "100%",
-  height: r = "1rem"
+  height: r = "1rem",
+  darkMode: s = !1
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: m(
-        "relative overflow-hidden bg-slate-200",
+      className: t(
+        "relative overflow-hidden",
+        s ? "bg-slate-700" : "bg-slate-200",
         "rounded-lg",
-        o === "circle" && "rounded-full",
-        o === "rounded" && "rounded-md",
-        l
+        l === "circle" && "rounded-full",
+        l === "rounded" && "rounded-md",
+        o
       ),
       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" })
+      children: /* @__PURE__ */ m("div", { className: s ? "shimmer-mask-dark absolute inset-0" : "shimmer-mask absolute inset-0" })
     }
   );
 }
 export {
-  t as default
+  a as default
 };