funuicss 3.8.6 → 3.8.8

package/ui/input/Input.js

@@ -115,11 +115,13 @@ var IconicInputWrapper = function (_a) {
 };
 // 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, _b = _a.alwaysActiveLabel, alwaysActiveLabel = _b === void 0 ? false : _b;
+    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, _b = _a.alwaysActiveLabel, alwaysActiveLabel = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? false : _c;
     var showFloatingLabel = label && (alwaysActiveLabel || 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)),
+            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,
+                required && react_1.default.createElement("span", { className: "required-indicator" }, "*"))),
             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])),
@@ -127,13 +129,17 @@ var InputContainer = function (_a) {
 };
 // 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, 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, placeholder = _a.placeholder, 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", "placeholder"]);
-    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
-    var _f = (0, react_1.useState)(value !== undefined ? String(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 _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];
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, 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, placeholder = _a.placeholder, 
+    // HTML Input Attributes
+    _e = _a.disabled, 
+    // HTML Input Attributes
+    disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.required, required = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, autoComplete = _a.autoComplete, pattern = _a.pattern, minLength = _a.minLength, maxLength = _a.maxLength, min = _a.min, max = _a.max, step = _a.step, multiple = _a.multiple, accept = _a.accept, size = _a.size, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, list = _a.list, autoCapitalize = _a.autoCapitalize, autoCorrect = _a.autoCorrect, spellCheck = _a.spellCheck, inputMode = _a.inputMode, dirname = _a.dirname, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "label", "helperText", "variant", "placeholder", "disabled", "readOnly", "required", "autoFocus", "autoComplete", "pattern", "minLength", "maxLength", "min", "max", "step", "multiple", "accept", "size", "form", "formNoValidate", "formTarget", "list", "autoCapitalize", "autoCorrect", "spellCheck", "inputMode", "dirname"]);
+    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
+    var _k = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), inputValue = _k[0], setInputValue = _k[1];
+    var _l = (0, react_1.useState)(null), prefixNode = _l[0], setPrefixNode = _l[1];
+    var _m = (0, react_1.useState)(null), suffixNode = _m[0], setSuffixNode = _m[1];
+    var _o = (0, react_1.useState)(false), hasValidStringPrefix = _o[0], setHasValidStringPrefix = _o[1];
+    var _p = (0, react_1.useState)(false), hasValidStringSuffix = _p[0], setHasValidStringSuffix = _p[1];
     var inputRef = (0, react_1.useRef)(null);
     var isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
     (0, react_1.useEffect)(function () {
@@ -290,30 +296,36 @@ var TextInput = function (_a) {
     };
     var handleFocus = function (e) {
         setIsFocused(true);
-        if (rest.onFocus)
-            rest.onFocus(e);
+        if (onFocus)
+            onFocus(e);
     };
     var handleBlur = function (e) {
         setIsFocused(false);
-        if (rest.onBlur)
-            rest.onBlur(e);
+        if (onBlur)
+            onBlur(e);
     };
     var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
-    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: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue }, rest)));
+    var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue, 
+        // HTML Input Attributes
+        disabled: disabled, readOnly: readOnly, required: required, autoFocus: autoFocus, autoComplete: autoComplete, pattern: pattern, minLength: minLength, maxLength: maxLength, min: min, max: max, step: step, multiple: multiple, accept: accept, size: size, form: form, formNoValidate: formNoValidate, formTarget: formTarget, list: list, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, inputMode: inputMode }, rest)));
     // Only use iconic wrapper when we have icons, matching Button's pattern
     var wrappedInput = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, inputElement)) : (inputElement);
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: isDateTimeInput }, wrappedInput));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: isDateTimeInput, required: required }, wrappedInput));
 };
 exports.TextInput = TextInput;
 // Select Component - UPDATED to match pattern
 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, 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 !== undefined ? String(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];
