import type { ChangeEvent } from "react";
import { type BaseSchema } from "valibot";
/**
 * Represents the validation interface returned by {@link createValidator}.
 *
 * @internal
 */
type Validator = {
    /**
     * A ref callback to attach to the input element.
     * It triggers validation immediately when the element is mounted.
     */
    ref: (node: HTMLInputElement | HTMLTextAreaElement | null) => void;
    /**
     * A change handler to attach to the input element.
     * It triggers validation on every change event.
     */
    onChange: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => void;
};
/**
 * Creates a validator object that integrates custom validation logic with the HTML5 Constraint Validation API.
 *
 * @remarks
 * This function is useful when you need to apply custom validation rules (e.g., password complexity)
 * that go beyond standard HTML attributes, while still using `setCustomValidity` to integrate
 * with the browser's native form validation UI.
 *
 * @param validate - A function that receives the input value and returns a validation error message, or an empty string/null if valid.
 * @returns An object containing `ref` and `onChange` handlers to be passed to the input component.
 *
 * @example
 * ```tsx
 * const emailValidator = createValidator((value) => {
 *   if (!value.includes('@')) return "Invalid email address";
 *   return "";
 * });
 *
 * <input
 *   ref={emailValidator.ref}
 *   onChange={emailValidator.onChange}
 * />
 * ```
 */
export declare function createValidator(validate: (value: string) => string): Validator;
/**
 * Programmatically sets the value of an input element and dispatches an 'input' event.
 *
 * @remarks
 * React overrides the native value setter on input elements. To programmatically change
 * the value in a way that React tracks (and that triggers other listeners), we must
 * obtain the native setter from the prototype and call it directly.
 *
 * @param element - The HTML input element to modify.
 * @param value - The new value to set.
 *
 * @example
 * ```ts
 * const input = document.querySelector('input');
 * // Sets the value to "hello" and triggers React's onChange handlers
 * setNativeValue(input, "hello");
 * ```
 */
export declare function setNativeValue(element: HTMLInputElement, value: string): void;
/**
 * A union of HTML form elements that can be validated.
 */
export type ValidateElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
/**
 * Validates a form element's value against a Valibot schema.
 *
 * @remarks
 * This function bridges the DOM's value with Valibot's schema validation.
 * It handles parsing the value (e.g., converting strings to numbers/dates) before validation.
 * If validation fails, it sets the element's custom validity message.
 *
 * @param elm - The form element to validate.
 * @param baseSchema - The Valibot schema to validate against.
 * @param required - Whether the field is required. If false, the schema is wrapped in `optional()`.
 * @returns `null` if valid, or an array of validation issues if invalid.
 *
 * @example
 * Validating a required number input:
 * ```ts
 * import { number } from 'valibot';
 * const input = document.createElement('input');
 * input.type = 'number';
 * input.value = 'abc'; // Invalid number
 *
 * const issues = validateElement(input, number(), true);
 * console.log(issues); // [{ message: "Invalid type", ... }]
 * console.log(input.validationMessage); // "Invalid type"
 * ```
 */
export declare function validateElement<Schema extends BaseSchema<any, any, any>>(elm: ValidateElement, baseSchema: Schema | undefined, required: boolean | undefined): [import("valibot").InferIssue<Schema | import("valibot").OptionalSchema<Schema, undefined>>, ...import("valibot").InferIssue<Schema | import("valibot").OptionalSchema<Schema, undefined>>[]] | null;
/**
 * Simulates a focus and blur event cycle on an element.
 *
 * @remarks
 * This is typically used to programmatically mark a field as "touched" or to trigger
 * validation logic that runs on `blur`.
 *
 * @param elm - The element to focus and blur. If null, the function does nothing.
 *
 * @example
 * ```ts
 * // Trigger validation on a field without user interaction
 * simulateFocusCycle(document.querySelector('#email'));
 * ```
 */
export declare function simulateFocusCycle(elm: ValidateElement | null): void;
/**
 * Parses a form element's raw value into its corresponding JavaScript type.
 *
 * @remarks
 * HTML input values are always strings (except for `files`). This function converts
 * them based on the element's `type` attribute to match the expected schema types.
 *
 * Supported conversions:
 * - `checkbox`: Returns `true` if checked (value is "on"), otherwise passes through.
 * - `date`, `datetime-local`, `month`, `week`: Returns a `Date` object.
 * - `number`, `range`: Returns a `number`.
 * - `file`: Returns an array of files (if multiple) or a single file/null.
 *
 * @param elm - The form element containing the value.
 * @param value - The raw value from the form data (usually a string).
 * @returns The parsed value (e.g., number, Date, boolean, File, or string).
 *
 * @example
 * Parsing a number input:
 * ```ts
 * const input = document.createElement('input');
 * input.type = 'number';
 * input.value = '42';
 * parseValue(input, '42'); // Returns 42 (number)
 * ```
 *
 * @example
 * Parsing a checkbox:
 * ```ts
 * const checkbox = document.createElement('input');
 * checkbox.type = 'checkbox';
 * parseValue(checkbox, 'on'); // Returns true
 * ```
 */
export declare function parseValue(elm: ValidateElement, value: FormDataEntryValue): string | number | boolean | Date | File | File[] | null;
export {};