@mci-ui/mci-ui 0.0.86 → 0.0.87

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