@serhiibudianskyi/wui 0.0.1

package/dist/src/components/Field.d.ts

@@ -0,0 +1,9 @@
+import { UseFormRegisterReturn, Control } from 'react-hook-form';
+import type { Field as FieldType } from '../types/Field';
+interface FieldProps {
+    field: FieldType;
+    register: UseFormRegisterReturn;
+    control: Control<any>;
+}
+export default function Field({ field, register, control, }: FieldProps): JSX.Element;
+export {};

package/dist/src/components/Field.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useController } from 'react-hook-form';
+import Select from 'react-select';
+import AsyncSelect from 'react-select/async';
+import CreatableSelect from 'react-select/creatable';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import FileField from './FileField';
+export default function Field({ field, register, control, }) {
+    const containerClasses = [];
+    // Get field state from react-hook-form
+    const { field: controllerField, fieldState } = useController({
+        name: field.name,
+        control
+    });
+    // Base properties for the input element
+    const baseProps = {
+        ...register,
+        type: field.type,
+        id: field.name,
+        name: field.name,
+        placeholder: field.placeholder,
+        readOnly: field.isReadOnly,
+        disabled: field.isDisabled,
+        required: field.isRequired,
+        min: field.min,
+        max: field.max,
+        className: '',
+        ...field.attrs
+    };
+    // Adjust properties based on field type
+    switch (field.type) {
+        case 'async-select':
+        case 'async-creatable-select':
+            baseProps.loadOptions = field.loadOptions;
+        // fallthrough
+        case 'creatable-select':
+        case 'select':
+            baseProps.className = 'form-control';
+            baseProps.options = field.options;
+            baseProps.value = field.isMultiple ?
+                (Array.isArray(controllerField.value) ? controllerField.value : []) :
+                (controllerField.value ?? null);
+            baseProps.onChange = (option) => {
+                let value;
+                if (field.isMultiple) {
+                    value = option ? option : [];
+                }
+                else {
+                    value = option ? option : null;
+                }
+                controllerField.onChange(value);
+            };
+            baseProps.styles = {
+                container: (base) => ({
+                    ...base,
+                    padding: 0
+                }),
+                control: (base) => ({
+                    ...base,
+                    border: 'none',
+                    boxShadow: 'none'
+                })
+            };
+            break;
+        case 'file':
+            baseProps.className = 'form-control';
+            baseProps.accept = field.accept;
+            baseProps.isMultiple = field.isMultiple;
+            if (!baseProps.isMultiple) {
+                containerClasses.push('col-auto');
+            }
+            baseProps.maxFiles = field.maxFiles;
+            baseProps.maxSize = field.maxSize;
+            baseProps.onChange = (fileIds) => {
+                controllerField.onChange(fileIds);
+            };
+            break;
+        case 'radio':
+        case 'checkbox':
+            baseProps.className = 'form-check-input';
+            containerClasses.push('mx-2', 'form-check', 'form-switch');
+            break;
+        case 'number':
+            baseProps.step = field.step;
+        // fallthrough
+        case 'date':
+        case 'datetime-local':
+        case 'time':
+            containerClasses.push('col-auto');
+        // fallthrough
+        case 'text':
+        case 'email':
+        case 'password':
+        default:
+            baseProps.className = 'form-control';
+            // Override onChange to include string normalization on real-time input
+            baseProps.onInput = async (event) => {
+                // Apply normalization
+                const normalizedValue = field.getNormalizedValue(event.target.value);
+                event.target.value = normalizedValue;
+                // Call the original onChange
+                return register.onChange(event);
+            };
+            break;
+    }
+    // Add validation classes
+    if (fieldState.error) {
+        baseProps.className += ' is-invalid';
+    }
+    else if (!baseProps.className.includes('form-check-input') && (fieldState.isTouched || fieldState.isDirty)) {
+        baseProps.className += ' is-valid';
+    }
+    // Render the label for the field
+    const renderLabel = () => (_jsxs("label", { htmlFor: field.name, className: 'form-label', children: [field.label, " ", field.isRequired &&
+                _jsx("span", { className: 'text-danger', title: 'Field is required', children: "*" })] }));
+    // Render the input element based on the field type
+    const renderInput = () => {
+        switch (field.type) {
+            case 'select':
+                return (_jsx(Select, { ...controllerField, ...baseProps }));
+            case 'async-select':
+                return (_jsx(AsyncSelect, { ...controllerField, ...baseProps }));
+            case 'creatable-select':
+                return (_jsx(CreatableSelect, { ...controllerField, ...baseProps }));
+            case 'async-creatable-select':
+                return (_jsx(AsyncCreatableSelect, { ...controllerField, ...baseProps }));
+            case 'radio':
+                return (_jsx(_Fragment, { children: field.options?.map((option) => (_jsxs("div", { children: [_jsx("input", { ...baseProps, id: `${field.name}_${option.value}`, value: option.value }), _jsx("label", { htmlFor: `${field.name}_${option.value}`, children: option.label })] }, option.value))) }));
+            case 'textarea':
+                return _jsx("textarea", { ...baseProps });
+            case 'file':
+                return _jsx(FileField, { ...controllerField, ...baseProps });
+            case 'checkbox':
+            case 'number':
+            case 'date':
+            case 'datetime-local':
+            case 'time':
+            case 'text':
+            case 'email':
+            case 'password':
+            default:
+                return _jsx("input", { ...baseProps });
+        }
+    };
+    // Render validation error message
+    const renderError = () => {
+        if (!fieldState.error) {
+            return null;
+        }
+        return (_jsx("div", { className: 'invalid-feedback d-block', children: fieldState.error.message }));
+    };
+    // Combine container classes into a single string
+    containerClasses.push(field.className); // Add field-specific className in the end to override defaults
+    const containerClassNames = containerClasses.filter(Boolean).join(' ');
+    return (_jsxs("div", { className: containerClassNames, children: [renderLabel(), renderInput(), renderError()] }));
+}

