@zendir/ui 0.1.0

package/dist/react/core/DataTable.js

@@ -0,0 +1,446 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, useMemo, useState, useCallback } from "react";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { Tooltip } from "./Tooltip.js";
+import { addAlpha } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.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 })
+  ] });
+});
+const CellTooltipWrapper = memo(function CellTooltipWrapper2({
+  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);
+              })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  DataTable,
+  DataTableRowDetail
+};
+//# sourceMappingURL=DataTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../src/react/core/DataTable.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - DataTable Component\r\n * \r\n * Structured data display with expandable groups, responsive columns,\r\n * and theme-aware styling. Designed for telemetry parameter grids,\r\n * link budget displays, spacecraft information panels.\r\n * \r\n * Astro UX Compliance:\r\n * - Tabular monospace numbers for value columns\r\n * - Status-based row coloring\r\n * - Compact mode support\r\n * - Accessible table semantics\r\n * \r\n * Enhanced Tooltip System:\r\n * - Row-level tooltips (string or rich ReactNode via rowTooltipContent)\r\n * - Cell-level tooltips per column definition\r\n * - Header tooltips for column descriptions\r\n * - Built-in DataTableRowDetail component for structured detail views\r\n * - Portal-rendered, WCAG-compliant, animated tooltips\r\n * \r\n * @example\r\n * ```tsx\r\n * <DataTable\r\n *   columns={[\r\n *     { key: 'label', header: 'Parameter', width: '40%', headerTooltip: 'Telemetry parameter name' },\r\n *     { key: 'value', header: 'Value', align: 'right', mono: true, cellTooltip: (v, row) => `Raw: ${v}` },\r\n *     { key: 'unit', header: 'Unit', width: 80 },\r\n *   ]}\r\n *   data={[\r\n *     { label: 'Frequency', value: '437.500', unit: 'MHz' },\r\n *     { label: 'Bandwidth', value: '25.000', unit: 'kHz' },\r\n *   ]}\r\n *   rowTooltipContent={(row) => (\r\n *     <DataTableRowDetail\r\n *       title={row.label}\r\n *       fields={[\r\n *         { label: 'Value', value: `${row.value} ${row.unit}` },\r\n *       ]}\r\n *     />\r\n *   )}\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useCallback, useMemo } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { useBreakpoint } from './layout/useBreakpoint';\r\nimport { Tooltip } from './Tooltip';\r\nimport type { TooltipPlacement } from './Tooltip';\r\nimport { addAlpha } from '../utils';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface DataTableColumn<T = Record<string, unknown>> {\r\n  /** Key in data object */\r\n  key: string;\r\n  /** Column header text */\r\n  header: string;\r\n  /** Column width (CSS value or number for px) */\r\n  width?: string | number;\r\n  /** Text alignment */\r\n  align?: 'left' | 'center' | 'right';\r\n  /** Use monospace font (good for numbers) */\r\n  mono?: boolean;\r\n  /** Custom cell renderer */\r\n  render?: (value: unknown, row: T, index: number) => React.ReactNode;\r\n  /** Hide column on mobile */\r\n  hideOnMobile?: boolean;\r\n  /** Tooltip for the column header (explains what this column represents) */\r\n  headerTooltip?: string;\r\n  /** Per-cell tooltip — return string or ReactNode, or undefined to skip */\r\n  cellTooltip?: (value: unknown, row: T, index: number) => React.ReactNode | undefined;\r\n}\r\n\r\nexport interface DataTableProps<T = Record<string, unknown>> {\r\n  /** Column definitions */\r\n  columns: DataTableColumn<T>[];\r\n  /** Data rows */\r\n  data: T[];\r\n  /** Key field for React keys (default: index) */\r\n  keyField?: string;\r\n  /** Group rows by this field */\r\n  groupBy?: string;\r\n  /** Allow expanding/collapsing groups */\r\n  expandable?: boolean;\r\n  /** Default expanded state for groups */\r\n  defaultExpanded?: boolean;\r\n  /** Striped rows */\r\n  striped?: boolean;\r\n  /** Compact row padding */\r\n  compact?: boolean;\r\n  /** Show header row */\r\n  showHeader?: boolean;\r\n  /** Empty state message */\r\n  emptyMessage?: string;\r\n  /** Row click handler */\r\n  onRowClick?: (row: T, index: number) => void;\r\n  /** Simple string tooltip for each row (legacy — uses native title) */\r\n  rowTooltip?: (row: T) => string | undefined;\r\n  /** Rich tooltip content for each row — renders in a portal-based Tooltip */\r\n  rowTooltipContent?: (row: T, index: number) => React.ReactNode | undefined;\r\n  /** Placement for row and cell tooltips (default: 'top') */\r\n  tooltipPlacement?: TooltipPlacement;\r\n  /** Delay before tooltips appear in ms (default: 300) */\r\n  tooltipDelay?: number;\r\n  /** Max height with scroll */\r\n  maxHeight?: string | number;\r\n  /** Color for boolean ✓/✗ values (e.g. '#fff' for white). Defaults to text.primary or row status. */\r\n  booleanColor?: string;\r\n  /** Optional row status key or getter — boolean cells use this row's status color when set (matches white/status design). */\r\n  getRowStatus?: (row: T, index: number) => 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off' | undefined;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\n// ─── DataTableRowDetail ──────────────────────────────────────────────────────\r\n\r\nexport interface DataTableRowDetailField {\r\n  /** Field label */\r\n  label: string;\r\n  /** Field value (string, number, or ReactNode for custom rendering) */\r\n  value: React.ReactNode;\r\n  /** Optional status color for the value */\r\n  status?: 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off';\r\n  /** Use monospace font for this value */\r\n  mono?: boolean;\r\n}\r\n\r\nexport interface DataTableRowDetailProps {\r\n  /** Title shown at the top of the tooltip */\r\n  title?: React.ReactNode;\r\n  /** Optional subtitle / secondary info */\r\n  subtitle?: React.ReactNode;\r\n  /** Structured key-value fields to display */\r\n  fields?: DataTableRowDetailField[];\r\n  /** Optional footer content (timestamps, actions, etc.) */\r\n  footer?: React.ReactNode;\r\n  /** Optional icon or status indicator beside the title */\r\n  icon?: React.ReactNode;\r\n  /** Maximum width of the tooltip (default: 320) */\r\n  maxWidth?: number;\r\n}\r\n\r\nconst STATUS_DOT_COLORS: Record<string, string> = {\r\n  normal: '#56F000',\r\n  caution: '#FCE83A',\r\n  serious: '#FFB302',\r\n  critical: '#FF3838',\r\n  standby: '#2DCCFF',\r\n  off: '#9EA7AD',\r\n};\r\n\r\n/**\r\n * Pre-built tooltip content renderer for DataTable rows.\r\n * Provides a structured layout: title, key-value fields, and optional footer.\r\n * \r\n * @example\r\n * ```tsx\r\n * <DataTable\r\n *   columns={columns}\r\n *   data={data}\r\n *   rowTooltipContent={(row) => (\r\n *     <DataTableRowDetail\r\n *       title={row.parameter}\r\n *       subtitle={row.category}\r\n *       fields={[\r\n *         { label: 'Value', value: row.value, mono: true },\r\n *         { label: 'Status', value: row.status, status: row.status },\r\n *       ]}\r\n *       footer={`Last updated: ${row.timestamp}`}\r\n *     />\r\n *   )}\r\n * />\r\n * ```\r\n */\r\nexport const DataTableRowDetail = memo(function DataTableRowDetail({\r\n  title,\r\n  subtitle,\r\n  fields,\r\n  footer,\r\n  icon,\r\n  maxWidth = 320,\r\n}: DataTableRowDetailProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n\r\n  return (\r\n    <div style={{ maxWidth, minWidth: 180 }}>\r\n      {/* Header */}\r\n      {(title || icon) && (\r\n        <div style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: tokens.spacing.sm,\r\n          marginBottom: fields?.length || subtitle ? tokens.spacing.sm : 0,\r\n        }}>\r\n          {icon}\r\n          <div style={{ flex: 1, minWidth: 0 }}>\r\n            {title && (\r\n              <div style={{\r\n                fontWeight: tokens.typography.fontWeight.semibold,\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                color: tokens.colors.text.primary,\r\n                lineHeight: 1.3,\r\n                overflow: 'hidden',\r\n                textOverflow: 'ellipsis',\r\n              }}>\r\n                {title}\r\n              </div>\r\n            )}\r\n            {subtitle && (\r\n              <div style={{\r\n                fontSize: tokens.typography.fontSize.xxs,\r\n                color: tokens.colors.text.tertiary,\r\n                marginTop: 2,\r\n              }}>\r\n                {subtitle}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fields && fields.length > 0 && (\r\n        <div style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: 'auto 1fr',\r\n          gap: `${tokens.spacing.xs} ${tokens.spacing.md}`,\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          lineHeight: 1.5,\r\n        }}>\r\n          {fields.map((field, i) => (\r\n            <React.Fragment key={i}>\r\n              <span style={{\r\n                color: tokens.colors.text.tertiary,\r\n                whiteSpace: 'nowrap',\r\n              }}>\r\n                {field.label}\r\n              </span>\r\n              <span style={{\r\n                color: field.status\r\n                  ? STATUS_DOT_COLORS[field.status] || tokens.colors.text.primary\r\n                  : tokens.colors.text.primary,\r\n                fontFamily: field.mono ? tokens.typography.fontFamily.mono : 'inherit',\r\n                fontVariantNumeric: field.mono ? 'tabular-nums' : 'normal',\r\n                textAlign: 'right',\r\n                overflow: 'hidden',\r\n                textOverflow: 'ellipsis',\r\n                whiteSpace: 'nowrap',\r\n              }}>\r\n                {field.value}\r\n              </span>\r\n            </React.Fragment>\r\n          ))}\r\n        </div>\r\n      )}\r\n\r\n      {/* Footer */}\r\n      {footer && (\r\n        <div style={{\r\n          marginTop: tokens.spacing.sm,\r\n          paddingTop: tokens.spacing.xs,\r\n          borderTop: `1px solid ${addAlpha(tokens.colors.border.muted, 0.19)}`,\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n        }}>\r\n          {footer}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Cell Tooltip Wrapper ────────────────────────────────────────────────────\r\n\r\ninterface CellTooltipWrapperProps {\r\n  content: React.ReactNode;\r\n  placement: TooltipPlacement;\r\n  delay: number;\r\n  children: React.ReactElement;\r\n}\r\n\r\nconst CellTooltipWrapper = memo(function CellTooltipWrapper({\r\n  content,\r\n  placement,\r\n  delay,\r\n  children,\r\n}: CellTooltipWrapperProps): React.ReactElement {\r\n  if (!content) return children;\r\n  return (\r\n    <Tooltip content={content} placement={placement} delay={delay}>\r\n      {children}\r\n    </Tooltip>\r\n  );\r\n});\r\n\r\n// ─── DataTable ───────────────────────────────────────────────────────────────\r\n\r\nexport const DataTable = memo(function DataTable<T extends Record<string, unknown>>({\r\n  columns,\r\n  data,\r\n  keyField,\r\n  groupBy,\r\n  expandable = false,\r\n  defaultExpanded = true,\r\n  striped = false,\r\n  compact = false,\r\n  showHeader = true,\r\n  emptyMessage = 'No data available',\r\n  onRowClick,\r\n  rowTooltip,\r\n  rowTooltipContent,\r\n  tooltipPlacement = 'top',\r\n  tooltipDelay = 300,\r\n  maxHeight,\r\n  booleanColor,\r\n  getRowStatus,\r\n  style,\r\n}: DataTableProps<T>): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { isMobile: isMobileView } = useBreakpoint();\r\n  const statusColorMap = useMemo(() => ({\r\n    normal: tokens.colors.status.normal,\r\n    caution: tokens.colors.status.caution,\r\n    serious: tokens.colors.status.serious,\r\n    critical: tokens.colors.status.critical,\r\n    standby: tokens.colors.status.standby,\r\n    off: tokens.colors.status.off,\r\n  }), [tokens.colors.status]);\r\n  const visibleColumns = isMobileView ? columns.filter(col => !col.hideOnMobile) : columns;\r\n  \r\n  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(\r\n    defaultExpanded ? new Set(['__all__']) : new Set()\r\n  );\r\n  const [hoveredRow, setHoveredRow] = useState<number | null>(null);\r\n  const visibleColumnCount = Math.max(1, visibleColumns.length);\r\n  \r\n  const cellPadding = compact ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`;\r\n  \r\n  const toggleGroup = useCallback((group: string) => {\r\n    setExpandedGroups(prev => {\r\n      const next = new Set(prev);\r\n      if (next.has(group)) next.delete(group);\r\n      else next.add(group);\r\n      return next;\r\n    });\r\n  }, []);\r\n  \r\n  const isGroupExpanded = useCallback((group: string) => {\r\n    return expandedGroups.has('__all__') || expandedGroups.has(group);\r\n  }, [expandedGroups]);\r\n  \r\n  const groups = useMemo(() => {\r\n    if (!groupBy) return [{ key: '__default__', label: '', rows: data }];\r\n    \r\n    const map = new Map<string, T[]>();\r\n    data.forEach(row => {\r\n      const key = String((row as Record<string, unknown>)[groupBy] ?? 'Other');\r\n      if (!map.has(key)) map.set(key, []);\r\n      map.get(key)!.push(row);\r\n    });\r\n    \r\n    return Array.from(map.entries()).map(([key, rows]) => ({\r\n      key,\r\n      label: key,\r\n      rows,\r\n    }));\r\n  }, [data, groupBy]);\r\n  \r\n  const resolveWidth = (w: string | number | undefined): string | undefined => {\r\n    if (w === undefined) return undefined;\r\n    if (typeof w === 'number') return `${w}px`;\r\n    return w;\r\n  };\r\n  \r\n  const renderCell = (col: DataTableColumn<T>, row: T, rowIndex: number) => {\r\n    const value = row[col.key];\r\n    if (col.render) return col.render(value, row, rowIndex);\r\n    if (value === null || value === undefined) return '—';\r\n    if (typeof value === 'boolean') {\r\n      const label = value ? '✓' : '✗';\r\n      const color = booleanColor\r\n        ?? (getRowStatus ? (() => { const s = getRowStatus(row, rowIndex); return s ? statusColorMap[s] : undefined; })() : undefined)\r\n        ?? tokens.colors.text.primary;\r\n      return <span style={{ color }}>{label}</span>;\r\n    }\r\n    return String(value);\r\n  };\r\n\r\n  const renderCellWithTooltip = (col: DataTableColumn<T>, row: T, rowIndex: number) => {\r\n    const cellContent = renderCell(col, row, rowIndex);\r\n    if (!col.cellTooltip) return cellContent;\r\n\r\n    const tooltipContent = col.cellTooltip(row[col.key], row, rowIndex);\r\n    if (!tooltipContent) return cellContent;\r\n\r\n    return (\r\n      <CellTooltipWrapper\r\n        content={tooltipContent}\r\n        placement={tooltipPlacement}\r\n        delay={tooltipDelay}\r\n      >\r\n        <span style={{ cursor: 'help' }}>{cellContent}</span>\r\n      </CellTooltipWrapper>\r\n    );\r\n  };\r\n\r\n  const renderHeaderCell = (col: DataTableColumn<T>) => {\r\n    const headerContent = (\r\n      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>\r\n        {col.header}\r\n        {col.headerTooltip && (\r\n          <svg\r\n            width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n            style={{ opacity: 0.5, flexShrink: 0 }}\r\n          >\r\n            <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n            <path d=\"M8 7v4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n            <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\r\n          </svg>\r\n        )}\r\n      </span>\r\n    );\r\n    \r\n    if (!col.headerTooltip) return headerContent;\r\n    \r\n    return (\r\n      <Tooltip content={col.headerTooltip} placement=\"bottom\" delay={tooltipDelay}>\r\n        {headerContent}\r\n      </Tooltip>\r\n    );\r\n  };\r\n  \r\n  const chevron = (expanded: boolean) => (\r\n    <svg\r\n      width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n      stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"\r\n      style={{\r\n        transition: tokens.animation.fast,\r\n        transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',\r\n        flexShrink: 0,\r\n      }}\r\n    >\r\n      <polyline points=\"9 18 15 12 9 6\" />\r\n    </svg>\r\n  );\r\n\r\n  const hasRichRowTooltip = !!rowTooltipContent;\r\n  \r\n  const renderRowContent = (row: T, rowIdx: number, localIndex: number) => {\r\n    const isHovered = hoveredRow === rowIdx;\r\n    const rowKey = keyField ? String(row[keyField]) : rowIdx;\r\n    const useNativeTitle = !hasRichRowTooltip && rowTooltip;\r\n\r\n    const tr = (\r\n      <tr\r\n        key={rowKey}\r\n        tabIndex={onRowClick ? 0 : undefined}\r\n        onClick={onRowClick ? () => onRowClick(row, rowIdx) : undefined}\r\n        onKeyDown={onRowClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRowClick(row, rowIdx); } } : undefined}\r\n        onMouseEnter={() => setHoveredRow(rowIdx)}\r\n        onMouseLeave={() => setHoveredRow(null)}\r\n        title={useNativeTitle ? rowTooltip(row) : undefined}\r\n        style={{\r\n          cursor: onRowClick ? 'pointer' : 'default',\r\n          backgroundColor: isHovered\r\n            ? addAlpha(tokens.colors.accent.primary, 0.08)\r\n            : striped && localIndex % 2 === 1\r\n              ? addAlpha(tokens.colors.background.surface, 0.5)\r\n              : 'transparent',\r\n          transition: 'background-color 150ms ease',\r\n        }}\r\n      >\r\n        {visibleColumns.map(col => (\r\n          <td\r\n            key={col.key}\r\n            style={{\r\n              padding: cellPadding,\r\n              textAlign: col.align || 'left',\r\n              color: tokens.colors.text.primary,\r\n              borderBottom: `1px solid ${addAlpha(tokens.colors.border.muted, 0.08)}`,\r\n              fontFamily: col.mono ? tokens.typography.fontFamily.mono : 'inherit',\r\n              fontVariantNumeric: col.mono ? 'tabular-nums' : 'normal',\r\n              whiteSpace: 'nowrap',\r\n              overflow: 'hidden',\r\n              textOverflow: 'ellipsis',\r\n              maxWidth: resolveWidth(col.width) || '300px',\r\n            }}\r\n          >\r\n            {renderCellWithTooltip(col, row, rowIdx)}\r\n          </td>\r\n        ))}\r\n      </tr>\r\n    );\r\n\r\n    if (hasRichRowTooltip) {\r\n      const tooltipContent = rowTooltipContent(row, rowIdx);\r\n      if (tooltipContent) {\r\n        return (\r\n          <Tooltip\r\n            key={rowKey}\r\n            content={tooltipContent}\r\n            placement={tooltipPlacement}\r\n            delay={tooltipDelay}\r\n          >\r\n            {tr}\r\n          </Tooltip>\r\n        );\r\n      }\r\n    }\r\n\r\n    return tr;\r\n  };\r\n  \r\n  let globalRowIndex = 0;\r\n  \r\n  return (\r\n    <div\r\n      style={{\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        overflow: 'auto',\r\n        WebkitOverflowScrolling: 'touch',\r\n        maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\r\n        borderRadius: tokens.borderRadius.md,\r\n        border: tokens.borders.divider,\r\n        ...style,\r\n      }}\r\n    >\r\n      <table\r\n        style={{\r\n          width: '100%',\r\n          borderCollapse: 'collapse',\r\n          fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,\r\n        }}\r\n      >\r\n        {showHeader && (\r\n          <thead>\r\n            <tr>\r\n              {visibleColumns.map(col => (\r\n                <th\r\n                  key={col.key}\r\n                  style={{\r\n                    padding: cellPadding,\r\n                    textAlign: col.align || 'left',\r\n                    fontSize: tokens.typography.fontSize.xxs,\r\n                    fontWeight: tokens.typography.fontWeight.bold,\r\n                    color: tokens.colors.text.tertiary,\r\n                    textTransform: 'uppercase',\r\n                    letterSpacing: '0.06em',\r\n                    backgroundColor: tokens.colors.background.surface,\r\n                    borderBottom: tokens.borders.divider,\r\n                    width: resolveWidth(col.width),\r\n                    position: 'sticky',\r\n                    top: 0,\r\n                    zIndex: 1,\r\n                    whiteSpace: 'nowrap',\r\n                  }}\r\n                >\r\n                  {renderHeaderCell(col)}\r\n                </th>\r\n              ))}\r\n            </tr>\r\n          </thead>\r\n        )}\r\n        \r\n        <tbody>\r\n          {data.length === 0 && (\r\n            <tr>\r\n              <td\r\n                colSpan={visibleColumnCount}\r\n                style={{\r\n                  padding: tokens.spacing.xl,\r\n                  textAlign: 'center',\r\n                  color: tokens.colors.text.tertiary,\r\n                  fontSize: tokens.typography.fontSize.sm,\r\n                }}\r\n              >\r\n                {emptyMessage}\r\n              </td>\r\n            </tr>\r\n          )}\r\n          \r\n          {groups.map(group => {\r\n            const isExpanded = !groupBy || isGroupExpanded(group.key);\r\n            \r\n            return (\r\n              <React.Fragment key={group.key}>\r\n                {groupBy && group.label && (\r\n                  <tr\r\n                    style={{\r\n                      backgroundColor: addAlpha(tokens.colors.accent.primary, 0.08),\r\n                    }}\r\n                  >\r\n                    <td\r\n                      colSpan={visibleColumnCount}\r\n                      style={{\r\n                        padding: 0,\r\n                        borderBottom: tokens.borders.divider,\r\n                      }}\r\n                    >\r\n                      {expandable ? (\r\n                        <button\r\n                          type=\"button\"\r\n                          aria-expanded={isExpanded}\r\n                          onClick={() => toggleGroup(group.key)}\r\n                          style={{\r\n                            display: 'flex',\r\n                            alignItems: 'center',\r\n                            gap: tokens.spacing.xs,\r\n                            width: '100%',\r\n                            padding: cellPadding,\r\n                            margin: 0,\r\n                            border: 'none',\r\n                            background: 'none',\r\n                            cursor: 'pointer',\r\n                            fontWeight: tokens.typography.fontWeight.semibold,\r\n                            color: tokens.colors.text.primary,\r\n                            fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,\r\n                            fontFamily: 'inherit',\r\n                            textAlign: 'left',\r\n                          }}\r\n                        >\r\n                          {chevron(isExpanded)}\r\n                          {group.label}\r\n                          <span style={{\r\n                            fontSize: tokens.typography.fontSize.xxs,\r\n                            color: tokens.colors.text.tertiary,\r\n                            fontWeight: tokens.typography.fontWeight.normal,\r\n                          }}>\r\n                            ({group.rows.length})\r\n                          </span>\r\n                        </button>\r\n                      ) : (\r\n                        <div\r\n                          style={{\r\n                            display: 'flex',\r\n                            alignItems: 'center',\r\n                            gap: tokens.spacing.xs,\r\n                            padding: cellPadding,\r\n                            fontWeight: tokens.typography.fontWeight.semibold,\r\n                            color: tokens.colors.text.primary,\r\n                            fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,\r\n                          }}\r\n                        >\r\n                          {group.label}\r\n                          <span style={{\r\n                            fontSize: tokens.typography.fontSize.xxs,\r\n                            color: tokens.colors.text.tertiary,\r\n                            fontWeight: tokens.typography.fontWeight.normal,\r\n                          }}>\r\n                            ({group.rows.length})\r\n                          </span>\r\n                        </div>\r\n                      )}\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n                \r\n                {isExpanded && group.rows.map((row, localIndex) => {\r\n                  const rowIdx = globalRowIndex++;\r\n                  return renderRowContent(row, rowIdx, localIndex);\r\n                })}\r\n              </React.Fragment>\r\n            );\r\n          })}\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  );\r\n}) as <T extends Record<string, unknown>>(props: DataTableProps<T>) => React.ReactElement;\r\n\r\nexport default DataTable;\r\n"],"names":["DataTableRowDetail","CellTooltipWrapper","DataTable"],"mappings":"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"}

