@mci-ui/mci-ui 0.0.86 → 0.0.88

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

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

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

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

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

@@ -1,4 +1,4 @@
-const r = {
+const o = {
   sm: {
     input: "h-9 text-sm",
     iconPadding: "pl-8 pr-2",
@@ -27,21 +27,21 @@ const r = {
     iconWrapper: "h-5"
   }
 };
-function i(n) {
-  let e = n.replace(/\D/g, "");
+function i(r) {
+  let e = r.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 u(r, e = !1) {
+  return e ? r ? "border-red-500 hover:border-red-500 focus:border-red-500 focus:shadow-[0_0_0_2px_rgba(231,0,11,0.25)]" : "border-neutral-200 hover:border-neutral-100 focus:border-blue-500 focus:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]" : r ? "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";
+function a(r, e, t, n = !1) {
+  return n ? r ? "text-neutral-100/50" : e ? "text-red-500" : t ? "text-white" : "text-neutral-100" : r ? "text-slate-400" : e ? "text-red-600" : t ? "text-black" : "text-slate-400";
 }
 export {
-  r as PHONE_SIZES,
+  o as PHONE_SIZES,
   i as formatPhoneValue,
-  l as getPhoneIconColor,
-  o as getPhoneStateStyles
+  a as getPhoneIconColor,
+  u as getPhoneStateStyles
 };