package/dist/src/components/FileField.d.ts

@@ -0,0 +1,12 @@
+import '../styles/uploady-ext.css';
+interface FileFieldProps {
+    value?: any;
+    onChange?: (value: any) => void;
+    className?: string;
+    accept?: string;
+    isMultiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+}
+declare const FileField: import("react").ForwardRefExoticComponent<FileFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default FileField;

package/dist/src/components/FileField.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Uploady, { useItemStartListener, useItemFinishListener, useItemProgressListener, useAbortItem, useItemErrorListener } from '@rpldy/uploady';
+import UploadDropZone from '@rpldy/upload-drop-zone';
+import UploadButton from '@rpldy/upload-button';
+import UploadPreview from '@rpldy/upload-preview';
+import { useState, forwardRef, useEffect, useRef, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { filesize } from 'filesize';
+import '../styles/uploady-ext.css';
+const FileField = forwardRef(({ value, onChange, className, accept, isMultiple, maxFiles, maxSize }, ref) => {
+    const height = 200;
+    // State to store file metadata for preview
+    const [fileMetadata, setFileMetadata] = useState(new Map());
+    // State to store upload progress for each file
+    const [uploadProgress, setUploadProgress] = useState(new Map());
+    // Counter for currently uploading files
+    const uploadingCountRef = useRef(0);
+    // Ref to always have the latest fileMetadata
+    const fileMetadataRef = useRef(new Map());
+    // Ref for scroll container
+    const scrollContainerRef = useRef(null);
+    // Update ref whenever fileMetadata changes
+    useEffect(() => {
+        fileMetadataRef.current = fileMetadata;
+    }, [fileMetadata]);
+    // Auto-scroll to the end when new files are added
+    useEffect(() => {
+        if (scrollContainerRef.current && fileMetadata.size > 0) {
+            scrollContainerRef.current.scrollTo({
+                left: scrollContainerRef.current.scrollWidth,
+                behavior: 'smooth'
+            });
+        }
+    }, [fileMetadata.size]);
+    // Reset in form
+    useEffect(() => {
+        const handleFormReset = (event) => {
+            const form = event.target;
+            if (form.contains(scrollContainerRef.current)) {
+                setFileMetadata(new Map());
+                setUploadProgress(new Map());
+                uploadingCountRef.current = 0;
+                // Notify parent component about the value change
+                onChange?.(isMultiple ? [] : null);
+            }
+        };
+        // Add reset event listener
+        window.addEventListener('reset', handleFormReset);
+        return () => {
+            // Remove event listener on unmount
+            window.removeEventListener('reset', handleFormReset);
+        };
+    }, [onChange, isMultiple]);
+    // File filter to prevent duplicates and enforce maxFiles limit
+    const fileFilter = useCallback((file) => {
+        const currentCount = fileMetadataRef.current.size + uploadingCountRef.current;
+        // Check file size limit
+        if (maxSize && file.size > maxSize) {
+            const sizeMB = (file.size / 1024 / 1024).toFixed(2);
+            const maxSizeMB = (maxSize / 1024 / 1024).toFixed(2);
+            toast.error(`File '${file.name}' is too large (${sizeMB}MB). Maximum allowed size is ${maxSizeMB}MB. ${file.name} blocked`);
+            return false;
+        }
+        // Check maxFiles limit
+        if (maxFiles && currentCount >= maxFiles) {
+            toast.error(`Max files limit reached (${maxFiles}): ${file.name} blocked`);
+            return false;
+        }
+        // Check if file already exists
+        const isDuplicate = Array.from(fileMetadataRef.current.values()).some(meta => meta.originalName === file.name && meta.size === file.size);
+        if (isDuplicate) {
+            toast.error(`Duplicate file blocked: ${file.name}`);
+            return false;
+        }
+        return true;
+    }, [maxFiles, maxSize]);
+    // Upload handler component for file uploads
+    const UploadHandler = ({ onUploaded }) => {
+        useItemStartListener((item) => {
+            // Increment uploading counter
+            uploadingCountRef.current++;
+            setFileMetadata(prev => {
+                const newMap = new Map(prev);
+                newMap.set(item.id, {
+                    url: item.url,
+                    filename: item.file?.name,
+                    originalName: item.file?.name,
+                    size: item.file?.size,
+                    mimetype: item.file?.type
+                });
+                return newMap;
+            });
+        });
+        // Listen to upload progress
+        useItemProgressListener((item) => {
+            if (item.completed < 100) {
+                setUploadProgress(prev => {
+                    const newMap = new Map(prev);
+                    newMap.set(item.id, item.completed);
+                    return newMap;
+                });
+            }
+            else {
+                // Remove progress when complete
+                setUploadProgress(prev => {
+                    const newMap = new Map(prev);
+                    newMap.delete(item.id);
+                    return newMap;
+                });
+            }
+        });
+        useItemErrorListener((item) => {
+            toast.error(item?.uploadResponse?.data?.error || 'Upload failed');
+            // Remove preview and progress for errored item
+            setFileMetadata(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(item.id);
+                return newMap;
+            });
+            setUploadProgress(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(item.id);
+                return newMap;
+            });
+            // Decrement uploading counter
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+        });
+        useItemFinishListener((item) => {
+            // Decrement uploading counter
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+            if (item.state === 'finished') {
+                const responseData = item.uploadResponse?.data;
+                const url = responseData?.url ?? null;
+                // If no URL is returned, stop processing
+                if (!url) {
+                    return;
+                }
+                // Store file metadata for preview
+                setFileMetadata(prev => {
+                    const newMap = new Map(prev);
+                    if (newMap.has(item.id)) {
+                        newMap.set(item.id, {
+                            ...newMap.get(item.id),
+                            url: responseData?.url,
+                            filename: responseData?.filename,
+                            originalName: responseData?.originalName,
+                            size: responseData?.size,
+                            mimetype: responseData?.mimetype,
+                            isUploading: false,
+                        });
+                    }
+                    return newMap;
+                });
+                // For multiple files, append to existing array
+                if (isMultiple) {
+                    const currentValue = Array.isArray(value) ? value : [];
+                    onUploaded([...currentValue, url]);
+                }
+                else {
+                    onUploaded(url);
+                }
+            }
+        });
+        return null;
+    };
+    // Custom preview component for uploaded files
+    const cleanupAllFiles = () => {
+        // Use ref to get the latest fileMetadata
+        const filenames = Array.from(fileMetadataRef.current.values()).map(meta => meta.filename);
+        if (filenames.length === 0) {
+            return;
+        }
+        // Try sendBeacon first (most reliable)
+        const blob = new Blob([JSON.stringify({ filenames })], { type: 'application/json' });
+        if (navigator.sendBeacon('/api/upload/temp/cleanup', blob)) {
+            // Cleanup request sent via beacon
+            return;
+        }
+        // Fallback to fetch with keepalive
+        fetch('/api/upload/temp/cleanup', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filenames }),
+            keepalive: true // Important for page unload
+        }).catch(error => console.error('Cleanup failed:', error));
+    };
+    // Cleanup all temp files on component unmount
+    useEffect(() => {
+        const handleBeforeUnload = (_) => {
+            cleanupAllFiles();
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            cleanupAllFiles();
+        };
+    }, []);
+    // Preview container wrapper component
+    const PreviewContainer = ({ children }) => (_jsx("div", { className: `d-flex border rounded position-relative align-items-center justify-content-center rounded overflow-hidden flex-shrink-0 ${isMultiple ? 'me-2' : ''}`, style: {
+            height: `${height}px`,
+            maxWidth: `${height}px`
+        }, children: children }));
+    // Custom preview component
+    const CustomPreview = (props) => {
+        const { id, url, name, removePreview } = props;
+        const metadata = fileMetadata.get(id);
+        if (!metadata) {
+            return null;
+        }
+        // Hook to abort upload
+        const abortItem = useAbortItem();
+        const handleCancel = () => {
+            console.log('Cancelling upload for item id:', id);
+            // Abort the upload
+            abortItem(id);
+            // Remove from preview
+            removePreview?.();
+            // Remove from progress
+            setUploadProgress(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(id);
+                return newMap;
+            });
+            // Decrement counter
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+            toast.info('Upload cancelled');
+        };
+        const handleRemove = async () => {
+            // Remove from preview
+            removePreview?.();
+            const metadata = fileMetadata.get(id);
+            // Remove from metadata immediately
+            setFileMetadata(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(id);
+                return newMap;
+            });
+            try {
+                await fetch(`/api/upload/temp/${metadata?.filename}`, {
+                    method: 'DELETE'
+                });
+            }
+            catch (error) {
+                console.error('Failed to delete temp file:', error);
+            }
+            finally {
+                // Remove from form value
+                const newValue = (isMultiple && Array.isArray(value)) ?
+                    // Find and remove the filename associated with this preview item
+                    // Note: We need to track the mapping between preview id and filename
+                    value.filter((url) => url !== metadata?.url) :
+                    null;
+                onChange?.(newValue);
+            }
+        };
+        // Determine if file is an image
+        const isImage = metadata?.mimetype?.startsWith('image/');
+        // Get upload progress for this file
+        const progress = uploadProgress.get(id);
+        const isUploading = progress !== undefined;
+        return (_jsxs(PreviewContainer, { children: [isImage ? (_jsx("img", { className: 'object-fit-cover h-100', src: url, alt: name || 'Preview' })) : (_jsxs("div", { className: 'd-flex flex-column align-items-center justify-content-center p-3 text-center w-100', style: {
+                        minWidth: `${height / 1.35}px`
+                    }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" }), _jsx("text", { x: "50%", y: "65%", textAnchor: "middle", fontSize: "3", fontWeight: "bold", fill: "currentColor", children: (() => {
+                                        const filename = metadata?.originalName || name || '';
+                                        const parts = filename.split('.');
+                                        return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : 'FILE';
+                                    })() })] }), _jsx("div", { className: 'mt-2 small', children: filesize(metadata?.size || 0, { base: 2, standard: "jedec" }) })] })), _jsx("button", { type: 'button', className: 'btn btn-close bg-danger p-2 btn-sm position-absolute top-0 end-0 m-2', "aria-label": 'Close', onClick: (e) => {
+                        e.stopPropagation();
+                        if (isUploading) {
+                            handleCancel();
+                        }
+                        else {
+                            handleRemove();
+                        }
+                    }, title: 'Remove File' }), _jsxs("div", { className: 'position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white py-2 text-truncate small d-flex align-items-center', children: [isUploading && (_jsx("div", { className: 'progress rounded-0 position-absolute w-100 left-0 bottom-0', style: { height: '3px' }, children: _jsx("div", { className: 'progress-bar progress-bar-striped progress-bar-animated bg-primary', role: 'progressbar', style: { width: `${progress}%` }, "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100 }) })), _jsxs("span", { className: 'px-3 w-100 d-inline-block text-truncate', children: [isUploading ? `${Math.round(progress || 0)}% - ` : '', name] })] })] }));
+    };
+    return (_jsxs(Uploady, { destination: {
+            url: '/api/upload/temp',
+            filesParamName: 'file'
+        }, multiple: isMultiple, accept: accept, fileFilter: fileFilter, concurrent: isMultiple, maxConcurrent: maxFiles, children: [_jsx(UploadHandler, { onUploaded: (payload) => {
+                    onChange?.(payload);
+                } }), _jsx(UploadDropZone, { className: `${className || ''}`, onDragOverClassName: 'drag-over', children: _jsxs("div", { ref: scrollContainerRef, className: 'd-flex align-items-center overflow-x-auto overflow-y-hidden', children: [_jsx(UploadPreview, { rememberPreviousBatches: true, PreviewComponent: CustomPreview, fallbackUrl: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Crect width="100" height="100" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" text-anchor="middle" dy=".3em" fill="%23999"%3EImage%3C/text%3E%3C/svg%3E' }), (!maxFiles || fileMetadata.size + uploadingCountRef.current < maxFiles) && (_jsx(UploadButton, { className: 'border-0 bg-transparent p-0 cursor-pointer flex-shrink-0', extraProps: { type: 'button' }, children: _jsx(PreviewContainer, { children: _jsxs("div", { className: 'text-center p-3', children: [_jsx("div", { className: 'fw-bold', children: "Upload File" }), _jsx("div", { className: 'text-muted small mt-1', children: "Click or drag" })] }) }) }))] }) })] }));
+});
+FileField.displayName = 'FileField';
+export default FileField;

package/dist/src/components/Form.d.ts

@@ -0,0 +1,8 @@
+import type { Form as FormType } from '../types/Form';
+interface FormProps {
+    form: FormType;
+    onSubmit: (data: any) => Promise<void>;
+    showReset?: boolean;
+}
+export default function Form({ form, onSubmit, showReset }: FormProps): JSX.Element;
+export {};

package/dist/src/components/Form.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'react-toastify';
+import Field from './Field';
+export default function Form({ form, onSubmit, showReset = false }) {
+    // Initialize react-hook-form with zod resolver
+    const { register, handleSubmit, reset, trigger, clearErrors, control, formState: { touchedFields, isSubmitting, isValid, isDirty } } = useForm({
+        resolver: zodResolver(form.schema),
+        mode: 'onChange',
+        defaultValues: form.defaultValues
+    });
+    // Handle form submission
+    const handleFormSubmit = async (data) => {
+        try {
+            await onSubmit(data);
+            reset(data);
+        }
+        catch (error) {
+            toast.error('Form submission failed');
+        }
+    };
+    const validateFormFields = async (field) => {
+        const fieldNames = Object.values(form.sections)
+            .flatMap(section => Object.values(section.fields))
+            .map(f => f.name);
+        const currentIndex = fieldNames.indexOf(field.name);
+        // Trigger validation for all fields before the current one
+        const beforeFields = fieldNames.slice(0, currentIndex + 1);
+        beforeFields.forEach(name => trigger(name));
+        // Clear errors for untouched fields after the current one
+        const afterFields = fieldNames.slice(currentIndex + 1);
+        const untouchedAfterFields = afterFields.filter(name => !touchedFields[name]);
+        clearErrors(untouchedAfterFields);
+    };
+    const getFieldRegister = (field) => {
+        const baseRegister = register(field.name, {
+            valueAsNumber: field.type === 'number'
+        });
+        return {
+            ...baseRegister,
+            onFocus: async (_) => {
+                // Call form field validations by a specific order
+                await validateFormFields(field);
+            },
+            onChange: async (event) => {
+                // Call the base onChange handler
+                await baseRegister.onChange(event);
+                // Trigger re-validation for specified fields
+                for (const revalidateFieldName of field.revalidates) {
+                    await trigger(revalidateFieldName);
+                }
+            },
+        };
+    };
+    // Render a single field
+    const renderField = (field) => {
+        const fieldRegister = getFieldRegister(field);
+        return (_jsx(Field, { field: field, register: fieldRegister, control: control }, field.name));
+    };
+    // Render section
+    const renderSection = (section) => {
+        return (_jsx("div", { className: `${section.className} mb-4`, children: _jsxs("div", { className: 'card', children: [_jsx("div", { className: 'card-header', children: section.title && _jsx("h3", { children: section.title }) }), _jsx("div", { className: 'card-body', children: _jsx("div", { className: 'row g-3', children: Object.values(section.fields).map(field => renderField(field)) }) })] }) }));
+    };
+    // Render form buttons
+    const renderButtons = () => {
+        return (_jsxs("div", { className: 'd-flex gap-2', children: [_jsx("button", { type: 'submit', className: 'btn btn-primary', disabled: !isDirty || !isValid || isSubmitting, children: isSubmitting ? 'Submitting...' : 'Submit' }), showReset && (_jsx("button", { type: 'button', className: 'btn btn-secondary', onClick: () => reset(), disabled: !isDirty || isSubmitting, children: "Reset" }))] }));
+    };
+    return (_jsxs("form", { className: 'row', onSubmit: handleSubmit(handleFormSubmit), noValidate: true, children: [form.sections.map(section => renderSection(section)), renderButtons()] }));
+}

package/dist/src/types/Field.d.ts

@@ -0,0 +1,82 @@
+import { z } from 'zod';
+export type FieldType = 'text' | 'email' | 'password' | 'number' | 'checkbox' | 'date' | 'datetime-local' | 'time' | 'radio' | 'select' | 'async-select' | 'creatable-select' | 'async-creatable-select' | 'textarea' | 'file';
+export interface Option {
+    label: string;
+    value: string;
+}
+export interface FieldConfig {
+    type: FieldType;
+    name: string;
+    label: string;
+    placeholder?: string;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    min?: number | string;
+    max?: number | string;
+    revalidates?: string[];
+    step?: number;
+    options?: Option[];
+    isMultiple?: boolean;
+    maxSize?: number;
+    accept?: string;
+    maxFiles?: number;
+    loadOptions?: (search: string) => Promise<Option[]>;
+    validate?: (values: Record<string, any>, ctx: z.RefinementCtx) => void;
+    normalize?: (value: unknown) => unknown;
+    className?: string;
+    attrs?: Record<string, any>;
+}
+export declare class Field<T = any> {
+    protected readonly _config: FieldConfig;
+    readonly schema: z.ZodSchema<T>;
+    constructor(config: FieldConfig, schema: z.ZodSchema<T>);
+    get type(): FieldType;
+    get name(): string;
+    get label(): string;
+    get placeholder(): string;
+    get isReadOnly(): boolean;
+    get isDisabled(): boolean;
+    get isRequired(): boolean;
+    get min(): string | number | undefined;
+    get max(): string | number | undefined;
+    get revalidates(): string[];
+    get step(): number | undefined;
+    get options(): Option[];
+    get isMultiple(): boolean;
+    get maxSize(): number | undefined;
+    get accept(): string | undefined;
+    get maxFiles(): number;
+    get loadOptions(): ((search: string) => Promise<Option[]>) | undefined;
+    get className(): string;
+    get attrs(): Record<string, any>;
+    getNormalizedValue(value: unknown): T;
+    runValidation(values: Record<string, any>, ctx: z.RefinementCtx): void;
+    getDefaultValue(): T;
+}
+export declare class FieldFactory {
+    private static createStringSchema;
+    private static createEmailSchema;
+    static text(name: string, label: string, config?: Partial<FieldConfig>): Field<string>;
+    static email(config: Partial<FieldConfig>): Field<string>;
+    static password(config: Partial<FieldConfig>): Field<string>;
+    static textarea(name: string, label: string, config?: Partial<FieldConfig>): Field<string>;
+    private static createNumberSchema;
+    static number(name: string, label: string, config?: Partial<FieldConfig>): Field<number | undefined>;
+    private static createCheckboxSchema;
+    static checkbox(name: string, label: string, config?: Partial<FieldConfig>): Field<boolean>;
+    private static createDateSchema;
+    static date(name: string, label: string, config?: Partial<FieldConfig>): Field<Date | undefined>;
+    private static createDateTimeLocalSchema;
+    static datetimeLocal(name: string, label: string, config?: Partial<FieldConfig>): Field<Date | undefined>;
+    private static createTimeSchema;
+    static time(name: string, label: string, config?: Partial<FieldConfig>): Field<string | undefined>;
+    static radio(name: string, label: string, options: Option[], config?: Partial<FieldConfig>): Field<string>;
+    private static createSelectSchema;
+    static select(name: string, label: string, options: Option[], config?: Partial<FieldConfig>): Field<Option | Option[] | null>;
+    static asyncSelect(name: string, label: string, loadOptions: (search: string) => Promise<Option[]>, config?: Partial<FieldConfig>): Field<Option | Option[] | null>;
+    static creatableSelect(name: string, label: string, options: Option[], config?: Partial<FieldConfig>): Field<Option | Option[] | null>;
+    static asyncCreatableSelect(name: string, label: string, loadOptions: (search: string) => Promise<Option[]>, config?: Partial<FieldConfig>): Field<Option | Option[] | null>;
+    private static createFileSchema;
+    static file(name: string, label: string, config?: Partial<FieldConfig>): Field<string | string[] | null>;
+}