import { TNode, ElementPosition, Value, Merge } from '@tempots/dom';
import { ArrayController } from '../controller/controller';
import { ListInputPayload, MoveDirection, MovableDirection } from '../input/list-input';
import { InputWrapperOptions } from '../input';
export type ListControllerPayload<T> = ListInputPayload<T>;
export type { MoveDirection, MovableDirection };
export type ListControlsLayout = 'below' | 'aside';
export type BaseListControlOptions<T> = {
    controller: ArrayController<T[]>;
    element: (payload: ListInputPayload<T>) => TNode;
    separator?: (pos: ElementPosition) => TNode;
    showMove?: Value<boolean>;
    showRemove?: Value<boolean>;
    showAdd?: Value<boolean>;
    /** When true, disables the remove button instead of hiding it */
    removeDisabled?: Value<boolean>;
    /** When true, disables the add button (if visible) */
    addDisabled?: Value<boolean>;
    createItem?: () => T;
    addLabel?: TNode;
    controlsLayout?: Value<ListControlsLayout>;
};
export type ListControlOptions<T> = Merge<Omit<InputWrapperOptions, 'content'>, BaseListControlOptions<T>>;
export declare const BaseListControl: <T>(options: BaseListControlOptions<T>) => import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
export declare const ListControl: <T>(options: ListControlOptions<T>, ...children: TNode[]) => import("@tempots/dom").Renderable;
