@versini/ui-datagrid 3.0.11 → 3.1.0

package/dist/{131.js → 197.js}

@@ -1,10 +1,12 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { DataGridContext, clsx } from "./926.js";
-import { useRef, useContext, useLayoutEffect } from "./511.js";
+import clsx from "clsx";
+import { useContext, useLayoutEffect, useRef } from "react";
+import { DataGridContext } from "./430.js";
+
 
 
 /**
@@ -13,12 +15,14 @@ import { useRef, useContext, useLayoutEffect } from "./511.js";
  * are provided, or define their own grid otherwise.
  *
  * @param className - Additional class name to merge
+ *
  */ function getBodyClass(className) {
     return clsx("contents", className);
 }
 
 
 
+
 /**
  * Snap a CSS pixel value to the nearest device pixel.
  *
@@ -36,7 +40,7 @@ import { useRef, useContext, useLayoutEffect } from "./511.js";
     // Guard against invalid DPR values.
     const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
     /**
-	 * Note: `window.devicePixelRatio` can be < 1 in some zoom/scaling scenarios.
+	 * NOTE: `window.devicePixelRatio` can be < 1 in some zoom/scaling scenarios.
 	 * We intentionally accept any DPR > 0 rather than clamping to 1 so that we
 	 * still snap to the real device pixel grid.
 	 */ const quantum = 1 / dpr;

package/dist/{926.js → 430.js}

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { createContext } from "./511.js";
+import { createContext } from "react";
 
 
 
@@ -12,4 +12,3 @@ const DataGridContext = createContext({
 });
 
 export { DataGridContext };
-export { default as clsx } from "clsx";

package/dist/{46.js → 799.js}

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 

package/dist/{298.js → 91.js}

@@ -1,10 +1,11 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { clsx } from "./926.js";
-import { BlurEffects, CellWrapper } from "./46.js";
+import clsx from "clsx";
+import { BlurEffects, CellWrapper } from "./799.js";
+
 
 
 
@@ -60,6 +61,35 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>clsx({
         "dark:border-table-light": isSys(mode),
         "dark:border-table-dark": isAlt(mode)
     });
