funuicss 3.9.2 → 3.9.4

package/css/fun.css

@@ -4356,6 +4356,7 @@ opacity: 1;
 }
 .modal-body {
   height: 100%;
+
 }
 
 .modal-action {
@@ -5476,6 +5477,25 @@ background-color: rgba(0, 0, 0, 0.2);
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+
+
+/* Optional: Add loading animation */
+@keyframes imageLoading {
+  0% { opacity: 0.3; }
+  50% { opacity: 0.7; }
+  100% { opacity: 0.3; }
+}
+
+.funui_store_no-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  animation: imageLoading 1.5s infinite;
+}
+
 /* Badges */
 .funui_store_product-badges {
   position: absolute;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.2",
+  "version": "3.9.4",
   "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/div/Div.d.ts

@@ -18,6 +18,10 @@ type DivProps = {
     ref?: React.Ref<HTMLDivElement>;
     customStyle?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
 };
-declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, className, style, margin, id, fit, ref, customStyle, ...rest }: DivProps) => React.JSX.Element;
+declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, className, style, margin, id, fit, ref, customStyle, onClick, onMouseEnter, onMouseLeave, onMouseOver, onMouseOut, ...rest }: DivProps) => React.JSX.Element;
 export default Div;

package/ui/div/Div.js

@@ -58,8 +58,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var Div = function (_a) {
-    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, className = _a.className, style = _a.style, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "className", "style", "margin", "id", "fit", "ref", "customStyle"]);
-    return (React.createElement("div", null,
-        React.createElement("div", __assign({ ref: ref, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(className || ''), style: __assign(__assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, style), customStyle), id: id }, rest), content || children)));
+    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, className = _a.className, style = _a.style, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "className", "style", "margin", "id", "fit", "ref", "customStyle", "onClick", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut"]);
+    return (React.createElement("div", { ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick },
+        React.createElement("div", __assign({ className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(className || ''), style: __assign(__assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, style), customStyle), id: id }, rest), content || children)));
 };
 exports.default = Div;

package/ui/modal/Modal.js

@@ -62,10 +62,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Modal;
 var React = __importStar(require("react"));
 var Header_1 = __importDefault(require("./Header"));
