@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/data/DataTable.js

@@ -1,446 +1,479 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { memo, useMemo, useState, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { addAlpha } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
 import { Tooltip } from "../overlays/Tooltip.js";
-import { addAlpha } from "../../utils/index.js";
-const STATUS_DOT_COLORS = {
-  normal: "#56F000",
-  caution: "#FCE83A",
-  serious: "#FFB302",
-  critical: "#FF3838",
-  standby: "#2DCCFF",
-  off: "#9EA7AD"
-};
-const DataTableRowDetail = memo(function DataTableRowDetail2({
-  title,
-  subtitle,
-  fields,
-  footer,
-  icon,
-  maxWidth = 320
-}) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsxs("div", { style: { maxWidth, minWidth: 180 }, children: [
-    (title || icon) && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: tokens.spacing.sm,
-      marginBottom: (fields == null ? void 0 : fields.length) || subtitle ? tokens.spacing.sm : 0
-    }, children: [
-      icon,
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-        title && /* @__PURE__ */ jsx("div", { style: {
-          fontWeight: tokens.typography.fontWeight.semibold,
-          fontSize: tokens.typography.fontSize.sm,
-          color: tokens.colors.text.primary,
-          lineHeight: 1.3,
-          overflow: "hidden",
-          textOverflow: "ellipsis"
-        }, children: title }),
-        subtitle && /* @__PURE__ */ jsx("div", { style: {
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.tertiary,
-          marginTop: 2
-        }, children: subtitle })
-      ] })
-    ] }),
-    fields && fields.length > 0 && /* @__PURE__ */ jsx("div", { style: {
-      display: "grid",
-      gridTemplateColumns: "auto 1fr",
-      gap: `${tokens.spacing.xs} ${tokens.spacing.md}`,
-      fontSize: tokens.typography.fontSize.xs,
-      lineHeight: 1.5
-    }, children: fields.map((field, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { style: {
-        color: tokens.colors.text.tertiary,
-        whiteSpace: "nowrap"
-      }, children: field.label }),
-      /* @__PURE__ */ jsx("span", { style: {
-        color: field.status ? STATUS_DOT_COLORS[field.status] || tokens.colors.text.primary : tokens.colors.text.primary,
-        fontFamily: field.mono ? tokens.typography.fontFamily.mono : "inherit",
-        fontVariantNumeric: field.mono ? "tabular-nums" : "normal",
-        textAlign: "right",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      }, children: field.value })
-    ] }, i)) }),
-    footer && /* @__PURE__ */ jsx("div", { style: {
-      marginTop: tokens.spacing.sm,
-      paddingTop: tokens.spacing.xs,
-      borderTop: `1px solid ${addAlpha(tokens.colors.border.muted, 0.19)}`,
-      fontSize: tokens.typography.fontSize.xxs,
-      color: tokens.colors.text.tertiary
-    }, children: footer })
-  ] });
+import React, { memo, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/data/DataTable.tsx
+/**
+* @zendir/ui - DataTable Component
+*
+* Structured data display with expandable groups, responsive columns,
+* and theme-aware styling. Designed for telemetry parameter grids,
+* link budget displays, spacecraft information panels.
+*
+* Astro UX Compliance:
+* - Tabular monospace numbers for value columns
+* - Status-based row coloring
+* - Compact mode support
+* - Accessible table semantics
+*
+* Enhanced Tooltip System:
+* - Row-level tooltips (string or rich ReactNode via rowTooltipContent)
+* - Cell-level tooltips per column definition
+* - Header tooltips for column descriptions
+* - Built-in DataTableRowDetail component for structured detail views
+* - Portal-rendered, WCAG-compliant, animated tooltips
+*
+* @example
+* ```tsx
+* <DataTable
+*   columns={[
+*     { key: 'label', header: 'Parameter', width: '40%', headerTooltip: 'Telemetry parameter name' },
+*     { key: 'value', header: 'Value', align: 'right', mono: true, cellTooltip: (v, row) => `Raw: ${v}` },
+*     { key: 'unit', header: 'Unit', width: 80 },
+*   ]}
+*   data={[
+*     { label: 'Frequency', value: '437.500', unit: 'MHz' },
+*     { label: 'Bandwidth', value: '25.000', unit: 'kHz' },
+*   ]}
+*   rowTooltipContent={(row) => (
+*     <DataTableRowDetail
+*       title={row.label}
+*       fields={[
+*         { label: 'Value', value: `${row.value} ${row.unit}` },
+*       ]}
+*     />
+*   )}
+* />
+* ```
+*/
+/**
+* Pre-built tooltip content renderer for DataTable rows.
+* Provides a structured layout: title, key-value fields, and optional footer.
+*
+* @example
+* ```tsx
+* <DataTable
+*   columns={columns}
+*   data={data}
+*   rowTooltipContent={(row) => (
+*     <DataTableRowDetail
+*       title={row.parameter}
+*       subtitle={row.category}
+*       fields={[
+*         { label: 'Value', value: row.value, mono: true },
+*         { label: 'Status', value: row.status, status: row.status },
+*       ]}
+*       footer={`Last updated: ${row.timestamp}`}
+*     />
+*   )}
+* />
+* ```
+*/
+var DataTableRowDetail = memo(function DataTableRowDetail({ title, subtitle, fields, footer, icon, maxWidth = 320 }) {
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			maxWidth,
+			minWidth: 180
+		},
+		children: [
+			(title || icon) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					marginBottom: fields?.length || subtitle ? tokens.spacing.sm : 0
+				},
+				children: [icon, /* @__PURE__ */ jsxs("div", {
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [title && /* @__PURE__ */ jsx("div", {
+						style: {
+							fontWeight: tokens.typography.fontWeight.semibold,
+							fontSize: tokens.typography.fontSize.sm,
+							color: tokens.colors.text.primary,
+							lineHeight: 1.3,
+							overflow: "hidden",
+							textOverflow: "ellipsis"
+						},
+						children: title
+					}), subtitle && /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: tokens.typography.fontSize.xxs,
+							color: tokens.colors.text.tertiary,
+							marginTop: 2
+						},
+						children: subtitle
+					})]
+				})]
+			}),
+			fields && fields.length > 0 && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "auto 1fr",
+					gap: `${tokens.spacing.xs} ${tokens.spacing.md}`,
+					fontSize: tokens.typography.fontSize.xs,
+					lineHeight: 1.5
+				},
+				children: fields.map((field, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						color: tokens.colors.text.tertiary,
+						whiteSpace: "nowrap"
+					},
+					children: field.label
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						color: field.status ? tokens.colors.status[field.status] || tokens.colors.text.primary : tokens.colors.text.primary,
+						fontFamily: field.mono ? tokens.typography.fontFamily.mono : "inherit",
+						fontVariantNumeric: field.mono ? "tabular-nums" : "normal",
+						textAlign: "right",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: field.value
+				})] }, i))
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				style: {
+					marginTop: tokens.spacing.sm,
+					paddingTop: tokens.spacing.xs,
+					borderTop: `1px solid ${addAlpha(tokens.colors.border.muted, .19)}`,
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.tertiary
+				},
+				children: footer
+			})
+		]
+	});
 });
