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