@axzydev/axzy_ui_system 1.3.2 → 1.3.3

package/package.json

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

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

@@ -21,6 +21,7 @@ import {
   tableActionsCell,
   tableBody,
   tableCardClickable,
+  tableCardHover,
   tableCell,
   tableCellText,
   tableContainer,
@@ -441,7 +442,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/dataTable.tsx

@@ -17,6 +17,7 @@ import {
   tableActionsCell,
   tableBody,
   tableCardClickable,
+  tableCardHover,
   tableCell,
   tableCellText,
   tableContainer,
@@ -551,7 +552,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} />
                         ))}