zod-auto-form/dist/index.d.ts

Auto-generate typed React forms from Zod schemas

import * as react_jsx_runtime from 'react/jsx-runtime';
import z, { z as z$1, ZodError } from 'zod';
import { FormProps, getInputFieldChangeType } from 'zod-helper';
import { ReactNode } from 'react';

type Primitive = string | number | boolean | bigint | symbol | null | undefined;
type IsPrimitive<T> = T extends Primitive ? true : false;
type ArrayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type DeepPaths<T, Level extends number = 0> = T extends ReadonlyArray<infer U> ? Level extends 10 ? never : `[${ArrayIndex}]` | `[${ArrayIndex}].${DeepPaths<U, Level extends 0 ? 1 : Level>}` : T extends object ? {
    [K in keyof T & (string | number)]: IsPrimitive<T[K]> extends true ? `${K}` : `${K}` | `${K}.${DeepPaths<T[K], Level extends 0 ? 1 : Level>}`;
}[keyof T & (string | number)] : never;
type FieldPath<T extends z.ZodSchema> = DeepPaths<z.infer<T>>;
type FieldVisibilityRule<T extends z.ZodSchema> = {
    sourceFields: FieldPath<T>[];
    targetField: FieldPath<T> | FieldPath<T>[];
    when: (values: Record<FieldPath<T>, any>) => boolean;
    type: "hide" | "disable" | "show";
};
type FieldVisibilityRules<T extends z.ZodSchema> = FieldVisibilityRule<T>[];

type AutoFormProps<T extends z$1.ZodSchema> = FormProps<T> & {
    fieldTypeOverrides?: {
        [K in keyof Partial<SchemaType<T>>]?: getInputFieldChangeType<SchemaType<T>[K]>;
    };
    visibilityRules?: FieldVisibilityRules<T>;
    defaultValues?: Partial<z$1.infer<T>>;
    formId?: string;
    onSubmit?: (values: z$1.infer<T>) => void | Promise<void>;
    onSubmitError?: (error: z$1.ZodError, ErrorMessage: string[], values: z$1.infer<T>) => void;
    hideSubmitButton?: boolean;
    isLoadingButton?: boolean;
    submitButtonText?: string;
    /**
     * Called whenever any value in the form changes.
     * Receives the latest form values as a Record<string, unknown>.
     */
    onValuesChange?: (values: Record<string, unknown>) => void;
    isRemoveNullValues?: boolean;
};
type SchemaType<T extends z$1.ZodSchema> = z$1.infer<T>;
type ZodSchema = z$1.ZodSchema;

declare function AutoForm<T extends ZodSchema>(props: AutoFormProps<T>): react_jsx_runtime.JSX.Element;

type WithDefault<T> = {
    id: string;
    value: T;
    label: string;
    disabled: boolean;
    placeholder: string;
    isError: boolean;
    errorMessages: ZodError[];
    title: string;
    description: string;
    onChange: (value: T) => void;
    onBlur: () => void;
};
type TextInputType = WithDefault<string>;
type SelectType = WithDefault<string> & {
    selectOptions?: string[];
};
type MultiSelectType = WithDefault<string[]> & {
    selectOptions?: string[];
};
type RadioGroupType = WithDefault<string> & {
    selectOptions?: string[];
};
type NumberInputType = WithDefault<number>;
type CheckboxType = WithDefault<boolean>;
type SwitchType = WithDefault<boolean>;
type TextAreaType = WithDefault<string>;
type DateTimePickerType = WithDefault<Date>;
type ObjectWrapperType = {
    children: React.ReactNode[];
    title?: string;
    description?: string;
    label?: string;
    required?: boolean;
};
type ArrayWrapperType = {
    children: React.ReactNode[];
    label?: string;
    title?: string;
    description?: string;
    onAddField: () => void;
    onRemoveField: (index: number) => void;
};
type FormComponentType = {
    children: React.ReactNode;
    formId?: string;
    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
};
type SubmitButtonType = {
    children: React.ReactNode;
    formId?: string;
    isLoading?: boolean;
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
type GroupedFieldsWrapperType = {
    children: React.ReactNode[];
    groupName: string;
};
type ArrayInputFieldWrapperType = {
    children: React.ReactNode[];
    label?: string;
    title?: string;
    description?: string;
    onAddField: () => void;
    onRemoveField: (index: number) => void;
};
type ArrayStringType = WithDefault<string>;
type ArrayNumberType = WithDefault<number>;
type ArrayBooleanType = WithDefault<boolean>;
type ArrayDateType = WithDefault<Date>;
type ComponentContextType = {
    Input: React.ComponentType<TextInputType>;
    Select: React.ComponentType<SelectType>;
    MultiSelect: React.ComponentType<MultiSelectType>;
    RadioGroup: React.ComponentType<RadioGroupType>;
    NumberInput: React.ComponentType<NumberInputType>;
    Checkbox: React.ComponentType<CheckboxType>;
    Switch: React.ComponentType<SwitchType>;
    TextArea: React.ComponentType<TextAreaType>;
    DateTimePicker: React.ComponentType<DateTimePickerType>;
    ObjectWrapper: React.ComponentType<ObjectWrapperType>;
    ArrayWrapper: React.ComponentType<ArrayWrapperType>;
    Form: React.ComponentType<FormComponentType>;
    SubmitButton: React.ComponentType<SubmitButtonType>;
    GroupedFieldsWrapper: React.ComponentType<GroupedFieldsWrapperType>;
    ArrayInputFieldWrapper: React.ComponentType<ArrayInputFieldWrapperType>;
    arrayString: React.ComponentType<ArrayStringType>;
    arrayNumber: React.ComponentType<ArrayNumberType>;
    arrayBoolean: React.ComponentType<ArrayBooleanType>;
    arrayDate: React.ComponentType<ArrayDateType>;
};

type ComponentProviderProps = {
    children: ReactNode;
    components?: Partial<ComponentContextType>;
};
declare const AutoFormComponentsProvider: ({ children, components, }: ComponentProviderProps) => react_jsx_runtime.JSX.Element;

declare const ComponentRegistry: (components: ComponentContextType) => ComponentContextType;

/** Text input field (single-line) */
type TextInput = TextInputType;
/** Checkbox input (true/false) */
type CheckboxInput = CheckboxType;
/** Dropdown input (single select) */
type SelectInput = SelectType;
/** Multi-select dropdown (select multiple options) */
type MultiSelectInput = MultiSelectType;
/** Radio group (select one from multiple options) */
type RadioGroupInput = RadioGroupType;
/** Numeric input field */
type NumberInput = NumberInputType;
/** Switch toggle (boolean input with toggle UI) */
type SwitchInput = SwitchType;
/** Text area field (multi-line input) */
type TextAreaInput = TextAreaType;
/** Date and time picker input */
type DateTimeInput = DateTimePickerType;
/** Wraps nested object fields */
type ObjectWrapper = ObjectWrapperType;
/** Wraps array of fields */
type ArrayWrapper = ArrayWrapperType;
/** Groups multiple fields under a label or section */
type GroupedFieldsWrapper = GroupedFieldsWrapperType;
/** Main form container component */
type FormComponent = FormComponentType;
/** Submit button for triggering form submit */
type SubmitButton = SubmitButtonType;

export { AutoForm, AutoFormComponentsProvider, ComponentRegistry };
export type { ArrayWrapper, AutoFormProps, CheckboxInput, DateTimeInput, FormComponent, GroupedFieldsWrapper, MultiSelectInput, NumberInput, ObjectWrapper, RadioGroupInput, SelectInput, SubmitButton, SwitchInput, TextAreaInput, TextInput };