@pagamio/frontend-commons-lib 0.8.348 → 0.8.350

package/lib/auth/components/LoginPage.d.ts

@@ -82,6 +82,11 @@ export interface UsernamePinLoginConfig {
     tabLabel?: string;
     /** Optional label for the password tab (default: 'Email & Password') */
     passwordTabLabel?: string;
+    /**
+     * Optional handler for the "Forgot PIN?" CTA shown beneath the
+     * Operator ID step. When omitted, the CTA is hidden.
+     */
+    onForgotPin?: () => void;
 }
 /**
  * Base login credentials interface that can be extended for specific implementations

package/lib/auth/components/LoginPage.js

@@ -360,7 +360,7 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                                         setPhoneStep('enterPhone');
                                         setPhonePinValue('');
                                         setPhoneError(null);
-                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] }))] })), activeTab === 'username' && showUsernameTab && (_jsxs("div", { className: "space-y-4", children: [usernameError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: usernameError }), usernameStep === 'enterLoginNumber' && (_jsx(FormEngine, { fields: loginNumberField, onSubmit: handleLoginNumberFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: "Continue", onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { loginNumber: '' } })), usernameStep === 'enterPin' && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter your 4-digit PIN for ", _jsx("span", { className: "font-medium text-foreground", children: loginNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "PIN" }), _jsx(OtpInput, { length: 4, value: loginNumberPinValue, onChange: (v) => {
+                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] }))] })), activeTab === 'username' && showUsernameTab && (_jsxs("div", { className: "space-y-4", children: [usernameError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: usernameError }), usernameStep === 'enterLoginNumber' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginNumberField, onSubmit: handleLoginNumberFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: "Continue", onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { loginNumber: '' } }), (hasCreateAccount || usernamePinConfig?.onForgotPin) && (_jsxs("div", { className: "flex items-center justify-center gap-4 mt-2", children: [usernamePinConfig?.onForgotPin && (_jsx(Button, { type: "button", variant: "link", onClick: usernamePinConfig.onForgotPin, className: "text-sm text-primary hover:underline", children: "Forgot PIN?" })), hasCreateAccount && usernamePinConfig?.onForgotPin && (_jsx("span", { className: "text-muted-foreground select-none", children: "|" })), hasCreateAccount && (_jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel }))] }))] })), usernameStep === 'enterPin' && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter your 4-digit PIN for ", _jsx("span", { className: "font-medium text-foreground", children: loginNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "PIN" }), _jsx(OtpInput, { length: 4, value: loginNumberPinValue, onChange: (v) => {
                                                 setLoginNumberPinValue(v);
                                                 setUsernameError(null);
                                             }, disabled: isLoggingInWithUsername })] }), _jsx(Button, { type: "button", onClick: handleLoginWithUsername, disabled: loginNumberPinValue.length !== 4 || isLoggingInWithUsername, className: "w-full", size: "lg", children: isLoggingInWithUsername ? 'Signing in...' : 'Sign In' }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => {

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

@@ -13,6 +13,12 @@ export interface ImageUploaderProps {
     showPreview?: boolean;
     value?: string;
     onChange?: (url: string | null) => void;
+    /**
+     * When true (default) the image is resized to 1920×1920 and converted
+     * to WebP before upload — correct for photos. Set false for assets that
+     * must keep their exact bytes/dimensions
+     */
+    processImage?: boolean;
 }
 declare const ImageUploader: React.FC<ImageUploaderProps>;
 export default ImageUploader;

package/lib/components/ui/ImageUploader.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image as ImageIcon, Loader2, Upload, X } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Button, cn, useToast } from '../..';
 import { useImageUpload } from '../../shared/hooks/useImageUpload';
 import { Progress } from './Progress';
+const PHOTO_FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+const RAW_FILE_TYPES = ['image/png', 'image/svg+xml', 'image/webp', 'image/x-icon', 'image/vnd.microsoft.icon'];
 const ImageUploader = ({ project, env, endpoint, onUploadSuccess, onError, className, disabled = false, maxFileSize = 5 * 1024 * 1024, // 5MB default
-acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], placeholder = 'Click to upload or drag and drop an image', showPreview = true, value, onChange, }) => {
+acceptedFileTypes, placeholder = 'Click to upload or drag and drop an image', showPreview = true, value, onChange, processImage = true, }) => {
+    const resolvedFileTypes = useMemo(() => acceptedFileTypes ?? (processImage ? PHOTO_FILE_TYPES : RAW_FILE_TYPES), [acceptedFileTypes, processImage]);
     const [previewUrl, setPreviewUrl] = useState(value || null);
     const [isUploading, setIsUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
     const [error, setError] = useState(null);
     const { addToast } = useToast();
-    const { uploadFile } = useImageUpload({ project, env, endpoint });
+    const { uploadFile } = useImageUpload({ project, env, endpoint, processImage });
     const handleFileUpload = async (file) => {
         if (disabled)
             return;
@@ -21,8 +24,8 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         setUploadProgress(0);
         try {
             // Validate file type
-            if (!acceptedFileTypes.includes(file.type)) {
-                throw new Error(`File type not supported. Accepted types: ${acceptedFileTypes.join(', ')}`);
+            if (!resolvedFileTypes.includes(file.type)) {
+                throw new Error(`File type not supported. Accepted types: ${resolvedFileTypes.join(', ')}`);
             }
             // Validate file size
             if (file.size > maxFileSize) {
@@ -76,10 +79,10 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         if (file) {
             handleFileUpload(file);
         }
-    }, [disabled, acceptedFileTypes, maxFileSize]);
+    }, [disabled, resolvedFileTypes, maxFileSize]);
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         onDrop,
-        accept: acceptedFileTypes.reduce((acc, type) => {
+        accept: resolvedFileTypes.reduce((acc, type) => {
             acc[type] = [];
             return acc;
         }, {}),
@@ -91,6 +94,6 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         setError(null);
         onChange?.(null);
     };
-    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-border" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-input rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-muted-foreground', isDragActive && 'border-primary bg-primary/10', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-primary" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-muted-foreground" })), _jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Supported formats: ", acceptedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
+    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-border" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-input rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-muted-foreground', isDragActive && 'border-primary bg-primary/10', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-primary" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-muted-foreground" })), _jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Supported formats: ", resolvedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
 };
 export default ImageUploader;

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.348",
+  "version": "0.8.350",
   "publishConfig": {
     "access": "public",
     "provenance": false