@megha-ui/react 1.2.170 → 1.2.172

package/dist/components/modal/index.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
 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] = (0, react_1.useState)(0);
-    const footerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    const [removelHeight, setRemovalHeight] = useState(0);
+    const footerRef = useRef(null);
+    useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === "Escape") {
                 onClose();
@@ -20,7 +18,7 @@ const Modal = ({ isOpen, onClose, title, subTitle, titleAlign = "left", children
             window.removeEventListener("keydown", handleKeyDown);
         };
     }, [isOpen, onClose]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (title || footer) {
         }
     }, [footer, title]);
@@ -45,7 +43,7 @@ const Modal = ({ isOpen, onClose, title, subTitle, titleAlign = "left", children
         flexDirection: "column",
         justifyContent: "space-between",
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: `${className}`, style: {
+    return (_jsx("div", { className: `${className}`, style: {
             position: "fixed",
             top: 0,
             left: 0,
@@ -56,15 +54,15 @@ const Modal = ({ isOpen, onClose, title, subTitle, titleAlign = "left", children
             justifyContent,
             backgroundColor: "rgba(0, 0, 0, 0.5)",
             zIndex: 1050,
-        }, onClick: () => overlayClose && onClose(), children: (0, jsx_runtime_1.jsxs)("div", { style: modalContentStyle, className: modalContentClass, onClick: (e) => e.stopPropagation(), children: [title && ((0, jsx_runtime_1.jsxs)("div", { style: {
+        }, onClick: () => overlayClose && onClose(), children: _jsxs("div", { style: modalContentStyle, className: modalContentClass, onClick: (e) => e.stopPropagation(), children: [title && (_jsxs("div", { style: {
                         position: "relative",
                         marginBottom: 0,
                         padding: "1rem",
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { textAlign: titleAlign }, children: [(0, jsx_runtime_1.jsx)("h4", { style: { fontSize: "1.25rem" }, children: title }), (0, jsx_runtime_1.jsx)("p", { style: { margin: 0 }, children: subTitle })] }), (0, jsx_runtime_1.jsx)("button", { style: { position: "absolute", top: 10, right: 10 }, onClick: onClose, children: "\u00D7" })] })), (0, jsx_runtime_1.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", { style: { position: "absolute", top: 10, right: 10 }, onClick: onClose, children: "\u00D7" })] })), _jsx("div", { style: {
                         overflowY: bodyOverflow,
                         height: `calc(${contentHeight} - ${removelHeight}px)`,
                         paddingLeft: "1rem",
                         paddingRight: "1rem",
-                    }, children: children }), footer && ((0, jsx_runtime_1.jsx)("div", { ref: footerRef, style: { marginTop: "auto", padding: "1rem" }, children: footer }))] }) }));
+                    }, children: children }), footer && (_jsx("div", { ref: footerRef, style: { marginTop: "auto", padding: "1rem" }, children: footer }))] }) }));
 };
-exports.default = Modal;
+export default Modal;

