funuicss 3.0.0 → 3.0.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0",
+  "version": "3.0.2",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/button/Button.js

@@ -75,7 +75,7 @@ function Button(_a) {
     }
     var classNames = [
         'button',
-        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color),
+        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color),
         funcss || '',
         rounded ? 'roundBtn' : '',
         hoverless ? 'hoverless' : '',

package/ui/richtext/RichText.d.ts

@@ -8,12 +8,11 @@ interface RichTextProps {
     placeholder?: string;
     afterEmoji?: React.ReactNode;
     funcss?: string;
-    /** Custom Quill modules (e.g., additional toolbar items) */
     modules?: any;
-    /** Quill theme (e.g. 'bubble' | 'snow') */
     theme?: 'bubble' | 'snow';
-    /** Optional fontFamily override */
     fontFamily?: string;
+    /** Maximum number of characters allowed */
+    maxValue?: number;
 }
 declare const RichText: React.FC<RichTextProps>;
 export default RichText;

package/ui/richtext/RichText.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_quilljs_1 = require("react-quilljs");
 require("quill/dist/quill.bubble.css");
-require("quill/dist/quill.snow.css"); // Add support for snow theme
+require("quill/dist/quill.snow.css");
 var md_1 = require("react-icons/md");
 var Emojis_1 = require("../../utils/Emojis");
 var Dropdown_1 = __importDefault(require("../drop/Dropdown"));
@@ -49,9 +49,8 @@ var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
 var Circle_1 = __importDefault(require("../specials/Circle"));
 var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var RichText = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.showEmojis, showEmojis = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Write something...' : _c, afterEmoji = _a.afterEmoji, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, modules = _a.modules, _e = _a.theme, theme = _e === void 0 ? 'bubble' : _e, fontFamily = _a.fontFamily;
+    var value = _a.value, onChange = _a.onChange, _b = _a.showEmojis, showEmojis = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Write something...' : _c, afterEmoji = _a.afterEmoji, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, modules = _a.modules, _e = _a.theme, theme = _e === void 0 ? 'bubble' : _e, fontFamily = _a.fontFamily, maxValue = _a.maxValue;
     var savedRange = (0, react_1.useRef)(null);
-    // Default modules (basic toolbar)
     var defaultModules = {
         toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
     };
@@ -68,7 +67,19 @@ var RichText = function (_a) {
                 savedRange.current = range;
         };
         var handleTextChange = function () {
-            onChange(quill.root.innerHTML);
+            if (!quill)
+                return;
+            var plainText = quill.getText(); // Includes \n
+            var trimmedText = plainText.trim(); // Exclude trailing \n for accurate count
+            if (maxValue && trimmedText.length > maxValue) {
+                var truncated = trimmedText.slice(0, maxValue);
+                quill.setText(truncated);
+                quill.setSelection(truncated.length);
+                onChange(quill.root.innerHTML);
+            }
+            else {
+                onChange(quill.root.innerHTML);
+            }
         };
         quill.on('selection-change', handleSelectionChange);
         quill.on('text-change', handleTextChange);
@@ -76,7 +87,7 @@ var RichText = function (_a) {
             quill.off('selection-change', handleSelectionChange);
             quill.off('text-change', handleTextChange);
         };
-    }, [quill, onChange]);
+    }, [quill, onChange, maxValue]);
     (0, react_1.useEffect)(function () {
         if (quill && value !== quill.root.innerHTML) {
             quill.root.innerHTML = value;
@@ -84,19 +95,26 @@ var RichText = function (_a) {
     }, [quill, value]);
     var insertEmoji = function (emoji) {
         if (quill && savedRange.current) {
-            quill.insertText(savedRange.current.index, emoji);
-            quill.setSelection(savedRange.current.index + emoji.length);
+            var plainText = quill.getText().trim();
+            if (!maxValue || plainText.length + emoji.length <= maxValue) {
+                quill.insertText(savedRange.current.index, emoji);
+                quill.setSelection(savedRange.current.index + emoji.length);
+            }
         }
     };
     var renderEmojiSection = function (title, emojis) { return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "mb-2 mt-2 text-sm" }, title),
         react_1.default.createElement(RowFlex_1.default, { gap: 0.3 }, emojis.map(function (emoji, i) { return (react_1.default.createElement("span", { key: i, className: "h6 pointer", onClick: function () { return insertEmoji(emoji); } }, emoji)); })))); };
     return (react_1.default.createElement("div", { className: funcss },
-        react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container  p-0" },
-            react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? "bubble-editor " : "snow-editor ", style: {
+        react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container p-0" },
+            react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? 'bubble-editor' : 'snow-editor', style: {
                     fontFamily: fontFamily || 'inherit',
                 } })),
-        (showEmojis || afterEmoji) && (react_1.default.createElement(RowFlex_1.default, { gap: 0.5, funcss: 'mt-1' },
+        maxValue && quill && (react_1.default.createElement("div", { className: "text-xs mt-1 text-right text-gray-500" },
+            quill.getText().trim().length,
+            "/",
+            maxValue)),
+        (showEmojis || afterEmoji) && (react_1.default.createElement(RowFlex_1.default, { gap: 0.5, funcss: "mt-1" },
             showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
                     react_1.default.createElement(Circle_1.default, { funcss: "bg border" },
                         react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),