funuicss 3.6.17 → 3.6.19

package/ui/input/Input.js

@@ -114,37 +114,25 @@ 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, 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 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 || defaultValue || ''), inputValue = _f[0], setInputValue = _f[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 inputRef = (0, react_1.useRef)(null);
+    // Handle value changes - only update if value is truly defined (not empty string)
     (0, react_1.useEffect)(function () {
-        if (value !== undefined) {
-            setInputValue(value);
+        if (value !== undefined && value !== '') {
+            setInputValue(String(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);
+        else if (value === '') {
+            // Allow empty string to clear the input
+            setInputValue('');
         }
-    }, [stringSuffix]);
+    }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    var mergedProps = mergeWithLocal({
+    // Create local props object including stringPrefix/stringSuffix
+    var localProps = {
         status: status,
         funcss: funcss,
         bg: bg,
@@ -160,22 +148,67 @@ var TextInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
-    }).props;
+        stringPrefix: stringPrefix, // Include in local props
+        stringSuffix: stringSuffix,
+    };
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - local props take precedence, but handle empty strings properly
+    var 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, // Handle both local and config
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+    };
+    // Handle stringPrefix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringPrefix = final.stringPrefix;
+        if (effectiveStringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [final.stringPrefix]);
+    // Handle stringSuffix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringSuffix = final.stringSuffix;
+        if (effectiveStringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
-        status: mergedProps.status,
-        rounded: mergedProps.rounded,
-        bg: mergedProps.bg,
-        funcss: mergedProps.funcss,
-        flat: mergedProps.flat,
-        leftRounded: mergedProps.leftRounded,
-        rightRounded: mergedProps.rightRounded,
-        bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless,
+        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,
     });
-    var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
+    var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
-        setInputValue(e.target.value);
+        var newValue = e.target.value;
+        setInputValue(newValue);
         if (onChange)
             onChange(e);
     };
@@ -189,47 +222,36 @@ var TextInput = function (_a) {
         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));
+    // Determine effective icons: stringPrefix/stringSuffix take priority, then local, then config
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Show placeholder only when label is active (focused or has value)
+    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 wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, 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 }, 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, 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 _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];
+    // Handle value changes - only update if value is truly defined (not empty string)
     (0, react_1.useEffect)(function () {
-        if (value !== undefined) {
-            setSelectValue(value);
+        if (value !== undefined && value !== '') {
+            setSelectValue(String(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);
+        else if (value === '') {
+            // Allow empty string to clear the select
+            setSelectValue('');
         }
-    }, [stringSuffix]);
-    var selectHasValue = true;
+    }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    var mergedProps = mergeWithLocal({
+    // Create local props object including stringPrefix/stringSuffix
+    var localProps = {
         status: status,
         funcss: funcss,
         bg: bg,
@@ -245,22 +267,68 @@ var SelectInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
-    }).props;
+        stringPrefix: stringPrefix, // Include in local props
+        stringSuffix: stringSuffix,
+    };
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - local props take precedence, but handle empty strings properly
+    var 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, // Handle both local and config
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+    };
+    // Handle stringPrefix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringPrefix = final.stringPrefix;
+        if (effectiveStringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [final.stringPrefix]);
+    // Handle stringSuffix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringSuffix = final.stringSuffix;
+        if (effectiveStringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [final.stringSuffix]);
+    var selectHasValue = !!selectValue;
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
-        status: mergedProps.status,
-        rounded: mergedProps.rounded,
-        bg: mergedProps.bg,
-        funcss: mergedProps.funcss,
-        flat: mergedProps.flat,
-        leftRounded: mergedProps.leftRounded,
-        rightRounded: mergedProps.rightRounded,
-        bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless,
+        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,
     });
-    var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
+    var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
-        setSelectValue(e.target.value);
+        var newValue = e.target.value;
+        setSelectValue(newValue);
         if (onChange)
             onChange(e);
     };
@@ -274,45 +342,33 @@ var SelectInput = function (_a) {
         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));
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    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 wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, 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 }, 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, 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 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 || defaultValue || ''), textValue = _e[0], setTextValue = _e[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];
+    // Handle value changes - only update if value is truly defined (not empty string)
     (0, react_1.useEffect)(function () {
-        if (value !== undefined) {
-            setTextValue(value);
+        if (value !== undefined && value !== '') {
+            setTextValue(String(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);
+        else if (value === '') {
+            // Allow empty string to clear the textarea
+            setTextValue('');
         }
-    }, [stringSuffix]);
+    }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    var mergedProps = mergeWithLocal({
+    // Create local props object including stringPrefix/stringSuffix
+    var localProps = {
         status: status,
         funcss: funcss,
         bg: bg,
@@ -328,22 +384,67 @@ var TextareaInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
-    }).props;
+        stringPrefix: stringPrefix, // Include in local props
+        stringSuffix: stringSuffix,
+    };
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - local props take precedence, but handle empty strings properly
+    var 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, // Handle both local and config
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+    };
+    // Handle stringPrefix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringPrefix = final.stringPrefix;
+        if (effectiveStringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [final.stringPrefix]);
+    // Handle stringSuffix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringSuffix = final.stringSuffix;
+        if (effectiveStringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
-        status: mergedProps.status,
-        rounded: mergedProps.rounded,
-        bg: mergedProps.bg,
-        funcss: mergedProps.funcss,
-        flat: mergedProps.flat,
-        leftRounded: mergedProps.leftRounded,
-        rightRounded: mergedProps.rightRounded,
-        bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless,
+        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,
     });
