funuicss 3.6.15 → 3.6.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/css/fun.css +556 -419
  2. package/package.json +1 -1
  3. package/ui/card/Card.js +12 -10
  4. package/ui/input/Input.d.ts +5 -5
  5. package/ui/input/Input.js +127 -39
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.6.15",
2
+ "version": "3.6.16",
3
3
  "name": "funuicss",
4
4
  "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
5
5
  "main": "index.js",
package/ui/card/Card.js CHANGED
@@ -36,6 +36,7 @@ var componentUtils_1 = require("../../utils/componentUtils");
36
36
  var Button_1 = __importDefault(require("../button/Button"));
37
37
  var Flex_1 = __importDefault(require("../flex/Flex"));
38
38
  var Text_1 = __importDefault(require("../text/Text"));
39
+ var View_1 = __importDefault(require("../view/View"));
39
40
  function Card(_a) {
40
41
  var
41
42
  // Original Props
@@ -210,14 +211,15 @@ function Card(_a) {
210
211
  mergedProps.image,
211
212
  " ",
212
213
  mergedProps.fab ? mergedProps.fab : '') : ''),
213
- hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, EnhancedTextContent)) : (mergedProps.header && !mergedProps.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : ''),
214
- mergedProps.body ?
215
- react_1.default.createElement("div", null,
216
- mergedProps.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : '',
217
- react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(mergedProps.body)),
218
- mergedProps.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : '')
219
- : '',
220
- mergedProps.children && (react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, renderContent(mergedProps.children))),
221
- hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass },
222
- react_1.default.createElement(CTAButtons, null))) : (mergedProps.footer && !mergedProps.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : '')));
214
+ react_1.default.createElement(View_1.default, { funcss: hasImageContent ? 'p' : '' },
215
+ hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, EnhancedTextContent)) : (mergedProps.header && !mergedProps.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : ''),
216
+ mergedProps.body ?
217
+ react_1.default.createElement("div", null,
218
+ mergedProps.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : '',
219
+ react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(mergedProps.body)),
220
+ mergedProps.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : '')
221
+ : '',
222
+ mergedProps.children && (react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, renderContent(mergedProps.children))),
223
+ hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass },
224
+ react_1.default.createElement(CTAButtons, null))) : (mergedProps.footer && !mergedProps.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : ''))));
223
225
  }
