funuicss 3.8.8 → 3.8.10

package/ui/button/Button.js

@@ -99,75 +99,170 @@ function Button(_a) {
         stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
         stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
     };
-    var _g = (0, react_1.useState)(null), prefixNode = _g[0], setPrefixNode = _g[1];
-    var _h = (0, react_1.useState)(null), suffixNode = _h[0], setSuffixNode = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringPrefix = _j[0], setHasValidStringPrefix = _j[1];
-    var _k = (0, react_1.useState)(false), hasValidStringSuffix = _k[0], setHasValidStringSuffix = _k[1];
-    function isReactElement(node) {
-        return react_1.default.isValidElement(node);
-    }
-    // Handle stringPrefix - only load if we have a valid string
+    // State for dynamic icons
+    var _g = (0, react_1.useState)(null), dynamicStartIcon = _g[0], setDynamicStartIcon = _g[1];
+    var _h = (0, react_1.useState)(null), dynamicEndIcon = _h[0], setDynamicEndIcon = _h[1];
+    var _j = (0, react_1.useState)(null), dynamicPrefix = _j[0], setDynamicPrefix = _j[1];
+    var _k = (0, react_1.useState)(null), dynamicSuffix = _k[0], setDynamicSuffix = _k[1];
+    var _l = (0, react_1.useState)(null), dynamicStringPrefix = _l[0], setDynamicStringPrefix = _l[1];
+    var _m = (0, react_1.useState)(null), dynamicStringSuffix = _m[0], setDynamicStringSuffix = _m[1];
+    // Function to check if a value is a string (dynamic icon)
+    var isStringIcon = function (icon) {
+        return typeof icon === 'string' && icon.trim() !== '';
+    };
+    // Function to check if a value is a ReactNode (static icon)
+    var isReactNodeIcon = function (icon) {
+        return icon !== undefined && !isStringIcon(icon) && react_1.default.isValidElement(icon);
+    };
+    // Load dynamic icons from string props
     (0, react_1.useEffect)(function () {
-        var effectiveStringPrefix = final.stringPrefix;
-        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-            setPrefixNode(null);
-            setHasValidStringPrefix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
-            if (node) {
-                setPrefixNode(node);
-                setHasValidStringPrefix(true);
-            }
-            else {
-                setPrefixNode(null);
-                setHasValidStringPrefix(false);
-            }
-        });
-    }, [final.stringPrefix]);
-    // Handle stringSuffix - only load if we have a valid string
+        // Handle startIcon if it's a string
+        if (isStringIcon(startIcon)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(startIcon).then(function (node) {
+                if (node) {
+                    setDynamicStartIcon(node);
+                }
+                else {
+                    setDynamicStartIcon(null);
+                }
+            });
+        }
+        else {
+            setDynamicStartIcon(null);
+        }
+        // Handle endIcon if it's a string
+        if (isStringIcon(endIcon)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(endIcon).then(function (node) {
+                if (node) {
+                    setDynamicEndIcon(node);
+                }
+                else {
+                    setDynamicEndIcon(null);
+                }
+            });
+        }
+        else {
+            setDynamicEndIcon(null);
+        }
+        // Handle prefix if it's a string
+        if (isStringIcon(prefix)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(prefix).then(function (node) {
+                if (node) {
+                    setDynamicPrefix(node);
+                }
+                else {
+                    setDynamicPrefix(null);
+                }
+            });
+        }
+        else {
+            setDynamicPrefix(null);
+        }
+        // Handle suffix if it's a string
+        if (isStringIcon(suffix)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(suffix).then(function (node) {
+                if (node) {
+                    setDynamicSuffix(node);
+                }
+                else {
+                    setDynamicSuffix(null);
+                }
+            });
+        }
+        else {
+            setDynamicSuffix(null);
+        }
+    }, [startIcon, endIcon, prefix, suffix]);
+    // Load dynamic icons from stringPrefix and stringSuffix (backward compatibility)
     (0, react_1.useEffect)(function () {
-        var effectiveStringSuffix = final.stringSuffix;
-        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-            setSuffixNode(null);
-            setHasValidStringSuffix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
-            if (node) {
-                setSuffixNode(node);
-                setHasValidStringSuffix(true);
-            }
-            else {
-                setSuffixNode(null);
-                setHasValidStringSuffix(false);
+        if (final.stringPrefix && final.stringPrefix.trim() !== '') {
+            (0, getDynamicIcon_1.getDynamicIcon)(final.stringPrefix).then(function (node) {
+                if (node) {
+                    setDynamicStringPrefix(node);
+                }
+                else {
+                    setDynamicStringPrefix(null);
+                }
+            });
+        }
+        else {
+            setDynamicStringPrefix(null);
+        }
+        if (final.stringSuffix && final.stringSuffix.trim() !== '') {
+            (0, getDynamicIcon_1.getDynamicIcon)(final.stringSuffix).then(function (node) {
+                if (node) {
+                    setDynamicStringSuffix(node);
+                }
+                else {
+                    setDynamicStringSuffix(null);
+                }
+            });
+        }
+        else {
+            setDynamicStringSuffix(null);
+        }
+    }, [final.stringPrefix, final.stringSuffix]);
+    // Determine which start icon to show with proper priority
+    var actualStartIcon = (0, react_1.useMemo)(function () {
+        if (final.status) {
+            // Status icons have highest priority for start position
+            switch (final.status) {
+                case 'success':
+                    return react_1.default.createElement(pi_1.PiCheck, { size: iconSize });
+                case 'info':
+                    return react_1.default.createElement(pi_1.PiInfo, { size: iconSize });
+                case 'warning':
+                    return react_1.default.createElement(pi_1.PiWarning, { size: iconSize });
+                case 'error':
+                    return react_1.default.createElement(pi_1.PiX, { size: iconSize });
+                default:
+                    return null;
             }
-        });
-    }, [final.stringSuffix]);
-    // Determine which prefix to show with proper priority
-    var showPrefix = react_1.default.useMemo(function () {
-        // Priority order: status > startIcon (local) > prefix (local) > stringPrefix (dynamic)
-        if (final.status)
-            return true;
-        if (startIcon)
-            return true;
-        if (prefix)
-            return true;
-        if (hasValidStringPrefix && prefixNode)
-            return true;
-        return false;
-    }, [final.status, startIcon, prefix, hasValidStringPrefix, prefixNode]);
-    // Determine which suffix to show with proper priority
-    var showSuffix = react_1.default.useMemo(function () {
-        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
-        if (endIcon)
-            return true;
-        if (suffix)
-            return true;
-        if (hasValidStringSuffix && suffixNode)
-            return true;
-        return false;
-    }, [endIcon, suffix, hasValidStringSuffix, suffixNode]);
+        }
+        if (isStringIcon(startIcon)) {
+            return dynamicStartIcon;
+        }
+        if (isReactNodeIcon(startIcon)) {
+            return startIcon;
+        }
+        if (isStringIcon(prefix)) {
+            return dynamicPrefix;
+        }
+        if (isReactNodeIcon(prefix)) {
+            return prefix;
+        }
+        if (dynamicStringPrefix) {
+            return dynamicStringPrefix;
+        }
+        return null;
+    }, [
+        final.status,
+        startIcon,
+        prefix,
+        dynamicStartIcon,
+        dynamicPrefix,
+        dynamicStringPrefix,
+        iconSize,
+    ]);
+    // Determine which end icon to show with proper priority
+    var actualEndIcon = (0, react_1.useMemo)(function () {
+        if (isStringIcon(endIcon)) {
+            return dynamicEndIcon;
+        }
+        if (isReactNodeIcon(endIcon)) {
+            return endIcon;
+        }
+        if (isStringIcon(suffix)) {
+            return dynamicSuffix;
+        }
+        if (isReactNodeIcon(suffix)) {
+            return suffix;
+        }
+        if (dynamicStringSuffix) {
+            return dynamicStringSuffix;
+        }
+        return null;
+    }, [endIcon, suffix, dynamicEndIcon, dynamicSuffix, dynamicStringSuffix]);
     var textColorClass = final.bg
         ? final.color
             ? final.color
