funuicss 3.4.1 → 3.4.3

package/css/fun.css

@@ -2468,6 +2468,7 @@ h6, .h6 {
   position: relative;
   overflow: hidden;
   font-weight: 500;
+  z-index: 1;
   line-height: 1 !important;
 }
 
@@ -3630,7 +3631,7 @@ border-top: none;
 border-radius: 0 0 0.5rem 0.5rem;
 max-height: 250px;
 overflow: hidden;
-z-index: 20;
+ z-index: 9999;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-10px);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.4.1",
+  "version": "3.4.3",
   "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/sidebar/SideBar.d.ts

@@ -23,10 +23,6 @@ interface SideBarProps {
     links?: SideBarLink[];
     children?: ReactNode;
     onClose?: () => void;
-    onOpen?: () => void;
-    swipeEnabled?: boolean;
-    swipeThreshold?: number;
-    swipeArea?: number;
 }
-export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, links, children, onClose, onOpen, swipeEnabled, swipeThreshold, swipeArea, }: SideBarProps): React.JSX.Element;
+export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, links, children, onClose, }: SideBarProps): React.JSX.Element;
 export {};

package/ui/sidebar/SideBar.js

@@ -42,22 +42,15 @@ var react_1 = __importStar(require("react"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var navigation_1 = require("next/navigation");
-var pi_1 = require("react-icons/pi");
 var link_1 = __importDefault(require("next/link"));
 function SideBar(_a) {
-    var _b, _c;
-    var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, onOpen = _a.onOpen, _q = _a.swipeEnabled, swipeEnabled = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 100 : _r, _s = _a.swipeArea, swipeArea = _s === void 0 ? 20 : _s;
-    var _t = (0, react_1.useState)(false), isMobile = _t[0], setIsMobile = _t[1];
-    var _u = (0, react_1.useState)(open), internalOpen = _u[0], setInternalOpen = _u[1];
-    var _v = (0, react_1.useState)('0px'), appBarHeight = _v[0], setAppBarHeight = _v[1];
-    var _w = (0, react_1.useState)(false), isTransitioning = _w[0], setIsTransitioning = _w[1];
-    var _x = (0, react_1.useState)(0), dragOffset = _x[0], setDragOffset = _x[1];
+    var _b;
+    var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.iconCSS, iconCSS = _h === void 0 ? '' : _h, _j = _a.sidebarCss, sidebarCss = _j === void 0 ? '' : _j, activeCss = _a.activeCss, _k = _a.bodyCss, bodyCss = _k === void 0 ? '' : _k, _l = _a.popIcon, popIcon = _l === void 0 ? false : _l, _m = _a.dividers, dividers = _m === void 0 ? false : _m, _o = _a.links, links = _o === void 0 ? [] : _o, children = _a.children, onClose = _a.onClose;
+    var _p = (0, react_1.useState)(false), isMobile = _p[0], setIsMobile = _p[1];
+    var _q = (0, react_1.useState)(open), internalOpen = _q[0], setInternalOpen = _q[1];
+    var _r = (0, react_1.useState)('0px'), appBarHeight = _r[0], setAppBarHeight = _r[1];
     var pathname = (0, navigation_1.usePathname)();
     var sidebarRef = (0, react_1.useRef)(null);
-    var mainContentRef = (0, react_1.useRef)(null);
-    // Touch gesture state
-    var _y = (0, react_1.useState)(null), touchStart = _y[0], setTouchStart = _y[1];
-    var _z = (0, react_1.useState)(false), isDragging = _z[0], setIsDragging = _z[1];
     var updateIsMobile = (0, react_1.useCallback)(function () {
         setIsMobile(window.innerWidth <= 992);
     }, []);
@@ -76,7 +69,6 @@ function SideBar(_a) {
             setAppBarHeight("".concat(appBar.offsetHeight, "px"));
         }
     }, []);
-    // Handle outside clicks on mobile
     (0, react_1.useEffect)(function () {
         if (!isMobile || !internalOpen)
             return;
@@ -92,120 +84,9 @@ function SideBar(_a) {
             document.removeEventListener('touchstart', handleOutsideClick);
         };
     }, [isMobile, internalOpen]);
-    // Touch gesture handlers
-    var handleTouchStart = (0, react_1.useCallback)(function (e) {
-        var _a;
-        if (!isMobile || !swipeEnabled)
-            return;
-        var touch = e.touches[0];
-        var clientX = touch.clientX, clientY = touch.clientY;
-        var now = Date.now();
-        // Only initiate swipe from edge areas
-        var isLeftEdge = position === 'left' && clientX < swipeArea;
-        var isRightEdge = position === 'right' && clientX > window.innerWidth - swipeArea;
-        var isOnSidebar = internalOpen && ((_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target));
-        if (isLeftEdge || isRightEdge || isOnSidebar) {
-            setTouchStart({ x: clientX, y: clientY, time: now });
-            setIsDragging(false);
-            e.preventDefault();
-        }
-    }, [isMobile, swipeEnabled, position, swipeArea, internalOpen]);
-    var handleTouchMove = (0, react_1.useCallback)(function (e) {
-        if (!touchStart || !isMobile || !swipeEnabled)
-            return;
-        var touch = e.touches[0];
-        var clientX = touch.clientX, clientY = touch.clientY;
-        var deltaX = clientX - touchStart.x;
-        var deltaY = clientY - touchStart.y;
-        // Check if it's a horizontal swipe (not vertical scroll)
-        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
-            if (!isDragging) {
-                setIsDragging(true);
-            }
-            // Calculate drag offset based on position and gesture direction
-            var offset = 0;
-            if (position === 'left') {
-                if (internalOpen) {
-                    // Closing gesture: drag left
-                    offset = Math.min(0, deltaX);
-                }
-                else {
-                    // Opening gesture: drag right
-                    offset = Math.max(0, deltaX);
-                }
-            }
-            else {
-                if (internalOpen) {
-                    // Closing gesture: drag right
-                    offset = Math.max(0, deltaX);
-                }
-                else {
-                    // Opening gesture: drag left
-                    offset = Math.min(0, deltaX);
-                }
-            }
-            setDragOffset(offset);
-            e.preventDefault();
-        }
-    }, [touchStart, isMobile, swipeEnabled, position, internalOpen, isDragging]);
-    var handleTouchEnd = (0, react_1.useCallback)(function (e) {
-        if (!touchStart || !isMobile || !swipeEnabled)
-            return;
-        var touch = e.changedTouches[0];
-        var clientX = touch.clientX;
-        var deltaX = clientX - touchStart.x;
-        var deltaTime = Date.now() - touchStart.time;
-        var velocity = Math.abs(deltaX) / deltaTime;
-        // Determine if gesture should trigger sidebar action
-        var shouldTrigger = Math.abs(deltaX) > swipeThreshold || velocity > 0.5;
-        if (shouldTrigger && isDragging) {
-            if (position === 'left') {
-                if (!internalOpen && deltaX > 0) {
-                    handleOpen();
-                }
-                else if (internalOpen && deltaX < 0) {
-                    handleClose();
-                }
-            }
-            else {
-                if (!internalOpen && deltaX < 0) {
-                    handleOpen();
-                }
-                else if (internalOpen && deltaX > 0) {
-                    handleClose();
-                }
-            }
-        }
-        // Reset touch state
-        setTouchStart(null);
-        setIsDragging(false);
-        setDragOffset(0);
-    }, [touchStart, isMobile, swipeEnabled, position, internalOpen, isDragging, swipeThreshold]);
-    // Add touch event listeners
-    (0, react_1.useEffect)(function () {
-        if (!isMobile || !swipeEnabled)
-            return;
-        var element = mainContentRef.current || document.body;
-        element.addEventListener('touchstart', handleTouchStart, { passive: false });
-        element.addEventListener('touchmove', handleTouchMove, { passive: false });
-        element.addEventListener('touchend', handleTouchEnd, { passive: false });
-        return function () {
-            element.removeEventListener('touchstart', handleTouchStart);
-            element.removeEventListener('touchmove', handleTouchMove);
-            element.removeEventListener('touchend', handleTouchEnd);
-        };
-    }, [handleTouchStart, handleTouchMove, handleTouchEnd, isMobile, swipeEnabled]);
     var handleClose = function () {
-        setIsTransitioning(true);
         setInternalOpen(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
-        setTimeout(function () { return setIsTransitioning(false); }, 300);
-    };
-    var handleOpen = function () {
-        setIsTransitioning(true);
-        setInternalOpen(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        setTimeout(function () { return setIsTransitioning(false); }, 300);
     };
     var groupedLinks = links.reduce(function (acc, link) {
         acc[link.section] = acc[link.section] || [];
@@ -213,48 +94,17 @@ function SideBar(_a) {
         return acc;
     }, {});
     var isOverlay = isMobile;
-    // Calculate transform for drag gesture
-    var getSidebarTransform = function () {
-        if (!isDragging || !isOverlay)
-            return '';
-        if (position === 'left') {
-            var baseTransform = internalOpen ? 0 : -sidebarWidth;
-            return "translateX(".concat(baseTransform + dragOffset, "px)");
-        }
-        else {
-            var baseTransform = internalOpen ? 0 : sidebarWidth;
-            return "translateX(".concat(baseTransform + dragOffset, "px)");
-        }
-    };
     return (react_1.default.createElement("div", { className: "sidebar-container ".concat(isOverlay ? '' : 'with-content') },
-        isOverlay && (internalOpen || isDragging) && (react_1.default.createElement("div", { className: "sidebar-backdrop", style: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                zIndex: 998,
-                opacity: isDragging ? Math.abs(dragOffset) / sidebarWidth : 1,
-                transition: isDragging ? 'none' : 'opacity 0.3s ease',
-            }, onClick: handleClose })),
-        (internalOpen || isDragging) && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
-                    width: isOverlay ? "".concat(sidebarWidth, "px") : "".concat(sidebarWidth, "px"),
+        internalOpen && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, "  ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
+                    width: isOverlay ? '100%' : "".concat(sidebarWidth, "px"),
                     height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
                     position: 'fixed',
                     top: appBarHeight || top
                 },
                 _b[position] = 0,
                 _b.padding = '1rem',
-                _b.zIndex = 999,
-                _b.transform = getSidebarTransform(),
-                _b.transition = isDragging || isTransitioning ? 'none' : 'transform 0.3s ease',
-                _b.willChange = 'transform',
                 _b) },
-            react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: "pl-2 pr-2" },
-                header && react_1.default.createElement("div", null, header),
-                isMobile && (react_1.default.createElement("div", { className: "hover-text-error pointer", onClick: handleClose, style: { cursor: 'pointer', zIndex: 1000 } },
-                    react_1.default.createElement(pi_1.PiX, { size: 25 })))),
+            react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: "pl-2 pr-2" }, header && react_1.default.createElement("div", null, header)),
             react_1.default.createElement("section", { className: "sidebar-body mt-3" },
                 links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, Object.entries(groupedLinks).map(function (_a) {
                     var section = _a[0], sectionLinks = _a[1];
@@ -267,14 +117,14 @@ function SideBar(_a) {
                                         handleClose();
                                     }
                                 }, key: link.uri, href: link.uri },
-                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 sidebar-link ".concat(isActive ? "primary50 outline-primary200 ".concat(activeCss || '') : 'hoverable') },
+                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 sidebar-link  ".concat(isActive ? "primary50 outline-primary200 ".concat(activeCss || '') : 'hoverable') },
                                     react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(popIcon ? "p-1 border lighter central" : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon),
                                     react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                         })));
                 }))),
                 content),
             footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
-        react_1.default.createElement("main", { ref: mainContentRef, className: "main-content fade-in ".concat(bodyCss), style: {
+        react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
                 flex: 1,
                 marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
                 marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
@@ -282,20 +132,5 @@ function SideBar(_a) {
                 height: '100vh',
                 paddingTop: appBarHeight || top,
                 transition: 'margin 0.3s ease',
-                touchAction: swipeEnabled ? 'pan-y' : 'auto',
-            } }, children),
-        isMobile && swipeEnabled && !internalOpen && (react_1.default.createElement("div", { className: "swipe-indicator", style: (_c = {
-                    position: 'fixed'
-                },
-                _c[position] = 0,
-                _c.top = '50%',
-                _c.transform = 'translateY(-50%)',
-                _c.width = '4px',
-                _c.height = '40px',
-                _c.backgroundColor = 'rgba(128, 128, 128, 0.3)',
-                _c.borderRadius = position === 'left' ? '0 4px 4px 0' : '4px 0 0 4px',
-                _c.zIndex = 1000,
-                _c.pointerEvents = 'none',
-                _c.transition = 'opacity 0.3s ease',
-                _c) }))));
+            } }, children)));
 }