funuicss 3.9.13 → 3.9.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.13",
+  "version": "3.9.14",
   "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/appbar/AppBar.d.ts

@@ -31,6 +31,7 @@ interface NavbarProps {
     rightLinks?: NavLink[] | string;
     renderLink?: (link: NavLink, index: number) => React.ReactNode;
     mobileMenuBreakpoint?: number;
+    visibleLinks?: boolean;
     logoType?: 'text' | 'image' | 'both' | 'none';
     logoText?: string;
     logoTextSize?: string;

package/ui/appbar/AppBar.js

@@ -85,9 +85,11 @@ var DropdownArrow = function (_a) {
 };
 // Link Item Component with Dropdown Support
 var LinkItem = function (_a) {
-    var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e;
-    var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
-    var _g = (0, react_1.useState)(null), iconNode = _g[0], setIconNode = _g[1];
+    var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e, _f = _a.visibleLinks // Add visibleLinks prop here
+    , visibleLinks = _f === void 0 ? false : _f // Add visibleLinks prop here
+    ;
+    var _g = (0, react_1.useState)(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = (0, react_1.useState)(null), iconNode = _h[0], setIconNode = _h[1];
     var timeoutRef = (0, react_1.useRef)();
     var dropdownRef = (0, react_1.useRef)(null);
     // Handle dynamic icon loading
@@ -117,17 +119,17 @@ var LinkItem = function (_a) {
     var handleMouseEnter = function () {
         if (timeoutRef.current)
             clearTimeout(timeoutRef.current);
-        if (!isMobile && hasChildren) {
+        if ((!isMobile || visibleLinks) && hasChildren) { // Updated condition
             setIsOpen(true);
         }
     };
     var handleMouseLeave = function () {
-        if (!isMobile) {
+        if (!isMobile || visibleLinks) { // Updated condition
             timeoutRef.current = setTimeout(function () { return setIsOpen(false); }, 150);
         }
     };
     var handleClick = function (e) {
-        if (hasChildren && isMobile) {
+        if (hasChildren && (isMobile && !visibleLinks)) { // Only toggle on mobile when visibleLinks is false
             e.preventDefault();
             setIsOpen(!isOpen);
         }
@@ -156,11 +158,15 @@ var LinkItem = function (_a) {
                 display: 'flex',
                 alignItems: 'center'
             } }, linkContent),
-        hasChildren && isOpen && (React.createElement("div", { className: "nav_dropdown-menu ".concat(isMobile ? 'nav_dropdown-mobile' : '') }, link.children.map(function (child, index) { return (React.createElement(LinkItem, { key: index, link: child, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })))));
+        hasChildren && isOpen && (React.createElement("div", { className: "nav_dropdown-menu ".concat((isMobile && !visibleLinks) ? 'nav_dropdown-mobile' : '') },
+            " ",
+            link.children.map(function (child, index) { return (React.createElement(LinkItem, { key: index, link: child, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile, visibleLinks: visibleLinks })); })))));
 };
 // Links component to render navigation links
 var NavLinks = function (_a) {
-    var links = _a.links, renderLink = _a.renderLink, _b = _a.linkGap, linkGap = _b === void 0 ? '1rem' : _b, _c = _a.linkPadding, linkPadding = _c === void 0 ? '0.5rem 1rem' : _c, _d = _a.activeLinkColor, activeLinkColor = _d === void 0 ? 'primary' : _d, _e = _a.dropdownArrow, dropdownArrow = _e === void 0 ? true : _e, _f = _a.isMobile, isMobile = _f === void 0 ? false : _f;
+    var links = _a.links, renderLink = _a.renderLink, _b = _a.linkGap, linkGap = _b === void 0 ? '1rem' : _b, _c = _a.linkPadding, linkPadding = _c === void 0 ? '0.5rem 1rem' : _c, _d = _a.activeLinkColor, activeLinkColor = _d === void 0 ? 'primary' : _d, _e = _a.dropdownArrow, dropdownArrow = _e === void 0 ? true : _e, _f = _a.isMobile, isMobile = _f === void 0 ? false : _f, _g = _a.visibleLinks // Add visibleLinks prop here
+    , visibleLinks = _g === void 0 ? false : _g // Add visibleLinks prop here
+    ;
     if (!links || !Array.isArray(links) || links.length === 0) {
         return null;
     }
@@ -168,8 +174,8 @@ var NavLinks = function (_a) {
             display: 'flex',
             alignItems: 'center',
             gap: linkGap,
-            flexDirection: isMobile ? 'column' : 'row'
-        } }, links.map(function (link, index) { return (React.createElement(LinkItem, { key: index, link: link, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })));
+            flexDirection: (isMobile && !visibleLinks) ? 'column' : 'row' // Only column layout when mobile menu is open
+        } }, links.map(function (link, index) { return (React.createElement(LinkItem, { key: index, link: link, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile, visibleLinks: visibleLinks })); })));
 };
 // Logo component with multiple display options
 var Logo = function (_a) {
@@ -244,46 +250,590 @@ function AppBar(localProps) {
         var hasLeftLinks = parsedLeftLinks.length > 0;
         return (React.createElement("div", { className: "left-section", style: { display: 'flex', alignItems: 'center', gap: '2rem' } },
             shouldRenderLogo && (React.createElement(Logo, { type: final.logoType, text: final.logoText, textSize: final.logoTextSize, textColor: final.logoTextColor, textWeight: final.logoTextWeight, url: final.logoUrl, alt: final.logoAlt, width: final.logoWidth, height: final.logoHeight, href: final.logoHref, onClick: final.onLogoClick })),
-            hasLeftLinks && !isMobileScreen && (React.createElement(NavLinks, { links: parsedLeftLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }))));
+            hasLeftLinks && (!isMobileScreen || final.visibleLinks) && ( // Updated condition
+            React.createElement(NavLinks, { links: parsedLeftLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: isMobileScreen, visibleLinks: final.visibleLinks }))));
     };
     var renderCenterSection = function () {
         if (final.center)
             return final.center;
-        if (parsedCenterLinks.length > 0 && !isMobileScreen) {
-            return (React.createElement(NavLinks, { links: parsedCenterLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
+        if (parsedCenterLinks.length > 0 && (!isMobileScreen || final.visibleLinks)) { // Updated condition
+            return (React.createElement(NavLinks, { links: parsedCenterLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: isMobileScreen, visibleLinks: final.visibleLinks }));
         }
         return null;
     };
     var renderRightSection = function () {
         if (final.right)
             return final.right;
-        if (parsedRightLinks.length > 0 && !isMobileScreen) {
-            return (React.createElement(NavLinks, { links: parsedRightLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
+        if (parsedRightLinks.length > 0 && (!isMobileScreen || final.visibleLinks)) { // Updated condition
+            return (React.createElement(NavLinks, { links: parsedRightLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: isMobileScreen, visibleLinks: final.visibleLinks }));
         }
         return null;
     };
-    // Mobile menu content
+    // Mobile menu content - only show when visibleLinks is false
     var renderMobileMenu = function () {
-        if (!isMobileScreen || !isMobileMenuOpen)
-            return null;
+        if (!isMobileScreen || !isMobileMenuOpen || final.visibleLinks)
+            return null; // Don't show mobile menu when visibleLinks is true
         var allLinks = __spreadArray(__spreadArray(__spreadArray([], parsedLeftLinks, true), parsedCenterLinks, true), parsedRightLinks, true);
         return (React.createElement("div", { className: "nav_mobile-menu" },
-            React.createElement(NavLinks, { links: allLinks, renderLink: final.renderLink, linkGap: "0.5rem", linkPadding: "1rem", activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: true })));
+            React.createElement(NavLinks, { links: allLinks, renderLink: final.renderLink, linkGap: "0.5rem", linkPadding: "1rem", activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: true, visibleLinks: final.visibleLinks })));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("nav", { id: 'appBar', className: "navigation-bar\n          ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n          ").concat(final.funcss || '', "\n          ").concat(final.testing ? "" : final.fixedTop ? 'fixed_top_navbar' : '', "\n          ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n          ").concat(final.transparent ? 'transparent' : '', "\n          ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n        "), style: {
+        React.createElement("nav", { id: 'appBar', className: "navigation-bar\n          ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n          ").concat(final.funcss || '', "\n          ").concat(final.testing ? "" : final.fixedTop ? 'fixed_top_navbar' : '', "\n          ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n          ").concat(final.transparent ? 'transparent' : '', "\n          ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n          ").concat(final.visibleLinks ? 'visible-links-mode' : '', " // Add class for styling\n        "), style: {
                 padding: "".concat(final.padding || ''),
                 justifyContent: "".concat(final.justify || ''),
             } },
             React.createElement("div", { className: "logoWrapper" },
                 renderLeftSection(),
-                isMobileScreen && isMobileMenuOpen && (React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
+                isMobileScreen && isMobileMenuOpen && !final.visibleLinks && ( // Only show close button when not in visibleLinks mode
+                React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
                     React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
             React.createElement("div", { className: "linkWrapper" }, renderCenterSection()),
             React.createElement("div", { className: "linkWrapper" }, renderRightSection()),
-            isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, final.hasSidebar ?
+            isMobileScreen && !isMobileMenuOpen && !final.visibleLinks && (React.createElement(React.Fragment, null, final.hasSidebar ?
                 React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: final.openSidebar }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: final.sidebarOpen }))
                 :
                     React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))),
         renderMobileMenu()));
 }
+// 'use client';
+// import * as React from 'react';
+// import { useState, useEffect, useRef } from 'react';
+// import { usePathname } from 'next/navigation';
+// import Hamburger from './Hamburger';
+// import { useComponentConfiguration } from '../../utils/componentUtils';
+// import { getDynamicIcon } from '../../utils/getDynamicIcon';
+// interface NavLink {
+//   label: string;
+//   href: string;
+//   icon?: string;
+//   iconPosition?: 'prefix' | 'suffix';
+//   children?: NavLink[];
+//   active?: boolean;
+//   className?: string;
+// }
+// interface NavbarProps {
+//   // Layout & Behavior
+//   fixedTop?: boolean;
+//   funcss?: string;
+//   padding?: string;
+//   fixedBottom?: boolean;
+//   justify?: string;
+//   transparent?: boolean;
+//   testing?: boolean;
+//   // Content Sections
+//   children?: React.ReactNode;
+//   left?: React.ReactNode;
+//   center?: React.ReactNode;
+//   right?: React.ReactNode;
+//   // Sidebar
+//   sidebarTrigger?: React.ReactNode;
+//   sideBar?: number;
+//   hasSidebar?: boolean;
+//   sidebarOpen?: boolean;
+//   openSidebar?: () => void;
+//   // Variant Support
+//   variant?: string;
+//   // Navigation Links
+//   leftLinks?: NavLink[] | string;
+//   centerLinks?: NavLink[] | string;
+//   rightLinks?: NavLink[] | string;
+//   renderLink?: (link: NavLink, index: number) => React.ReactNode;
+//   mobileMenuBreakpoint?: number;
+//   // Logo Customization
+//   logoType?: 'text' | 'image' | 'both' | 'none';
+//   logoText?: string;
+//   logoTextSize?: string;
+//   logoTextColor?: string;
+//   logoTextWeight?: string;
+//   logoUrl?: string;
+//   logoAlt?: string;
+//   logoWidth?: string;
+//   logoHeight?: string;
+//   logoHref?: string;
+//   onLogoClick?: () => void;
+//   // Link Styling
+//   linkGap?: string;
+//   linkPadding?: string;
+//   activeLinkColor?: string;
+//   dropdownArrow?: boolean;
+// }
+// // Parse string to object utility
+// const parseIfString = <T,>(value: T | string, fallback: T): T => {
+//   if (typeof value === 'string') {
+//     try {
+//       const parsed = JSON.parse(value) as T;
+//       if (Array.isArray(fallback) && !Array.isArray(parsed)) {
+//         console.warn('Parsed value is not an array, using fallback');
+//         return fallback;
+//       }
+//       return parsed;
+//     } catch (error) {
+//       console.error('Failed to parse JSON string:', error);
+//       return fallback;
+//     }
+//   }
+//   if (value == null) {
+//     return fallback;
+//   }
+//   return value as T;
+// };
+// // Dropdown Arrow Icon Component
+// const DropdownArrow = ({ isOpen }: { isOpen: boolean }) => (
+//   <svg 
+//     width="16" 
+//     height="16" 
+//     viewBox="0 0 16 16" 
+//     style={{ 
+//       transition: 'transform 0.3s ease',
+//       transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+//     }}
+//   >
+//     <path 
+//       d="M4 6 L8 10 L12 6" 
+//       fill="none" 
+//       stroke="currentColor" 
+//       strokeWidth="2" 
+//       strokeLinecap="round"
+//     />
+//   </svg>
+// );
+// // Link Item Component with Dropdown Support
+// const LinkItem = ({ 
+//   link, 
+//   renderLink,
+//   linkPadding = '',
+//   activeLinkColor = 'primary',
+//   dropdownArrow = true,
+//   isMobile = false
+// }: { 
+//   link: NavLink;
+//   renderLink?: (link: NavLink, index: number) => React.ReactNode;
+//   linkPadding?: string;
+//   activeLinkColor?: string;
+//   dropdownArrow?: boolean;
+//   isMobile?: boolean;
+// }) => {
+//   const [isOpen, setIsOpen] = useState(false);
+//   const [iconNode, setIconNode] = useState<React.ReactNode>(null);
+//   const timeoutRef = useRef<NodeJS.Timeout>();
+//   const dropdownRef = useRef<HTMLDivElement>(null);
+//   // Handle dynamic icon loading
+//   useEffect(() => {
+//     if (link.icon) {
+//       getDynamicIcon(link.icon).then(setIconNode);
+//     } else {
+//       setIconNode(null);
+//     }
+//   }, [link.icon]);
+//   // Close dropdown when clicking outside
+//   useEffect(() => {
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+//         setIsOpen(false);
+//       }
+//     };
+//     if (isOpen) {
+//       document.addEventListener('mousedown', handleClickOutside);
+//     }
+//     return () => {
+//       document.removeEventListener('mousedown', handleClickOutside);
+//     };
+//   }, [isOpen]);
+//   const hasChildren = link.children && link.children.length > 0;
+//   const handleMouseEnter = () => {
+//     if (timeoutRef.current) clearTimeout(timeoutRef.current);
+//     if (!isMobile && hasChildren) {
+//       setIsOpen(true);
+//     }
+//   };
+//   const handleMouseLeave = () => {
+//     if (!isMobile) {
+//       timeoutRef.current = setTimeout(() => setIsOpen(false), 150);
+//     }
+//   };
+//   const handleClick = (e: React.MouseEvent) => {
+//     if (hasChildren && isMobile) {
+//       e.preventDefault();
+//       setIsOpen(!isOpen);
+//     }
+//   };
+//   const linkContent = (
+//     <span 
+//       className={`nav_link-content ${link.active ? 'active' : ''} ${link.className || ''}`}
+//       style={{
+//         display: 'flex',
+//         alignItems: 'center',
+//         gap: '0.5rem',
+//         padding: linkPadding,
+//         color: 'inherit',
+//         textDecoration: 'none'
+//       }}
+//     >
+//       {/* Prefix Icon */}
+//       {iconNode && link.iconPosition !== 'suffix' && (
+//         <span className="nav_link-icon prefix" style={{ display: 'flex', alignItems: 'center' }}>
+//           {iconNode}
+//         </span>
+//       )}
+//       <span className="nav_link-text">{link.label}</span>
+//       {/* Suffix Icon */}
+//       {iconNode && link.iconPosition === 'suffix' && (
+//         <span className="nav_link-icon suffix" style={{ display: 'flex', alignItems: 'center' }}>
+//           {iconNode}
+//         </span>
+//       )}
+//       {/* Dropdown Arrow */}
+//       {hasChildren && dropdownArrow && (
+//         <span className="nav_link-arrow" style={{ display: 'flex', alignItems: 'center' }}>
+//           <DropdownArrow isOpen={isOpen} />
+//         </span>
+//       )}
+//     </span>
+//   );
+//   // If custom renderer is provided, use it
+//   if (renderLink) {
+//     return renderLink(link, 0);
+//   }
+//   return (
+//     <div 
+//       ref={dropdownRef}
+//       className={`nav_item ${hasChildren ? 'has-dropdown' : ''} ${isOpen ? 'dropdown-open' : ''}`}
+//       onMouseEnter={handleMouseEnter}
+//       onMouseLeave={handleMouseLeave}
+//       style={{ position: 'relative' }}
+//     >
+//       <a
+//         href={link.href}
+//         className={`nav_link ${link.active ? 'active' : ''}`}
+//         onClick={handleClick}
+//         style={{
+//           textDecoration: 'none',
+//           color: 'inherit',
+//           display: 'flex',
+//           alignItems: 'center'
+//         }}
+//       >
+//         {linkContent}
+//       </a>
+//       {/* Dropdown Menu */}
+//       {hasChildren && isOpen && (
+//         <div className={`nav_dropdown-menu ${isMobile ? 'nav_dropdown-mobile' : ''}`}>
+//           {link.children!.map((child, index) => (
+//             <LinkItem 
+//               key={index}
+//               link={child}
+//               renderLink={renderLink}
+//               linkPadding={linkPadding}
+//               activeLinkColor={activeLinkColor}
+//               dropdownArrow={dropdownArrow}
+//               isMobile={isMobile}
+//             />
+//           ))}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// // Links component to render navigation links
+// const NavLinks = ({ 
+//   links, 
+//   renderLink,
+//   linkGap = '1rem',
+//   linkPadding = '0.5rem 1rem',
+//   activeLinkColor = 'primary',
+//   dropdownArrow = true,
+//   isMobile = false
+// }: { 
+//   links: NavLink[]; 
+//   renderLink?: (link: NavLink, index: number) => React.ReactNode;
+//   linkGap?: string;
+//   linkPadding?: string;
+//   activeLinkColor?: string;
+//   dropdownArrow?: boolean;
+//   isMobile?: boolean;
+// }) => {
+//   if (!links || !Array.isArray(links) || links.length === 0) {
+//     return null;
+//   }
+//   return (
+//     <div 
+//       className="nav_links" 
+//       style={{ 
+//         display: 'flex', 
+//         alignItems: 'center', 
+//         gap: linkGap,
+//         flexDirection: isMobile ? 'column' : 'row'
+//       }}
+//     >
+//       {links.map((link, index) => (
+//         <LinkItem
+//           key={index}
+//           link={link}
+//           renderLink={renderLink}
+//           linkPadding={linkPadding}
+//           activeLinkColor={activeLinkColor}
+//           dropdownArrow={dropdownArrow}
+//           isMobile={isMobile}
+//         />
+//       ))}
+//     </div>
+//   );
+// };
+// // Logo component with multiple display options
+// const Logo = ({ 
+//   type = 'text',
+//   text = 'MyApp',
+//   textSize = 'xl',
+//   textColor = 'primary',
+//   textWeight = 'bold',
+//   url = '',
+//   alt = 'Logo',
+//   width = '40px',
+//   height = 'auto',
+//   href = '/',
+//   onClick
+// }: {
+//   type?: 'text' | 'image' | 'both' | 'none';
+//   text?: string;
+//   textSize?: string;
+//   textColor?: string;
+//   textWeight?: string;
+//   url?: string;
+//   alt?: string;
+//   width?: string;
+//   height?: string;
+//   href?: string;
+//   onClick?: () => void;
+// }) => {
+//   if (type === 'none') return null;
+//   const logoContent = (
+//     <div className="logo-content" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+//       {/* Image Logo */}
+//       {(type === 'image' || type === 'both') && url && (
+//         <img 
+//           src={url} 
+//           alt={alt}
+//           style={{ 
+//             width, 
+//             height, 
+//             objectFit: 'contain',
+//             display: 'block'
+//           }}
+//           className="logo-image"
+//         />
+//       )}
+//       {/* Text Logo */}
+//       {(type === 'text' || type === 'both') && text && (
+//         <span 
+//           className={`logo-text text-${textSize} text-${textColor} font-${textWeight}`}
+//           style={{ 
+//             lineHeight: 1,
+//             whiteSpace: 'nowrap'
+//           }}
+//         >
+//           {text}
+//         </span>
+//       )}
+//     </div>
+//   );
+//   // Wrap in link if href provided
+//   if (href) {
+//     return (
+//       <a 
+//         href={href}
+//         onClick={onClick}
+//         style={{ 
+//           textDecoration: 'none', 
+//           color: 'inherit',
+//           display: 'flex',
+//           alignItems: 'center'
+//         }}
+//         className="logo-link"
+//       >
+//         {logoContent}
+//       </a>
+//     );
+//   }
+//   return (
+//     <div 
+//       onClick={onClick}
+//       style={{ cursor: onClick ? 'pointer' : 'default' }}
+//       className="logo-container"
+//     >
+//       {logoContent}
+//     </div>
+//   );
+// };
+// export default function AppBar(localProps: NavbarProps) {
+//   // Use component configuration with variant support
+//   const { mergeWithLocal } = useComponentConfiguration('AppBar', localProps.variant);
+//   // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   // Parse link props if they're strings
+//   const parsedLeftLinks = parseIfString<NavLink[]>(mergedProps.leftLinks, []);
+//   const parsedCenterLinks = parseIfString<NavLink[]>(mergedProps.centerLinks, []);
+//   const parsedRightLinks = parseIfString<NavLink[]>(mergedProps.rightLinks, []);
+//   // Use mergedProps directly
+//   const final = mergedProps;
+//   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+//   const [isMobileScreen, setIsMobileScreen] = useState(false);
+//   const pathname = usePathname();
+//   const toggleMenu = () => setIsMobileMenuOpen((prev) => !prev);
+//   const closeMenu = () => setIsMobileMenuOpen(false);
+//   useEffect(() => {
+//     const handleResize = () => {
+//       const isMobile = window.innerWidth < (final.mobileMenuBreakpoint || 992);
+//       setIsMobileScreen(isMobile);
+//       if (!isMobile) {
+//         closeMenu(); // close on larger screens
+//       }
+//     };
+//     handleResize(); // initial check
+//     window.addEventListener('resize', handleResize);
+//     return () => window.removeEventListener('resize', handleResize);
+//   }, [final.mobileMenuBreakpoint]);
+//   // Automatically close menu on route (pathname) change
+//   useEffect(() => {
+//     closeMenu();
+//   }, [pathname]);
+//   const Trigger = ({ isOpen }: { isOpen: boolean }) => {
+//     return <Hamburger isOpen={isOpen} />;
+//   };
+//   // Enhanced left section with logo customization
+//   const renderLeftSection = () => {
+//     // If custom left content is provided, use it (overrides everything)
+//     if (final.left) return final.left;
+//     // Render logo based on configuration
+//     const shouldRenderLogo = final.logoType && final.logoType !== 'none';
+//     const hasLeftLinks = parsedLeftLinks.length > 0;
+//     return (
+//       <div className="left-section" style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
+//         {/* Logo */}
+//         {shouldRenderLogo && (
+//           <Logo
+//             type={final.logoType}
+//             text={final.logoText}
+//             textSize={final.logoTextSize}
+//             textColor={final.logoTextColor}
+//             textWeight={final.logoTextWeight}
+//             url={final.logoUrl}
+//             alt={final.logoAlt}
+//             width={final.logoWidth}
+//             height={final.logoHeight}
+//             href={final.logoHref}
+//             onClick={final.onLogoClick}
+//           />
+//         )}
+//         {/* Left navigation links (appear next to logo) */}
+//         {hasLeftLinks && !isMobileScreen && (
+//           <NavLinks 
+//             links={parsedLeftLinks} 
+//             renderLink={final.renderLink}
+//             linkGap={final.linkGap}
+//             linkPadding={final.linkPadding}
+//             activeLinkColor={final.activeLinkColor}
+//             dropdownArrow={final.dropdownArrow}
+//           />
+//         )}
+//       </div>
+//     );
+//   };
+//   const renderCenterSection = () => {
+//     if (final.center) return final.center;
+//     if (parsedCenterLinks.length > 0 && !isMobileScreen) {
+//       return (
+//         <NavLinks 
+//           links={parsedCenterLinks} 
+//           renderLink={final.renderLink}
+//           linkGap={final.linkGap}
+//           linkPadding={final.linkPadding}
+//           activeLinkColor={final.activeLinkColor}
+//           dropdownArrow={final.dropdownArrow}
+//         />
+//       );
+//     }
+//     return null;
+//   };
+//   const renderRightSection = () => {
+//     if (final.right) return final.right;
+//     if (parsedRightLinks.length > 0 && !isMobileScreen) {
+//       return (
+//         <NavLinks 
+//           links={parsedRightLinks} 
+//           renderLink={final.renderLink}
+//           linkGap={final.linkGap}
+//           linkPadding={final.linkPadding}
+//           activeLinkColor={final.activeLinkColor}
+//           dropdownArrow={final.dropdownArrow}
+//         />
+//       );
+//     }
+//     return null;
+//   };
+//   // Mobile menu content
+//   const renderMobileMenu = () => {
+//     if (!isMobileScreen || !isMobileMenuOpen) return null;
+//     const allLinks = [...parsedLeftLinks, ...parsedCenterLinks, ...parsedRightLinks];
+//     return (
+//       <div className="nav_mobile-menu">
+//         <NavLinks 
+//           links={allLinks} 
+//           renderLink={final.renderLink}
+//           linkGap="0.5rem"
+//           linkPadding="1rem"
+//           activeLinkColor={final.activeLinkColor}
+//           dropdownArrow={final.dropdownArrow}
+//           isMobile={true}
+//         />
+//       </div>
+//     );
+//   };
+//   return (
+//     <>
+//       <nav
+//         id='appBar'
+//         className={`navigation-bar
+//           ${isMobileMenuOpen ? 'navbar-mobile-open' : ''}
+//           ${final.funcss || ''}
+//           ${  final.testing ? "" : final.fixedTop ? 'fixed_top_navbar' : ''}
+//           ${final.sideBar ? 'there_is_sidebar' : ''}
+//           ${final.transparent ? 'transparent' : ''}
+//           ${final.fixedBottom ? 'fixedBottom' : ''}
+//         `}
+//         style={{
+//           padding: `${final.padding || ''}`,
+//           justifyContent: `${final.justify || ''}`,
+//         }}
+//       >
+//         <div className="logoWrapper">
+//           {renderLeftSection()}
+//           {isMobileScreen && isMobileMenuOpen && (
+//             <div className="hover-text-error pointer _closeNav" onClick={closeMenu}>
+//               <Trigger isOpen={isMobileMenuOpen} />
+//             </div>
+//           )}
+//         </div>
+//         <div className="linkWrapper">
+//           {renderCenterSection()}
+//         </div>
+//         <div className="linkWrapper">
+//           {renderRightSection()}
+//         </div>
+//         {isMobileScreen && !isMobileMenuOpen && (
+//           <>
+//             {final.hasSidebar ? 
+//               <span className="sidebar-trigger pointer hover-text-primary" onClick={final.openSidebar}>
+//                 {final.sidebarTrigger || <Trigger isOpen={final.sidebarOpen} />}
+//               </span>
+//               :  
+//               <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
+//                 {final.sidebarTrigger || <Trigger isOpen={isMobileMenuOpen} />}
+//               </span>
+//             }
+//           </>
+//         )}
+//       </nav>
+//       {renderMobileMenu()}
+//     </>
+//   );
+// }

package/ui/richtext/RichText.js

@@ -56,8 +56,10 @@ var RichText = function (_a) {
     var isInitialMount = (0, react_1.useRef)(true);
     var isTypingRef = (0, react_1.useRef)(false);
     var typingTimeoutRef = (0, react_1.useRef)(null);
+    var isUserChangeRef = (0, react_1.useRef)(false);
     var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
     var lastKnownValueRef = (0, react_1.useRef)(value);
+    var quillInstanceRef = (0, react_1.useRef)(null);
     // Update refs when props change
     (0, react_1.useEffect)(function () {
         onChangeRef.current = onChange;
@@ -71,6 +73,12 @@ var RichText = function (_a) {
         placeholder: placeholder,
         modules: modules || defaultModules,
     }), quill = _g.quill, quillRef = _g.quillRef;
+    // Store quill instance in ref
+    (0, react_1.useEffect)(function () {
+        if (quill) {
+            quillInstanceRef.current = quill;
+        }
+    }, [quill]);
     // Debounced onChange handler
     var debouncedOnChange = (0, react_1.useCallback)(function (content) {
         if (debounceTimeoutRef.current) {
@@ -81,10 +89,11 @@ var RichText = function (_a) {
         }, 300); // 300ms debounce delay
     }, []);
     // Handle text change with debouncing
-    var handleTextChange = (0, react_1.useCallback)(function () {
-        var _a, _b, _c;
-        if (!quill)
+    var handleTextChange = (0, react_1.useCallback)(function (delta, oldDelta, source) {
+        var _a, _b;
+        if (!quill || source !== 'user')
             return;
+        isUserChangeRef.current = true;
         isTypingRef.current = true;
         // Reset typing flag after 500ms of inactivity
         if (typingTimeoutRef.current) {
@@ -94,17 +103,23 @@ var RichText = function (_a) {
             isTypingRef.current = false;
         }, 500);
         var plainText = quill.getText().trim();
+        var currentHTML = quill.root.innerHTML;
         // --- 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);
+            // Store current selection
+            var selection = quill.getSelection();
+            // Remove the extra content
+            quill.deleteText(maxValueRef.current, plainText.length - maxValueRef.current);
+            // Restore selection if it was at the end
+            if (selection && selection.index > maxValueRef.current) {
+                quill.setSelection(maxValueRef.current);
+            }
             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
+        var cleanedHTML = (_b = (_a = currentHTML === null || currentHTML === void 0 ? void 0 : currentHTML.replace(/<p><br><\/p>/g, '') // remove empty paragraphs
+        ) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ') // collapse multiple spaces
+        ) === null || _b === void 0 ? void 0 : _b.trim(); // remove leading/trailing spaces
         lastKnownValueRef.current = cleanedHTML || '';
         debouncedOnChange(lastKnownValueRef.current);
     }, [quill, debouncedOnChange]);
@@ -116,11 +131,13 @@ var RichText = function (_a) {
     // Handle focus
     var handleFocus = (0, react_1.useCallback)(function () {
         setIsFocused(true);
+        isUserChangeRef.current = false;
     }, []);
     // Handle blur
     var handleBlur = (0, react_1.useCallback)(function () {
         setIsFocused(false);
         isTypingRef.current = false;
+        isUserChangeRef.current = false;
     }, []);
     // Set up event listeners
     (0, react_1.useEffect)(function () {
@@ -156,7 +173,8 @@ var RichText = function (_a) {
         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 || '';
+            // Use quill.clipboard.dangerouslyPasteHTML to preserve formatting
+            quill.clipboard.dangerouslyPasteHTML(0, cleanedValue || '');
             lastKnownValueRef.current = cleanedValue || '';
             isInitialMount.current = false;
         }
@@ -169,24 +187,50 @@ var RichText = function (_a) {
         // 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) {
+        // Don't update while user is typing or editor is focused with recent user changes
+        if (isTypingRef.current || (isFocused && isUserChangeRef.current)) {
             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 || '';
+            // Store current selection
+            var selection_1 = quill.getSelection();
+            // Get current HTML content
+            var currentHTML = quill.root.innerHTML;
+            // Calculate the difference
+            var currentLength = quill.getLength();
+            // Only update if there's a meaningful difference
+            if (cleanedValue !== currentHTML) {
+                // Replace content using quill's API
+                quill.clipboard.dangerouslyPasteHTML(0, cleanedValue || '');
+                lastKnownValueRef.current = cleanedValue || '';
+                // Try to restore selection position if we had one
+                if (selection_1) {
+                    // Set a small timeout to ensure the content is updated
+                    setTimeout(function () {
+                        var newLength = quill.getLength();
+                        var newIndex = Math.min(selection_1.index, newLength);
+                        quill.setSelection(newIndex);
+                    }, 0);
+                }
+            }
         }
     }, [quill, value, isFocused]);
     var insertEmoji = (0, react_1.useCallback)(function (emoji) {
         if (quill && savedRange.current) {
             var plainText = quill.getText().trim();
             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);
+                // Use the current selection if available, otherwise use saved range
+                var currentSelection = quill.getSelection();
+                var insertIndex = currentSelection ? currentSelection.index : savedRange.current.index;
+                quill.insertText(insertIndex, emoji);
+                quill.setSelection(insertIndex + emoji.length);
+                // Update saved range
+                savedRange.current = {
+                    index: insertIndex + emoji.length,
+                    length: 0
+                };
             }
         }
     }, [quill]);
@@ -224,6 +268,281 @@ var RichText = function (_a) {
 };
 exports.default = RichText;
 // 'use client';
+// import React, { useEffect, useRef, useCallback, useState } 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 onChangeRef = useRef(onChange);
+//   const maxValueRef = useRef(maxValue);
+//   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+//   const isInitialMount = useRef(true);
+//   const isTypingRef = useRef(false);
+//   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+//   const [isFocused, setIsFocused] = useState(false);
+//   const lastKnownValueRef = useRef(value);
+//   // Update refs when props change
+//   useEffect(() => {
+//     onChangeRef.current = onChange;
+//     maxValueRef.current = maxValue;
+//   }, [onChange, maxValue]);
+//   const defaultModules = {
+//     toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
+//   };
+//   const { quill, quillRef } = useQuill({
+//     theme,
+//     placeholder,
+//     modules: modules || defaultModules,
+//   });
+//   // Debounced onChange handler
+//   const debouncedOnChange = useCallback((content: string) => {
+//     if (debounceTimeoutRef.current) {
+//       clearTimeout(debounceTimeoutRef.current);
+//     }
+//     debounceTimeoutRef.current = setTimeout(() => {
+//       onChangeRef.current(content);
+//     }, 300); // 300ms debounce delay
+//   }, []);
+//   // Handle text change with debouncing
+//   const handleTextChange = useCallback(() => {
+//     if (!quill) return;
+//     isTypingRef.current = true;
+//     // Reset typing flag after 500ms of inactivity
+//     if (typingTimeoutRef.current) {
+//       clearTimeout(typingTimeoutRef.current);
+//     }
+//     typingTimeoutRef.current = setTimeout(() => {
+//       isTypingRef.current = false;
+//     }, 500);
+//     const plainText = quill.getText().trim();
+//     // --- Enforce maxValue if needed ---
+//     if (maxValueRef.current && plainText.length > maxValueRef.current) {
+//       const 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 ---
+//     const cleanedHTML = quill.root.innerHTML
+//       ?.replace(/<p><br><\/p>/g, '') // remove empty paragraphs
+//       ?.replace(/\s+/g, ' ')         // collapse multiple spaces
+//       ?.trim();                      // remove leading/trailing spaces
+//     lastKnownValueRef.current = cleanedHTML || '';
+//     debouncedOnChange(lastKnownValueRef.current);
+//   }, [quill, debouncedOnChange]);
+//   // Handle selection change
+//   const handleSelectionChange = useCallback((range: RangeStatic | null) => {
+//     if (range) savedRange.current = range;
+//   }, []);
+//   // Handle focus
+//   const handleFocus = useCallback(() => {
+//     setIsFocused(true);
+//   }, []);
+//   // Handle blur
+//   const handleBlur = useCallback(() => {
+//     setIsFocused(false);
+//     isTypingRef.current = false;
+//   }, []);
+//   // Set up event listeners
+//   useEffect(() => {
+//     if (!quill) return;
+//     const 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 () => {
+//       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, handleSelectionChange, handleTextChange, handleFocus, handleBlur]);
+//   // Initialize editor with initial value
+//   useEffect(() => {
+//     if (!quill) return;
+//     // Only set initial value on first mount
+//     if (isInitialMount.current && value) {
+//       // clean before setting editor value
+//       const cleanedValue = value
+//         ?.replace(/<p><br><\/p>/g, '')
+//         ?.replace(/\s+/g, ' ')
+//         ?.trim();
+//       quill.root.innerHTML = cleanedValue || '';
+//       lastKnownValueRef.current = cleanedValue || '';
+//       isInitialMount.current = false;
+//     }
+//   }, [quill, value]);
+//   // Update editor when value prop changes (for external updates)
+//   useEffect(() => {
+//     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
+//     const cleanedValue = value
+//       ?.replace(/<p><br><\/p>/g, '')
+//       ?.replace(/\s+/g, ' ')
+//       ?.trim();
+//     if (quill.root.innerHTML !== cleanedValue) {
+//       quill.root.innerHTML = cleanedValue || '';
+//       lastKnownValueRef.current = cleanedValue || '';
+//     }
+//   }, [quill, value, isFocused]);
+//   const insertEmoji = useCallback((emoji: string) => {
+//     if (quill && savedRange.current) {
+//       const plainText = quill.getText().trim();
+//       if (!maxValueRef.current || plainText.length + emoji.length <= maxValueRef.current) {
+//         const selection = quill.getSelection();
+//         quill.insertText(savedRange.current.index, emoji);
+//         quill.setSelection(savedRange.current.index + emoji.length);
+//       }
+//     }
+//   }, [quill]);
+//   const renderEmojiSection = useCallback((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>
+//     </>
+//   ), [insertEmoji]);
+//   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
+//                       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;
+// 'use client';
 // import React, { useEffect, useRef } from 'react';
 // import { useQuill } from 'react-quilljs';
 // import { MdOutlineEmojiEmotions } from 'react-icons/md';