funuicss 3.8.7 → 3.8.9

package/ui/input/FileUpload.js

@@ -66,15 +66,19 @@ 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 _e = (0, react_1.useState)([]), fileNames = _e[0], setFileNames = _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);
+            // Store all file names
+            var names = Array.from(files).map(function (file) { return file.name; });
+            setFileNames(names);
+        }
+        else {
+            setFileNames([]);
         }
         if (onChange)
             onChange(e);
@@ -89,7 +93,6 @@ var FileUpload = function (_a) {
         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);
         }
@@ -106,8 +109,8 @@ var FileUpload = function (_a) {
         setIsDragOver(false);
         var files = e.dataTransfer.files;
         if (files && files.length > 0) {
-            var file = files[0];
-            setFileName(file.name);
+            var names = Array.from(files).map(function (file) { return file.name; });
+            setFileNames(names);
             // Update the input element's files
             if (inputRef.current) {
                 var dataTransfer = new DataTransfer();
@@ -124,7 +127,6 @@ var FileUpload = function (_a) {
                     onChange(event_1);
                 }
             }
-            // Call onDrop callback if provided
             if (onDrop) {
                 onDrop(files);
             }
@@ -167,9 +169,9 @@ var FileUpload = function (_a) {
         }
         return {};
     };
-    // Render file info when file is selected
+    // Render file info when files are selected
     var renderFileInfo = function () {
-        if (!fileName)
+        if (fileNames.length === 0)
             return null;
         return (react_1.default.createElement("div", { className: "file-info", style: {
                 marginTop: 'var(--space-3)',
@@ -178,18 +180,56 @@ var FileUpload = function (_a) {
                 borderRadius: '8px',
                 border: '1px solid var(--borderColor)',
                 display: 'flex',
-                alignItems: 'center',
-                gap: 'var(--space-3)',
-                justifyContent: 'center'
+                flexDirection: 'column',
+                gap: 'var(--space-2)',
+                alignItems: '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' })));
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-2)' } },
+                react_1.default.createElement(pi_1.PiFiles, { style: { color: 'var(--primary)', fontSize: '1.2rem' } }),
+                react_1.default.createElement(Text_1.default, { text: "".concat(fileNames.length, " file").concat(fileNames.length !== 1 ? 's' : '', " selected"), truncate: 1, block: true, size: 'sm', bold: true })),
+            fileNames.length > 0 && (react_1.default.createElement("div", { style: {
+                    maxHeight: '100px',
+                    overflowY: 'auto',
+                    width: '100%',
+                    textAlign: 'left',
+                    padding: '0 var(--space-2)'
+                } }, fileNames.map(function (name, index) { return (react_1.default.createElement("div", { key: index, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 'var(--space-2)',
+                    padding: 'var(--space-1) 0',
+                    borderBottom: index < fileNames.length - 1 ? '1px solid var(--borderColor)' : 'none'
+                } },
+                react_1.default.createElement(pi_1.PiFile, { style: { color: 'var(--secondary)', fontSize: '0.9rem' } }),
+                react_1.default.createElement(Text_1.default, { text: name, truncate: 1, block: true, size: 'xs', color: 'secondary' }))); })))));
+    };
+    // Get display text based on number of files
+    var getDisplayText = function () {
+        if (isDragOver)
+            return 'Drop files to upload';
+        if (fileNames.length === 0)
+            return label;
+        if (fileNames.length === 1)
+            return fileNames[0];
+        return "".concat(fileNames.length, " files selected");
     };
     if (btn) {
-        return (react_1.default.createElement("div", { className: "fileInput", style: { width: fullWidth ? '100%' : 'fit-content' } },
+        return (react_1.default.createElement("div", { className: "fileInput", style: {
+                width: fullWidth ? '100%' : 'fit-content',
+                position: 'relative'
+            } },
             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)),
+                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' : getDisplayText()))),
+            react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, onChange: handleChange, type: "file", accept: accept, multiple: multiple, className: "filedInput", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    opacity: 0,
+                    cursor: 'pointer',
+                    zIndex: 1
+                } }, 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)))));
@@ -204,7 +244,7 @@ var FileUpload = function (_a) {
                     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: {
+                react_1.default.createElement(Text_1.default, { text: isDragOver ? 'Drop files to upload' : getDisplayText(), truncate: 1, block: true, style: {
                         color: isDragOver ? 'var(--primary600)' : 'var(--text-color)',
                         fontWeight: isDragOver ? '600' : '400'
                     } })),
@@ -219,17 +259,326 @@ var FileUpload = function (_a) {
                     borderRadius: '14px',
                     pointerEvents: 'none'
                 } })),
