/** * Shared utilities for normalizing Stencil CustomEvents to React-compatible form events. * This allows components to work seamlessly with form libraries like react-final-form, * formik, and react-hook-form without requiring adapters. */ /** * Normalized change event that mimics React.ChangeEvent * Compatible with form libraries that expect event.target.value */ export interface FormChangeEvent { target: { value: T; name?: string; type?: string; checked?: boolean; }; currentTarget: { value: T; name?: string; type?: string; checked?: boolean; }; type: 'change'; } /** * Normalized focus/blur event that mimics React.FocusEvent * Compatible with form libraries that expect onBlur/onFocus handlers */ export interface FormFocusEvent { target: { name?: string; }; type: 'blur' | 'focus'; } /** * Creates a normalized change event from a value. * Use this to transform Stencil CustomEvent.detail into a form-library-compatible event. * * @example * // For text inputs * onValueChanged={(e) => onChange?.(createChangeEvent(e.detail, name, 'text'))} * * @example * // For checkboxes * onValueChanged={(e) => onChange?.(createChangeEvent(e.detail, name, 'checkbox'))} */ export declare function createChangeEvent(value: T, name?: string, type?: string): FormChangeEvent; /** * Creates a normalized focus/blur event. * Use this to transform Stencil focus/blur CustomEvents into form-library-compatible events. * * @example * onInputBlur={() => onBlur?.(createFocusEvent('blur', name))} */ export declare function createFocusEvent(type: 'blur' | 'focus', name?: string): FormFocusEvent; /** * Props interface for components that support form integration. * Extend this for consistent form props across all input components. */ export interface FormInputProps { /** Field name for form state management */ name?: string; /** Current value */ value?: T; /** Called when value changes - compatible with form libraries */ onChange?: (event: FormChangeEvent) => void; /** Called when input loses focus - compatible with form libraries */ onBlur?: (event: FormFocusEvent) => void; /** Called when input gains focus */ onFocus?: (event: FormFocusEvent) => void; /** Whether the field is disabled */ disabled?: boolean; /** Whether the field is required */ required?: boolean; } //# sourceMappingURL=formEvents.d.ts.map