package/dist/components/tabs/index.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabPanel = exports.Tab = exports.TabList = exports.Tabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TabsContext = (0, react_1.createContext)(undefined);
-const Tabs = ({ children, defaultActive, className, type = "horizontal", showTabNumber = false, showTabDescription = false, }) => {
-    const [activeTab, setActiveTab] = (0, react_1.useState)(defaultActive || "");
-    return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, createContext, useContext } from "react";
+const TabsContext = createContext(undefined);
+export const Tabs = ({ children, defaultActive, className, type = "horizontal", showTabNumber = false, showTabDescription = false, }) => {
+    const [activeTab, setActiveTab] = useState(defaultActive || "");
+    return (_jsx(TabsContext.Provider, { value: {
             activeTab,
             setActiveTab,
             type,
             showTabNumber,
             showTabDescription,
-        }, children: (0, jsx_runtime_1.jsx)("div", { className: className, style: {
+        }, children: _jsx("div", { className: className, style: {
                 display: "flex",
                 flexDirection: type === "vertical" ? "row" : "column",
                 width: "100%",
@@ -22,14 +19,13 @@ const Tabs = ({ children, defaultActive, className, type = "horizontal", showTab
                 overflow: "hidden",
             }, children: children }) }));
 };
-exports.Tabs = Tabs;
-const TabList = ({ children, width }) => {
-    const context = (0, react_1.useContext)(TabsContext);
+export const TabList = ({ children, width }) => {
+    const context = useContext(TabsContext);
     if (!context) {
         throw new Error("TabList component must be used inside Tabs.");
     }
     const { type } = context;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             display: "flex",
             flexDirection: type === "vertical" ? "column" : "row",
             width: width ? width : type === "vertical" ? "25%" : "100%",
@@ -37,15 +33,14 @@ const TabList = ({ children, width }) => {
             flexGrow: 0,
         }, children: children }));
 };
-exports.TabList = TabList;
-const Tab = ({ label, description, tabNumber }) => {
-    const context = (0, react_1.useContext)(TabsContext);
+export const Tab = ({ label, description, tabNumber }) => {
+    const context = useContext(TabsContext);
     if (!context) {
         throw new Error("Tab component must be used inside Tabs.");
     }
     const { activeTab, setActiveTab, type, showTabNumber, showTabDescription } = context;
     const isActive = activeTab === label;
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab(label), style: {
+    return (_jsx("button", { onClick: () => setActiveTab(label), style: {
             padding: "0.65rem 0",
             cursor: "pointer",
             border: "none",
@@ -55,7 +50,7 @@ const Tab = ({ label, description, tabNumber }) => {
             borderRadius: "0.25rem",
             display: "flex",
             alignItems: "flex-start",
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [showTabNumber && ((0, jsx_runtime_1.jsx)("span", { style: {
+        }, children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [showTabNumber && (_jsx("span", { style: {
                         fontWeight: 700,
                         fontSize: "1rem",
                         marginRight: "0.5rem",
@@ -65,26 +60,24 @@ const Tab = ({ label, description, tabNumber }) => {
                         borderRadius: "0.35rem",
                         minWidth: "1.75rem",
                         textAlign: "center",
-                    }, className: "shadow-md", children: tabNumber })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, className: "shadow-md", children: tabNumber })), _jsxs("div", { style: {
                         display: "flex",
                         flexDirection: "column",
-                    }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 500, fontSize: "1rem" }, children: label }), showTabDescription && description && ((0, jsx_runtime_1.jsx)("span", { style: {
+                    }, children: [_jsx("span", { style: { fontWeight: 500, fontSize: "1rem" }, children: label }), showTabDescription && description && (_jsx("span", { style: {
                                 color: "#4D4D4D",
                                 fontWeight: 400,
                                 fontSize: "0.85rem",
                             }, children: description }))] })] }) }));
 };
-exports.Tab = Tab;
-const TabPanel = ({ label, children, className, }) => {
-    const context = (0, react_1.useContext)(TabsContext);
+export const TabPanel = ({ label, children, className, }) => {
+    const context = useContext(TabsContext);
     if (!context) {
         throw new Error("TabPanel component must be used inside Tabs.");
     }
     const { activeTab } = context;
     const isActive = activeTab === label;
-    return isActive ? ((0, jsx_runtime_1.jsx)("div", { className: className, style: {
+    return isActive ? (_jsx("div", { className: className, style: {
             flex: 1,
             background: "white",
         }, children: children })) : null;
 };
-exports.TabPanel = TabPanel;

package/dist/components/text/index.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "react/jsx-runtime";
 const Text = ({ children, as = "span", onClick, className = "", style = {}, color, fontSize, fontWeight, cursor, fontStyle, textAlign, textTransform, lineHeight, letterSpacing, textDecoration, textOverflow, whiteSpace, wordBreak, marginBottom, marginTop, marginLeft, marginRight, fontFamily, borderTopWidth, borderTopColor, borderTopStyle, borderColor, borderWidth, border, borderStyle, borderBottom, borderTop, borderLeft, borderRight, borderBottomColor, borderBottomStyle, borderBottomWidth, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRightColor, borderRightStyle, borderRightWidth, }) => {
     const Element = as;
     const StyledText = Object.assign(Object.assign({}, style), { color,
@@ -41,6 +39,6 @@ const Text = ({ children, as = "span", onClick, className = "", style = {}, colo
         borderRightColor,
         borderRightStyle,
         borderRightWidth });
-    return ((0, jsx_runtime_1.jsx)(Element, { onClick: onClick, className: className, style: StyledText, children: children }));
+    return (_jsx(Element, { onClick: onClick, className: className, style: StyledText, children: children }));
 };
-exports.default = Text;
+export default Text;

package/dist/components/text/textType.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/components/text-input/index.js

@@ -1,14 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const md_1 = require("react-icons/md");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
 const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = () => { }, onBlur = () => { }, placeholder = "", type = "text", className = "", disabled = false, width = "100%", padding = "0.5rem", borderRadius = 4, fontSize = "0.85rem", height = "2.5rem", autoComplete = "off", maxLength, readOnly = false, required, isNumber, marginTop, marginRight, marginBottom, marginLeft, label, border = "1px solid var(--form-border-color, #dbdfe9)", backgroundColor = "transparent", icon, iconPosition = "left", asteriskColor = "red", labelFontSize, labelFontWeight, labelMarginBottom, isValid, validationErrorColor = "red", validationSuccessColor = "green", extraWrapperStyle = {}, extraInputStyle = {}, onSubmit, timeBoundBlur, wrapperClass, isClear = true, clearIcon, clearId }) => {
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
+    const [focused, setFocused] = useState(false);
+    const [error, setError] = useState(null);
+    const [timeoutId, setTimeoutId] = useState(null);
     const typingDuration = 3000;
-    const inputRef = (0, react_1.useRef)(null);
+    const inputRef = useRef(null);
     const handleKeyTimebound = () => {
         if (timeoutId) {
             clearTimeout(timeoutId);
@@ -20,7 +18,7 @@ const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = ()
         }, typingDuration);
         setTimeoutId(newTimeoutId);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         var _a;
         if (inputRef.current && timeBoundBlur) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', handleKeyTimebound);
@@ -129,6 +127,6 @@ const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = ()
     const asteriskStyle = {
         color: asteriskColor,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [label && ((0, jsx_runtime_1.jsxs)("p", { style: labelStyle, children: [label, required && (0, jsx_runtime_1.jsx)("span", { style: asteriskStyle, children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { style: Object.assign(Object.assign({}, textInputWrapperStyle), extraWrapperStyle), className: `${wrapperClass} custom-border`, children: [icon && iconPosition === "left" && (0, jsx_runtime_1.jsx)("div", { style: iconStyle, children: icon }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: type, value: value, name: name, id: id, placeholder: placeholder, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, style: Object.assign(Object.assign({}, textInputStyle), extraInputStyle), className: className, disabled: disabled, autoComplete: autoComplete, maxLength: maxLength, readOnly: readOnly, required: required }), isClear && value && ((0, jsx_runtime_1.jsx)("div", { style: clearIconStyle, onClick: handleClear, id: clearId, title: "Clear", children: clearIcon ? clearIcon : (0, jsx_runtime_1.jsx)(md_1.MdClose, {}) })), icon && iconPosition === "right" && ((0, jsx_runtime_1.jsx)("div", { style: iconStyle, children: icon }))] })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [label && (_jsxs("p", { style: labelStyle, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsxs("div", { style: Object.assign(Object.assign({}, textInputWrapperStyle), extraWrapperStyle), className: `${wrapperClass} custom-border`, children: [icon && iconPosition === "left" && _jsx("div", { style: iconStyle, children: icon }), _jsx("input", { ref: inputRef, type: type, value: value, name: name, id: id, placeholder: placeholder, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, style: Object.assign(Object.assign({}, textInputStyle), extraInputStyle), className: className, disabled: disabled, autoComplete: autoComplete, maxLength: maxLength, readOnly: readOnly, required: required }), isClear && value && (_jsx("div", { style: clearIconStyle, onClick: handleClear, id: clearId, title: "Clear", children: clearIcon ? clearIcon : _jsx(MdClose, {}) })), icon && iconPosition === "right" && (_jsx("div", { style: iconStyle, children: icon }))] })] }));
 };
-exports.default = TextInput;
+export default TextInput;

package/dist/components/textarea/index.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Textarea = ({ value = "", onChange, onBlur = () => { }, placeholder = "", className = "", disabled = false, rows = 4, cols = 50, width = "100%", height, padding = "0.5rem", borderRadius = 4, fontSize = "0.85rem", resize = "none", labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, label, required, name }) => {
     const handleTextChange = (event) => {
         onChange(event);
@@ -23,6 +21,6 @@ const Textarea = ({ value = "", onChange, onBlur = () => { }, placeholder = "",
     const asteriskStyle = {
         color: asteriskColor,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsxs)("p", { style: labelStyle, children: [label, required && (0, jsx_runtime_1.jsx)("span", { style: asteriskStyle, children: " *" })] })), (0, jsx_runtime_1.jsx)("textarea", { name: name, value: value, placeholder: placeholder, onChange: handleTextChange, onBlur: onBlur, style: textareaStyle, className: className, disabled: disabled, rows: rows, cols: cols })] }));
+    return (_jsxs("div", { children: [label && (_jsxs("p", { style: labelStyle, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsx("textarea", { name: name, value: value, placeholder: placeholder, onChange: handleTextChange, onBlur: onBlur, style: textareaStyle, className: className, disabled: disabled, rows: rows, cols: cols })] }));
 };
-exports.default = Textarea;
+export default Textarea;

package/dist/components/texteditor/index.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const fa_1 = require("react-icons/fa");
-const md_1 = require("react-icons/md");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { FaBold, FaItalic, FaUnderline, FaStrikethrough, FaImage, FaLink, FaUnlink, FaAlignLeft, FaAlignCenter, FaAlignRight, } from "react-icons/fa";
+import { MdFormatListBulleted, MdFormatListNumbered } from "react-icons/md";
 const TextEditor = ({ value, onChange, enabledTools = {
     bold: true,
     italic: true,
@@ -17,21 +15,21 @@ const TextEditor = ({ value, onChange, enabledTools = {
     textColor: true,
     linkOptions: true,
 }, }) => {
-    const editorRef = (0, react_1.useRef)(null);
-    const selectionRef = (0, react_1.useRef)(null);
-    const [showImageDropdown, setShowImageDropdown] = (0, react_1.useState)(false);
-    const IconBold = fa_1.FaBold;
-    const IconItalic = fa_1.FaItalic;
-    const IconUnderline = fa_1.FaUnderline;
-    const IconStrikethrough = fa_1.FaStrikethrough;
-    const IconLink = fa_1.FaLink;
-    const IconUnlink = fa_1.FaUnlink;
-    const IconImage = fa_1.FaImage;
-    const IconAlignLeft = fa_1.FaAlignLeft;
-    const IconAlignCenter = fa_1.FaAlignCenter;
-    const IconAlignRight = fa_1.FaAlignRight;
-    const IconFormatListBulleted = md_1.MdFormatListBulleted;
-    const IconFormatListNumbered = md_1.MdFormatListNumbered;
+    const editorRef = useRef(null);
+    const selectionRef = useRef(null);
+    const [showImageDropdown, setShowImageDropdown] = useState(false);
+    const IconBold = FaBold;
+    const IconItalic = FaItalic;
+    const IconUnderline = FaUnderline;
+    const IconStrikethrough = FaStrikethrough;
+    const IconLink = FaLink;
+    const IconUnlink = FaUnlink;
+    const IconImage = FaImage;
+    const IconAlignLeft = FaAlignLeft;
+    const IconAlignCenter = FaAlignCenter;
+    const IconAlignRight = FaAlignRight;
+    const IconFormatListBulleted = MdFormatListBulleted;
+    const IconFormatListNumbered = MdFormatListNumbered;
     const wrapSelection = (tag) => {
         const selection = document.getSelection();
         if (!selection || selection.rangeCount === 0)
@@ -190,7 +188,7 @@ const TextEditor = ({ value, onChange, enabledTools = {
         onChange(htmlContent);
         setTimeout(restoreSelection, 0);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (editorRef.current && editorRef.current.innerHTML !== value) {
             saveSelection();
             editorRef.current.innerHTML = value;
@@ -204,25 +202,25 @@ const TextEditor = ({ value, onChange, enabledTools = {
             window.open(target.getAttribute("href"), "_blank");
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             width: "100%",
             border: "1px solid #ccc",
             borderRadius: "0.25rem",
             padding: "0.65rem",
             position: "relative",
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+        }, children: [_jsxs("div", { style: {
                     display: "flex",
                     gap: "0.65rem",
                     marginBottom: "0.65rem",
                     borderBottom: "1px solid #ccc",
                     paddingBottom: "0.25rem",
                     flexWrap: "wrap",
-                }, children: [enabledTools.headingOptions && ((0, jsx_runtime_1.jsxs)("select", { onChange: (e) => applyHeading(e.target.value), style: buttonStyle, children: [(0, jsx_runtime_1.jsx)("option", { value: "p", children: "Normal" }), (0, jsx_runtime_1.jsx)("option", { value: "h1", children: "H1" }), (0, jsx_runtime_1.jsx)("option", { value: "h2", children: "H2" }), (0, jsx_runtime_1.jsx)("option", { value: "h3", children: "H3" })] })), enabledTools.bold && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("bold"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconBold, {}) })), enabledTools.italic && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("italic"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconItalic, {}) })), enabledTools.underline && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("underline"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconUnderline, {}) })), enabledTools.strikeThrough && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("strikeThrough"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconStrikethrough, {}) })), enabledTools.bulletList && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => insertList("ul"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconFormatListBulleted, {}) })), enabledTools.numberList && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => insertList("ol"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconFormatListNumbered, {}) })), enabledTools.textAlign && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("justifyLeft"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconAlignLeft, {}) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("justifyCenter"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconAlignCenter, {}) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleFormat("justifyRight"), style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconAlignRight, {}) })] })), enabledTools.textColor && ((0, jsx_runtime_1.jsx)("input", { type: "color", onChange: (e) => toggleFormat("foreColor", e.target.value), style: Object.assign(Object.assign({}, buttonStyle), { width: 32, padding: 0 }) })), enabledTools.imageUpload && ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleImageDropdown, style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconImage, {}) }), showImageDropdown && ((0, jsx_runtime_1.jsxs)("div", { style: dropdownStyle, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                }, 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: () => {
                                             const url = prompt("Enter Image URL:");
                                             if (url)
                                                 insertImage(url);
                                             setShowImageDropdown(false);
-                                        }, style: dropdownItemStyle, children: "Insert from URL" }), (0, jsx_runtime_1.jsxs)("label", { style: Object.assign(Object.assign({}, dropdownItemStyle), { cursor: "pointer" }), children: ["Upload from Computer", (0, jsx_runtime_1.jsx)("input", { type: "file", accept: "image/*", onChange: handleImageUpload, style: { display: "none" } })] })] }))] })), enabledTools.linkOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: insertLink, style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconLink, {}) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: removeLink, style: buttonStyle, children: (0, jsx_runtime_1.jsx)(IconUnlink, {}) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: editorRef, contentEditable: true, onInput: updateContent, onClick: handleEditorClick, suppressContentEditableWarning: true, style: {
+                                        }, 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",
@@ -259,4 +257,4 @@ const dropdownItemStyle = {
     textAlign: "left",
     width: "100%",
 };
