import "./dialog.css";
import React from "react";
import { Dialog as Base } from "@base-ui/react/dialog";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "@lotics/ui/style_props";
/** Both Dialog and MasterDetailDialog provide this context. */
interface DialogNavigationContextValue {
    goBack: () => void;
    showBackButton: boolean;
}
export declare function useDialogNavigation(): DialogNavigationContextValue;
/** Provider for shared navigation context - exported for MasterDetailDialog to use */
export declare const DialogNavigationProvider: React.Provider<DialogNavigationContextValue | null>;
/** Hook to access dialog + navigation state. Merges DialogContext with ScreenRouterContext. */
export declare function useDialog(): {
    currentPath: string;
    navigate: (path: string, options?: {
        replace?: boolean | undefined;
    } | undefined) => void;
    goBack: () => void;
    canGoBack: boolean;
    params: Record<string, string>;
    open: boolean;
    onOpenChange: (open: boolean) => void;
};
/** A CSS length a caller states as a number of pixels or a percentage. */
export type DialogLength = number | `${number}%`;
/**
 * `card` — the centred card over a scrim, and the five measurements below
 * describe it. `takeover` — full-bleed and edge to edge, with NO scrim, because an
 * opaque surface over the whole viewport has nothing behind it left to dim; it
 * ignores the five measurements at every width. Never for a two-field form: a
 * takeover leaves nowhere to look back at.
 */
export type DialogSurface = "card" | "takeover";
export interface DialogProps extends StyleProps {
    testID?: string;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    defaultOpen?: boolean;
    children: React.ReactNode;
    /** Defaults to `card`. */
    surface?: DialogSurface;
    offsetTop?: number;
    /**
     * How wide the card WANTS to be — `90%` by default, so a narrow viewport keeps
     * its gutters. Capped by {@link DialogProps.maxWidth}, whose own default is
     * {@link DIALOG_MAX_WIDTH}: a stated number RAISES that default rather than
     * being silently clamped by it, while an explicit `maxWidth` still wins.
     */
    width?: DialogLength;
    height?: DialogLength;
    maxHeight?: DialogLength;
    /**
     * The card's ceiling — {@link DIALOG_MAX_WIDTH} unless a numeric `width` asks
     * for more.
     */
    maxWidth?: DialogLength;
    /** Initial route when dialog opens. Defaults to empty string (default screen). */
    initialRoute?: string;
    /**
     * Where the overlay MOUNTS — Base UI's own portal target, `document.body` by
     * default. Name one only for a surface that has to live inside a particular
     * stacking context.
     */
    container?: HTMLElement | null;
    ref?: React.Ref<HTMLDivElement>;
    render?: Base.Popup.Props["render"];
}
/**
 * THE READING MEASURE a `card` is capped at — the width past which a line of text
 * stops being one sentence the eye can return from.
 *
 * A DEFAULT, not a clamp: a caller who states a wider numeric `width` has said
 * this surface is not prose, and a cap that quietly won leaves nothing at the
 * call site naming the constraint.
 */
export declare const DIALOG_MAX_WIDTH = 786;
/**
 * AN OVERLAY OVER THE PAGE, dismissed by its close control or Escape and never by
 * the backdrop (`docs/frontend_design.md` § Dialogs & Overlays) — which is Base
 * UI's `disablePointerDismissal`, not event code of ours. `surface` is the axis.
 *
 * Always rendered, with `open` toggled: the dialog's own state survives a close,
 * and the body-level box appears in OPEN order, which settles paint order between
 * two overlays.
 */
export declare function Dialog(props: DialogProps): React.JSX.Element;
export interface DialogHeaderProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Container for dialog header. The back button appears when there is navigation
 * history. Works in both Dialog and MasterDetailDialog.
 */
export declare function DialogHeader(props: DialogHeaderProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface DialogHeaderTitleProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Title component for DialogHeader — and the dialog's ACCESSIBLE NAME, which is
 * why the element under it is Base UI's `Dialog.Title`: that part is the one
 * writing `aria-labelledby` on the popup.
 *
 * A caller may render this same band inside an overlay of its OWN, which has no
 * Base UI root to reach; there the title is the run of text alone.
 */
export declare function DialogHeaderTitle(props: DialogHeaderTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface DialogHeaderActionsProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Actions container for right side of DialogHeader */
export declare function DialogHeaderActions(props: DialogHeaderActionsProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface DialogScrollAreaProps extends StyleProps {
    children: React.ReactNode;
    /**
     * The IDENTITY of the content in the scroller, for a pane that SWAPS its body
     * in place — see `DrawerScrollArea`. A dialog that navigates between `Screen`s
     * does not need it: a stacked screen keeps its own scroll area.
     */
    scrollKey?: string;
    testID?: string;
    ref?: React.Ref<HTMLDivElement>;
    render?: useRender.RenderProp;
}
export declare function DialogScrollArea(props: DialogScrollAreaProps): React.JSX.Element;
export interface DialogFooterProps extends StyleProps {
    children: React.ReactNode;
    /**
     * `end` (the default) packs the row at the right edge — the commit last, its
     * `Reset` or `Cancel` immediately before it. `start` is for a footer that
     * REPORTS rather than acts. `space-between` separates the surface's own escape
     * from the acts, which is `composition.md`'s two-group bar.
     */
    align?: "start" | "end" | "space-between";
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * WHERE A DIALOG COMMITS — the panel's pinned action row, outside
 * {@link DialogScrollArea}.
 *
 * It sits HERE rather than in the body, because a panel has a second viewport
 * that a page does not: a commit inside the body is a Save below the fold on a
 * dialog that looks whole. `composition.md` § Commit & feedback surfaces carries
 * the rule and its reasoning.
 */
export declare function DialogFooter(props: DialogFooterProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export {};