import "./fact_groups.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import { type FormFieldMeasure } from "./form_field";
import { type StyleProps } from "./style_props";
export interface FactGroupField {
    key: string;
    label: string;
    /** The id a link lands on (`CalloutLink`): the field — its label and its value — brought into view and ringed,
     *  its tab opened first where a drawer holds it in another. */
    id?: string;
    /** Marked, since an empty required fact is what the record still owes. */
    required?: boolean;
    /** Marked "Optional" — a form marks its optional fields, never its required ones. */
    optional?: boolean;
    /** Spans the row: long text, files. */
    wide?: boolean;
    /** A short value — a number, a date — that shares its line with the next short one even in a panel. */
    short?: boolean;
    /** How wide its control stands beside its label (`FormFieldMeasure`): a number, money, a day or a choice
     *  `short`, never stretched across the column; default `fill`. */
    measure?: FormFieldMeasure;
    /** An editable field's control at rest, or a read-only value as plain text. */
    body: ReactNode;
    /** `body` is a value read, not a control: at its words' pitch where its whole group is read, else on the line
     *  its group's controls sit on. */
    readOnly?: boolean | "row";
}
export interface FactGroup {
    key: string;
    /** What the fields have in common, in the reader's words; absent, the group is its fields alone. */
    title?: string;
    fields: readonly FactGroupField[];
    /** Under the fields: the group's own acts (an `ActGroup`), where what they need is these fields. */
    foot?: ReactNode;
}
export interface FactGroupsProps extends StyleProps {
    groups: readonly FactGroup[];
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A RECORD'S OWN FIELDS, in the groups the author named: each label above its value, flush left. The
 * columns are the box's — one in a panel or a drawer, where two `short` values still pair on a line by
 * what the two need (plain values in less room than two controls), two from 720px — and a `wide` field
 * spans them. From 720px a narrow group (one field, or two short ones, and no acts at its foot) takes half the
 * line, so consecutive ones sit side by side rather than each leave half the page empty; a group closed by its
 * acts spans the line, its row of buttons from edge to edge. A label too wide to stand beside its
 * pair whole, its mark included, takes the line, and its partner with it. A group's title heads a section of the record, at the section rung of the
 * surface it stands on.
 */
export declare function FactGroups(props: FactGroupsProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;