import type { DirectiveResult } from "lit-html/directive.js";
import { type DollarChain } from "./$";
/**
 * Lifecycle object returned from the `eleHook` mount callback.
 *
 * - `onUpdate`  — called on every re-render after the initial mount,
 *                 receiving the latest args passed at the call site.
 * - `onCleanup` — called when the element is disconnected from the DOM.
 *
 * @template A - Tuple of user-supplied argument types.
 */
export type EleHookLifecycle<A extends any[] = []> = {
    /** Called on every re-render after the initial mount with the latest args. */
    onUpdate?: (...args: A) => void;
    /** Called when the element is disconnected from the DOM. */
    onCleanup?: () => void;
};
/**
 * The mount callback signature for `eleHook()`.
 *
 * The first argument `$` (DollarChain) is always injected automatically —
 * it is a fluent handle bound to the host element. Any additional arguments
 * are the user-supplied values passed at the template call site.
 *
 * Return an `EleHookLifecycle` object to handle updates and cleanup,
 * or return nothing if the mount body is all you need.
 *
 * @template A - Tuple of user-supplied argument types.
 */
export type EleHookMountFn<A extends any[] = []> = ($: DollarChain, ...args: A) => EleHookLifecycle<A> | undefined | void;
/**
 * `eleHook()` — create a reusable element-part directive that gives you
 * full `$` (DollarChain) access to the host element.
 *
 * Returns a **function** that accepts user-supplied arguments and produces
 * a lit-html directive result. Define the hook once, use it anywhere.
 *
 * The first argument to the mount callback (`$`) is always injected — it is
 * a `DollarChain` bound to the host element. Any extra parameters you define
 * become the arguments the returned function accepts at the call site, and
 * they flow through to `onUpdate` on every re-render.
 *
 * While the mount callback or lifecycle methods are executing,
 * `componentRunningStatus.isHookRunning` is set to `true`.
 *
 * @example
 * ```ts
 * // ── No args ──────────────────────────────────────────────────────
 * const ripple = eleHook(($) => {
 *   $.on("click", (e) => { /* ripple animation *​/ });
 *   $.classes("has-ripple");
 *   return { onCleanup() { $.removeClass("has-ripple"); } };
 * });
 * html`<button ${ripple()}>Click me</button>`
 *
 * // ── With args ────────────────────────────────────────────────────
 * const highlight = eleHook(($, color: string, pulse: boolean) => {
 *   $.style({ backgroundColor: color });
 *   if (pulse) $.classes("pulse");
 *   return {
 *     onUpdate(nextColor, nextPulse) {
 *       $.style({ backgroundColor: nextColor });
 *       nextPulse ? $.addClass("pulse") : $.removeClass("pulse");
 *     },
 *   };
 * });
 * html`<div ${highlight(color.val, isPulsing.val)}>Highlighted</div>`
 *
 * // ── Replacing attr() directive ───────────────────────────────────
 * const myAttr = eleHook(($, attrs: AttrMap) => {
 *   $.attr(attrs);
 *   return { onUpdate(next) { $.attr(next); } };
 * });
 * html`<div ${myAttr({ disabled: true, role: "button" })}></div>`
 * ```
 *
 * @template A - Tuple of user-supplied argument types.
 * @param mountFn - Called once on first mount. Receives `$` (DollarChain)
 *                  followed by the user-supplied args.
 * @returns A function that accepts the user args and produces a directive result.
 */
export declare function eleHook<A extends any[] = []>(mountFn: EleHookMountFn<A>): (...args: A) => DirectiveResult;
export type { DirectiveResult };
//# sourceMappingURL=eleHook.d.ts.map