funuicss 3.6.15 → 3.6.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.15",
+  "version": "3.6.17",
   "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.js

@@ -62,8 +62,7 @@ var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 function Button(_a) {
-    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 _b = _a.variant, variant = _b === void 0 ? '' : _b, 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, _c = _a.iconLineHeight, iconLineHeight = _c === void 0 ? 0 : _c, 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;
     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;
     var final = {
@@ -91,17 +90,28 @@ function Button(_a) {
         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];
+    var _d = (0, react_1.useState)(null), prefixNode = _d[0], setPrefixNode = _d[1];
+    var _e = (0, react_1.useState)(null), suffixNode = _e[0], setSuffixNode = _e[1];
     function isReactElement(node) {
         return react_1.default.isValidElement(node);
     }
+    // FIX: Clear icons when stringPrefix/stringSuffix are empty or undefined
     (0, react_1.useEffect)(function () {
-        if (stringPrefix)
+        if (stringPrefix) {
             (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
-        if (stringSuffix)
+        }
+        else {
+            setPrefixNode(null); // Clear when empty
+        }
+    }, [stringPrefix]);
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
             (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
-    }, [stringPrefix, stringSuffix]);
+        }
+        else {
+            setSuffixNode(null); // Clear when empty
+        }
+    }, [stringSuffix]);
     var textColorClass = final.bg
         ? final.color
             ? final.color
@@ -111,6 +121,8 @@ function Button(_a) {
                     ? 'white'
                     : final.bg.replace(/[0-9]/g, '')
         : final.color;
+    // Determine background: status takes priority over bg prop
+    var effectiveBg = final.status ? final.status : final.bg;
     var classNames = [
         'button',
         "text-".concat(textColorClass),
@@ -128,8 +140,8 @@ function Button(_a) {
         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 || '',
+            ? "outlined outline-".concat(effectiveBg || '', " text-").concat(final.color ? final.color : effectiveBg === null || effectiveBg === void 0 ? void 0 : effectiveBg.replace(/[0-9]/g, ''))
+            : effectiveBg || '',
         "".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) : '', " button-fill fill-").concat(final.fillDirection || 'left') : ''),
     ].join(' ');
     var iconWrapperStyle = {
@@ -140,19 +152,18 @@ function Button(_a) {
     };
     return (react_1.default.createElement("span", null,
         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.isLoading ? (react_1.default.createElement("span", { className: "btn_left_icon rotate", style: iconWrapperStyle },
+                react_1.default.createElement(pi_1.PiSpinner, { size: iconSize }))) : (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 === 'danger' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
-            final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(final.bg) }),
+                final.status === 'danger' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))) : (
+            /* Otherwise show regular start icons */
             (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
-            )),
+                        : prefix || startIcon || prefixNode))))),
+            final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
             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 })

package/ui/card/Card.js

@@ -36,6 +36,7 @@ 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 
     // Original Props
@@ -210,14 +211,15 @@ function Card(_a) {
             mergedProps.image,
             " ",
             mergedProps.fab ? mergedProps.fab : '') : ''),
-        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))) : '')));
+        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,14 @@ interface BaseInputProps {
     rightRounded?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    stringPrefix?: string;
+    stringSuffix?: string;
     iconicBg?: string;
     variant?: string;
+    label?: string;
+    helperText?: string;
 }
 interface SelectOption {
     value: string;
@@ -26,17 +32,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 +59,6 @@ interface InputProps extends BaseInputProps {
     button?: React.ReactNode;
     btn?: boolean;
     type?: string;
-    label?: string;
     options?: SelectOption[];
     rows?: number;
 }

package/ui/input/Input.js

@@ -65,6 +65,14 @@ var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
 var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
+var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+// Status icons mapping
+var statusIcons = {
+    success: react_1.default.createElement(pi_1.PiCheckCircle, null),
+    warning: react_1.default.createElement(pi_1.PiWarning, null),
+    danger: react_1.default.createElement(pi_1.PiX, null),
+    info: react_1.default.createElement(pi_1.PiInfo, null)
+};
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
     var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
@@ -78,24 +86,64 @@ var generateInputClasses = function (_a) {
 };
 // Iconic Input Wrapper Component
 var IconicInputWrapper = function (_a) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
-    if (!startIcon && !endIcon) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
+    var effectiveStartIcon = prefix !== undefined ? prefix : startIcon;
+    var effectiveEndIcon = suffix !== undefined ? suffix : endIcon;
+    if (!effectiveStartIcon && !effectiveEndIcon) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    return (react_1.default.createElement("div", { className: "icon-container ".concat(funcss || '') },
-        startIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
+    return (react_1.default.createElement("div", { className: "icon-container ".concat(effectiveStartIcon ? 'has-left-icon' : '', " ").concat(funcss || '') },
+        effectiveStartIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
                 backgroundColor: iconicBg || '',
                 border: iconicBg ? "0.1rem ".concat(iconicBg, " solid") : '',
-            } }, startIcon)),
-        react_1.default.createElement("div", { className: "icon_input_wrapper ".concat(startIcon ? 'lefticon' : '', " ").concat(endIcon ? 'righticon' : '') }, children),
-        endIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, endIcon))));
+            } }, effectiveStartIcon)),
+        children,
+        effectiveEndIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, effectiveEndIcon))));
+};
+// Input Container with Floating Label
+var InputContainer = function (_a) {
+    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix;
+    var showFloatingLabel = label && (isFocused || hasValue);
+    return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
+        react_1.default.createElement("div", { className: "input-container-with-label" },
+            label && (react_1.default.createElement("label", { htmlFor: id, className: "floating-label ".concat(startIcon || prefix ? "label-left" : "", "  ").concat(showFloatingLabel ? 'active' : '', " ").concat(status ? "label-".concat(status) : '') }, label)),
+            children),
+        (helperText || status) && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : '') },
+            status && statusIcons[status] && (react_1.default.createElement("span", { className: "helper-icon" }, statusIcons[status])),
+            react_1.default.createElement("span", null, helperText)))));
 };
 // Text Input Component
 var TextInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "type", "label", "variant"]);
