funuicss 3.8.9 → 3.8.10

package/css/fun.css

@@ -2294,7 +2294,6 @@ z-index: 9999 !important;
   padding-top: 1rem !important;
   height: var(--inputButtonHeight);
 
-
 }
 
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.8.9",
+  "version": "3.8.10",
   "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.d.ts

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

package/ui/carousel/Carousel.js

@@ -65,11 +65,17 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Functions_1 = require("../../utils/Functions");
 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, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize"]);
+    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 scrollRef = (0, react_1.useRef)(null);
-    var _k = (0, react_1.useState)('start'), scrollPosition = _k[0], setScrollPosition = _k[1];
-    var _l = (0, react_1.useState)(false), isPhone = _l[0], setIsPhone = _l[1];
-    var _m = (0, react_1.useState)(false), isScrollable = _m[0], setIsScrollable = _m[1];
+    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 checkScrollable = function () {
         var container = scrollRef.current;
         if (container) {
@@ -78,7 +84,7 @@ var Carousel = function (_a) {
     };
     (0, react_1.useEffect)(function () {
         checkScrollable();
-        window.addEventListener('resize', checkScrollable); // Also listen to window resize
+        window.addEventListener('resize', checkScrollable);
         return function () { return window.removeEventListener('resize', checkScrollable); };
     }, [children]);
     (0, react_1.useEffect)(function () {
@@ -89,8 +95,11 @@ var Carousel = function (_a) {
             setIsPhone(false);
         }
     }, []);
-    // Track scroll position
     var handleScroll = function () {
+        if (isProgrammaticScrollRef.current) {
+            isProgrammaticScrollRef.current = false;
+            return;
+        }
         var container = scrollRef.current;
         if (!container)
             return;
@@ -105,6 +114,7 @@ var Carousel = function (_a) {
         else {
             setScrollPosition('middle');
         }
+        lastScrollTimeRef.current = Date.now();
     };
     var scroll = function (direction) {
         var container = scrollRef.current;
@@ -115,6 +125,57 @@ var Carousel = function (_a) {
             behavior: 'smooth',
         });
     };
+    var infiniteScrollAnimation = function () {
+        if (!infiniteScroll || !scrollRef.current || isHovered || !isScrollable) {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+                animationRef.current = null;
+            }
+            return;
+        }
+        var container = scrollRef.current;
+        var scrollLeft = container.scrollLeft, scrollWidth = container.scrollWidth, clientWidth = container.clientWidth;
+        var maxScrollLeft = scrollWidth - clientWidth;
+        var newDirection = autoScrollDirection;
+        if (infiniteScrollDirection === 'alternate') {
+            if (scrollLeft <= 0) {
+                newDirection = 'right';
+                setAutoScrollDirection('right');
+            }
+            else if (scrollLeft >= maxScrollLeft - 1) {
+                newDirection = 'left';
+                setAutoScrollDirection('left');
+            }
+        }
+        var scrollAmount = infiniteScrollSpeed / 60;
+        isProgrammaticScrollRef.current = true;
+        if (newDirection === 'left') {
+            container.scrollLeft -= scrollAmount;
+            if (scrollLeft <= 0 && infiniteScrollDirection !== 'alternate') {
+                container.scrollLeft = maxScrollLeft;
+            }
+        }
+        else {
+            container.scrollLeft += scrollAmount;
+            if (scrollLeft >= maxScrollLeft - 1 && infiniteScrollDirection !== 'alternate') {
+                container.scrollLeft = 0;
+            }
+        }
+        animationRef.current = requestAnimationFrame(infiniteScrollAnimation);
+    };
+    (0, react_1.useEffect)(function () {
+        if (infiniteScroll) {
+            infiniteScrollAnimation();
+        }
+        return function () {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, [infiniteScroll, infiniteScrollSpeed, infiniteScrollDirection, isHovered, isScrollable, autoScrollDirection]);
+    (0, react_1.useEffect)(function () {
+        setAutoScrollDirection(infiniteScrollDirection === 'right' ? 'right' : 'left');
+    }, [infiniteScrollDirection]);
     (0, react_1.useEffect)(function () {
         var container = scrollRef.current;
         if (container) {
@@ -122,9 +183,54 @@ var Carousel = function (_a) {
             return function () { return container.removeEventListener('scroll', handleScroll); };
         }
     }, []);
-    return (react_1.default.createElement("div", __assign({ className: "carousel-wrapper ".concat(funcss) }, rest),
+    var cloneChildren = function () {
+        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 } },
+            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;
+        }
+    };
+    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
+    };
+    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper ".concat(funcss), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, rest),
         react_1.default.createElement(react_1.default.Fragment, null,
-            !isPhone && isScrollable && (react_1.default.createElement("div", { className: 'carouselLeft' },
+            !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(pi_1.PiCaretLeft, { className: 'text-primary', size: controlerIconSize })))),
             react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
@@ -134,16 +240,17 @@ var Carousel = function (_a) {
                     overflowY: 'visible',
                     display: 'flex',
                     justifyItems: (isScrollable || isPhone) ? 'flex-start' : 'center',
-                    scrollSnapType: 'x mandatory',
+                    scrollSnapType: infiniteScroll ? 'none' : 'x mandatory',
                     scrollBehavior: 'smooth',
-                    padding: itemPadding || "0.5rem"
-                } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
-                react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
-            !isPhone && isScrollable && (react_1.default.createElement("div", { className: 'carouselRight' },
+                    padding: itemPadding || "0.5rem",
+                    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 } },
+                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(pi_1.PiCaretRight, { className: 'text-primary', size: controlerIconSize }))))),
-        (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 () {
+        (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 () {
                     var _a, _b;
                     if (pos === 'start') {
                         scroll('left');
@@ -164,6 +271,23 @@ var Carousel = function (_a) {
                     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/feature/Feature.d.ts

@@ -27,6 +27,22 @@ type FeatureItem = {
     ctaClassName?: string;
     customRender?: () => React.ReactNode;
 };
+interface CarouselOptions {
+    isCarousel?: boolean;
+    scrollNumber?: number;
+    gap?: number;
+    carouselFuncss?: string;
+    showDashes?: boolean;
+    allowVerticalOverflow?: boolean;
+    itemPadding?: string;
+    controlerSize?: number;
+    controlerIconSize?: number;
+    infiniteScroll?: boolean;
+    infiniteScrollSpeed?: number;
+    infiniteScrollDirection?: 'left' | 'right' | 'alternate';
+    carouselContainerClassName?: string;
+    carouselContainerStyle?: React.CSSProperties;
+}
 type FeatureProps = {
     variant?: string;
     layout?: 'checklist' | 'centered' | 'grid';
@@ -96,6 +112,6 @@ type FeatureProps = {
     funcss?: string;
     sectionClass?: string;
     maxWidth?: string;
-};
+} & CarouselOptions;
 declare const Feature: React.FC<FeatureProps>;
 export default Feature;

package/ui/feature/Feature.js

@@ -54,6 +54,7 @@ var componentUtils_1 = require("../../utils/componentUtils");
 var Text_1 = __importDefault(require("../text/Text"));
 var Button_1 = __importDefault(require("../button/Button"));
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+var Carousel_1 = __importDefault(require("../carousel/Carousel")); // Import the Carousel component
 var useDynamicIcon = function (iconString) {
     var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
     var _b = (0, react_1.useState)(false), hasValidIcon = _b[0], setHasValidIcon = _b[1];
@@ -228,7 +229,7 @@ var Feature = function (localProps) {
         // Regular item without card
         return (react_1.default.createElement("div", { key: index, className: "feature-section__item-wrapper ".concat(item.className || ''), style: __assign({ maxWidth: final.itemMaxWidth || '100%' }, item.style) }, featureContent));
     };
-    var renderFeaturesContent = function () {
+    var renderFlexFeatures = function () {
         if (featuresArray.length === 0)
             return null;
         var gapValue = final.gap !== undefined ? "".concat(final.gap * 0.25, "rem") : '2rem';
@@ -251,11 +252,34 @@ var Feature = function (localProps) {
                 margin: '0 auto',
             } }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__flex-item" }, renderFeatureItem(item, index))); })));
     };
+    var renderCarouselFeatures = function () {
+        if (featuresArray.length === 0)
+            return null;
+        // Prepare carousel items
+        var carouselItems = featuresArray.map(function (item, index) {
+            return renderFeatureItem(item, index);
+        });
+        return (react_1.default.createElement("div", { className: "feature-section__carousel-container ".concat(final.carouselContainerClassName || ''), style: final.carouselContainerStyle },
+            react_1.default.createElement(Carousel_1.default, { scrollNumber: final.scrollNumber, gap: final.gap || 1, funcss: final.carouselFuncss, showDashes: final.showDashes, allowVerticalOverflow: final.allowVerticalOverflow, itemPadding: final.itemPadding || '0.5rem', controlerSize: final.controlerSize, controlerIconSize: final.controlerIconSize, infiniteScroll: final.infiniteScroll, infiniteScrollSpeed: final.infiniteScrollSpeed, infiniteScrollDirection: final.infiniteScrollDirection }, carouselItems)));
+    };
+    var renderFeaturesContent = function () {
+        if (featuresArray.length === 0)
+            return null;
+        // Use carousel if isCarousel is true
+        if (final.isCarousel) {
+            return renderCarouselFeatures();
+        }
+        // Otherwise use flex layout
+        return renderFlexFeatures();
+    };
     var getLayoutClasses = function () {
         var classes = ['feature-section'];
         if (final.layout) {
             classes.push("feature-section--".concat(final.layout));
         }
+        if (final.isCarousel) {
+            classes.push('feature-section--carousel');
+        }
         if (final.className) {
             classes.push(final.className);
         }

package/ui/form/Form.d.ts

@@ -46,7 +46,7 @@ export interface FormField {
     };
 }
 export interface FormProps {
-    fields: FormField[] | string;
+    fields?: FormField[] | string;
     onSubmit?: (values: Record<string, any>, viaWhatsApp?: boolean) => void;
     defaultValues?: Record<string, any> | string;
     submitText?: string;
@@ -58,7 +58,7 @@ export interface FormProps {
     isLoading?: boolean;
     className?: string;
     layout?: 'vertical' | 'horizontal';
-    gap?: number;
+    gap?: number | string;
     title?: string;
     titleSize?: string;
     titleColor?: string;