funuicss 3.6.14 → 3.6.16

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.14",
+  "version": "3.6.16",
   "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/button/Button.d.ts

@@ -5,6 +5,12 @@ interface ButtonProps {
     funcss?: string;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
+    stringPrefix?: string;
+    stringSuffix?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    iconSize?: number | string;
+    iconLineHeight?: string | number;
     text?: string;
     rounded?: boolean;
     raised?: boolean;
@@ -15,6 +21,7 @@ interface ButtonProps {
     fullWidth?: boolean;
     outlined?: boolean;
     small?: boolean;
+    hoverless?: boolean;
     smaller?: boolean;
     big?: boolean;
     bigger?: boolean;
@@ -23,7 +30,6 @@ interface ButtonProps {
     hoverNone?: boolean;
     fillAnimation?: boolean;
     bold?: boolean;
-    hoverless?: boolean;
     fillDirection?: string;
     fillTextColor?: string;
     buttonFillStyle?: React.CSSProperties;
@@ -36,5 +42,5 @@ interface ButtonProps {
     style?: React.CSSProperties;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export default function Button({ variant, color, bg, funcss, startIcon, endIcon, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, children, bold, style, url, onClick, ...rest }: ButtonProps): React.JSX.Element;
+export default function Button({ variant, color, bg, funcss, startIcon, endIcon, stringPrefix, stringSuffix, prefix, suffix, iconSize, iconLineHeight, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, bold, children, style, url, onClick, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/ui/button/Button.js

@@ -11,6 +11,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -22,103 +55,107 @@ 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 });
 exports.default = Button;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
+var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 function Button(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? '' : _b, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, children = _a.children, bold = _a.bold, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "children", "bold", "style", "url", "onClick"]);
-    // Use the component config hook
+    var _b;
+    var _c = _a.variant, variant = _c === void 0 ? '' : _c, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _d = _a.iconLineHeight, iconLineHeight = _d === void 0 ? 0 : _d, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
     var mergedProps = mergeWithLocal(__assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold }, rest)).props;
-    // Use mergedProps directly instead of getProp - this ensures local props override config
-    var finalIsLoading = mergedProps.isLoading;
-    var finalStatus = mergedProps.status;
-    var finalText = mergedProps.text;
-    var finalOutlined = mergedProps.outlined;
-    var finalBg = mergedProps.bg;
-    var finalColor = mergedProps.color;
-    var finalRounded = mergedProps.rounded;
-    var finalHoverless = mergedProps.hoverless;
-    var finalBold = mergedProps.bold;
-    var finalFloat = mergedProps.float;
-    var finalRaised = mergedProps.raised;
-    var finalHoverUp = mergedProps.hoverUp;
-    var finalFlat = mergedProps.flat;
-    var finalHoverNone = mergedProps.hoverNone;
-    var finalSmall = mergedProps.small;
-    var finalSmaller = mergedProps.smaller;
-    var finalBig = mergedProps.big;
-    var finalBigger = mergedProps.bigger;
-    var finalJumbo = mergedProps.jumbo;
-    var finalFillAnimation = mergedProps.fillAnimation;
-    var finalFillDirection = mergedProps.fillDirection;
-    var finalFillTextColor = mergedProps.fillTextColor;
-    var finalFuncss = mergedProps.funcss;
-    function removeNumbers(text) {
-        if (!text)
-            return '';
-        return text.replace(/[0-9]/g, '');
-    }
-    function hasNumberAbove(text) {
-        if (!text)
-            return false;
-        var matches = text.match(/\d+/g);
-        if (!matches)
-            return false;
-        return matches.some(function (num) { return parseInt(num) >= 400; });
-    }
-    function hasNumber(text) {
-        if (!text)
-            return false;
-        return /\d/.test(text);
+    var final = {
+        isLoading: mergedProps.isLoading,
+        status: mergedProps.status,
+        text: mergedProps.text,
+        outlined: mergedProps.outlined,
+        bg: mergedProps.bg,
+        color: mergedProps.color,
+        rounded: mergedProps.rounded,
+        hoverless: mergedProps.hoverless,
+        bold: mergedProps.bold,
+        float: mergedProps.float,
+        raised: mergedProps.raised,
+        hoverUp: mergedProps.hoverUp,
+        flat: mergedProps.flat,
+        hoverNone: mergedProps.hoverNone,
+        small: mergedProps.small,
+        smaller: mergedProps.smaller,
+        big: mergedProps.big,
+        bigger: mergedProps.bigger,
+        jumbo: mergedProps.jumbo,
+        fillAnimation: mergedProps.fillAnimation,
+        fillDirection: mergedProps.fillDirection,
+        fillTextColor: mergedProps.fillTextColor,
+        funcss: mergedProps.funcss,
+    };
+    var _e = (0, react_1.useState)(null), prefixNode = _e[0], setPrefixNode = _e[1];
+    var _f = (0, react_1.useState)(null), suffixNode = _f[0], setSuffixNode = _f[1];
+    function isReactElement(node) {
+        return react_1.default.isValidElement(node);
     }
-    // Determine text color class using final values (local props override config)
-    var textColorClass = finalBg ?
-        finalColor ?
-            finalColor :
-            !hasNumber(finalBg) && !finalOutlined ?
-                "" :
-                hasNumberAbove(finalBg) && !finalOutlined ?
-                    "white" :
-                    removeNumbers(finalBg)
-        : finalColor;
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix)
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        if (stringSuffix)
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+    }, [stringPrefix, stringSuffix]);
+    var textColorClass = final.bg
+        ? final.color
+            ? final.color
+            : !/\d/.test(final.bg) && !final.outlined
+                ? ''
+                : /[4-9]\d{2,}/.test(final.bg) && !final.outlined
+                    ? 'white'
+                    : final.bg.replace(/[0-9]/g, '')
+        : final.color;
     var classNames = [
         'button',
         "text-".concat(textColorClass),
-        finalFuncss || '',
-        finalRounded ? 'roundBtn' : '',
-        finalHoverless ? 'hoverless' : '',
-        finalBold ? 'text-bold' : '',
-        finalFloat ? 'floatBtn' : '',
-        finalRaised ? 'raisedBtn' : '',
-        finalHoverUp ? 'hover-up' : '',
-        finalFlat ? 'flat' : '',
-        finalHoverNone ? 'hoverNone' : '',
-        finalSmall ? 'smallBtn' :
-            finalSmaller ? 'smallerBtn' : '',
-        finalBig ? 'bigBtn' : '',
-        finalBigger ? 'biggerBtn' : '',
-        finalJumbo ? 'jumboBtn' : '',
-        finalOutlined ? "outlined outline-".concat(finalBg || '', " text-").concat(finalColor ? finalColor : removeNumbers(finalBg)) : finalBg || '',
-        "".concat(finalFillAnimation ? "".concat(finalFillTextColor ? "hover-text-".concat(finalFillTextColor) : '', " button-fill fill-").concat(finalFillDirection || 'left') : '')
+        final.funcss || '',
+        final.rounded ? 'roundBtn' : '',
+        final.hoverless ? 'hoverless' : '',
+        final.bold ? 'text-bold' : '',
+        final.float ? 'floatBtn' : '',
+        final.raised ? 'raisedBtn' : '',
+        final.hoverUp ? 'hover-up' : '',
+        final.flat ? 'flat' : '',
+        final.hoverNone ? 'hoverNone' : '',
+        final.small ? 'smallBtn' : final.smaller ? 'smallerBtn' : '',
+        final.big ? 'bigBtn' : '',
+        final.bigger ? 'biggerBtn' : '',
+        final.jumbo ? 'jumboBtn' : '',
+        final.outlined
+            ? "outlined outline-".concat(final.bg || '', " text-").concat(final.color ? final.color : (_b = final.bg) === null || _b === void 0 ? void 0 : _b.replace(/[0-9]/g, ''))
+            : final.bg || '',
+        "".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) : '', " button-fill fill-").concat(final.fillDirection || 'left') : ''),
     ].join(' ');