-    // Use the component config hook
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, helperText = _a.helperText, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "label", "helperText", "variant"]);
+    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = (0, react_1.useState)(value || defaultValue || ''), inputValue = _f[0], setInputValue = _f[1];
+    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 inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            setInputValue(value);
+        }
+    }, [value]);
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props override config
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -109,9 +157,10 @@ var TextInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
@@ -125,16 +174,61 @@ var TextInput = function (_a) {
         borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest, mergedProps)));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
+    var handleChange = function (e) {
+        setInputValue(e.target.value);
+        if (onChange)
+            onChange(e);
+    };
+    var handleFocus = function (e) {
+        setIsFocused(true);
+        if (rest.onFocus)
+            rest.onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setIsFocused(false);
+        if (rest.onBlur)
+            rest.onBlur(e);
+    };
+    // Determine effective icons: stringPrefix/stringSuffix take priority
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
+    var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: !label ? rest.placeholder : '', style: style, value: value }, rest)));
+    var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedInput));
 };
 exports.TextInput = TextInput;
 // Select Component
 var SelectInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "options", "variant"]);
-    // Use the component config hook
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "options", "label", "helperText", "variant"]);
+    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var _e = (0, react_1.useState)(value || defaultValue || ''), selectValue = _e[0], setSelectValue = _e[1];
+    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
+    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            setSelectValue(value);
+        }
+    }, [value]);
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
+    var selectHasValue = true;
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -148,9 +242,10 @@ var SelectInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
@@ -164,16 +259,59 @@ var SelectInput = function (_a) {
         borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest, mergedProps), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
+    var handleChange = function (e) {
+        setSelectValue(e.target.value);
+        if (onChange)
+            onChange(e);
+    };
+    var handleFocus = function (e) {
+        setIsFocused(true);
+        if (rest.onFocus)
+            rest.onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setIsFocused(false);
+        if (rest.onBlur)
+            rest.onBlur(e);
+    };
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
+    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: value, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
 var TextareaInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "rows", "variant"]);
-    // Use the component config hook
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, label = _a.label, helperText = _a.helperText, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "rows", "variant"]);
+    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var _e = (0, react_1.useState)(value || defaultValue || ''), textValue = _e[0], setTextValue = _e[1];
+    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
+    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            setTextValue(value);
+        }
+    }, [value]);
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -187,9 +325,10 @@ var TextareaInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
@@ -203,17 +342,53 @@ var TextareaInput = function (_a) {
         borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest, mergedProps)));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
+    var handleChange = function (e) {
+        setTextValue(e.target.value);
+        if (onChange)
+            onChange(e);
+    };
+    var handleFocus = function (e) {
+        setIsFocused(true);
+        if (rest.onFocus)
+            rest.onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setIsFocused(false);
+        if (rest.onBlur)
+            rest.onBlur(e);
+    };
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: !label ? rest.placeholder : '', style: style, value: value, rows: rows }, rest)));
+    var wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
 // File Input Component
 var FileInput = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "icon", "extra", "button", "btn", "value", "variant"]);
+    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, helperText = _a.helperText, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
     var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
-    // Use the component config hook
+    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
+    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -225,11 +400,12 @@ var FileInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
         bordered: rest.bordered,
         borderless: rest.borderless,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var handleChange = function (e) {
         var _a;
@@ -240,6 +416,8 @@ var FileInput = function (_a) {
         if (onChange)
             onChange(e);
     };
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
     if (btn) {
         var className = generateInputClasses({
             status: mergedProps.status,
@@ -256,8 +434,9 @@ var FileInput = function (_a) {
         var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
         var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
             button || (react_1.default.createElement(Button_1.default, { funcss: mergedProps.funcss, startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label)),
-            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest, mergedProps))));
-        return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
+            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest))));
+        var wrappedFileInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
+        return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, wrappedFileInput));
     }
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
@@ -270,18 +449,15 @@ var FileInput = function (_a) {
                     width: '100%',
                 } }, fileName || label),
             extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
-        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest, mergedProps))));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, uploadElement));
+        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, uploadElement));
 };
 exports.FileInput = FileInput;
 var Input = function (_a) {
-    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "iconicBg", "variant"]);
-    // Use the component config hook for the main Input component
+    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "variant"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props
-    var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg })).props;
-    // Handle legacy noBorder prop
-    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
+    var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg })).props;
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, stringPrefix: stringPrefix, stringSuffix: stringSuffix, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }