funuicss 3.7.1 → 3.7.3

package/ui/input/FileUpload.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface FileUploadProps {
+    id?: string;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onDrop?: (files: FileList) => void;
+    status?: 'success' | 'warning' | 'danger' | 'info' | '';
+    label?: string;
+    helperText?: string;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    button?: React.ReactNode;
+    btn?: boolean;
+    value?: any;
+    fullWidth?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    [key: string]: any;
+}
+export declare const FileUpload: React.FC<FileUploadProps & React.InputHTMLAttributes<HTMLInputElement>>;
+export default FileUpload;

package/ui/input/FileUpload.js

@@ -0,0 +1,235 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUpload = void 0;
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+var Button_1 = __importDefault(require("../button/Button"));
+var Text_1 = __importDefault(require("../text/Text"));
+var FileUpload = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, onDrop = _a.onDrop, status = _a.status, _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.fullWidth, fullWidth = _d === void 0 ? true : _d, accept = _a.accept, multiple = _a.multiple, rest = __rest(_a, ["id", "name", "onChange", "onDrop", "status", "label", "helperText", "icon", "extra", "button", "btn", "value", "fullWidth", "accept", "multiple"]);
+    var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
+    var _f = (0, react_1.useState)(false), isDragging = _f[0], setIsDragging = _f[1];
+    var _g = (0, react_1.useState)(false), isDragOver = _g[0], setIsDragOver = _g[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var handleChange = function (e) {
+        var files = e.target.files;
+        if (files && files.length > 0) {
+            var file = files[0];
+            setFileName(file.name);
+        }
+        if (onChange)
+            onChange(e);
+    };
+    var handleDragEnter = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+        setIsDragOver(true);
+    };
+    var handleDragLeave = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        // Only set dragging to false if we're leaving the actual drop zone
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragging(false);
+        }
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        setIsDragOver(false);
+        var files = e.dataTransfer.files;
+        if (files && files.length > 0) {
+            var file = files[0];
+            setFileName(file.name);
+            // Update the input element's files
+            if (inputRef.current) {
+                var dataTransfer = new DataTransfer();
+                for (var i = 0; i < files.length; i++) {
+                    dataTransfer.items.add(files[i]);
+                }
+                inputRef.current.files = dataTransfer.files;
+                // Trigger onChange if provided
+                if (onChange) {
+                    var event_1 = {
+                        target: inputRef.current,
+                        currentTarget: inputRef.current,
+                    };
+                    onChange(event_1);
+                }
+            }
+            // Call onDrop callback if provided
+            if (onDrop) {
+                onDrop(files);
+            }
+        }
+    };
+    var handleClick = function () {
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    // Enhanced drag and drop styles
+    var getContainerStyles = function () {
+        var baseStyles = {
+            border: '0.17rem dashed var(--borderColor)',
+            borderRadius: '16px',
+            padding: 'var(--space-5)',
+            textAlign: 'center',
+            transition: 'all 0.3s ease',
+            cursor: 'pointer',
+            margin: 'auto',
+            color: 'var(--text-color)',
+            position: 'relative',
+        };
+        if (isDragOver) {
+            return __assign(__assign({}, baseStyles), { borderColor: 'var(--primary)', backgroundColor: 'var(--lighter)', transform: 'scale(1.02)', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)' });
+        }
+        if (isDragging) {
+            return __assign(__assign({}, baseStyles), { borderColor: 'var(--primary600)', backgroundColor: 'var(--lighter)' });
+        }
+        return baseStyles;
+    };
+    var getButtonStyles = function () {
+        if (isDragOver) {
+            return {
+                opacity: 0.8,
+                transform: 'scale(1.05)',
+                transition: 'all 0.2s ease',
+                backgroundColor: 'var(--primary600)',
+            };
+        }
+        return {};
+    };
+    // Render file info when file is selected
+    var renderFileInfo = function () {
+        if (!fileName)
+            return null;
+        return (react_1.default.createElement("div", { className: "file-info", style: {
+                marginTop: 'var(--space-3)',
+                padding: 'var(--space-3)',
+                backgroundColor: 'var(--light)',
+                borderRadius: '8px',
+                border: '1px solid var(--borderColor)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-3)',
+                justifyContent: 'center'
+            } },
+            react_1.default.createElement(pi_1.PiFile, { style: { color: 'var(--primary)', fontSize: '1.2rem' } }),
+            react_1.default.createElement(Text_1.default, { text: fileName, truncate: 1, block: true, size: 'sm' })));
+    };
+    if (btn) {
+        return (react_1.default.createElement("div", { className: "fileInput", style: { width: fullWidth ? '100%' : 'fit-content' } },
+            button || (react_1.default.createElement("div", { onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, style: { position: 'relative' } },
+                react_1.default.createElement(Button_1.default, { startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: isDragOver ? "primary600" : "primary", fullWidth: fullWidth, raised: true, style: getButtonStyles() }, isDragOver ? 'Drop files here' : fileName || label))),
+            react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, onChange: handleChange, type: "file", value: value, accept: accept, multiple: multiple, className: "filedInput" }, rest)),
+            renderFileInfo(),
+            helperText && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : ''), style: { marginTop: 'var(--space-3)' } },
+                react_1.default.createElement("span", null, helperText)))));
+    }
+    return (react_1.default.createElement("div", { className: "_upload_container", style: getContainerStyles(), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick },
+        react_1.default.createElement("div", { className: "_upload_label" },
+            react_1.default.createElement("div", { className: "_upload_icon", style: {
+                    fontSize: '2.4rem',
+                    color: isDragOver ? 'var(--primary600)' : 'var(--primary)',
+                    marginBottom: '0.5rem',
+                    transition: 'color 0.3s ease',
+                    transform: isDragOver ? 'translateY(-2px)' : 'none'
+                } }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
+            react_1.default.createElement("div", { className: "_upload_text fit" },
+                react_1.default.createElement(Text_1.default, { text: isDragOver ? 'Drop files to upload' : fileName || label, truncate: 1, block: true, style: {
+                        color: isDragOver ? 'var(--primary600)' : 'var(--text-color)',
+                        fontWeight: isDragOver ? '600' : '400'
+                    } })),
+            isDragOver && (react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: 'var(--primary)',
+                    opacity: 0.1,
+                    borderRadius: '14px',
+                    pointerEvents: 'none'
+                } })),
+            !fileName && !isDragOver && (react_1.default.createElement("div", { style: {
+                    marginTop: 'var(--space-3)',
+                    fontSize: '0.8rem',
+                    color: 'var(--text-muted)',
+                    opacity: 0.7
+                } }, "Click or drag files to upload")),
+            extra && react_1.default.createElement("div", { className: "text-small opacity-3", style: { marginTop: 'var(--space-2)' } }, extra)),
+        react_1.default.createElement("input", __assign({ ref: inputRef, onChange: handleChange, type: "file", id: id, name: name, className: "_upload_input", value: value, accept: accept, multiple: multiple }, rest)),
+        renderFileInfo(),
+        helperText && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : ''), style: { marginTop: 'var(--space-3)' } },
+            react_1.default.createElement("span", null, helperText)))));
+};
+exports.FileUpload = FileUpload;
+exports.default = exports.FileUpload;