+    var iconWrapperStyle = {
+        lineHeight: iconLineHeight,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
     return (react_1.default.createElement("span", null,
-        react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat(startIcon || endIcon || finalStatus || finalIsLoading ? 'iconic' : ''), style: __assign({ height: mergedProps.height || '', width: mergedProps.fullWidth ? '100%' : mergedProps.width || '', borderRadius: finalFlat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return window.location.href = url; } : undefined) }, mergedProps),
-            finalIsLoading && (react_1.default.createElement("span", { className: 'rotate btn_left_icon', style: { lineHeight: "0" } },
-                react_1.default.createElement(pi_1.PiSpinner, null))),
-            finalStatus && (react_1.default.createElement("span", { className: 'btn_left_icon', style: { lineHeight: "0" } },
-                finalStatus === "success" && react_1.default.createElement(pi_1.PiCheck, null),
-                finalStatus === "info" && react_1.default.createElement(pi_1.PiInfo, null),
-                finalStatus === "warning" && react_1.default.createElement(pi_1.PiWarning, null),
-                finalStatus === "danger" && react_1.default.createElement(pi_1.PiX, null))),
-            finalFillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(finalBg) }),
-            startIcon && react_1.default.createElement("span", { className: "btn_left_icon", style: { lineHeight: "0" } }, startIcon),
-            finalText ? finalText : children,
-            endIcon && react_1.default.createElement("span", { className: "btn_right_icon", style: { lineHeight: "0" } }, endIcon))));
+        react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat((startIcon || endIcon || prefix || suffix || prefixNode || suffixNode || final.status || final.isLoading) ? 'iconic' : ''), style: __assign({ height: mergedProps.height || '', width: mergedProps.fullWidth ? '100%' : mergedProps.width || '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
+            final.isLoading && (react_1.default.createElement("span", { className: "btn_left_icon rotate", style: iconWrapperStyle },
+                react_1.default.createElement(pi_1.PiSpinner, { size: iconSize }))),
+            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 === 'danger' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
+            final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(final.bg) }),
+            (prefix || startIcon || prefixNode) && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle }, isReactElement(startIcon) ? react_1.default.cloneElement(startIcon, { size: iconSize })
+                : isReactElement(prefix) ? react_1.default.cloneElement(prefix, { size: iconSize })
+                    : isReactElement(prefixNode) ? react_1.default.cloneElement(prefixNode, { size: iconSize })
+                        : prefix || startIcon || prefixNode // fallback for string/number, rendered as-is
+            )),
+            final.text ? final.text : children,
+            (suffix || endIcon || suffixNode) && (react_1.default.createElement("span", { className: "btn_right_icon", style: iconWrapperStyle }, isReactElement(endIcon) ? react_1.default.cloneElement(endIcon, { size: iconSize })
+                : isReactElement(suffix) ? react_1.default.cloneElement(suffix, { size: iconSize })
+                    : isReactElement(suffixNode) ? react_1.default.cloneElement(suffixNode, { size: iconSize })
+                        : suffix || endIcon || suffixNode)))));
 }

package/ui/card/Card.d.ts

@@ -27,6 +27,56 @@ interface CardProps {
     responsiveMedium?: boolean;
     xl?: boolean;
     style?: React.CSSProperties;
+    pattern?: 'none' | 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
+    patternOpacity?: number;
+    gradient?: string;
+    opacity?: number;
+    border?: string;
+    hoverEffect?: 'none' | 'lift' | 'glow';
+    heading?: ReactNode;
+    headingSize?: string;
+    headingWeight?: number;
+    headingColor?: string;
+    headingClass?: string;
+    headingLineHeight?: string;
+    subheading?: ReactNode;
+    subheadingSize?: string;
+    subheadingWeight?: number;
+    subheadingColor?: string;
+    subheadingClass?: string;
+    subheadingLineHeight?: string;
+    content?: ReactNode;
+    contentSize?: string;
+    contentWeight?: number;
+    contentColor?: string;
+    contentClass?: string;
+    contentLineHeight?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    imageClass?: string;
+    imageSize?: string;
+    showPrimaryCTA?: boolean;
+    showSecondaryCTA?: boolean;
+    showAccentCTA?: boolean;
+    primaryButtonOutlined?: boolean;
+    secondaryButtonOutlined?: boolean;
+    accentButtonOutlined?: boolean;
+    ctaPrimaryUrl?: string;
+    ctaSecondaryUrl?: string;
+    ctaAccentUrl?: string;
+    ctaPrimaryText?: string;
+    ctaSecondaryText?: string;
+    ctaAccentText?: string;
+    ctaGap?: number;
+    ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    ctaClass?: string;
+    headerStyle?: React.CSSProperties;
+    headerClass?: string;
+    bodyStyle?: React.CSSProperties;
+    bodyClass?: string;
+    footerStyle?: React.CSSProperties;
+    footerClass?: string;
+    variant?: string;
 }
