import type { TemplateResult } from "lit-html";
import type { DirectiveResult } from "lit-html/directive.js";
export interface DialogOptions {
    /**
     * Called when the user clicks the backdrop — the dimmed area outside
     * the dialog box. Typically used to close the dialog.
     */
    onBackdropClick?: () => void;
    /**
     * Inline styles merged onto the backdrop div.
     * Use this to customise the overlay colour, blur, z-index, etc.
     */
    style?: Record<string, string>;
    /**
     * Inline styles merged onto the inner dialog box wrapper div.
     * Use this to control width, padding, border-radius, background, etc.
     */
    dialogStyle?: Record<string, string>;
}
/**
 * `dialog(content, options?)` — renders a full-screen backdrop with your
 * content centred inside it. Prevents body scroll while open. Cleans up
 * automatically when the directive disconnects.
 *
 * Built on `htmlHook` — lifecycle is tied to where it appears in the template.
 * Use a condition to show / hide it:
 *
 * @example
 * ```ts
 * const isOpen = atom(false);
 *
 * html`
 *   <button @click=${() => isOpen.set(true)}>Open</button>
 *
 *   ${isOpen.val && dialog(html`
 *     <div class="dialog-box">
 *       <h2>Confirm delete</h2>
 *       <p>This action cannot be undone.</p>
 *       <button @click=${() => isOpen.set(false)}>Cancel</button>
 *       <button @click=${doDelete}>Delete</button>
 *     </div>
 *   `, {
 *     onBackdropClick: () => isOpen.set(false),
 *   })}
 * `
 *
 * // Custom backdrop colour + dialog width
 * ${isOpen.val && dialog(html`<div>...</div>`, {
 *   style:       { background: 'rgba(0,0,0,0.8)' },
 *   dialogStyle: { width: '480px', borderRadius: '12px', padding: '24px' },
 *   onBackdropClick: () => isOpen.set(false),
 * })}
 * ```
 */
export declare function dialog(content: TemplateResult, options?: DialogOptions): DirectiveResult;
//# sourceMappingURL=dialog.d.ts.map