package/ui/input/Input.d.ts

@@ -39,16 +39,9 @@ interface SelectProps extends BaseInputProps {
 interface TextareaProps extends BaseInputProps {
     rows?: number;
 }
-interface FileInputProps extends BaseInputProps {
-    icon?: React.ReactNode;
-    extra?: React.ReactNode;
-    button?: React.ReactNode;
-    btn?: boolean;
-}
 export declare const TextInput: React.FC<TextInputProps & React.InputHTMLAttributes<HTMLInputElement>>;
 export declare const SelectInput: React.FC<SelectProps & React.SelectHTMLAttributes<HTMLSelectElement>>;
 export declare const TextareaInput: React.FC<TextareaProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
-export declare const FileInput: React.FC<FileInputProps & React.InputHTMLAttributes<HTMLInputElement>>;
 interface InputProps extends BaseInputProps {
     select?: boolean;
     multiline?: boolean;

package/ui/input/Input.js

@@ -55,17 +55,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = exports.TextareaInput = exports.SelectInput = exports.TextInput = void 0;
+exports.TextareaInput = exports.SelectInput = exports.TextInput = void 0;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
-var Button_1 = __importDefault(require("../button/Button"));
 var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+var FileUpload_1 = require("./FileUpload"); // Import the FileUpload component
 // Status icons mapping
 var statusIcons = {
     success: react_1.default.createElement(pi_1.PiCheckCircle, null),
@@ -104,9 +101,9 @@ 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.isSelect, isSelect = _b === void 0 ? false : _b;
-    // For select inputs, label is always active
-    var showFloatingLabel = label && (isSelect || isFocused || hasValue);
+    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;
+    // For select inputs and date/time inputs, label is always active
+    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)),
@@ -123,6 +120,8 @@ var TextInput = function (_a) {
     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);
+    // Check if this is a date/time input type for always active label
+    var isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
     // Handle value changes - only update if value is truly defined (not empty string)
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
@@ -238,7 +237,7 @@ var TextInput = function (_a) {
     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));