-    var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
+    var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
-        setTextValue(e.target.value);
+        var newValue = e.target.value;
+        setTextValue(newValue);
         if (onChange)
             onChange(e);
     };
@@ -357,39 +458,24 @@ var TextareaInput = function (_a) {
         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));
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Show placeholder only when label is active (focused or has value)
+    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 wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, 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));
 };
 exports.TextareaInput = TextareaInput;
-// File Input Component
+// File Input Component (unchanged as it doesn't have the same value issue)
 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, 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];
     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;
-    var mergedProps = mergeWithLocal({
+    // Create local props object including stringPrefix/stringSuffix
+    var localProps = {
         status: status,
         funcss: funcss,
         bg: bg,
@@ -403,10 +489,51 @@ var FileInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
+        stringPrefix: stringPrefix, // Include in local props
+        stringSuffix: stringSuffix, // Include in local props
         bordered: rest.bordered,
         borderless: rest.borderless,
-    }).props;
-    var themeVariant = (0, theme_1.useVariant)().variant;
+    };
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - local props take precedence
+    var 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,
+        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, // Handle both local and config
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+    };
+    // Handle stringPrefix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringPrefix = final.stringPrefix;
+        if (effectiveStringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [final.stringPrefix]);
+    // Handle stringSuffix - use final value (local or config)
+    (0, react_1.useEffect)(function () {
+        var effectiveStringSuffix = final.stringSuffix;
+        if (effectiveStringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [final.stringSuffix]);
     var handleChange = function (e) {
         var _a;
         var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -416,27 +543,27 @@ var FileInput = function (_a) {
         if (onChange)
             onChange(e);
     };
-    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
-    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     if (btn) {
         var className = generateInputClasses({
-            status: mergedProps.status,
-            rounded: mergedProps.rounded,
-            bg: mergedProps.bg,
-            funcss: mergedProps.funcss,
-            flat: mergedProps.flat,
-            leftRounded: mergedProps.leftRounded,
-            rightRounded: mergedProps.rightRounded,
+            status: final.status,
+            rounded: final.rounded,
+            bg: final.bg,
+            funcss: final.funcss,
+            flat: final.flat,
+            leftRounded: final.leftRounded,
+            rightRounded: final.rightRounded,
             bordered: true,
             borderless: false,
             additionalClasses: 'filedInput'
         });
-        var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
+        var style = final.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)),
+            button || (react_1.default.createElement(Button_1.default, { funcss: final.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))));
-        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 wrappedFileInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, fileInputElement));
+        return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: final.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: final.fullWidth, id: id }, wrappedFileInput));
     }
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
@@ -450,14 +577,17 @@ var FileInput = function (_a) {
                 } }, 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))));
-    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));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: final.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: final.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, 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;
-    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) });
+    // Create local props object including stringPrefix/stringSuffix
+    var localProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg, stringPrefix: stringPrefix, // Include in local props
+        stringSuffix: stringSuffix });
+    var mergedProps = mergeWithLocal(localProps).props;
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

package/ui/theme/theme.d.ts

@@ -5,12 +5,17 @@ interface ThemeConfig {
     [key: string]: any;
 }
 interface ProjectData {
-    theme_config?: ThemeConfig;
+    theme_config?: {
+        colors?: Record<string, string>;
+        typography?: Record<string, string>;
+        [key: string]: any;
+    };
+    components?: Record<string, any>;
     default_variation?: ThemeVariant;
     name?: string;
-    colors?: any;
-    global?: any;
-    components?: any;
+    project_id?: string;
+    version?: number;
+    updated_at?: string;
 }
 interface ThemeProviderProps {
     theme: ThemeName;
@@ -37,5 +42,10 @@ declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export default ThemeProvider;
 export declare const useThemeValue: (key: string) => string | undefined;
 export declare const useComponentConfig: (componentName: string) => any;
-export declare const useColors: () => any;
-export declare const useGlobalConfig: () => any;
+export declare const useColors: () => Record<string, string>;
+export declare const useTypography: () => Record<string, string>;
+export declare const useThemeConfig: () => Record<string, any>;
+export declare const useProjectData: () => ProjectData | null;
+export declare const useColor: (colorName: string) => string | undefined;
+export declare const useTypographyValue: (property: string) => string | undefined;
+export declare const useComponentVariant: (componentName: string, variantName?: string) => any;