import type { ReactNode } from 'react';
/**
 * Consistent INNER row heights. The row card wraps these in a 1px border on
 * each side, so the outer block lands on the designed 68px / 80px total —
 * hence the 66/78 values here.
 */
export declare const ROW_HEIGHT_DESKTOP = "h-[66px] md:h-[78px]";
export declare const ROW_HEIGHT_MOBILE = "h-[66px]";
/**
 * The row shell's inset and column gap.
 *
 * Shared by the real row (`data-table-row`), the skeleton rows below and the
 * pad rows in `data-table-body`, because a difference between them is a visible
 * shift on load — and there WAS one: all three placeholders used
 * `--spacing-system-sf` (12px) in their mobile variant while the real row uses
 * `--spacing-system-mf` (16px) at every width, so a loading table sat 4px closer
 * to the card edge than the loaded one and its content nudged over when data
 * arrived. Kept as a constant rather than three copies so that cannot drift again.
 */
export declare const ROW_SHELL_CLASSES = "items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]";
export interface DataTableSkeletonProps {
    rows?: number;
    className?: string;
    rowClassName?: string;
    /**
     * REPLACES the design row height, for a table whose rows are not that tall.
     * Sizes the CARD, as a real row does.
     * Appending a height through `rowClassName` cannot do this: tailwind-merge
     * drops the plain `h-[66px]` but keeps `md:h-[78px]`, so the override held
     * on a phone and lost on a desktop. See `DataTableBodyProps.rowHeightClassName`.
     */
    rowHeightClassName?: string;
}
export declare function DataTableSkeleton({ rows, className, rowClassName, rowHeightClassName }: DataTableSkeletonProps): import("react").JSX.Element;
/**
 * The empty state, floating centred over a full page's worth of reserved row
 * slots. Both table bodies render this — an empty table is exactly when a
 * collapsing one is most visible (the pagination and everything under it jump
 * the moment a filter matches nothing), and two hand-matched copies of the
 * wrapper would drift the way the two placeholder components already had.
 */
export declare function ReservedEmptyState({ count, gapClassName, rowHeightClassName, innerHeightClassName, children, }: {
    count: number;
    gapClassName: string;
    rowHeightClassName?: string;
    innerHeightClassName?: string;
    children: ReactNode;
}): import("react").JSX.Element;
/**
 * Invisible rows that occupy exactly one row slot each.
 *
 * THE height reservation for a table whose page is short or empty — every call
 * site uses it (data-table's pad + empty branches AND the legacy `Table`'s), so
 * a padded page and an empty one are the same height by construction rather
 * than by matching guesses in each component.
 */
export declare function PlaceholderRows({ count, rowHeightClassName, innerHeightClassName, }: {
    count: number;
    /** Height on the CARD, as `DataTableRow` carries it. */
    rowHeightClassName?: string;
    /** Height on the INNER row instead — the legacy `Table` puts it there and
     *  lets the card's border add the remaining 2px, so its pad rows must too. */
    innerHeightClassName?: string;
}): import("react").JSX.Element;
//# sourceMappingURL=data-table-skeleton.d.ts.map