-export default function Card({ color, bg, width, height, minHeight, minWidth, margin, padding, funcss, children, roundEdge, maxHeight, maxWidth, horizontal, id, header, body, footer, noGap, fab, image, shadowless, flat, responsiveMedium, xl, responsiveSmall, style, ...rest }: CardProps): React.JSX.Element;
+export default function Card({ color, bg, width, height, minHeight, minWidth, margin, padding, funcss, children, roundEdge, maxHeight, maxWidth, horizontal, id, header, body, footer, noGap, fab, image, shadowless, flat, responsiveMedium, xl, responsiveSmall, style, pattern, patternOpacity, gradient, opacity, border, hoverEffect, heading, headingSize, headingWeight, headingColor, headingClass, headingLineHeight, subheading, subheadingSize, subheadingWeight, subheadingColor, subheadingClass, subheadingLineHeight, content, contentSize, contentWeight, contentColor, contentClass, contentLineHeight, imageUrl, imageAlt, imageClass, imageSize, showPrimaryCTA, showSecondaryCTA, showAccentCTA, primaryButtonOutlined, secondaryButtonOutlined, accentButtonOutlined, ctaPrimaryUrl, ctaSecondaryUrl, ctaAccentUrl, ctaPrimaryText, ctaSecondaryText, ctaAccentText, ctaGap, ctaFlexJustify, ctaClass, headerStyle, headerClass, bodyStyle, bodyClass, footerStyle, footerClass, variant, ...rest }: CardProps): React.JSX.Element;
 export {};

package/ui/card/Card.js

@@ -32,24 +32,194 @@ var CardHeader_1 = __importDefault(require("./CardHeader"));
 var CardBody_1 = __importDefault(require("./CardBody"));
 var CardFooter_1 = __importDefault(require("./CardFooter"));
 var theme_1 = require("../theme/theme");
