import type React from "react";
import type { Icon } from "../icon.js";
import type { BadgeColor } from "./badge.js";
/**
 * A component for displaying tabular data.
 *
 * @example
 *
 * import { Table, Link, Button } from "attio/client"
 *
 * export function MyDialog() {
 *     return (
 *         <Table label="Team Members">
 *             <Table.Header>
 *                 <Table.HeaderCell icon="user">Name</Table.HeaderCell>
 *                 <Table.HeaderCell icon="user">Avatar</Table.HeaderCell>
 *                 <Table.HeaderCell icon="envelope">Portfolio</Table.HeaderCell>
 *                 <Table.HeaderCell>Role</Table.HeaderCell>
 *                 <Table.HeaderCell>Status</Table.HeaderCell>
 *                 <Table.HeaderCell>Actions</Table.HeaderCell>
 *             </Table.Header>
 *             <Table.Body>
 *                 <Table.Row>
 *                     <Table.Cell>John Doe</Table.Cell>
 *                     <Table.Cell>
 *                         <Table.Cell.Avatar name="John Doe" src="https://example.com/avatar.jpg" />
 *                     </Table.Cell>
 *                     <Table.Cell>
 *                         <Link href="https://example.com">John's Portfolio</Link>
 *                     </Table.Cell>
 *                     <Table.Cell>
 *                         <Table.Cell.Badge color="blue">Admin</Table.Cell.Badge>
 *                     </Table.Cell>
 *                     <Table.Cell>
 *                         <Table.Cell.Badge color="green">Active</Table.Cell.Badge>
 *                     </Table.Cell>
 *                     <Table.Cell>
 *                         <Button label="Delete" onClick={() => {}} />
 *                     </Table.Cell>
 *                 </Table.Row>
 *             </Table.Body>
 *         </Table>
 *     )
 * }
 */
export declare const Table: ((props: {
    /**
     * An optional label of the table.
     */
    label?: string;
    /**
     * The table contents. Must contain exactly one Table.Header and one Table.Body.
     */
    children: React.ReactNode;
}) => React.JSX.Element) & {
    /**
     * The table header row. This component can only be a direct child of a Table component.
     * It must contain only Table.HeaderCell components.
     */
    Header: (props: {
        /**
         * The header cells. Must contain only Table.HeaderCell components.
         */
        children: React.ReactNode;
    }) => React.JSX.Element;
    /**
     * A header cell. This component can only be a direct child of a Table.Header component.
     */
    HeaderCell: (props: {
        /**
         * An optional icon for the header cell.
         */
        icon?: Icon;
        /**
         * The text content of the header cell.
         */
        children: string;
    }) => React.JSX.Element;
    /**
     * The table body. This component can only be a direct child of a Table component.
     * It must contain only Table.Row components.
     */
    Body: (props: {
        /**
         * The table rows. Must contain only Table.Row components.
         */
        children: React.ReactNode;
    }) => React.JSX.Element;
    /**
     * A table row. This component can only be a direct child of a Table.Body component.
     * It must contain the same number of Table.Cell components as there are Table.HeaderCell components.
     */
    Row: (props: {
        /**
         * The table cells. Must contain only Table.Cell components.
         */
        children: React.ReactNode;
    }) => React.JSX.Element;
    /**
     * A table cell. This component can only be a direct child of a Table.Row component.
     * It may contain text, Link components, Table.Cell.Badge components, Table.Cell.Avatar
     * components, or Button components. If a cell contains buttons, it must only contain buttons.
     */
    Cell: ((props: {
        /**
         * The content of the table cell, either text (with links), badges, avatars, or buttons.
         */
        children: React.ReactNode;
    }) => React.JSX.Element) & {
        /**
         * A badge component for use inside a Table.Cell. If a cell contains badges, it must only contain badges.
         */
        Badge: (props: {
            /**
             * The text content of the badge. Only text children are allowed.
             */
            children: string;
            /**
             * The color of the badge.
             */
            color: BadgeColor;
        }) => React.JSX.Element;
        /**
         * An avatar component for use inside a Table.Cell. If a cell contains avatars, it must only contain avatars.
         */
        Avatar: (props: {
            /**
             * The name of the person or entity represented by the avatar.
             */
            name: string;
            /**
             * The URL of the avatar image.
             */
            src: string | null | undefined;
        }) => React.JSX.Element;
    };
};
//# sourceMappingURL=table.d.ts.map