import { type ComponentProps, type ReactNode } from "react";
import { Dialog as DialogPrimitive } from "radix-ui";
import { Sheet, SheetTrigger } from "./sheet.js";
export type DetailPresentation = "sheet" | "preview" | "page" | "inline";
/** Where the enclosing detail view is shown. */
export declare function useDetailPresentation(): DetailPresentation;
/** The sheet root. Control it with `open` and `onOpenChange` (tie it to the URL). */
export declare function DetailSheet(props: ComponentProps<typeof Sheet>): import("react").JSX.Element;
export declare const DetailSheetTrigger: typeof SheetTrigger;
export interface DetailSheetContentProps extends Omit<ComponentProps<typeof DialogPrimitive.Content>, "children"> {
    children: ReactNode;
}
/**
 * The 520px right sheet: full height, full screen on phones, slides in over
 * 200ms (reduced motion skips it). Children are a DetailHeader, a DetailBody
 * and an optional DetailFooter. Pass `aria-describedby={undefined}` when the
 * header has no subtitle.
 */
export declare function DetailSheetContent({ children, className, onOpenAutoFocus, onCloseAutoFocus, ...props }: DetailSheetContentProps): import("react").JSX.Element;
/**
 * The same sheet panel without the overlay, in the page flow. For docs,
 * previews and screenshots; `onClose` wires the header's close button.
 */
export declare function DetailSheetPreview({ children, label, onClose, className, }: {
    children: ReactNode;
    /** Accessible name of the region, usually the object's name. */
    label: string;
    onClose?: (() => void) | undefined;
    className?: string | undefined;
}): import("react").JSX.Element;
export interface DetailBackLink {
    label: ReactNode;
    href?: string | undefined;
    onClick?: (() => void) | undefined;
}
/** A deep-linkable detail page on the standard 960px column. */
export declare function DetailPage({ back, children, className, }: {
    /** "Variable sets": the list this page belongs to. */
    back?: DetailBackLink | undefined;
    children: ReactNode;
    className?: string | undefined;
}): import("react").JSX.Element;
/** "← Variable sets": the back link a detail page, or a page opened from another scope, starts with. */
export declare function BackLink({ back }: {
    back: DetailBackLink;
}): import("react").JSX.Element;
/**
 * Detail expanded in place under a list row. Pass it as a ListRow `panel`.
 * Keep it to one level of secondary options; anything larger is a sheet.
 */
export declare function DetailInline({ children, className }: {
    children: ReactNode;
    className?: string;
}): import("react").JSX.Element;
export interface DetailHeaderProps {
    /** A 40px LogoTile or avatar. Sheet and page. */
    leading?: ReactNode | undefined;
    title: ReactNode;
    /** One line under the title: "ChatGPT Pro · Workspace". */
    subtitle?: ReactNode | undefined;
    /** A StatusBadge (and role chips) next to the title. */
    status?: ReactNode | undefined;
    /** A ⋯ menu, or a page's primary action. */
    actions?: ReactNode | undefined;
    /** Show the sheet's close button. Default true. */
    showClose?: boolean | undefined;
    className?: string | undefined;
}
export declare function DetailHeader({ leading, title, subtitle, status, actions, showClose, className, }: DetailHeaderProps): import("react").JSX.Element;
/** The scrolling body. Sections inside are split by hairlines. */
export declare function DetailBody({ children, className }: {
    children: ReactNode;
    className?: string;
}): import("react").JSX.Element;
export interface DetailSectionProps {
    title?: ReactNode | undefined;
    /** One line under the title. */
    description?: ReactNode | undefined;
    /** A small action, vertically centred with the title: "Edit", "Add variable". */
    action?: ReactNode | undefined;
    children?: ReactNode | undefined;
    className?: string | undefined;
}
/**
 * A borderless section: the 16/600 section title (14/600 inline), 12px
 * description, content 12px below.
 */
export declare function DetailSection({ title, description, action, children, className, }: DetailSectionProps): import("react").JSX.Element;
/** Facts as label/value rows. Stacks under 440px of width. */
export declare function DetailFacts({ children, className }: {
    children: ReactNode;
    className?: string;
}): import("react").JSX.Element;
export declare function DetailFact({ label, children, action, }: {
    label: ReactNode;
    children: ReactNode;
    /** One small control at the end of the row: "Rename", "Edit". */
    action?: ReactNode | undefined;
}): import("react").JSX.Element;
/**
 * The footer. In a sheet it is sticky and opaque: the destructive action as a
 * ghost on the left (`start`), Cancel or Done and the one primary on the right.
 */
export declare function DetailFooter({ start, children, className, }: {
    /** The quiet destructive action, or a short status line. */
    start?: ReactNode | undefined;
    /** Cancel or Done, then the primary. */
    children?: ReactNode | undefined;
    className?: string | undefined;
}): import("react").JSX.Element;
export interface DetailFooterConfirmProps {
    /** The question with the real name: "Disconnect ops@acme.dev?" */
    title: ReactNode;
    /** The real consequence, one or two short sentences. */
    description?: ReactNode | undefined;
    /** Verb + object, or the bare verb: "Disconnect". */
    confirmLabel: ReactNode;
    cancelLabel?: ReactNode | undefined;
    onConfirm?: (() => void) | undefined;
    onCancel?: (() => void) | undefined;
    /** The action is running: both buttons disable and the label can change. */
    pending?: boolean | undefined;
    className?: string | undefined;
}
/**
 * The footer turned into a quick confirm for a destructive action on the
 * object itself (Disconnect, Revoke): the question with the real name, the
 * consequence, then Cancel and the destructive button. Anything with
 * dependencies to review, or that can't be undone for other people, uses the
 * destructive confirm dialog instead.
 */
export declare function DetailFooterConfirm({ title, description, confirmLabel, cancelLabel, onConfirm, onCancel, pending, className, }: DetailFooterConfirmProps): import("react").JSX.Element;
/** Loading placeholder with the header and fact rows in place. */
export declare function DetailSkeleton({ sections }: {
    sections?: number;
}): import("react").JSX.Element;