{"version":3,"sources":["../src/Table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { MoreVertical } from 'lucide-react';\nimport { Checkbox } from '../Checkbox';\n\nexport interface TableColumn {\n  /**\n   * Unique key for the column\n   */\n  key: string;\n  /**\n   * Column header label\n   */\n  label: string;\n  /**\n   * Whether to show the menu icon in the header\n   */\n  showMenu?: boolean;\n  /**\n   * Custom width for the column\n   */\n  width?: string;\n}\n\nexport interface TableRow {\n  /**\n   * Unique ID for the row\n   */\n  id: string;\n  /**\n   * Cell data keyed by column key\n   */\n  cells: Record<string, React.ReactNode>;\n  /**\n   * Whether the row is selected\n   */\n  selected?: boolean;\n}\n\nexport interface TableProps {\n  /**\n   * Table columns configuration\n   */\n  columns: TableColumn[];\n  /**\n   * Table rows data\n   */\n  rows: TableRow[];\n  /**\n   * Callback when row selection changes\n   */\n  onRowSelectionChange?: (rowId: string, selected: boolean) => void;\n  /**\n   * Callback when select all is toggled\n   */\n  onSelectAllChange?: (selected: boolean) => void;\n  /**\n   * Whether all rows are selected\n   */\n  allSelected?: boolean;\n  /**\n   * Whether some rows are selected (indeterminate state)\n   */\n  someSelected?: boolean;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n  /**\n   * Test ID for testing\n   */\n  'data-testid'?: string;\n}\n\nconst tableStyles: React.CSSProperties = {\n  width: '100%',\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst headerCellStyles: React.CSSProperties = {\n  height: '44px',\n  paddingLeft: '16px',\n  paddingRight: '16px',\n  paddingTop: 0,\n  paddingBottom: 0,\n  backgroundColor: '#f8f8f8',\n  borderBottom: '1px solid #efefef',\n  fontSize: '13px',\n  fontWeight: 600,\n  color: '#2f2f2f',\n  textAlign: 'left',\n  position: 'relative',\n};\n\nconst checkboxCellStyles: React.CSSProperties = {\n  width: '48px',\n  paddingLeft: '16px',\n  paddingRight: '8px',\n};\n\nconst bodyCellStyles: React.CSSProperties = {\n  height: '41px',\n  paddingLeft: '16px',\n  paddingRight: '16px',\n  paddingTop: '8px',\n  paddingBottom: '8px',\n  borderBottom: '1px solid #efefef',\n  fontSize: '13px',\n  color: '#2f2f2f',\n};\n\nconst menuButtonStyles: React.CSSProperties = {\n  width: '24px',\n  height: '24px',\n  border: 'none',\n  backgroundColor: 'transparent',\n  cursor: 'pointer',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: 0,\n  marginLeft: '8px',\n  borderRadius: '4px',\n  transition: 'background-color 0.2s ease-in-out',\n};\n\nconst rowStyles: React.CSSProperties = {\n  transition: 'background-color 0.1s ease-in-out',\n};\n\n/**\n * Table component - Arbor Design System\n *\n * A data table component with selectable rows and column headers.\n * Use with TableContainer to wrap TableControls, Table, and TableFooterPagination together.\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      columns,\n      rows,\n      onRowSelectionChange,\n      onSelectAllChange,\n      allSelected = false,\n      someSelected = false,\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [hoveredRow, setHoveredRow] = React.useState<string | null>(null);\n    const [hoveredMenuButton, setHoveredMenuButton] = React.useState<string | null>(null);\n\n    return (\n      <table\n        ref={ref}\n        className={clsx('arbor-table', className)}\n        style={{ ...tableStyles, ...style }}\n        data-testid={dataTestId}\n      >\n        <thead>\n          <tr>\n            {/* Checkbox header cell */}\n            <th style={{ ...headerCellStyles, ...checkboxCellStyles }}>\n              <Checkbox\n                checked={allSelected}\n                indeterminate={someSelected && !allSelected}\n                onChange={onSelectAllChange}\n                aria-label=\"Select all rows\"\n              />\n            </th>\n\n            {/* Column headers */}\n            {columns.map((column) => (\n              <th\n                key={column.key}\n                style={{\n                  ...headerCellStyles,\n                  ...(column.width ? { width: column.width } : {}),\n                }}\n              >\n                <div style={{ display: 'flex', alignItems: 'center' }}>\n                  <span>{column.label}</span>\n                  {column.showMenu !== false && (\n                    <button\n                      type=\"button\"\n                      onMouseEnter={() => setHoveredMenuButton(`header-${column.key}`)}\n                      onMouseLeave={() => setHoveredMenuButton(null)}\n                      style={{\n                        ...menuButtonStyles,\n                        backgroundColor:\n                          hoveredMenuButton === `header-${column.key}` ? '#f5f5f5' : 'transparent',\n                      }}\n                      aria-label={`${column.label} options`}\n                    >\n                      <MoreVertical size={16} color=\"#595959\" />\n                    </button>\n                  )}\n                </div>\n              </th>\n            ))}\n          </tr>\n        </thead>\n\n        <tbody>\n          {rows.map((row, index) => {\n            const isOdd = index % 2 === 0;\n            const isHovered = hoveredRow === row.id;\n\n            return (\n              <tr\n                key={row.id}\n                onMouseEnter={() => setHoveredRow(row.id)}\n                onMouseLeave={() => setHoveredRow(null)}\n                style={{\n                  ...rowStyles,\n                  backgroundColor: isHovered\n                    ? '#fafafa'\n                    : isOdd\n                      ? 'white'\n                      : '#f8f8f8',\n                }}\n              >\n                {/* Checkbox cell */}\n                <td style={{ ...bodyCellStyles, ...checkboxCellStyles }}>\n                  <Checkbox\n                    checked={row.selected || false}\n                    onChange={(checked) => onRowSelectionChange?.(row.id, checked)}\n                    aria-label={`Select row ${row.id}`}\n                  />\n                </td>\n\n                {/* Data cells */}\n                {columns.map((column) => (\n                  <td key={column.key} style={bodyCellStyles}>\n                    {row.cells[column.key]}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    );\n  }\n);\n\nTable.displayName = 'Table';\n"],"mappings":"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","names":[]}