-var Content_1 = __importDefault(require("./Content"));
 var Action_1 = __importDefault(require("./Action"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
+var View_1 = __importDefault(require("../view/View"));
 function Modal(_a) {
     var children = _a.children, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, open = _a.open, setOpen = _a.setOpen, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, okIcon = _a.okIcon, height = _a.height, _b = _a.hideClose, hideClose = _b === void 0 ? false : _b, width = _a.width, _c = _a.backdrop, backdrop = _c === void 0 ? false : _c, title = _a.title, titlecss = _a.titlecss, body = _a.body, bodycss = _a.bodycss, footer = _a.footer, footercss = _a.footercss, close = _a.close, closecss = _a.closecss, position = _a.position, id = _a.id, flat = _a.flat, onOk = _a.onOk, // 👈 added
     onOkText = _a.onOkText, // 👈 added
@@ -88,14 +88,14 @@ function Modal(_a) {
         React.createElement("div", __assign({ className: "modal-content ".concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: {
                 animation: "".concat(duration || 0.3, "s ").concat(animation || 'SlideDown'),
                 maxWidth: maxWidth || "700px",
-                maxHeight: maxHeight || "fit-content",
+                maxHeight: "fit-content",
                 width: width || '100%',
-                height: height || "fit-content",
+                height: "fit-content",
             } }, rest),
             title && (React.createElement(Header_1.default, { funcss: titlecss || '', title: title, close: !hideClose ?
                     React.createElement("div", { onClick: function () { return setOpen(false); }, className: "".concat(closecss || '', " pointer hover-text-error") }, close || React.createElement(pi_1.PiX, { size: 25 }))
                     : "" })),
-            React.createElement(Content_1.default, { funcss: bodycss || '' }, body || children),
+            React.createElement(View_1.default, { funcss: "modal-body ".concat(bodycss || ''), height: "100%", overflow: 'auto', maxHeight: height || maxHeight || "100%" }, body || children),
             footer ? (React.createElement(Action_1.default, { funcss: footercss || '' }, footer)) : (React.createElement(Action_1.default, { funcss: 'text-right' },
                 React.createElement(Button_1.default, { bg: 'success', endIcon: okIcon || React.createElement(pi_1.PiPaperPlaneRight, null), raised: true, onClick: handleOkClick }, onOkText || 'OK'))))));
 }

package/ui/products/ProductCard.js

@@ -1,30 +1,132 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var Div_1 = __importDefault(require("../div/Div"));
 var Text_1 = __importDefault(require("../text/Text"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
 var ProductCard = function (_a) {
-    var _b;
-    var product = _a.product, _c = _a.currency, currency = _c === void 0 ? '$' : _c, onClick = _a.onClick, onAddToCart = _a.onAddToCart, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.funcss, funcss = _e === void 0 ? '' : _e, _f = _a.showBadges, showBadges = _f === void 0 ? true : _f;
+    var product = _a.product, _b = _a.currency, currency = _b === void 0 ? '$' : _b, onClick = _a.onClick, onAddToCart = _a.onAddToCart, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showBadges, showBadges = _e === void 0 ? true : _e;
     var hasDiscount = product.comparePrice && product.comparePrice > product.price;
     var discountPercent = hasDiscount
         ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
         : 0;
+    // Track which image is currently displayed
+    var _f = (0, react_1.useState)(0), currentImageIndex = _f[0], setCurrentImageIndex = _f[1];
+    var _g = (0, react_1.useState)([]), imagesLoaded = _g[0], setImagesLoaded = _g[1];
+    // Check if product has multiple images
+    var hasMultipleImages = product.images && product.images.length > 1;
+    // Handle image preloading
+    (0, react_1.useEffect)(function () {
+        if (!product.images || product.images.length === 0)
+            return;
+        // Track loaded images
+        var loadedStatus = new Array(product.images.length).fill(false);
+        setImagesLoaded(loadedStatus);
+        // Preload all images
+        product.images.forEach(function (src, index) {
+            var img = new Image();
+            img.src = src;
+            img.onload = function () {
+                setImagesLoaded(function (prev) {
+                    var updated = __spreadArray([], prev, true);
+                    updated[index] = true;
+                    return updated;
+                });
+            };
+        });
+    }, [product.images]);
     var handleClick = function () {
         onClick === null || onClick === void 0 ? void 0 : onClick(product);
     };
+    var handleMouseEnter = function () {
+        if (hasMultipleImages && product.images && product.images.length > 1) {
+            // Switch to next image (or first if at the end)
+            setCurrentImageIndex(function (prev) {
+                return prev === product.images.length - 1 ? 0 : prev + 1;
+            });
+        }
+    };
+    var handleMouseLeave = function () {
+        // Reset to first image when mouse leaves
+        setCurrentImageIndex(0);
+    };
     var getDisplayPrice = function () {
         var price = product.price || 0;
         var productCurrency = product.currency || currency;
         return "".concat(productCurrency).concat(price.toFixed(2));
     };
     return (react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-card ".concat(className, " ").concat(funcss), onClick: handleClick, customStyle: { cursor: 'pointer' } },
-        react_1.default.createElement(Div_1.default, { funcss: "funui_store_image-container  round-edge" }, ((_b = product.images) === null || _b === void 0 ? void 0 : _b[0]) ? (react_1.default.createElement("img", { src: product.images[0], alt: product.name, loading: "lazy", className: "funui_store_product-image" })) : (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
+        react_1.default.createElement(Div_1.default, { funcss: "funui_store_image-container round-edge", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, customStyle: { position: 'relative', overflow: 'hidden' } }, product.images && product.images.length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("img", { src: product.images[0], alt: product.name, loading: "lazy", className: "funui_store_product-image", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    opacity: currentImageIndex === 0 ? 1 : 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    zIndex: 1
+                } }),
+            product.images.slice(1).map(function (imageSrc, index) { return (react_1.default.createElement("img", { key: "preload-".concat(index + 1), src: imageSrc, alt: "".concat(product.name, " - View ").concat(index + 2), loading: "lazy", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    opacity: currentImageIndex === index + 1 ? 1 : 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    zIndex: 2
+                } })); }),
+            (!product.images[0] || imagesLoaded[0] === false) && (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
+                react_1.default.createElement(Text_1.default, { text: "No Image", color: "text-muted", size: "sm" }))))) : (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
             react_1.default.createElement(Text_1.default, { text: "No Image", color: "text-muted", size: "sm" })))),
         react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-info " },
             product.category && (react_1.default.createElement(Text_1.default, { size: 'xs', opacity: 4, uppercase: true }, product.category)),

package/ui/products/ProductDetail.js

@@ -190,7 +190,7 @@ var ProductDetail = function (_a) {
                         react_1.default.createElement(Text_1.default, { size: 'xs', opacity: 4 },
                             product.stock,
                             " units available"))),
