@mci-ui/mci-ui 0.0.86 → 0.0.88

package/dist/shared/ui/mciDrawer/MciDrawer.js

@@ -1,108 +1,131 @@
-import { jsxs as n, Fragment as j, jsx as t } from "react/jsx-runtime";
-import { useRef as f, useCallback as E, useEffect as h, useMemo as C } from "react";
-import { cn as l } from "../../lib/utils.js";
-import X from "../../../assets/icons/close.svg.js";
-function A({
+import { jsxs as n, Fragment as E, jsx as t } from "react/jsx-runtime";
+import { useRef as h, useCallback as C, useEffect as x, useMemo as X } from "react";
+import { cn as i } from "../../lib/utils.js";
+import z from "../../../assets/icons/close.svg.js";
+function F({
   isOpen: e,
-  onClose: i,
+  onClose: c,
   position: o = "right",
   children: p,
   footer: m,
-  title: r,
-  description: a,
-  showCloseButton: c = !0,
-  drawerClassName: x,
-  contentClassName: v,
-  closeOnOverlayClick: y = !0,
-  closeOnEscape: z = !0,
-  width: s = 572
+  title: a,
+  description: s,
+  showCloseButton: d = !0,
+  drawerClassName: v,
+  contentClassName: y,
+  footerClassName: g,
+  closeOnOverlayClick: w = !0,
+  closeOnEscape: P = !0,
+  width: l = 572,
+  darkMode: r = !1
 }) {
-  const d = f(null), u = f(null), b = E(() => i(), [i]);
-  h(() => {
-    e ? (u.current = document.activeElement, d.current?.focus()) : u.current?.focus();
-  }, [e]), h(() => (e && (document.body.style.overflow = "hidden"), () => {
+  const u = h(null), b = h(null), f = C(() => c(), [c]);
+  x(() => {
+    e ? (b.current = document.activeElement, u.current?.focus()) : b.current?.focus();
+  }, [e]), x(() => (e && (document.body.style.overflow = "hidden"), () => {
     document.body.style.overflow = "unset";
   }), [e]);
-  const w = C(
+  const N = X(
     () => ({
-      "--drawer-w": typeof s == "number" ? `${s}px` : s,
+      "--drawer-w": typeof l == "number" ? `${l}px` : l,
       transform: e ? "translateX(0)" : o === "right" ? "translateX(calc(100% + 48px))" : "translateX(calc(-100% - 48px))"
     }),
-    [e, s, o]
-  ), g = !!(r || a || c), k = o === "right" ? "top-0 bottom-0 right-0 left-3 rounded-l-3xl rounded-r-none" : "top-0 bottom-0 left-0 right-3 rounded-r-3xl rounded-l-none", N = o === "right" ? "sm:top-6 sm:bottom-6 sm:right-6 sm:left-auto" : "sm:top-6 sm:bottom-6 sm:left-6 sm:right-auto";
-  return /* @__PURE__ */ n(j, { children: [
+    [e, l, o]
+  ), k = !!(a || s || d), $ = o === "right" ? "top-0 bottom-0 right-0 left-3 rounded-l-3xl rounded-r-none" : "top-0 bottom-0 left-0 right-3 rounded-r-3xl rounded-l-none", j = o === "right" ? "sm:top-6 sm:bottom-6 sm:right-6 sm:left-auto" : "sm:top-6 sm:bottom-6 sm:left-6 sm:right-auto";
+  return /* @__PURE__ */ n(E, { children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: l(
+        className: i(
           "fixed inset-0 z-50 bg-black/40 transition-opacity duration-300",
           e ? "opacity-100 visible cursor-pointer" : "opacity-0 invisible pointer-events-none"
         ),
-        onClick: y ? b : void 0,
+        onClick: w ? f : void 0,
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ n(
       "div",
       {
-        ref: d,
+        ref: u,
         tabIndex: -1,
-        style: w,
-        className: l(
-          "fixed z-50 flex flex-col bg-white outline-none min-h-0",
+        style: N,
+        className: i(
+          `fixed z-50 flex flex-col ${r ? "bg-black" : "bg-white"}  outline-none min-h-0`,
           "transition-[transform,opacity,visibility] duration-300 ease-in-out",
           e ? "opacity-100 visible pointer-events-auto shadow-2xl" : "opacity-0 invisible pointer-events-none shadow-none",
-          k,
+          $,
           "h-[100dvh]",
           "pb-[env(safe-area-inset-bottom)]",
-          N,
+          j,
           "sm:h-auto sm:rounded-2xl sm:pb-0",
           "sm:w-[var(--drawer-w)]",
-          x
+          v
         ),
         role: "dialog",
         "aria-modal": "true",
         "aria-hidden": !e,
-        "aria-labelledby": r ? "drawer-title" : void 0,
+        "aria-labelledby": a ? "drawer-title" : void 0,
         children: [
-          g && /* @__PURE__ */ n("div", { className: "flex items-start justify-between border-b border-slate-200 shrink-0 px-4 py-4 sm:p-6", children: [
-            (r || a) && /* @__PURE__ */ n("div", { className: "block pr-3", children: [
-              r && /* @__PURE__ */ t(
-                "h2",
-                {
-                  id: "drawer-title",
-                  className: "font-semibold text-black text-xl leading-tight sm:text-h3",
-                  children: r
-                }
-              ),
-              a && /* @__PURE__ */ t("p", { className: "text-sm sm:text-base text-slate-base font-normal mt-2", children: a })
-            ] }),
-            c && /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: b,
-                className: "bg-slate-100 rounded-xl w-11 h-11 sm:w-12 sm:h-12 hover:cursor-pointer text-black transition flex items-center justify-center group active:scale-95",
-                children: /* @__PURE__ */ t(X, { className: "h-5 w-5 sm:h-6 sm:w-6 transition-transform duration-300 group-hover:rotate-180" })
-              }
-            )
-          ] }),
+          k && /* @__PURE__ */ n(
+            "div",
+            {
+              className: `flex items-start justify-between border-b ${r ? "border-neutral-200" : "border-slate-200"}  shrink-0 px-4 py-4 sm:p-6`,
+              children: [
+                (a || s) && /* @__PURE__ */ n("div", { className: "block pr-3", children: [
+                  a && /* @__PURE__ */ t(
+                    "h2",
+                    {
+                      id: "drawer-title",
+                      className: `font-semibold ${r ? "text-slate-50" : "text-black"} text-xl leading-tight sm:text-h3`,
+                      children: a
+                    }
+                  ),
+                  s && /* @__PURE__ */ t("p", { className: `text-sm sm:text-base ${r ? "text-neutral-50" : "text-slate-base"} font-normal mt-2`, children: s })
+                ] }),
+                d && /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: f,
+                    className: `${r ? "bg-neutral-300 text-slate-50" : "bg-slate-100 text-black"} rounded-xl w-11 h-11 sm:w-12 sm:h-12 hover:cursor-pointer transition flex items-center justify-center group active:scale-95`,
+                    children: /* @__PURE__ */ t(
+                      z,
+                      {
+                        className: "h-5 w-5 sm:h-6 sm:w-6 transition-transform duration-300 group-hover:rotate-180"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ t(
             "div",
             {
-              className: l(
+              className: i(
                 "flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-200 px-4 py-4 sm:p-6",
-                v
+                y
               ),
               children: p
             }
           ),
-          m && /* @__PURE__ */ t("div", { className: "shrink-0 flex items-center justify-end border-t border-slate-200 px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap", children: m })
+          m && /* @__PURE__ */ t(
+            "div",
+            {
+              className: i(
+                "shrink-0 flex items-center justify-end border-t px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap",
+                r ? "border-neutral-200" : "border-slate-200",
+                g
+              ),
+              children: m
+            }
+          )
         ]
       }
     )
   ] });
 }
 export {
-  A as default
+  F as default
 };

package/dist/shared/ui/mciInput/MciInput.js

@@ -1,212 +1,216 @@
-import { jsxs as f, jsx as s, Fragment as $ } from "react/jsx-runtime";
-import { EyeClosed as q, Eye as z } from "@solar-icons/react";
-import { forwardRef as ee, useState as w, useMemo as m } from "react";
-import te from "../../../assets/icons/close.svg.js";
-import { cn as t } from "../../lib/utils.js";
-import { getInputSizes as se, getInputStateStyles as ne, getInputIconColor as le, getInputRightPaddingClass as ae } from "./mci-input.utils.js";
-const re = ee(
+import { jsxs as p, jsx as l, Fragment as z } from "react/jsx-runtime";
+import { EyeClosed as ee, Eye as te } from "@solar-icons/react";
+import { forwardRef as le, useState as v, useMemo as h } from "react";
+import se from "../../../assets/icons/close.svg.js";
+import { cn as e } from "../../lib/utils.js";
+import { getInputSizes as ne, getInputStateStyles as ae, getInputIconColor as re, getInputRightPaddingClass as ce } from "./mci-input.utils.js";
+const ie = le(
   ({
-    label: j,
-    placeholder: B,
-    type: b = "text",
-    icon: r,
-    rightIcon: a,
-    iconPosition: i = "left",
-    size: e = "base",
-    error: c,
-    disabled: p = !1,
-    required: v = !1,
+    label: C,
+    placeholder: E,
+    type: w = "text",
+    icon: c,
+    rightIcon: r,
+    iconPosition: u = "left",
+    size: t = "base",
+    darkMode: a = !1,
+    error: i,
+    disabled: f = !1,
+    required: F = !1,
     value: N,
-    onChange: M,
-    onFocus: V,
-    onBlur: E,
-    className: P,
-    name: C,
-    maxLength: h = 250,
-    onClear: _,
-    showClearButton: D = !1,
-    step: A,
-    autoComplete: G = "off"
-  }, H) => {
-    const [k, F] = w(!1), [J, I] = w(""), [S, K] = w(!1), W = N ?? J, o = b === "password", x = D && !!W && !p, y = r && i === "left", g = r && i === "right" || a || o, L = g || x, R = m(() => {
-      let l = 0;
-      return x && (l += 1), o ? (l += 1, a && (l += 1), l) : (a && (l += 1), r && i === "right" && (l += 1), l);
-    }, [x, o, a, r, i]), O = () => {
-      F(!0), V?.();
-    }, Q = () => {
-      F(!1), E?.();
-    }, T = (l) => {
-      let d = l.target.value;
-      b === "number" && h && d.length > h && (d = d.slice(0, h), l.target.value = d), N === void 0 && I(d), M?.(l);
-    }, U = () => K((l) => !l), X = () => {
-      N === void 0 && I(""), _?.();
-    }, n = m(
-      () => se(!!y, !!g),
-      [y, g]
-    ), Y = m(() => ne(c), [c]), u = m(
-      () => le(p, c, k),
-      [c, k, p]
-    ), Z = m(
-      () => ae(e, R),
-      [e, R]
+    onChange: P,
+    onFocus: _,
+    onBlur: D,
+    className: A,
+    name: I,
+    maxLength: x = 250,
+    onClear: G,
+    showClearButton: H = !1,
+    step: J,
+    autoComplete: K = "off",
+    ...L
+  }, O) => {
+    const [y, S] = v(!1), [Q, W] = v(""), [R, T] = v(!1), B = N ?? Q, o = w === "password", b = H && !!B && !f, g = c && u === "left", j = c && u === "right" || r || o, U = j || b, V = h(() => {
+      let n = 0;
+      return b && (n += 1), o ? (n += 1, r && (n += 1), n) : (r && (n += 1), c && u === "right" && (n += 1), n);
+    }, [b, o, r, c, u]), X = (n) => {
+      S(!0), _?.(n);
+    }, Y = (n) => {
+      S(!1), D?.(n);
+    }, Z = (n) => {
+      let m = n.target.value;
+      w === "number" && x && m.length > x && (m = m.slice(0, x), n.target.value = m), N === void 0 && W(m), P?.(n);
+    }, $ = () => T((n) => !n), q = () => {
+      N === void 0 && W(""), G?.();
+    }, s = h(
+      () => ne(!!g, !!j),
+      [g, j]
+    ), k = h(() => ae(i, a), [i, a]), d = h(
+      () => re(f, i, y, a),
+      [i, y, f, a]
+    ), M = h(
+      () => ce(t, V),
+      [t, V]
     );
-    return /* @__PURE__ */ f("div", { className: t("w-full", P), children: [
-      j && /* @__PURE__ */ f(
+    return /* @__PURE__ */ p("div", { className: e("w-full", A), children: [
+      C && /* @__PURE__ */ p(
         "label",
         {
-          htmlFor: C,
-          className: t(
+          htmlFor: I,
+          className: e(
             "mb-2 block text-base font-medium",
-            c ? "text-red-600" : "text-slate-700",
-            n[e].labelFont
+            i ? a ? "text-red-500" : "text-red-600" : a ? "text-neutral-50" : "text-slate-700",
+            s[t].labelFont
           ),
           children: [
-            j,
-            v && /* @__PURE__ */ s("span", { className: "text-extra-small text-red-600 ml-1", children: "*" })
+            C,
+            F && /* @__PURE__ */ l("span", { className: "text-extra-small text-red-600 ml-1", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ f("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ s(
+      /* @__PURE__ */ p("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ l(
           "input",
           {
-            ref: H,
-            name: C,
-            type: o && S ? "text" : b,
-            value: W,
-            onChange: T,
-            onFocus: O,
-            onBlur: Q,
-            disabled: p,
-            required: v,
-            autoComplete: G,
-            placeholder: B,
-            step: A,
-            className: t(
-              "w-full border bg-white font-normal transition-all duration-300 ease-in-out outline-none",
-              e === "base" ? "rounded-xl" : "rounded-lg",
-              "disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
+            ...L,
+            ref: O,
+            name: I,
+            type: o && R ? "text" : w,
+            value: B,
+            onChange: Z,
+            onFocus: X,
+            onBlur: Y,
+            disabled: f,
+            required: F,
+            autoComplete: K,
+            placeholder: E,
+            step: J,
+            className: e(
+              "w-full border font-normal transition-all duration-300 ease-in-out outline-none",
+              t === "base" ? "rounded-xl" : "rounded-lg",
+              a ? "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:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
+              a && y && !f && "text-white",
               "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-              n[e].input,
-              n[e].padding,
-              Z,
-              Y
+              s[t].input,
+              s[t].padding,
+              M,
+              k
             ),
-            maxLength: h
+            maxLength: x
           }
         ),
-        y && /* @__PURE__ */ s(
+        g && /* @__PURE__ */ l(
           "div",
           {
-            className: t(
+            className: e(
               "absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
               "transition-all duration-300",
-              n[e].leftIcon,
-              u
+              s[t].leftIcon,
+              d
             ),
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ l(
               "div",
               {
-                className: t("flex items-center justify-center", n[e].iconWrapper),
-                children: /* @__PURE__ */ s("span", { className: t("flex items-center justify-center", n[e].icon), children: r })
+                className: e("flex items-center justify-center", s[t].iconWrapper),
+                children: /* @__PURE__ */ l("span", { className: e("flex items-center justify-center", s[t].icon), children: c })
               }
             )
           }
         ),
-        L && /* @__PURE__ */ f(
+        U && /* @__PURE__ */ p(
           "div",
           {
-            className: t(
+            className: e(
               "absolute top-1/2 flex -translate-y-1/2 items-center justify-center gap-2",
               "transition-all duration-300",
-              n[e].rightIcon
+              s[t].rightIcon
             ),
             children: [
-              x && /* @__PURE__ */ s(
+              b && /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
-                  onClick: X,
-                  className: t(
+                  onClick: q,
+                  className: e(
                     "flex items-center justify-center",
-                    n[e].iconWrapper,
-                    "text-slate-base hover:text-black"
+                    s[t].iconWrapper,
+                    a ? "text-neutral-100 hover:text-white" : "text-slate-base hover:text-black"
                   ),
                   style: { cursor: "pointer" },
-                  children: /* @__PURE__ */ s("span", { className: t("flex items-center justify-center", n[e].icon), children: /* @__PURE__ */ s(te, { className: t("h-full w-full") }) })
+                  children: /* @__PURE__ */ l("span", { className: e("flex items-center justify-center", s[t].icon), children: /* @__PURE__ */ l(se, { className: e("h-full w-full") }) })
                 }
               ),
-              a && !o && /* @__PURE__ */ s(
+              r && !o && /* @__PURE__ */ l(
                 "div",
                 {
-                  className: t("flex items-center justify-center", n[e].iconWrapper),
-                  children: /* @__PURE__ */ s(
+                  className: e("flex items-center justify-center", s[t].iconWrapper),
+                  children: /* @__PURE__ */ l(
                     "span",
                     {
-                      className: t(
+                      className: e(
                         "flex items-center justify-center",
-                        n[e].icon,
-                        u
+                        s[t].icon,
+                        d
                       ),
-                      children: a
+                      children: r
                     }
                   )
                 }
               ),
-              o && /* @__PURE__ */ f($, { children: [
-                a && /* @__PURE__ */ s(
+              o && /* @__PURE__ */ p(z, { children: [
+                r && /* @__PURE__ */ l(
                   "div",
                   {
-                    className: t(
+                    className: e(
                       "flex items-center justify-center",
-                      n[e].iconWrapper
+                      s[t].iconWrapper
                     ),
-                    children: /* @__PURE__ */ s(
+                    children: /* @__PURE__ */ l(
                       "span",
                       {
-                        className: t(
+                        className: e(
                           "flex items-center justify-center",
-                          n[e].icon,
-                          u
+                          s[t].icon,
+                          d
                         ),
-                        children: a
+                        children: r
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ l(
                   "button",
                   {
                     type: "button",
-                    onClick: U,
-                    className: t(
+                    onClick: $,
+                    className: e(
                       "flex items-center justify-center",
-                      n[e].iconWrapper,
-                      u
+                      s[t].iconWrapper,
+                      d
                     ),
-                    children: /* @__PURE__ */ s(
+                    children: /* @__PURE__ */ l(
                       "span",
                       {
-                        className: t("flex items-center justify-center cursor-pointer", n[e].icon),
-                        children: S ? /* @__PURE__ */ s(q, { weight: "Linear", className: t("h-full w-full") }) : /* @__PURE__ */ s(z, { weight: "Linear", className: t("h-full w-full") })
+                        className: e("flex items-center justify-center cursor-pointer", s[t].icon),
+                        children: R ? /* @__PURE__ */ l(ee, { weight: "Linear", className: e("h-full w-full") }) : /* @__PURE__ */ l(te, { weight: "Linear", className: e("h-full w-full") })
                       }
                     )
                   }
                 )
               ] }),
-              r && i === "right" && !o && /* @__PURE__ */ s(
+              c && u === "right" && !o && /* @__PURE__ */ l(
                 "div",
                 {
-                  className: t("flex items-center justify-center", n[e].iconWrapper),
-                  children: /* @__PURE__ */ s(
+                  className: e("flex items-center justify-center", s[t].iconWrapper),
+                  children: /* @__PURE__ */ l(
                     "span",
                     {
-                      className: t(
+                      className: e(
                         "flex items-center justify-center",
-                        n[e].icon,
-                        u
+                        s[t].icon,
+                        d
                       ),
-                      children: r
+                      children: c
                     }
                   )
                 }
@@ -215,11 +219,20 @@ const re = ee(
           }
         )
       ] }),
-      c && /* @__PURE__ */ s("p", { className: "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal text-red-600", children: c })
+      i && /* @__PURE__ */ l(
+        "p",
+        {
+          className: e(
+            "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal",
+            a ? "text-red-500" : "text-red-600"
+          ),
+          children: i
+        }
+      )
     ] });
   }
 );
-re.displayName = "MciInput";
+ie.displayName = "MciInput";
 export {
-  re as default
+  ie as default
 };

package/dist/shared/ui/mciInput/mci-input.utils.js

@@ -1,4 +1,4 @@
-const p = {
+const u = {
   sm: {
     input: "h-9 text-sm",
     icon: "w-4 h-4",
@@ -24,19 +24,19 @@ const p = {
     iconWrapper: "h-5"
   }
 };
-function u(e, r) {
+function p(e, r) {
   const t = (n) => n === "sm" ? e && r ? "pl-7 pr-7" : e ? "pl-7 pr-2" : r ? "pl-2 pr-7" : "px-2" : n === "md" ? e && r ? "pl-8 pr-8" : e ? "pl-8 pr-2" : r ? "pl-2 pr-8" : "px-4" : e && r ? "pl-9 pr-9" : e ? "pl-9 pr-3" : r ? "pl-3 pr-9" : "px-4";
   return {
-    sm: { ...p.sm, padding: t("sm") },
-    md: { ...p.md, padding: t("md") },
-    base: { ...p.base, padding: t("base") }
+    sm: { ...u.sm, padding: t("sm") },
+    md: { ...u.md, padding: t("md") },
+    base: { ...u.base, padding: t("base") }
   };
 }
-function i(e) {
-  return e ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+function i(e, r) {
+  return r ? e ? "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))]" : e ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
 }
-function f(e, r, t) {
-  return e ? "text-slate-400" : r ? "text-red-600" : t ? "text-black" : "text-slate-400";
+function f(e, r, t, n) {
+  return n ? e ? "text-neutral-100/50" : r ? "text-red-500" : t ? "text-white" : "text-neutral-100" : e ? "text-slate-400" : r ? "text-red-600" : t ? "text-black" : "text-slate-400";
 }
 function d(e, r) {
   return r <= 0 ? "" : e === "sm" ? r >= 3 ? "pr-14" : r === 2 ? "pr-11" : "pr-7" : e === "md" ? r >= 3 ? "pr-16" : r === 2 ? "pr-12" : "pr-8" : r >= 3 ? "pr-20" : r === 2 ? "pr-16" : "pr-10";
@@ -44,6 +44,6 @@ function d(e, r) {
 export {
   f as getInputIconColor,
   d as getInputRightPaddingClass,
-  u as getInputSizes,
+  p as getInputSizes,
   i as getInputStateStyles
 };