import { PointerEvent as ReactPointerEvent, RefObject } from 'react';
/**
 * Drag-to-resize the submit button.
 *
 * The fields above are sized by grid columns and get their widths from what
 * shares their row, so they need no handle. The button is the exception: it
 * sits outside the grid — that is what lets `margin-top: auto` sink it to the
 * bottom of a short card — so its width is its own, a percentage of the form
 * body, and the only way to set it is to say so.
 *
 * Pointer events for the reasons {@link useDragSort} is built on them: the
 * editor ships inside a shadow root and the gesture has to survive a finger.
 */
/** Percentage points the width snaps to. Fine enough to place, coarse enough to hit. */
export declare const WIDTH_STEP = 5;
/**
 * Narrowest the button may get, in percent. Low enough that a short label's
 * natural width sits above it — a floor the button already starts below would
 * yank it outward on the first pixel of every drag.
 */
export declare const MIN_WIDTH = 10;
/**
 * The width the button already has, as a percentage of the body.
 *
 * Measured rather than assumed. An unsized button is not 100% wide: its auto
 * inline margins centre it, and auto margins on the cross axis switch off the
 * stretch a flex column would otherwise apply, so it shrinks to fit its label.
 * Starting a drag from 100 would snap it out to full width before the pointer
 * had moved at all.
 */
export declare function startPercentOf(elementPx: number, containerPx: number): number;
/**
 * The width a drag lands on, given where it started and how far the pointer
 * travelled. Pure so the arithmetic can be checked directly.
 *
 * The button is centred, so its trailing edge moves half as far as its width
 * changes — drag the edge 10px and the button grows 10px on each side. Doubling
 * the travel is what keeps the edge under the pointer.
 */
export declare function widthFromDrag(startPercent: number, travel: number, containerWidth: number): number;
export interface WidthResize {
    /** The item being resized, or null when no drag is running. */
    resizingId: string | null;
    /** The width it currently shows, in percent. The model still holds the old one. */
    previewWidth: number | null;
    /**
     * Call from a handle's `onPointerDown` to arm a resize. The width it starts
     * from is read off the button itself, so a press alone changes nothing.
     */
    start: (id: string, e: ReactPointerEvent) => void;
}
export declare function useWidthResize(
/** The form body, which is what a percentage width resolves against. */
bodyRef: RefObject<HTMLElement | null>, onCommit: (id: string, width: number) => void, 
/** Right-to-left forms grow the trailing edge leftwards. */
rtl?: boolean): WidthResize;