-                    ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1, direction: "column" },
+                    ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1 },
                         product.colors && product.colors.length > 0 && (react_1.default.createElement("div", { className: "col" },
                             react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" },
                                 "Color",

package/ui/richtext/RichText.js

@@ -50,65 +50,149 @@ var Flex_1 = __importDefault(require("../flex/Flex"));
 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, maxValue = _a.maxValue;
     var savedRange = (0, react_1.useRef)(null);
+    var onChangeRef = (0, react_1.useRef)(onChange);
+    var maxValueRef = (0, react_1.useRef)(maxValue);
+    var debounceTimeoutRef = (0, react_1.useRef)(null);
+    var isInitialMount = (0, react_1.useRef)(true);
+    var isTypingRef = (0, react_1.useRef)(false);
+    var typingTimeoutRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
+    var lastKnownValueRef = (0, react_1.useRef)(value);
+    // Update refs when props change
+    (0, react_1.useEffect)(function () {
+        onChangeRef.current = onChange;
+        maxValueRef.current = maxValue;
+    }, [onChange, maxValue]);
     var defaultModules = {
         toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
     };
-    var _f = (0, react_quilljs_1.useQuill)({
+    var _g = (0, react_quilljs_1.useQuill)({
         theme: theme,
         placeholder: placeholder,
         modules: modules || defaultModules,
-    }), quill = _f.quill, quillRef = _f.quillRef;
+    }), quill = _g.quill, quillRef = _g.quillRef;
+    // Debounced onChange handler
+    var debouncedOnChange = (0, react_1.useCallback)(function (content) {
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+        }
+        debounceTimeoutRef.current = setTimeout(function () {
+            onChangeRef.current(content);
+        }, 300); // 300ms debounce delay
+    }, []);
+    // Handle text change with debouncing
+    var handleTextChange = (0, react_1.useCallback)(function () {
+        var _a, _b, _c;
+        if (!quill)
+            return;
+        isTypingRef.current = true;
+        // Reset typing flag after 500ms of inactivity
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        typingTimeoutRef.current = setTimeout(function () {
+            isTypingRef.current = false;
+        }, 500);
+        var plainText = quill.getText().trim();
+        // --- Enforce maxValue if needed ---
+        if (maxValueRef.current && plainText.length > maxValueRef.current) {
+            var truncated = plainText.slice(0, maxValueRef.current);
+            quill.setText(truncated);
+            quill.setSelection(truncated.length);
+            return; // Don't trigger onChange for truncated text
+        }
+        // --- Clean the HTML output ---
+        var cleanedHTML = (_c = (_b = (_a = quill.root.innerHTML) === null || _a === void 0 ? void 0 : _a.replace(/<p><br><\/p>/g, '') // remove empty paragraphs
+        ) === null || _b === void 0 ? void 0 : _b.replace(/\s+/g, ' ') // collapse multiple spaces
+        ) === null || _c === void 0 ? void 0 : _c.trim(); // remove leading/trailing spaces
+        lastKnownValueRef.current = cleanedHTML || '';
+        debouncedOnChange(lastKnownValueRef.current);
+    }, [quill, debouncedOnChange]);
+    // Handle selection change
+    var handleSelectionChange = (0, react_1.useCallback)(function (range) {
+        if (range)
+            savedRange.current = range;
+    }, []);
+    // Handle focus
+    var handleFocus = (0, react_1.useCallback)(function () {
+        setIsFocused(true);
+    }, []);
+    // Handle blur
+    var handleBlur = (0, react_1.useCallback)(function () {
+        setIsFocused(false);
+        isTypingRef.current = false;
+    }, []);
+    // Set up event listeners
     (0, react_1.useEffect)(function () {
         if (!quill)
             return;
-        var handleSelectionChange = function (range) {
-            if (range)
-                savedRange.current = range;
-        };
-        var handleTextChange = function () {
-            var _a, _b, _c;
-            if (!quill)
-                return;
-            var plainText = quill.getText().trim();
-            // --- Enforce maxValue if needed ---
-            if (maxValue && plainText.length > maxValue) {
-                var truncated = plainText.slice(0, maxValue);
-                quill.setText(truncated);
-                quill.setSelection(truncated.length);
-            }
-            // --- Clean the HTML output ---
-            var cleanedHTML = (_c = (_b = (_a = quill.root.innerHTML) === null || _a === void 0 ? void 0 : _a.replace(/<p><br><\/p>/g, '') // remove empty paragraphs
-            ) === null || _b === void 0 ? void 0 : _b.replace(/\s+/g, ' ') // collapse multiple spaces
-            ) === null || _c === void 0 ? void 0 : _c.trim(); // remove leading/trailing spaces
-            onChange(cleanedHTML || '');
-        };
+        var editor = quill.root;
         quill.on('selection-change', handleSelectionChange);
         quill.on('text-change', handleTextChange);
+        // Add focus/blur event listeners
+        editor.addEventListener('focus', handleFocus);
+        editor.addEventListener('blur', handleBlur);
         return function () {
             quill.off('selection-change', handleSelectionChange);
             quill.off('text-change', handleTextChange);
+            // Remove focus/blur event listeners
+            editor.removeEventListener('focus', handleFocus);
+            editor.removeEventListener('blur', handleBlur);
+            // Clean up timeouts
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
         };
-    }, [quill, onChange, maxValue]);
+    }, [quill, handleSelectionChange, handleTextChange, handleFocus, handleBlur]);
+    // Initialize editor with initial value
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        if (quill && value !== quill.root.innerHTML) {
+        if (!quill)
+            return;
+        // Only set initial value on first mount
+        if (isInitialMount.current && value) {
             // clean before setting editor value
             var cleanedValue = (_b = (_a = value === null || value === void 0 ? void 0 : value.replace(/<p><br><\/p>/g, '')) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ')) === null || _b === void 0 ? void 0 : _b.trim();
             quill.root.innerHTML = cleanedValue || '';
+            lastKnownValueRef.current = cleanedValue || '';
+            isInitialMount.current = false;
         }
     }, [quill, value]);