-exports.default = TextEditor;
+export default TextEditor;

package/dist/components/toggle/index.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Toggle = ({ isChecked = false, onChange, label, disabled = false, activeColor = "#2377ba", className = "", style = {}, labelPosition = "left" }) => {
     const handleToggleChange = (event) => {
         onChange(event.target.checked);
@@ -40,10 +38,10 @@ const Toggle = ({ isChecked = false, onChange, label, disabled = false, activeCo
         left: 0,
         transform: "translateX(1.375rem)",
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `toggle-switch-container ${className}`, style: Object.assign(Object.assign({}, style), { display: 'flex', alignItems: 'center' }), children: [label && labelPosition === "left" && (0, jsx_runtime_1.jsx)("span", { className: "toggle-switch-label", style: { marginRight: 12 }, children: label }), (0, jsx_runtime_1.jsxs)("label", { className: "toggle-switch", style: defaultStyles, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: handleToggleChange, disabled: disabled, className: "toggle-switch-checkbox", style: {
+    return (_jsxs("div", { className: `toggle-switch-container ${className}`, style: Object.assign(Object.assign({}, style), { display: 'flex', alignItems: 'center' }), children: [label && labelPosition === "left" && _jsx("span", { className: "toggle-switch-label", style: { marginRight: 12 }, children: label }), _jsxs("label", { className: "toggle-switch", style: defaultStyles, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: handleToggleChange, disabled: disabled, className: "toggle-switch-checkbox", style: {
                             opacity: 0,
                             width: 0,
                             height: 0,
-                        } }), (0, jsx_runtime_1.jsx)("span", { className: "toggle-switch-slider", style: Object.assign(Object.assign({}, sliderStyles), (isChecked ? sliderCheckedStyles : {})), children: (0, jsx_runtime_1.jsx)("span", { style: Object.assign(Object.assign({}, sliderBeforeStyles), (isChecked ? sliderBeforeCheckedStyles : {})) }) })] }), label && labelPosition === "right" && (0, jsx_runtime_1.jsx)("span", { className: "toggle-switch-label", style: { marginRight: 12 }, children: label })] }));
+                        } }), _jsx("span", { className: "toggle-switch-slider", style: Object.assign(Object.assign({}, sliderStyles), (isChecked ? sliderCheckedStyles : {})), children: _jsx("span", { style: Object.assign(Object.assign({}, sliderBeforeStyles), (isChecked ? sliderBeforeCheckedStyles : {})) }) })] }), label && labelPosition === "right" && _jsx("span", { className: "toggle-switch-label", style: { marginRight: 12 }, children: label })] }));
 };