package/dist/react/core/DataValue.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+import { AstroIconName } from './AstroIcon';
+import { PropertyKey, StatusThresholds } from './propertyConfig';
+import { StatusLevel } from '../utils';
+
+export type DataValueVariant = 'stacked' | 'inline' | 'compact' | 'minimal' | 'card' | 'banner';
+export type DataValueSize = 'sm' | 'md' | 'lg';
+export interface DataValueProps {
+    /** Property key for auto-configuration (e.g., 'temperature', 'battery') */
+    property?: PropertyKey;
+    /** Display label (overrides property preset) */
+    label?: string;
+    /** Current value */
+    value: number | string | undefined | null;
+    /** Unit of measurement (overrides property preset) */
+    unit?: string;
+    /** Icon name (overrides property preset) */
+    icon?: AstroIconName;
+    /** Show icon */
+    showIcon?: boolean;
+    /** Status thresholds for auto-derivation (overrides property preset) */
+    thresholds?: StatusThresholds;
+    /** Override status (bypasses auto-derivation) */
+    status?: StatusLevel;
+    /** Show status indicator */
+    showStatus?: boolean;
+    /** Precision for number formatting (overrides property preset) */
+    precision?: number;
+    /** Layout variant */
+    variant?: DataValueVariant;
+    /** Size */
+    size?: DataValueSize;
+    /** Custom value color (overrides status color) */
+    color?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+    /** Click handler */
+    onClick?: () => void;
+    /** Tooltip text */
+    tooltip?: string;
+}
+export declare const DataValue: React.NamedExoticComponent<DataValueProps>;
+export interface DataValueGroupProps {
+    /** Title for the group */
+    title?: string;
+    /** Icon for the title */
+    icon?: AstroIconName;
+    /** Layout direction */
+    direction?: 'row' | 'column' | 'grid';
+    /** Number of columns for grid layout */
+    columns?: number;
+    /** Gap between items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Children DataValue components */
+    children: React.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+}
+export declare const DataValueGroup: React.NamedExoticComponent<DataValueGroupProps>;
+export default DataValue;