@zendir/ui 0.5.0 → 0.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../src/react/core/data/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 '../overlays/Tooltip';\r\nimport type { TooltipPlacement } from '../overlays/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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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/react/core/data/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 \"../overlays/Tooltip\";\r\nimport type { TooltipPlacement } from \"../overlays/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?: (\r\n    value: unknown,\r\n    row: T,\r\n    index: number,\r\n  ) => 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?: (\r\n    row: T,\r\n    index: number,\r\n  ) =>\r\n    | \"normal\"\r\n    | \"caution\"\r\n    | \"serious\"\r\n    | \"critical\"\r\n    | \"standby\"\r\n    | \"off\"\r\n    | 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\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\r\n          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        >\r\n          {icon}\r\n          <div style={{ flex: 1, minWidth: 0 }}>\r\n            {title && (\r\n              <div\r\n                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              >\r\n                {title}\r\n              </div>\r\n            )}\r\n            {subtitle && (\r\n              <div\r\n                style={{\r\n                  fontSize: tokens.typography.fontSize.xxs,\r\n                  color: tokens.colors.text.tertiary,\r\n                  marginTop: 2,\r\n                }}\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\r\n          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        >\r\n          {fields.map((field, i) => (\r\n            <React.Fragment key={i}>\r\n              <span\r\n                style={{\r\n                  color: tokens.colors.text.tertiary,\r\n                  whiteSpace: \"nowrap\",\r\n                }}\r\n              >\r\n                {field.label}\r\n              </span>\r\n              <span\r\n                style={{\r\n                  color: field.status\r\n                    ? tokens.colors.status[field.status] ||\r\n                      tokens.colors.text.primary\r\n                    : tokens.colors.text.primary,\r\n                  fontFamily: field.mono\r\n                    ? tokens.typography.fontFamily.mono\r\n                    : \"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              >\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\r\n          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        >\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<\r\n  T extends Record<string, unknown>,\r\n>({\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    () => ({\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    }),\r\n    [tokens.colors.status],\r\n  );\r\n  const visibleColumns = isMobileView\r\n    ? columns.filter((col) => !col.hideOnMobile)\r\n    : 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\r\n    ? `${tokens.spacing.xs} ${tokens.spacing.sm}`\r\n    : `${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(\r\n    (group: string) => {\r\n      return expandedGroups.has(\"__all__\") || expandedGroups.has(group);\r\n    },\r\n    [expandedGroups],\r\n  );\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 =\r\n        booleanColor ??\r\n        (getRowStatus\r\n          ? (() => {\r\n              const s = getRowStatus(row, rowIndex);\r\n              return s ? statusColorMap[s] : undefined;\r\n            })()\r\n          : 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 = (\r\n    col: DataTableColumn<T>,\r\n    row: T,\r\n    rowIndex: number,\r\n  ) => {\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\"\r\n            height=\"12\"\r\n            viewBox=\"0 0 16 16\"\r\n            fill=\"none\"\r\n            style={{ opacity: 0.5, flexShrink: 0 }}\r\n          >\r\n            <circle\r\n              cx=\"8\"\r\n              cy=\"8\"\r\n              r=\"7\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"1.5\"\r\n            />\r\n            <path\r\n              d=\"M8 7v4\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"1.5\"\r\n              strokeLinecap=\"round\"\r\n            />\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\r\n        content={col.headerTooltip}\r\n        placement=\"bottom\"\r\n        delay={tooltipDelay}\r\n      >\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\"\r\n      height=\"14\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"2\"\r\n      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={\r\n          onRowClick\r\n            ? (e) => {\r\n                if (e.key === \"Enter\" || e.key === \" \") {\r\n                  e.preventDefault();\r\n                  onRowClick(row, rowIdx);\r\n                }\r\n              }\r\n            : undefined\r\n        }\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\r\n                ? tokens.typography.fontFamily.mono\r\n                : \"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\r\n            ? tokens.typography.fontSize.xs\r\n            : 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(\r\n                        tokens.colors.accent.primary,\r\n                        0.08,\r\n                      ),\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\r\n                              ? tokens.typography.fontSize.xs\r\n                              : 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\r\n                            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                          >\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\r\n                              ? tokens.typography.fontSize.xs\r\n                              : tokens.typography.fontSize.sm,\r\n                          }}\r\n                        >\r\n                          {group.label}\r\n                          <span\r\n                            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                          >\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 &&\r\n                  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>>(\r\n  props: DataTableProps<T>,\r\n) => React.ReactElement;\r\n\r\nexport default DataTable;\r\n"],"mappings":"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"}

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

@@ -2,9 +2,8 @@ import { default as React } from 'react';
 import { AstroIconName } from '../display/AstroIcon';
 import { PropertyKey, StatusThresholds } from './propertyConfig';
 import { StatusLevel } from '../../utils';
-
-export type DataValueVariant = 'stacked' | 'inline' | 'compact' | 'minimal' | 'card' | 'banner' | 'stat';
-export type DataValueSize = 'sm' | 'md' | 'lg';
+export type DataValueVariant = "stacked" | "inline" | "compact" | "minimal" | "card" | "banner" | "stat";
+export type DataValueSize = "sm" | "md" | "lg";
 export interface DataValueProps {
     /** Property key for auto-configuration (e.g., 'temperature', 'battery') */
     property?: PropertyKey;
@@ -48,11 +47,11 @@ export interface DataValueGroupProps {
     /** Icon for the title */
     icon?: AstroIconName;
     /** Layout direction */
-    direction?: 'row' | 'column' | 'grid';
+    direction?: "row" | "column" | "grid";
     /** Number of columns for grid layout */
     columns?: number;
     /** Gap between items */
-    gap?: 'sm' | 'md' | 'lg';
+    gap?: "sm" | "md" | "lg";
     /** Children DataValue components */
     children: React.ReactNode;
     /** Additional CSS class */