package/ui/input/Input.d.ts CHANGED
@@ -5,7 +5,7 @@ interface BaseInputProps {
5
5
  value?: any;
6
6
  defaultValue?: string;
7
7
  onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
8
- status?: 'success' | 'warning' | 'danger' | '';
8
+ status?: 'success' | 'warning' | 'danger' | 'info' | '';
9
9
  funcss?: string;
10
10
  bg?: string;
11
11
  fullWidth?: boolean;
@@ -17,8 +17,12 @@ interface BaseInputProps {
17
17
  rightRounded?: boolean;
18
18
  startIcon?: React.ReactNode;
19
19
  endIcon?: React.ReactNode;
20
+ prefix?: React.ReactNode;
21
+ suffix?: React.ReactNode;
20
22
  iconicBg?: string;
21
23
  variant?: string;
24
+ label?: string;
25
+ helperText?: string;
22
26
  }
23
27
  interface SelectOption {
24
28
  value: string;
@@ -26,17 +30,14 @@ interface SelectOption {
26
30
  }
27
31
  interface TextInputProps extends BaseInputProps {
28
32
  type?: string;
29
- label?: string;
30
33
  }
31
34
  interface SelectProps extends BaseInputProps {
32
35
  options?: SelectOption[];
33
36
  }
34
37
  interface TextareaProps extends BaseInputProps {
35
- label?: string;
36
38
  rows?: number;
37
39
  }
38
40
  interface FileInputProps extends BaseInputProps {
39
- label?: string;
40
41
  icon?: React.ReactNode;
41
42
  extra?: React.ReactNode;
42
43
  button?: React.ReactNode;
@@ -56,7 +57,6 @@ interface InputProps extends BaseInputProps {
56
57
  button?: React.ReactNode;
57
58
  btn?: boolean;
58
59
  type?: string;
59
- label?: string;
60
60
  options?: SelectOption[];
61
61
  rows?: number;
62
62
  }
package/ui/input/Input.js CHANGED
@@ -65,6 +65,13 @@ var pi_1 = require("react-icons/pi");
65
65
  var Button_1 = __importDefault(require("../button/Button"));
66
66
  var theme_1 = require("../theme/theme");
67
67
  var componentUtils_1 = require("../../utils/componentUtils");
68
+ // Status icons mapping
69
+ var statusIcons = {
70
+ success: react_1.default.createElement(pi_1.PiCheckCircle, null),
71
+ warning: react_1.default.createElement(pi_1.PiWarning, null),
72
+ danger: react_1.default.createElement(pi_1.PiX, null),
73
+ info: react_1.default.createElement(pi_1.PiInfo, null)
74
+ };
68
75
  // Utility function to generate CSS classes
69
76
  var generateInputClasses = function (_a) {
70
77
  var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
@@ -76,26 +83,47 @@ var generateInputClasses = function (_a) {
76
83
  var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
77
84
  return "\n ".concat(statusClass, "\n ").concat(roundedClass, "\n ").concat(bgClass, "\n ").concat(funcss || '', "\n ").concat(flatClass, "\n ").concat(cornerClass, "\n ").concat(borderClass, "\n ").concat(additionalClasses, "\n input\n ").trim().replace(/\s+/g, ' ');
78
85
  };
79
- // Iconic Input Wrapper Component
86
+ // Iconic Input Wrapper Component - Updated to support both prefix/suffix and startIcon/endIcon
80
87
  var IconicInputWrapper = function (_a) {
81
- var startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
82
- if (!startIcon && !endIcon) {
88
+ var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
89
+ // Use prefix/suffix if provided, otherwise fall back to startIcon/endIcon
90
+ var effectiveStartIcon = prefix !== undefined ? prefix : startIcon;
91
+ var effectiveEndIcon = suffix !== undefined ? suffix : endIcon;
92
+ if (!effectiveStartIcon && !effectiveEndIcon) {
83
93
  return react_1.default.createElement(react_1.default.Fragment, null, children);
84
94
  }
85
- return (react_1.default.createElement("div", { className: "icon-container ".concat(funcss || '') },
86
- startIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
95
+ return (react_1.default.createElement("div", { className: "icon-container ".concat(effectiveStartIcon ? 'has-left-icon' : '', " ").concat(funcss || '') },
96
+ effectiveStartIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
87
97
  backgroundColor: iconicBg || '',
88
98
  border: iconicBg ? "0.1rem ".concat(iconicBg, " solid") : '',
89
- } }, startIcon)),
90
- react_1.default.createElement("div", { className: "icon_input_wrapper ".concat(startIcon ? 'lefticon' : '', " ").concat(endIcon ? 'righticon' : '') }, children),
91
- endIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, endIcon))));
99
+ } }, effectiveStartIcon)),
100
+ children,
101
+ effectiveEndIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, effectiveEndIcon))));
102
+ };
103
+ // Input Container with Floating Label
104
+ var InputContainer = function (_a) {
105
+ 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;
106
+ var showFloatingLabel = label && (isFocused || hasValue);
107
+ return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
108
+ react_1.default.createElement("div", { className: "input-container-with-label" },
109
+ 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)),
110
+ children),
111
+ (helperText || status) && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : '') },
112
+ status && statusIcons[status] && (react_1.default.createElement("span", { className: "helper-icon" }, statusIcons[status])),
113
+ react_1.default.createElement("span", null, helperText)))));
92
114
  };
93
115
  // Text Input Component
