funuicss 3.10.4 → 3.10.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.10.4",
+  "version": "3.10.5",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/input/Input.d.ts

@@ -0,0 +1,89 @@
+import React, { ChangeEvent, FocusEvent, MouseEvent, KeyboardEvent, FormEvent } from 'react';
+interface BaseInputProps {
+    id?: string;
+    name?: string;
+    value?: any;
+    defaultValue?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onClick?: (event: MouseEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onKeyUp?: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onKeyPress?: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onSubmit?: (event: FormEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
+    multiple?: boolean;
+    accept?: string;
+    size?: number;
+    form?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    list?: string;
+    autoCapitalize?: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    autoCorrect?: 'on' | 'off';
+    spellCheck?: boolean | 'true' | 'false';
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    dirname?: string;
+    status?: 'success' | 'warning' | 'danger' | 'info';
+    funcss?: string;
+    bg?: string;
+    fullWidth?: boolean;
+    flat?: boolean;
+    bordered?: boolean;
+    borderless?: boolean;
+    rounded?: boolean;
+    leftRounded?: boolean;
+    rightRounded?: boolean;
+    startIcon?: string | React.ReactNode;
+    endIcon?: string | React.ReactNode;
+    prefix?: string | React.ReactNode;
+    suffix?: string | React.ReactNode;
+    stringPrefix?: string;
+    stringSuffix?: string;
+    iconicBg?: string;
+    variant?: string;
+    label?: string;
+    helperText?: string;
+}
+interface SelectOption {
+    value: string;
+    text?: string;
+    label?: string;
+}
+interface TextInputProps extends BaseInputProps {
+    type?: string;
+}
+interface SelectProps extends BaseInputProps {
+    options?: SelectOption[];
+}
+interface TextareaProps extends BaseInputProps {
+    rows?: number;
+    cols?: number;
+    wrap?: 'hard' | 'soft' | 'off';
+}
+export declare const TextInput: React.FC<TextInputProps>;
+export declare const SelectInput: React.FC<SelectProps>;
+export declare const TextareaInput: React.FC<TextareaProps>;
+interface InputProps extends BaseInputProps {
+    select?: boolean;
+    multiline?: boolean;
+    noBorder?: boolean;
+    type?: string;
+    options?: SelectOption[];
+    rows?: number;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/ui/input/Input.js

@@ -144,7 +144,7 @@ var InputContainer = function (_a) {
             status && statusIcons[status] && (react_1.default.createElement("span", { className: "helper-icon" }, statusIcons[status])),
             react_1.default.createElement("span", null, helperText)))));
 };
-// Text Input Component - FIXED for space key issue
+// Text Input Component
 var TextInput = function (_a) {
     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
@@ -159,7 +159,6 @@ var TextInput = function (_a) {
     var isPasswordType = type === 'password';
     (0, react_1.useEffect)(function () {
         if (value !== undefined) {
-            // CRITICAL: Preserve all characters including spaces
             setInputValue(String(value));
         }
     }, [value]);
@@ -241,9 +240,7 @@ var TextInput = function (_a) {
         if (onBlur)
             onBlur(e);
     };
-    // FIXED: Handle key events properly
     var handleKeyDown = function (e) {
-        // DO NOT prevent default for space key
         if (onKeyDown)
             onKeyDown(e);
     };
@@ -252,8 +249,6 @@ var TextInput = function (_a) {
             onKeyUp(e);
     };
     var handleKeyPress = function (e) {
-        // CRITICAL: DO NOT prevent default for any keys
-        // This allows space key to work
         if (onKeyPress)
             onKeyPress(e);
     };
@@ -269,13 +264,14 @@ var TextInput = function (_a) {
 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, 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, 
+    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, placeholder = _a.placeholder, 
     // 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"]);
+    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", "placeholder", "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 selectRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (value !== undefined) {
             setSelectValue(String(value));
@@ -322,6 +318,24 @@ var SelectInput = function (_a) {
         endIcon: endIconNode !== undefined ? endIconNode : mergedProps.endIcon,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
     };
+    // Process options to handle both text and label properties
+    var processedOptions = react_1.default.useMemo(function () {
+        // Add "No Option" as first option if options array exists and has items
+        var optionsWithDefault = [];
+        // Check if options array exists and has items
+        if (options && options.length > 0) {
+            // Add default "No Option" with empty value
+            optionsWithDefault.push({ value: '', text: 'No Option' });
+            // Map existing options to use either text or label
+            options.forEach(function (option) {
+                optionsWithDefault.push({
+                    value: option.value,
+                    text: option.text !== undefined ? option.text : (option.label || option.value)
+                });
+            });
+        }
+        return optionsWithDefault;
+    }, [options]);
     var selectHasValue = !!selectValue;
     var showPrefix = !!final.startIcon;
     var showSuffix = !!final.endIcon;
@@ -357,9 +371,25 @@ var SelectInput = function (_a) {
         if (onBlur)
             onBlur(e);
     };
+    var handleKeyDown = function (e) {
+        if (onKeyDown)
+            onKeyDown(e);
+        // Handle Tab key when input is empty
+        if (e.key === 'Tab' && !e.shiftKey && selectRef.current && !selectValue && placeholder) {
+            e.preventDefault();
+            setSelectValue(placeholder);
+            // Trigger change event
+            if (onChange) {
+                var event_1 = {
+                    target: { value: placeholder }
+                };
+                onChange(event_1);
+            }
+        }
+    };
     // Extract only valid HTML select attributes for the select element
-    var selectAttributes = __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, disabled: disabled, required: required, autoFocus: autoFocus, form: form, size: size, multiple: multiple, autoComplete: autoComplete }, rest);
-    var selectElement = (react_1.default.createElement("select", __assign({}, selectAttributes), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    var selectAttributes = __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, value: selectValue, style: style, disabled: disabled, required: required, autoFocus: autoFocus, form: form, size: size, multiple: multiple, autoComplete: autoComplete }, rest);
+    var selectElement = (react_1.default.createElement("select", __assign({ ref: selectRef }, selectAttributes), processedOptions.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
     var wrappedSelect = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: final.startIcon, endIcon: final.endIcon, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement)) : (selectElement);
     return (react_1.default.createElement(InputContainer, { startIcon: final.startIcon, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true, required: required }, wrappedSelect));