import { ElementPosition, Signal, TNode } from '@tempots/dom';
import { ArrayController, Controller } from '../controller/controller';
/**
 * Payload passed to the element render function of a {@link ListInput}.
 * Provides the controller, item data, position information, and
 * actions for removing and reordering items.
 *
 * @typeParam T - The type of individual list items.
 */
export type ListInputPayload<T> = {
    /** The array controller managing the entire list. */
    list: ArrayController<T[]>;
    /** The controller for this specific item. */
    item: Controller<T>;
    /** The element's position information (index, isFirst, isLast, etc.). */
    position: ElementPosition;
    /** Removes this item from the list. */
    remove: () => void;
    /** Moves this item in the specified direction. */
    move: (direction: MoveDirection) => void;
    /** Returns a reactive signal indicating whether the item can be moved in the given direction. */
    canMove: (direction: MovableDirection) => Signal<boolean>;
    /** Returns a reactive signal indicating whether the item cannot be moved in the given direction. */
    cannotMove: (direction: MovableDirection) => Signal<boolean>;
};
/**
 * Direction in which a list item can be moved.
 */
export type MoveDirection = 'up' | 'down' | 'first' | 'last';
/**
 * Directions that can be checked for movability (only up and down, since
 * first/last are always possible when movement in that direction is possible).
 */
export type MovableDirection = 'up' | 'down';
/**
 * A dynamic list input component that renders a repeating set of items from an
 * array controller. Each item receives a payload with actions for removal and
 * reordering (move up, down, first, last).
 *
 * @typeParam T - The type of individual list items.
 * @param controller - The array controller managing the list state.
 * @param element - Render function called for each list item. Receives a
 *   {@link ListInputPayload} with the item controller and action callbacks.
 * @param separator - Optional render function for separators between items.
 * @returns A renderable list of items with management actions.
 *
 * @example
 * ```ts
 * ListInput(
 *   myArrayController,
 *   ({ item, remove, move, canMove }) =>
 *     html.div(
 *       TextInput({ value: item.signal, onChange: item.set }),
 *       html.button(on.click(remove), 'Remove'),
 *       html.button(
 *         attr.disabled(canMove('up').map(v => !v)),
 *         on.click(() => move('up')),
 *         'Move Up'
 *       ),
 *     )
 * )
 * ```
 */
export declare function ListInput<T>(controller: ArrayController<T[]>, element: (payload: ListInputPayload<T>) => TNode, separator?: (pos: ElementPosition) => TNode): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