-    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, 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, 
+    // HTML Select Attributes
+    _d = _a.disabled, 
+    // HTML Select Attributes
+    disabled = _d === void 0 ? false : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, size = _a.size, multiple = _a.multiple, autoComplete = _a.autoComplete, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "options", "label", "helperText", "variant", "disabled", "required", "autoFocus", "form", "formNoValidate", "formTarget", "size", "multiple", "autoComplete"]);
+    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), selectValue = _h[0], setSelectValue = _h[1];
+    var _j = (0, react_1.useState)(null), prefixNode = _j[0], setPrefixNode = _j[1];
+    var _k = (0, react_1.useState)(null), suffixNode = _k[0], setSuffixNode = _k[1];
+    var _l = (0, react_1.useState)(false), hasValidStringPrefix = _l[0], setHasValidStringPrefix = _l[1];
+    var _m = (0, react_1.useState)(false), hasValidStringSuffix = _m[0], setHasValidStringSuffix = _m[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setSelectValue(String(value));
@@ -469,29 +481,38 @@ var SelectInput = function (_a) {
     };
     var handleFocus = function (e) {
         setIsFocused(true);
-        if (rest.onFocus)
-            rest.onFocus(e);
+        if (onFocus)
+            onFocus(e);
     };
     var handleBlur = function (e) {
         setIsFocused(false);
-        if (rest.onBlur)
-            rest.onBlur(e);
+        if (onBlur)
+            onBlur(e);
     };
-    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: selectValue, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, value: selectValue, style: style, 
+        // HTML Select Attributes
+        disabled: disabled, required: required, autoFocus: autoFocus, form: form, 
+        // formNoValidate={formNoValidate}
+        // formTarget={formTarget}
+        size: size, multiple: multiple, autoComplete: autoComplete }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
     // Only use iconic wrapper when we have icons, matching Button's pattern
     var wrappedSelect = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, selectElement)) : (selectElement);
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true }, wrappedSelect));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true, required: required }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component - UPDATED to match pattern
 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, 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, placeholder = _a.placeholder, 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", "placeholder"]);
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
-    var _e = (0, react_1.useState)(value !== undefined ? String(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];
-    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, 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, cols = _a.cols, wrap = _a.wrap, _c = _a.variant, variant = _c === void 0 ? '' : _c, placeholder = _a.placeholder, 
+    // HTML Textarea Attributes
+    _d = _a.disabled, 
+    // HTML Textarea Attributes
+    disabled = _d === void 0 ? false : _d, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, autoComplete = _a.autoComplete, minLength = _a.minLength, maxLength = _a.maxLength, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, dirname = _a.dirname, autoCapitalize = _a.autoCapitalize, autoCorrect = _a.autoCorrect, spellCheck = _a.spellCheck, inputMode = _a.inputMode, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "rows", "cols", "wrap", "variant", "placeholder", "disabled", "readOnly", "required", "autoFocus", "autoComplete", "minLength", "maxLength", "form", "formNoValidate", "formTarget", "dirname", "autoCapitalize", "autoCorrect", "spellCheck", "inputMode"]);
+    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
+    var _j = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), textValue = _j[0], setTextValue = _j[1];
+    var _k = (0, react_1.useState)(null), prefixNode = _k[0], setPrefixNode = _k[1];
+    var _l = (0, react_1.useState)(null), suffixNode = _l[0], setSuffixNode = _l[1];
+    var _m = (0, react_1.useState)(false), hasValidStringPrefix = _m[0], setHasValidStringPrefix = _m[1];
+    var _o = (0, react_1.useState)(false), hasValidStringSuffix = _o[0], setHasValidStringSuffix = _o[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setTextValue(String(value));
@@ -646,19 +667,25 @@ var TextareaInput = function (_a) {
     };
     var handleFocus = function (e) {
         setIsFocused(true);
-        if (rest.onFocus)
-            rest.onFocus(e);
+        if (onFocus)
+            onFocus(e);
     };
     var handleBlur = function (e) {
         setIsFocused(false);
-        if (rest.onBlur)
-            rest.onBlur(e);
+        if (onBlur)
+            onBlur(e);
     };
     var showPlaceholder = placeholder && label && (isFocused || !!textValue);
-    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows }, rest)));
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows, cols: cols, wrap: wrap, 
+        // HTML Textarea Attributes
+        disabled: disabled, readOnly: readOnly, required: required, autoFocus: autoFocus, autoComplete: autoComplete, minLength: minLength, maxLength: maxLength, form: form, 
+        // formNoValidate={formNoValidate}
+        // formTarget={formTarget}
+        // dirname={dirname}
+        autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, inputMode: inputMode }, rest)));
     // Only use iconic wrapper when we have icons, matching Button's pattern
     var wrappedTextarea = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, textareaElement)) : (textareaElement);
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id }, wrappedTextarea));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id, required: required }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
 var Input = function (_a) {
@@ -679,3 +706,976 @@ var Input = function (_a) {
     return react_1.default.createElement(exports.TextInput, __assign({}, inputProps));
 };
 exports.default = Input;
+// 'use client'
+// import React, { useState, useEffect, useRef } from 'react';
+// import { PiCheck, PiCloudArrowUp, PiInfo, PiWarning, PiX, PiCheckCircle } from 'react-icons/pi';
+// import Button from '../button/Button';
+// import { useVariant } from '../theme/theme';
+// import { useComponentConfiguration } from '../../utils/componentUtils';
+// import { getDynamicIcon } from '../../utils/getDynamicIcon';
+// import Text from '../text/Text';
+// import { FileUpload } from './FileUpload';
+// // Base types and interfaces
+// interface BaseInputProps {
+//   id?: string;
+//   name?: string;
+//   value?: any;
+//   defaultValue?: string;
+//   onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+//   status?: 'success' | 'warning' | 'danger' | 'info' ;
+//   funcss?: string;
+//   bg?: string;
+//   fullWidth?: boolean;
+//   flat?: boolean;
+//   bordered?: boolean;
+//   borderless?: boolean;
+//   rounded?: boolean;
+//   leftRounded?: boolean;
+//   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;
+//   text: string;
+// }
+// interface TextInputProps extends BaseInputProps {
+//   type?: string;
+// }
+// interface SelectProps extends BaseInputProps {
+//   options?: SelectOption[];
+// }
+// interface TextareaProps extends BaseInputProps {
+//   rows?: number;
+// }
+// interface FileInputProps extends BaseInputProps {
+//   icon?: React.ReactNode;
+//   extra?: React.ReactNode;
+//   button?: React.ReactNode;
+//   btn?: boolean;
+// }
+// // Status icons mapping
+// const statusIcons = {
+//   success: <PiCheckCircle />,
+//   warning: <PiWarning />,
+//   danger: <PiX />,
+//   info: <PiInfo />
+// };
+// // Utility function to generate CSS classes
+// const generateInputClasses = ({
+//   status,
+//   rounded,
+//   bg,
+//   funcss,
+//   flat,
+//   leftRounded,
+//   rightRounded,
+//   bordered,
+//   borderless,
+//   additionalClasses = '',
+//   hasNoPrefix = false,
+//   hasNoLabel = false
+// }: {
+//   status?: string;
+//   rounded?: boolean;
+//   bg?: string;
+//   funcss?: string;
+//   flat?: boolean;
+//   leftRounded?: boolean;
+//   rightRounded?: boolean;
+//   bordered?: boolean;
+//   borderless?: boolean;
+//   additionalClasses?: string;
+//   hasNoPrefix?: boolean;
+//   hasNoLabel?: boolean;
+// }) => {
+//   const statusClass = status ? `${status}-input` : '';
+//   const roundedClass = rounded ? 'rounded' : '';
+//   const bgClass = bg || '';
+//   const flatClass = flat ? 'flat' : '';
+//   const cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
+//   const borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
+//   const noPrefixClass = hasNoPrefix ? 'no_prefix' : '';
+//   const noLabelClass = hasNoLabel ? 'no_label' : '';
+//   return `
+//     ${statusClass}
+//     ${roundedClass}
+//     ${bgClass}
+//     ${funcss || ''}
+//     ${flatClass}
+//     ${cornerClass}
+//     ${borderClass}
+//     ${additionalClasses}
+//     ${noPrefixClass}
+//     ${noLabelClass}
+//     input
+//   `.trim().replace(/\s+/g, ' ');
+// };
+// // Iconic Input Wrapper Component - UPDATED to match Button's pattern
+// const IconicInputWrapper: React.FC<{
+//   startIcon?: React.ReactNode;
+//   endIcon?: React.ReactNode;
+//   prefix?: React.ReactNode;
+//   suffix?: React.ReactNode;
+//   iconicBg?: string;
+//   funcss?: string;
+//   stringPrefix?: string;
+//   stringSuffix?: string;
+//   children: React.ReactNode;
+// }> = ({ 
+//   startIcon, 
+//   endIcon,
+//   prefix,
+//   suffix,
+//   iconicBg, 
+//   funcss,
+//   stringPrefix,
+//   stringSuffix,
+//   children 
+// }) => {
+//   // Match Button's pattern exactly - use proper priority
+//   const effectiveStartIcon = startIcon !== undefined ? startIcon : prefix;
+//   const effectiveEndIcon = endIcon !== undefined ? endIcon : suffix;
+//   // Determine which icons to show - MATCH BUTTON'S PATTERN EXACTLY
+//   const showPrefix = effectiveStartIcon !== undefined && effectiveStartIcon !== null;
+//   const showSuffix = effectiveEndIcon !== undefined && effectiveEndIcon !== null;
+//   if (!showPrefix && !showSuffix) {
+//     return <>{children}</>;
+//   }
+//   // Helper function to check if element is a React element
+//   function isReactElement(node: any): node is React.ReactElement {
+//     return React.isValidElement(node);
+//   }
+//   return (
+//     <div className={`icon-container ${showPrefix ? 'has-left-icon' : ''} ${funcss || ''}`}>
+//       {/* LEFT ICON - Match Button's exact conditional pattern */}
+//       {showPrefix && (
+//         <div
+//           className="leftIcon"
+//           style={{
+//             backgroundColor: iconicBg || '',
+//             border: iconicBg ? `0.1rem ${iconicBg} solid` : '',
+//           }}
+//         >
+//           {isReactElement(startIcon) ? startIcon
+//             : isReactElement(prefix) ? prefix
+//             : isReactElement(effectiveStartIcon) ? effectiveStartIcon
+//             : stringPrefix ? effectiveStartIcon : ''
+//           }
+//         </div>
+//       )}
+//       {children}
+//       {/* RIGHT ICON - Match Button's exact conditional pattern */}
+//       {showSuffix && (
+//         <div className="rightIcon" style={{ backgroundColor: iconicBg || '' }}>
+//           {isReactElement(endIcon) ? endIcon
+//             : isReactElement(suffix) ? suffix
+//             : isReactElement(effectiveEndIcon) ? effectiveEndIcon
+//             : stringSuffix ? effectiveEndIcon : ""
+//           }
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// // Input Container with Floating Label
+// const InputContainer: React.FC<{
+//   label?: string;
+//   status?: string;
+//   helperText?: string;
+//   children: React.ReactNode;
+//   isFocused: boolean;
+//   hasValue: boolean;
+//   fullWidth?: boolean;
+//   id?: string;
+//   startIcon?: React.ReactNode;
+//   prefix?: React.ReactNode;
+//   alwaysActiveLabel?: boolean;
+// }> = ({ label, status, helperText, children, isFocused, hasValue, fullWidth, id, startIcon, prefix, alwaysActiveLabel = false }) => {
+//   const showFloatingLabel = label && (alwaysActiveLabel || isFocused || hasValue);
+//   return (
+//     <div className={`input-wrapper ${fullWidth ? 'full-width' : ''}`}>
+//       <div className="input-container-with-label">
+//         {label && (
+//           <label
+//             htmlFor={id}
+//             className={`floating-label ${startIcon || prefix ? "label-left" : ""}  ${showFloatingLabel ? 'active' : ''} ${status ? `label-${status}` : ''}`}
+//           >
+//             {label}
+//           </label>
+//         )}
+//         {children}
+//       </div>
+//       {(helperText || status) && (
+//         <div className={`input-helper-text ${status ? `helper-${status}` : ''}`}>
+//           {status && statusIcons[status as keyof typeof statusIcons] && (
+//             <span className="helper-icon">{statusIcons[status as keyof typeof statusIcons]}</span>
+//           )}
+//           <span>{helperText}</span>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// // Text Input Component
+// export const TextInput: React.FC<TextInputProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
+//   id,
+//   name,
+//   value,
+//   defaultValue,
+//   onChange,
+//   status,
+//   funcss,
+//   bg,
+//   fullWidth = true,
+//   flat,
+//   bordered,
+//   borderless,
+//   rounded,
+//   leftRounded,
+//   rightRounded,
+//   startIcon,
+//   endIcon,
+//   prefix,
+//   suffix,
+//   stringPrefix,
+//   stringSuffix,
+//   iconicBg,
+//   type = 'text',
+//   label,
+//   helperText,
+//   variant = '',
+//   placeholder,
+//   ...rest
+// }) => {
+//   const [isFocused, setIsFocused] = useState(false);
+//   const [inputValue, setInputValue] = useState<string>(value !== undefined ? String(value) : defaultValue || '');
+//   const [prefixNode, setPrefixNode] = useState<React.ReactNode>(null);
+//   const [suffixNode, setSuffixNode] = useState<React.ReactNode>(null);
+//   const [hasValidStringPrefix, setHasValidStringPrefix] = useState(false);
+//   const [hasValidStringSuffix, setHasValidStringSuffix] = useState(false);
+//   const inputRef = useRef<HTMLInputElement>(null);
+//   const isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
+//   useEffect(() => {
+//     if (value !== undefined && value !== '') {
+//       setInputValue(String(value));
+//     } else if (value === '') {
+//       setInputValue('');
+//     }
+//   }, [value]);
+//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
+//   const localProps = {
+//     status,
+//     funcss,
+//     bg,
+//     fullWidth,
+//     flat,
+//     bordered,
+//     borderless,
+//     rounded,
+//     leftRounded,
+//     rightRounded,
+//     startIcon,
+//     endIcon,
+//     prefix,
+//     suffix,
+//     iconicBg,
+//     stringPrefix,
+//     stringSuffix,
+//   };
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const final = {
+//     status: status !== undefined ? status : mergedProps.status,
+//     funcss: funcss !== undefined ? funcss : mergedProps.funcss,
+//     bg: bg !== undefined ? bg : mergedProps.bg,
+//     fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
+//     flat: flat !== undefined ? flat : mergedProps.flat,
+//     bordered: bordered !== undefined ? bordered : mergedProps.bordered,
+//     borderless: borderless !== undefined ? borderless : mergedProps.borderless,
+//     rounded: rounded !== undefined ? rounded : mergedProps.rounded,
+//     leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
+//     rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
+//     startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
+//     endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
+//     prefix: prefix !== undefined ? prefix : mergedProps.prefix,
+//     suffix: suffix !== undefined ? suffix : mergedProps.suffix,
+//     iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
+//     stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
+//     stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
+//   };
+//   // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
+//   useEffect(() => {
+//     const effectiveStringPrefix = final.stringPrefix;
+//     if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
+//       setPrefixNode(null);
+//       setHasValidStringPrefix(false);
+//       return;
+//     }
+//     getDynamicIcon(effectiveStringPrefix).then((node) => {
+//       if (node) {
+//         setPrefixNode(node);
+//         setHasValidStringPrefix(true);
+//       } else {
+//         setPrefixNode(null);
+//         setHasValidStringPrefix(false);
+//       }
+//     });
+//   }, [final.stringPrefix]);
+//   // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
+//   useEffect(() => {
+//     const effectiveStringSuffix = final.stringSuffix;
+//     if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
+//       setSuffixNode(null);
+//       setHasValidStringSuffix(false);
+//       return;
+//     }
+//     getDynamicIcon(effectiveStringSuffix).then((node) => {
+//       if (node) {
+//         setSuffixNode(node);
+//         setHasValidStringSuffix(true);
+//       } else {
+//         setSuffixNode(null);
+//         setHasValidStringSuffix(false);
+//       }
+//     });
+//   }, [final.stringSuffix]);
+//   const { variant: themeVariant } = useVariant();
+//   // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
+//   const showPrefix = React.useMemo(() => {
+//     // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
+//     if (final.startIcon) return true;
+//     if (final.prefix) return true;
+//     if (hasValidStringPrefix && prefixNode) return true;
+//     return false;
+//   }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+//   // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
+//   const showSuffix = React.useMemo(() => {
+//     // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
+//     if (final.endIcon) return true;
+//     if (final.suffix) return true;
+//     if (hasValidStringSuffix && suffixNode) return true;
+//     return false;
+//   }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+//   // Get effective icons following Button's priority pattern
+//   const effectivePrefix = React.useMemo(() => {
+//     // Priority: startIcon > prefix > stringPrefix
+//     if (final.startIcon) return final.startIcon;
+//     if (final.prefix) return final.prefix;
+//     if (hasValidStringPrefix) return prefixNode;
+//     return null;
+//   }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+//   const effectiveSuffix = React.useMemo(() => {
+//     // Priority: endIcon > suffix > stringSuffix
+//     if (final.endIcon) return final.endIcon;
+//     if (final.suffix) return final.suffix;
+//     if (hasValidStringSuffix) return suffixNode;
+//     return null;
+//   }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+//   const hasNoPrefix = !effectivePrefix;
+//   const hasNoLabel = !label;
+//   const className = generateInputClasses({
+//     status: final.status,
+//     rounded: final.rounded,
+//     bg: final.bg,
+//     funcss: final.funcss,
+//     flat: final.flat,
+//     leftRounded: final.leftRounded,
+//     rightRounded: final.rightRounded,
+//     bordered: final.bordered,
+//     borderless: final.borderless,
+//     hasNoPrefix,
+//     hasNoLabel,
+//   });
+//   const style = final.fullWidth ? { width: '100%' } : undefined;
+//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     const newValue = e.target.value;
+//     setInputValue(newValue);
+//     if (onChange) onChange(e);
+//   };
+//   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+//     setIsFocused(true);
+//     if (rest.onFocus) rest.onFocus(e);
+//   };
+//   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+//     setIsFocused(false);
+//     if (rest.onBlur) rest.onBlur(e);
+//   };
+//   const showPlaceholder = placeholder && label && (isFocused || !!inputValue);
+//   const inputElement = (
+//     <input
+//       ref={inputRef}
+//       id={id}
+//       name={name}
+//       className={className}
+//       onChange={handleChange}
+//       onFocus={handleFocus}
+//       onBlur={handleBlur}
+//       defaultValue={defaultValue}
+//       type={type}
+//       placeholder={showPlaceholder ? placeholder : (!label ? placeholder : '')}
+//       style={style}
+//       value={inputValue}
+//       {...rest}
+//     />
+//   );
+//   // Only use iconic wrapper when we have icons, matching Button's pattern
+//   const wrappedInput = showPrefix || showSuffix ? (
+//     <IconicInputWrapper
+//       startIcon={effectivePrefix}
+//       endIcon={effectiveSuffix}
+//       iconicBg={final.iconicBg}
+//       funcss={final.funcss}
+//       stringPrefix={stringPrefix}
+//       stringSuffix={stringSuffix}
+//     >
+//       {inputElement}
+//     </IconicInputWrapper>
+//   ) : (
+//     inputElement
+//   );
+//   return (
+//     <InputContainer
+//       startIcon={effectivePrefix}
+//       label={label}
+//       status={final.status}
+//       helperText={helperText}
+//       isFocused={isFocused}
+//       hasValue={!!inputValue}
+//       fullWidth={final.fullWidth}
+//       id={id}
+//       alwaysActiveLabel={isDateTimeInput}
+//     >
+//       {wrappedInput}
+//     </InputContainer>
+//   );
+// };
+// // Select Component - UPDATED to match pattern
+// export const SelectInput: React.FC<SelectProps & React.SelectHTMLAttributes<HTMLSelectElement>> = ({
+//   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 = '',
+//   ...rest
+// }) => {
+//   const [isFocused, setIsFocused] = useState(false);
+//   const [selectValue, setSelectValue] = useState<string>(value !== undefined ? String(value) : defaultValue || '');
+//   const [prefixNode, setPrefixNode] = useState<React.ReactNode>(null);
+//   const [suffixNode, setSuffixNode] = useState<React.ReactNode>(null);
+//   const [hasValidStringPrefix, setHasValidStringPrefix] = useState(false);
+//   const [hasValidStringSuffix, setHasValidStringSuffix] = useState(false);
+//   useEffect(() => {
+//     if (value !== undefined && value !== '') {
+//       setSelectValue(String(value));
+//     } else if (value === '') {
+//       setSelectValue('');
+//     }
+//   }, [value]);
+//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
+//   const localProps = {
+//     status,
+//     funcss,
+//     bg,
+//     fullWidth,
+//     flat,
+//     bordered,
+//     borderless,
+//     rounded,
+//     leftRounded,
+//     rightRounded,
+//     startIcon,
+//     endIcon,
+//     prefix,
+//     suffix,
+//     iconicBg,
+//     stringPrefix,
+//     stringSuffix,
+//   };
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const final = {
+//     status: status !== undefined ? status : mergedProps.status,
+//     funcss: funcss !== undefined ? funcss : mergedProps.funcss,
+//     bg: bg !== undefined ? bg : mergedProps.bg,
+//     fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
+//     flat: flat !== undefined ? flat : mergedProps.flat,
+//     bordered: bordered !== undefined ? bordered : mergedProps.bordered,
+//     borderless: borderless !== undefined ? borderless : mergedProps.borderless,
+//     rounded: rounded !== undefined ? rounded : mergedProps.rounded,
+//     leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
+//     rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
+//     startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
+//     endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
+//     prefix: prefix !== undefined ? prefix : mergedProps.prefix,
+//     suffix: suffix !== undefined ? suffix : mergedProps.suffix,
+//     iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
+//     stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
+//     stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
+//   };
+//   // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
+//   useEffect(() => {
+//     const effectiveStringPrefix = final.stringPrefix;
+//     if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
+//       setPrefixNode(null);
+//       setHasValidStringPrefix(false);
+//       return;
+//     }
+//     getDynamicIcon(effectiveStringPrefix).then((node) => {
+//       if (node) {
+//         setPrefixNode(node);
+//         setHasValidStringPrefix(true);
+//       } else {
+//         setPrefixNode(null);
+//         setHasValidStringPrefix(false);
+//       }
+//     });
+//   }, [final.stringPrefix]);
+//   // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
+//   useEffect(() => {
+//     const effectiveStringSuffix = final.stringSuffix;
+//     if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
+//       setSuffixNode(null);
+//       setHasValidStringSuffix(false);
+//       return;
+//     }
+//     getDynamicIcon(effectiveStringSuffix).then((node) => {
+//       if (node) {
+//         setSuffixNode(node);
+//         setHasValidStringSuffix(true);
+//       } else {
+//         setSuffixNode(null);
+//         setHasValidStringSuffix(false);
+//       }
+//     });
+//   }, [final.stringSuffix]);
+//   const selectHasValue = !!selectValue;
+//   const { variant: themeVariant } = useVariant();
+//   // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
+//   const showPrefix = React.useMemo(() => {
+//     // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
+//     if (final.startIcon) return true;
+//     if (final.prefix) return true;
+//     if (hasValidStringPrefix && prefixNode) return true;
+//     return false;
+//   }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+//   // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
+//   const showSuffix = React.useMemo(() => {
+//     // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
+//     if (final.endIcon) return true;
+//     if (final.suffix) return true;
+//     if (hasValidStringSuffix && suffixNode) return true;
+//     return false;
+//   }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+//   // Get effective icons following Button's priority pattern
+//   const effectivePrefix = React.useMemo(() => {
+//     // Priority: startIcon > prefix > stringPrefix
+//     if (final.startIcon) return final.startIcon;
+//     if (final.prefix) return final.prefix;
+//     if (hasValidStringPrefix) return prefixNode;
+//     return null;
+//   }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+//   const effectiveSuffix = React.useMemo(() => {
+//     // Priority: endIcon > suffix > stringSuffix
+//     if (final.endIcon) return final.endIcon;
+//     if (final.suffix) return final.suffix;
+//     if (hasValidStringSuffix) return suffixNode;
+//     return null;
+//   }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+//   const hasNoPrefix = !effectivePrefix;
+//   const hasNoLabel = !label;
+//   const className = generateInputClasses({
+//     status: final.status,
+//     rounded: final.rounded,
+//     bg: final.bg,
+//     funcss: final.funcss,
+//     flat: final.flat,
+//     leftRounded: final.leftRounded,
+//     rightRounded: final.rightRounded,
+//     bordered: final.bordered,
+//     borderless: final.borderless,
+//     hasNoPrefix,
+//     hasNoLabel,
+//   });
+//   const style = final.fullWidth ? { width: '100%' } : undefined;
+//   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+//     const newValue = e.target.value;
+//     setSelectValue(newValue);
+//     if (onChange) onChange(e);
+//   };
+//   const handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {
+//     setIsFocused(true);
+//     if (rest.onFocus) rest.onFocus(e);
+//   };
+//   const handleBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
+//     setIsFocused(false);
+//     if (rest.onBlur) rest.onBlur(e);
+//   };
+//   const selectElement = (
+//     <select
+//       id={id}
+//       name={name}
+//       className={className}
+//       onChange={handleChange}
+//       onFocus={handleFocus}
+//       onBlur={handleBlur}
+//       defaultValue={defaultValue}
+//       value={selectValue}
+//       style={style}
+//       {...rest}
+//     >
+//       {options.map((option) => (
+//         <option key={option.value} value={option.value}>
+//           {option.text}
+//         </option>
+//       ))}
+//     </select>
+//   );
+//   // Only use iconic wrapper when we have icons, matching Button's pattern
+//   const wrappedSelect = showPrefix || showSuffix ? (
+//     <IconicInputWrapper
+//       startIcon={effectivePrefix}
+//       endIcon={effectiveSuffix}
+//       iconicBg={final.iconicBg}
+//       funcss={final.funcss}
+//       stringPrefix={stringPrefix}
+//       stringSuffix={stringSuffix}
+//     >
+//       {selectElement}
+//     </IconicInputWrapper>
+//   ) : (
+//     selectElement
+//   );
+//   return (
+//     <InputContainer
+//       startIcon={effectivePrefix}
+//       label={label}
+//       status={final.status}
+//       helperText={helperText}
+//       isFocused={isFocused}
+//       hasValue={selectHasValue}
+//       fullWidth={final.fullWidth}
+//       id={id}
+//       alwaysActiveLabel={true}
+//     >
+//       {wrappedSelect}
+//     </InputContainer>
+//   );
+// };
+// // Textarea Component - UPDATED to match pattern
+// export const TextareaInput: React.FC<TextareaProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>> = ({
+//   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 = 2,
+//   variant = '',
+//   placeholder,
+//   ...rest
+// }) => {
+//   const [isFocused, setIsFocused] = useState(false);
+//   const [textValue, setTextValue] = useState<string>(value !== undefined ? String(value) : defaultValue || '');
+//   const [prefixNode, setPrefixNode] = useState<React.ReactNode>(null);
+//   const [suffixNode, setSuffixNode] = useState<React.ReactNode>(null);
+//   const [hasValidStringPrefix, setHasValidStringPrefix] = useState(false);
+//   const [hasValidStringSuffix, setHasValidStringSuffix] = useState(false);
+//   useEffect(() => {
+//     if (value !== undefined && value !== '') {
+//       setTextValue(String(value));
+//     } else if (value === '') {
+//       setTextValue('');
+//     }
+//   }, [value]);
+//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
+//   const localProps = {
+//     status,
+//     funcss,
+//     bg,
+//     fullWidth,
+//     flat,
+//     bordered,
+//     borderless,
+//     rounded,
+//     leftRounded,
+//     rightRounded,
+//     startIcon,
+//     endIcon,
+//     prefix,
+//     suffix,
+//     iconicBg,
+//     stringPrefix,
+//     stringSuffix,
+//   };
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const final = {
+//     status: status !== undefined ? status : mergedProps.status,
+//     funcss: funcss !== undefined ? funcss : mergedProps.funcss,
+//     bg: bg !== undefined ? bg : mergedProps.bg,
+//     fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
+//     flat: flat !== undefined ? flat : mergedProps.flat,
+//     bordered: bordered !== undefined ? bordered : mergedProps.bordered,
+//     borderless: borderless !== undefined ? borderless : mergedProps.borderless,
+//     rounded: rounded !== undefined ? rounded : mergedProps.rounded,
+//     leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
+//     rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
+//     startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
+//     endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
+//     prefix: prefix !== undefined ? prefix : mergedProps.prefix,
+//     suffix: suffix !== undefined ? suffix : mergedProps.suffix,
+//     iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
+//     stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
+//     stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
+//   };
+//   // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
+//   useEffect(() => {
+//     const effectiveStringPrefix = final.stringPrefix;
+//     if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
+//       setPrefixNode(null);
+//       setHasValidStringPrefix(false);
+//       return;
+//     }
+//     getDynamicIcon(effectiveStringPrefix).then((node) => {
+//       if (node) {
+//         setPrefixNode(node);
+//         setHasValidStringPrefix(true);
+//       } else {
+//         setPrefixNode(null);
+//         setHasValidStringPrefix(false);
+//       }
+//     });
+//   }, [final.stringPrefix]);
+//   // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
+//   useEffect(() => {
+//     const effectiveStringSuffix = final.stringSuffix;
+//     if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
+//       setSuffixNode(null);
+//       setHasValidStringSuffix(false);
+//       return;
+//     }
+//     getDynamicIcon(effectiveStringSuffix).then((node) => {
+//       if (node) {
+//         setSuffixNode(node);
+//         setHasValidStringSuffix(true);
+//       } else {
+//         setSuffixNode(null);
+//         setHasValidStringSuffix(false);
+//       }
+//     });
+//   }, [final.stringSuffix]);
+//   const { variant: themeVariant } = useVariant();
+//   // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
+//   const showPrefix = React.useMemo(() => {
+//     // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
+//     if (final.startIcon) return true;
+//     if (final.prefix) return true;
+//     if (hasValidStringPrefix && prefixNode) return true;
+//     return false;
+//   }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+//   // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
+//   const showSuffix = React.useMemo(() => {
+//     // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
+//     if (final.endIcon) return true;
+//     if (final.suffix) return true;
+//     if (hasValidStringSuffix && suffixNode) return true;
+//     return false;
+//   }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+//   // Get effective icons following Button's priority pattern
+//   const effectivePrefix = React.useMemo(() => {
+//     // Priority: startIcon > prefix > stringPrefix
+//     if (final.startIcon) return final.startIcon;
+//     if (final.prefix) return final.prefix;
+//     if (hasValidStringPrefix) return prefixNode;
+//     return null;
+//   }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+//   const effectiveSuffix = React.useMemo(() => {
+//     // Priority: endIcon > suffix > stringSuffix
+//     if (final.endIcon) return final.endIcon;
+//     if (final.suffix) return final.suffix;
+//     if (hasValidStringSuffix) return suffixNode;
+//     return null;
+//   }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+//   const hasNoPrefix = !effectivePrefix;
+//   const hasNoLabel = !label;
+//   const className = generateInputClasses({
+//     status: final.status,
+//     rounded: final.rounded,
+//     bg: final.bg,
+//     funcss: final.funcss,
+//     flat: final.flat,
+//     leftRounded: final.leftRounded,
+//     rightRounded: final.rightRounded,
+//     bordered: final.bordered,
+//     borderless: final.borderless,
+//     hasNoPrefix,
+//     hasNoLabel,
+//   });
+//   const style = final.fullWidth ? { width: '100%' } : undefined;
+//   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+//     const newValue = e.target.value;
+//     setTextValue(newValue);
+//     if (onChange) onChange(e);
+//   };
+//   const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+//     setIsFocused(true);
+//     if (rest.onFocus) rest.onFocus(e);
+//   };
+//   const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+//     setIsFocused(false);
+//     if (rest.onBlur) rest.onBlur(e);
+//   };
+//   const showPlaceholder = placeholder && label && (isFocused || !!textValue);
+//   const textareaElement = (
+//     <textarea
+//       id={id}
+//       name={name}
+//       className={className}
+//       onChange={handleChange}
+//       onFocus={handleFocus}
+//       onBlur={handleBlur}
+//       defaultValue={defaultValue}
+//       placeholder={showPlaceholder ? placeholder : (!label ? placeholder : '')}
+//       style={style}
+//       value={textValue}
+//       rows={rows}
+//       {...rest}
+//     />
+//   );
+//   // Only use iconic wrapper when we have icons, matching Button's pattern
+//   const wrappedTextarea = showPrefix || showSuffix ? (
+//     <IconicInputWrapper
+//       startIcon={effectivePrefix}
+//       endIcon={effectiveSuffix}
+//       iconicBg={final.iconicBg}
+//       funcss={final.funcss}
+//       stringPrefix={stringPrefix}
+//       stringSuffix={stringSuffix}
+//     >
+//       {textareaElement}
+//     </IconicInputWrapper>
+//   ) : (
+//     textareaElement
+//   );
+//   return (
+//     <InputContainer
+//       startIcon={effectivePrefix}
+//       label={label}
+//       status={final.status}
+//       helperText={helperText}
+//       isFocused={isFocused}
+//       hasValue={!!textValue}
+//       fullWidth={final.fullWidth}
+//       id={id}
+//     >
+//       {wrappedTextarea}
+//     </InputContainer>
+//   );
+// };
+// // Main Input Component (backwards compatibility)
+// interface InputProps extends BaseInputProps {
+//   select?: boolean;
+//   multiline?: boolean;
+//   file?: boolean;
+//   noBorder?: boolean;
+//   icon?: React.ReactNode;
+//   extra?: React.ReactNode;
+//   button?: React.ReactNode;
+//   btn?: boolean;
+//   type?: string;
+//   options?: SelectOption[];
+//   rows?: number;
+// }
+// const Input: React.FC<InputProps> = ({
+//   select,
+//   multiline,
+//   file,
+//   noBorder,
+//   startIcon,
+//   endIcon,
+//   prefix,
+//   suffix,
+//   stringPrefix,
+//   stringSuffix,
+//   iconicBg,
+//   type,
+//   variant = '',
+//   ...props
+// }) => {
+//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
+//   const localProps = {
+//     ...props,
+//     startIcon,
+//     endIcon,
+//     prefix,
+//     suffix,
+//     iconicBg,
+//     stringPrefix,
+//     stringSuffix,
+//     type,
+//   };
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const inputProps = {
+//     ...props,
+//     ...mergedProps,
+//     variant,
+//     borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless),
+//     type,
+//   };
+//   if (file || type === 'file') {
+//     return <FileUpload {...inputProps} />;
+//   }
+//   if (select) {
+//     return <SelectInput {...inputProps} />;
+//   }
+//   if (multiline) {
+//     return <TextareaInput {...inputProps} />;
+//   }
+//   return <TextInput {...inputProps} />;
+// };
+// export default Input;