funuicss 3.8.14 → 3.8.16

package/ui/carousel/Carousel.d.ts

@@ -12,6 +12,8 @@ interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     infiniteScroll?: boolean;
     infiniteScrollSpeed?: number;
     infiniteScrollDirection?: 'left' | 'right' | 'alternate';
+    overflowCss?: string;
+    overflowPadding?: string;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -55,27 +55,52 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
-var Circle_1 = __importDefault(require("../specials/Circle"));
-var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
-var Functions_1 = require("../../utils/Functions");
+// Helper function to detect touch devices
+var isTouchDevice = function () {
+    return (('ontouchstart' in window) ||
+        (navigator.maxTouchPoints > 0));
+};
+// Simple Circle component
+var Circle = function (_a) {
+    var bordered = _a.bordered, _b = _a.size, size = _b === void 0 ? 2.5 : _b, onClick = _a.onClick, children = _a.children;
+    return (react_1.default.createElement("div", { onClick: onClick, style: {
+            width: "".concat(size, "rem"),
+            height: "".concat(size, "rem"),
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: bordered ? '1px solid var(--borderColor, #ccc)' : 'none',
+            cursor: 'pointer',
+            background: 'var(--background, white)',
+            transition: 'all 0.2s ease'
+        } }, children));
+};
+// Simple RowFlex component
+var RowFlex = function (_a) {
+    var _b = _a.gap, gap = _b === void 0 ? 0.5 : _b, _c = _a.justify, justify = _c === void 0 ? 'flex-start' : _c, children = _a.children;
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            gap: "".concat(gap, "rem"),
+            justifyContent: justify
+        } }, children));
+};
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, _k = _a.infiniteScroll, infiniteScroll = _k === void 0 ? false : _k, _l = _a.infiniteScrollSpeed, infiniteScrollSpeed = _l === void 0 ? 50 : _l, _m = _a.infiniteScrollDirection, infiniteScrollDirection = _m === void 0 ? 'left' : _m, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize", "infiniteScroll", "infiniteScrollSpeed", "infiniteScrollDirection"]);
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, _k = _a.infiniteScroll, infiniteScroll = _k === void 0 ? false : _k, _l = _a.infiniteScrollSpeed, infiniteScrollSpeed = _l === void 0 ? 50 : _l, _m = _a.infiniteScrollDirection, infiniteScrollDirection = _m === void 0 ? 'left' : _m, _o = _a.overflowPadding, overflowPadding = _o === void 0 ? '' : _o, _p = _a.overflowCss, overflowCss = _p === void 0 ? '' : _p, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize", "infiniteScroll", "infiniteScrollSpeed", "infiniteScrollDirection", "overflowPadding", "overflowCss"]);
     var scrollRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
-    var _o = (0, react_1.useState)('start'), scrollPosition = _o[0], setScrollPosition = _o[1];
-    var _p = (0, react_1.useState)(false), isPhone = _p[0], setIsPhone = _p[1];
-    var _q = (0, react_1.useState)(false), isScrollable = _q[0], setIsScrollable = _q[1];
-    var _r = (0, react_1.useState)(infiniteScrollDirection === 'right' ? 'right' : 'left'), autoScrollDirection = _r[0], setAutoScrollDirection = _r[1];
-    var _s = (0, react_1.useState)(false), isHovered = _s[0], setIsHovered = _s[1];
-    var animationRef = (0, react_1.useRef)(null);
-    var lastScrollTimeRef = (0, react_1.useRef)(0);
-    var isProgrammaticScrollRef = (0, react_1.useRef)(false);
+    var _q = (0, react_1.useState)('start'), scrollPosition = _q[0], setScrollPosition = _q[1];
+    var _r = (0, react_1.useState)(false), isPhone = _r[0], setIsPhone = _r[1];
+    var _s = (0, react_1.useState)(false), isScrollable = _s[0], setIsScrollable = _s[1];
+    var _t = (0, react_1.useState)(infiniteScrollDirection === 'right' ? 'right' : 'left'), autoScrollDirection = _t[0], setAutoScrollDirection = _t[1];
+    var _u = (0, react_1.useState)(false), isPaused = _u[0], setIsPaused = _u[1];
+    var _v = (0, react_1.useState)(false), isReady = _v[0], setIsReady = _v[1];
+    var animationFrameRef = (0, react_1.useRef)(null);
+    var lastTimestampRef = (0, react_1.useRef)(0);
+    var startDelayRef = (0, react_1.useRef)(false);
     var checkScrollable = function () {
         var container = scrollRef.current;
         if (container) {
@@ -87,19 +112,23 @@ var Carousel = function (_a) {
         window.addEventListener('resize', checkScrollable);
         return function () { return window.removeEventListener('resize', checkScrollable); };
     }, [children]);
+    // Delay start for smooth initialization
     (0, react_1.useEffect)(function () {
-        if ((0, Functions_1.isTouchDevice)()) {
-            setIsPhone(true);
+        if (infiniteScroll && isScrollable) {
+            // Wait for layout to settle and then start
+            var timer_1 = setTimeout(function () {
+                setIsReady(true);
+            }, 300);
+            return function () { return clearTimeout(timer_1); };
         }
         else {
-            setIsPhone(false);
+            setIsReady(false);
         }
+    }, [infiniteScroll, isScrollable]);
+    (0, react_1.useEffect)(function () {
+        setIsPhone(isTouchDevice());
     }, []);
     var handleScroll = function () {
-        if (isProgrammaticScrollRef.current) {
-            isProgrammaticScrollRef.current = false;
-            return;
-        }
         var container = scrollRef.current;
         if (!container)
             return;
@@ -114,7 +143,6 @@ var Carousel = function (_a) {
         else {
             setScrollPosition('middle');
         }
-        lastScrollTimeRef.current = Date.now();
     };
     var scroll = function (direction) {
         var container = scrollRef.current;
@@ -125,18 +153,31 @@ var Carousel = function (_a) {
             behavior: 'smooth',
         });
     };
-    var infiniteScrollAnimation = function () {
-        if (!infiniteScroll || !scrollRef.current || isHovered || !isScrollable) {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-                animationRef.current = null;
-            }
+    // Smooth auto-scroll animation using requestAnimationFrame
+    var smoothAutoScroll = function (timestamp) {
+        if (!infiniteScroll || !scrollRef.current || isPaused || !isScrollable || !isReady) {
+            animationFrameRef.current = null;
+            lastTimestampRef.current = 0;
             return;
         }
         var container = scrollRef.current;
         var scrollLeft = container.scrollLeft, scrollWidth = container.scrollWidth, clientWidth = container.clientWidth;
         var maxScrollLeft = scrollWidth - clientWidth;
+        // Initialize timestamp on first frame
+        if (lastTimestampRef.current === 0) {
+            lastTimestampRef.current = timestamp;
+            animationFrameRef.current = requestAnimationFrame(smoothAutoScroll);
+            return;
+        }
+        // Calculate time delta for smooth animation
+        var deltaTime = timestamp - lastTimestampRef.current;
+        lastTimestampRef.current = timestamp;
+        // Calculate scroll amount based on speed and time (pixels per second)
+        // Cap deltaTime to prevent large jumps after tab switches
+        var cappedDeltaTime = Math.min(deltaTime, 100);
+        var scrollAmount = (infiniteScrollSpeed * cappedDeltaTime) / 1000;
         var newDirection = autoScrollDirection;
+        // Handle alternate direction
         if (infiniteScrollDirection === 'alternate') {
             if (scrollLeft <= 0) {
                 newDirection = 'right';
@@ -147,32 +188,42 @@ var Carousel = function (_a) {
                 setAutoScrollDirection('left');
             }
         }
-        var scrollAmount = infiniteScrollSpeed / 60;
-        isProgrammaticScrollRef.current = true;
+        // Perform the scroll
         if (newDirection === 'left') {
             container.scrollLeft -= scrollAmount;
+            // Loop back for infinite scroll (non-alternate)
             if (scrollLeft <= 0 && infiniteScrollDirection !== 'alternate') {
                 container.scrollLeft = maxScrollLeft;
             }
         }
         else {
             container.scrollLeft += scrollAmount;
+            // Loop back for infinite scroll (non-alternate)
             if (scrollLeft >= maxScrollLeft - 1 && infiniteScrollDirection !== 'alternate') {
                 container.scrollLeft = 0;
             }
         }
-        animationRef.current = requestAnimationFrame(infiniteScrollAnimation);
+        animationFrameRef.current = requestAnimationFrame(smoothAutoScroll);
     };
+    // Start/stop auto-scroll based on pause state
     (0, react_1.useEffect)(function () {
-        if (infiniteScroll) {
-            infiniteScrollAnimation();
+        if (infiniteScroll && !isPaused && isScrollable && isReady) {
+            lastTimestampRef.current = 0;
+            animationFrameRef.current = requestAnimationFrame(smoothAutoScroll);
+        }
+        else {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+            lastTimestampRef.current = 0;
         }
         return function () {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
             }
         };
-    }, [infiniteScroll, infiniteScrollSpeed, infiniteScrollDirection, isHovered, isScrollable, autoScrollDirection]);
+    }, [infiniteScroll, infiniteScrollSpeed, infiniteScrollDirection, isPaused, isScrollable, autoScrollDirection, isReady]);
     (0, react_1.useEffect)(function () {
         setAutoScrollDirection(infiniteScrollDirection === 'right' ? 'right' : 'left');
     }, [infiniteScrollDirection]);
@@ -187,53 +238,29 @@ var Carousel = function (_a) {
         var childrenArray = react_1.default.Children.toArray(children);
         if (childrenArray.length === 0)
             return children;
-        // Clone enough items to create a seamless infinite effect
-        // We need enough clones to fill at least 3 times the viewport width
         var container = scrollRef.current;
         var clonesNeeded = container ? Math.ceil(container.clientWidth * 3 / (scrollNumber || 320)) : 3;
         var clonedItems = [];
         for (var i = 0; i < clonesNeeded; i++) {
             clonedItems.push.apply(clonedItems, childrenArray);
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null, clonedItems.map(function (child, index) { return (react_1.default.createElement("div", { key: index, className: "carousel-item", style: { flexShrink: 0 } },
+        return (react_1.default.createElement(react_1.default.Fragment, null, clonedItems.map(function (child, index) { return (react_1.default.createElement("div", { key: index, className: "carousel-item", style: { flexShrink: 0 }, onMouseEnter: function () { return setIsPaused(true); }, onMouseLeave: function () { return setIsPaused(false); } },
             react_1.default.createElement("div", { className: "carousel-card" }, child))); })));
     };
-    var handleMouseEnter = function () {
-        setIsHovered(true);
-        if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-        }
-    };
-    var handleMouseLeave = function () {
-        setIsHovered(false);
-        if (infiniteScroll && !isHovered) {
-            infiniteScrollAnimation();
-        }
-    };
-    // Handle touch events for mobile
     var handleTouchStart = function () {
-        setIsHovered(true);
-        if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-        }
+        setIsPaused(true);
     };
     var handleTouchEnd = function () {
-        // Wait a bit before resuming to allow user to interact
         setTimeout(function () {
-            setIsHovered(false);
-            if (infiniteScroll && !isHovered) {
-                infiniteScrollAnimation();
-            }
-        }, 1000); // Resume after 1 second of inactivity
+            setIsPaused(false);
+        }, 1000);
     };
-    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper ".concat(funcss), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, rest),
+    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper", onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, rest),
         react_1.default.createElement(react_1.default.Fragment, null,
             !isPhone && isScrollable && !infiniteScroll && (react_1.default.createElement("div", { className: 'carouselLeft' },
-                react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
+                react_1.default.createElement(Circle, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
                     react_1.default.createElement(pi_1.PiCaretLeft, { className: 'text-primary', size: controlerIconSize })))),
-            react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
+            react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full ".concat(funcss, " ").concat(isScrollable ? overflowCss : ''), style: {
                     width: '100%',
                     gap: gap + 'rem',
                     overflowX: 'auto',
@@ -242,15 +269,15 @@ var Carousel = function (_a) {
                     justifyItems: (isScrollable || isPhone) ? 'flex-start' : 'center',
                     scrollSnapType: infiniteScroll ? 'none' : 'x mandatory',
                     scrollBehavior: 'smooth',
-                    padding: itemPadding || "0.5rem",
+                    padding: (isScrollable && overflowPadding) ? overflowPadding : itemPadding,
                     cursor: infiniteScroll ? 'grab' : 'default'
-                }, onMouseDown: function () { return infiniteScroll && handleMouseEnter(); }, onMouseUp: function () { return infiniteScroll && handleMouseLeave(); }, onScroll: handleScroll }, infiniteScroll ? cloneChildren() : (react_1.default.Children.map(children, function (child, index) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
+                }, onScroll: handleScroll }, infiniteScroll ? cloneChildren() : (react_1.default.Children.map(children, function (child, index) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 }, onMouseEnter: function () { return !infiniteScroll && setIsPaused(true); }, onMouseLeave: function () { return !infiniteScroll && setIsPaused(false); } },
                 react_1.default.createElement("div", { className: "carousel-card" }, child))); }))),
             !isPhone && isScrollable && !infiniteScroll && (react_1.default.createElement("div", { className: 'carouselRight' },
-                react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('right'); } },
+                react_1.default.createElement(Circle, { bordered: true, size: controlerSize, onClick: function () { return scroll('right'); } },
                     react_1.default.createElement(pi_1.PiCaretRight, { className: 'text-primary', size: controlerIconSize }))))),
         (showDashes && isScrollable && !infiniteScroll) && (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 () {
+            react_1.default.createElement(RowFlex, { 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') {
                         scroll('left');
@@ -267,27 +294,10 @@ var Carousel = function (_a) {
                 }, style: {
                     width: '10px',
                     height: '10px',
-                    background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
+                    background: scrollPosition === pos ? 'var(--primary, #007bff)' : 'var(--borderColor, #ccc)',
                     borderRadius: '50%',
                     transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
                     transition: 'transform 0.3s ease, background 0.3s ease',
-                } })); })))),
-        infiniteScroll && isHovered && (react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                background: 'rgba(0,0,0,0.7)',
-                color: 'white',
-                padding: '5px 10px',
-                borderRadius: '5px',
-                fontSize: '12px',
-                zIndex: 10,
-                pointerEvents: 'none',
-                opacity: 0,
-                animation: 'fadeInOut 2s ease'
-            } },
-            "Scroll paused",
-            react_1.default.createElement("style", null, "\n            @keyframes fadeInOut {\n              0% { opacity: 0; }\n              10% { opacity: 1; }\n              90% { opacity: 1; }\n              100% { opacity: 0; }\n            }\n          ")))));
+                } })); }))))));
 };
 exports.default = Carousel;

package/ui/form/Form.js

@@ -384,7 +384,7 @@ var Form = function (props) {
     }, [parsedDefaultValues]);
     // Validate a single field
     var validateField = (0, react_1.useCallback)(function (field, value) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         // Required validation
         if (field.required) {
             if (value === undefined || value === null || value === '') {
@@ -431,16 +431,34 @@ var Form = function (props) {
                 }
             }
             // Phone validation (basic) - only for strings
+            // Phone validation (basic) - only for strings
             if (field.type === 'tel' && typeof value === 'string') {
-                var phoneRegex = /^[\+]?[1-9][\d]{0,17}$/;
-                if (!phoneRegex.test(value.replace(/[\s+\-()]/g, ''))) {
-                    return 'Please enter a valid phone number';
+                // Remove all non-digit characters except + at the beginning
+                var cleanedValue = value.replace(/[^\d+]/g, '');
+                // Check if the value contains any letters (shouldn't happen after cleaning, but just in case)
+                if (/[a-zA-Z]/.test(value)) {
+                    return 'Phone number cannot contain letters';
+                }
+                // Allow numbers starting with 0 or with country code (+)
+                var phoneRegex = /^[\+]?[0-9]{0,18}$/;
+                if (value && !phoneRegex.test(cleanedValue)) {
+                    return 'Please enter a valid phone number (digits only, can start with 0 or +)';
+                }
+                // Optional: Add minimum length check
+                var minLength = ((_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength) || 10; // Default 10 digits
+                if (cleanedValue.length > 0 && cleanedValue.length < minLength) {
+                    return "Phone number must be at least ".concat(minLength, " digits");
+                }
+                // Optional: Add maximum length check
+                var maxLength = ((_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength) || 15; // Default 15 digits
+                if (cleanedValue.length > maxLength) {
+                    return "Phone number cannot exceed ".concat(maxLength, " digits");
                 }
             }
             // Length validation for strings
             if (typeof value === 'string') {
-                var minLength = (_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength;
-                var maxLength = (_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength;
+                var minLength = (_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.minLength;
+                var maxLength = (_f = field.inputProps) === null || _f === void 0 ? void 0 : _f.maxLength;
                 if (minLength && value.length < minLength) {
                     return "Minimum ".concat(minLength, " characters required");
                 }
@@ -449,7 +467,7 @@ var Form = function (props) {
                 }
             }
             // Pattern validation if provided - only for strings
-            if (((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.pattern) && typeof value === 'string') {
+            if (((_g = field.inputProps) === null || _g === void 0 ? void 0 : _g.pattern) && typeof value === 'string') {
                 try {
                     var regex = new RegExp(field.inputProps.pattern);
                     if (!regex.test(value)) {

package/ui/sidebar/SideBar.d.ts

@@ -26,6 +26,7 @@ interface SideBarProps {
     children?: ReactNode;
     onClose?: () => void;
     isAccordion?: boolean;
+    togglePrefix?: ReactNode;
 }
-export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, accordionItemCss, links, children, onClose, isAccordion, }: SideBarProps): React.JSX.Element;
+export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, accordionItemCss, links, children, onClose, togglePrefix, isAccordion, }: SideBarProps): React.JSX.Element;
 export {};