-exports.default = Toggle;
+export default Toggle;

package/dist/index.js

@@ -1,41 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatValue = exports.TabPanel = exports.TabList = exports.Tab = exports.Tabs = exports.Toggle = exports.TextEditor = exports.Textarea = exports.TextInput = exports.Text = exports.Modal = exports.Loader = exports.Grid = exports.Dropdown = exports.DateInput = exports.Checkbox = exports.Card = exports.Button = exports.Block = void 0;
-var block_1 = require("./components/block");
-Object.defineProperty(exports, "Block", { enumerable: true, get: function () { return __importDefault(block_1).default; } });
-var button_1 = require("./components/button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
-var card_1 = require("./components/card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(card_1).default; } });
-var checkbox_1 = require("./components/checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });
-var date_input_1 = require("./components/date-input");
-Object.defineProperty(exports, "DateInput", { enumerable: true, get: function () { return __importDefault(date_input_1).default; } });
-var dropdown_1 = require("./components/dropdown");
-Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(dropdown_1).default; } });
-var grid_1 = require("./components/grid");
-Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(grid_1).default; } });
-var loader_1 = require("./components/loader");
-Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(loader_1).default; } });
-var modal_1 = require("./components/modal");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
-var text_1 = require("./components/text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
-var text_input_1 = require("./components/text-input");
-Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(text_input_1).default; } });
-var textarea_1 = require("./components/textarea");
-Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return __importDefault(textarea_1).default; } });
-var texteditor_1 = require("./components/texteditor");
-Object.defineProperty(exports, "TextEditor", { enumerable: true, get: function () { return __importDefault(texteditor_1).default; } });
-var toggle_1 = require("./components/toggle");
-Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return __importDefault(toggle_1).default; } });
-var tabs_1 = require("./components/tabs");
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });
-Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return tabs_1.Tab; } });
-Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return tabs_1.TabList; } });
-Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return tabs_1.TabPanel; } });
-var commonService_1 = require("./services/commonService");
-Object.defineProperty(exports, "formatValue", { enumerable: true, get: function () { return commonService_1.formatValue; } });
+export { default as Block } from "./components/block";
+export { default as Button } from "./components/button";
+export { default as Card } from "./components/card";
+export { default as Checkbox } from "./components/checkbox";
+export { default as DateInput } from "./components/date-input";
+export { default as Dropdown } from "./components/dropdown";
+export { default as Grid } from "./components/grid";
+export { default as Loader } from "./components/loader";
+export { default as Modal } from "./components/modal";
+export { default as Text } from "./components/text";
+export { default as TextInput } from "./components/text-input";
+export { default as Textarea } from "./components/textarea";
+export { default as TextEditor } from "./components/texteditor";
+export { default as Toggle } from "./components/toggle";
+export { Tabs, Tab, TabList, TabPanel } from "./components/tabs";
+export { formatValue } from "./services/commonService";