94
116
  var TextInput = function (_a) {
95
- var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "type", "label", "variant"]);
96
- // Use the component config hook
117
+ 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, 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", "iconicBg", "type", "label", "helperText", "variant"]);
118
+ var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
119
+ var _f = (0, react_1.useState)(value || defaultValue || ''), inputValue = _f[0], setInputValue = _f[1];
120
+ var inputRef = (0, react_1.useRef)(null);
121
+ (0, react_1.useEffect)(function () {
122
+ if (value !== undefined) {
123
+ setInputValue(value);
124
+ }
125
+ }, [value]);
97
126
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
98
- // Merge config with local props - local props override config
99
127
  var mergedProps = mergeWithLocal({
100
128
  status: status,
101
129
  funcss: funcss,
@@ -109,9 +137,10 @@ var TextInput = function (_a) {
109
137
  rightRounded: rightRounded,
110
138
  startIcon: startIcon,
111
139
  endIcon: endIcon,
140
+ prefix: prefix,
141
+ suffix: suffix,
112
142
  iconicBg: iconicBg,
113
143
  }).props;
114
- // Use theme variant for fallback
115
144
  var themeVariant = (0, theme_1.useVariant)().variant;
116
145
  var className = generateInputClasses({
117
146
  status: mergedProps.status,
@@ -125,16 +154,39 @@ var TextInput = function (_a) {
125
154
  borderless: mergedProps.borderless,
126
155
  });
127
156
  var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
128
- var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest, mergedProps)));
129
- return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
157
+ var handleChange = function (e) {
158
+ setInputValue(e.target.value);
159
+ if (onChange)
160
+ onChange(e);
161
+ };
162
+ var handleFocus = function (e) {
163
+ setIsFocused(true);
164
+ if (rest.onFocus)
165
+ rest.onFocus(e);
166
+ };
167
+ var handleBlur = function (e) {
168
+ setIsFocused(false);
169
+ if (rest.onBlur)
170
+ rest.onBlur(e);
171
+ };
172
+ 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)));
173
+ var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
174
+ return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedInput));
130
175
  };
131
176
  exports.TextInput = TextInput;
132
177
  // Select Component
133
178
  var SelectInput = function (_a) {
134
- var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "options", "variant"]);
135
- // Use the component config hook
179
+ 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, 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", "iconicBg", "options", "label", "helperText", "variant"]);
180
+ var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
181
+ var _e = (0, react_1.useState)(value || defaultValue || ''), selectValue = _e[0], setSelectValue = _e[1];
182
+ (0, react_1.useEffect)(function () {
183
+ if (value !== undefined) {
184
+ setSelectValue(value);
185
+ }
186
+ }, [value]);
187
+ // For select inputs, label should always be active when there's a label
188
+ var selectHasValue = true; // Always true for select to keep label at top
136
189
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
137
- // Merge config with local props
138
190
  var mergedProps = mergeWithLocal({
139
191
  status: status,
140
192
  funcss: funcss,
@@ -148,9 +200,10 @@ var SelectInput = function (_a) {
148
200
  rightRounded: rightRounded,
149
201
  startIcon: startIcon,
150
202
  endIcon: endIcon,
203
+ prefix: prefix,
204
+ suffix: suffix,
151
205
  iconicBg: iconicBg,
152
206
  }).props;
153
- // Use theme variant for fallback
154
207
  var themeVariant = (0, theme_1.useVariant)().variant;
155
208
  var className = generateInputClasses({
156
209
  status: mergedProps.status,
@@ -164,16 +217,37 @@ var SelectInput = function (_a) {
164
217
  borderless: mergedProps.borderless,
165
218
  });
166
219
  var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
167
- var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest, mergedProps), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
168
- return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
220
+ var handleChange = function (e) {
221
+ setSelectValue(e.target.value);
222
+ if (onChange)
223
+ onChange(e);
224
+ };
225
+ var handleFocus = function (e) {
226
+ setIsFocused(true);
227
+ if (rest.onFocus)
228
+ rest.onFocus(e);
229
+ };
230
+ var handleBlur = function (e) {
231
+ setIsFocused(false);
232
+ if (rest.onBlur)
233
+ rest.onBlur(e);
234
+ };
235
+ 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)); })));
236
+ var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
237
+ return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedSelect));
169
238
  };
170
239
  exports.SelectInput = SelectInput;
171
240
  // Textarea Component
