@mci-ui/mci-ui 0.0.86 → 0.0.87

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

@@ -3,4 +3,5 @@ export type SkeletonProps = {
     height?: string | number;
     className?: string;
     variant?: 'default' | 'circle' | 'rounded';
+    darkMode?: boolean;
 };

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

@@ -10,6 +10,7 @@ export type TabsProps = {
     tabs: Tab[];
     defaultTab?: string;
     position?: 'top' | 'bottom' | 'left' | 'right';
+    darkMode?: boolean;
     className?: string;
     tabListClassName?: string;
     contentClassName?: string;

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

@@ -3,6 +3,7 @@ export type TagProps = {
     children: ReactNode;
     variant?: 'success' | 'warning' | 'error' | 'gray' | 'blue';
     size?: 'sm' | 'md' | 'lg';
+    darkMode?: boolean;
     icon?: ReactNode;
     iconPosition?: 'left' | 'right';
     rounded?: boolean;

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

@@ -1,12 +1,8 @@
-export type TextareaProps = {
+import { TextareaHTMLAttributes } from 'react';
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'className'> & {
     label?: string;
-    placeholder?: string;
-    value?: string;
+    darkMode?: boolean;
     onChange?: (value: string) => void;
-    required?: boolean;
-    disabled?: boolean;
     error?: string;
     className?: string;
-    rows?: number;
-    name?: string;
 };

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

@@ -6,5 +6,6 @@ export interface ToastProps {
     type?: ToastType;
     duration?: number;
     action?: ReactNode;
+    darkMode?: boolean;
     onClose?: () => void;
 }

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

@@ -1,8 +1,9 @@
-export type ToggleProps = {
+import { ButtonHTMLAttributes } from 'react';
+export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type' | 'className' | 'onChange'> & {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
-    disabled?: boolean;
     variant?: 'blue' | 'yellow';
+    darkMode?: boolean;
     label?: string;
     supportText?: string;
     className?: string;

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

@@ -24,4 +24,5 @@ export interface MciUploadProps {
     showFileTypeIcon?: boolean;
     customValidator?: (file: File) => string | null;
     variant?: 'yellow' | 'blue';
+    darkMode?: boolean;
 }

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

@@ -1,2 +1,2 @@
 import { ModalProps } from '../../types/ui/modal.types';
-export default function MciModal({ show, setShow, title, description, Header, Body, footer, handleClickOutside, showCloseIcon, showHeader, overlayClassName, containerClassName, bodyClassName, footerClassName, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default function MciModal({ show, setShow, title, description, Header, Body, footer, handleClickOutside, showCloseIcon, showHeader, darkMode, overlayClassName, containerClassName, bodyClassName, footerClassName, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciBreadcrumb/MciBreadcrumb.d.ts

@@ -1,2 +1,2 @@
 import { MciBreadcrumbProps } from '../../types/ui/breadcrumb.types';
-export default function MciBreadcrumb({ items, variant, className, }: MciBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export default function MciBreadcrumb({ items, variant, darkMode, className, }: MciBreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciButton/MciButton.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from '../../types/ui/button.types';
-export default function MciButton({ children, text, icon, iconPosition, size, variant, color, loading, disabled, onClick, className, type, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function MciButton({ children, text, icon, iconPosition, size, variant, color, darkMode, loading, disabled, className, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciCollapse/MciCollapse.d.ts

@@ -1,2 +1,2 @@
 import { CollapseProps } from '../../types/ui/collapse.types';
-export default function MciCollapse({ title, children, defaultOpen, icon, className, contentClassName, }: CollapseProps): import("react/jsx-runtime").JSX.Element;
+export default function MciCollapse({ title, children, defaultOpen, icon, darkMode, className, contentClassName, }: CollapseProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciDrawer/MciDrawer.d.ts

@@ -1,2 +1,2 @@
 import { DrawerProps } from '../../types/ui/drawer.types';
-export default function MciDrawer({ isOpen, onClose, position, children, footer, title, description, showCloseButton, drawerClassName, contentClassName, closeOnOverlayClick, closeOnEscape, width, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default function MciDrawer({ isOpen, onClose, position, children, footer, title, description, showCloseButton, drawerClassName, contentClassName, closeOnOverlayClick, closeOnEscape, width, darkMode, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciInput/MciInput.d.ts

@@ -1,4 +1,15 @@
 import { default as React } from 'react';
-import { InputProps } from '../../types/ui/input.types';
-declare const MciInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const MciInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type" | "size"> & {
+    label?: string;
+    type?: "text" | "email" | "password" | "number" | "tel";
+    icon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    size?: "sm" | "md" | "base";
+    darkMode?: boolean;
+    error?: string;
+    onClear?: () => void;
+    showClearButton?: boolean;
+    className?: string;
+} & React.RefAttributes<HTMLInputElement>>;
 export default MciInput;

package/dist/types/shared/ui/mciInput/mci-input.utils.d.ts

@@ -14,7 +14,7 @@ export declare function getInputSizes(hasLeftIcon: boolean, hasRightIcon: boolea
     md: InputSizeWithPadding;
     base: InputSizeWithPadding;
 };
-export declare function getInputStateStyles(error?: string): "border-red-600 focus:border-red-600 shadow-red" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
-export declare function getInputIconColor(disabled: boolean, error: string | undefined, isFocused: boolean): "text-slate-400" | "text-red-600" | "text-black";
+export declare function getInputStateStyles(error: string | undefined, darkMode: boolean): "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))]" | "border-red-600 focus:border-red-600 shadow-red" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+export declare function getInputIconColor(disabled: boolean, error: string | undefined, isFocused: boolean, darkMode: boolean): "text-neutral-100/50" | "text-slate-400" | "text-white" | "text-red-500" | "text-red-600" | "text-neutral-100" | "text-black";
 export declare function getInputRightPaddingClass(size: 'sm' | 'md' | 'base', rightControlsCount: number): "" | "pr-14" | "pr-11" | "pr-7" | "pr-16" | "pr-12" | "pr-8" | "pr-20" | "pr-10";
 export {};

package/dist/types/shared/ui/mciPagination/MciPagination.d.ts

@@ -1,2 +1,2 @@
 import { PaginationProps } from '../../types/ui/pagination.types';
-export default function MciPagination({ totalItems, currentPage, perPage, onPageChange, onPerPageChange, siblingCount, perPageOptions, showPerPage, variant, size, paginationClassName }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export default function MciPagination({ totalItems, currentPage, perPage, onPageChange, onPerPageChange, siblingCount, perPageOptions, showPerPage, variant, size, darkMode, paginationClassName }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/shared/ui/mciPhone/mci-phone.utils.d.ts

@@ -28,5 +28,5 @@ export declare const PHONE_SIZES: {
     };
 };
 export declare function formatPhoneValue(input: string): string;
-export declare function getPhoneStateStyles(hasError?: string): "border-red-600 focus:border-red-600 shadow-red" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
-export declare function getPhoneIconColor(disabled: boolean, error: string | undefined, isFocused: boolean): "text-slate-400" | "text-red-600" | "text-black";
+export declare function getPhoneStateStyles(hasError?: string, darkMode?: boolean): "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))]" | "border-red-600 focus:border-red-600 shadow-red" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+export declare function getPhoneIconColor(disabled: boolean, error: string | undefined, isFocused: boolean, darkMode?: boolean): "text-neutral-100/50" | "text-slate-400" | "text-white" | "text-red-500" | "text-red-600" | "text-neutral-100" | "text-black";

package/dist/types/shared/ui/mciSelect/mci-select.utils.d.ts

@@ -35,5 +35,5 @@ export declare const SELECT_SIZES: {
     };
 };
 export declare function getFilteredOptions(options: Option[], searchTerm: string, searchable: boolean, hasExternalSearch: boolean): Option[];
-export declare function getSelectStateStyles(disabled: boolean, error?: string): "border-slate-200 bg-slate-100 text-slate-400 cursor-not-allowed" | "border-red-600 focus:border-red-600 shadow-red bg-white" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600 bg-white";
-export declare function getSelectIconColor(disabled: boolean, error: string | undefined, isOpen: boolean, isFocused: boolean): "text-slate-400" | "text-red-600" | "text-black";
+export declare function getSelectStateStyles(disabled: boolean, error?: string, darkMode?: boolean): "border-neutral-200 bg-neutral-300 text-neutral-100/50 cursor-not-allowed" | "border-red-500 bg-transparent text-neutral-50 hover:border-red-500" | "border-neutral-200 bg-transparent text-neutral-50 hover:border-neutral-100" | "border-slate-200 bg-slate-100 text-slate-400 cursor-not-allowed" | "border-red-600 focus:border-red-600 shadow-red bg-white" | "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600 bg-white";
+export declare function getSelectIconColor(disabled: boolean, error: string | undefined, isOpen: boolean, isFocused: boolean, darkMode?: boolean): "text-neutral-100/50" | "text-slate-400" | "text-white" | "text-red-500" | "text-red-600" | "text-neutral-100" | "text-black";

package/dist/types/shared/ui/mciSkeleton/MciSkeleton.d.ts

@@ -1,2 +1,2 @@
 import { SkeletonProps } from '../../types/ui/skeleton.types';
-export default function MciSkeleton({ className, variant, width, height, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default function MciSkeleton({ className, variant, width, height, darkMode, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTable/MciTable.d.ts

@@ -1,2 +1,2 @@
 import { MciTableProps } from '../../types/mci-table.types.ts';
-export default function MciTable<T extends Record<string, unknown>>({ columns, data, loading, skeletonRows, noDataText, sort: externalSort, onSortChange, className, headerClassName, bodyClassName, rowKey, rowSelection, }: MciTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function MciTable<T extends Record<string, unknown>>({ columns, data, loading, skeletonRows, noDataText, sort: externalSort, onSortChange, className, headerClassName, bodyClassName, darkMode, rowKey, rowSelection, }: MciTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTable/MciTableColumnsPanel.d.ts

@@ -10,6 +10,7 @@ type Props<T extends Record<string, unknown>> = {
     onMoveByKey?: (from: ColumnKey<T>, to: ColumnKey<T>, position: DropPosition) => void;
     minVisible?: number;
     locale?: MciTablePanelLocale;
+    darkMode?: boolean;
 };
-export default function MciTableColumnsPanel<T extends Record<string, unknown>>({ open, onClose, columns, hidden, onToggle, onMove, onMoveByKey, minVisible, locale, }: Props<T>): import("react/jsx-runtime").JSX.Element | null;
+export default function MciTableColumnsPanel<T extends Record<string, unknown>>({ open, onClose, columns, hidden, onToggle, onMove, onMoveByKey, minVisible, locale, darkMode, }: Props<T>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/shared/ui/mciTabs/MciTabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from '../../types/ui/tabs.types';
-export default function MciTabs({ tabs, defaultTab, position, className, tabListClassName, contentClassName, extra, onChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function MciTabs({ tabs, defaultTab, position, darkMode, className, tabListClassName, contentClassName, extra, onChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTag/MciTag.d.ts

@@ -1,2 +1,2 @@
 import { TagProps } from '../../types/ui/tag.types';
-export default function MciTag({ children, variant, size, icon, iconPosition, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export default function MciTag({ children, variant, size, darkMode, icon, iconPosition, rounded, className, }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTextarea/MciTextarea.d.ts

@@ -1,3 +1,8 @@
-import { TextareaProps } from '../../types/ui/textarea.types';
-declare const MciTextarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+declare const MciTextarea: import('react').ForwardRefExoticComponent<Omit<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "onChange"> & {
+    label?: string;
+    darkMode?: boolean;
+    onChange?: (value: string) => void;
+    error?: string;
+    className?: string;
+} & import('react').RefAttributes<HTMLTextAreaElement>>;
 export default MciTextarea;

package/dist/types/shared/ui/mciToast/mci-toast.utils.d.ts

@@ -5,30 +5,58 @@ export declare const TOAST_STYLES: {
     readonly bg: {
         readonly success: "bg-green-50";
         readonly error: "bg-red-50";
-        readonly warning: "bg-orange-50";
+        readonly warning: "bg-yellow-50";
         readonly info: "bg-blue-50";
         readonly loading: "bg-slate-50";
     };
+    readonly bgDark: {
+        readonly success: "bg-green-950";
+        readonly error: "bg-red-950";
+        readonly warning: "bg-yellow-900";
+        readonly info: "bg-blue-900";
+        readonly loading: "bg-slate-900";
+    };
     readonly line: {
         readonly success: "bg-green-600";
         readonly error: "bg-red-600";
-        readonly warning: "bg-orange-600";
+        readonly warning: "bg-yellow-600";
         readonly info: "bg-blue-600";
         readonly loading: "bg-slate-600";
     };
+    readonly lineDark: {
+        readonly success: "bg-green-400";
+        readonly error: "bg-red-400";
+        readonly warning: "bg-yellow-400";
+        readonly info: "bg-blue-400";
+        readonly loading: "bg-slate-400";
+    };
     readonly text: {
         readonly success: "text-green-600";
         readonly error: "text-red-600";
-        readonly warning: "text-orange-600";
+        readonly warning: "text-yellow-600";
         readonly info: "text-blue-600";
         readonly loading: "text-slate-600";
     };
+    readonly textDark: {
+        readonly success: "text-green-400";
+        readonly error: "text-red-400";
+        readonly warning: "text-yellow-400";
+        readonly info: "text-blue-400";
+        readonly loading: "text-slate-400";
+    };
     readonly action: {
         readonly success: "text-green-600";
         readonly error: "text-red-600";
-        readonly warning: "text-orange-600";
+        readonly warning: "text-yellow-600";
         readonly info: "text-blue-600";
         readonly loading: "text-slate-600";
     };
+    readonly actionDark: {
+        readonly success: "text-green-400";
+        readonly error: "text-red-400";
+        readonly warning: "text-yellow-400";
+        readonly info: "text-blue-400";
+        readonly loading: "text-slate-400";
+    };
 };
 export declare function getOrCreateToastContainer(): HTMLElement;

package/dist/types/shared/ui/mciToggle/MciToggle.d.ts

@@ -1,2 +1,2 @@
 import { ToggleProps } from '../../types/ui/toggle.types';
-export default function MciToggle({ checked, onChange, disabled, variant, label, supportText, className, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export default function MciToggle({ checked, onChange, disabled, variant, darkMode, label, supportText, className, ...rest }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mci-ui/mci-ui",
   "private": false,
-  "version": "0.0.86",
+  "version": "0.0.87",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",