import { type ComponentType, type ReactNode } from "react";
import { type ColorTokens, type TextStyle, type ViewStyle, type LayoutStyle, type MeasureProps } from "../../style/index.js";
import { type ButtonProps } from "../../atoms/button/button.shared.js";
export type ButtonComponent = ComponentType<ButtonProps>;
export interface FormSkin {
    /** A section's heading type (size / line-height / weight / tracking). */
    sectionTitle: (t: ColorTokens) => TextStyle;
    /** The muted supporting line under a section heading. */
    sectionDescription: (t: ColorTokens) => TextStyle;
    /** The right-aligned actions row, with its rule above. */
    actions: (t: ColorTokens) => ViewStyle;
    /** The form's stacked rhythm (gap between rows). */
    stack: ViewStyle;
    /** A section: its internal rhythm (header block to rows, row to row) and its closing rule. */
    section: (t: ColorTokens) => ViewStyle;
    /** The `aside` section: its heading rail beside its rows, stacking below `stackAt`. */
    aside: {
        /** The section box: the rail and rows side by side or stacked, its insets and closing rule. */
        section: (t: ColorTokens, place: {
            side: boolean;
            first: boolean;
        }) => ViewStyle;
        /** The heading rail's box. */
        rail: (side: boolean) => ViewStyle;
        /** The rows' column. */
        rows: (side: boolean) => ViewStyle;
        title: (t: ColorTokens) => TextStyle;
        description: (t: ColorTokens) => TextStyle;
        /** The section width (px) at and below which the rail stacks over the rows. */
        stackAt: number;
    };
    /** What the actions row changes after a closing aside section (the section's rule closes the form). */
    actionsAfterAside: ViewStyle;
    /** What the actions row changes when it carries `hints`. */
    actionsWithHints: ViewStyle;
    /** The whole form's opacity while `disabled`. */
    disabledOpacity: number;
}
export interface FormSectionProps {
    /** Section heading naming this group of controls. */
    title?: string;
    /** Muted supporting line under the heading. */
    description?: ReactNode;
    /**
     * Sets the heading in a rail beside the section's rows (a settings page's layout): the
     * rail at the `xs` width step, 48 from the rows, with a 20 px display title over a
     * 14 px description, the rows 18 apart, and 28 above and below the rows closed by a
     * rule. In a section 512 px wide or narrower (the `lg` step, measured on the section
     * itself) the rail stacks over the rows. Omit for the stacked default.
     */
    aside?: boolean;
    /** The section's stitched controls. */
    children?: ReactNode;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
export interface FormProps extends MeasureProps {
    /**
     * The form rows, stitched by the caller: Input, Select, Checkbox, a
     * FormSection, any node. Each control keeps its own state (controlled or
     * uncontrolled); Form never intercepts it.
     */
    children?: ReactNode;
    /**
     * Two-column: rows flow into a grid of exactly two equal columns, 16 apart, where a
     * FormSection takes the whole line; in a form 512 px wide or narrower (the `lg` width
     * step, measured on the form itself) the rows stack in one full-width column instead.
     * Omit for the stacked default.
     */
    twoColumn?: boolean;
    /**
     * Leading content of the actions row, before the buttons (keyboard hints such as
     * "↵ to save"). The row then spreads the hints and the buttons to its two ends.
     */
    hints?: ReactNode;
    /** Label for the primary submit button. Passing it (or `cancelLabel`) renders the actions row. */
    submitLabel?: string;
    /** Renders a ghost cancel button before the submit button. */
    cancelLabel?: string;
    /**
     * The actions take `block`: the cancel and submit buttons split the actions row equally
     * (the Layout page's compact invite form, where the buttons go full width).
     */
    block?: boolean;
    /**
     * Fired when the submit button is pressed, and on the web when Enter is
     * pressed inside one of the form's single-line text fields. Form owns no field
     * state, so the caller reads its own values (no payload).
     */
    onSubmit?: () => void;
    /** Fired when the cancel button is pressed. */
    onCancel?: () => void;
    /** Disables the actions row and Enter-to-submit, and dims the form. */
    disabled?: boolean;
    /**
     * The form's name for assistive tech, a brief statement of its purpose ("Sign in",
     * "Invite a teammate"). Form is a form landmark on the web, and ARIA asks every
     * form landmark for a name: it is how a landmark list tells two forms on one page
     * apart. Omit it and the form stays unnamed, as before.
     */
    accessibilityLabel?: string;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
export declare function createFormSection(skin: FormSkin): ({ title, description, aside, children, testID, style }: FormSectionProps) => import("react").JSX.Element;
/** Build a Form component from a platform skin (plus the platform-correct Button its actions row composes; defaults to the web base when omitted). */
export declare function createForm(skin: FormSkin, Button?: ButtonComponent): (props: FormProps) => import("react").JSX.Element;
//# sourceMappingURL=form.shared.d.ts.map