172
241
  var TextareaInput = function (_a) {
173
- var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "rows", "variant"]);
174
- // Use the component config hook
242
+ 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, 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", "iconicBg", "label", "helperText", "rows", "variant"]);
243
+ var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
244
+ var _e = (0, react_1.useState)(value || defaultValue || ''), textValue = _e[0], setTextValue = _e[1];
245
+ (0, react_1.useEffect)(function () {
246
+ if (value !== undefined) {
247
+ setTextValue(value);
248
+ }
249
+ }, [value]);
175
250
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
176
- // Merge config with local props
177
251
  var mergedProps = mergeWithLocal({
178
252
  status: status,
179
253
  funcss: funcss,
@@ -187,9 +261,10 @@ var TextareaInput = function (_a) {
187
261
  rightRounded: rightRounded,
188
262
  startIcon: startIcon,
189
263
  endIcon: endIcon,
264
+ prefix: prefix,
265
+ suffix: suffix,
190
266
  iconicBg: iconicBg,
191
267
  }).props;
192
- // Use theme variant for fallback
193
268
  var themeVariant = (0, theme_1.useVariant)().variant;
194
269
  var className = generateInputClasses({
195
270
  status: mergedProps.status,
@@ -203,17 +278,31 @@ var TextareaInput = function (_a) {
203
278
  borderless: mergedProps.borderless,
204
279
  });
205
280
  var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
206
- var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest, mergedProps)));
207
- return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
281
+ var handleChange = function (e) {
282
+ setTextValue(e.target.value);
283
+ if (onChange)
284
+ onChange(e);
285
+ };
286
+ var handleFocus = function (e) {
287
+ setIsFocused(true);
288
+ if (rest.onFocus)
289
+ rest.onFocus(e);
290
+ };
291
+ var handleBlur = function (e) {
292
+ setIsFocused(false);
293
+ if (rest.onBlur)
294
+ rest.onBlur(e);
295
+ };
296
+ 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)));
297
+ var wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
298
+ return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedTextarea));
208
299
  };
209
300
  exports.TextareaInput = TextareaInput;
210
301
  // File Input Component
211
302
  var FileInput = function (_a) {
212
- var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "icon", "extra", "button", "btn", "value", "variant"]);
303
+ 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, 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", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
213
304
  var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
214
- // Use the component config hook
215
305
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
216
- // Merge config with local props
217
306
  var mergedProps = mergeWithLocal({
218
307
  status: status,
219
308
  funcss: funcss,
@@ -225,11 +314,12 @@ var FileInput = function (_a) {
225
314
  rightRounded: rightRounded,
226
315
  startIcon: startIcon,
227
316
  endIcon: endIcon,
317
+ prefix: prefix,
318
+ suffix: suffix,
228
319
  iconicBg: iconicBg,
229
320
  bordered: rest.bordered,
230
321
  borderless: rest.borderless,
231
322
  }).props;
232
- // Use theme variant for fallback
233
323
  var themeVariant = (0, theme_1.useVariant)().variant;
234
324
  var handleChange = function (e) {
235
325
  var _a;
@@ -256,8 +346,9 @@ var FileInput = function (_a) {
256
346
  var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
257
347
  var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
258
348
  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)),
259
- react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest, mergedProps))));
260
- return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
349
+ react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest))));
350
+ var wrappedFileInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
351
+ return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, wrappedFileInput));
261
352
  }
262
353
  var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
263
354
  react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
@@ -270,17 +361,14 @@ var FileInput = function (_a) {
270
361
  width: '100%',
271
362
  } }, fileName || label),
272
363
  extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
273
- react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest, mergedProps))));
274
- return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, uploadElement));
364
+ react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
365
+ return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, uploadElement));
275
366
  };
276
367
  exports.FileInput = FileInput;
277
368
  var Input = function (_a) {
278
- var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "iconicBg", "variant"]);
279
- // Use the component config hook for the main Input component
369
+ 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, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "iconicBg", "variant"]);
280
370
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
281
- // Merge config with local props
282
- var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg })).props;
283
- // Handle legacy noBorder prop
371
+ var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg })).props;
284
372
  var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
285
373
  if (select) {
286
374
  return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));