import "./detail_row.css";
import { type ReactNode } from "react";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps, type StyleValue } from "./style_props";
import { FieldAnnotationProps } from "./field_annotations";
/** ~18 characters. Longer names wrap: the column belongs to the surface. */
export declare const DETAIL_LABEL_WIDTH = 130;
export interface DetailTableProps extends StyleProps {
    /** Default 130. */
    labelWidth?: number;
    /** Default 40 (`CONTROL_HEIGHT`), so every row sits on the inline-control grid. */
    minHeight?: number;
    /** Default {@link MIN_VALUE_WIDTH}. Raise it when a cell holds more than one editor. */
    minValueWidth?: number;
    /** Row props override the table's. */
    children: ReactNode;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * One label and value width set once on the parent. A verb about a value rides the field
 * (`InlineButton`), never a column. Measures its own container; when the value cell would be
 * crushed, every row stacks.
 */
export declare function DetailTable({ labelWidth, minHeight, minValueWidth, children, testID, render, ref, ...props }: DetailTableProps): React.JSX.Element;
/** Both rungs, since a tighter surface tightens both widths. */
export interface DetailTableGaps extends StyleValue {
    "--lotics-detail-table-gap": string;
    "--lotics-detail-table-stacked-gap": string;
}
export interface DetailRowProps extends FieldAnnotationProps, StyleProps {
    label: ReactNode;
    /** Qualifies the field; a fact about the value goes in the value. */
    sublabel?: ReactNode;
    children: ReactNode;
    /** Omit for a spread row (value at the right edge). Overrides a `DetailTable`'s `labelWidth`. */
    labelWidth?: number;
    /**
     * Overrides the table's `minValueWidth`. Per line, so the widest field does not stack every line.
     */
    minValueWidth?: number;
    /**
     * Prose takes a reading-measure floor, so a note stacks where it would wrap every few words,
     * whatever box holds it.
     */
    prose?: boolean;
    /** `xs` for a compact peek, `sm` (default) for a drawer. */
    labelSize?: "xs" | "sm";
    /** Default 28 (or the table's `minHeight`). */
    minHeight?: number;
    /** A raw node off the control grid, so annotations align to the value itself. */
    flat?: boolean;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * One label + value line for a drawer or peek, not a list row (`PressableRow` / `TableRow`). Spread
 * by default; `labelWidth` fixes the label column. No trailing slot: a value verb rides the field,
 * anything else goes in the value.
 */
export declare function DetailRow(props: DetailRowProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;