+var componentUtils_1 = require("../../utils/componentUtils");
+var Button_1 = __importDefault(require("../button/Button"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
+var Text_1 = __importDefault(require("../text/Text"));
+var View_1 = __importDefault(require("../view/View"));
 function Card(_a) {
-    var color = _a.color, bg = _a.bg, width = _a.width, height = _a.height, minHeight = _a.minHeight, minWidth = _a.minWidth, margin = _a.margin, padding = _a.padding, funcss = _a.funcss, children = _a.children, roundEdge = _a.roundEdge, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, horizontal = _a.horizontal, id = _a.id, header = _a.header, body = _a.body, footer = _a.footer, noGap = _a.noGap, fab = _a.fab, image = _a.image, shadowless = _a.shadowless, flat = _a.flat, responsiveMedium = _a.responsiveMedium, xl = _a.xl, responsiveSmall = _a.responsiveSmall, style = _a.style, rest = __rest(_a, ["color", "bg", "width", "height", "minHeight", "minWidth", "margin", "padding", "funcss", "children", "roundEdge", "maxHeight", "maxWidth", "horizontal", "id", "header", "body", "footer", "noGap", "fab", "image", "shadowless", "flat", "responsiveMedium", "xl", "responsiveSmall", "style"]);
-    var variant = (0, theme_1.useVariant)().variant;
-    return (react_1.default.createElement("div", __assign({ id: id || '', className: "\n      card \n      card_flex\n      ".concat(noGap ? 'no-gap' : '', " \n      ").concat(xl ? 'xl' : '', " \n      text-").concat(color || '', " \n      ").concat(bg || '', " \n      ").concat(funcss || '', " \n      ").concat(roundEdge ? 'round-edge' : '', " \n      ").concat(shadowless ? 'shadowless' : '', " \n      ").concat(flat ? 'flat' : '', " \n      ").concat(horizontal ? 'horizontalCard' : '', "\n      ").concat(responsiveMedium ? 'responsiveMedium' : '', "\n      ").concat(responsiveSmall ? 'responsiveSmall' : '', "\n      ").concat(variant === "standard" ? "border" : "", "\n      \n      "), style: __assign({ width: "".concat(width || ''), height: "".concat(height || ''), minHeight: "".concat(minHeight || ''), minWidth: "".concat(minWidth || ''), maxHeight: maxHeight || '', maxWidth: maxWidth || '', margin: "".concat(margin || ''), padding: "".concat(padding || '') }, style) }, rest),
-        image ? react_1.default.createElement("div", { className: "".concat(fab ? 'relative' : '') },
-            image,
+    var 
+    // Original Props
+    color = _a.color, bg = _a.bg, width = _a.width, height = _a.height, minHeight = _a.minHeight, minWidth = _a.minWidth, margin = _a.margin, padding = _a.padding, funcss = _a.funcss, children = _a.children, roundEdge = _a.roundEdge, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, horizontal = _a.horizontal, id = _a.id, header = _a.header, body = _a.body, footer = _a.footer, noGap = _a.noGap, fab = _a.fab, image = _a.image, shadowless = _a.shadowless, flat = _a.flat, responsiveMedium = _a.responsiveMedium, xl = _a.xl, responsiveSmall = _a.responsiveSmall, style = _a.style, 
+    // Pattern Props
+    _b = _a.pattern, 
+    // Pattern Props
+    pattern = _b === void 0 ? 'none' : _b, _c = _a.patternOpacity, patternOpacity = _c === void 0 ? 0.1 : _c, gradient = _a.gradient, _d = _a.opacity, opacity = _d === void 0 ? 1 : _d, border = _a.border, _e = _a.hoverEffect, hoverEffect = _e === void 0 ? 'none' : _e, 
+    // Enhanced Content Props
+    heading = _a.heading, _f = _a.headingSize, headingSize = _f === void 0 ? 'xl' : _f, _g = _a.headingWeight, headingWeight = _g === void 0 ? 700 : _g, headingColor = _a.headingColor, headingClass = _a.headingClass, headingLineHeight = _a.headingLineHeight, subheading = _a.subheading, _h = _a.subheadingSize, subheadingSize = _h === void 0 ? 'base' : _h, _j = _a.subheadingWeight, subheadingWeight = _j === void 0 ? 400 : _j, _k = _a.subheadingColor, subheadingColor = _k === void 0 ? 'light' : _k, subheadingClass = _a.subheadingClass, subheadingLineHeight = _a.subheadingLineHeight, content = _a.content, _l = _a.contentSize, contentSize = _l === void 0 ? 'base' : _l, _m = _a.contentWeight, contentWeight = _m === void 0 ? 400 : _m, contentColor = _a.contentColor, contentClass = _a.contentClass, contentLineHeight = _a.contentLineHeight, 
+    // Image Props
+    imageUrl = _a.imageUrl, _o = _a.imageAlt, imageAlt = _o === void 0 ? '' : _o, _p = _a.imageClass, imageClass = _p === void 0 ? '' : _p, _q = _a.imageSize, imageSize = _q === void 0 ? '100%' : _q, 
+    // Enhanced Footer/CTA Props
+    _r = _a.showPrimaryCTA, 
+    // Enhanced Footer/CTA Props
+    showPrimaryCTA = _r === void 0 ? false : _r, _s = _a.showSecondaryCTA, showSecondaryCTA = _s === void 0 ? false : _s, _t = _a.showAccentCTA, showAccentCTA = _t === void 0 ? false : _t, _u = _a.primaryButtonOutlined, primaryButtonOutlined = _u === void 0 ? false : _u, _v = _a.secondaryButtonOutlined, secondaryButtonOutlined = _v === void 0 ? false : _v, _w = _a.accentButtonOutlined, accentButtonOutlined = _w === void 0 ? false : _w, _x = _a.ctaPrimaryUrl, ctaPrimaryUrl = _x === void 0 ? '' : _x, _y = _a.ctaSecondaryUrl, ctaSecondaryUrl = _y === void 0 ? '' : _y, _z = _a.ctaAccentUrl, ctaAccentUrl = _z === void 0 ? '' : _z, _0 = _a.ctaPrimaryText, ctaPrimaryText = _0 === void 0 ? 'Primary Action' : _0, _1 = _a.ctaSecondaryText, ctaSecondaryText = _1 === void 0 ? 'Secondary Action' : _1, _2 = _a.ctaAccentText, ctaAccentText = _2 === void 0 ? 'Accent Action' : _2, _3 = _a.ctaGap, ctaGap = _3 === void 0 ? 1 : _3, _4 = _a.ctaFlexJustify, ctaFlexJustify = _4 === void 0 ? 'center' : _4, _5 = _a.ctaClass, ctaClass = _5 === void 0 ? '' : _5, 
+    // Section Styling Props
+    headerStyle = _a.headerStyle, headerClass = _a.headerClass, bodyStyle = _a.bodyStyle, bodyClass = _a.bodyClass, footerStyle = _a.footerStyle, footerClass = _a.footerClass, 
+    // Configuration
+    variant = _a.variant, rest = __rest(_a, ["color", "bg", "width", "height", "minHeight", "minWidth", "margin", "padding", "funcss", "children", "roundEdge", "maxHeight", "maxWidth", "horizontal", "id", "header", "body", "footer", "noGap", "fab", "image", "shadowless", "flat", "responsiveMedium", "xl", "responsiveSmall", "style", "pattern", "patternOpacity", "gradient", "opacity", "border", "hoverEffect", "heading", "headingSize", "headingWeight", "headingColor", "headingClass", "headingLineHeight", "subheading", "subheadingSize", "subheadingWeight", "subheadingColor", "subheadingClass", "subheadingLineHeight", "content", "contentSize", "contentWeight", "contentColor", "contentClass", "contentLineHeight", "imageUrl", "imageAlt", "imageClass", "imageSize", "showPrimaryCTA", "showSecondaryCTA", "showAccentCTA", "primaryButtonOutlined", "secondaryButtonOutlined", "accentButtonOutlined", "ctaPrimaryUrl", "ctaSecondaryUrl", "ctaAccentUrl", "ctaPrimaryText", "ctaSecondaryText", "ctaAccentText", "ctaGap", "ctaFlexJustify", "ctaClass", "headerStyle", "headerClass", "bodyStyle", "bodyClass", "footerStyle", "footerClass", "variant"]);
+    // Use the component config hook
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Card', variant).mergeWithLocal;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        // Original props
+        color: color,
+        bg: bg,
+        width: width,
+        height: height,
+        minHeight: minHeight,
+        minWidth: minWidth,
+        margin: margin,
+        padding: padding,
+        funcss: funcss,
+        children: children,
+        roundEdge: roundEdge,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        horizontal: horizontal,
+        id: id,
+        header: header,
+        body: body,
+        footer: footer,
+        noGap: noGap,
+        fab: fab,
+        image: image,
+        shadowless: shadowless,
+        flat: flat,
+        responsiveMedium: responsiveMedium,
+        xl: xl,
+        responsiveSmall: responsiveSmall,
+        style: style,
+        // Pattern props
+        pattern: pattern,
+        patternOpacity: patternOpacity,
+        gradient: gradient,
+        opacity: opacity,
+        border: border,
+        hoverEffect: hoverEffect,
+        // Enhanced content props
+        heading: heading,
+        headingSize: headingSize,
+        headingWeight: headingWeight,
+        headingColor: headingColor,
+        headingClass: headingClass,
+        headingLineHeight: headingLineHeight,
+        subheading: subheading,
+        subheadingSize: subheadingSize,
+        subheadingWeight: subheadingWeight,
+        subheadingColor: subheadingColor,
+        subheadingClass: subheadingClass,
+        subheadingLineHeight: subheadingLineHeight,
+        content: content,
+        contentSize: contentSize,
+        contentWeight: contentWeight,
+        contentColor: contentColor,
+        contentClass: contentClass,
+        contentLineHeight: contentLineHeight,
+        // Image props
+        imageUrl: imageUrl,
+        imageAlt: imageAlt,
+        imageClass: imageClass,
+        imageSize: imageSize,
+        // CTA props
+        showPrimaryCTA: showPrimaryCTA,
+        showSecondaryCTA: showSecondaryCTA,
+        showAccentCTA: showAccentCTA,
+        primaryButtonOutlined: primaryButtonOutlined,
+        secondaryButtonOutlined: secondaryButtonOutlined,
+        accentButtonOutlined: accentButtonOutlined,
+        ctaPrimaryUrl: ctaPrimaryUrl,
+        ctaSecondaryUrl: ctaSecondaryUrl,
+        ctaAccentUrl: ctaAccentUrl,
+        ctaPrimaryText: ctaPrimaryText,
+        ctaSecondaryText: ctaSecondaryText,
+        ctaAccentText: ctaAccentText,
+        ctaGap: ctaGap,
+        ctaFlexJustify: ctaFlexJustify,
+        ctaClass: ctaClass,
+        // Section styling props
+        headerStyle: headerStyle,
+        headerClass: headerClass,
+        bodyStyle: bodyStyle,
+        bodyClass: bodyClass,
+        footerStyle: footerStyle,
+        footerClass: footerClass,
+    }).props;
+    var themeVariant = (0, theme_1.useVariant)().variant;
+    // Handle content - if string, use dangerouslySetInnerHTML, otherwise render as is
+    var renderContent = function (content) {
+        if (typeof content === 'string') {
+            return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: content } });
+        }
+        return content;
+    };
+    // Enhanced Text Content with flexible styling
+    var EnhancedTextContent = (react_1.default.createElement("div", { className: "card-enhanced-content" },
+        mergedProps.heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass, lineHeight: mergedProps.headingLineHeight }, renderContent(mergedProps.heading))),
+        mergedProps.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.subheadingSize, weight: mergedProps.subheadingWeight, color: mergedProps.subheadingColor, funcss: "mt-1 ".concat(mergedProps.subheadingClass), lineHeight: mergedProps.subheadingLineHeight }, renderContent(mergedProps.subheading))),
+        mergedProps.content && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.contentSize, weight: mergedProps.contentWeight, color: mergedProps.contentColor, funcss: "mt-3 ".concat(mergedProps.contentClass), lineHeight: mergedProps.contentLineHeight, article: true }, renderContent(mergedProps.content)))));
+    // Image Content - uses imageUrl if no image component provided
+    var ImageContent = (mergedProps.image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "card-image-content" }, mergedProps.image ? (mergedProps.image) : (mergedProps.imageUrl && (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt, className: mergedProps.imageClass, style: {
+            width: mergedProps.imageSize,
+            height: 'auto',
+            objectFit: 'cover',
+            borderRadius: 'inherit'
+        } })))));
+    // CTA Buttons Component
+    var CTAButtons = function () {
+        var hasCTAs = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
+        if (!hasCTAs)
+            return null;
+        return (react_1.default.createElement(Flex_1.default, { gap: mergedProps.ctaGap, justify: mergedProps.ctaFlexJustify, className: "mt-4 ".concat(mergedProps.ctaClass), wrap: "wrap", width: '100%' },
+            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: mergedProps.primaryButtonOutlined, onClick: function () { return mergedProps.ctaPrimaryUrl && (window.location.href = mergedProps.ctaPrimaryUrl); } }, mergedProps.ctaPrimaryText)),
+            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: mergedProps.secondaryButtonOutlined, onClick: function () { return mergedProps.ctaSecondaryUrl && (window.location.href = mergedProps.ctaSecondaryUrl); } }, mergedProps.ctaSecondaryText)),
+            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: mergedProps.accentButtonOutlined, onClick: function () { return mergedProps.ctaAccentUrl && (window.location.href = mergedProps.ctaAccentUrl); } }, mergedProps.ctaAccentText))));
+    };
+    // Determine if we should use enhanced content
+    var hasEnhancedContent = mergedProps.heading || mergedProps.subheading || mergedProps.content;
+    var hasEnhancedFooter = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
+    var hasImageContent = mergedProps.image || mergedProps.imageUrl;
+    return (react_1.default.createElement("div", __assign({ id: mergedProps.id || '', className: "\n        card \n        card_flex\n        ".concat(!image && !imageUrl ? "p" : "", "\n        ").concat(mergedProps.noGap ? 'no-gap' : '', " \n        ").concat(mergedProps.xl ? 'xl' : '', " \n        text-").concat(mergedProps.color || '', " \n        ").concat(mergedProps.bg || '', " \n        ").concat(mergedProps.funcss || '', " \n        ").concat(mergedProps.roundEdge ? 'round-edge' : '', " \n        ").concat(mergedProps.shadowless ? 'shadowless' : '', " \n        ").concat(mergedProps.flat ? 'flat' : '', " \n        ").concat(mergedProps.horizontal ? 'horizontalCard' : '', "\n        ").concat(mergedProps.responsiveMedium ? 'responsiveMedium' : '', "\n        ").concat(mergedProps.responsiveSmall ? 'responsiveSmall' : '', "\n        ").concat(mergedProps.pattern !== 'none' ? "pattern-".concat(mergedProps.pattern) : '', "\n        ").concat(mergedProps.hoverEffect !== 'none' ? "hover-".concat(mergedProps.hoverEffect) : '', "\n        ").concat(themeVariant === "standard" ? "border" : "", "\n      "), style: __assign({ width: "".concat(mergedProps.width || ''), height: "".concat(mergedProps.height || ''), minHeight: "".concat(mergedProps.minHeight || ''), minWidth: "".concat(mergedProps.minWidth || ''), maxHeight: mergedProps.maxHeight || '', maxWidth: mergedProps.maxWidth || '', margin: "".concat(mergedProps.margin || ''), padding: "".concat(mergedProps.padding || ''), background: mergedProps.gradient, opacity: mergedProps.opacity, border: mergedProps.border, position: 'relative', overflow: 'hidden' }, mergedProps.style) }, rest),
+        mergedProps.pattern !== 'none' && (react_1.default.createElement("div", { className: "card-pattern-overlay", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                pointerEvents: 'none',
+                opacity: mergedProps.patternOpacity,
+                mixBlendMode: 'multiply',
+                backgroundImage: mergedProps.pattern === 'grid' ?
+                    "linear-gradient(to right, rgba(var(--borderRgb), 1) 1px, transparent 1px),\n                 linear-gradient(to bottom, rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
+                    mergedProps.pattern === 'dots' ?
+                        "radial-gradient(rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
+                        mergedProps.pattern === 'diagonal' ?
+                            "repeating-linear-gradient(45deg, rgba(var(--borderRgb), 1), rgba(var(--borderRgb), 1) 1px, transparent 1px, transparent 10px)" :
+                            mergedProps.pattern === 'checkerboard' ?
+                                "linear-gradient(45deg, rgba(var(--borderRgb), 1) 25%, transparent 25%), \n                 linear-gradient(-45deg, rgba(var(--borderRgb), 1) 25%, transparent 25%), \n                 linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), 1) 75%), \n                 linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), 1) 75%)" :
+                                mergedProps.pattern === 'horizontal' ?
+                                    "linear-gradient(to bottom, rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
+                                    mergedProps.pattern === 'vertical' ?
+                                        "linear-gradient(to right, rgba(var(--borderRgb), 1) 1px, transparent 1px)" : 'none',
+                backgroundSize: mergedProps.pattern === 'grid' ? '20px 20px' :
+                    mergedProps.pattern === 'dots' ? '10px 10px' :
+                        mergedProps.pattern === 'diagonal' ? '20px 20px' :
+                            mergedProps.pattern === 'checkerboard' ? '20px 20px' :
+                                mergedProps.pattern === 'horizontal' ? '100% 10px' :
+                                    mergedProps.pattern === 'vertical' ? '10px 100%' : 'auto'
+            } })),
+        hasImageContent ? (ImageContent) : (mergedProps.image ? react_1.default.createElement("div", { className: "".concat(mergedProps.fab ? 'relative' : '') },
+            mergedProps.image,
             " ",
-            fab ? fab : '') : '',
-        header && !horizontal ? react_1.default.createElement(CardHeader_1.default, null, header) : '',
-        body ?
-            react_1.default.createElement("div", null,
-                horizontal ? react_1.default.createElement(CardHeader_1.default, null, header) : '',
-                react_1.default.createElement(CardBody_1.default, null,
-                    "  ",
-                    body,
-                    " "),
-                horizontal ? react_1.default.createElement(CardFooter_1.default, null, footer) : '')
-            : '',
-        children && react_1.default.createElement(CardBody_1.default, null, children),
-        footer && !horizontal ? react_1.default.createElement(CardFooter_1.default, null, footer) : ''));
+            mergedProps.fab ? mergedProps.fab : '') : ''),
+        react_1.default.createElement(View_1.default, { funcss: hasImageContent ? 'p' : '' },
+            hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, EnhancedTextContent)) : (mergedProps.header && !mergedProps.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : ''),
+            mergedProps.body ?
+                react_1.default.createElement("div", null,
+                    mergedProps.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : '',
+                    react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(mergedProps.body)),
+                    mergedProps.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : '')
+                : '',
+            mergedProps.children && (react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, renderContent(mergedProps.children))),
+            hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass },
+                react_1.default.createElement(CTAButtons, null))) : (mergedProps.footer && !mergedProps.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : ''))));
 }

