import { Renderable } from '../types/domain';
import { DOMContext } from '../dom/dom-context';
/**
 * Attaches an event handler to the 'click' event that triggers when a checkbox is checked or unchecked.
 * @param fn - The callback function to be executed when the checkbox is clicked.
 * @alpha
 */
export declare const OnChecked: (fn: (event: boolean, ctx: DOMContext) => void) => Renderable;
/**
 * Provides type-safe event handlers for all HTML events.
 *
 * The `on` object is a proxy that provides access to all standard HTML events with proper
 * TypeScript typing. Each event handler receives the native event object and the DOM context.
 *
 * @example
 * ```typescript
 * // Basic click handler
 * html.button(
 *   on.click((event, ctx) => {
 *     console.log('Button clicked!', event.target)
 *   }),
 *   'Click me'
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Input event with value extraction
 * const text = prop('')
 *
 * html.input(
 *   attr.value(text),
 *   on.input((event) => {
 *     text.value = (event.target as HTMLInputElement).value
 *   })
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Multiple event handlers on same element
 * html.div(
 *   on.mouseenter(() => console.log('Mouse entered')),
 *   on.mouseleave(() => console.log('Mouse left')),
 *   on.click(() => console.log('Clicked')),
 *   'Hover and click me'
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Keyboard event handling
 * html.input(
 *   on.keydown((event) => {
 *     if (event.key === 'Enter') {
 *       console.log('Enter pressed!')
 *       event.preventDefault()
 *     }
 *   })
 * )
 * ```
 *
 * @public
 */
export declare const on: {
    abort: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    animationcancel: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
    animationend: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
    animationiteration: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
    animationstart: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
    auxclick: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    blur: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
    cancel: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    canplay: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    canplaythrough: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    change: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    click: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    close: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    contextmenu: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    cuechange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    dblclick: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    drag: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    dragend: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    dragenter: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    dragexit: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    dragleave: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    dragover: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    dragstart: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    drop: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
    durationchange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    emptied: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    ended: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    error: (handler: (event: ErrorEvent, ctx: DOMContext) => void) => Renderable;
    focus: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
    focusin: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
    focusout: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
    gotpointercapture: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    input: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    invalid: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    keydown: (handler: (event: KeyboardEvent, ctx: DOMContext) => void) => Renderable;
    keypress: (handler: (event: KeyboardEvent, ctx: DOMContext) => void) => Renderable;
    keyup: (handler: (event: KeyboardEvent, ctx: DOMContext) => void) => Renderable;
    load: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    loadeddata: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    loadedmetadata: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    loadend: (handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void) => Renderable;
    loadstart: (handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void) => Renderable;
    lostpointercapture: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    mousedown: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    mouseenter: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    mouseleave: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    mousemove: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    mouseout: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    mouseover: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    mouseup: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
    pause: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    play: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    playing: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    pointercancel: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointerdown: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointerenter: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointerleave: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointermove: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointerout: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointerover: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    pointerup: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
    progress: (handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void) => Renderable;
    ratechange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    reset: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    resize: (handler: (event: UIEvent, ctx: DOMContext) => void) => Renderable;
    scroll: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    securitypolicyviolation: (handler: (event: SecurityPolicyViolationEvent, ctx: DOMContext) => void) => Renderable;
    seeked: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    seeking: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    select: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    selectionchange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    selectstart: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    stalled: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    submit: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    suspend: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    timeupdate: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    toggle: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    touchcancel: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
    touchend: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
    touchmove: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
    touchstart: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
    transitioncancel: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
    transitionend: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
    transitionrun: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
    transitionstart: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
    volumechange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
    waiting: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
};
/**
 * Creates an event handler that extracts and emits the string value from an input element.
 *
 * This utility simplifies handling input events by automatically extracting the value
 * from the target element and passing it to your callback function.
 *
 * @example
 * ```typescript
 * const name = prop('')
 *
 * html.input(
 *   attr.value(name),
 *   on.input(emitValue(value => name.value = value))
 * )
 * ```
 *
 * @example
 * ```typescript
 * // With textarea
 * const description = prop('')
 *
 * html.textarea(
 *   attr.value(description),
 *   on.input(emitValue(value => {
 *     description.value = value
 *     console.log('Description updated:', value)
 *   }))
 * )
 * ```
 *
 * @param fn - Callback function that receives the input element's string value
 * @returns Event handler function that can be used with event listeners
 * @public
 */
