@axzydev/axzy_ui_system 1.3.2 → 1.3.3

package/dist/index.cjs

@@ -2180,9 +2180,10 @@ function tableHeaderCell(className, density = "normal") {
   return (0, import_clsx11.default)(densityStyles[density].header, "align-top", className);
 }
 var tableBody = "divide-y divide-secondary-100";
-var tableRow = "hover:bg-secondary-50/50 transition-colors duration-150 group";
+var tableRow = "hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))] transition-colors duration-150 group";
 var tableRowClickable = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset";
 var tableCardClickable = "cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+var tableCardHover = "hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))] transition-colors duration-150";
 function tableCell(className, density = "normal") {
   return (0, import_clsx11.default)(densityStyles[density].cell, "align-middle", className);
 }
@@ -4373,7 +4374,7 @@ function ITDataTable({
         effectiveView === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
-            className: (0, import_clsx21.default)(onRowClick && !isLoading && tableCardClickable),
+            className: (0, import_clsx21.default)(tableCardHover, onRowClick && !isLoading && tableCardClickable),
             role: onRowClick && !isLoading ? "button" : void 0,
             tabIndex: onRowClick && !isLoading ? 0 : void 0,
             onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
@@ -8312,7 +8313,7 @@ function ITTable({
     effectiveView === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "div",
       {
-        className: (0, import_clsx43.default)(onRowClick && tableCardClickable),
+        className: (0, import_clsx43.default)(tableCardHover, onRowClick && tableCardClickable),
         role: onRowClick ? "button" : void 0,
         tabIndex: onRowClick ? 0 : void 0,
         onClick: onRowClick ? handleRowClick(row) : void 0,
@@ -10246,8 +10247,10 @@ var DEFAULT_PALETTE = {
     // Slate-700
     rowBg: "#ffffff",
     // White
-    rowText: "#1e293b"
+    rowText: "#1e293b",
     // Slate-800
+    rowHover: "#f1f5f9"
+    // Slate-100
   }
 };
 var PRESETS = [
@@ -10272,7 +10275,8 @@ var PRESETS = [
         headerBg: "#f1f5f9",
         headerText: "#334155",
         rowBg: "#ffffff",
-        rowText: "#0f172a"
+        rowText: "#0f172a",
+        rowHover: "#1e293b"
       }
     }
   },
@@ -10297,7 +10301,8 @@ var PRESETS = [
         headerBg: "#fff1f2",
         headerText: "#881337",
         rowBg: "#ffffff",
-        rowText: "#1c1212"
+        rowText: "#1c1212",
+        rowHover: "#fff1f2"
       }
     }
   },
@@ -10322,7 +10327,8 @@ var PRESETS = [
         headerBg: "#f0fdfa",
         headerText: "#115e59",
         rowBg: "#ffffff",
-        rowText: "#042f2e"
+        rowText: "#042f2e",
+        rowHover: "#f0fdfa"
       }
     }
   },
@@ -10347,7 +10353,8 @@ var PRESETS = [
         headerBg: "#fefce8",
         headerText: "#713f12",
         rowBg: "#ffffff",
-        rowText: "#292524"
+        rowText: "#292524",
+        rowHover: "#fefce8"
       }
     }
   },
@@ -10372,7 +10379,8 @@ var PRESETS = [
         headerBg: "#f0fdf4",
         headerText: "#166534",
         rowBg: "#ffffff",
-        rowText: "#052e16"
+        rowText: "#052e16",
+        rowHover: "#f0fdf4"
       }
     }
   }
@@ -10652,6 +10660,7 @@ function ITThemeProvider({
     let tableRowText = palette2.table.rowText;
     let tableHeaderBg = palette2.table.headerBg;
     let tableHeaderText = palette2.table.headerText;
+    let tableRowHover = palette2.table.rowHover;
     let navbarBg = palette2.layout.navbarBg;
     let navbarText = palette2.layout.navbarText;
     let sidebarBg = palette2.layout.sidebarBg;
@@ -10669,6 +10678,9 @@ function ITThemeProvider({
       if (!isLightColor2(tableHeaderText)) {
         tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 20%, #f9fafb)`;
       }
+      if (isLightColor2(tableRowHover)) {
+        tableRowHover = `color-mix(in srgb, ${palette2.table.rowHover} 12%, #1f2937)`;
+      }
       if (isLightColor2(navbarBg)) {
         navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #111827)`;
       }
@@ -10694,7 +10706,10 @@ function ITThemeProvider({
       }
       if (isLightColor2(tableHeaderText)) {
         tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 30%, #334155)`;
-      } else if (!isLightColor2(tableHeaderText) && isVeryDarkColor(palette2.table.headerText)) {
+      } else if (!isLightColor2(tableHeaderText) && isVeryDarkColor(tableHeaderText)) {
+      }
+      if (!isLightColor2(tableRowHover)) {
+        tableRowHover = isVeryDarkColor(palette2.table.rowHover) ? "#f1f5f9" : `color-mix(in srgb, ${palette2.table.rowHover} 12%, #f8fafc)`;
       }
       if (!isLightColor2(navbarBg)) {
         navbarBg = isVeryDarkColor(palette2.layout.navbarBg) ? "#ffffff" : `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #ffffff)`;
@@ -10904,6 +10919,7 @@ 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);
@@ -11247,7 +11263,7 @@ 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 */
@@ -12009,7 +12025,8 @@ function ITThemeProvider({
                           "table.headerBg",
                           "table.headerText",
                           "table.rowBg",
-                          "table.rowText"
+                          "table.rowText",
+                          "table.rowHover"
                         ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ColorRow, { colorKey: key }, key)) })
                       }
                     ]