@axzydev/axzy_ui_system 1.3.2 → 1.3.4

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/molecules/table/table.doc.mdx

@@ -42,6 +42,7 @@ Basic data table with column definitions, sorting, and configurable visual varia
 | `minWidth` | `number` | — | Minimum column width in px, applied to header and body cells via inline style. |
 | `align` | `"left" \| "center" \| "right"` | `"left"` | Horizontal alignment of the column's header and cells. |
 | `truncate` | `boolean` | `false` | Truncates overflowing cell content with an ellipsis and exposes the raw string/number via the native `title` attribute. |
+| `filter` | `true \| "catalog" \| "search" \| "date" \| "date-range"` | `false` | Filter control rendered in the header. `true` = text/number input (or boolean toggle when `type: "boolean"`); `"catalog"` = `ITSelect` fed by `catalogOptions.data`; `"search"` = `ITSearchSelect` typeahead fed by `catalogOptions.data` (optional `catalogOptions.onSearch` for server-side search); `"date"` / `"date-range"` = `ITDatePicker` single/range, bounded by `dateFilterOptions`. |
 
 ## Usage
 
@@ -67,6 +68,15 @@ const data = [
   onRowClick={(row, event) => console.log(row, event.type)}
 />
 
+// Filter modes: ITSearchSelect typeahead + ITDatePicker single / range
+const filterColumns = [
+  { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles } },
+  { key: 'lastLogin', label: 'Last login', type: 'date', filter: 'date', dateFilterOptions: { maxDate: new Date() } },
+  { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
+];
+
+<ITTable columns={filterColumns} data={data} />
+
 // No horizontal scroll: fixed layout + per-column widths + truncation
 const fixedColumns = [
   { key: 'name',  label: 'Name',  type: 'string', width: '30%', truncate: true },
@@ -81,6 +91,7 @@ const fixedColumns = [
 
 - `columns[].render` provides custom cell rendering via render function
 - `columns[].sortable` enables column header sort toggles
+- `columns[].filter` supports `true` (text/number input, or boolean toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`; bound with `dateFilterOptions: { minDate, maxDate }`). Filtering is client-side: `"date"` matches the whole day, `"date-range"` includes both ends (`startOfDay` / `endOfDay`).
 - `onRowClick` fires in **both** the table and cards views. The event is a `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space activation.
 - Clicks/keys that start inside an interactive child (`button`, `a`, `input`, `select`, `textarea`, `[role="button"]`, `[role="link"]`, `[data-row-click-ignore]`) do **not** trigger `onRowClick`.
 - When `onRowClick` is omitted no `cursor-pointer`, focus ring, `tabIndex`, or `role` is added.

package/src/components/molecules/table/table.props.ts

@@ -3,6 +3,18 @@ import { TableDensity, TableSize, TableVariants } from "@/types/table.types";
 /** Data type of a table column, controls default rendering, filter UI, and sort comparison. */
 export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
 
+/**
+ * Per-column filter mode, set through `Column.filter`.
+ *
+ * - `true` — text/number input (or boolean toggle when `type: "boolean"`).
+ * - `"catalog"` — `ITSelect` dropdown populated from `catalogOptions`.
+ * - `"search"` — `ITSearchSelect` typeahead populated from `catalogOptions`
+ *   (respects `catalogOptions.onSearch` for server-side search).
+ * - `"date"` — `ITDatePicker` single-date filter.
+ * - `"date-range"` — `ITDatePicker` in range mode.
+ */
+export type ColumnFilterMode = boolean | "catalog" | "search" | "date" | "date-range";
+
 /** A single selectable entry for a `"catalog"`-type column's filter/value lookup. */
 export interface CatalogOption {
   /** Unique identifier matched against the row's field value. */
@@ -23,8 +35,8 @@ export interface Column<T = any> {
   currencyMX?: boolean;
   /** Custom action buttons/content rendered for a `"actions"`-type column. Receives the full row object. */
   actions?: (row: T) => React.ReactNode;
-  /** Enables per-column filtering. Pass `true` for a text/number/boolean filter matching `type`, or `"catalog"` to filter against `catalogOptions`. @default false */
-  filter?: boolean | "catalog";
+  /** Enables per-column filtering. Pass `true` for a text/number/boolean filter matching `type`, `"catalog"` for an `ITSelect` fed by `catalogOptions`, `"search"` for an `ITSearchSelect` typeahead, or `"date"` / `"date-range"` for an `ITDatePicker`. @default false */
+  filter?: ColumnFilterMode;
   /** Column data type. Drives default cell rendering, filter UI, and sort comparison. */
   type: ColumnType;
   /** Whether clicking the header sorts by this column. Ignored for `type: "actions"`. @default false */
@@ -45,6 +57,22 @@ export interface Column<T = any> {
     loading?: boolean;
     /** Shows an error state in the filter UI when the catalog failed to load. @default false */
     error?: boolean;
+    /**
+     * Server-side search handler for a `filter: "search"` column. When provided,
+     * `ITSearchSelect` delegates filtering to this callback (debounced) instead
+     * of filtering `data` locally; the parent is expected to update `data`.
+     */
+    onSearch?: (query: string) => void;
+  };
+  /**
+   * Date bounds applied by the `"date"` and `"date-range"` filters, forwarded to
+   * the underlying `ITDatePicker`. Ignored by every other filter mode.
+   */
+  dateFilterOptions?: {
+    /** Earliest selectable date. */
+    minDate?: Date;
+    /** Latest selectable date. */
+    maxDate?: Date;
   };
   /**
    * Fixed column width. A `number` is treated as pixels (`width: 120` → `120px`);

package/src/components/molecules/table/table.stories.tsx

@@ -325,3 +325,33 @@ export const VirtualizedLargeDataset: Story = {
     itemsPerPageOptions: [50, 100, 250],
   } as any,
 };
+
+// --- COLUMN FILTER MODES ---
+
+const filterModeColumns: Column<User>[] = [
+  { key: "name", label: "Name", type: "string", filter: true },
+  {
+    key: "roleId",
+    label: "Role (ITSearchSelect)",
+    type: "catalog",
+    filter: "search",
+    catalogOptions: { data: mockRoles },
+  },
+  {
+    key: "lastLogin",
+    label: "Last login (ITDatePicker range)",
+    type: "date",
+    filter: "date-range",
+    dateFilterOptions: { maxDate: new Date() },
+    render: (row) => new Date(row.lastLogin).toLocaleDateString("es-MX"),
+  },
+];
+
+export const WithSearchAndDateFilters: Story = {
+  args: {
+    columns: filterModeColumns,
+    data: generateMockData(25),
+    title: "Filtros: ITSearchSelect + ITDatePicker (rango)",
+    defaultItemsPerPage: 8,
+  } as any,
+};

package/src/components/molecules/table/table.tsx

@@ -15,12 +15,16 @@ import { MdOutlineSwapVert } from "react-icons/md";
 import ITInput from "@/components/atoms/input/input";
 import ITPagination from "@/components/molecules/pagination/pagination";
 import ITSelect from "@/components/molecules/select/select";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import { isSameDay, startOfDay, endOfDay } from "date-fns";
 import { Column, ITTableProps } from "./table.props";
 import ITText from "@/components/atoms/text/text";
 import {
   tableActionsCell,
   tableBody,
   tableCardClickable,
+  tableCardHover,
   tableCell,
   tableCellText,
   tableContainer,
@@ -145,21 +149,39 @@ export default function ITTable<T extends Record<string, unknown>>({
 
   const filteredData = sortedData.filter((row) =>
     columns.every((col) => {
-      if (
-        !col.filter ||
-        filters[col.key] === undefined ||
-        filters[col.key] === ""
-      )
+      const rawFilter = filters[col.key];
+      if (!col.filter || rawFilter === undefined || rawFilter === "") return true;
+      // A date range with both ends empty means "no filter".
+      if (Array.isArray(rawFilter) && rawFilter[0] == null && rawFilter[1] == null) {
         return true;
+      }
 
       const value = getNestedValue(row, col.key);
-      const filterValue = String(filters[col.key]).toLowerCase();
+
+      if (col.filter === "date" || col.filter === "date-range") {
+        const rowDate = value instanceof Date ? value : new Date(String(value));
+        if (isNaN(rowDate.getTime())) return false;
+        if (col.filter === "date") {
+          return isSameDay(rowDate, rawFilter as Date);
+        }
+        const [start, end] = rawFilter as [Date | null, Date | null];
+        if (start && rowDate.getTime() < startOfDay(start).getTime()) return false;
+        if (end && rowDate.getTime() > endOfDay(end).getTime()) return false;
+        return true;
+      }
+
+      if (col.filter === "search") {
+        // The search-select stores the exact option value (id).
+        return String(value) === String(rawFilter);
+      }
+
+      const filterValue = String(rawFilter).toLowerCase();
 
       switch (col.type) {
         case "number":
           return String(value).includes(filterValue);
         case "boolean":
-          return value === filters[col.key];
+          return value === rawFilter;
         case "catalog": {
           if (!col.catalogOptions) return true;
           const catalogItem = col.catalogOptions.data.find(
@@ -282,6 +304,81 @@ export default function ITTable<T extends Record<string, unknown>>({
       );
     }
 
+    if (col.filter === "search" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return (
+          <FaSpinner
+            className="animate-spin"
+            aria-label="Cargando opciones"
+            title="Cargando opciones"
+          />
+        );
+      }
+
+      if (col.catalogOptions.error) {
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
+      }
+
+      const searchValue = filters[col.key];
+      return (
+        <ITSearchSelect
+          name={`filter-${col.key}`}
+          options={col.catalogOptions.data.map((item) => ({
+            value: item.id,
+            label: item.name,
+          }))}
+          value={
+            typeof searchValue === "string" || typeof searchValue === "number"
+              ? searchValue
+              : ""
+          }
+          onChange={(value) => handleFilterChange(col.key, value === "" ? undefined : value)}
+          onSearch={col.catalogOptions.onSearch}
+          isLoading={col.catalogOptions.loading}
+          size="sm"
+          placeholder="Buscar..."
+          clearable
+          className="w-full"
+          onBlur={() => { }}
+        />
+      );
+    }
+
+    if (col.filter === "date") {
+      const dateValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          value={dateValue instanceof Date ? dateValue : undefined}
+          onChange={(e) => handleFilterChange(col.key, e.target.value as Date)}
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa"
+          className="w-full"
+        />
+      );
+    }
+
+    if (col.filter === "date-range") {
+      const rangeValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          range
+          value={Array.isArray(rangeValue) ? rangeValue : undefined}
+          onChange={(e) =>
+            handleFilterChange(col.key, e.target.value as [Date | null, Date | null])
+          }
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa - dd/mm/aaaa"
+          className="w-full"
+        />
+      );
+    }
+
     return (
       <ITInput
         name={`filter-${col.key}`}
@@ -441,7 +538,7 @@ export default function ITTable<T extends Record<string, unknown>>({
               currentData.map((row, i) => (
                 <div
                   key={i}
-                  className={clsx(onRowClick && tableCardClickable)}
+                  className={clsx(tableCardHover, onRowClick && tableCardClickable)}
                   role={onRowClick ? "button" : undefined}
                   tabIndex={onRowClick ? 0 : undefined}
                   onClick={onRowClick ? handleRowClick(row) : undefined}

package/src/components/organisms/data-table/ITDataTable.doc.mdx

@@ -14,7 +14,7 @@ Advanced server-side data table with automatic pagination, column sorting, and f
 | `columns` | `Column<T>[]` | — | Column definitions with key, label, type, sortable, filter, render, plus layout fields: `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), and `truncate` (ellipsis + native `title`). |
 | `fetchData` | `(params: ITDataTableFetchParams) => Promise<ITDataTableResponse<T>>` | — | Async callback triggered on pagination, filter, or sort change. Must return `{ data, total }`. |
 | `debounceMs` | `number` | `500` | Delay in ms before firing fetch after filter state changes. |
-| `externalFilters` | `Record<string, string \| number \| boolean \| Date>` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. |
+| `externalFilters` | `ColumnFilters` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. Values may be scalars, a `Date`, or a `[start, end]` tuple. |
 | `loadingIndicator` | `ReactNode` | `<FaSpinner />` | Custom element shown while loading. |
 | `fetchOnMount` | `boolean` | `true` | Whether to fetch data on initial mount. |
 | `reloadTrigger` | `number \| string \| boolean` | — | Changing this value forces a re-fetch. Use after mutations. |
@@ -56,6 +56,15 @@ import { ITDataTable } from '@axzydev/axzy_ui_system';
   variant="bordered"
 />
 
+// Search + date filters (values arrive in params.filters)
+<ITDataTable
+  columns={[
+    { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles, onSearch: (q) => api.searchRoles(q) } },
+    { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
+  ]}
+  fetchData={async (params) => api.fetchItems(params)}
+/>
+
 // No horizontal scroll: fixed layout + per-column widths + truncation
 <ITDataTable
   columns={[
@@ -71,7 +80,7 @@ import { ITDataTable } from '@axzydev/axzy_ui_system';
 
 ## Notes
 
-- Column filters support `"catalog"` (dropdown), `true` (text input), and `boolean` (tri-state toggle).
+- Column filters support `true` (text/number input, or boolean tri-state toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`, bounded by `dateFilterOptions`). In `fetchData(params)`, `params.filters[key]` is a `Date` for `"date"`, a `[start, end]` tuple for `"date-range"`, and the scalar/id otherwise.
 - The `externalFilters` prop allows integrating external filter controls like date pickers without building filter UI into the table itself.
 - Debounce prevents excessive API calls while the user types in filter inputs.
 - A loading skeleton overlay covers the table body while fetching, keeping the header visible.

package/src/components/organisms/data-table/ITDataTable.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { startOfDay, endOfDay } from 'date-fns';
 import ITDataTable from './dataTable';
 import { ITDataTableFetchParams, ITDataTableResponse } from './dataTable.props';
 import ITCard from '@/components/molecules/card/card';
@@ -243,6 +244,78 @@ export const WithRowClick: Story = {
   },
 };
 
+export const WithSearchAndDateFilters: Story = {
+  render: () => {
+    const searchDateFetch = useCallback(
+      async (params: ITDataTableFetchParams): Promise<ITDataTableResponse<any>> => {
+        await new Promise((r) => setTimeout(r, 400));
+        let filtered = [...MOCK_DATA];
+
+        Object.entries(params.filters).forEach(([key, value]) => {
+          if (value === undefined || value === '') return;
+
+          if (key === 'role') {
+            filtered = filtered.filter((item) => item.role === value);
+          } else if (key === 'createdAt') {
+            if (Array.isArray(value)) {
+              const [rangeStart, rangeEnd] = value as [Date | null, Date | null];
+              if (!rangeStart && !rangeEnd) return;
+              filtered = filtered.filter((item) => {
+                const time = new Date(item.createdAt).getTime();
+                if (rangeStart && time < startOfDay(rangeStart).getTime()) return false;
+                if (rangeEnd && time > endOfDay(rangeEnd).getTime()) return false;
+                return true;
+              });
+            } else if (value instanceof Date) {
+              filtered = filtered.filter(
+                (item) => new Date(item.createdAt).toDateString() === value.toDateString()
+              );
+            }
+          }
+        });
+
+        const start = (params.page - 1) * params.limit;
+        return { data: filtered.slice(start, start + params.limit), total: filtered.length };
+      },
+      []
+    );
+
+    const filterColumns = useMemo(
+      () => [
+        { key: 'username', label: 'Usuario', type: 'string' as const, filter: true, sortable: true },
+        {
+          key: 'role',
+          label: 'Rol (ITSearchSelect)',
+          type: 'string' as const,
+          filter: 'search' as const,
+          sortable: true,
+          catalogOptions: { data: ROLES.map((role) => ({ id: role, name: role })) },
+          render: (row: any) => <ITBadget label={row.role} />,
+        },
+        {
+          key: 'createdAt',
+          label: 'Alta (ITDatePicker range)',
+          type: 'date' as const,
+          filter: 'date-range' as const,
+          sortable: true,
+          dateFilterOptions: { maxDate: new Date() },
+          render: (row: any) => new Date(row.createdAt).toLocaleDateString('es-MX'),
+        },
+      ],
+      []
+    );
+
+    return (
+      <ITDataTable
+        title="Filtros: ITSearchSelect + ITDatePicker (rango)"
+        columns={filterColumns as any}
+        fetchData={searchDateFetch}
+        defaultItemsPerPage={8}
+      />
+    );
+  },
+};
+
 export const SkeletonLoading: Story = {
   args: {
     title: 'Cargando Datos...',

package/src/components/organisms/data-table/dataTable.props.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Column } from "@/components/molecules/table/table.props";
-import { TableDensity } from "@/types/table.types";
+import { ColumnFilters, TableDensity } from "@/types/table.types";
 
 /** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
 export interface ITDataTableFetchParams {
@@ -8,8 +8,12 @@ export interface ITDataTableFetchParams {
   page: number;
   /** Number of rows requested per page. */
   limit: number;
-  /** Active per-column filter values (from `Column.filter`), keyed by column `key`. */
-  filters: Record<string, string | number | boolean | Date>;
+  /**
+   * Active per-column filter values (from `Column.filter`), keyed by column
+   * `key`. Scalars for text/number/boolean/date filters, a `Date` for
+   * `filter: "date"`, and a `[start, end]` tuple for `filter: "date-range"`.
+   */
+  filters: ColumnFilters;
   /** Active sort, present only when the user has clicked a sortable column header. */
   sort?: {
     /** Column `key` currently sorted by. */
@@ -50,7 +54,7 @@ export interface ITDataTableProps<T extends Record<string, unknown>> {
    * Filters managed outside of the ITDataTable (e.g. a date range picker).
    * These will be merged with the internal column filters before calling fetchData.
    */
-  externalFilters?: Record<string, string | number | boolean | Date>;
+  externalFilters?: ColumnFilters;
 
   /**
    * Custom element to display instead of the default spinner while `isLoading` is true.

package/src/components/organisms/data-table/dataTable.tsx

@@ -9,6 +9,8 @@ import { MdOutlineSwapVert } from "react-icons/md";
 import ITInput from "@/components/atoms/input/input";
 import ITPagination from "@/components/molecules/pagination/pagination";
 import ITSelect from "@/components/molecules/select/select";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
 import { Column } from "@/components/molecules/table/table.props";
 import { formatCurrencyMX, isInteractiveTarget } from "@/utils/table.utils";
 import { ITDataTableProps } from "./dataTable.props";
@@ -17,6 +19,7 @@ import {
   tableActionsCell,
   tableBody,
   tableCardClickable,
+  tableCardHover,
   tableCell,
   tableCellText,
   tableContainer,
@@ -252,6 +255,76 @@ export default function ITDataTable<T extends Record<string, unknown>>({
       );
     }
 
+    if (col.filter === "search" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return <FaSpinner className="animate-spin" aria-label="Cargando opciones" title="Cargando opciones" />;
+      }
+      if (col.catalogOptions.error) {
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
+      }
+      const searchValue = filters[col.key];
+      return (
+        <ITSearchSelect
+          name={`filter-${col.key}`}
+          options={col.catalogOptions.data.map((item) => ({
+            value: item.id,
+            label: item.name,
+          }))}
+          value={
+            typeof searchValue === "string" || typeof searchValue === "number"
+              ? searchValue
+              : ""
+          }
+          onChange={(value) => handleFilterChange(col.key, value === "" ? undefined : value)}
+          onSearch={col.catalogOptions.onSearch}
+          isLoading={col.catalogOptions.loading}
+          size="sm"
+          placeholder="Buscar..."
+          clearable
+          className="w-full"
+          onBlur={() => {}}
+          disabled={isLoading}
+        />
+      );
+    }
+
+    if (col.filter === "date") {
+      const dateValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          value={dateValue instanceof Date ? dateValue : undefined}
+          onChange={(e) => handleFilterChange(col.key, e.target.value as Date)}
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa"
+          className="w-full"
+          disabled={isLoading}
+        />
+      );
+    }
+
+    if (col.filter === "date-range") {
+      const rangeValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          range
+          value={Array.isArray(rangeValue) ? rangeValue : undefined}
+          onChange={(e) =>
+            handleFilterChange(col.key, e.target.value as [Date | null, Date | null])
+          }
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa - dd/mm/aaaa"
+          className="w-full"
+          disabled={isLoading}
+        />
+      );
+    }
+
     return (
       <ITInput
         name={`filter-${col.key}`}
@@ -551,7 +624,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                 data.map((row, i) => (
                   <div
                     key={i}
-                    className={clsx(onRowClick && !isLoading && tableCardClickable)}
+                    className={clsx(tableCardHover, onRowClick && !isLoading && tableCardClickable)}
                     role={onRowClick && !isLoading ? "button" : undefined}
                     tabIndex={onRowClick && !isLoading ? 0 : undefined}
                     onClick={onRowClick && !isLoading ? handleRowClick(row) : undefined}

package/src/components/theme-provider/themePresets.ts

@@ -21,6 +21,7 @@ export const DEFAULT_PALETTE: ITThemePalette = {
     headerText: "#334155", // Slate-700
     rowBg: "#ffffff", // White
     rowText: "#1e293b", // Slate-800
+    rowHover: "#f1f5f9", // Slate-100
   },
 };
 
@@ -48,6 +49,7 @@ export const PRESETS: { name: string; colors: ITThemePalette }[] = [
         headerText: "#334155",
         rowBg: "#ffffff",
         rowText: "#0f172a",
+        rowHover: "#1e293b",
       },
     },
   },
@@ -73,6 +75,7 @@ export const PRESETS: { name: string; colors: ITThemePalette }[] = [
         headerText: "#881337",
         rowBg: "#ffffff",
         rowText: "#1c1212",
+        rowHover: "#fff1f2",
       },
     },
   },
@@ -98,6 +101,7 @@ export const PRESETS: { name: string; colors: ITThemePalette }[] = [
         headerText: "#115e59",
         rowBg: "#ffffff",
         rowText: "#042f2e",
+        rowHover: "#f0fdfa",
       },
     },
   },
@@ -123,6 +127,7 @@ export const PRESETS: { name: string; colors: ITThemePalette }[] = [
         headerText: "#713f12",
         rowBg: "#ffffff",
         rowText: "#292524",
+        rowHover: "#fefce8",
       },
     },
   },
@@ -148,6 +153,7 @@ export const PRESETS: { name: string; colors: ITThemePalette }[] = [
         headerText: "#166534",
         rowBg: "#ffffff",
         rowText: "#052e16",
+        rowHover: "#f0fdf4",
       },
     },
   },

package/src/components/theme-provider/themeProvider.doc.mdx

@@ -38,6 +38,7 @@ Root theme context that injects CSS custom properties into the entire component
 | `table.headerText` | `string` | Table header text color. |
 | `table.rowBg` | `string` | Table row background color. |
 | `table.rowText` | `string` | Table row text color. |
+| `table.rowHover` | `string` | Table row background color while hovering a row. |
 
 ## Usage
 

package/src/components/theme-provider/themeProvider.props.ts

@@ -36,6 +36,8 @@ export interface ITThemePalette {
     rowBg: string;
     /** Text color of table body rows. @default "#1e293b" */
     rowText: string;
+    /** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
+    rowHover: string;
   };
 }
 

package/src/components/theme-provider/themeProvider.tsx

@@ -364,6 +364,7 @@ export default function ITThemeProvider({
     let tableRowText = palette.table.rowText;
     let tableHeaderBg = palette.table.headerBg;
     let tableHeaderText = palette.table.headerText;
+    let tableRowHover = palette.table.rowHover;
     let navbarBg = palette.layout.navbarBg;
     let navbarText = palette.layout.navbarText;
     let sidebarBg = palette.layout.sidebarBg;
@@ -382,6 +383,9 @@ export default function ITThemeProvider({
       if (!isLightColor(tableHeaderText)) {
         tableHeaderText = `color-mix(in srgb, ${palette.table.headerText} 20%, #f9fafb)`;
       }
+      if (isLightColor(tableRowHover)) {
+        tableRowHover = `color-mix(in srgb, ${palette.table.rowHover} 12%, #1f2937)`;
+      }
       if (isLightColor(navbarBg)) {
         navbarBg = `color-mix(in srgb, ${palette.layout.navbarBg} 8%, #111827)`;
       }
@@ -419,10 +423,15 @@ export default function ITThemeProvider({
         tableHeaderText = `color-mix(in srgb, ${palette.table.headerText} 30%, #334155)`;
       } else if (
         !isLightColor(tableHeaderText) &&
-        isVeryDarkColor(palette.table.headerText)
+        isVeryDarkColor(tableHeaderText)
       ) {
         // Dark header text is fine for light mode
       }
+      if (!isLightColor(tableRowHover)) {
+        tableRowHover = isVeryDarkColor(palette.table.rowHover)
+          ? "#f1f5f9"
+          : `color-mix(in srgb, ${palette.table.rowHover} 12%, #f8fafc)`;
+      }
       if (!isLightColor(navbarBg)) {
         navbarBg = isVeryDarkColor(palette.layout.navbarBg)
           ? "#ffffff"
@@ -637,6 +646,7 @@ export default function ITThemeProvider({
         --color-table-headerText: ${tableHeaderText} !important;
         --color-table-rowBg: ${tableRowBg} !important;
         --color-table-rowText: ${tableRowText} !important;
+        --color-table-rowHover: ${tableRowHover} !important;
 
         /* Native library variables integration */
         --it-sidebar-bg: var(--color-sidebarBg);
@@ -980,7 +990,7 @@ export default function ITThemeProvider({
         color: var(--color-table-rowText) !important;
       }
       tbody tr:hover {
-        background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-table-rowBg)) !important;
+        background-color: var(--color-table-rowHover) !important;
       }
 
       /* Animation for Saved Indicator */
@@ -1781,6 +1791,7 @@ export default function ITThemeProvider({
                           "table.headerText",
                           "table.rowBg",
                           "table.rowText",
+                          "table.rowHover",
                         ].map((key) => (
                           <ColorRow key={key} colorKey={key} />
                         ))}