@fovestta2/web-react 1.1.0

package/dist/components/FvDocumentField.js

@@ -0,0 +1,242 @@
+"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.FvDocumentField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvDocumentField = ({ label = 'Document', placeholder = 'Upload', value, schema, disabled = false, accept = 'application/pdf,image/*', maxSize, className = '', errorClassName = '', onChange, onBlur, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [showPreview, setShowPreview] = (0, react_1.useState)(false);
+    const [previewUrl, setPreviewUrl] = (0, react_1.useState)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    // Handle URL revocations when previewUrl changes or component unmounts
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (previewUrl && previewUrl.startsWith('blob:')) {
+                URL.revokeObjectURL(previewUrl);
+            }
+        };
+    }, [previewUrl]);
+    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 handleFileChange = (e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (maxSize && file.size > maxSize) {
+                setErrorMessage('ERR_FILE_SIZE');
+                if (fileInputRef.current)
+                    fileInputRef.current.value = '';
+                return;
+            }
+            const fileInfo = {
+                file: file,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
+            onChange(fileInfo);
+            if (fileInputRef.current)
+                fileInputRef.current.value = '';
+            if (onBlur)
+                onBlur();
+        }
+    };
+    const openFileDialog = () => {
+        if (!disabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const removeFile = (e) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        onChange(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+        if (onBlur)
+            onBlur();
+    };
+    const viewFile = (e) => {
+        e.stopPropagation();
+        if (!value)
+            return;
+        const type = value.type || '';
+        const isImage = type.startsWith('image/');
+        const isPdf = type === 'application/pdf' || (typeof value.file === 'string' && value.file.toLowerCase().endsWith('.pdf'));
+        if (isPdf) {
+            downloadFile(); // Using download behavior for PDF mimicking Angular
+        }
+        else if (isImage) {
+            openPreview(value);
+        }
+        else {
+            downloadFile();
+        }
+    };
+    const openPreview = (fileInfo) => {
+        if (typeof fileInfo.file === 'string') {
+            setPreviewUrl(fileInfo.file);
+        }
+        else {
+            const url = URL.createObjectURL(fileInfo.file);
+            setPreviewUrl(url);
+        }
+        setShowPreview(true);
+    };
+    const closePreview = () => {
+        setShowPreview(false);
+        if (previewUrl && previewUrl.startsWith('blob:')) {
+            URL.revokeObjectURL(previewUrl);
+        }
+        setPreviewUrl(null);
+    };
+    const downloadFile = () => {
+        if (!value)
+            return;
+        let url;
+        const name = value.name || 'document';
+        if (typeof value.file === 'string') {
+            url = value.file;
+        }
+        else {
+            url = URL.createObjectURL(value.file);
+        }
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = name;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        if (typeof value.file !== 'string') {
+            setTimeout(() => URL.revokeObjectURL(url), 100);
+        }
+    };
+    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_FILE: 'Invalid file',
+            ERR_FILE_SIZE: 'File size exceeds limit',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-document-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: `document-upload-box ${errorMessage ? 'error' : ''} ${disabled ? 'disabled' : ''}`, onClick: openFileDialog, style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '12px 16px',
+                border: errorMessage ? '1px dashed #dc3545' : '1px dashed #8CBBA8',
+                borderRadius: '8px',
+                backgroundColor: disabled ? '#f9f9f9' : '#F6F9F8',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                transition: 'all 0.2sease',
+                opacity: disabled ? 0.6 : 1
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, overflow: 'hidden' } },
+                react_1.default.createElement("span", { className: "doc-icon", style: { fontSize: '24px', marginRight: '12px' } }, "\uD83D\uDCC4"),
+                react_1.default.createElement("div", { className: "doc-info", style: { display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' } }, value ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: "doc-name", style: { fontSize: '14px', fontWeight: 500, color: '#1f2b41', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.name),
+                    value.size ? (react_1.default.createElement("span", { className: "doc-size", style: { fontSize: '12px', color: '#666' } }, formatFileSize(value.size))) : null)) : (react_1.default.createElement("span", { className: "placeholder-text", style: { fontSize: '14px', color: '#888' } }, placeholder)))),
+            value && !disabled && (react_1.default.createElement("div", { className: "doc-actions", style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                react_1.default.createElement("button", { type: "button", className: "action-btn view-btn", onClick: viewFile, title: "View / Download", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, "\uD83D\uDC41"),
+                react_1.default.createElement("button", { type: "button", className: "action-btn remove-btn", onClick: removeFile, title: "Remove", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', color: '#e74c3c', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, "\u2715")))),
+        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: accept, 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())),
+        showPreview && previewUrl && (react_1.default.createElement("div", { className: "preview-modal-overlay", onClick: closePreview, style: {
+                position: 'fixed',
+                top: 0, left: 0, right: 0, bottom: 0,
+                backgroundColor: 'rgba(0,0,0,0.7)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 9999
+            } },
+            react_1.default.createElement("div", { className: "preview-modal-content", onClick: (e) => e.stopPropagation(), style: {
+                    position: 'relative',
+                    maxWidth: '90%',
+                    maxHeight: '90%',
+                    backgroundColor: '#fff',
+                    padding: '10px',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    flexDirection: 'column'
+                } },
+                react_1.default.createElement("button", { className: "close-preview-btn", onClick: closePreview, style: {
+                        position: 'absolute',
+                        top: '-15px',
+                        right: '-15px',
+                        background: '#e74c3c',
+                        color: '#fff',
+                        border: 'none',
+                        borderRadius: '50%',
+                        width: '30px',
+                        height: '30px',
+                        cursor: 'pointer',
+                        fontWeight: 'bold',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
+                    } }, "\u00D7"),
+                react_1.default.createElement("img", { src: previewUrl, alt: "Preview", style: {
+                        maxWidth: '100%',
+                        maxHeight: 'calc(90vh - 40px)',
+                        objectFit: 'contain'
+                    } }))))));
+};
+exports.FvDocumentField = FvDocumentField;

package/dist/components/FvDropdown.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface DropdownOption {
+    label: string;
+    value: string | number;
+}
+export interface DropdownGroup {
+    label: string;
+    items: DropdownOption[];
+}
+export interface DropdownViewItem {
+    isGroupLabel: boolean;
+    label: string;
+    value?: string | number;
+    option?: DropdownOption;
+    isChild?: boolean;
+}
+export interface FvDropdownProps {
+    label?: string;
+    placeholder?: string;
+    options: (DropdownOption | DropdownGroup)[];
+    value: string | number | null | undefined;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string | number) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvDropdown: React.FC<FvDropdownProps>;

package/dist/components/FvDropdown.js

@@ -0,0 +1,346 @@
+"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.FvDropdown = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvDropdown = ({ label = '', placeholder = 'Select an option', options = [], value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(-1);
+    const containerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    // Helper type guards
+    const isGroup = (item) => {
+        return 'items' in item && Array.isArray(item.items);
+    };
+    const findOption = (val) => {
+        for (const item of options) {
+            if (isGroup(item)) {
+                const found = item.items.find(opt => opt.value === val);
+                if (found)
+                    return found;
+            }
+            else {
+                if (item.value === val)
+                    return item;
+            }
+        }
+        return undefined;
+    };
+    const generateViewItems = (opts, term) => {
+        const result = [];
+        const lowerTerm = term ? term.toLowerCase() : '';
+        for (const item of opts) {
+            if (isGroup(item)) {
+                let matchingItems = [...item.items];
+                if (lowerTerm) {
+                    matchingItems = item.items.filter(opt => opt.label.toLowerCase().includes(lowerTerm));
+                }
+                if (matchingItems.length > 0) {
+                    result.push({ isGroupLabel: true, label: item.label });
+                    matchingItems.forEach(opt => {
+                        result.push({ isGroupLabel: false, label: opt.label, value: opt.value, option: opt, isChild: true });
+                    });
+                }
+            }
+            else {
+                if (!lowerTerm || item.label.toLowerCase().includes(lowerTerm)) {
+                    result.push({ isGroupLabel: false, label: item.label, value: item.value, option: item, isChild: false });
+                }
+            }
+        }
+        return result;
+    };
+    const filterOptions = (term) => {
+        const nextOpts = generateViewItems(options, term);
+        setFilteredOptions(nextOpts);
+        if (nextOpts.length === 1 && !nextOpts[0].isGroupLabel) {
+            setHighlightedIndex(0);
+        }
+        else {
+            setHighlightedIndex(-1);
+        }
+    };
+    // Sync initial and prop changes
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+        const selected = findOption(value);
+        if (selected) {
+            setSearchText(selected.label);
+        }
+        else if (!value) {
+            setSearchText('');
+        }
+    }, [value, options, schema]);
+    // Click outside to close
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                if (isOpen) {
+                    closeDropdown();
+                    if (onBlur)
+                        onBlur();
+                }
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, value, options]);
+    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 openDropdown = () => {
+        if (disabled)
+            return;
+        setIsOpen(true);
+        if (onFocus)
+            onFocus();
+        const viewItems = generateViewItems(options, searchText);
+        setFilteredOptions(viewItems);
+        if (value) {
+            const idx = viewItems.findIndex(v => !v.isGroupLabel && v.value === value);
+            if (idx >= 0)
+                setHighlightedIndex(idx);
+        }
+        else if (viewItems.length === 1 && !viewItems[0].isGroupLabel) {
+            setHighlightedIndex(0);
+        }
+        else {
+            setHighlightedIndex(-1);
+        }
+    };
+    const closeDropdown = () => {
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        // Restore label
+        const selected = findOption(value);
+        if (selected) {
+            setSearchText(selected.label);
+        }
+        else {
+            if (!value)
+                setSearchText('');
+        }
+        validateValue(value);
+    };
+    const toggleDropdown = () => {
+        var _a;
+        if (disabled)
+            return;
+        if (!isOpen) {
+            openDropdown();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            closeDropdown();
+        }
+    };
+    const handleSearchChange = (e) => {
+        const term = e.target.value;
+        setSearchText(term);
+        filterOptions(term);
+        if (!isOpen)
+            openDropdown();
+    };
+    const selectOption = (viewItem) => {
+        var _a;
+        if (viewItem.isGroupLabel || viewItem.value === undefined)
+            return;
+        onChange(viewItem.value);
+        setSearchText(viewItem.label);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        if (onBlur)
+            onBlur();
+    };
+    const scrollToHighlighted = (index) => {
+        if (!listRef.current)
+            return;
+        const items = listRef.current.querySelectorAll('li');
+        const item = items[index];
+        if (item) {
+            const listRect = listRef.current.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            if (itemRect.bottom > listRect.bottom) {
+                listRef.current.scrollTop += (itemRect.bottom - listRect.bottom);
+            }
+            else if (itemRect.top < listRect.top) {
+                listRef.current.scrollTop -= (listRect.top - itemRect.top);
+            }
+        }
+    };
+    const moveHighlight = (step) => {
+        let nextIndex = highlightedIndex;
+        const len = filteredOptions.length;
+        if (len === 0)
+            return;
+        for (let i = 0; i < len; i++) {
+            nextIndex = (nextIndex + step + len) % len;
+            if (!filteredOptions[nextIndex].isGroupLabel) {
+                setHighlightedIndex(nextIndex);
+                scrollToHighlighted(nextIndex);
+                return;
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (!isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')) {
+            openDropdown();
+            e.preventDefault();
+            return;
+        }
+        if (!isOpen)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                moveHighlight(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                moveHighlight(-1);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+                    selectOption(filteredOptions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+            case 'Tab':
+                closeDropdown();
+                break;
+        }
+    };
+    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_VALUE: 'Invalid selection',
+            ERR_DUPLICATE: 'This selection already exists',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: `fv-dropdown-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column', position: 'relative' }, onKeyDown: handleKeyDown },
+        label && (react_1.default.createElement("label", { className: `fv-dropdown-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("div", { className: `fv-dropdown-control ${errorMessage ? 'fv-dropdown-error' : ''}`, style: {
+                display: 'flex',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                position: 'relative'
+            }, onClick: (e) => {
+                var _a;
+                if (disabled)
+                    return;
+                const target = e.target;
+                if (target.tagName !== 'INPUT' && target.tagName !== 'BUTTON') {
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    if (!isOpen)
+                        openDropdown();
+                }
+            } },
+            react_1.default.createElement("input", { ref: inputRef, type: "text", className: `fv-dropdown-input ${inputClassName}`, value: searchText, onChange: handleSearchChange, onFocus: openDropdown, disabled: disabled, placeholder: placeholder, style: {
+                    flex: 1,
+                    padding: '10px',
+                    border: 'none',
+                    background: 'transparent',
+                    outline: 'none',
+                    fontSize: '14px',
+                    color: '#333',
+                    ...((disabled) ? { opacity: 0.6 } : {})
+                } }),
+            react_1.default.createElement("button", { type: "button", onClick: toggleDropdown, disabled: disabled, className: "fv-dropdown-arrow", style: {
+                    padding: '0 10px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                } },
+                react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#666", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' } },
+                    react_1.default.createElement("polyline", { points: "6 9 12 15 18 9" })))),
+        isOpen && (react_1.default.createElement("ul", { ref: listRef, className: "fv-dropdown-options", style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                marginTop: '4px',
+                padding: '0',
+                margin: '4px 0 0 0',
+                listStyle: 'none',
+                backgroundColor: '#fff',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                maxHeight: '250px',
+                overflowY: 'auto',
+                zIndex: 1000
+            } }, filteredOptions.length === 0 ? (react_1.default.createElement("li", { style: { padding: '10px', textAlign: 'center', color: '#999', fontSize: '14px' } }, "No options found")) : (filteredOptions.map((item, index) => {
+            if (item.isGroupLabel) {
+                return (react_1.default.createElement("li", { key: `group-${index}`, style: { padding: '8px 10px', fontWeight: 'bold', backgroundColor: '#f9f9f9', fontSize: '13px', color: '#666', borderBottom: '1px solid #eee' } }, item.label));
+            }
+            const isSelected = item.value === value;
+            const isHighlighted = highlightedIndex === index;
+            return (react_1.default.createElement("li", { key: `opt-${index}`, className: "fv-dropdown-option", onClick: (e) => { e.stopPropagation(); selectOption(item); }, onMouseEnter: () => setHighlightedIndex(index), style: {
+                    padding: '10px 10px 10px',
+                    paddingLeft: item.isChild ? '24px' : '10px',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    backgroundColor: isHighlighted ? '#f0f7ff' : (isSelected ? '#e6f2ff' : '#fff'),
+                    color: isSelected ? '#007bff' : '#333',
+                    fontWeight: isSelected ? 500 : 400,
+                    borderBottom: '1px solid #fafafa'
+                } }, item.label));
+        })))),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvDropdown = FvDropdown;

package/dist/components/FvEmailField.d.ts

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