@megha-ui/react 1.2.180 → 1.2.182

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,7 +238,7 @@ 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 = {

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/modal/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef } from "react";
+import { MdClose } from "react-icons/md";
 const Modal = ({ isOpen, onClose, title, subTitle, titleAlign = "left", children, footer, className = "", width, minHeight = 300, padding = "1rem", borderRadius = 6, backgroundColor = "var(--modal-bg)", paddingBottom = "1rem", paddingLeft = "1rem", paddingRight = "1rem", paddingTop = "1rem", contentHeight = "calc(100vh - 180)", overlayClose = false, alignItems, justifyContent, modalContentClass, bodyOverflow = "auto", }) => {
     const [removelHeight, setRemovalHeight] = useState(0);
     const footerRef = useRef(null);
@@ -58,7 +59,18 @@ const Modal = ({ isOpen, onClose, title, subTitle, titleAlign = "left", children
                         position: "relative",
                         marginBottom: 0,
                         padding: "1rem",
-                    }, children: [_jsxs("div", { style: { textAlign: titleAlign }, children: [_jsx("h4", { style: { fontSize: "1.25rem" }, children: title }), _jsx("p", { style: { margin: 0 }, children: subTitle })] }), _jsx("button", { style: { position: "absolute", top: 10, right: 10 }, onClick: onClose, children: "\u00D7" })] })), _jsx("div", { style: {
+                    }, children: [_jsxs("div", { style: { textAlign: titleAlign }, children: [_jsx("h4", { style: { fontSize: "1.25rem" }, children: title }), _jsx("p", { style: { margin: 0 }, children: subTitle })] }), _jsx("button", { type: "button", "aria-label": "Close", style: {
+                                position: "absolute",
+                                top: 10,
+                                right: 10,
+                                background: "transparent",
+                                border: "none",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                padding: 4,
+                            }, onClick: onClose, children: _jsx(MdClose, { size: 18 }) })] })), _jsx("div", { style: {
                         overflowY: bodyOverflow,
                         height: `calc(${contentHeight} - ${removelHeight}px)`,
                         paddingLeft: "1rem",

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/package.json

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