export declare const emitValue: (fn: (text: string) => void) => (event: Event) => void;
/**
 * Creates an event handler that extracts and emits the numeric value from an input element.
 *
 * This utility automatically converts the input's value to a number using the browser's
 * built-in `valueAsNumber` property, which handles number inputs correctly and returns
 * `NaN` for invalid numeric values.
 *
 * @example
 * ```typescript
 * const age = prop(0)
 *
 * html.input(
 *   attr.type('number'),
 *   attr.value(age.map(String)),
 *   on.input(emitValueAsNumber(value => {
 *     if (!isNaN(value)) {
 *       age.value = value
 *     }
 *   }))
 * )
 * ```
 *
 * @example
 * ```typescript
 * // With range input
 * const volume = prop(50)
 *
 * html.input(
 *   attr.type('range'),
 *   attr.min('0'),
 *   attr.max('100'),
 *   attr.value(volume.map(String)),
 *   on.input(emitValueAsNumber(value => volume.value = value))
 * )
 * ```
 *
 * @param fn - Callback function that receives the input element's numeric value (may be NaN)
 * @returns Event handler function that can be used with event listeners
 * @public
 */
export declare const emitValueAsNumber: (fn: (num: number) => void) => (event: Event) => void;
/**
 * Converts the value of an HTML input element to a Date object and emits it using the provided callback function.
 * @param fn - The callback function to be called with the converted Date object.
 * @returns A function that can be used as an event handler for input events.
 * @public
 */
export declare const emitValueAsDate: (fn: (date: Date) => void) => (event: Event) => void;
/**
 * Converts the value of an HTML input element to a Date object or null and emits it using the provided callback function.
 * @param fn - The callback function to be called with the converted Date object or null.
 * @returns A function that can be used as an event handler for input events.
 * @public
 */
export declare const emitValueAsNullableDate: (fn: (date: Date | null) => void) => (event: Event) => void;
/**
 * Emits the value of an HTMLInputElement as a Date object.
 * @param fn - The callback function to be called with the emitted Date object.
 * @returns The event handler function.
 * @public
 */
export declare const emitValueAsDateTime: (fn: (date: Date) => void) => (event: Event) => void;
/**
 * Emits the value of an HTMLInputElement as a Date object or null.
 * @param fn - The callback function to be called with the emitted Date object or null.
 * @returns The event handler function.
 * @public
 */
export declare const emitValueAsNullableDateTime: (fn: (date: Date | null) => void) => (event: Event) => void;
/**
 * Creates an event handler that extracts and emits the checked state from a checkbox or radio input.
 *
 * This utility simplifies handling checkbox and radio button state changes by automatically
 * extracting the `checked` property from the target element.
 *
 * @example
 * ```typescript
 * const isEnabled = prop(false)
 *
 * html.input(
 *   attr.type('checkbox'),
 *   attr.checked(isEnabled),
 *   on.change(emitChecked(checked => isEnabled.value = checked))
 * )
 * ```
 *
 * @example
 * ```typescript
 * // With radio buttons
 * const selectedOption = prop('')
 *
 * html.div(
 *   html.label(
 *     html.input(
 *       attr.type('radio'),
 *       attr.name('option'),
 *       attr.value('A'),
 *       on.change(emitChecked(checked => {
 *         if (checked) selectedOption.value = 'A'
 *       }))
 *     ),
 *     'Option A'
 *   ),
 *   html.label(
 *     html.input(
 *       attr.type('radio'),
 *       attr.name('option'),
 *       attr.value('B'),
 *       on.change(emitChecked(checked => {
 *         if (checked) selectedOption.value = 'B'
 *       }))
 *     ),
 *     'Option B'
 *   )
 * )
 * ```
 *
 * @param fn - Callback function that receives the input element's checked state
 * @returns Event handler function that can be used with event listeners
 * @public
 */
export declare const emitChecked: (fn: (checked: boolean) => void) => (event: Event) => void;
/**
 * Wraps a function to prevent the default behavior of an event before invoking it.
 * @param fn - The function to be wrapped.
 * @returns A new function that prevents the default behavior of the event and then invokes the original function.
 * @public
 */
export declare const emitPreventDefault: (fn: () => void) => (event: Event) => void;
/**
 * Creates a new event handler that stops event propagation and invokes the provided function.
 * @param fn - The function to be invoked when the event is triggered.
 * @returns A new event handler function.
 * @public
 */
export declare const emitStopPropagation: (fn: () => void) => (event: Event) => void;
/**
 * Creates an event handler that stops immediate propagation of the event and invokes the provided function.
 * @param fn - The function to be invoked.
 * @returns The event handler function.
 * @public
 */
export declare const emitStopImmediatePropagation: (fn: () => void) => (event: Event) => void;