funuicss 3.3.10 → 3.4.1

package/css/fun.css

@@ -3067,16 +3067,15 @@ color: var(--text-color);
   padding: 1rem;
   z-index: 5;
   position: fixed;
-  animation: SlideDownBar 0.3s ease-in-out ;
   transition: all 0.3s;
   overflow-x: hidden !important;
 }
 @keyframes SlideDownBar {
   from {
-    transform: translateX(-100%);
+    opacity: 0;
   }
   to {
-    transform: translateX(0);
+    opacity: 1;
   }
 }
 .sidebar:hover{overflow-y: auto;}
@@ -3519,11 +3518,12 @@ background-color: rgba(var(--borderRgb), 0.3);
 }
 
 
-.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius);}
+.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius); isolation: isolate;}
 
 .custom-select.fullWidth {max-width: none;}
 
 
+
 .select-trigger {
 display: flex;
 align-items: center;
@@ -3625,13 +3625,12 @@ position: absolute;
 top: 100%;
 left: 0;
 right: 0;
-background-color: var(--raiseOpaque);
-backdrop-filter: blur(10px);
+background-color: var(--page-bg);
 border-top: none;
-border-radius: 0 0 8px 8px;
+border-radius: 0 0 0.5rem 0.5rem;
 max-height: 250px;
 overflow: hidden;
-z-index: 1000;
+z-index: 20;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-10px);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.10",
+  "version": "3.4.1",
   "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/carousel/Carousel.js

@@ -110,6 +110,7 @@ var Carousel = function (_a) {
                     gap: gap + 'rem',
                     overflowX: 'auto',
                     display: 'flex',
+                    justifyItems: (isScrollable || isPhone) ? 'flex-start' : 'centers',
                     scrollSnapType: 'x mandatory',
                     scrollBehavior: 'smooth',
                 } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
@@ -117,7 +118,7 @@ var Carousel = function (_a) {
             !isPhone && isScrollable && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
                     react_1.default.createElement(pi_1.PiCaretRight, { size: 24 }))))),
-        showDashes && (react_1.default.createElement("div", { className: "center padding-top-10" },
+        (showDashes && isScrollable) && (react_1.default.createElement("div", { className: "center padding-top-10" },
             react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer ', key: pos, onClick: function () {
                     var _a, _b;
                     if (pos === 'start') {

package/ui/sidebar/SideBar.d.ts

@@ -23,6 +23,10 @@ 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, }: 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, onOpen, swipeEnabled, swipeThreshold, swipeArea, }: SideBarProps): React.JSX.Element;
 export {};

package/ui/sidebar/SideBar.js

@@ -42,15 +42,22 @@ 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;
-    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 _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 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);
     }, []);
@@ -69,6 +76,7 @@ function SideBar(_a) {
             setAppBarHeight("".concat(appBar.offsetHeight, "px"));
         }
     }, []);
+    // Handle outside clicks on mobile
     (0, react_1.useEffect)(function () {
         if (!isMobile || !internalOpen)
             return;
@@ -84,9 +92,120 @@ 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] || [];
@@ -94,17 +213,48 @@ 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') },
-        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"),
+        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"),
                     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)),
+            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("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];
@@ -117,14 +267,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", { className: "main-content ".concat(bodyCss), style: {
+        react_1.default.createElement("main", { ref: mainContentRef, className: "main-content fade-in ".concat(bodyCss), style: {
                 flex: 1,
                 marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
                 marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
@@ -132,5 +282,20 @@ function SideBar(_a) {
                 height: '100vh',
                 paddingTop: appBarHeight || top,
                 transition: 'margin 0.3s ease',
-            } }, children)));
+                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) }))));
 }

package/ui/table/Table.js

@@ -201,7 +201,7 @@ function Table(_a) {
                         React.createElement("div", null,
                             React.createElement(Flex_1.default, { width: '100%', wrap: 'nowrap', alignItems: 'center', gap: 0.7 },
                                 !selectedField && !showSearch &&
-                                    React.createElement(ScrollInView_1.default, null,
+                                    React.createElement("div", { className: '' },
                                         React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                                 { text: '🔍 Filter', value: '' },
                                                 { text: 'All*', value: '' }
@@ -209,7 +209,7 @@ function Table(_a) {
                                                 text: field,
                                                 value: field
                                             }); }), true) })),
-                                selectedField && !showSearch && (React.createElement(ScrollInView_1.default, null,
+                                selectedField && !showSearch && (React.createElement("div", { className: '' },
                                     React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full', fullWidth: true, value: selectedValue || '', onChange: function (e) {
                                             if (e === 'clear_all') {
                                                 setSelectedField('');
@@ -230,15 +230,15 @@ function Table(_a) {
                                         ], false) }))),
                                 showSearch ?
                                     React.createElement(Flex_1.default, { gap: 0.5, wrap: 'nowrap', alignItems: 'center' },
-                                        React.createElement(ScrollInView_1.default, null,
+                                        React.createElement("div", { className: 'animated slide-up' },
                                             React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
-                                        React.createElement(ScrollInView_1.default, { delay: 0.2 },
+                                        React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement("div", { onClick: function () { return setshowSearch(false); } },
                                                 React.createElement(ToolTip_1.default, null,
                                                     React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
                                                     React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Close Search" })))))
                                     :
-                                        React.createElement(ScrollInView_1.default, { delay: 0.2 },
+                                        React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement(ToolTip_1.default, null,
                                                 React.createElement(ci_1.CiSearch, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(true); } }),
                                                 React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Search Data" })))))
@@ -247,13 +247,16 @@ function Table(_a) {
                         React.createElement(RowFlex_1.default, { gap: 0.5 },
                             right && right,
                             !hideExport &&
-                                React.createElement(ToolTip_1.default, null,
-                                    React.createElement(Circle_1.default, { bg: 'lighter', bordered: true, onClick: Export },
-                                        React.createElement(pi_1.PiExportThin, null)),
-                                    React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Export Data" })))))),
+                                React.createElement("div", { className: 'animated slide-up' },
+                                    React.createElement(ToolTip_1.default, null,
+                                        React.createElement(Circle_1.default, { bg: 'lighter', bordered: true, onClick: Export },
+                                            React.createElement(pi_1.PiExportThin, null)),
+                                        React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
         React.createElement("main", { style: { overflow: "auto", width: "100%" } },
             React.createElement("table", __assign({ className: "table  ".concat(bordered ? 'border' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
-                    height: height ? height + "px" : ""
+                    height: height ? height + "px" : "",
+                    position: 'relative',
+                    zIndex: 1
                 } }, rest),
                 data &&
                     (data === null || data === void 0 ? void 0 : data.titles) &&
@@ -290,7 +293,7 @@ function Table(_a) {
                         else {
                             return true; // If no search query, return all items
                         }
-                    }).slice(startIndex, endIndex).map(function (mdoc, index) { return (React.createElement(Row_1.default, { funcss: 'animated slide-down', rowKey: index },
+                    }).slice(startIndex, endIndex).map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
                         data.fields.map(function (fdoc, findex) {
                             var _a;
                             return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));