@@ -208,27 +303,37 @@ function Button(_a) {
     };
     // Helper function to render icon with proper size
     var renderIcon = function (icon, className) {
+        var _a;
         if (className === void 0) { className = ''; }
         if (!icon)
             return null;
-        return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, isReactElement(icon) ? react_1.default.cloneElement(icon, { size: iconSize }) : icon));
+        // If it's a React element that we know accepts size prop
+        if (react_1.default.isValidElement(icon)) {
+            // Create a wrapper span and clone the icon with size prop if needed
+            var iconProps = {};
+            // Only add size prop if iconSize is provided and not already set
+            if (iconSize && !((_a = icon.props) === null || _a === void 0 ? void 0 : _a.size)) {
+                iconProps.size = iconSize;
+            }
+            // Only clone with props if we have props to add
+            if (Object.keys(iconProps).length > 0) {
+                return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, react_1.default.cloneElement(icon, iconProps)));
+            }
+            else {
+                // Otherwise just render the icon in a span
+                return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, icon));
+            }
+        }
+        // If it's not a valid React element, just render it as is
+        return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, icon));
     };
+    // Determine if we should show icons on left or right
+    var hasStartIcon = Boolean(actualStartIcon);
+    var hasEndIcon = Boolean(actualEndIcon);
     return (react_1.default.createElement("span", null,
-        react_1.default.createElement("button", __assign({ type: final.type || 'button', disabled: disabled || final.isLoading || false, className: "".concat(classNames, " ").concat((showPrefix || showSuffix || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
-            final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null,
-                final.status && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
-                    final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),
-                    final.status === 'info' && react_1.default.createElement(pi_1.PiInfo, { size: iconSize }),
-                    final.status === 'warning' && react_1.default.createElement(pi_1.PiWarning, { size: iconSize }),
-                    final.status === 'error' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
-                !final.status && showPrefix && (react_1.default.createElement(react_1.default.Fragment, null,
-                    startIcon && renderIcon(startIcon, 'btn_left_icon'),
-                    !startIcon && prefix && renderIcon(prefix, 'btn_left_icon'),
-                    !startIcon && !prefix && hasValidStringPrefix && renderIcon(prefixNode, 'btn_left_icon'))))),
+        react_1.default.createElement("button", __assign({ type: final.type || 'button', disabled: disabled || final.isLoading || false, className: "".concat(classNames, " ").concat((hasStartIcon || hasEndIcon || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
+            final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null, hasStartIcon && renderIcon(actualStartIcon, 'btn_left_icon'))),
             final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
             children ? children : final.text ? final.text : "",
-            showSuffix && (react_1.default.createElement(react_1.default.Fragment, null,
-                endIcon && renderIcon(endIcon, 'btn_right_icon'),
-                !endIcon && suffix && renderIcon(suffix, 'btn_right_icon'),
-                !endIcon && !suffix && hasValidStringSuffix && renderIcon(suffixNode, 'btn_right_icon'))))));
+            hasEndIcon && !final.isLoading && renderIcon(actualEndIcon, 'btn_right_icon'))));
 }

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;