@archbase/components 4.0.19 → 4.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.0.19",
+  "version": "4.0.20",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -47,6 +47,8 @@
     "@pdfme/schemas": "^5.3.6",
     "@pdfme/ui": "^5.3.6",
     "@rehooks/component-size": "^1.0.3",
+    "ag-grid-community": "^35.3.0",
+    "ag-grid-react": "^35.3.0",
     "ajv": "^8.16.0",
     "cep-promise": "^4.4.0",
     "chart.js": "^4.4.2",
@@ -120,9 +122,9 @@
     "vis-timeline": "^7.7.3",
     "xlsx": "^0.18.5",
     "yet-another-react-lightbox": "^3.21.0",
-    "@archbase/core": "4.0.19",
-    "@archbase/data": "4.0.19",
-    "@archbase/layout": "4.0.19"
+    "@archbase/core": "4.0.20",
+    "@archbase/data": "4.0.20",
+    "@archbase/layout": "4.0.20"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/datagrid/ag-grid/ag-grid-locale-ptbr.ts

@@ -0,0 +1,432 @@
+/**
+ * AG Grid Portuguese (Brazil) Locale
+ *
+ * Complete translation for AG Grid Community in pt-BR
+ */
+
+export const AG_GRID_LOCALE_PTBR: Record<string, string> = {
+  // Set Filter
+  selectAll: '(Selecionar Todos)',
+  selectAllSearchResults: '(Selecionar Todos os Resultados)',
+  addCurrentSelectionToFilter: 'Adicionar seleção atual ao filtro',
+  searchOoo: 'Buscar...',
+  blanks: '(Vazios)',
+  noMatches: 'Sem correspondências',
+
+  // Number Filter & Text Filter
+  filterOoo: 'Filtrar...',
+  equals: 'Igual a',
+  notEqual: 'Diferente de',
+  blank: 'Vazio',
+  notBlank: 'Não vazio',
+  empty: 'Escolha um',
+
+  // Number Filter
+  lessThan: 'Menor que',
+  greaterThan: 'Maior que',
+  lessThanOrEqual: 'Menor ou igual a',
+  greaterThanOrEqual: 'Maior ou igual a',
+  inRange: 'No intervalo',
+  inRangeStart: 'De',
+  inRangeEnd: 'Até',
+
+  // Text Filter
+  contains: 'Contém',
+  notContains: 'Não contém',
+  startsWith: 'Começa com',
+  endsWith: 'Termina com',
+
+  // Date Filter
+  dateFormatOoo: 'dd/mm/aaaa',
+  before: 'Antes',
+  after: 'Depois',
+
+  // Filter Conditions
+  andCondition: 'E',
+  orCondition: 'OU',
+
+  // Filter Buttons
+  applyFilter: 'Aplicar',
+  resetFilter: 'Redefinir',
+  clearFilter: 'Limpar',
+  cancelFilter: 'Cancelar',
+
+  // Filter Titles
+  textFilter: 'Filtro de Texto',
+  numberFilter: 'Filtro Numérico',
+  dateFilter: 'Filtro de Data',
+  setFilter: 'Filtro de Conjunto',
+
+  // Group Column Filter
+  groupFilterSelect: 'Selecionar campo:',
+
+  // Advanced Filter
+  advancedFilterContains: 'contém',
+  advancedFilterNotContains: 'não contém',
+  advancedFilterTextEquals: 'igual a',
+  advancedFilterTextNotEqual: 'diferente de',
+  advancedFilterStartsWith: 'começa com',
+  advancedFilterEndsWith: 'termina com',
+  advancedFilterBlank: 'está vazio',
+  advancedFilterNotBlank: 'não está vazio',
+  advancedFilterEquals: '=',
+  advancedFilterNotEqual: '!=',
+  advancedFilterGreaterThan: '>',
+  advancedFilterGreaterThanOrEqual: '>=',
+  advancedFilterLessThan: '<',
+  advancedFilterLessThanOrEqual: '<=',
+  advancedFilterTrue: 'é verdadeiro',
+  advancedFilterFalse: 'é falso',
+  advancedFilterAnd: 'E',
+  advancedFilterOr: 'OU',
+  advancedFilterApply: 'Aplicar',
+  advancedFilterBuilder: 'Construtor',
+  advancedFilterValidationMissingColumn: 'Coluna ausente',
+  advancedFilterValidationMissingOption: 'Opção ausente',
+  advancedFilterValidationMissingValue: 'Valor ausente',
+  advancedFilterValidationInvalidColumn: 'Coluna não encontrada',
+  advancedFilterValidationInvalidOption: 'Opção não encontrada',
+  advancedFilterValidationMissingQuote: 'O valor está sem aspas de fechamento',
+  advancedFilterValidationNotANumber: 'O valor não é um número',
+  advancedFilterValidationInvalidDate: 'O valor não é uma data válida',
+  advancedFilterValidationMissingCondition: 'Condição ausente',
+  advancedFilterValidationJoinOperatorMismatch: 'Os operadores de junção em uma condição devem ser iguais',
+  advancedFilterValidationInvalidJoinOperator: 'Operador de junção não encontrado',
+  advancedFilterValidationMissingEndBracket: 'Falta o parêntese de fechamento',
+  advancedFilterValidationExtraEndBracket: 'Parênteses de fechamento em excesso',
+  advancedFilterValidationMessage: 'A expressão contém um erro. ${variable} - ${variable}.',
+  advancedFilterValidationMessageAtEnd: 'A expressão contém um erro. ${variable} no final da expressão.',
+  advancedFilterBuilderTitle: 'Filtro Avançado',
+  advancedFilterBuilderApply: 'Aplicar',
+  advancedFilterBuilderCancel: 'Cancelar',
+  advancedFilterBuilderAddButtonTooltip: 'Adicionar Filtro ou Grupo',
+  advancedFilterBuilderRemoveButtonTooltip: 'Remover',
+  advancedFilterBuilderMoveUpButtonTooltip: 'Mover para Cima',
+  advancedFilterBuilderMoveDownButtonTooltip: 'Mover para Baixo',
+  advancedFilterBuilderAddJoin: 'Adicionar Grupo',
+  advancedFilterBuilderAddCondition: 'Adicionar Filtro',
+  advancedFilterBuilderSelectColumn: 'Selecionar uma coluna',
+  advancedFilterBuilderSelectOption: 'Selecionar uma opção',
+  advancedFilterBuilderEnterValue: 'Inserir um valor...',
+  advancedFilterBuilderValidationAlreadyApplied: 'Filtro atual já aplicado.',
+  advancedFilterBuilderValidationIncomplete: 'Nem todas as condições estão completas.',
+  advancedFilterBuilderValidationSelectColumn: 'Deve selecionar uma coluna.',
+  advancedFilterBuilderValidationSelectOption: 'Deve selecionar uma opção.',
+  advancedFilterBuilderValidationEnterValue: 'Deve inserir um valor.',
+
+  // Side Bar
+  columns: 'Colunas',
+  filters: 'Filtros',
+
+  // columns tool panel
+  pivotMode: 'Modo Pivô',
+  groups: 'Grupos de Linhas',
+  rowGroupColumnsEmptyMessage: 'Arraste aqui para definir grupos de linhas',
+  values: 'Valores',
+  valueColumnsEmptyMessage: 'Arraste aqui para agregar',
+  pivots: 'Rótulos de Coluna',
+  pivotColumnsEmptyMessage: 'Arraste aqui para definir rótulos de coluna',
+
+  // Header of the Default Group Column
+  group: 'Grupo',
+
+  // Row Drag
+  rowDragRow: 'linha',
+  rowDragRows: 'linhas',
+
+  // Other
+  loadingOoo: 'Carregando...',
+  loadingError: 'ERR',
+  noRowsToShow: 'Nenhum registro para exibir',
+  enabled: 'Habilitado',
+
+  // Menu
+  pinColumn: 'Fixar Coluna',
+  pinLeft: 'Fixar à Esquerda',
+  pinRight: 'Fixar à Direita',
+  noPin: 'Não Fixar',
+  valueAggregation: 'Agregação de Valor',
+  noAggregation: 'Nenhuma',
+  autosizeThisColumn: 'Ajustar Esta Coluna',
+  autosizeAllColumns: 'Ajustar Todas as Colunas',
+  groupBy: 'Agrupar por',
+  ungroupBy: 'Desagrupar por',
+  ungroupAll: 'Desagrupar Todos',
+  addToValues: 'Adicionar ${variable} aos valores',
+  removeFromValues: 'Remover ${variable} dos valores',
+  addToLabels: 'Adicionar ${variable} aos rótulos',
+  removeFromLabels: 'Remover ${variable} dos rótulos',
+  resetColumns: 'Redefinir Colunas',
+  expandAll: 'Expandir Tudo',
+  collapseAll: 'Recolher Tudo',
+  copy: 'Copiar',
+  ctrlC: 'Ctrl+C',
+  ctrlX: 'Ctrl+X',
+  copyWithHeaders: 'Copiar com Cabeçalhos',
+  copyWithGroupHeaders: 'Copiar com Cabeçalhos de Grupo',
+  cut: 'Recortar',
+  paste: 'Colar',
+  ctrlV: 'Ctrl+V',
+  export: 'Exportar',
+  csvExport: 'Exportar CSV',
+  excelExport: 'Exportar Excel',
+
+  // Enterprise Menu Aggregation and Status Bar
+  sum: 'Soma',
+  first: 'Primeiro',
+  last: 'Último',
+  min: 'Mín',
+  max: 'Máx',
+  none: 'Nenhum',
+  count: 'Contagem',
+  avg: 'Média',
+  filteredRows: 'Filtrados',
+  selectedRows: 'Selecionados',
+  totalRows: 'Total de Linhas',
+  totalAndFilteredRows: 'Linhas',
+  more: 'Mais',
+  to: 'até',
+  of: 'de',
+  page: 'Página',
+  pageLastRowUnknown: '?',
+  nextPage: 'Próxima Página',
+  lastPage: 'Última Página',
+  firstPage: 'Primeira Página',
+  previousPage: 'Página Anterior',
+  pageSizeSelectorLabel: 'Tamanho da Página:',
+  footerTotal: 'Total',
+
+  // Pivoting
+  pivotColumnGroupTotals: 'Total',
+
+  // Enterprise Menu (Clipboard)
+  toolPanelButton: 'Painel de Ferramentas',
+
+  // Enterprise Menu (Columns)
+  columnSelectAll: 'Selecionar Tudo',
+  columnSelectNone: 'Desmarcar Tudo',
+
+  // Enterprise Menu (Charts)
+  pivotChartAndPivotMode: 'Gráfico Dinâmico e Modo Pivô',
+  pivotChart: 'Gráfico Dinâmico',
+  chartRange: 'Intervalo do Gráfico',
+
+  columnChart: 'Coluna',
+  groupedColumn: 'Agrupado',
+  stackedColumn: 'Empilhado',
+  normalizedColumn: '100% Empilhado',
+
+  barChart: 'Barra',
+  groupedBar: 'Agrupado',
+  stackedBar: 'Empilhado',
+  normalizedBar: '100% Empilhado',
+
+  pieChart: 'Pizza',
+  pie: 'Pizza',
+  doughnut: 'Rosca',
+
+  line: 'Linha',
+
+  xyChart: 'X Y (Dispersão)',
+  scatter: 'Dispersão',
+  bubble: 'Bolha',
+
+  areaChart: 'Área',
+  area: 'Área',
+  stackedArea: 'Empilhado',
+  normalizedArea: '100% Empilhado',
+
+  histogramChart: 'Histograma',
+
+  combinationChart: 'Combinação',
+  columnLineCombo: 'Coluna e Linha',
+  AreaColumnCombo: 'Área e Coluna',
+
+  // Charts
+  pivotChartTitle: 'Gráfico Dinâmico',
+  rangeChartTitle: 'Gráfico de Intervalo',
+  settings: 'Configurações',
+  data: 'Dados',
+  format: 'Formato',
+  categories: 'Categorias',
+  defaultCategory: '(Nenhuma)',
+  series: 'Séries',
+  xyValues: 'Valores X Y',
+  paired: 'Modo Pareado',
+  axis: 'Eixo',
+  navigator: 'Navegador',
+  color: 'Cor',
+  thickness: 'Espessura',
+  xType: 'Tipo X',
+  automatic: 'Automático',
+  category: 'Categoria',
+  number: 'Número',
+  time: 'Tempo',
+  autoRotate: 'Rotação Automática',
+  xRotation: 'Rotação X',
+  yRotation: 'Rotação Y',
+  ticks: 'Marcas',
+  width: 'Largura',
+  height: 'Altura',
+  length: 'Comprimento',
+  padding: 'Preenchimento',
+  spacing: 'Espaçamento',
+  chart: 'Gráfico',
+  title: 'Título',
+  titlePlaceholder: 'Título do gráfico - clique duas vezes para editar',
+  background: 'Fundo',
+  font: 'Fonte',
+  top: 'Topo',
+  right: 'Direita',
+  bottom: 'Inferior',
+  left: 'Esquerda',
+  labels: 'Rótulos',
+  size: 'Tamanho',
+  minSize: 'Tamanho Mínimo',
+  maxSize: 'Tamanho Máximo',
+  legend: 'Legenda',
+  position: 'Posição',
+  markerSize: 'Tamanho do Marcador',
+  markerStroke: 'Traço do Marcador',
+  markerPadding: 'Preenchimento do Marcador',
+  itemSpacing: 'Espaçamento do Item',
+  itemPaddingX: 'Preenchimento X do Item',
+  itemPaddingY: 'Preenchimento Y do Item',
+  layoutHorizontalSpacing: 'Espaçamento Horizontal',
+  layoutVerticalSpacing: 'Espaçamento Vertical',
+  strokeWidth: 'Largura do Traço',
+  lineDash: 'Traço da Linha',
+  offset: 'Deslocamento',
+  offsets: 'Deslocamentos',
+  tooltips: 'Dicas',
+  callout: 'Chamada',
+  markers: 'Marcadores',
+  shadow: 'Sombra',
+  blur: 'Desfoque',
+  xOffset: 'Deslocamento X',
+  yOffset: 'Deslocamento Y',
+  lineWidth: 'Largura da Linha',
+  normal: 'Normal',
+  bold: 'Negrito',
+  italic: 'Itálico',
+  boldItalic: 'Negrito Itálico',
+  predefined: 'Predefinido',
+  fillOpacity: 'Opacidade de Preenchimento',
+  strokeOpacity: 'Opacidade do Traço',
+  histogramBinCount: 'Contagem de Bins',
+  columnGroup: 'Coluna',
+  barGroup: 'Barra',
+  pieGroup: 'Pizza',
+  lineGroup: 'Linha',
+  scatterGroup: 'X Y (Dispersão)',
+  areaGroup: 'Área',
+  histogramGroup: 'Histograma',
+  combinationGroup: 'Combinação',
+  groupedColumnTooltip: 'Agrupado',
+  stackedColumnTooltip: 'Empilhado',
+  normalizedColumnTooltip: '100% Empilhado',
+  groupedBarTooltip: 'Agrupado',
+  stackedBarTooltip: 'Empilhado',
+  normalizedBarTooltip: '100% Empilhado',
+  pieTooltip: 'Pizza',
+  doughnutTooltip: 'Rosca',
+  lineTooltip: 'Linha',
+  groupedAreaTooltip: 'Área',
+  stackedAreaTooltip: 'Empilhado',
+  normalizedAreaTooltip: '100% Empilhado',
+  scatterTooltip: 'Dispersão',
+  bubbleTooltip: 'Bolha',
+  histogramTooltip: 'Histograma',
+  columnLineComboTooltip: 'Coluna e Linha',
+  areaColumnComboTooltip: 'Área e Coluna',
+  customComboTooltip: 'Combinação Personalizada',
+  noDataToChart: 'Não há dados disponíveis para gráfico.',
+  pivotChartRequiresPivotMode: 'O Gráfico Dinâmico requer que o Modo Pivô esteja ativado.',
+  chartSettingsToolbarTooltip: 'Menu',
+  chartLinkToolbarTooltip: 'Vinculado à Grade',
+  chartUnlinkToolbarTooltip: 'Desvinculado da Grade',
+  chartDownloadToolbarTooltip: 'Baixar Gráfico',
+  seriesChartType: 'Tipo de Gráfico da Série',
+  seriesType: 'Tipo de Série',
+  secondaryAxis: 'Eixo Secundário',
+
+  // ARIA
+  ariaChecked: 'marcado',
+  ariaColumn: 'Coluna',
+  ariaColumnGroup: 'Grupo de Colunas',
+  ariaColumnList: 'Lista de Colunas',
+  ariaColumnSelectAll: 'Alternar Seleção de Todas as Colunas',
+  ariaDateFilterInput: 'Entrada de Filtro de Data',
+  ariaDefaultListName: 'Lista',
+  ariaFilterColumnsInput: 'Entrada de Filtro de Colunas',
+  ariaFilterFromValue: 'Filtrar do valor',
+  ariaFilterInput: 'Entrada de Filtro',
+  ariaFilterList: 'Lista de Filtros',
+  ariaFilterToValue: 'Filtrar até o valor',
+  ariaFilterValue: 'Valor do Filtro',
+  ariaFilterMenuOpen: 'Abrir Menu de Filtro',
+  ariaFilteringOperator: 'Operador de Filtragem',
+  ariaHidden: 'oculto',
+  ariaIndeterminate: 'indeterminado',
+  ariaInputEditor: 'Editor de Entrada',
+  ariaMenuColumn: 'Pressione CTRL ENTER para abrir o menu da coluna.',
+  ariaRowDeselect: 'Pressione ESPAÇO para desmarcar esta linha',
+  ariaRowSelectAll: 'Pressione Espaço para alternar a seleção de todas as linhas',
+  ariaRowToggleSelection: 'Pressione Espaço para alternar a seleção da linha',
+  ariaRowSelect: 'Pressione ESPAÇO para selecionar esta linha',
+  ariaSearch: 'Buscar',
+  ariaSortableColumn: 'Pressione ENTER para ordenar',
+  ariaToggleVisibility: 'Pressione ESPAÇO para alternar visibilidade',
+  ariaToggleCellValue: 'Pressione ESPAÇO para alternar o valor da célula',
+  ariaUnchecked: 'desmarcado',
+  ariaVisible: 'visível',
+  ariaSearchFilterValues: 'Buscar valores do filtro',
+  ariaPageSizeSelectorLabel: 'Tamanho da Página',
+
+  // ARIA Labels for Drop Zones
+  ariaRowGroupDropZonePanelLabel: 'Grupos de Linhas',
+  ariaValuesDropZonePanelLabel: 'Valores',
+  ariaPivotDropZonePanelLabel: 'Rótulos de Coluna',
+  ariaDropZoneColumnComponentDescription: 'Pressione DELETE para remover',
+  ariaDropZoneColumnValueItemDescription: 'Pressione ENTER para alterar o tipo de agregação',
+  ariaDropZoneColumnGroupItemDescription: 'Pressione ENTER para ordenar',
+
+  // ARIA Labels for Dialogs
+  ariaLabelColumnMenu: 'Menu da Coluna',
+  ariaLabelCellEditor: 'Editor de Célula',
+  ariaLabelDialog: 'Diálogo',
+  ariaLabelSelectField: 'Selecionar Campo',
+  ariaLabelTooltip: 'Dica',
+  ariaLabelContextMenu: 'Menu de Contexto',
+  ariaLabelSubMenu: 'Submenu',
+  ariaLabelAggregationFunction: 'Função de Agregação',
+  ariaLabelAdvancedFilterAutocomplete: 'Autocompletar Filtro Avançado',
+  ariaLabelAdvancedFilterBuilderAddField: 'Adicionar Campo ao Construtor de Filtro Avançado',
+  ariaLabelAdvancedFilterBuilderColumnSelectField: 'Selecionar Coluna no Construtor de Filtro Avançado',
+  ariaLabelAdvancedFilterBuilderOptionSelectField: 'Selecionar Opção no Construtor de Filtro Avançado',
+  ariaLabelAdvancedFilterBuilderJoinSelectField: 'Selecionar Operador de Junção no Construtor de Filtro Avançado',
+
+  // Number Format (Pagination Panel)
+  thousandSeparator: '.',
+  decimalSeparator: ',',
+
+  // Data types
+  true: 'Verdadeiro',
+  false: 'Falso',
+  invalidDate: 'Data Inválida',
+  invalidNumber: 'Número Inválido',
+  january: 'Janeiro',
+  february: 'Fevereiro',
+  march: 'Março',
+  april: 'Abril',
+  may: 'Maio',
+  june: 'Junho',
+  july: 'Julho',
+  august: 'Agosto',
+  september: 'Setembro',
+  october: 'Outubro',
+  november: 'Novembro',
+  december: 'Dezembro',
+};
+
+export default AG_GRID_LOCALE_PTBR;

