funuicss 3.8.8 → 3.8.9

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/feature/Feature.d.ts

@@ -9,13 +9,11 @@ type FeatureItem = {
     titleWeight?: number;
     titleColor?: string;
     titleClassName?: string;
-    titleVariant?: string;
     description?: React.ReactNode;
     descriptionSize?: string;
     descriptionWeight?: number;
     descriptionColor?: string;
     descriptionClassName?: string;
-    descriptionVariant?: string;
     imageUrl?: string;
     imageAlt?: string;
     imageClassName?: string;
@@ -23,18 +21,9 @@ type FeatureItem = {
     content?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-    cardBg?: string;
-    cardPadding?: string;
-    cardRounded?: string;
-    cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
-    cardBorder?: boolean;
-    cardBorderColor?: string;
-    cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
     ctaText?: string;
     ctaUrl?: string;
-    ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
     ctaOnClick?: () => void;
-    ctaCss?: string;
     ctaClassName?: string;
     customRender?: () => React.ReactNode;
 };
@@ -47,33 +36,23 @@ type FeatureProps = {
     titleColor?: string;
     titleClassName?: string;
     titleAlign?: 'left' | 'center' | 'right';
-    titleVariant?: string;
     subtitle?: React.ReactNode;
     subtitleSize?: string;
     subtitleWeight?: number;
     subtitleColor?: string;
     subtitleClassName?: string;
-    subtitleVariant?: string;
     description?: React.ReactNode;
     descriptionSize?: string;
     descriptionWeight?: number;
     descriptionColor?: string;
     descriptionClassName?: string;
-    descriptionVariant?: string;
     features?: FeatureItem[] | string;
-    columns?: number;
-    gap?: string;
-    itemGap?: string;
+    gap?: number;
+    itemMaxWidth?: string;
     align?: 'start' | 'center' | 'end' | 'stretch';
     justify?: 'start' | 'center' | 'end' | 'between' | 'around';
     wrap?: boolean;
-    bg?: string;
-    padding?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    containerClassName?: string;
-    containerStyle?: React.CSSProperties;
-    cardBg?: string;
+    card?: boolean;
     cardPadding?: string;
     cardRounded?: string;
     cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
@@ -81,27 +60,28 @@ type FeatureProps = {
     cardBorderColor?: string;
     cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
     cardClassName?: string;
+    padding?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
     iconColor?: string;
     iconSize?: number;
     iconClassName?: string;
     itemTitleSize?: string;
     itemTitleWeight?: number;
     itemTitleColor?: string;
-    itemTitleVariant?: string;
     itemDescriptionSize?: string;
     itemDescriptionWeight?: number;
     itemDescriptionColor?: string;
-    itemDescriptionVariant?: string;
     checkmarkIcon?: string;
     checkmarkColor?: string;
     checkmarkSize?: number;
     checkmarkClassName?: string;
     ctaText?: string;
     ctaUrl?: string;
-    ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
     ctaOnClick?: () => void;
     ctaClassName?: string;
-    ctaCss?: string;
     ctaAlign?: 'left' | 'center' | 'right';
     ctaStringPrefix?: string;
     ctaStringSuffix?: string;
@@ -110,21 +90,12 @@ type FeatureProps = {
     ctaIconSize?: number;
     ctaIsLoading?: boolean;
     ctaStatus?: 'success' | 'warning' | 'info' | 'error';
-    pattern?: 'grid' | 'dots' | 'diagonal' | 'none';
-    patternOpacity?: number;
-    patternColor?: string;
-    patternSize?: string;
-    fade?: boolean;
-    fadeColor?: string;
-    fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
-    fadeRadial?: boolean;
-    hoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
+    ctaBg?: string;
     children?: React.ReactNode;
     id?: string;
     funcss?: string;
     sectionClass?: string;
     maxWidth?: string;
-    responsiveColumns?: string;
 };
 declare const Feature: React.FC<FeatureProps>;
 export default Feature;