-    var insertEmoji = function (emoji) {
+    // Update editor when value prop changes (for external updates)
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!quill || isInitialMount.current)
+            return;
+        // Skip if value is the same as current editor content
+        if (value === lastKnownValueRef.current)
+            return;
+        // Don't update while user is typing or editor is focused
+        if (isTypingRef.current || isFocused) {
+            return;
+        }
+        // clean before setting editor value
+        var cleanedValue = (_b = (_a = value === null || value === void 0 ? void 0 : value.replace(/<p><br><\/p>/g, '')) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ')) === null || _b === void 0 ? void 0 : _b.trim();
+        if (quill.root.innerHTML !== cleanedValue) {
+            quill.root.innerHTML = cleanedValue || '';
+            lastKnownValueRef.current = cleanedValue || '';
+        }
+    }, [quill, value, isFocused]);
+    var insertEmoji = (0, react_1.useCallback)(function (emoji) {
         if (quill && savedRange.current) {
             var plainText = quill.getText().trim();
-            if (!maxValue || plainText.length + emoji.length <= maxValue) {
+            if (!maxValueRef.current || plainText.length + emoji.length <= maxValueRef.current) {
+                var selection = quill.getSelection();
                 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,
+    }, [quill]);
+    var renderEmojiSection = (0, react_1.useCallback)(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)); })))); };
+        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)); })))); }, [insertEmoji]);
     return (react_1.default.createElement("div", { className: "fit round-edge ".concat(funcss), style: { position: 'relative', overflow: 'visible' } },
         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: {
@@ -139,3 +223,196 @@ var RichText = function (_a) {
                     maxValue)) : (react_1.default.createElement("div", null)))))));
 };
 exports.default = RichText;
