@megha-ui/react 1.2.179 → 1.2.181

package/dist/components/button/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Button = ({ text, color, icon, fontSize, fontWeight, onClick, gap = "0.5rem", borderWidth = 1, borderColor, borderRadius = "0.25rem", border = true, backgroundColor, borderStyle = "solid", cursor = "pointer", type, width, paddingBottom = "0.35rem", paddingLeft = "0.65rem", paddingRight = "0.65rem", paddingTop = "0.35rem", marginBottom, marginLeft, marginRight, marginTop, disabled = false, style, className, iconPosition = "before", textEleClass = "", }) => {
     const buttonStyle = Object.assign({ color,
         fontSize,
-        fontWeight, display: "flex", alignItems: "center", justifyContent: "center", gap, cursor: disabled ? "not-allowed" : cursor, borderColor, backgroundColor: disabled ? "#D3D3D3" : backgroundColor, borderWidth, border: border ? `${borderWidth} ${borderStyle} ${borderColor}` : "none", borderRadius, fontFamily: "var(--font-family)", width,
+        fontWeight, display: "flex", alignItems: "center", justifyContent: "center", gap, cursor: disabled ? "not-allowed" : cursor, borderColor, backgroundColor: disabled ? "var(--disabled-bg)" : backgroundColor, borderWidth, border: border ? `${borderWidth} ${borderStyle} ${borderColor}` : "none", borderRadius, fontFamily: "var(--font-family)", width,
         paddingBottom,
         paddingLeft,
         paddingRight,

package/dist/components/chat/components/ChatDetails.js

@@ -29,7 +29,7 @@ const ChatDetails = ({ selectedUser, currentUserId }) => {
     if (!selectedUser) {
         return _jsx("div", { className: "wk-chat-placeholder", style: { flex: 1, padding: 16 }, children: "Select a chat" });
     }
-    return (_jsxs("div", { className: "wk-chat-details", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "wk-chat-header", style: { display: "flex", alignItems: "center", padding: "8px", borderBottom: "1px solid #f5f5f5" }, children: [_jsx("div", { className: "wk-chat-user-icon", style: {
+    return (_jsxs("div", { className: "wk-chat-details", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "wk-chat-header", style: { display: "flex", alignItems: "center", padding: "8px", borderBottom: "1px solid var(--divider, #f5f5f5)" }, children: [_jsx("div", { className: "wk-chat-user-icon", style: {
                             width: 32,
                             height: 32,
                             borderRadius: "50%",
@@ -47,15 +47,15 @@ const ChatDetails = ({ selectedUser, currentUserId }) => {
                             display: "flex",
                             justifyContent: m.senderId === currentUserId ? "flex-end" : "flex-start",
                         }, children: _jsx("div", { style: {
-                                background: m.senderId === currentUserId ? "#F9F9F9" : "#EAF2FA",
+                                background: m.senderId === currentUserId ? "var(--background)" : "var(--background)",
                                 padding: "6px 8px",
                                 borderRadius: 4,
                                 maxWidth: "70%",
-                            }, children: m.text }) }, m.id))), _jsx("div", { ref: endRef })] }), _jsxs("div", { className: "wk-chat-input", style: { display: "flex", padding: 8, borderTop: "1px solid #f5f5f5" }, children: [_jsx("input", { type: "text", value: newMessage, onChange: (e) => setNewMessage(e.target.value), onKeyDown: (e) => {
+                            }, children: m.text }) }, m.id))), _jsx("div", { ref: endRef })] }), _jsxs("div", { className: "wk-chat-input", style: { display: "flex", padding: 8, borderTop: "1px solid var(--divider, #f5f5f5)" }, children: [_jsx("input", { type: "text", value: newMessage, onChange: (e) => setNewMessage(e.target.value), onKeyDown: (e) => {
                             if (e.key === "Enter") {
                                 e.preventDefault();
                                 handleSend();
                             }
-                        }, style: { flex: 1, border: "1px solid #dbdfe9", borderRadius: 4, padding: "6px" } }), _jsx("button", { onClick: handleSend, style: { marginLeft: 8, background: "transparent", border: "none", cursor: "pointer" }, children: _jsx(VscSend, { size: 20 }) })] })] }));
+                        }, style: { flex: 1, border: "1px solid var(--form-border-color, #dbdfe9)", borderRadius: 4, padding: "6px" } }), _jsx("button", { onClick: handleSend, style: { marginLeft: 8, background: "transparent", border: "none", cursor: "pointer" }, children: _jsx(VscSend, { size: 20 }) })] })] }));
 };
 export default ChatDetails;