+    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));
 };
 exports.TextInput = TextInput;
 // Select Component
@@ -362,7 +361,7 @@ var SelectInput = function (_a) {
     };
     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, isSelect: 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 }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
@@ -490,142 +489,23 @@ var TextareaInput = function (_a) {
     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 (updated with no_prefix and no_label logic)
-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];
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Create local props object including stringPrefix/stringSuffix
-    var localProps = {
-        status: status,
-        funcss: funcss,
-        bg: bg,
-        fullWidth: fullWidth,
-        flat: flat,
-        rounded: rounded,
-        leftRounded: leftRounded,
-        rightRounded: rightRounded,
-        startIcon: startIcon,
-        endIcon: endIcon,
-        prefix: prefix,
-        suffix: suffix,
-        iconicBg: iconicBg,
-        stringPrefix: stringPrefix, // Include in local props
-        stringSuffix: stringSuffix, // Include in local props
-        bordered: rest.bordered,
-        borderless: rest.borderless,
-    };
-    // 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];
-        if (file) {
-            setFileName(file.name);
-        }
-        if (onChange)
-            onChange(e);
-    };
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
-    // Check if there's no start icon or prefix
-    var hasNoPrefix = !effectivePrefix;
-    // Check if there's no label (file inputs typically don't have labels in the same way)
-    var hasNoLabel = true; // File inputs use their own label system
-    if (btn) {
-        var className = generateInputClasses({
-            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',
-            hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
-            hasNoLabel: hasNoLabel,
-        });
-        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: 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: 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" },
-            react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
-            react_1.default.createElement("div", { className: "_upload_text", style: {
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    display: 'inline-block',
-                    width: '100%',
-                } }, fileName || label),
-            extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
-        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
-    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 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, type = _a.type, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "variant"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     // 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 localProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg, stringPrefix: stringPrefix, stringSuffix: stringSuffix, type: type });
     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) });
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless), type: type });
+    // If type is file or file prop is true, use FileUpload component
+    if (file || type === 'file') {
+        return react_1.default.createElement(FileUpload_1.FileUpload, __assign({}, inputProps));
+    }
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }
     if (multiline) {
         return react_1.default.createElement(exports.TextareaInput, __assign({}, inputProps));
     }
-    if (file) {
-        return react_1.default.createElement(exports.FileInput, __assign({}, inputProps));
-    }
     return react_1.default.createElement(exports.TextInput, __assign({}, inputProps));
 };
 exports.default = Input;

package/ui/richtext/RichText.js

@@ -118,7 +118,7 @@ var RichText = function (_a) {
             react_1.default.createElement(Flex_1.default, { justify: "space-between", gap: 1, alignItems: "center", width: "100%" },
                 (showEmojis || afterEmoji) ? (react_1.default.createElement("div", null,
                     react_1.default.createElement(Flex_1.default, { width: "100%", gap: 0.5, alignItems: "center" },
-                        showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
+                        showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
                                 react_1.default.createElement(Circle_1.default, { size: 2, funcss: "bg border" },
                                     react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
                                 react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [

package/ui/specials/Circle.d.ts

@@ -10,7 +10,8 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     raised?: boolean;
     bordered?: boolean;
     key?: React.Key;
+    style?: React.CSSProperties;
     onClick?: () => void;
 }
-export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, ...rest }: Circle_Props): React.JSX.Element;
+export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, style, ...rest }: Circle_Props): React.JSX.Element;
 export {};

package/ui/specials/Circle.js

@@ -59,10 +59,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered"]);
-    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: {
-            width: "".concat(size + "rem" || '2.3rem'),
-            height: "".concat(size + "rem" || '2.3rem'),
-        }, key: key, onClick: onClick }, rest),
+    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, style = _a.style, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered", "style"]);
+    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: __assign({ width: "".concat(size + "rem" || '2.3rem'), height: "".concat(size + "rem" || '2.3rem') }, style), key: key, onClick: onClick }, rest),
         React.createElement(React.Fragment, null, children)));
 }