+// 'use client';
+// import React, { useEffect, useRef } from 'react';
+// import { useQuill } from 'react-quilljs';
+// import { MdOutlineEmojiEmotions } from 'react-icons/md';
+// import { AllEmojis } from '../../utils/Emojis';
+// import Dropdown from '../drop/Dropdown';
+// import RowFlex from '../specials/RowFlex';
+// import ToolTip from '../tooltip/ToolTip';
+// import Circle from '../specials/Circle';
+// import Tip from '../tooltip/Tip';
+// import Flex from '../flex/Flex';
+// type RangeStatic = {
+//   index: number;
+//   length: number;
+// };
+// interface RichTextProps {
+//   value: string;
+//   onChange: (content: string) => void;
+//   showEmojis?: boolean;
+//   placeholder?: string;
+//   afterEmoji?: React.ReactNode;
+//   funcss?: string;
+//   modules?: any;
+//   theme?: 'bubble' | 'snow';
+//   fontFamily?: string;
+//   maxValue?: number;
+// }
+// const RichText: React.FC<RichTextProps> = ({
+//   value,
+//   onChange,
+//   showEmojis = false,
+//   placeholder = 'Write something...',
+//   afterEmoji,
+//   funcss = '',
+//   modules,
+//   theme = 'bubble',
+//   fontFamily,
+//   maxValue,
+// }) => {
+//   const savedRange = useRef<RangeStatic | null>(null);
+//   const defaultModules = {
+//     toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
+//   };
+//   const { quill, quillRef } = useQuill({
+//     theme,
+//     placeholder,
+//     modules: modules || defaultModules,
+//   });
+//   useEffect(() => {
+//     if (!quill) return;
+//     const handleSelectionChange = (range: RangeStatic | null) => {
+//       if (range) savedRange.current = range;
+//     };
+//     const handleTextChange = () => {
+//       if (!quill) return;
+//       const plainText = quill.getText().trim();
+//       // --- Enforce maxValue if needed ---
+//       if (maxValue && plainText.length > maxValue) {
+//         const truncated = plainText.slice(0, maxValue);
+//         quill.setText(truncated);
+//         quill.setSelection(truncated.length);
+//       }
+//       // --- Clean the HTML output ---
+//       const cleanedHTML = quill.root.innerHTML
+//         ?.replace(/<p><br><\/p>/g, '') // remove empty paragraphs
+//         ?.replace(/\s+/g, ' ')         // collapse multiple spaces
+//         ?.trim();                      // remove leading/trailing spaces
+//       onChange(cleanedHTML || '');
+//     };
+//     quill.on('selection-change', handleSelectionChange);
+//     quill.on('text-change', handleTextChange);
+//     return () => {
+//       quill.off('selection-change', handleSelectionChange);
+//       quill.off('text-change', handleTextChange);
+//     };
+//   }, [quill, onChange, maxValue]);
+//   useEffect(() => {
+//     if (quill && value !== quill.root.innerHTML) {
+//       // clean before setting editor value
+//       const cleanedValue = value
+//         ?.replace(/<p><br><\/p>/g, '')
+//         ?.replace(/\s+/g, ' ')
+//         ?.trim();
+//       quill.root.innerHTML = cleanedValue || '';
+//     }
+//   }, [quill, value]);
+//   const insertEmoji = (emoji: string) => {
+//     if (quill && savedRange.current) {
+//       const plainText = quill.getText().trim();
+//       if (!maxValue || plainText.length + emoji.length <= maxValue) {
+//         quill.insertText(savedRange.current.index, emoji);
+//         quill.setSelection(savedRange.current.index + emoji.length);
+//       }
+//     }
+//   };
+//   const renderEmojiSection = (title: string, emojis: string[]) => (
+//     <>
+//       <div className="mb-2 mt-2 text-sm">{title}</div>
+//       <RowFlex gap={0.3}>
+//         {emojis.map((emoji, i) => (
+//           <span
+//             key={i}
+//             className="h6 pointer"
+//             onClick={() => insertEmoji(emoji)}
+//           >
+//             {emoji}
+//           </span>
+//         ))}
+//       </RowFlex>
+//     </>
+//   );
+//   return (
+//     <div
+//       className={`fit round-edge ${funcss}`}
+//       style={{ position: 'relative', overflow: 'visible' }}
+//     >
+//       <div id="editor-container" className="bubble-editor-container p-0">
+//         <div
+//           ref={quillRef}
+//           className={theme === 'bubble' ? 'bubble-editor' : 'snow-editor'}
+//           style={{
+//             fontFamily: fontFamily || 'inherit',
+//           }}
+//         />
+//       </div>
+//       {(showEmojis || maxValue) && (
+//         <div
+//           className="p-1"
+//           style={{ height: 'fit-content', top: `calc(100%)`, width: '100%' }}
+//         >
+//           <Flex justify="space-between" gap={1} alignItems="center" width="100%">
+//             {(showEmojis || afterEmoji) ? (
+//               <div>
+//                 <Flex width="100%" gap={0.5} alignItems="center">
+//                   {showEmojis && (
+//                     <Dropdown
+//                       closableOnlyOutside
+//                       openOnHover={false}
+//                       button={
+//                         <ToolTip>
+//                           <Circle size={2} funcss="bg border">
+//                             <MdOutlineEmojiEmotions />
+//                           </Circle>
+//                           <Tip
+//                             tip="top"
+//                             animation="ScaleUp"
+//                             duration={0.5}
+//                             content="Emojis"
+//                           />
+//                         </ToolTip>
+//                       }
+//                       items={[
+//                         {
+//                           label: (
+//                             <div
+//                               className="w-200 h-200"
+//                               style={{ overflowY: 'auto' }}
+//                             >
+//                               {renderEmojiSection('❤️ Smileys & People', AllEmojis.Smiley)}
+//                               {renderEmojiSection('👍 Gestures & Body Parts', AllEmojis.Gesture)}
+//                               {renderEmojiSection('🔥 Symbols & Expressions', AllEmojis.Symbols)}
+//                               {renderEmojiSection('🚀 Travel, Objects & Activities', AllEmojis.Travel)}
+//                               {renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', AllEmojis.People)}
+//                               {renderEmojiSection('🐶 Animals & Nature', AllEmojis.Animals)}
+//                             </div>
+//                           ),
+//                         },
+//                       ]}
+//                     />
+//                   )}
+//                   {afterEmoji}
+//                 </Flex>
+//               </div>
+//             ) : (
+//               <div />
+//             )}
+//             {maxValue && quill ? (
+//               <div className="text-xs text-right">
+//                 <span className="text-primary">
+//                   {quill.getText().trim().length}
+//                 </span>
+//                 /{maxValue}
+//               </div>
+//             ) : (
+//               <div />
+//             )}
+//           </Flex>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// export default RichText;

package/ui/vista/Vista.d.ts

@@ -5,7 +5,7 @@ type VistaProps = {
     gradientOverlay?: boolean;
     gradientColor?: string;
     gradientOpacity?: number;
-    gradientDirection?: 'linear' | 'radial';
+    gradientDirection?: 'linear' | 'radial' | 'even';
     gradientLinearDirection?: 'to right' | 'to left' | 'to top' | 'to bottom' | 'to top right' | 'to top left' | 'to bottom right' | 'to bottom left';
     backgroundMedia?: 'none' | 'image' | 'video';
     backgroundImage?: string;