import * as React from 'react';

/**
 * A data table inside a horizontally scrolling container.
 *
 * The container scrolls whenever the table is wider than the space it has —
 * TableHead and TableCell are `whitespace-nowrap`, so a wide table cannot
 * shrink to fit. A region that scrolls but cannot take focus is unreachable
 * from the keyboard (WCAG 2.1.1; axe reports `scrollable-region-focusable`),
 * so **while the table overflows** the container becomes a named, focusable
 * region: `tabIndex={0}` so the arrow keys scroll it, `role="region"` so the
 * stop is announced, and an accessible name taken from the table's own
 * `aria-labelledby` / `aria-label`, else the TableCaption (linked by id), else
 * "Scrollable table". The `aria-label` / `aria-labelledby` stay on the
 * `<table>` too — the region borrows the name, it does not take it.
 *
 * **While the table fits, the container is a plain `<div>`** — no tab stop,
 * no landmark — so a page of fitting tables gains nothing to tab past. Both
 * states follow the layout live: a ResizeObserver watches the container (the
 * column changing width) and the table (its content changing width, which a
 * `w-full` container does not itself report). The measurement happens on the
 * client, so a server render has no tab stop until hydration; that is the
 * cost of not giving every table one.
 */
declare function Table({ className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: React.ComponentProps<'table'>): React.JSX.Element;
declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): React.JSX.Element;
declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): React.JSX.Element;
declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): React.JSX.Element;
declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): React.JSX.Element;
declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): React.JSX.Element;
declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): React.JSX.Element;
/**
 * The table's caption. Besides naming the table for everyone, it names the
 * scroll region when no explicit ARIA name is supplied: the caption takes an
 * id (the one given, else a generated one) and reports it to the Table, which
 * points `aria-labelledby` at it.
 */
declare function TableCaption({ className, id: idProp, ...props }: React.ComponentProps<'caption'>): React.JSX.Element;

export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };