import "./reorder_item.css"; import { type ReactNode } from "react"; import type * as React from "react"; import { useRender } from "@base-ui/react/use-render"; import type { ReorderControls } from "./reorder_list"; import { type StyleProps } from "./style_props"; /** The rail column (12) plus the row gap (10), for content lining up under the rows (an "Add" button, a * caption), so callers never hand-pick a drifting number. */ export declare const REORDER_ITEM_INSET = 22; export interface ReorderItemLabels { /** The up control's name, and tooltip with no label. Default `Move ${label} up` / `Move up`. */ moveUp?: (label: string | undefined) => string; moveDown?: (label: string | undefined) => string; remove?: (label: string | undefined) => string; } export interface ReorderItemProps extends StyleProps { /** `ReorderList`'s bundle for this row; a buttons list hands no drag props, so the row draws the rail. */ reorder: ReorderControls; /** Required: the only thing telling ten "move up" buttons apart to a screen reader. */ itemLabel: string; children: ReactNode; /** Derived from the index by the caller (`Origin`, `Via`, `Destination`), never stored, since reordering * would make it lie. */ positionLabel?: string; /** Default 74. */ positionWidth?: number; /** Omit for no ✕ on a list nobody removes from; `null` draws it disabled so the right edge never jogs. */ onRemove?: (() => void) | null; labels?: ReorderItemLabels; testID?: string; ref?: React.Ref; render?: useRender.RenderProp; } /** One row of a {@link ReorderList}. The up/down pair is the only non-pointer way to reorder (WCAG 2.1.1), * and it lives in the row so no caller can forget it; disabled at the ends, never absent, so the edge * stays put. The leading edge is a grip for drag lists, or the connected rail for button lists, where * order is the data. */ export declare function ReorderItem(props: ReorderItemProps): React.ReactElement>;