-            !fileName && !isDragOver && (react_1.default.createElement("div", { style: {
+            !fileNames.length && !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")),
+                } }, multiple ? 'Click or drag multiple files to upload' : 'Click or drag a file 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)),
+        react_1.default.createElement("input", __assign({ ref: inputRef, onChange: handleChange, type: "file", id: id, name: name, className: "_upload_input", accept: accept, multiple: multiple, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                opacity: 0,
+                cursor: 'pointer',
+                zIndex: 1
+            } }, 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;
+// 'use client'
+// import React, { useState, useRef } from 'react';
+// import { PiCloudArrowUp, PiFile } from 'react-icons/pi';
+// import Button from '../button/Button';
+// import Text from '../text/Text';
+// 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 const FileUpload: React.FC<FileUploadProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
+//   id = 'fileInput',
+//   name,
+//   onChange,
+//   onDrop,
+//   status,
+//   label = 'Upload File',
+//   helperText,
+//   icon,
+//   extra,
+//   button,
+//   btn,
+//   value,
+//   fullWidth = true,
+//   accept,
+//   multiple,
+//   ...rest
+// }) => {
+//   const [fileName, setFileName] = useState('');
+//   const [isDragging, setIsDragging] = useState(false);
+//   const [isDragOver, setIsDragOver] = useState(false);
+//   const inputRef = useRef<HTMLInputElement>(null);
+//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     const files = e.target.files;
+//     if (files && files.length > 0) {
+//       const file = files[0];
+//       setFileName(file.name);
+//     }
+//     if (onChange) onChange(e);
+//   };
+//   const handleDragEnter = (e: React.DragEvent) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     setIsDragging(true);
+//     setIsDragOver(true);
+//   };
+//   const handleDragLeave = (e: React.DragEvent) => {
+//     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 as Node)) {
+//       setIsDragging(false);
+//     }
+//   };
+//   const handleDragOver = (e: React.DragEvent) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     setIsDragOver(true);
+//   };
+//   const handleDrop = (e: React.DragEvent) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     setIsDragging(false);
+//     setIsDragOver(false);
+//     const files = e.dataTransfer.files;
+//     if (files && files.length > 0) {
+//       const file = files[0];
+//       setFileName(file.name);
+//       // Update the input element's files
+//       if (inputRef.current) {
+//         const dataTransfer = new DataTransfer();
+//         for (let i = 0; i < files.length; i++) {
+//           dataTransfer.items.add(files[i]);
+//         }
+//         inputRef.current.files = dataTransfer.files;
+//         // Trigger onChange if provided
+//         if (onChange) {
+//           const event = {
+//             target: inputRef.current,
+//             currentTarget: inputRef.current,
+//           } as React.ChangeEvent<HTMLInputElement>;
+//           onChange(event);
+//         }
+//       }
+//       // Call onDrop callback if provided
+//       if (onDrop) {
+//         onDrop(files);
+//       }
+//     }
+//   };
+//   const handleClick = () => {
+//     if (inputRef.current) {
+//       inputRef.current.click();
+//     }
+//   };
+//   // Enhanced drag and drop styles
+//   const getContainerStyles = () => {
+//     const baseStyles = {
+//       border: '0.17rem dashed var(--borderColor)',
+//       borderRadius: '16px',
+//       padding: 'var(--space-5)',
+//       textAlign: 'center' as const,
+//       transition: 'all 0.3s ease',
+//       cursor: 'pointer',
+//       margin: 'auto',
+//       color: 'var(--text-color)',
+//       position: 'relative' as const,
+//     };
+//     if (isDragOver) {
+//       return {
+//         ...baseStyles,
+//         borderColor: 'var(--primary)',
+//         backgroundColor: 'var(--lighter)',
+//         transform: 'scale(1.02)',
+//         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+//       };
+//     }
+//     if (isDragging) {
+//       return {
+//         ...baseStyles,
+//         borderColor: 'var(--primary600)',
+//         backgroundColor: 'var(--lighter)',
+//       };
+//     }
+//     return baseStyles;
+//   };
+//   const getButtonStyles = () => {
+//     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
+//   const renderFileInfo = () => {
+//     if (!fileName) return null;
+//     return (
+//       <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'
+//       }}>
+//         <PiFile style={{ color: 'var(--primary)', fontSize: '1.2rem' }} />
+//         <Text 
+//           text={fileName} 
+//           truncate={1} 
+//           block 
+//           size='sm'
+//         />
+//       </div>
+//     );
+//   };
+//   if (btn) {
+//     return (
+//       <div className="fileInput" style={{ width: fullWidth ? '100%' : 'fit-content' }}>
+//         {button || (
+//           <div
+//             onDragEnter={handleDragEnter}
+//             onDragLeave={handleDragLeave}
+//             onDragOver={handleDragOver}
+//             onDrop={handleDrop}
+//             onClick={handleClick}
+//             style={{ position: 'relative' }}
+//           >
+//             <Button
+//               startIcon={icon || <PiCloudArrowUp />}
+//               bg={isDragOver ? "primary600" : "primary"}
+//               fullWidth={fullWidth}
+//               raised
+//               style={getButtonStyles()}
+//             >
+//               {isDragOver ? 'Drop files here' : fileName || label}
+//             </Button>
+//           </div>
+//         )}
+//         <input
+//           ref={inputRef}
+//           id={id}
+//           name={name}
+//           onChange={handleChange}
+//           type="file"
+//           value={value}
+//           accept={accept}
+//           multiple={multiple}
+//           className="filedInput"
+//           {...rest}
+//         />
+//         {renderFileInfo()}
+//         {helperText && (
+//           <div className={`input-helper-text ${status ? `helper-${status}` : ''}`} style={{ marginTop: 'var(--space-3)' }}>
+//             <span>{helperText}</span>
+//           </div>
+//         )}
+//       </div>
+//     );
+//   }
+//   return (
+//     <div 
+//       className="_upload_container"
+//       style={getContainerStyles()}
+//       onDragEnter={handleDragEnter}
+//       onDragLeave={handleDragLeave}
+//       onDragOver={handleDragOver}
+//       onDrop={handleDrop}
+//       onClick={handleClick}
+//     >
+//       <div className="_upload_label">
+//         <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 || <PiCloudArrowUp />}
+//         </div>
+//         <div className="_upload_text fit">
+//           <Text
+//             text={isDragOver ? 'Drop files to upload' : fileName || label}
+//             truncate={1}
+//             block
+//             style={{ 
+//               color: isDragOver ? 'var(--primary600)' : 'var(--text-color)',
+//               fontWeight: isDragOver ? '600' : '400'
+//             }}
+//           />
+//         </div>
+//         {/* Drag overlay indicator */}
+//         {isDragOver && (
+//           <div style={{
+//             position: 'absolute',
+//             top: 0,
+//             left: 0,
+//             right: 0,
+//             bottom: 0,
+//             backgroundColor: 'var(--primary)',
+//             opacity: 0.1,
+//             borderRadius: '14px',
+//             pointerEvents: 'none'
+//           }} />
+//         )}
+//         {/* Drag hint text */}
+//         {!fileName && !isDragOver && (
+//           <div style={{
+//             marginTop: 'var(--space-3)',
+//             fontSize: '0.8rem',
+//             color: 'var(--text-muted)',
+//             opacity: 0.7
+//           }}>
+//             Click or drag files to upload
+//           </div>
+//         )}
+//         {extra && <div className="text-small opacity-3" style={{ marginTop: 'var(--space-2)' }}>{extra}</div>}
+//       </div>
+//       <input
+//         ref={inputRef}
+//         onChange={handleChange}
+//         type="file"
+//         id={id}
+//         name={name}
+//         className="_upload_input"
+//         value={value}
+//         accept={accept}
+//         multiple={multiple}
+//         {...rest}
+//       />
+//       {renderFileInfo()}
+//       {helperText && (
+//         <div className={`input-helper-text ${status ? `helper-${status}` : ''}`} style={{ marginTop: 'var(--space-3)' }}>
+//           <span>{helperText}</span>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// export default FileUpload;

package/ui/input/Input.d.ts

@@ -1,11 +1,43 @@
-import React from 'react';
+import React, { ChangeEvent, FocusEvent, MouseEvent, KeyboardEvent, FormEvent } from 'react';
 interface BaseInputProps {
     id?: string;
     name?: string;
     value?: any;
     defaultValue?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    status?: 'success' | 'warning' | 'danger' | 'info' | '';
+    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;
@@ -15,10 +47,10 @@ interface BaseInputProps {
     rounded?: boolean;
     leftRounded?: boolean;
     rightRounded?: boolean;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    prefix?: React.ReactNode;
-    suffix?: React.ReactNode;
+    startIcon?: string | React.ReactNode;
+    endIcon?: string | React.ReactNode;
+    prefix?: string | React.ReactNode;
+    suffix?: string | React.ReactNode;
     stringPrefix?: string;
     stringSuffix?: string;
     iconicBg?: string;
@@ -38,19 +70,16 @@ interface SelectProps extends BaseInputProps {
 }
 interface TextareaProps extends BaseInputProps {
     rows?: number;
+    cols?: number;
+    wrap?: 'hard' | 'soft' | 'off';
 }
-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 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;
-    file?: boolean;
     noBorder?: boolean;
-    icon?: React.ReactNode;
-    extra?: React.ReactNode;
-    button?: React.ReactNode;
-    btn?: boolean;
     type?: string;
     options?: SelectOption[];
     rows?: number;