el-form-react-components/dist/index.d.mts

AutoForm and UI components for React - generate forms instantly from schemas (Zod, Yup, Valibot). Includes Tailwind CSS styling and customizable field components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { z } from 'zod';
import { ValidatorConfig } from 'el-form-core';
import { UseFormReturn } from 'el-form-react-hooks';

type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface AutoFormFieldConfig {
    name: string;
    label?: string;
    type?: FieldType;
    placeholder?: string;
    colSpan?: GridColumns;
    component?: React.ComponentType<AutoFormFieldProps>;
    options?: Array<{
        value: string;
        label: string;
    }>;
    fields?: AutoFormFieldConfig[];
    className?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
}
interface AutoFormFieldProps {
    name: string;
    label?: string;
    type?: string;
    placeholder?: string;
    value: any;
    onChange: (e: React.ChangeEvent<any>) => void;
    onBlur: (e: React.FocusEvent<any>) => void;
    error?: string;
    touched?: boolean;
    options?: Array<{
        value: string;
        label: string;
    }>;
    fields?: AutoFormFieldConfig[];
    onAddItem?: () => void;
    onRemoveItem?: (index: number) => void;
    arrayPath?: string;
    className?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
}
interface AutoFormErrorProps {
    errors: Record<string, string>;
    touched: Record<string, boolean>;
}
interface BaseFieldProps$1<T extends Record<string, any>, K extends keyof T> {
    name: K;
    label?: string;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
    required?: boolean;
}
type FieldType = "text" | "email" | "password" | "number" | "textarea" | "select" | "array" | "checkbox" | "date" | "url";
type ComponentMap = Partial<Record<FieldType, React.ComponentType<AutoFormFieldProps>>>;
interface AutoFormProps<T extends Record<string, any>> {
    schema: z.ZodType<T, any, any>;
    fields?: AutoFormFieldConfig[];
    initialValues?: Partial<T>;
    layout?: "grid" | "flex";
    columns?: GridColumns;
    onSubmit: (data: T) => void | Promise<void>;
    onError?: (errors: Record<keyof T, string>) => void;
    children?: (formApi: UseFormReturn<T>) => React.ReactNode;
    customErrorComponent?: React.ComponentType<AutoFormErrorProps>;
    componentMap?: Record<string, React.ComponentType<AutoFormFieldProps>>;
    validators?: ValidatorConfig;
    fieldValidators?: Partial<Record<keyof T, ValidatorConfig>>;
    validateOn?: "onChange" | "onBlur" | "onSubmit" | "manual";
    submitButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
    resetButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
}

declare function AutoForm<T extends Record<string, any>>({ schema, fields, initialValues, layout, columns, onSubmit, onError, children, customErrorComponent, componentMap, validators, fieldValidators, validateOn, submitButtonProps, resetButtonProps, }: AutoFormProps<T>): react_jsx_runtime.JSX.Element;

interface BaseFieldProps<T extends Record<string, any>, K extends keyof T> {
    name: K;
    label?: string;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
    required?: boolean;
}
declare function createField<T extends Record<string, any>, K extends keyof T>(name: K): {
    name: K;
    getValue: (form: any) => T[K];
    getError: (form: any) => string | undefined;
    getTouched: (form: any) => boolean | undefined;
    register: (form: any) => any;
};
declare function TextField<T extends Record<string, any>, K extends keyof T>({ name, label, placeholder, className, type, ...props }: BaseFieldProps<T, K> & {
    type?: "text" | "email" | "password" | "url" | "tel";
}): react_jsx_runtime.JSX.Element;
declare function TextareaField<T extends Record<string, any>, K extends keyof T>({ name, label, placeholder, className, rows, ...props }: BaseFieldProps<T, K> & {
    rows?: number;
}): react_jsx_runtime.JSX.Element;
declare function SelectField<T extends Record<string, any>, K extends keyof T>({ name, label, placeholder, className, options, ...props }: BaseFieldProps<T, K> & {
    options: Array<{
        value: string;
        label: string;
    }>;
}): react_jsx_runtime.JSX.Element;

export { AutoForm, type AutoFormErrorProps, type AutoFormFieldConfig, type AutoFormFieldProps, type AutoFormProps, type BaseFieldProps$1 as BaseFieldProps, type ComponentMap, type FieldType, type GridColumns, SelectField, TextField, TextareaField, createField };