import type { DirectiveResult } from "lit-html/directive.js";
/**
 * A typed custom event handler. Receives the `detail` payload directly —
 * no need to unwrap `event.detail` manually.
 */
export type EleEventHandler<T = unknown> = (detail: T, event: CustomEvent<T>) => void;
export declare function onEleEvent<T = unknown>(eventName: string, handler: EleEventHandler<T>): DirectiveResult;
/**
 * `useEleEvent` — call in the **outer function** of a mates component to get
 * a `dispatch` function. Use `dispatch` anywhere in the component (event
 * handlers, effects, async callbacks) to fire a bubbling `CustomEvent` from
 * a specific element.
 *
 * The host element is passed as the first argument to `dispatch` — this is
 * typically the element the event should originate from (e.g. the clicked
 * `<li>`, the focused `<input>`). Events bubble upward and are composed, so
 * any ancestor listening with `onEleEvent` will receive them.
 *
 * No cleanup is needed — `dispatch` just calls `dispatchEvent`, there are no
 * persistent listeners to remove.
 *
 * @example
 * ```ts
 * import { onEleEvent, useEleEvent } from "mates";
 *
 * // ── Child ─────────────────────────────────────────────────────────────────
 * const ListItem = (propsFn) => {
 *   const { dispatch } = useEleEvent();
 *
 *   return () => html`
 *     <li
 *       @click=${(e: MouseEvent) =>
 *         dispatch(e.currentTarget as HTMLElement, "item-select", {
 *           id: propsFn().id,
 *           label: propsFn().label,
 *         })}
 *     >
 *       ${propsFn().label}
 *     </li>
 *   `;
 * };
 *
 * // ── Parent ────────────────────────────────────────────────────────────────
 * html`
 *   <ul ${onEleEvent("item-select", (detail: { id: string }) => {
 *     console.log("selected", detail.id);
 *   })}>
 *     ${items.map(item => x(ListItem, item))}
 *   </ul>
 * `;
 *
 * // ── Dispatching without an element ref (from a button click) ─────────────
 * html`
 *   <button @click=${(e: MouseEvent) =>
 *     dispatch(e.currentTarget as HTMLElement, "form-submit", { value })}>
 *     Submit
 *   </button>
 * `;
 * ```
 */
export declare function useEleEvent(): {
    /**
     * Dispatch a named `CustomEvent` from the component's host `<x-x>` element.
     *
     * The host is captured once when `useEleEvent()` is called (outer function).
     * The event bubbles and is composed so any ancestor with `onEleEvent` will
     * receive it.
     *
     * @param eventName  The custom event name.
     * @param detail     Optional typed payload attached as `event.detail`.
     */
    dispatch<T = unknown>(eventName: string, detail?: T): void;
};
//# sourceMappingURL=customEvent.d.ts.map