@mci-ui/mci-ui 0.0.86 → 0.0.87

package/dist/shared/ui/mciCheck/MciCheck.js

@@ -1,170 +1,194 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { memo as j, useState as S, useMemo as b, useCallback as L } from "react";
-import $ from "../../../assets/icons/check.svg.js";
-import { cn as r } from "../../lib/utils.js";
-const A = {
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { memo as F, useState as S, useMemo as v, useCallback as H } from "react";
+import L from "../../../assets/icons/check.svg.js";
+import { cn as l } from "../../lib/utils.js";
+const $ = {
   blue: {
     border: "border-blue-600",
     bg: "bg-blue-600",
     hover: "hover:border-blue-600 hover:bg-blue-100",
-    focus: "focus:shadow-blue"
+    focus: "peer-focus-visible:shadow-blue",
+    darkFocus: "peer-focus-visible:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]",
+    darkBorder: "border-blue-500",
+    darkBg: "bg-blue-500",
+    darkHover: "hover:border-blue-500 hover:bg-blue-500"
   },
   yellow: {
     border: "border-yellow-500",
     bg: "bg-yellow-500",
-    hover: "hover:border-yellow-500 hover:bg-yello-100",
-    focus: "focus:ring-2 focus:ring-yellow-300"
+    hover: "hover:border-yellow-500 hover:bg-yellow-100",
+    focus: "peer-focus-visible:ring-2 peer-focus-visible:ring-yellow-300",
+    darkFocus: "peer-focus-visible:ring-2 peer-focus-visible:ring-yellow-300/40",
+    darkBorder: "border-yellow-500",
+    darkBg: "bg-yellow-500",
+    darkHover: "hover:border-yellow-500 hover:bg-yellow-500"
   }
-}, E = j(function({
-  type: x = "checkbox",
+}, A = F(function({
+  type: m = "checkbox",
   label: c,
-  supportText: l,
-  checked: i,
-  onChange: g,
-  error: n,
-  disabled: a = !1,
-  required: h = !1,
-  className: v,
+  supportText: i,
+  checked: u,
+  onChange: d,
+  error: o,
+  disabled: n = !1,
+  required: f = !1,
+  className: w,
   variant: p = "yellow",
-  name: f,
-  value: k
+  darkMode: e = !1,
+  name: g,
+  value: N,
+  ...B
 }) {
-  const [y, w] = S(!1), s = x === "radio", e = b(
-    () => i ?? y,
-    [i, y]
-  ), N = L(
+  const [y, k] = S(!1), s = m === "radio", r = v(
+    () => u ?? y,
+    [u, y]
+  ), C = H(
     (t) => {
-      a || (i === void 0 && w(t.target.checked), g?.(t));
+      n || (u === void 0 && k(t.target.checked), d?.(t));
     },
-    [i, g, a]
-  ), m = b(() => {
-    if (a) {
-      const d = "border-slate-200 bg-slate-100";
+    [u, d, n]
+  ), x = v(() => {
+    if (n) {
+      const b = e ? "border-neutral-200 bg-neutral-300/60" : "border-slate-200 bg-slate-100";
       return s ? {
-        container: d,
-        dot: e ? "bg-slate-300" : "bg-transparent",
-        check: "text-slate-400"
+        container: b,
+        dot: r ? e ? "bg-neutral-100/70" : "bg-slate-300" : "bg-transparent",
+        check: e ? "text-neutral-100/50" : "text-slate-400"
       } : {
-        container: d,
+        container: b,
         dot: "",
-        check: e ? "text-slate-400" : "text-transparent"
+        check: r ? e ? "text-neutral-100/50" : "text-slate-400" : "text-transparent"
       };
     }
-    const t = A[p];
+    const t = $[p];
     if (s) {
-      const d = r(
+      const b = l(
         "border transition-all duration-200",
-        e ? t.border : "border-slate-400",
-        !e && t.hover,
-        t.focus,
-        e && ""
-      ), M = r(
+        r ? e ? t.darkBorder : t.border : e ? "border-neutral-200 bg-transparent" : "border-slate-400",
+        !r && (e ? "hover:border-neutral-100 hover:bg-neutral-300" : t.hover),
+        e ? t.darkFocus : t.focus,
+        r && ""
+      ), j = l(
         "transition-all duration-200 rounded-full",
-        e ? t.bg : "bg-transparent"
+        r ? e ? "bg-white" : t.bg : "bg-transparent"
       );
       return {
-        container: d,
-        dot: M,
+        container: b,
+        dot: j,
         check: ""
       };
     }
     return {
-      container: r(
+      container: l(
         "border transition-all duration-200",
-        e ? r(t.bg, t.border) : "border-slate-400",
-        !e && t.hover,
-        t.focus
+        r ? l(e ? t.darkBg : t.bg, e ? t.darkBorder : t.border) : e ? "border-neutral-200 bg-transparent" : "border-slate-400",
+        !r && (e ? "hover:border-neutral-100 hover:bg-neutral-300" : t.hover),
+        r && e && t.darkHover,
+        e ? t.darkFocus : t.focus
       ),
       dot: "",
-      check: e ? "text-white" : "text-transparent"
+      check: r ? "text-white" : "text-transparent"
     };
-  }, [s, e, a, p]), C = b(() => !c && !l ? null : /* @__PURE__ */ u("div", { className: "flex flex-col", children: [
-    c && /* @__PURE__ */ u(
+  }, [s, r, n, p, e]), _ = v(() => !c && !i ? null : /* @__PURE__ */ h("div", { className: "flex flex-col", children: [
+    c && /* @__PURE__ */ h(
       "span",
       {
-        className: r(
-          "text-base font-medium text-slate-700",
-          n && "text-red-600",
-          a && "text-slate-400"
+        className: l(
+          "text-base font-medium",
+          o && (e ? "text-red-500" : "text-red-600"),
+          !o && (e ? "text-neutral-50" : "text-slate-700"),
+          n && (e ? "text-neutral-50/50" : "text-slate-400")
         ),
         children: [
           c,
-          h && /* @__PURE__ */ o("span", { className: "text-extra-small text-red-600 ml-1", children: "*" })
+          f && /* @__PURE__ */ a("span", { className: "text-extra-small text-red-600 ml-1", children: "*" })
         ]
       }
     ),
-    l && /* @__PURE__ */ o(
+    i && /* @__PURE__ */ a(
       "span",
       {
-        className: r(
-          "text-slate-500 text-base font-normal",
-          a && "text-slate-400"
+        className: l(
+          "text-base font-normal",
+          e ? "text-neutral-100" : "text-slate-500",
+          n && (e ? "text-neutral-100/50" : "text-slate-400")
         ),
-        children: l
+        children: i
       }
     )
-  ] }), [c, l, n, a, h]);
-  return /* @__PURE__ */ u("div", { className: r("flex items-start", v), children: [
-    /* @__PURE__ */ u(
+  ] }), [c, i, o, n, f, e]);
+  return /* @__PURE__ */ h("div", { className: l("flex items-start", w), children: [
+    /* @__PURE__ */ h(
       "label",
       {
-        className: r(
+        className: l(
           "flex items-start gap-2 select-none",
-          a ? "cursor-not-allowed" : "cursor-pointer"
+          n ? "cursor-not-allowed" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ a(
             "input",
             {
-              type: x,
-              checked: e,
-              onChange: N,
-              disabled: a,
-              required: h,
-              className: "sr-only",
-              "aria-invalid": !!n,
-              "aria-describedby": n ? `${f}-error` : void 0,
-              name: f,
-              value: k
+              ...B,
+              type: m,
+              checked: r,
+              onChange: C,
+              disabled: n,
+              required: f,
+              className: "peer sr-only",
+              "aria-invalid": !!o,
+              "aria-describedby": o ? `${g}-error` : void 0,
+              name: g,
+              value: N
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: r(
+              className: l(
                 "relative flex items-center justify-center",
                 s ? "w-5 h-5 rounded-full" : "w-5 h-5 rounded",
-                m.container
+                x.container
               ),
-              children: s ? /* @__PURE__ */ o("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ o(
+              children: s ? /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ a(
                 "span",
                 {
-                  className: r(
+                  className: l(
                     "w-3 h-3 rounded-full transition-all duration-200",
-                    m.dot,
-                    e ? "opacity-100 scale-100" : "opacity-0 scale-50"
+                    x.dot,
+                    r ? "opacity-100 scale-100" : "opacity-0 scale-50"
                   )
                 }
-              ) }) : /* @__PURE__ */ o(
-                $,
+              ) }) : /* @__PURE__ */ a(
+                L,
                 {
-                  className: r(
+                  className: l(
                     "w-4 h-4 stroke-[2.5px] transition-opacity duration-200",
-                    m.check,
-                    e ? "opacity-100" : "opacity-0"
+                    x.check,
+                    r ? "opacity-100" : "opacity-0"
                   )
                 }
               )
             }
           ),
-          C
+          _
         ]
       }
     ),
-    n && /* @__PURE__ */ o("p", { id: `${f}-error`, className: "mt-1 text-extra-small text-red-600", children: n })
+    o && /* @__PURE__ */ a(
+      "p",
+      {
+        id: `${g}-error`,
+        className: l(
+          "mt-1 text-extra-small",
+          e ? "text-red-500" : "text-red-600"
+        ),
+        children: o
+      }
+    )
   ] });
 });
-E.displayName = "MciCheck";
+A.displayName = "MciCheck";
 export {
-  E as default
+  A as default
 };

package/dist/shared/ui/mciCollapse/MciCollapse.js

@@ -1,60 +1,92 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { AltArrowDown as p } from "@solar-icons/react";
-import { useState as i, useRef as b, useEffect as x } from "react";
-import { cn as e } from "../../lib/utils.js";
-function k({
-  title: a,
-  children: l,
-  defaultOpen: c = !1,
-  icon: o,
-  className: d,
-  contentClassName: f
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { AltArrowDown as N } from "@solar-icons/react";
+import { useState as i, useRef as _, useEffect as j } from "react";
+import { cn as t } from "../../lib/utils.js";
+function R({
+  title: c,
+  children: a,
+  defaultOpen: u = !1,
+  icon: l,
+  darkMode: e = !1,
+  className: b,
+  contentClassName: h
 }) {
-  const [t, m] = i(c), [u, h] = i(0), s = b(null);
-  return x(() => {
-    s.current && h(t ? s.current.scrollHeight : 0);
-  }, [t]), /* @__PURE__ */ n("div", { className: e("overflow-hidden rounded-xl border border-slate-200", d), children: [
-    /* @__PURE__ */ n(
-      "button",
-      {
-        onClick: () => m(!t),
-        className: e(
-          "flex w-full items-center justify-between p-5 transition-all duration-300 hover:cursor-pointer",
-          t ? "border-b border-slate-200" : "border-b border-transparent"
-        ),
-        children: [
-          /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-            o && /* @__PURE__ */ r("span", { className: "shrink-0", children: o }),
-            /* @__PURE__ */ r("div", { className: e("text-base font-medium text-black"), children: a })
-          ] }),
-          /* @__PURE__ */ r(
-            p,
-            {
-              weight: "Linear",
-              size: 20,
-              className: e(
-                "shrink-0 transition-transform duration-300 text-slate-400",
-                t && "rotate-180"
+  const [r, d] = i(u), [p, f] = i(0), n = _(null);
+  j(() => {
+    n.current && f(r ? n.current.scrollHeight : 0);
+  }, [r, a]);
+  const g = e ? "border-neutral-200 bg-neutral-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]" : "border-slate-200 bg-white", m = e ? [
+    "bg-neutral-300/70 hover:bg-neutral-200/80",
+    r ? "border-b border-neutral-200 shadow-[inset_0_-1px_0_rgba(255,255,255,0.02)]" : "border-b border-transparent"
+  ] : [
+    "hover:bg-slate-50",
+    r ? "border-b border-slate-200" : "border-b border-transparent"
+  ], x = e ? "text-neutral-50 group-hover:text-white" : "text-black", w = e ? "text-neutral-100" : "text-slate-500", v = e ? "text-neutral-100 group-hover:text-neutral-50" : "text-slate-400", C = e ? "bg-[#22242A]" : "bg-white";
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: t(
+        "overflow-hidden rounded-xl border",
+        g,
+        b
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => d(!r),
+            className: t(
+              "group flex w-full items-center justify-between p-5 transition-all duration-300 hover:cursor-pointer",
+              m
+            ),
+            children: [
+              /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+                l && /* @__PURE__ */ s("span", { className: t("shrink-0", w), children: l }),
+                /* @__PURE__ */ s("div", { className: t("text-base font-medium transition-colors duration-300", x), children: c })
+              ] }),
+              /* @__PURE__ */ s(
+                N,
+                {
+                  weight: "Linear",
+                  size: 20,
+                  className: t(
+                    "shrink-0 transition-all duration-300",
+                    v,
+                    r && "rotate-180"
+                  )
+                }
               )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ r(
-      "div",
-      {
-        className: e(
-          "overflow-hidden transition-all duration-300 ease-out"
+            ]
+          }
         ),
-        style: {
-          height: `${u}px`
-        },
-        children: /* @__PURE__ */ r("div", { ref: s, className: e("p-5", f), children: l })
-      }
-    )
-  ] });
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: t(
+              "overflow-hidden transition-all duration-300 ease-out",
+              C
+            ),
+            style: {
+              height: `${p}px`
+            },
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                ref: n,
+                className: t(
+                  "p-5",
+                  e && "text-neutral-100",
+                  h
+                ),
+                children: a
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  k as default
+  R as default
 };

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

@@ -1,108 +1,126 @@
 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 { useRef as h, useCallback as E, useEffect as x, useMemo as C } from "react";
+import { cn as i } from "../../lib/utils.js";
 import X from "../../../assets/icons/close.svg.js";
-function A({
+function D({
   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,
+  title: a,
+  description: s,
+  showCloseButton: d = !0,
+  drawerClassName: v,
+  contentClassName: y,
+  closeOnOverlayClick: g = !0,
   closeOnEscape: z = !0,
-  width: s = 572
+  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 = E(() => 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(
     () => ({
-      "--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";
+    [e, l, o]
+  ), N = !!(a || s || d), 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", $ = 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: [
     /* @__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: g ? 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",
+        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,
+          $,
           "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" })
-              }
-            )
-          ] }),
+          N && /* @__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(
+                      X,
+                      {
+                        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: `shrink-0 flex items-center justify-end border-t ${r ? "border-neutral-200" : "border-slate-200"} px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap`,
+              children: m
+            }
+          )
         ]
       }
     )
   ] });
 }
 export {
-  A as default
+  D as default
 };