/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { getStyles } from "../../styles/styler.js";
import { Text } from "../Text.js";
import { Box } from "../Box.js";
import { forwardRef, isValidElement } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/experimental/Table.tsx
const TableRoot = forwardRef(function TableRoot({ children, className, display = "table", overflow = "hidden", borderColor = "muted", borderRadius = "md", ...props }, ref) {
	return /* @__PURE__ */ jsx(Box, {
		asChild: true,
		borderColor,
		borderRadius,
		className,
		overflow,
		display,
		...props,
		children: /* @__PURE__ */ jsx("table", {
			ref,
			children
		})
	});
});
TableRoot.displayName = "TableRoot";
const TableRow = forwardRef(function TableRow({ children, display = "table-row", ...props }, ref) {
	return /* @__PURE__ */ jsx(Box, {
		asChild: true,
		display,
		...props,
		children: /* @__PURE__ */ jsx("tr", {
			ref,
			children
		})
	});
});
TableRow.displayName = "TableRow";
const TableHeader = forwardRef(function TableHeader({ children, display = "table-header-group", ...props }, ref) {
	return /* @__PURE__ */ jsx(Box, {
		asChild: true,
		display,
		...props,
		children: /* @__PURE__ */ jsx("thead", {
			ref,
			children
		})
	});
});
TableHeader.displayName = "TableHeader";
const TableBody = forwardRef(function TableBody({ children, display = "table-row-group", ...props }, ref) {
	return /* @__PURE__ */ jsx(Box, {
		asChild: true,
		display,
		...props,
		children: /* @__PURE__ */ jsx("tbody", {
			ref,
			children
		})
	});
});
TableBody.displayName = "TableBody";
const TableCell = forwardRef(function TableCell({ asHeaderCell, className, display = "table-cell", spacing = "3", borderBottomColor = "muted", borderBottomWidth = "thin", color = "primary", ...props }, ref) {
	const classNames = getStyles({
		textAlign: "start",
		className
	});
	return /* @__PURE__ */ jsx(Text, {
		asChild: true,
		variant: asHeaderCell ? "headline1" : "body1",
		color,
		display,
		spacing,
		borderBottomColor,
		borderBottomWidth,
		className: classNames,
		children: /* @__PURE__ */ jsx(asHeaderCell ? "th" : "td", {
			scope: asHeaderCell === "row" ? "row" : asHeaderCell ? "column" : void 0,
			...props,
			ref
		})
	});
});
TableCell.displayName = "TableCell";
Table.Root = TableRoot;
Table.Row = TableRow;
Table.Header = TableHeader;
Table.Body = TableBody;
Table.Cell = TableCell;
/**
* 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!
*/
function Table({ data, columns, ...props }) {
	return /* @__PURE__ */ jsxs(Table.Root, {
		...props,
		children: [/* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsx(Table.Row, { children: columns.map((column, index) => /* @__PURE__ */ jsx(Table.Cell, {
			asHeaderCell: "column",
			children: column.title
		}, index)) }) }), /* @__PURE__ */ jsx(Table.Body, { children: data.map((record, rowIndex) => /* @__PURE__ */ jsx(Table.Row, { children: columns.map((column, colIndex) => {
			const cellData = record[column.dataIndex];
			return /* @__PURE__ */ jsx(Table.Cell, { children: column.render ? column.render(cellData, record, rowIndex) : isValidElement(cellData) ? cellData : String(cellData) }, colIndex);
		}) }, rowIndex)) })]
	});
}
Table.displayName = "Table";
//#endregion
export { Table };