package/dist/components/chat/components/ChatList.js

@@ -27,7 +27,7 @@ const ChatList = ({ users, onSelectUser, selectedUserId, unreadCounts = {}, }) =
                     padding: "8px",
                     cursor: "pointer",
                     display: "flex",
-                    borderBottom: "1px solid #f5f5f5",
+                    borderBottom: "1px solid var(--divider, #f5f5f5)",
                 }, children: [_jsx("div", { className: "wk-chat-user-icon", style: {
                             width: 32,
                             height: 32,
@@ -41,7 +41,7 @@ const ChatList = ({ users, onSelectUser, selectedUserId, unreadCounts = {}, }) =
                             textTransform: "uppercase",
                         }, children: user.isGroup ? (_jsx(FaUsers, {})) : (`${(_a = user.firstName) === null || _a === void 0 ? void 0 : _a[0]}${(_b = user.lastName) === null || _b === void 0 ? void 0 : _b[0]}`) }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: { fontWeight: "bold" }, children: user.isGroup
                                     ? user.firstName
-                                    : `${user.firstName} ${user.lastName}` }), _jsx("div", { style: { fontSize: "0.8rem", color: "#555" }, children: user.latestMessageText || "No messages yet" })] }), unreadCounts[user.id] > 0 && (_jsx("span", { style: {
+                                    : `${user.firstName} ${user.lastName}` }), _jsx("div", { style: { fontSize: "0.8rem", color: "var(--foreground)" }, children: user.latestMessageText || "No messages yet" })] }), unreadCounts[user.id] > 0 && (_jsx("span", { style: {
                             marginLeft: "auto",
                             background: "#0096c7",
                             color: "#fff",
@@ -52,7 +52,7 @@ const ChatList = ({ users, onSelectUser, selectedUserId, unreadCounts = {}, }) =
                             alignItems: "center",
                             justifyContent: "center",
                             fontSize: "0.75rem",
-                        }, children: unreadCounts[user.id] })), _jsx("div", { style: { marginLeft: 8, fontSize: "0.75rem", color: "#888" }, children: formatTimestamp(user.latestMessageTimestamp) })] }, user.id));
+                        }, children: unreadCounts[user.id] })), _jsx("div", { style: { marginLeft: 8, fontSize: "0.75rem", color: "var(--foreground)" }, children: formatTimestamp(user.latestMessageTimestamp) })] }, user.id));
         })) : (_jsx("div", { style: { padding: 16, textAlign: "center" }, children: _jsx(Loader, { size: 24 }) })) }));
 };
 export default ChatList;

package/dist/components/chat/index.js

@@ -4,6 +4,6 @@ import ChatList from "./components/ChatList";
 import ChatDetails from "./components/ChatDetails";
 const Chat = ({ users, currentUserId }) => {
     const [selectedUser, setSelectedUser] = useState(null);
-    return (_jsxs("div", { className: "wk-chat-container", style: { display: "flex", border: "1px solid #dbdfe9", height: "400px" }, children: [_jsx(ChatList, { users: users, onSelectUser: setSelectedUser, selectedUserId: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.id }), _jsx(ChatDetails, { selectedUser: selectedUser, currentUserId: currentUserId })] }));
+    return (_jsxs("div", { className: "wk-chat-container", style: { display: "flex", border: "1px solid var(--form-border-color, #dbdfe9)", height: "400px" }, children: [_jsx(ChatList, { users: users, onSelectUser: setSelectedUser, selectedUserId: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.id }), _jsx(ChatDetails, { selectedUser: selectedUser, currentUserId: currentUserId })] }));
 };
 export default Chat;

package/dist/components/dropdown/index.js

@@ -238,13 +238,13 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         paddingBottom: 6,
         paddingLeft: "1rem",
         paddingRight: "1rem",
-        borderBottom: "1px solid #dddddd",
+        borderBottom: "1px solid var(--divider-strong, #dddddd)",
         cursor: "pointer",
     };
     const listItemDisabledStyle = {
         cursor: "not-allowed",
-        color: "#a0a0a0",
-        backgroundColor: "#f5f5f5",
+        color: "var(--muted, #a0a0a0)",
+        backgroundColor: "var(--disabled-bg)",
         pointerEvents: "none",
     };
     const listItemHoverStyle = {
@@ -304,14 +304,14 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                             : placeholder }), _jsxs("div", { style: {
                                     display: "flex",
                                     alignItems: "center",
-                                }, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: { color: "#dbdfe9", fontSize: "1rem" }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid #f5f5f5", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
+                                }, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: { color: "var(--form-border-color, #dbdfe9)", fontSize: "1rem" }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
                                         width: "100%",
                                         padding: "0.5rem",
                                         boxSizing: "border-box",
                                         border: "1px solid",
                                         borderColor: searchBorderColor,
                                         borderRadius: 4,
-                                    } }) })), isSelectAll && isMultiple && filteredOptions.length > 0 && (_jsxs("li", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (-1 === highlightIndex ? listItemHoverStyle : {})), { borderBottom: "1px solid #dddddd", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
+                                    } }) })), isSelectAll && isMultiple && filteredOptions.length > 0 && (_jsxs("li", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (-1 === highlightIndex ? listItemHoverStyle : {})), { borderBottom: "1px solid var(--divider-strong, #dddddd)", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
                                     setHighlightIndex(-1);
                                 }, onClick: () => onSelectChange ? handleAllItemSelect() : handleAllSelect(), children: [_jsx("div", { style: { marginRight: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues
                                                 .sort((a, b) => (a > b ? -1 : 1))
@@ -337,7 +337,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                         ? selectedItemStyle
                                         : {})), { borderBottom: index === filteredOptions.length - 1
                                             ? "none"
-                                            : "1px solid #dddddd", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
+                                            : "1px solid var(--divider-strong, #dddddd)", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
                                         if (!option.disabled) {
                                             setHighlightIndex(index);
                                         }
@@ -350,7 +350,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                     alignItems: "center",
                                     justifyContent: "end",
                                     padding: "0.75rem 0.5rem",
-                                    borderTop: "1px solid #f5f5f5",
+                                    borderTop: "1px solid var(--divider, #f5f5f5)",
                                 }, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
                                         onApplyChange(intermediateValues);
                                         setIsOpen(false);

package/dist/components/grid/index.js

@@ -1155,7 +1155,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
     // };
     return (_jsxs("div", { style: {
             height,
-            backgroundColor: isFullScreen ? "white" : "transparent",
+            backgroundColor: isFullScreen ? "var(--background)" : "transparent",
         }, className: wrapperClass, ref: entrieGridRef, children: [isOpen && (_jsx("div", { style: {
                     position: "fixed",
                     width: "100vw",
@@ -1170,7 +1170,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                 }, onClick: closeSetting, ref: modalContent, children: _jsxs("div", { style: {
                         height: "100vh",
                         width: "20rem",
-                        background: "#fff",
+                        background: "var(--background)",
                         overflow: "hidden",
                         display: "flex",
                         flexDirection: "column",
@@ -1395,7 +1395,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
-                            background: "#fff",
+                            background: "var(--background)",
                         }, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [(paginate ? paginatedData : sortedData).map((item, index) => {
                                     var _a, _b, _c, _d;
                                     if (paginate) {

package/dist/components/grid/utils/gridHeader.js

@@ -368,7 +368,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                     visibility: ((_20 = headerColumns.find((column) => column.key === _groupBy)) === null || _20 === void 0 ? void 0 : _20.search)
                                                                         ? "visible"
                                                                         : "hidden",
-                                                                }, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_22 = searchQueries[((_21 = headerColumns.find((column) => column.key === _groupBy)) === null || _21 === void 0 ? void 0 : _21.key) || ""]) === null || _22 === void 0 ? void 0 : _22.type) ||
+                                                                }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_22 = searchQueries[((_21 = headerColumns.find((column) => column.key === _groupBy)) === null || _21 === void 0 ? void 0 : _21.key) || ""]) === null || _22 === void 0 ? void 0 : _22.type) ||
                                                             defaultSearchOperation ||
                                                             "contains", checkboxWrapper: checkboxWrapper })) : (_jsx(TextFilterDropdown, { columnIndex: -1, combined: false, headerDropdownIndex: headerDropdownIndex, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
                                                             var _a, _b;
@@ -418,7 +418,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                     visibility: ((_37 = headerColumns.find((column) => column.key === _groupBy)) === null || _37 === void 0 ? void 0 : _37.search)
                                                                         ? "visible"
                                                                         : "hidden",
-                                                                }, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) : (_jsx(DateInput, { value: (_39 = searchQueries[((_38 = headerColumns.find((column) => column.key === _groupBy)) === null || _38 === void 0 ? void 0 : _38.key) || ""]) === null || _39 === void 0 ? void 0 : _39.text.split("to")[0], placeholder: `asd Filter ${(_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.label}`, onChange: (value) => {
+                                                                }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { value: (_39 = searchQueries[((_38 = headerColumns.find((column) => column.key === _groupBy)) === null || _38 === void 0 ? void 0 : _38.key) || ""]) === null || _39 === void 0 ? void 0 : _39.text.split("to")[0], placeholder: `asd Filter ${(_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.label}`, onChange: (value) => {
                                                                     var _a, _b, _c;
                                                                     return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
                                                                         defaultSearchOperation ||
@@ -437,7 +437,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                     visibility: ((_44 = headerColumns.find((column) => column.key === _groupBy)) === null || _44 === void 0 ? void 0 : _44.search)
                                                                         ? "visible"
                                                                         : "hidden",
-                                                                }, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), activeSearchType: ((_46 = searchQueries[((_45 = headerColumns.find((column) => column.key === _groupBy)) === null || _45 === void 0 ? void 0 : _45.key) || ""]) === null || _46 === void 0 ? void 0 : _46.type) ||
+                                                                }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_46 = searchQueries[((_45 = headerColumns.find((column) => column.key === _groupBy)) === null || _45 === void 0 ? void 0 : _45.key) || ""]) === null || _46 === void 0 ? void 0 : _46.type) ||
                                                             defaultSearchOperation ||
                                                             "contains", searchInput: (search &&
                                                             ((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.search) && (_jsx("div", { style: {
@@ -503,9 +503,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                         onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
                                     }, value: ((_59 = searchQueries[((_58 = headerColumns.find((column) => column.key === _groupBy)) === null || _58 === void 0 ? void 0 : _58.key) || ""]) === null || _59 === void 0 ? void 0 : _59.text) || "", disabled: !((_60 = headerColumns.find((column) => column.key === _groupBy)) === null || _60 === void 0 ? void 0 : _60.search), extraWrapperStyle: {
                                         background: ((_61 = headerColumns.find((column) => column.key === _groupBy)) === null || _61 === void 0 ? void 0 : _61.search)
-                                            ? "#fff"
-                                            : "#eee",
-                                    }, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))] }, (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.key)) }));
+                                            ? "var(--background)"
+                                            : "var(--disabled-bg)",
+                                    }, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))] }, (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.key)) }));
             }), headerColumns
                 .filter((column) => !groupBy.includes(column.key))
                 .map((column, colIndex) => {
@@ -609,7 +609,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                         visibility: column.search
                                                                             ? "visible"
                                                                             : "hidden",
-                                                                    }, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_h = searchQueries[column.key]) === null || _h === void 0 ? void 0 : _h.type) ||
+                                                                    }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_h = searchQueries[column.key]) === null || _h === void 0 ? void 0 : _h.type) ||
                                                                 defaultSearchOperation ||
                                                                 "contains", checkboxWrapper: checkboxWrapper, searchInput: search &&
                                                                 column.search && (_jsx("div", { style: {
@@ -639,7 +639,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                             ? "var(--background)"
                                                                             : "var(--disabled-bg)",
                                                                     }, placeholder: "Search", value: ((_j = searchQueries[column.key]) === null || _j === void 0 ? void 0 : _j.text) ||
-                                                                        "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) })) })) : (_jsx(TextFilterDropdown, { combined: false, columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
+                                                                        "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) })) })) : (_jsx(TextFilterDropdown, { combined: false, columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
                                                                 column.dataType === "currency"
                                                                 ? numberTypeSearch.includes(item.value)
                                                                 : column.dataType === "date"
@@ -686,7 +686,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                         visibility: column.search
                                                                             ? "visible"
                                                                             : "hidden",
-                                                                    }, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) : (_jsx(DateInput, { value: (_q = searchQueries[column.key]) === null || _q === void 0 ? void 0 : _q.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
+                                                                    }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { value: (_q = searchQueries[column.key]) === null || _q === void 0 ? void 0 : _q.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
                                                                         var _a;
                                                                         return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
                                                                             defaultSearchOperation ||
@@ -705,7 +705,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                         visibility: column.search
                                                                             ? "visible"
                                                                             : "hidden",
-                                                                    }, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), activeSearchType: ((_s = searchQueries[column.key]) === null || _s === void 0 ? void 0 : _s.type) ||
+                                                                    }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_s = searchQueries[column.key]) === null || _s === void 0 ? void 0 : _s.type) ||
                                                                 defaultSearchOperation ||
                                                                 "contains", searchInput: (search && column.search && (_jsx("div", { style: {
                                                                     padding: "0.5rem",
@@ -733,7 +733,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                             ? "var(--background)"
                                                                             : "var(--disabled-bg)",
                                                                     }, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
-                                                                        "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
+                                                                        "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
                                                                 null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
                                         marginTop: "0.5rem",
                                         width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]) ||

package/dist/components/grid/utils/groupedGridDetails.js

@@ -91,8 +91,8 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
                             }, className: `group-column ${item.key}`, onClick: () => updateRowOpened(item.groupedValue), children: [_jsx("span", { style: {
                                         fontSize: "inherit",
                                         marginRight: "0.5rem",
-                                        color: "black",
-                                        background: "#dedede",
+                                        color: "var(--foreground)",
+                                        background: "var(--disabled-bg)",
                                         width: "1rem",
                                         height: "1rem",
                                         flexGrow: 0,

package/dist/components/grid/utils/pagination.js

@@ -26,8 +26,10 @@ const Pagination = ({ currentPage, totalPages, handleChangePage, rowsPerPage, ha
         }
         return pageNumbers;
     };
-    return (_jsx("div", { className: "pagination text-sm px-2.5", children: _jsxs("div", { children: [_jsx("button", { onClick: () => handleChangePage(currentPage - 1), disabled: currentPage === 1, style: currentPage === 1 ? { cursor: "not-allowed", color: "#ccc" } : {}, children: "Prev" }), renderPageNumbers(), _jsx("button", { onClick: () => handleChangePage(currentPage + 1), disabled: currentPage >= totalPages, style: currentPage >= totalPages
-                        ? { cursor: "not-allowed", color: "#ccc" }
+    return (_jsx("div", { className: "pagination text-sm px-2.5", children: _jsxs("div", { children: [_jsx("button", { onClick: () => handleChangePage(currentPage - 1), disabled: currentPage === 1, style: currentPage === 1
+                        ? { cursor: "not-allowed", color: "var(--muted, #ccc)" }
+                        : {}, children: "Prev" }), renderPageNumbers(), _jsx("button", { onClick: () => handleChangePage(currentPage + 1), disabled: currentPage >= totalPages, style: currentPage >= totalPages
+                        ? { cursor: "not-allowed", color: "var(--muted, #ccc)" }
                         : {}, children: "Next" }), _jsx("select", { value: rowsPerPage, onChange: handleChangeRowsPerPage, children: rowsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }) }));
 };
 export default Pagination;

package/dist/components/grid/utils/shimmer.js

@@ -14,8 +14,14 @@ const Shimmer = ({ style, width, height }) => {
             overflow: hidden;
             display: flex;
             align-items: center;
-            background: #f6f7f8;
-            background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+            background: var(--shimmer-base, #f6f7f8);
+            background-image: linear-gradient(
+              to right,
+              var(--shimmer-base, #f6f7f8) 0%,
+              var(--shimmer-highlight, #edeef1) 20%,
+              var(--shimmer-base, #f6f7f8) 40%,
+              var(--shimmer-base, #f6f7f8) 100%
+            );
             background-repeat: no-repeat;
             background-size: 1000px 100%;
             animation: shimmer 1.2s infinite;

package/dist/components/loader/index.js

@@ -17,7 +17,7 @@ const Spinner = styled.div `
   border-radius: 50%;
   animation: ${spin} 1s linear infinite;
 `;
-const Loader = ({ size = 40, color = "#3498db", className = "", }) => {
+const Loader = ({ size = 24, color = "var(--accent, #3498db)", className = "", }) => {
     return _jsx(Spinner, { size: size, color: color, className: className });
 };
 export default Loader;

package/dist/components/tabs/index.js

@@ -54,8 +54,8 @@ export const Tab = ({ label, description, tabNumber }) => {
                         fontWeight: 700,
                         fontSize: "1rem",
                         marginRight: "0.5rem",
-                        background: isActive ? "#2377BA" : "#fff",
-                        color: isActive ? "#fff" : "#4D4D4D",
+                        background: isActive ? "#2377BA" : "var(--background)",
+                        color: isActive ? "#fff" : "var(--foreground)",
                         padding: "0.5rem 1rem",
                         borderRadius: "0.35rem",
                         minWidth: "1.75rem",
@@ -64,7 +64,7 @@ export const Tab = ({ label, description, tabNumber }) => {
                         display: "flex",
                         flexDirection: "column",
                     }, children: [_jsx("span", { style: { fontWeight: 500, fontSize: "1rem" }, children: label }), showTabDescription && description && (_jsx("span", { style: {
-                                color: "#4D4D4D",
+                                color: "var(--foreground)",
                                 fontWeight: 400,
                                 fontSize: "0.85rem",
                             }, children: description }))] })] }) }));
@@ -78,6 +78,6 @@ export const TabPanel = ({ label, children, className, }) => {
     const isActive = activeTab === label;
     return isActive ? (_jsx("div", { className: className, style: {
             flex: 1,
-            background: "white",
+            background: "var(--background)",
         }, children: children })) : null;
 };

package/dist/components/textarea/index.js

@@ -10,7 +10,7 @@ const Textarea = ({ value = "", onChange, onBlur = () => { }, placeholder = "",
         borderRadius,
         fontSize,
         resize,
-        border: "1px solid #dbdfe9",
+        border: "1px solid var(--form-border-color, #dbdfe9)",
         fontFamily: "var(--font-family)",
     };
     const labelStyle = {

package/dist/components/texteditor/index.js

@@ -204,7 +204,7 @@ const TextEditor = ({ value, onChange, enabledTools = {
     };
     return (_jsxs("div", { style: {
             width: "100%",
-            border: "1px solid #ccc",
+            border: "1px solid var(--divider, #ccc)",
             borderRadius: "0.25rem",
             padding: "0.65rem",
             position: "relative",
@@ -212,7 +212,7 @@ const TextEditor = ({ value, onChange, enabledTools = {
                     display: "flex",
                     gap: "0.65rem",
                     marginBottom: "0.65rem",
-                    borderBottom: "1px solid #ccc",
+                    borderBottom: "1px solid var(--divider, #ccc)",
                     paddingBottom: "0.25rem",
                     flexWrap: "wrap",
                 }, children: [enabledTools.headingOptions && (_jsxs("select", { onChange: (e) => applyHeading(e.target.value), style: buttonStyle, children: [_jsx("option", { value: "p", children: "Normal" }), _jsx("option", { value: "h1", children: "H1" }), _jsx("option", { value: "h2", children: "H2" }), _jsx("option", { value: "h3", children: "H3" })] })), enabledTools.bold && (_jsx("button", { type: "button", onClick: () => toggleFormat("bold"), style: buttonStyle, children: _jsx(IconBold, {}) })), enabledTools.italic && (_jsx("button", { type: "button", onClick: () => toggleFormat("italic"), style: buttonStyle, children: _jsx(IconItalic, {}) })), enabledTools.underline && (_jsx("button", { type: "button", onClick: () => toggleFormat("underline"), style: buttonStyle, children: _jsx(IconUnderline, {}) })), enabledTools.strikeThrough && (_jsx("button", { type: "button", onClick: () => toggleFormat("strikeThrough"), style: buttonStyle, children: _jsx(IconStrikethrough, {}) })), enabledTools.bulletList && (_jsx("button", { type: "button", onClick: () => insertList("ul"), style: buttonStyle, children: _jsx(IconFormatListBulleted, {}) })), enabledTools.numberList && (_jsx("button", { type: "button", onClick: () => insertList("ol"), style: buttonStyle, children: _jsx(IconFormatListNumbered, {}) })), enabledTools.textAlign && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => toggleFormat("justifyLeft"), style: buttonStyle, children: _jsx(IconAlignLeft, {}) }), _jsx("button", { type: "button", onClick: () => toggleFormat("justifyCenter"), style: buttonStyle, children: _jsx(IconAlignCenter, {}) }), _jsx("button", { type: "button", onClick: () => toggleFormat("justifyRight"), style: buttonStyle, children: _jsx(IconAlignRight, {}) })] })), enabledTools.textColor && (_jsx("input", { type: "color", onChange: (e) => toggleFormat("foreColor", e.target.value), style: Object.assign(Object.assign({}, buttonStyle), { width: 32, padding: 0 }) })), enabledTools.imageUpload && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("button", { type: "button", onClick: toggleImageDropdown, style: buttonStyle, children: _jsx(IconImage, {}) }), showImageDropdown && (_jsxs("div", { style: dropdownStyle, children: [_jsx("button", { type: "button", onClick: () => {
@@ -223,14 +223,14 @@ const TextEditor = ({ value, onChange, enabledTools = {
                                         }, style: dropdownItemStyle, children: "Insert from URL" }), _jsxs("label", { style: Object.assign(Object.assign({}, dropdownItemStyle), { cursor: "pointer" }), children: ["Upload from Computer", _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUpload, style: { display: "none" } })] })] }))] })), enabledTools.linkOptions && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: insertLink, style: buttonStyle, children: _jsx(IconLink, {}) }), _jsx("button", { type: "button", onClick: removeLink, style: buttonStyle, children: _jsx(IconUnlink, {}) })] }))] }), _jsx("div", { ref: editorRef, contentEditable: true, onInput: updateContent, onClick: handleEditorClick, suppressContentEditableWarning: true, style: {
                     minHeight: "10rem",
                     padding: "0.65rem",
-                    border: "1px solid #ddd",
+                    border: "1px solid var(--divider-strong, #ddd)",
                     borderRadius: "0.25rem",
                     outline: "none",
                 } })] }));
 };
 const buttonStyle = {
     padding: "0.25rem 0.65rem",
-    border: "1px solid #ccc",
+    border: "1px solid var(--divider, #ccc)",
     borderRadius: "3px",
     cursor: "pointer",
     background: "var(--editor-btn)",
@@ -241,7 +241,7 @@ const dropdownStyle = {
     top: "100%",
     left: 0,
     background: "var(--editor-btn)",
-    border: "1px solid #ccc",
+    border: "1px solid var(--divider, #ccc)",
     borderRadius: "3px",
     boxShadow: "0px 2px 0.25rem rgba(0, 0, 0, 0.2)",
     padding: "0.25rem",

package/dist/components/toggle/index.js

@@ -16,7 +16,7 @@ const Toggle = ({ isChecked = false, onChange, label, disabled = false, activeCo
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: "#ccc",
+        backgroundColor: "var(--disabled-bg)",
         transition: "0.4s",
         borderRadius: "1.5rem",
     };
@@ -30,7 +30,7 @@ const Toggle = ({ isChecked = false, onChange, label, disabled = false, activeCo
         width: "1rem",
         left: "0.125rem",
         bottom: "0.125rem",
-        backgroundColor: "white",
+        backgroundColor: "var(--background)",
         transition: "0.4s",
         borderRadius: "50%",
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.2.179",
+  "version": "1.2.181",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",