@mci-ui/mci-ui 0.0.85 → 0.0.87

package/dist/shared/ui/mciUpload/MciUpload.js

@@ -1,11 +1,11 @@
-import { jsxs as s, jsx as t, Fragment as S } from "react/jsx-runtime";
-import { Upload as re, File as le, Star2 as se, Eye as ae } from "@solar-icons/react";
-import ne from "../../../assets/icons/close.svg.js";
-import { useState as L, useRef as C, useMemo as B, useCallback as o, useEffect as oe } from "react";
-import { uploadLanguages as ie } from "../../lib/uploadLanguage.js";
-import { cn as c } from "../../lib/utils.js";
-import { buildSecureAccept as ce, getAllowedFormatsHint as de, validateFileSize as ue, validateFileType as me, createPreview as pe, getFileIcon as ge, formatFileSize as he } from "./mci-upload.utils.js";
-const be = {
+import { jsxs as s, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { Upload as le, File as se, Star2 as oe, Eye as ne } from "@solar-icons/react";
+import ae from "../../../assets/icons/close.svg.js";
+import { useState as T, useRef as H, useMemo as P, useCallback as c, useEffect as ie } from "react";
+import { uploadLanguages as ce } from "../../lib/uploadLanguage.js";
+import { cn as o } from "../../lib/utils.js";
+import { buildSecureAccept as de, getAllowedFormatsHint as ue, validateFileSize as pe, validateFileType as me, createPreview as be, getFileIcon as ge, formatFileSize as he } from "./mci-upload.utils.js";
+const fe = {
   blue: {
     dropBorder: "border-blue-200 hover:border-blue-300",
     dropBg: "bg-blue-50/40 hover:bg-blue-50/60",
@@ -13,7 +13,6 @@ const be = {
     iconWrap: "text-blue-600",
     title: "text-blue-600",
     hint: "text-slate-500",
-    progress: "bg-blue-600/30",
     progressFill: "bg-blue-600",
     fileIconImg: "bg-blue-50 text-blue-600",
     fileIconDoc: "bg-green-50 text-green-600"
@@ -25,204 +24,227 @@ const be = {
     iconWrap: "text-yellow-700",
     title: "text-yellow-700",
     hint: "text-slate-500",
-    progress: "bg-yellow-600/25",
     progressFill: "bg-yellow-600",
     fileIconImg: "bg-blue-50 text-blue-600",
     fileIconDoc: "bg-green-50 text-green-600"
   }
-}, De = ({
-  multiple: w = !1,
+}, xe = {
+  blue: {
+    dropBorder: "border-blue-800 hover:border-blue-700",
+    dropBg: "bg-blue-950/40 hover:bg-blue-950/60",
+    dropActive: "border-blue-500 bg-blue-950/60",
+    iconWrap: "text-blue-400",
+    title: "text-blue-400",
+    hint: "text-slate-400",
+    progressFill: "bg-blue-500",
+    fileIconImg: "bg-blue-950 text-blue-400",
+    fileIconDoc: "bg-green-950 text-green-400"
+  },
+  yellow: {
+    dropBorder: "border-yellow-800 hover:border-yellow-700",
+    dropBg: "bg-yellow-950/40 hover:bg-yellow-950/60",
+    dropActive: "border-yellow-600 bg-yellow-950/60",
+    iconWrap: "text-yellow-400",
+    title: "text-yellow-400",
+    hint: "text-slate-400",
+    progressFill: "bg-yellow-500",
+    fileIconImg: "bg-blue-950 text-blue-400",
+    fileIconDoc: "bg-green-950 text-green-400"
+  }
+}, je = ({
+  multiple: y = !1,
   accept: h = "*/*",
-  maxSize: y = 10,
-  maxFiles: N = 5,
-  disabled: d = !1,
-  label: O,
-  required: W = !1,
-  error: k,
-  className: z,
-  onFilesChange: b,
-  onUpload: x,
-  showPreview: H = !0,
-  locale: _ = "uz",
-  showFileTypeIcon: q = !0,
-  variant: T = "yellow",
-  customValidator: R
+  maxSize: N = 10,
+  maxFiles: D = 5,
+  disabled: u = !1,
+  label: W,
+  required: z = !1,
+  error: F,
+  className: I,
+  onFilesChange: f,
+  onUpload: w,
+  showPreview: _ = !0,
+  locale: q = "uz",
+  showFileTypeIcon: K = !0,
+  variant: R = "yellow",
+  customValidator: U,
+  darkMode: i = !1
 }) => {
-  const [m, f] = L([]), [$, U] = L(!1), [E, P] = L(!1), D = C(null), a = ie[_], u = B(() => be[T], [T]), G = B(() => ce(h), [h]), J = B(() => de(h), [h]), v = C(/* @__PURE__ */ new Map()), F = o((e) => {
+  const [m, x] = T([]), [$, L] = T(!1), [O, S] = T(!1), A = H(null), n = ce[q], p = P(() => i ? xe[R] : fe[R], [R, i]), G = P(() => de(h), [h]), J = P(() => ue(h), [h]), v = H(/* @__PURE__ */ new Map()), j = c((e) => {
     const l = v.current.get(e);
     l && (URL.revokeObjectURL(l), v.current.delete(e));
-  }, []), j = o(() => {
+  }, []), B = c(() => {
     for (const e of v.current.values())
       URL.revokeObjectURL(e);
     v.current.clear();
   }, []);
-  oe(() => () => {
-    j();
-  }, [j]);
-  const K = o((e) => {
+  ie(() => () => {
+    B();
+  }, [B]);
+  const Q = c((e) => {
     let l = v.current.get(e.id);
-    l || (l = URL.createObjectURL(e.file), v.current.set(e.id, l), setTimeout(() => F(e.id), 5 * 6e4)), window.open(l, "_blank", "noopener,noreferrer");
-  }, [F]), A = o(
+    l || (l = URL.createObjectURL(e.file), v.current.set(e.id, l), setTimeout(() => j(e.id), 5 * 6e4)), window.open(l, "_blank", "noopener,noreferrer");
+  }, [j]), E = c(
     async (e) => {
-      const l = Array.from(e), i = [];
+      const l = Array.from(e), d = [];
       for (const r of l) {
-        if (m.length + i.length >= N) {
-          alert(a.maxFilesError(N));
+        if (m.length + d.length >= D) {
+          alert(n.maxFilesError(D));
           break;
         }
-        if (!ue(r, y)) {
-          alert(a.fileSizeError(r.name, y));
+        if (!pe(r, N)) {
+          alert(n.fileSizeError(r.name, N));
           continue;
         }
-        const n = me(r, h);
-        if (!n.isValid) {
-          n.reason === "blocked" ? alert(a.blockedFileTypeError(r.name)) : alert(a.fileTypeError(r.name));
+        const a = me(r, h);
+        if (!a.isValid) {
+          a.reason === "blocked" ? alert(n.blockedFileTypeError(r.name)) : alert(n.fileTypeError(r.name));
           continue;
         }
-        if (R) {
-          const M = R(r);
-          if (M) {
-            alert(M);
+        if (U) {
+          const k = U(r);
+          if (k) {
+            alert(k);
             continue;
           }
         }
-        const p = await pe(r), g = x ? "uploading" : "success", te = x ? 0 : 100;
-        i.push({
+        const b = await be(r), g = w ? "uploading" : "success", re = w ? 0 : 100;
+        d.push({
           id: Math.random().toString(36).substr(2, 9),
           file: r,
-          preview: p,
-          progress: te,
+          preview: b,
+          progress: re,
           status: g
         });
       }
-      if (i.length > 0) {
-        const r = w ? [...m, ...i] : i;
-        if (f(r), b?.(r.map((n) => n.file)), x) {
-          P(!0);
+      if (d.length > 0) {
+        const r = y ? [...m, ...d] : d;
+        if (x(r), f?.(r.map((a) => a.file)), w) {
+          S(!0);
           try {
-            const n = r.map((p, g) => ({
-              ...p,
+            const a = r.map((b, g) => ({
+              ...b,
               progress: Math.min(100, (g + 1) / r.length * 100)
             }));
-            f(n), await x(n), f(
-              (p) => p.map((g) => ({
+            x(a), await w(a), x(
+              (b) => b.map((g) => ({
                 ...g,
                 status: "success",
                 progress: 100
               }))
             );
-          } catch (n) {
-            f(
-              (p) => p.map((g) => ({
+          } catch (a) {
+            x(
+              (b) => b.map((g) => ({
                 ...g,
                 status: "error",
-                error: n instanceof Error ? n.message : a.uploadFailed
+                error: a instanceof Error ? a.message : n.uploadFailed
               }))
             );
           } finally {
-            P(!1);
+            S(!1);
           }
         }
       }
     },
     [
       m,
-      N,
-      R,
-      a,
+      D,
+      U,
+      n,
       h,
+      N,
       y,
-      w,
-      b,
-      x
+      f,
+      w
     ]
-  ), Q = o(
+  ), V = c(
     (e) => {
-      e.preventDefault(), d || U(!0);
+      e.preventDefault(), u || L(!0);
     },
-    [d]
-  ), V = o((e) => {
-    e.preventDefault(), U(!1);
-  }, []), X = o(
+    [u]
+  ), X = c((e) => {
+    e.preventDefault(), L(!1);
+  }, []), Y = c(
     (e) => {
-      if (e.preventDefault(), U(!1), d) return;
+      if (e.preventDefault(), L(!1), u) return;
       const l = e.dataTransfer.files;
-      l.length > 0 && A(l);
+      l.length > 0 && E(l);
     },
-    [d, A]
-  ), Y = o(
+    [u, E]
+  ), Z = c(
     (e) => {
       const l = e.target.files;
-      l && l.length > 0 && (A(l), D.current && (D.current.value = ""));
+      l && l.length > 0 && (E(l), A.current && (A.current.value = ""));
     },
-    [A]
-  ), Z = o(
+    [E]
+  ), M = c(
     (e) => {
-      F(e), f((l) => {
-        const i = l.filter((r) => r.id !== e);
-        return b?.(i.map((r) => r.file)), i;
+      j(e), x((l) => {
+        const d = l.filter((r) => r.id !== e);
+        return f?.(d.map((r) => r.file)), d;
       });
     },
-    [b, F]
-  ), I = o(() => {
-    j(), f([]), b?.([]);
-  }, [b, j]), ee = o(() => {
-    D.current?.click();
+    [f, j]
+  ), ee = c(() => {
+    B(), x([]), f?.([]);
+  }, [f, B]), te = c(() => {
+    A.current?.click();
   }, []);
-  return /* @__PURE__ */ s("div", { className: c("w-full", z), children: [
-    O && /* @__PURE__ */ s(
+  return /* @__PURE__ */ s("div", { className: o("w-full", I), children: [
+    W && /* @__PURE__ */ s(
       "label",
       {
-        className: c(
+        className: o(
           "mb-2 block text-base font-medium",
-          k ? "text-red-600" : "text-slate-700"
+          F ? "text-red-600" : i ? "text-slate-300" : "text-slate-700"
         ),
         children: [
-          O,
-          W && /* @__PURE__ */ t("span", { className: "ml-1 text-extra-small text-red-600", children: "*" })
+          W,
+          z && /* @__PURE__ */ t("span", { className: "ml-1 text-extra-small text-red-600", children: "*" })
         ]
       }
     ),
     /* @__PURE__ */ s(
       "div",
       {
-        className: c(
+        className: o(
           "group relative flex min-h-[180px] w-full cursor-pointer items-center justify-center rounded-2xl border border-dashed p-6 text-center transition-all duration-300",
-          u.dropBorder,
-          u.dropBg,
-          $ && u.dropActive,
-          d && "cursor-not-allowed opacity-60",
-          k && "border-red-600 bg-red-50/30"
+          p.dropBorder,
+          p.dropBg,
+          $ && p.dropActive,
+          u && "cursor-not-allowed opacity-60",
+          F && (i ? "border-red-500 bg-red-950/30" : "border-red-600 bg-red-50/30")
         ),
-        onDragOver: Q,
-        onDragLeave: V,
-        onDrop: X,
-        onClick: ee,
+        onDragOver: V,
+        onDragLeave: X,
+        onDrop: Y,
+        onClick: te,
         children: [
           /* @__PURE__ */ t(
             "input",
             {
-              ref: D,
+              ref: A,
               type: "file",
-              multiple: w,
+              multiple: y,
               accept: G,
-              onChange: Y,
-              disabled: d,
+              onChange: Z,
+              disabled: u,
               className: "hidden"
             }
           ),
           /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
-            /* @__PURE__ */ t("div", { className: c("flex h-12 w-12 items-center justify-center rounded-xl", u.iconWrap), children: /* @__PURE__ */ t(re, { size: 20 }) }),
-            /* @__PURE__ */ t("p", { className: c("text-base font-medium", u.title), children: a.dropHereTitle }),
-            /* @__PURE__ */ t("p", { className: c("text-sm font-normal", u.hint), children: a.fileRequirements(w, N, y, J) })
+            /* @__PURE__ */ t("div", { className: o("flex h-12 w-12 items-center justify-center rounded-xl", p.iconWrap), children: /* @__PURE__ */ t(le, { size: 20 }) }),
+            /* @__PURE__ */ t("p", { className: o("text-base font-medium", p.title), children: n.dropHereTitle }),
+            /* @__PURE__ */ t("p", { className: o("text-sm font-normal", p.hint), children: n.fileRequirements(y, D, N, J) })
           ] })
         ]
       }
     ),
     m.length > 0 && /* @__PURE__ */ s("div", { className: "mt-4 space-y-3", children: [
       /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ s("span", { className: "text-sm font-medium text-slate-700", children: [
-          a.selectedFiles,
+        /* @__PURE__ */ s("span", { className: o("text-sm font-medium", i ? "text-slate-300" : "text-slate-700"), children: [
+          n.selectedFiles,
           " (",
           m.length,
           ")"
@@ -231,63 +253,64 @@ const be = {
           "button",
           {
             type: "button",
-            onClick: I,
-            disabled: d || E,
+            onClick: ee,
+            disabled: u || O,
             className: "text-sm font-medium text-red-600 disabled:opacity-50",
-            children: a.clearAll
+            children: n.clearAll
           }
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "space-y-3", children: m.map((e) => {
-        const i = !!e.preview ? u.fileIconImg : u.fileIconDoc, r = d || E || e.status === "uploading";
+        const d = !!e.preview ? p.fileIconImg : p.fileIconDoc, r = u || O || e.status === "uploading";
         return /* @__PURE__ */ s(
           "div",
           {
-            className: c(
-              "flex items-center justify-between rounded-2xl border border-slate-200 p-4",
-              e.status === "error" && "border-red-600"
+            className: o(
+              "flex items-center justify-between rounded-2xl border p-4",
+              i ? "border-neutral-700" : "border-slate-200",
+              e.status === "error" && (i ? "border-red-500" : "border-red-600")
             ),
             children: [
               /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-4", children: [
                 /* @__PURE__ */ t(
                   "div",
                   {
-                    className: c(
+                    className: o(
                       "flex h-14 w-14 items-center justify-center rounded-2xl",
-                      i
+                      d
                     ),
-                    children: H && e.preview ? /* @__PURE__ */ t(
+                    children: _ && e.preview ? /* @__PURE__ */ t(
                       "img",
                       {
                         src: e.preview,
                         alt: e.file.name,
                         className: "h-10 w-10 rounded-xl object-cover"
                       }
-                    ) : q ? ge(e.file) : /* @__PURE__ */ t(le, { className: "h-6 w-6 text-slate-500" })
+                    ) : K ? ge(e.file) : /* @__PURE__ */ t(se, { className: "h-6 w-6 text-slate-500" })
                   }
                 ),
                 /* @__PURE__ */ s("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ t("p", { className: "truncate text-lg font-semibold text-primary", children: e.file.name }),
-                  /* @__PURE__ */ s("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500", children: [
+                  /* @__PURE__ */ t("p", { className: o("truncate text-lg font-semibold", i ? "text-slate-100" : "text-primary"), children: e.file.name }),
+                  /* @__PURE__ */ s("div", { className: o("mt-1 flex flex-wrap items-center gap-2 text-sm", i ? "text-slate-400" : "text-slate-500"), children: [
                     /* @__PURE__ */ t("span", { children: he(e.file.size) }),
-                    e.status === "uploading" && /* @__PURE__ */ s(S, { children: [
+                    e.status === "uploading" && /* @__PURE__ */ s(C, { children: [
                       /* @__PURE__ */ t("span", { children: "•" }),
                       /* @__PURE__ */ s("span", { className: "inline-flex items-center", children: [
-                        /* @__PURE__ */ t(se, { className: "mr-1 h-5 w-5 animate-spin" }),
-                        a.uploading
+                        /* @__PURE__ */ t(oe, { className: "mr-1 h-5 w-5 animate-spin" }),
+                        n.uploading
                       ] })
                     ] }),
-                    e.status === "success" && /* @__PURE__ */ s(S, { children: [
+                    e.status === "success" && /* @__PURE__ */ s(C, { children: [
                       /* @__PURE__ */ t("span", { children: "•" }),
-                      /* @__PURE__ */ t("span", { className: "font-normal text-green-600", children: a.success })
+                      /* @__PURE__ */ t("span", { className: "font-normal text-green-600", children: n.success })
                     ] })
                   ] }),
-                  e.status === "uploading" && /* @__PURE__ */ t("div", { className: c("mt-2 h-1.5 w-full rounded-full bg-slate-200"), children: /* @__PURE__ */ t(
+                  e.status === "uploading" && /* @__PURE__ */ t("div", { className: o("mt-2 h-1.5 w-full rounded-full", i ? "bg-neutral-700" : "bg-slate-200"), children: /* @__PURE__ */ t(
                     "div",
                     {
-                      className: c(
+                      className: o(
                         "h-1.5 rounded-full transition-all duration-300",
-                        u.progressFill
+                        p.progressFill
                       ),
                       style: { width: `${e.progress}%` }
                     }
@@ -300,26 +323,26 @@ const be = {
                   "button",
                   {
                     type: "button",
-                    onClick: (n) => {
-                      n.stopPropagation(), r || K(e);
+                    onClick: (a) => {
+                      a.stopPropagation(), r || Q(e);
                     },
                     disabled: r,
-                    className: "rounded-xl p-2 hover:bg-slate-100 hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
-                    title: a.preview,
-                    children: /* @__PURE__ */ t(ae, { size: 20, className: "text-slate-400" })
+                    className: o("rounded-xl p-2 hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", i ? "hover:bg-neutral-800" : "hover:bg-slate-100"),
+                    title: n.preview,
+                    children: /* @__PURE__ */ t(ne, { size: 20, className: "text-slate-400" })
                   }
                 ),
                 /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    onClick: (n) => {
-                      n.stopPropagation(), Z(e.id);
+                    onClick: (a) => {
+                      a.stopPropagation(), M(e.id);
                     },
-                    disabled: d || E,
-                    className: "rounded-xl p-2 text-slate-base hover:bg-slate-100 disabled:opacity-50 hover:cursor-pointer",
-                    title: a.remove,
-                    children: /* @__PURE__ */ t(ne, { className: "h-6 w-6" })
+                    disabled: u || O,
+                    className: o("rounded-xl p-2 disabled:opacity-50 hover:cursor-pointer", i ? "text-slate-400 hover:bg-neutral-800" : "text-slate-base hover:bg-slate-100"),
+                    title: n.remove,
+                    children: /* @__PURE__ */ t(ae, { className: "h-6 w-6" })
                   }
                 )
               ] })
@@ -329,9 +352,9 @@ const be = {
         );
       }) })
     ] }),
-    k && /* @__PURE__ */ t("p", { className: "mt-2 text-sm font-normal text-red-600", children: k })
+    F && /* @__PURE__ */ t("p", { className: "mt-2 text-sm font-normal text-red-600", children: F })
   ] });
 };
 export {
-  De as default
+  je as default
 };

package/dist/types/shared/types/mci-table.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 export type Align = 'left' | 'center' | 'right';
 export type ColumnKey<T> = Extract<keyof T, string>;
+export type MciTablePanelLocale = 'ru' | 'uz';
 export type MciTableColumn<T> = {
     key: ColumnKey<T>;
     title: string;
@@ -38,6 +39,7 @@ export interface MciTableProps<T extends Record<string, unknown>> {
     loading?: boolean;
     skeletonRows?: number;
     noDataText?: string;
+    darkMode?: boolean;
     sort?: MciTableSort<T> | null;
     onSortChange?: (sort: MciTableSort<T> | null) => void;
     className?: string;

package/dist/types/shared/types/ui/breadcrumb.types.d.ts

@@ -9,5 +9,6 @@ export type Variant = 'blue' | 'yellow';
 export type MciBreadcrumbProps = {
     items: BreadcrumbItem[];
     variant?: Variant;
+    darkMode?: boolean;
     className?: string;
 };

package/dist/types/shared/types/ui/button.types.d.ts

@@ -1,15 +1,11 @@
-import { ReactNode } from 'react';
-export type ButtonProps = {
-    children?: ReactNode;
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
     text?: string;
     icon?: ReactNode;
     iconPosition?: 'left' | 'right';
     size?: 'sm' | 'md' | 'base';
     variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'tertiary';
     color?: 'blue' | 'yellow';
+    darkMode?: boolean;
     loading?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    className?: string;
-    type?: 'button' | 'submit' | 'reset';
 };

package/dist/types/shared/types/ui/check.types.d.ts

@@ -1,15 +1,10 @@
-import { ChangeEvent } from 'react';
-export type MciCheckProps = {
+import { InputHTMLAttributes } from 'react';
+export type MciCheckProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> & {
     type?: 'checkbox' | 'radio';
     label?: string;
     supportText?: string;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    className?: string;
     variant?: 'blue' | 'yellow';
-    name?: string;
-    value?: string;
+    darkMode?: boolean;
+    className?: string;
 };

package/dist/types/shared/types/ui/collapse.types.d.ts

@@ -4,6 +4,7 @@ export type CollapseProps = {
     children: ReactNode;
     defaultOpen?: boolean;
     icon?: ReactNode;
+    darkMode?: boolean;
     className?: string;
     contentClassName?: string;
 };

package/dist/types/shared/types/ui/drawer.types.d.ts

@@ -13,4 +13,5 @@ export interface DrawerProps {
     closeOnOverlayClick?: boolean;
     closeOnEscape?: boolean;
     width?: string | number;
+    darkMode?: boolean;
 }

package/dist/types/shared/types/ui/input.types.d.ts

@@ -1,25 +1,14 @@
-import { ChangeEvent, ReactNode } from 'react';
-export type InputProps = {
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className'> & {
     label?: string;
-    placeholder?: string;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel';
     icon?: ReactNode;
     rightIcon?: ReactNode;
     iconPosition?: 'left' | 'right';
     size?: 'sm' | 'md' | 'base';
+    darkMode?: boolean;
     error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    className?: string;
-    name?: string;
-    readOnly?: boolean;
-    maxLength?: number;
     onClear?: () => void;
     showClearButton?: boolean;
-    step?: string | number;
-    autoComplete?: string;
+    className?: string;
 };

package/dist/types/shared/types/ui/modal.types.d.ts

@@ -10,6 +10,7 @@ export interface ModalProps {
     handleClickOutside?: boolean;
     showCloseIcon?: boolean;
     showHeader?: boolean;
+    darkMode?: boolean;
     overlayClassName?: string;
     containerClassName?: string;
     bodyClassName?: string;

package/dist/types/shared/types/ui/pagination.types.d.ts

@@ -9,5 +9,6 @@ export interface PaginationProps {
     showPerPage?: boolean;
     variant?: 'yellow' | 'blue';
     size?: 'medium' | 'large';
+    darkMode?: boolean;
     paginationClassName?: string;
 }

package/dist/types/shared/types/ui/phone.types.d.ts

@@ -2,6 +2,7 @@ export type PhoneInputProps = {
     label?: string;
     placeholder?: string;
     size?: 'sm' | 'md' | 'base';
+    darkMode?: boolean;
     error?: string;
     disabled?: boolean;
     required?: boolean;

package/dist/types/shared/types/ui/picker.types.d.ts

@@ -8,6 +8,7 @@ export interface MciPickerProps {
     onChange?: (value: MciPickerValue) => void;
     placeholder?: string | [string, string];
     label?: string;
+    darkMode?: boolean;
     disabled?: boolean;
     required?: boolean;
     className?: string;