package/dist/services/commonService.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatValue = void 0;
-const regexUtils_1 = require("../components/grid/utils/regexUtils");
+import { isValidDateFormat } from "../components/grid/utils/regexUtils";
 // Function to format numbers
 const formatNumber = (value, locale = "sv-SE", options) => {
     const formatter = new Intl.NumberFormat(locale, options);
@@ -159,7 +156,7 @@ const formatCurrency = (value, locale = "sv-SE", currency = "SEK", options) => {
     }
 };
 // Dynamic formatter function
-const formatValue = (value, type = "number", locale = "sv-SE", options) => {
+export const formatValue = (value, type = "number", locale = "sv-SE", options) => {
     if (type === "number") {
         const num = parseFloat(value.toString());
         return formatNumber(num, locale, { useGrouping: false });
@@ -174,7 +171,7 @@ const formatValue = (value, type = "number", locale = "sv-SE", options) => {
             date = d ? toISODateTime(d) : "";
         }
         if (typeof value === "string") {
-            if (!(0, regexUtils_1.isValidDateFormat)(value))
+            if (!isValidDateFormat(value))
                 return value;
             const d = parseSupportedDate(value);
             date = d ? toISODateTime(d) : "";
@@ -210,4 +207,3 @@ const formatValue = (value, type = "number", locale = "sv-SE", options) => {
         return value.toString();
     }
 };
-exports.formatValue = formatValue;

package/package.json

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