package/src/datagrid/ag-grid/ag-grid-mantine-theme.ts

@@ -0,0 +1,176 @@
+/**
+ * AG Grid Mantine Theme Integration
+ *
+ * Creates a Quartz-based theme that integrates with Mantine's theme system,
+ * supporting both light and dark color schemes.
+ */
+import { themeQuartz, type Theme } from 'ag-grid-community';
+import type { MantineTheme } from '@mantine/core';
+
+/**
+ * Options for creating AG Grid theme
+ */
+export interface ArchbaseAgGridThemeOptions {
+  headerFontWeight?: number | 'normal' | 'bold';
+}
+
+/**
+ * Creates an AG Grid theme integrated with Mantine's theming system
+ */
+export const createArchbaseAgGridTheme = (
+  theme: MantineTheme,
+  colorScheme: 'light' | 'dark',
+  options?: ArchbaseAgGridThemeOptions
+): Theme => {
+  const isDark = colorScheme === 'dark';
+  const fontWeight = options?.headerFontWeight === 'normal' ? 400
+    : options?.headerFontWeight === 'bold' ? 700
+    : options?.headerFontWeight ?? 600;
+
+  return themeQuartz.withParams({
+    // Background colors
+    backgroundColor: isDark ? theme.colors.dark[6] : theme.white,
+    foregroundColor: isDark ? theme.colors.gray[0] : theme.colors.dark[9],
+
+    // Header styling
+    headerBackgroundColor: isDark ? theme.colors.dark[7] : theme.white,
+    headerFontWeight: fontWeight,
+    headerTextColor: isDark ? theme.colors.gray[0] : theme.colors.dark[9],
+
+    // Accent/Primary color
+    accentColor: theme.colors[theme.primaryColor][6],
+
+    // Row hover
+    rowHoverColor: isDark ? theme.colors.dark[5] : theme.colors.gray[1],
+
+    // Selection colors
+    selectedRowBackgroundColor: isDark
+      ? `rgba(${hexToRgb(theme.colors[theme.primaryColor][9])}, 0.3)`
+      : `rgba(${hexToRgb(theme.colors[theme.primaryColor][1])}, 0.5)`,
+
+    // Borders
+    borderColor: isDark ? theme.colors.dark[4] : theme.colors.gray[3],
+    borderRadius: parseInt(String(theme.radius.sm)) || 4,
+
+    // Typography
+    fontFamily: theme.fontFamily || 'inherit',
+    fontSize: parseInt(String(theme.fontSizes.sm)) || 14,
+
+    // Cell styling
+    cellTextColor: isDark ? theme.colors.gray[0] : theme.colors.dark[9],
+
+    // Odd row (striped) - subtle alternating
+    oddRowBackgroundColor: isDark ? theme.colors.dark[5] : theme.colors.gray[0],
+
+    // Checkbox
+    checkboxCheckedBackgroundColor: theme.colors[theme.primaryColor][6],
+    checkboxCheckedBorderColor: theme.colors[theme.primaryColor][6],
+    checkboxUncheckedBackgroundColor: 'transparent',
+    checkboxUncheckedBorderColor: isDark ? theme.colors.gray[5] : theme.colors.gray[4],
+
+    // Column separator
+    columnBorder: true,
+
+    // Wrapper border - disabled since container already has border
+    wrapperBorder: false,
+    wrapperBorderRadius: 0,
+
+    // Spacing
+    cellHorizontalPadding: 8,
+    headerHeight: 40,
+    rowHeight: 40,
+
+    // Icons
+    iconSize: 16,
+  });
+};
+
+/**
+ * Helper function to convert hex color to RGB values
+ */
+const hexToRgb = (hex: string): string => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    return '0, 0, 0';
+  }
+  return `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`;
+};
+
+/**
+ * Get CSS variables for additional styling not covered by theme params
+ */
+export const getAgGridMantineCssVars = (
+  theme: MantineTheme,
+  colorScheme: 'light' | 'dark'
+): Record<string, string> => {
+  const isDark = colorScheme === 'dark';
+
+  // Cell focus background color
+  const cellFocusBgColor = isDark
+    ? `rgba(${hexToRgb(theme.colors[theme.primaryColor][7])}, 0.3)`
+    : `rgba(${hexToRgb(theme.colors[theme.primaryColor][4])}, 0.25)`;
+
+  return {
+    '--ag-background-color': isDark ? theme.colors.dark[6] : theme.white,
+    '--ag-foreground-color': isDark ? theme.colors.gray[0] : theme.colors.dark[9],
+    '--ag-header-background-color': isDark ? theme.colors.dark[7] : theme.white,
+    '--ag-header-foreground-color': isDark ? theme.colors.gray[0] : theme.colors.dark[9],
+    '--ag-border-color': isDark ? theme.colors.dark[4] : theme.colors.gray[3],
+    '--ag-row-hover-color': isDark ? theme.colors.dark[5] : theme.colors.gray[1],
+    '--ag-selected-row-background-color': isDark
+      ? `rgba(${hexToRgb(theme.colors[theme.primaryColor][9])}, 0.3)`
+      : `rgba(${hexToRgb(theme.colors[theme.primaryColor][1])}, 0.5)`,
+    '--ag-odd-row-background-color': isDark ? theme.colors.dark[5] : theme.colors.gray[0],
+    '--ag-font-family': theme.fontFamily || 'inherit',
+    '--ag-font-size': `${theme.fontSizes.sm}`,
+    '--ag-grid-size': '4px',
+    '--ag-icon-size': '16px',
+    '--ag-cell-horizontal-padding': '8px',
+    '--ag-checkbox-checked-color': theme.colors[theme.primaryColor][6],
+    '--ag-checkbox-unchecked-color': isDark ? theme.colors.gray[5] : theme.colors.gray[4],
+    '--ag-input-focus-border-color': theme.colors[theme.primaryColor][6],
+    // Cell selection/range - background color instead of border
+    '--ag-range-selection-border-color': 'transparent',
+    '--ag-range-selection-background-color': isDark
+      ? `rgba(${hexToRgb(theme.colors[theme.primaryColor][7])}, 0.4)`
+      : `rgba(${hexToRgb(theme.colors[theme.primaryColor][4])}, 0.3)`,
+    '--ag-range-selection-highlight-color': isDark
+      ? `rgba(${hexToRgb(theme.colors[theme.primaryColor][7])}, 0.4)`
+      : `rgba(${hexToRgb(theme.colors[theme.primaryColor][4])}, 0.3)`,
+    // Cell focus - custom variable for focused cell background
+    '--ag-input-focus-box-shadow': 'none',
+    '--archbase-cell-focus-bg': cellFocusBgColor,
+  };
+};
+
+/**
+ * Get custom CSS styles for AG Grid cell focus
+ */
+export const getAgGridCustomStyles = (
+  theme: MantineTheme,
+  colorScheme: 'light' | 'dark'
+): string => {
+  const isDark = colorScheme === 'dark';
+  const cellFocusBgColor = isDark
+    ? `rgba(${hexToRgb(theme.colors[theme.primaryColor][7])}, 0.3)`
+    : `rgba(${hexToRgb(theme.colors[theme.primaryColor][4])}, 0.25)`;
+
+  return `
+    .ag-cell-focus:not(.ag-cell-range-selected) {
+      background-color: ${cellFocusBgColor} !important;
+      border: none !important;
+      outline: none !important;
+    }
+    .ag-cell-focus.ag-cell-range-selected {
+      background-color: ${cellFocusBgColor} !important;
+    }
+    .ag-row-selected .ag-cell-focus {
+      background-color: ${cellFocusBgColor} !important;
+    }
+  `;
+};
+
+/**
+ * Default export for convenience
+ */
+export default createArchbaseAgGridTheme;