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";
/** THE kit's label column — ~18 characters, where real field names live. A name
 *  longer than the column WRAPS inside it: the column belongs to the SURFACE, so
 *  no one field's name may push its own value out of line. */
export declare const DETAIL_LABEL_WIDTH = 130;
export interface DetailTableProps extends StyleProps {
    /** Label column width (px). Default 130. */
    labelWidth?: number;
    /** Min row height. Default 40 (`CONTROL_HEIGHT`) so editor, static,
     *  and custom rows all sit on the inline-control baseline grid. */
    minHeight?: number;
    /** The usable width the value cell must keep before the table STACKS
     *  (default {@link MIN_VALUE_WIDTH}). Raise it when a cell holds MORE than one
     *  editor. */
    minValueWidth?: number;
    /** `DetailRow`s (each inherits the table's columns; row props override). */
    children: ReactNode;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * The column grid for a stack of `DetailRow`s — one label width, one value
 * width, set ONCE on the parent instead of repeated (and drifting) per row. The
 * value column FILLS whatever the label leaves; there is no third column.
 *
 * A verb about a VALUE rides the FIELD (`InlineButton` in an editor's
 * `actions`), never a column beside it: a reserved column is paid by every row
 * for the benefit of one.
 *
 * RESPONSIVE: the table measures its own CONTAINER, not the viewport. When the
 * columns would crush the value cell below a usable width, every row STACKS.
 */
export declare function DetailTable({ labelWidth, minHeight, minValueWidth, children, testID, render, ref, ...props }: DetailTableProps): React.JSX.Element;
/** A field stack's own rhythm, for a surface whose density is not the record
 *  page's — a register's stacked row is one. Both rungs, because a table that
 *  tightens its rows tightens them at BOTH widths. */
export interface DetailTableGaps extends StyleValue {
    "--lotics-detail-table-gap": string;
    "--lotics-detail-table-stacked-gap": string;
}
export interface DetailRowProps extends FieldAnnotationProps, StyleProps {
    /** The field label — rendered `sm muted`. */
    label: ReactNode;
    /** A qualifier UNDER the label — an issue date, a reference, a unit. It
     *  qualifies the FIELD; a fact about the value goes IN the value, beside the
     *  control, for the same reason there is no trailing slot. */
    sublabel?: ReactNode;
    /** The value — any node (a `Text`, a `Status`, a stack). */
    children: ReactNode;
    /** Fixed label-column width (px). Omit for a spread row: the label takes the
     *  slack and the value sits at the right edge. Inside a `DetailTable` the
     *  table's `labelWidth` applies; this overrides per row. */
    labelWidth?: number;
    /**
     * The usable width THIS line's value must keep before it stacks. Inside a
     * `DetailTable` the table's `minValueWidth` applies; this overrides per row.
     *
     * Per LINE, because the floor is a property of the content: one number over
     * the whole stack lets the widest field stack every line beside it.
     */
    minValueWidth?: number;
    /** Label text size — `xs` for a compact peek, `sm` (default) for a drawer. */
    labelSize?: "xs" | "sm";
    /** Min row height. Default 28 (or the `DetailTable`'s `minHeight`). */
    minHeight?: number;
    /** The value is a RAW node — a plain `Text`, a figure, a pair — sitting off the
     *  inline-control grid, so annotations align to the value on BOTH axes rather
     *  than to a control's box. NOT for `InlineValue`, which composes the grid's
     *  own box and would take back both offsets this removes. */
    flat?: boolean;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * One label + value line for a drawer / peek detail view — NOT a list row
 * (that's `PressableRow` / `TableRow`). Spread by default; pass `labelWidth` to
 * align labels in a fixed left column, and the value column then FILLS the rest
 * of the row. For a stack of rows, wrap them in a `DetailTable`.
 *
 * There is no trailing slot. A verb about the VALUE goes on the field
 * (`InlineButton` in an editor's `actions`); anything else belongs IN the value.
 */
export declare function DetailRow(props: DetailRowProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;