import { default as React } from 'react';
/** Minimum size at which to show a column. "*" means "all" */
export type ColMinBreakpoint = "*" | "s" | "m" | "l";
/** Subset of breakpoints that can be returned by `useBreakpoints` hook */
export type ViewportBreakpoint = "s" | "m" | "l";
/**
 * Valid CSS value for `grid-template-columns`.
 */
export type CSSValue = string;
/** For each breakpoint key, a valid `grid-template-columns` value */
export type ColLayoutConfig = {
    s: CSSValue;
    m: CSSValue;
    l: CSSValue;
};
export interface TableProps {
    children: React.ReactNode;
    /**
     * Array describing when each column should be visible.
     * If omitted, all columns will be visible regardless of viewport size.
     *
     * @usage
     * First and last col always shown, middle col shown at "m" and up:
     * `[ "*", "m", "*" ]`
     */
    colVisibility: ColMinBreakpoint[];
    /**
     * Specify a function that returns a `grid-template-columns` CSS value for each breakpoint.
     * These are "mobile-first", so "m" means "the browser is at m or larger".
     *
     * Each function is provided with a `cols` argument.
     */
    colLayout?: ColLayoutConfig;
    rowDensity?: "default" | "compact";
    kind?: "default" | "editable";
    /**
     * Pin edge columns while middle columns scroll horizontally.
     * - `"none"` (default): no pinning, no horizontal scroll
     * - `"start"` — pin the first column
     * - `"end"` — pin the last column
     * - `"both"` — pin both first and last columns
     *
     * When set to a value other than `"none"`, the table becomes horizontally scrollable.
     */
    pinColumns?: "none" | "start" | "end" | "both";
}
export declare const DEFAULT_COLS = 5;
export declare const defaultColVisibility: ColMinBreakpoint[];
/**
 * Layout helper for building responsive tables.
 * This component allows you to define the visibility of each column by named breakpoint.
 * You may also specify a custom `grid-template-columns` CSS value for each breakpoint.
 *
 * If a design calls for a different presentation of the data at the smallest viewports, you may use `useBreakpoints` to conditionally render a list view.
 */
declare const Table: {
    ({ children, colVisibility, colLayout, rowDensity, kind, pinColumns, }: TableProps): React.JSX.Element;
    Header: ({ children }: {
        children: React.ReactNode;
    }) => React.JSX.Element;
    Body: ({ children }: {
        children: React.ReactNode;
    }) => React.JSX.Element;
    Row: ({ children, onRowClick }: import('./Row').TableRowProps) => React.JSX.Element;
    Cell: ({ children, textAlign, _colIndex }: import('./Cell').CellProps) => React.JSX.Element;
    HeaderCell: ({ children, textAlign, onClick, _colIndex, }: import('./HeaderCell').HeaderCellProps) => React.JSX.Element;
};
export default Table;
//# sourceMappingURL=index.d.ts.map