@fovestta2/web-react 1.1.0

package/dist/components/FvIfscField.js

@@ -0,0 +1,92 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvIfscField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvIfscField = ({ label = 'IFSC Code', value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let rawVal = e.target.value;
+        const formatted = rawVal.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
+        const truncated = formatted.substring(0, 11);
+        onChange(truncated);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "text", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvIfscField = FvIfscField;

package/dist/components/FvImageSelector.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface ImageInfo {
+    file: File | Blob;
+    url: string;
+    width: number;
+    height: number;
+    size: number;
+}
+export interface FvImageSelectorProps {
+    label?: string;
+    placeholder?: string;
+    value: ImageInfo | null;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    maxSize?: number;
+    className?: string;
+    errorClassName?: string;
+    onChange: (value: ImageInfo | null) => void;
+    onBlur?: () => void;
+}
+export declare const FvImageSelector: React.FC<FvImageSelectorProps>;

package/dist/components/FvImageSelector.js

@@ -0,0 +1,317 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvImageSelector = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvImageSelector = ({ label = '', placeholder = 'Select an image', value, schema, disabled = false, maxSize, className = '', errorClassName = '', onChange, onBlur, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isEditorOpen, setIsEditorOpen] = (0, react_1.useState)(false);
+    const [editImageSrc, setEditImageSrc] = (0, react_1.useState)(null);
+    const [editImageName, setEditImageName] = (0, react_1.useState)('');
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const minScale = 0.5;
+    const maxScale = 3;
+    const step = 0.1;
+    const [panX, setPanX] = (0, react_1.useState)(0);
+    const [panY, setPanY] = (0, react_1.useState)(0);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    // Storing start coords in refs instead of state to avoid unnecessary re-renders during drag
+    const dragStartRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const imageInputRef = (0, react_1.useRef)(null);
+    const editorImageRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    (0, react_1.useEffect)(() => {
+        const handleMouseMove = (e) => {
+            if (!isDragging)
+                return;
+            e.preventDefault();
+            setPanX(e.clientX - dragStartRef.current.x);
+            setPanY(e.clientY - dragStartRef.current.y);
+        };
+        const handleMouseUp = () => {
+            if (isDragging)
+                setIsDragging(false);
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleImageSelected = (e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (!file.type.startsWith('image/')) {
+                alert('Please select an image file');
+                if (imageInputRef.current)
+                    imageInputRef.current.value = '';
+                return;
+            }
+            if (maxSize && file.size > maxSize) {
+                alert(`Image size exceeds ${formatFileSize(maxSize)}`);
+                if (imageInputRef.current)
+                    imageInputRef.current.value = '';
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                if (ev.target && typeof ev.target.result === 'string') {
+                    setEditImageSrc(ev.target.result);
+                    setEditImageName(file.name);
+                    openEditor();
+                    if (imageInputRef.current)
+                        imageInputRef.current.value = '';
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    const openEditor = () => {
+        setIsEditorOpen(true);
+        setScale(1);
+        setPanX(0);
+        setPanY(0);
+    };
+    const closeEditor = () => {
+        setIsEditorOpen(false);
+        setEditImageSrc(null);
+    };
+    const startDrag = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartRef.current = {
+            x: e.clientX - panX,
+            y: e.clientY - panY,
+        };
+    };
+    const handleSliderChange = (e) => {
+        setScale(parseFloat(e.target.value));
+    };
+    const zoomIn = () => {
+        setScale((prev) => Math.min(prev + step, maxScale));
+    };
+    const zoomOut = () => {
+        setScale((prev) => Math.max(prev - step, minScale));
+    };
+    const resetEditor = () => {
+        setScale(1);
+        setPanX(0);
+        setPanY(0);
+    };
+    const dataURLtoBlob = (dataurl) => {
+        const arr = dataurl.split(',');
+        const match = arr[0].match(/:(.*?);/);
+        const mime = match ? match[1] : 'image/png';
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+    };
+    const applyCrop = () => {
+        if (!editorImageRef.current)
+            return;
+        const img = editorImageRef.current;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const size = 300; // Output size
+        canvas.width = size;
+        canvas.height = size;
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, size, size);
+        ctx.translate(size / 2, size / 2);
+        ctx.translate(panX, panY);
+        ctx.scale(scale, scale);
+        ctx.translate(-img.naturalWidth / 2, -img.naturalHeight / 2);
+        ctx.drawImage(img, 0, 0);
+        const dataUrl = canvas.toDataURL('image/png');
+        const blob = dataURLtoBlob(dataUrl);
+        // Approximate size, in real app would use blob size
+        const finalSize = blob.size;
+        const imageInfo = {
+            file: new File([blob], editImageName, { type: 'image/png' }),
+            url: dataUrl,
+            width: size,
+            height: size,
+            size: finalSize,
+        };
+        onChange(imageInfo);
+        if (onBlur)
+            onBlur();
+        closeEditor();
+    };
+    const openImageDialog = () => {
+        if (!disabled && imageInputRef.current) {
+            imageInputRef.current.click();
+        }
+    };
+    const removeImage = (e) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        onChange(null);
+        if (imageInputRef.current) {
+            imageInputRef.current.value = '';
+        }
+        if (onBlur)
+            onBlur();
+    };
+    const formatFileSize = (bytes) => {
+        if (bytes === undefined || bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_INVALID_IMAGE: 'Invalid image',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-image-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: "fv-label", style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("div", { className: `image-upload-box ${errorMessage ? 'error' : ''} ${disabled ? 'disabled' : ''}`, onClick: openImageDialog, style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                minHeight: '120px',
+                border: errorMessage ? '2px dashed #dc3545' : '2px dashed #8CBBA8',
+                borderRadius: '8px',
+                backgroundColor: disabled ? '#f9f9f9' : '#F6F9F8',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                transition: 'all 0.2sease',
+                position: 'relative',
+                overflow: 'hidden',
+                opacity: disabled ? 0.6 : 1
+            } }, value ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+            react_1.default.createElement("img", { src: value.url, alt: value.file instanceof File ? value.file.name : 'Image preview', style: { maxHeight: '150px', maxWidth: '100%', objectFit: 'contain' } }),
+            !disabled && (react_1.default.createElement("button", { type: "button", className: "remove-image-btn", onClick: removeImage, style: {
+                    position: 'absolute',
+                    top: '8px',
+                    right: '8px',
+                    background: 'rgba(255, 255, 255, 0.8)',
+                    border: 'none',
+                    borderRadius: '50%',
+                    width: '28px',
+                    height: '28px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    color: '#e74c3c',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                }, title: "Remove Image" }, "\u2715")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("span", { style: { fontSize: '32px', color: '#8CBBA8', marginBottom: '8px' } }, "\uD83D\uDCF8"),
+            react_1.default.createElement("span", { style: { fontSize: '14px', color: '#666', fontWeight: 500 } }, placeholder),
+            react_1.default.createElement("span", { style: { fontSize: '12px', color: '#999', marginTop: '4px' } }, maxSize ? `Max size: ${formatFileSize(maxSize)}` : 'Click to browse')))),
+        react_1.default.createElement("input", { type: "file", ref: imageInputRef, onChange: handleImageSelected, accept: "image/*", disabled: disabled, onClick: (e) => { e.stopPropagation(); }, style: { display: 'none' } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage())),
+        isEditorOpen && editImageSrc && (react_1.default.createElement("div", { className: "editor-modal-overlay", style: {
+                position: 'fixed',
+                top: 0, left: 0, right: 0, bottom: 0,
+                backgroundColor: 'rgba(0,0,0,0.8)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 9999
+            } },
+            react_1.default.createElement("div", { className: "editor-modal-content", style: {
+                    backgroundColor: '#fff',
+                    borderRadius: '12px',
+                    padding: '20px',
+                    width: '400px',
+                    maxWidth: '90%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    boxShadow: '0 10px 25px rgba(0,0,0,0.2)'
+                } },
+                react_1.default.createElement("h3", { style: { margin: '0 0 16px', fontSize: '18px', color: '#151D48', fontWeight: 600 } }, "Adjust Image"),
+                react_1.default.createElement("div", { className: "crop-area-wrapper", style: {
+                        width: '300px',
+                        height: '300px',
+                        margin: '0 auto',
+                        borderRadius: '50%', // optional: circle crop mask
+                        overflow: 'hidden',
+                        backgroundColor: '#f0f0f0',
+                        position: 'relative',
+                        cursor: isDragging ? 'grabbing' : 'grab',
+                        border: '1px solid #ddd'
+                    }, onMouseDown: startDrag },
+                    react_1.default.createElement("img", { ref: editorImageRef, src: editImageSrc, alt: "Edit Preview", draggable: false, style: {
+                            position: 'absolute',
+                            left: '50%',
+                            top: '50%',
+                            transform: `translate(-50%, -50%) translate(${panX}px, ${panY}px) scale(${scale})`,
+                            transformOrigin: 'center center',
+                            pointerEvents: 'none', // let wrapper handle mouse events
+                        } })),
+                react_1.default.createElement("div", { className: "editor-controls", style: { marginTop: '20px', display: 'flex', flexDirection: 'column', gap: '16px' } },
+                    react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
+                        react_1.default.createElement("button", { type: "button", onClick: zoomOut, style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: '#555' } }, "-"),
+                        react_1.default.createElement("input", { type: "range", min: minScale, max: maxScale, step: step, value: scale, onChange: handleSliderChange, style: { flex: 1 } }),
+                        react_1.default.createElement("button", { type: "button", onClick: zoomIn, style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: '#555' } }, "+")),
+                    react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', marginTop: '8px' } },
+                        react_1.default.createElement("button", { type: "button", onClick: resetEditor, style: { padding: '8px 16px', background: '#f5f5f5', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', color: '#555', fontSize: '14px' } }, "Reset"),
+                        react_1.default.createElement("div", { style: { display: 'flex', gap: '8px' } },
+                            react_1.default.createElement("button", { type: "button", onClick: closeEditor, style: { padding: '8px 16px', background: 'none', border: 'none', cursor: 'pointer', color: '#666', fontSize: '14px', fontWeight: 500 } }, "Cancel"),
+                            react_1.default.createElement("button", { type: "button", onClick: applyCrop, style: { padding: '8px 24px', background: '#4CAF50', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '14px', fontWeight: 500 } }, "Apply")))))))));
+};
+exports.FvImageSelector = FvImageSelector;

package/dist/components/FvMicrField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvMicrFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvMicrField: React.FC<FvMicrFieldProps>;

package/dist/components/FvMicrField.js

@@ -0,0 +1,92 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvMicrField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvMicrField = ({ label = 'MICR Code', value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let rawVal = e.target.value;
+        const numericValue = rawVal.replace(/[^0-9]/g, '');
+        const truncatedValue = numericValue.substring(0, 9);
+        onChange(truncatedValue);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "text", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvMicrField = FvMicrField;

package/dist/components/FvMonthYearField.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvMonthYearFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    min?: string;
+    max?: string;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvMonthYearField: React.FC<FvMonthYearFieldProps>;