package/ui/input/Input.d.ts

@@ -5,7 +5,7 @@ interface BaseInputProps {
     value?: any;
     defaultValue?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    status?: 'success' | 'warning' | 'danger' | '';
+    status?: 'success' | 'warning' | 'danger' | 'info' | '';
     funcss?: string;
     bg?: string;
     fullWidth?: boolean;
@@ -17,8 +17,12 @@ interface BaseInputProps {
     rightRounded?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
     iconicBg?: string;
     variant?: string;
+    label?: string;
+    helperText?: string;
 }
 interface SelectOption {
     value: string;
@@ -26,17 +30,14 @@ interface SelectOption {
 }
 interface TextInputProps extends BaseInputProps {
     type?: string;
-    label?: string;
 }
 interface SelectProps extends BaseInputProps {
     options?: SelectOption[];
 }
 interface TextareaProps extends BaseInputProps {
-    label?: string;
     rows?: number;
 }
 interface FileInputProps extends BaseInputProps {
-    label?: string;
     icon?: React.ReactNode;
     extra?: React.ReactNode;
     button?: React.ReactNode;
@@ -56,7 +57,6 @@ interface InputProps extends BaseInputProps {
     button?: React.ReactNode;
     btn?: boolean;
     type?: string;
-    label?: string;
     options?: SelectOption[];
     rows?: number;
 }