+/**
+ * Hover classes for body rows.
+ *
+ * The hover lifts both the background and the text color so the highlighted row
+ * reads as a single, cohesive change (mirroring the light-mode behavior where
+ * the font color shifts too).
+ *
+ * The shade is tuned per surface so the lift stays proportional:
+ * - Dark surfaces (slate-900 base) only step up to `table-dark-hover`
+ *   (slate-700) instead of the much brighter `surface-medium` (slate-500),
+ *   which felt harsh against very dark tables, and brighten the text to
+ *   `copy-lighter` (white).
+ * - Light surfaces (slate-300 base) keep the established `surface-medium`
+ *   (slate-500) background with `copy-light` (slate-200) text.
+ *
+ * Pairing matches `getBorderClasses`/`getSurfaceBackgroundClasses` so the hover
+ * always tracks the active surface, including the OS-driven `dark:` flips that
+ * `system` and `alt-system` perform.
+ *
+ */ const getRowHoverClasses = ({ mode })=>clsx(/**
+		 * Smooth the hover so quick mouse sweeps fade rather than flash. Animating
+		 * the row's background- and (inherited) text-color is enough; cells stay
+		 * transparent and follow the row's transitioning color.
+		 */ "transition-colors duration-300 ease-in-out motion-reduce:transition-none", {
+        "hover:bg-table-dark-hover hover:text-copy-lighter": isDarkish(mode),
+        "hover:bg-surface-medium hover:text-copy-light": isLightish(mode),
+        "dark:hover:bg-surface-medium dark:hover:text-copy-light": isSys(mode),
+        "dark:hover:bg-table-dark-hover dark:hover:text-copy-lighter": isAlt(mode)
+    });
 /**
  * Blur effect classes for sticky elements.
  */ const getBlurClasses = ({ blurEffect })=>clsx({
@@ -68,33 +98,24 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>clsx({
         "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
     });
 /**
- * Loading text classes for loading state. Rendered as a high-contrast pill —
- * background is the inverse of the grid surface so the message stays legible
- * against the blurred content behind it.
- */ const getLoadingTextClasses = ({ mode })=>clsx("px-5 py-2 rounded-full shadow-lg text-sm font-semibold", {
-        "bg-surface-light text-copy-dark": isDark(mode),
-        "bg-surface-darker text-copy-light": isLight(mode),
-        "bg-surface-darker text-copy-light dark:bg-surface-light dark:text-copy-dark": isSys(mode),
-        "bg-surface-light text-copy-dark dark:bg-surface-darker dark:text-copy-light": isAlt(mode)
-    });
+ * Loading text classes for loading state. Rendered as a high-contrast pill with
+ * a fixed dark background and light text so the message stays legible against
+ * the blurred content behind it regardless of the grid mode.
+ */ const getLoadingTextClasses = ()=>"px-5 py-2 rounded-full shadow-lg text-sm font-semibold bg-surface-darker text-copy-light";
 /**
  * Overlay classes for loading state. Uses z-30/z-40 to layer above the sticky
  * header/footer (z-20), which sit later in the DOM within the same stacking
  * context and would otherwise paint on top of an equal-z overlay.
- */ const getOverlayClasses = ({ mode })=>({
+ */ const getOverlayClasses = ()=>({
         inner: "relative",
         overlay: clsx("absolute inset-0 z-30 cursor-not-allowed rounded-lg", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
         loadingWrapper: clsx("absolute z-40 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
-        loadingText: getLoadingTextClasses({
-            mode
-        })
+        loadingText: getLoadingTextClasses()
     });
 /**
  * Generates classes for the main DataGrid wrapper and grid.
  */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading })=>{
-    const overlayClasses = loading ? getOverlayClasses({
-        mode
-    }) : null;
+    const overlayClasses = loading ? getOverlayClasses() : null;
     const hasSticky = stickyHeader || stickyFooter;
     return {
         overlay: overlayClasses?.overlay ?? "",
@@ -179,7 +200,9 @@ const ROW_LAYOUT = "group grid items-center";
         return clsx(ROW_LAYOUT, className);
     }
     const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" : "border-b" : "border-b last:border-0";
-    return clsx(ROW_LAYOUT, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
+    return clsx(ROW_LAYOUT, borderClasses, getRowHoverClasses({
+        mode
+    }), getBorderClasses({
         mode
     }), className);
 };

package/dist/DataGrid/DataGridTypes.d.ts

@@ -101,8 +101,8 @@ export type DataGridHeaderProps = {
 } & React.HTMLAttributes<HTMLDivElement>;
 export type DataGridBodyProps = ({
     /**
-     * If true, applies styles for an empty state (e.g. removing extra row borders).
-     * Used when there are no rows to display.
+     * If true, applies styles for an empty state (e.g. removing extra row
+     * borders). Used when there are no rows to display.
      */
     noData: true;
     /**
@@ -115,8 +115,8 @@ export type DataGridBodyProps = ({
     noDataText?: string;
 } | {
     /**
-     * If true, applies styles for an empty state (e.g. removing extra row borders).
-     * Used when there are no rows to display.
+     * If true, applies styles for an empty state (e.g. removing extra row
+     * borders). Used when there are no rows to display.
      * @default false
      */
     noData?: false;

package/dist/DataGrid/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { jsxs, Fragment, useState, useCallback, useMemo, jsx } from "../511.js";
-import { BlurEffects } from "../46.js";
-import { getDataGridClasses } from "../298.js";
-import { DataGridContext } from "../926.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { BlurEffects } from "../799.js";
+import { getDataGridClasses } from "../91.js";
+import { DataGridContext } from "../430.js";
+
+
 
 
 
@@ -172,4 +175,4 @@ import { DataGridContext } from "../926.js";
 
 
 export { DataGrid };
-export { DataGridContext } from "../926.js";
+export { DataGridContext } from "../430.js";

package/dist/DataGridAnimated/index.js

@@ -1,9 +1,12 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { useState, useLayoutEffect, useRef, jsx } from "../511.js";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+
+
 
 
 const DEFAULT_ANIMATION_DURATION = 300;

package/dist/DataGridBody/getBodyClass.d.ts

@@ -4,5 +4,6 @@
  * are provided, or define their own grid otherwise.
  *
  * @param className - Additional class name to merge
+ *
  */
 export declare function getBodyClass(className?: string): string;

package/dist/DataGridBody/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { useRef, useContext, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { getBodyClass, useColumnMeasurement } from "../131.js";
-import { CellWrapper } from "../46.js";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { DataGridContext } from "../430.js";
+import { getBodyClass, useColumnMeasurement } from "../197.js";
+import { CellWrapper } from "../799.js";
+
+
 
 
 

package/dist/DataGridCell/index.js

@@ -1,11 +1,12 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { getCellRole, getCellClasses } from "../298.js";
+import { jsx } from "react/jsx-runtime";
+import { DataGridContext } from "../430.js";
+import { getCellRole, getCellClasses } from "../91.js";
+
 
 
 

package/dist/DataGridCellSort/index.js

@@ -1,13 +1,18 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
+import { jsx, jsxs } from "react/jsx-runtime";
 import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
-import { jsxs, jsx } from "../511.js";
-import { DataGridContext, clsx } from "../926.js";
-import { BlurEffects } from "../46.js";
-import { getCellClasses, getTextColorClassesForHeaderFooter } from "../298.js";
+import clsx from "clsx";
+import { BlurEffects } from "../799.js";
+import { getCellClasses, getTextColorClassesForHeaderFooter } from "../91.js";
+import { DataGridContext } from "../430.js";
+
+
+
+
 
 
 

package/dist/DataGridConstants/index.js

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
 
 
 
-export { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "../46.js";
+export { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "../799.js";

package/dist/DataGridFooter/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { useLayoutEffect, useRef, useEffect, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getFooterClasses } from "../298.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getFooterClasses } from "../91.js";
+
+
 
 
 

package/dist/DataGridHeader/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { jsxs, useLayoutEffect, useId, useRef, useEffect, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getCaptionClasses, getHeaderClasses } from "../298.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef } from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getCaptionClasses, getHeaderClasses } from "../91.js";
+
+
 
 
 

package/dist/DataGridInfinite/DataGridInfiniteBody.d.ts

@@ -1,7 +1,7 @@
 export type DataGridInfiniteBodyProps<T> = ({
     /**
-     * If true, displays an empty state instead of infinite scroll content.
-     * When noData is true, data, children, and scroll-related props are optional.
+     * If true, displays an empty state instead of infinite scroll content. When
+     * noData is true, data, children, and scroll-related props are optional.
      */
     noData: true;
     /**
@@ -10,7 +10,8 @@ export type DataGridInfiniteBodyProps<T> = ({
     data?: T[];
     /**
      * Render function for each row. Should return a DataGridRow element. The
-     * consumer is responsible for providing the key prop on the returned element.
+     * consumer is responsible for providing the key prop on the returned
+     * element.
      */
     children?: (item: T, index: number) => React.ReactNode;
     /**
@@ -29,7 +30,8 @@ export type DataGridInfiniteBodyProps<T> = ({
     data: T[];
     /**
      * Render function for each row. Should return a DataGridRow element. The
-     * consumer is responsible for providing the key prop on the returned element.
+     * consumer is responsible for providing the key prop on the returned
+     * element.
      */
     children: (item: T, index: number) => React.ReactNode;
     noDataText?: never;

package/dist/DataGridInfinite/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { useMemo, useContext, useImperativeHandle, useState, useCallback, useRef, useEffect, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getBodyClass, useColumnMeasurement } from "../131.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getBodyClass, useColumnMeasurement } from "../197.js";
+
+
 
 
 

package/dist/DataGridRow/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { react, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getRowClasses } from "../298.js";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getRowClasses } from "../91.js";
+
+
 
 
 

package/dist/DataGridSorting/index.js

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v3.0.11
+  @versini/ui-datagrid v3.1.0
   © 2026 gizmette.com
 */
 
-import { SortDirections } from "../46.js";
+import { SortDirections } from "../799.js";
 
 
 /**
@@ -233,4 +233,4 @@ import { SortDirections } from "../46.js";
 
 
 export { getNextSortConfig, getOppositeSortDirection, sortByBoolean, sortByDate, sortByNumber, sortByString, sortItems, toggleSortDirection };
-export { SortDirections } from "../46.js";
+export { SortDirections } from "../799.js";

package/dist/utilities/classes.d.ts

@@ -28,6 +28,29 @@ export declare const getHeaderFooterBackgroundClasses: ({ hasBlur, sticky, }: {
 export declare const getBorderClasses: ({ mode }: {
     mode: ThemeMode;
 }) => string;
+/**
+ * Hover classes for body rows.
+ *
+ * The hover lifts both the background and the text color so the highlighted row
+ * reads as a single, cohesive change (mirroring the light-mode behavior where
+ * the font color shifts too).
+ *
+ * The shade is tuned per surface so the lift stays proportional:
+ * - Dark surfaces (slate-900 base) only step up to `table-dark-hover`
+ *   (slate-700) instead of the much brighter `surface-medium` (slate-500),
+ *   which felt harsh against very dark tables, and brighten the text to
+ *   `copy-lighter` (white).
+ * - Light surfaces (slate-300 base) keep the established `surface-medium`
+ *   (slate-500) background with `copy-light` (slate-200) text.
+ *
+ * Pairing matches `getBorderClasses`/`getSurfaceBackgroundClasses` so the hover
+ * always tracks the active surface, including the OS-driven `dark:` flips that
+ * `system` and `alt-system` perform.
+ *
+ */
+export declare const getRowHoverClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
 /**
  * Blur effect classes for sticky elements.
  */
@@ -35,21 +58,17 @@ export declare const getBlurClasses: ({ blurEffect }: {
     blurEffect?: BlurEffect;
 }) => string;
 /**
- * Loading text classes for loading state. Rendered as a high-contrast pill —
- * background is the inverse of the grid surface so the message stays legible
- * against the blurred content behind it.
+ * Loading text classes for loading state. Rendered as a high-contrast pill with
+ * a fixed dark background and light text so the message stays legible against
+ * the blurred content behind it regardless of the grid mode.
  */
-export declare const getLoadingTextClasses: ({ mode }: {
-    mode: ThemeMode;
-}) => string;
+export declare const getLoadingTextClasses: () => string;
 /**
  * Overlay classes for loading state. Uses z-30/z-40 to layer above the sticky
  * header/footer (z-20), which sit later in the DOM within the same stacking
  * context and would otherwise paint on top of an equal-z overlay.
  */
-export declare const getOverlayClasses: ({ mode }: {
-    mode: ThemeMode;
-}) => {
+export declare const getOverlayClasses: () => {
     inner: string;
     overlay: string;
     loadingWrapper: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "3.0.11",
+	"version": "3.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -98,5 +98,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "0588fe5fb0a43f60469546467a1ab7fd9179b0cd"
+	"gitHead": "8ae610468c121bc5ed1438573a4d2ab7068c053d"
 }

package/dist/511.js

@@ -1,9 +0,0 @@
-/*!
-  @versini/ui-datagrid v3.0.11
-  © 2026 gizmette.com
-*/
-
-
-
-export { Fragment, jsx, jsxs } from "react/jsx-runtime";
-export { createContext, default as react, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";