
import { UniversalTextProps } from "../../types/dist/index.js";
import "../../tokens/index.js";
import { BoxProps } from "../Box.js";
import { TextProps } from "../Text.js";
import "../index.js";
import React, { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes } from "react";
import * as react_jsx_runtime0 from "react/jsx-runtime";

//#region src/components/experimental/Table.d.ts
/**
 * TableColumn
 * A TableColumn is a definition of a column in a table.
 */
type TableColumn<T> = {
  title?: string;
  dataIndex: keyof T;
  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
};
type TableRootProps = TableHTMLAttributes<HTMLTableElement> & BoxProps & {
  /** Sets whether an element is treated as a block or inline box and the
   *  layout used for its children, such as flow layout, grid or flex.
   *  @default "table"
   */
  display?: BoxProps['display'];
};
type HTMLTableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'color' | 'height' | 'width'>;
interface TableCellProps extends Omit<UniversalTextProps, 'color'>, HTMLTableCellProps {
  /** asHeaderCell will return a th element instead of a td element.
   *  If asHeaderCell is row, it will return a th element with scope="row"
   *  @default false
   */
  asHeaderCell?: boolean | 'column' | 'row';
  color?: TextProps['color'];
}
/**
 * Table component props
 * @template T The type of data in the table.
 */
type TableProps<T> = {
  /** An array of data for the table. Each item represents a row in the table.
   * The keys of each item should match the `dataIndex` of the columns.
   */
  data: T[];
  /** An array of columns for the table. Each item defines a column in the table.
   * The `dataIndex` should match the key of the data item.
   */
  columns: TableColumn<T>[];
} & TableRootProps;
/**
 * The Table component renders a table with the given data and columns.
 * If you want more control over the table, or want to handle virtualization,
 * drag-n-drop, etc, Please can use the sub-components directly and build your own!
 */
declare function Table<T>({
  data,
  columns,
  ...props
}: TableProps<T>): react_jsx_runtime0.JSX.Element;
declare namespace Table {
  var Root: React.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & BoxProps & {
    /** Sets whether an element is treated as a block or inline box and the
     *  layout used for its children, such as flow layout, grid or flex.
     *  @default "table"
     */
    display?: BoxProps["display"];
  } & {
    children?: React.ReactNode | undefined;
  } & React.RefAttributes<HTMLTableElement>>;
  var Row: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & BoxProps & {
    children?: React.ReactNode | undefined;
  } & React.RefAttributes<HTMLTableRowElement>>;
  var Header: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
    children?: React.ReactNode | undefined;
  } & React.RefAttributes<HTMLTableSectionElement>>;
  var Body: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
    children?: React.ReactNode | undefined;
  } & React.RefAttributes<HTMLTableSectionElement>>;
  var Cell: React.ForwardRefExoticComponent<TableCellProps & {
    children?: React.ReactNode | undefined;
  } & React.RefAttributes<HTMLTableCellElement | HTMLTableHeaderCellElement>>;
  var displayName: string;
}
//#endregion
export { Table, type TableColumn, type TableProps };