import "./data_grid.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import { type SortState, type SortHeaderLabels } from "./sort_header";
import { type StyleProps } from "./style_props";
export interface DataGridColumn<T> {
    key: string;
    label: string;
    /** Fixed width in px; omit for the flexible primary column (usually the first). */
    width?: number;
    /** Cell + header alignment. Money and counts read RIGHT so digits line up under
     *  their heading; text reads left (the default). */
    align?: "left" | "right";
    sortable?: boolean;
    /** Render the cell for this column — any field: a `Text`, an inline editor, a badge. */
    cell: (item: T) => ReactNode;
    /** This column's cell in the group's FOOTER row — a subtotal, a resolved
     *  measure. The footer row renders when ANY column defines one. */
    footer?: (group: DataGridGroup<T>) => ReactNode;
}
export interface DataGridGroup<T> {
    key: string;
    /** The group's header content — a `Status`, a `MemberChip`, a label. Omit for a
     *  single ungrouped section (no header, no collapse). */
    header?: ReactNode;
    items: T[];
}
export interface DataGridProps<T> extends StyleProps {
    columns: DataGridColumn<T>[];
    /** Pre-grouped, pre-sorted data (the consumer owns grouping/sort/filter). One headerless group = ungrouped. */
    groups: DataGridGroup<T>[];
    getRowKey: (item: T) => string;
    /** A per-row leading slot (e.g. a `Checkbox shape="ring"`) and the gutter it reserves so the header lines up. */
    leading?: {
        width: number;
        render: (item: T) => ReactNode;
    };
    sort?: SortState | null;
    /** Pair with `cycleSort` to cycle a column (none → asc → desc). Sorting itself is the consumer's (`sortBy`). */
    onSort?: (key: string) => void;
    labels?: SortHeaderLabels;
    /** Controlled collapse — the set of collapsed group keys. */
    collapsed?: Set<string>;
    onToggleCollapse?: (key: string) => void;
    /** Rendered under each group's rows AND under the columns' own footer row —
     *  for content that does NOT sit in a column, typically a per-group add row.
     *  For a column-aligned subtotal use `DataGridColumn.footer`. */
    renderGroupFooter?: (group: DataGridGroup<T>) => ReactNode;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * The row layout the grid uses — reuse it for an aligned per-group add row in
 * `renderGroupFooter`. It IS the register band, the same numbers the sheet reads
 * through `--lotics-register-*`.
 */
export declare const gridRowStyle: {
    readonly flexDirection: "row";
    readonly alignItems: "center";
    readonly gap: 12;
    readonly minHeight: 40;
};
/**
 * The INLINE-MANAGED grouped table. It owns the sortable header, the collapsible
 * sections and the column-aligned rows; the consumer owns the data, the state and
 * every cell. It renders ALL rows — no pagination, no virtualization.
 */
export declare function DataGrid<T>(props: DataGridProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;