@pagamio/frontend-commons-lib 0.8.325 → 0.8.326

package/lib/components/ui/UploadField.d.ts

@@ -9,6 +9,8 @@ type UploadProps = {
     allowedFileTypes?: string[];
     maxFileSize?: number;
     helperText?: string;
+    /** Optional label for the inline trigger (defaults to "Choose file"). */
+    chooseFileLabel?: string;
     value?: never;
 };
 declare const UploadField: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/ui/UploadField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { Button, Icon } from '../../components';
-const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, maxFileSize, helperText, value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
+const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, maxFileSize, helperText, chooseFileLabel = 'Choose file', value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
 ...props }, ref) => {
     const [fileName, setFileName] = useState(null);
     const [key, setKey] = useState(0);
@@ -42,11 +42,11 @@ const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton
         setKey((prev) => prev + 1);
     };
     const acceptValue = allowedFileTypes?.map((ext) => `.${ext}`).join(',');
-    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: "Choose file" }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
+    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: chooseFileLabel }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
                             if (ref && typeof ref === 'object' && ref.current) {
                                 ref.current.click();
                             }
-                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && (_jsx("div", { className: "w-full", children: _jsx("p", { className: "text-sm text-muted-foreground w-full md:w-[65%]", children: helperText }) })), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
+                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && _jsx("p", { className: "text-sm text-muted-foreground", children: helperText }), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
 });
 UploadField.displayName = 'UploadField';
 export default UploadField;

package/lib/form-engine/components/inputs/upload-field/UploadFieldForm.js

@@ -53,7 +53,7 @@ const UploadFieldForm = forwardRef(({ field, error, ...props }, ref) => {
         return _jsx("span", { className: "text-muted-foreground", children: "File uploaded." });
     }, [preview, field.name]);
     const previewLabel = preview.type === 'pdf' ? 'Uploaded PDF:' : 'Uploaded Image:';
-    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-foreground", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-input rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, maxFileSize: field.maxFileSize, helperText: field.fileUploadHelperText }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-foreground", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-input rounded-md", children: previewElement })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-foreground", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-input rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, maxFileSize: field.maxFileSize, helperText: field.fileUploadHelperText, chooseFileLabel: field.chooseFileLabel }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-foreground", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-input rounded-md", children: previewElement })] }))] }));
 });
 UploadFieldForm.displayName = 'UploadFieldForm';
 export default UploadFieldForm;

package/lib/form-engine/types/index.d.ts

@@ -157,6 +157,8 @@ export interface Field {
     showFileUploadPreview?: boolean;
     /** To display file upload helper text */
     fileUploadHelperText?: string;
+    /** Custom label for the inline upload trigger (defaults to "Choose file") */
+    chooseFileLabel?: string;
     /** Default country for phone input */
     defaultCountry?: string;
     /** Disables the field */

package/lib/styles.css

@@ -6714,10 +6714,6 @@ video {
     width: 420px;
   }
 
-  .md\:w-\[65\%\] {
-    width: 65%;
-  }
-
   .md\:w-auto {
     width: auto;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.325",
+  "version": "0.8.326",
   "publishConfig": {
     "access": "public",
     "provenance": false