-const CellTooltipWrapper = memo(function CellTooltipWrapper2({
-  content,
-  placement,
-  delay,
-  children
-}) {
-  if (!content) return children;
-  return /* @__PURE__ */ jsx(Tooltip, { content, placement, delay, children });
+var CellTooltipWrapper = memo(function CellTooltipWrapper({ content, placement, delay, children }) {
+	if (!content) return children;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content,
+		placement,
+		delay,
+		children
+	});
 });
-const DataTable = memo(function DataTable2({
-  columns,
-  data,
-  keyField,
-  groupBy,
-  expandable = false,
-  defaultExpanded = true,
-  striped = false,
-  compact = false,
-  showHeader = true,
-  emptyMessage = "No data available",
-  onRowClick,
-  rowTooltip,
-  rowTooltipContent,
-  tooltipPlacement = "top",
-  tooltipDelay = 300,
-  maxHeight,
-  booleanColor,
-  getRowStatus,
-  style
-}) {
-  const { tokens } = useTheme();
-  const { isMobile: isMobileView } = useBreakpoint();
-  const statusColorMap = useMemo(() => ({
-    normal: tokens.colors.status.normal,
-    caution: tokens.colors.status.caution,
-    serious: tokens.colors.status.serious,
-    critical: tokens.colors.status.critical,
-    standby: tokens.colors.status.standby,
-    off: tokens.colors.status.off
-  }), [tokens.colors.status]);
-  const visibleColumns = isMobileView ? columns.filter((col) => !col.hideOnMobile) : columns;
-  const [expandedGroups, setExpandedGroups] = useState(
-    defaultExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set()
-  );
-  const [hoveredRow, setHoveredRow] = useState(null);
-  const visibleColumnCount = Math.max(1, visibleColumns.length);
-  const cellPadding = compact ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`;
-  const toggleGroup = useCallback((group) => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(group)) next.delete(group);
-      else next.add(group);
-      return next;
-    });
-  }, []);
-  const isGroupExpanded = useCallback((group) => {
-    return expandedGroups.has("__all__") || expandedGroups.has(group);
-  }, [expandedGroups]);
-  const groups = useMemo(() => {
-    if (!groupBy) return [{ key: "__default__", label: "", rows: data }];
-    const map = /* @__PURE__ */ new Map();
-    data.forEach((row) => {
-      const key = String(row[groupBy] ?? "Other");
-      if (!map.has(key)) map.set(key, []);
-      map.get(key).push(row);
-    });
-    return Array.from(map.entries()).map(([key, rows]) => ({
-      key,
-      label: key,
-      rows
-    }));
-  }, [data, groupBy]);
-  const resolveWidth = (w) => {
-    if (w === void 0) return void 0;
-    if (typeof w === "number") return `${w}px`;
-    return w;
-  };
-  const renderCell = (col, row, rowIndex) => {
-    const value = row[col.key];
-    if (col.render) return col.render(value, row, rowIndex);
-    if (value === null || value === void 0) return "—";
-    if (typeof value === "boolean") {
-      const label = value ? "✓" : "✗";
-      const color = booleanColor ?? (getRowStatus ? (() => {
-        const s = getRowStatus(row, rowIndex);
-        return s ? statusColorMap[s] : void 0;
-      })() : void 0) ?? tokens.colors.text.primary;
-      return /* @__PURE__ */ jsx("span", { style: { color }, children: label });
-    }
-    return String(value);
-  };
-  const renderCellWithTooltip = (col, row, rowIndex) => {
-    const cellContent = renderCell(col, row, rowIndex);
-    if (!col.cellTooltip) return cellContent;
-    const tooltipContent = col.cellTooltip(row[col.key], row, rowIndex);
-    if (!tooltipContent) return cellContent;
-    return /* @__PURE__ */ jsx(
-      CellTooltipWrapper,
-      {
-        content: tooltipContent,
-        placement: tooltipPlacement,
-        delay: tooltipDelay,
-        children: /* @__PURE__ */ jsx("span", { style: { cursor: "help" }, children: cellContent })
-      }
-    );
-  };
-  const renderHeaderCell = (col) => {
-    const headerContent = /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
-      col.header,
-      col.headerTooltip && /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "12",
-          height: "12",
-          viewBox: "0 0 16 16",
-          fill: "none",
-          style: { opacity: 0.5, flexShrink: 0 },
-          children: [
-            /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
-            /* @__PURE__ */ jsx("path", { d: "M8 7v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-            /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "0.75", fill: "currentColor" })
-          ]
-        }
-      )
-    ] });
-    if (!col.headerTooltip) return headerContent;
-    return /* @__PURE__ */ jsx(Tooltip, { content: col.headerTooltip, placement: "bottom", delay: tooltipDelay, children: headerContent });
-  };
-  const chevron = (expanded) => /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      style: {
-        transition: tokens.animation.fast,
-        transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
-    }
-  );
-  const hasRichRowTooltip = !!rowTooltipContent;
-  const renderRowContent = (row, rowIdx, localIndex) => {
-    const isHovered = hoveredRow === rowIdx;
-    const rowKey = keyField ? String(row[keyField]) : rowIdx;
-    const useNativeTitle = !hasRichRowTooltip && rowTooltip;
-    const tr = /* @__PURE__ */ jsx(
-      "tr",
-      {
-        tabIndex: onRowClick ? 0 : void 0,
-        onClick: onRowClick ? () => onRowClick(row, rowIdx) : void 0,
-        onKeyDown: onRowClick ? (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onRowClick(row, rowIdx);
-          }
-        } : void 0,
-        onMouseEnter: () => setHoveredRow(rowIdx),
-        onMouseLeave: () => setHoveredRow(null),
-        title: useNativeTitle ? rowTooltip(row) : void 0,
-        style: {
-          cursor: onRowClick ? "pointer" : "default",
-          backgroundColor: isHovered ? addAlpha(tokens.colors.accent.primary, 0.08) : striped && localIndex % 2 === 1 ? addAlpha(tokens.colors.background.surface, 0.5) : "transparent",
-          transition: "background-color 150ms ease"
-        },
-        children: visibleColumns.map((col) => /* @__PURE__ */ jsx(
-          "td",
-          {
-            style: {
-              padding: cellPadding,
-              textAlign: col.align || "left",
-              color: tokens.colors.text.primary,
-              borderBottom: `1px solid ${addAlpha(tokens.colors.border.muted, 0.08)}`,
-              fontFamily: col.mono ? tokens.typography.fontFamily.mono : "inherit",
-              fontVariantNumeric: col.mono ? "tabular-nums" : "normal",
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              maxWidth: resolveWidth(col.width) || "300px"
-            },
-            children: renderCellWithTooltip(col, row, rowIdx)
-          },
-          col.key
-        ))
-      },
-      rowKey
-    );
-    if (hasRichRowTooltip) {
-      const tooltipContent = rowTooltipContent(row, rowIdx);
-      if (tooltipContent) {
-        return /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: tooltipContent,
-            placement: tooltipPlacement,
-            delay: tooltipDelay,
-            children: tr
-          },
-          rowKey
-        );
-      }
-    }
-    return tr;
-  };
-  let globalRowIndex = 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        fontFamily: tokens.typography.fontFamily.primary,
-        overflow: "auto",
-        WebkitOverflowScrolling: "touch",
-        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-        borderRadius: tokens.borderRadius.md,
-        border: tokens.borders.divider,
-        ...style
-      },
-      children: /* @__PURE__ */ jsxs(
-        "table",
-        {
-          style: {
-            width: "100%",
-            borderCollapse: "collapse",
-            fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm
-          },
-          children: [
-            showHeader && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: visibleColumns.map((col) => /* @__PURE__ */ jsx(
-              "th",
-              {
-                style: {
-                  padding: cellPadding,
-                  textAlign: col.align || "left",
-                  fontSize: tokens.typography.fontSize.xxs,
-                  fontWeight: tokens.typography.fontWeight.bold,
-                  color: tokens.colors.text.tertiary,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.06em",
-                  backgroundColor: tokens.colors.background.surface,
-                  borderBottom: tokens.borders.divider,
-                  width: resolveWidth(col.width),
-                  position: "sticky",
-                  top: 0,
-                  zIndex: 1,
-                  whiteSpace: "nowrap"
-                },
-                children: renderHeaderCell(col)
-              },
-              col.key
-            )) }) }),
-            /* @__PURE__ */ jsxs("tbody", { children: [
-              data.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: visibleColumnCount,
-                  style: {
-                    padding: tokens.spacing.xl,
-                    textAlign: "center",
-                    color: tokens.colors.text.tertiary,
-                    fontSize: tokens.typography.fontSize.sm
-                  },
-                  children: emptyMessage
-                }
-              ) }),
-              groups.map((group) => {
-                const isExpanded = !groupBy || isGroupExpanded(group.key);
-                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  groupBy && group.label && /* @__PURE__ */ jsx(
-                    "tr",
-                    {
-                      style: {
-                        backgroundColor: addAlpha(tokens.colors.accent.primary, 0.08)
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "td",
-                        {
-                          colSpan: visibleColumnCount,
-                          style: {
-                            padding: 0,
-                            borderBottom: tokens.borders.divider
-                          },
-                          children: expandable ? /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              type: "button",
-                              "aria-expanded": isExpanded,
-                              onClick: () => toggleGroup(group.key),
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: tokens.spacing.xs,
-                                width: "100%",
-                                padding: cellPadding,
-                                margin: 0,
-                                border: "none",
-                                background: "none",
-                                cursor: "pointer",
-                                fontWeight: tokens.typography.fontWeight.semibold,
-                                color: tokens.colors.text.primary,
-                                fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,
-                                fontFamily: "inherit",
-                                textAlign: "left"
-                              },
-                              children: [
-                                chevron(isExpanded),
-                                group.label,
-                                /* @__PURE__ */ jsxs("span", { style: {
-                                  fontSize: tokens.typography.fontSize.xxs,
-                                  color: tokens.colors.text.tertiary,
-                                  fontWeight: tokens.typography.fontWeight.normal
-                                }, children: [
-                                  "(",
-                                  group.rows.length,
-                                  ")"
-                                ] })
-                              ]
-                            }
-                          ) : /* @__PURE__ */ jsxs(
-                            "div",
-                            {
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: tokens.spacing.xs,
-                                padding: cellPadding,
-                                fontWeight: tokens.typography.fontWeight.semibold,
-                                color: tokens.colors.text.primary,
-                                fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm
-                              },
-                              children: [
-                                group.label,
-                                /* @__PURE__ */ jsxs("span", { style: {
-                                  fontSize: tokens.typography.fontSize.xxs,
-                                  color: tokens.colors.text.tertiary,
-                                  fontWeight: tokens.typography.fontWeight.normal
-                                }, children: [
-                                  "(",
-                                  group.rows.length,
-                                  ")"
-                                ] })
-                              ]
-                            }
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  isExpanded && group.rows.map((row, localIndex) => {
-                    const rowIdx = globalRowIndex++;
-                    return renderRowContent(row, rowIdx, localIndex);
-                  })
-                ] }, group.key);
-              })
-            ] })
-          ]
-        }
-      )
-    }
-  );
+var DataTable = memo(function DataTable({ columns, data, keyField, groupBy, expandable = false, defaultExpanded = true, striped = false, compact = false, showHeader = true, emptyMessage = "No data available", onRowClick, rowTooltip, rowTooltipContent, tooltipPlacement = "top", tooltipDelay = 300, maxHeight, booleanColor, getRowStatus, style }) {
+	const { tokens } = useTheme();
+	const { isMobile: isMobileView } = useBreakpoint();
+	const statusColorMap = useMemo(() => ({
+		normal: tokens.colors.status.normal,
+		caution: tokens.colors.status.caution,
+		serious: tokens.colors.status.serious,
+		critical: tokens.colors.status.critical,
+		standby: tokens.colors.status.standby,
+		off: tokens.colors.status.off
+	}), [tokens.colors.status]);
+	const visibleColumns = isMobileView ? columns.filter((col) => !col.hideOnMobile) : columns;
+	const [expandedGroups, setExpandedGroups] = useState(defaultExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set());
+	const [hoveredRow, setHoveredRow] = useState(null);
+	const visibleColumnCount = Math.max(1, visibleColumns.length);
+	const cellPadding = compact ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`;
+	const toggleGroup = useCallback((group) => {
+		setExpandedGroups((prev) => {
+			const next = new Set(prev);
+			if (next.has(group)) next.delete(group);
+			else next.add(group);
+			return next;
+		});
+	}, []);
+	const isGroupExpanded = useCallback((group) => {
+		return expandedGroups.has("__all__") || expandedGroups.has(group);
+	}, [expandedGroups]);
+	const groups = useMemo(() => {
+		if (!groupBy) return [{
+			key: "__default__",
+			label: "",
+			rows: data
+		}];
+		const map = /* @__PURE__ */ new Map();
+		data.forEach((row) => {
+			const key = String(row[groupBy] ?? "Other");
+			if (!map.has(key)) map.set(key, []);
+			map.get(key).push(row);
+		});
+		return Array.from(map.entries()).map(([key, rows]) => ({
+			key,
+			label: key,
+			rows
+		}));
+	}, [data, groupBy]);
+	const resolveWidth = (w) => {
+		if (w === void 0) return void 0;
+		if (typeof w === "number") return `${w}px`;
+		return w;
+	};
+	const renderCell = (col, row, rowIndex) => {
+		const value = row[col.key];
+		if (col.render) return col.render(value, row, rowIndex);
+		if (value === null || value === void 0) return "—";
+		if (typeof value === "boolean") {
+			const label = value ? "✓" : "✗";
+			return /* @__PURE__ */ jsx("span", {
+				style: { color: booleanColor ?? (getRowStatus ? (() => {
+					const s = getRowStatus(row, rowIndex);
+					return s ? statusColorMap[s] : void 0;
+				})() : void 0) ?? tokens.colors.text.primary },
+				children: label
+			});
+		}
+		return String(value);
+	};
+	const renderCellWithTooltip = (col, row, rowIndex) => {
+		const cellContent = renderCell(col, row, rowIndex);
+		if (!col.cellTooltip) return cellContent;
+		const tooltipContent = col.cellTooltip(row[col.key], row, rowIndex);
+		if (!tooltipContent) return cellContent;
+		return /* @__PURE__ */ jsx(CellTooltipWrapper, {
+			content: tooltipContent,
+			placement: tooltipPlacement,
+			delay: tooltipDelay,
+			children: /* @__PURE__ */ jsx("span", {
+				style: { cursor: "help" },
+				children: cellContent
+			})
+		});
+	};
+	const renderHeaderCell = (col) => {
+		const headerContent = /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 4
+			},
+			children: [col.header, col.headerTooltip && /* @__PURE__ */ jsxs("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				style: {
+					opacity: .5,
+					flexShrink: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: "8",
+						cy: "8",
+						r: "7",
+						stroke: "currentColor",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M8 7v4",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "8",
+						cy: "5",
+						r: "0.75",
+						fill: "currentColor"
+					})
+				]
+			})]
+		});
+		if (!col.headerTooltip) return headerContent;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			content: col.headerTooltip,
+			placement: "bottom",
+			delay: tooltipDelay,
+			children: headerContent
+		});
+	};
+	const chevron = (expanded) => /* @__PURE__ */ jsx("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		style: {
+			transition: tokens.animation.fast,
+			transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+			flexShrink: 0
+		},
+		children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+	});
+	const hasRichRowTooltip = !!rowTooltipContent;
+	const renderRowContent = (row, rowIdx, localIndex) => {
+		const isHovered = hoveredRow === rowIdx;
+		const rowKey = keyField ? String(row[keyField]) : rowIdx;
+		const tr = /* @__PURE__ */ jsx("tr", {
+			tabIndex: onRowClick ? 0 : void 0,
+			onClick: onRowClick ? () => onRowClick(row, rowIdx) : void 0,
+			onKeyDown: onRowClick ? (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					onRowClick(row, rowIdx);
+				}
+			} : void 0,
+			onMouseEnter: () => setHoveredRow(rowIdx),
+			onMouseLeave: () => setHoveredRow(null),
+			title: !hasRichRowTooltip && rowTooltip ? rowTooltip(row) : void 0,
+			style: {
+				cursor: onRowClick ? "pointer" : "default",
+				backgroundColor: isHovered ? addAlpha(tokens.colors.accent.primary, .08) : striped && localIndex % 2 === 1 ? addAlpha(tokens.colors.background.surface, .5) : "transparent",
+				transition: "background-color 150ms ease"
+			},
+			children: visibleColumns.map((col) => /* @__PURE__ */ jsx("td", {
+				style: {
+					padding: cellPadding,
+					textAlign: col.align || "left",
+					color: tokens.colors.text.primary,
+					borderBottom: `1px solid ${addAlpha(tokens.colors.border.muted, .08)}`,
+					fontFamily: col.mono ? tokens.typography.fontFamily.mono : "inherit",
+					fontVariantNumeric: col.mono ? "tabular-nums" : "normal",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					maxWidth: resolveWidth(col.width) || "300px"
+				},
+				children: renderCellWithTooltip(col, row, rowIdx)
+			}, col.key))
+		}, rowKey);
+		if (hasRichRowTooltip) {
+			const tooltipContent = rowTooltipContent(row, rowIdx);
+			if (tooltipContent) return /* @__PURE__ */ jsx(Tooltip, {
+				content: tooltipContent,
+				placement: tooltipPlacement,
+				delay: tooltipDelay,
+				children: tr
+			}, rowKey);
+		}
+		return tr;
+	};
+	let globalRowIndex = 0;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			fontFamily: tokens.typography.fontFamily.primary,
+			overflow: "auto",
+			WebkitOverflowScrolling: "touch",
+			maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+			borderRadius: tokens.borderRadius.md,
+			border: tokens.borders.divider,
+			...style
+		},
+		children: /* @__PURE__ */ jsxs("table", {
+			style: {
+				width: "100%",
+				borderCollapse: "collapse",
+				fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm
+			},
+			children: [showHeader && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: visibleColumns.map((col) => /* @__PURE__ */ jsx("th", {
+				style: {
+					padding: cellPadding,
+					textAlign: col.align || "left",
+					fontSize: tokens.typography.fontSize.xxs,
+					fontWeight: tokens.typography.fontWeight.bold,
+					color: tokens.colors.text.tertiary,
+					textTransform: "uppercase",
+					letterSpacing: "0.06em",
+					backgroundColor: tokens.colors.background.surface,
+					borderBottom: tokens.borders.divider,
+					width: resolveWidth(col.width),
+					position: "sticky",
+					top: 0,
+					zIndex: 1,
+					whiteSpace: "nowrap"
+				},
+				children: renderHeaderCell(col)
+			}, col.key)) }) }), /* @__PURE__ */ jsxs("tbody", { children: [data.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				colSpan: visibleColumnCount,
+				style: {
+					padding: tokens.spacing.xl,
+					textAlign: "center",
+					color: tokens.colors.text.tertiary,
+					fontSize: tokens.typography.fontSize.sm
+				},
+				children: emptyMessage
+			}) }), groups.map((group) => {
+				const isExpanded = !groupBy || isGroupExpanded(group.key);
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [groupBy && group.label && /* @__PURE__ */ jsx("tr", {
+					style: { backgroundColor: addAlpha(tokens.colors.accent.primary, .08) },
+					children: /* @__PURE__ */ jsx("td", {
+						colSpan: visibleColumnCount,
+						style: {
+							padding: 0,
+							borderBottom: tokens.borders.divider
+						},
+						children: expandable ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-expanded": isExpanded,
+							onClick: () => toggleGroup(group.key),
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: tokens.spacing.xs,
+								width: "100%",
+								padding: cellPadding,
+								margin: 0,
+								border: "none",
+								background: "none",
+								cursor: "pointer",
+								fontWeight: tokens.typography.fontWeight.semibold,
+								color: tokens.colors.text.primary,
+								fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,
+								fontFamily: "inherit",
+								textAlign: "left"
+							},
+							children: [
+								chevron(isExpanded),
+								group.label,
+								/* @__PURE__ */ jsxs("span", {
+									style: {
+										fontSize: tokens.typography.fontSize.xxs,
+										color: tokens.colors.text.tertiary,
+										fontWeight: tokens.typography.fontWeight.normal
+									},
+									children: [
+										"(",
+										group.rows.length,
+										")"
+									]
+								})
+							]
+						}) : /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: tokens.spacing.xs,
+								padding: cellPadding,
+								fontWeight: tokens.typography.fontWeight.semibold,
+								color: tokens.colors.text.primary,
+								fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm
+							},
+							children: [group.label, /* @__PURE__ */ jsxs("span", {
+								style: {
+									fontSize: tokens.typography.fontSize.xxs,
+									color: tokens.colors.text.tertiary,
+									fontWeight: tokens.typography.fontWeight.normal
+								},
+								children: [
+									"(",
+									group.rows.length,
+									")"
+								]
+							})]
+						})
+					})
+				}), isExpanded && group.rows.map((row, localIndex) => {
+					const rowIdx = globalRowIndex++;
+					return renderRowContent(row, rowIdx, localIndex);
+				})] }, group.key);
+			})] })]
+		})
+	});
 });
-export {
-  DataTable,
-  DataTableRowDetail
-};
-//# sourceMappingURL=DataTable.js.map
+//#endregion
+export { DataTable, DataTable as default, DataTableRowDetail };
+
+//# sourceMappingURL=DataTable.js.map