@versini/ui-datagrid 0.3.6 → 0.3.8

package/README.md

@@ -107,11 +107,7 @@ function MyTable({ data }) {
 Use the `columns` prop to define column widths with CSS Grid track sizes:
 
 ```tsx
-<DataGrid
-  columns={["200px", "1fr", "auto"]}
-  maxHeight="400px"
-  stickyHeader
->
+<DataGrid columns={["200px", "1fr", "auto"]} maxHeight="400px" stickyHeader>
   <DataGridHeader caption="User List">
     <DataGridRow>
       <DataGridCell>Name</DataGridCell>
@@ -132,6 +128,7 @@ Use the `columns` prop to define column widths with CSS Grid track sizes:
 ```
 
 Supported column values include:
+
 - Fixed sizes: `"200px"`, `"10rem"`, `"5em"`
 - Flexible sizes: `"1fr"`, `"2fr"`
 - Auto sizing: `"auto"`, `"min-content"`, `"max-content"`
@@ -269,66 +266,67 @@ function MySortableTable({ data }) {
 
 ### DataGrid
 
-| Prop               | Type                                            | Default    | Description                                        |
-| ------------------ | ----------------------------------------------- | ---------- | -------------------------------------------------- |
-| `mode`             | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'system'` | Theme mode                                         |
-| `compact`          | `boolean`                                       | `false`    | Reduced padding                                    |
-| `stickyHeader`     | `boolean`                                       | `false`    | Fixed header while scrolling                       |
-| `stickyFooter`     | `boolean`                                       | `false`    | Fixed footer while scrolling                       |
-| `blurEffect`       | `'none' \| 'small' \| 'medium' \| 'large'`      | `'none'`   | Blur intensity for sticky elements                 |
-| `maxHeight`        | `string`                                        | -          | Max height (required for sticky)                   |
-| `disabled`         | `boolean`                                       | `false`    | Show loading overlay with spinner                  |
-| `columns`          | `string[]`                                      | -          | CSS Grid track sizes for column widths             |
-| `summary`          | `string`                                        | -          | Alternative text for screen readers                |
-| `className`        | `string`                                        | -          | CSS class for the grid element                     |
-| `wrapperClassName` | `string`                                        | -          | CSS class for the wrapper container                |
+| Prop               | Type                                            | Default    | Description                            |
+| ------------------ | ----------------------------------------------- | ---------- | -------------------------------------- |
+| `mode`             | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'system'` | Theme mode                             |
+| `compact`          | `boolean`                                       | `false`    | Reduced padding                        |
+| `stickyHeader`     | `boolean`                                       | `false`    | Fixed header while scrolling           |
+| `stickyFooter`     | `boolean`                                       | `false`    | Fixed footer while scrolling           |
+| `blurEffect`       | `'none' \| 'small' \| 'medium' \| 'large'`      | `'none'`   | Blur intensity for sticky elements     |
+| `maxHeight`        | `string`                                        | -          | Max height (required for sticky)       |
+| `disabled`         | `boolean`                                       | `false`    | Show loading overlay with spinner      |
+| `columns`          | `string[]`                                      | -          | CSS Grid track sizes for column widths |
+| `summary`          | `string`                                        | -          | Alternative text for screen readers    |
+| `className`        | `string`                                        | -          | CSS class for the grid element         |
+| `wrapperClassName` | `string`                                        | -          | CSS class for the wrapper container    |
 
 ### DataGridHeader
 
-| Prop               | Type        | Default | Description                       |
-| ------------------ | ----------- | ------- | --------------------------------- |
+| Prop               | Type        | Default | Description                              |
+| ------------------ | ----------- | ------- | ---------------------------------------- |
 | `caption`          | `ReactNode` | -       | Caption/title displayed above header row |
-| `captionClassName` | `string`    | -       | CSS class for the caption element |
-| `className`        | `string`    | -       | CSS class for the header          |
+| `captionClassName` | `string`    | -       | CSS class for the caption element        |
+| `className`        | `string`    | -       | CSS class for the header                 |
 
 ### DataGridBody / DataGridFooter
 
-| Prop        | Type     | Default | Description              |
-| ----------- | -------- | ------- | ------------------------ |
+| Prop        | Type     | Default | Description               |
+| ----------- | -------- | ------- | ------------------------- |
 | `className` | `string` | -       | CSS class for the element |
 
 ### DataGridRow
 
-| Prop        | Type      | Default | Description                          |
-| ----------- | --------- | ------- | ------------------------------------ |
-| `active`    | `boolean` | `false` | Show left border indicator           |
-| `className` | `string`  | -       | CSS class for the row                |
+| Prop        | Type      | Default | Description                                             |
+| ----------- | --------- | ------- | ------------------------------------------------------- |
+| `active`    | `boolean` | `false` | Show left border indicator on the first cell of the row |
+| `className` | `string`  | -       | CSS class for the row                                   |
 
 ### DataGridCell
 
-| Prop        | Type                           | Default | Description                   |
-| ----------- | ------------------------------ | ------- | ----------------------------- |
-| `align`     | `'left' \| 'center' \| 'right'`| `'left'`| Horizontal alignment          |
-| `colSpan`   | `number`                       | `1`     | Number of columns to span     |
-| `active`    | `boolean`                      | `false` | Show left border indicator    |
-| `className` | `string`                       | -       | CSS class for the cell        |
+| Prop          | Type                            | Default  | Description                       |
+| ------------- | ------------------------------- | -------- | --------------------------------- |
+| `align`       | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment              |
+| `colSpan`     | `number`                        | `1`      | Number of columns to span         |
+| `borderLeft`  | `boolean`                       | `false`  | Add vertical border on left side  |
+| `borderRight` | `boolean`                       | `false`  | Add vertical border on right side |
+| `className`   | `string`                        | -        | CSS class for the cell            |
 
 ### DataGridCellSort
 
-| Prop              | Type                                            | Default        | Description                          |
-| ----------------- | ----------------------------------------------- | -------------- | ------------------------------------ |
-| `cellId`          | `string`                                        | **required**   | Unique identifier for the column     |
-| `children`        | `string`                                        | **required**   | Label text for the column header     |
-| `onSort`          | `(cellId, direction?) => void`                  | -              | Handler when sort button is clicked  |
-| `sortDirection`   | `'asc' \| 'desc' \| false`                      | **required**   | Current sort direction               |
-| `sortedCell`      | `string`                                        | **required**   | ID of the currently sorted column    |
-| `align`           | `'left' \| 'center' \| 'right'`                 | `'left'`       | Horizontal alignment                 |
-| `mode`            | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Theme mode for sort button           |
-| `focusMode`       | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Focus mode for sort button           |
-| `slotLeft`        | `ReactNode`                                     | -              | Content to display left of label     |
-| `slotRight`       | `ReactNode`                                     | -              | Content to display right of label    |
-| `className`       | `string`                                        | -              | CSS class for the cell               |
-| `buttonClassName` | `string`                                        | -              | CSS class for the sort button        |
+| Prop              | Type                                            | Default        | Description                         |
+| ----------------- | ----------------------------------------------- | -------------- | ----------------------------------- |
+| `cellId`          | `string`                                        | **required**   | Unique identifier for the column    |
+| `children`        | `string`                                        | **required**   | Label text for the column header    |
+| `onSort`          | `(cellId, direction?) => void`                  | -              | Handler when sort button is clicked |
+| `sortDirection`   | `'asc' \| 'desc' \| false`                      | **required**   | Current sort direction              |
+| `sortedCell`      | `string`                                        | **required**   | ID of the currently sorted column   |
+| `align`           | `'left' \| 'center' \| 'right'`                 | `'left'`       | Horizontal alignment                |
+| `mode`            | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Theme mode for sort button          |
+| `focusMode`       | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Focus mode for sort button          |
+| `slotLeft`        | `ReactNode`                                     | -              | Content to display left of label    |
+| `slotRight`       | `ReactNode`                                     | -              | Content to display right of label   |
+| `className`       | `string`                                        | -              | CSS class for the cell              |
+| `buttonClassName` | `string`                                        | -              | CSS class for the sort button       |
 
 ### useInfiniteScroll
 

package/dist/DataGrid/DataGrid.js

@@ -1,13 +1,13 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
+import { getDataGridClasses } from "../utilities/classes.js";
 import { DataGridContext } from "./DataGridContext.js";
-import { getDataGridClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
@@ -15,9 +15,9 @@ import { getDataGridClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
 
-;// CONCATENATED MODULE: external "./DataGridContext.js"
+;// CONCATENATED MODULE: external "../utilities/classes.js"
 
-;// CONCATENATED MODULE: external "./utilities.js"
+;// CONCATENATED MODULE: external "./DataGridContext.js"
 
 ;// CONCATENATED MODULE: ./src/DataGrid/DataGrid.tsx
 
@@ -42,9 +42,9 @@ import { getDataGridClasses } from "./utilities.js";
 	 */ const [headerHeight, setHeaderHeight] = useState(0);
     const [footerHeight, setFooterHeight] = useState(0);
     /**
-	 * Track measured column widths from the body. Used by sticky header/footer
-	 * to sync column widths since absolutely positioned elements can't use
-	 * CSS subgrid.
+	 * Track measured column widths from the body. Used by sticky header/footer to
+	 * sync column widths since absolutely positioned elements can't use CSS
+	 * subgrid.
 	 */ const [measuredColumnWidths, setMeasuredColumnWidths] = useState([]);
     /**
 	 * Registration callbacks with stable references. Called by

package/dist/DataGrid/DataGridContext.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/AnimatedWrapper.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/useAnimatedHeight.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridBody/DataGridBody.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 
@@ -32,17 +32,19 @@ import { CellWrapper } from "../DataGridConstants/index.js";
     const bodyRef = useRef(null);
     /**
 	 * Measure column widths from the first body row's cells. This is needed
-	 * because sticky header/footer are absolutely positioned and can't use
-	 * CSS subgrid. We measure the body cells (which ARE in the grid flow)
-	 * and report the widths so header/footer can use the same pixel values.
+	 * because sticky header/footer are absolutely positioned and can't use CSS
+	 * subgrid. We measure the body cells (which ARE in the grid flow) and report
+	 * the widths so header/footer can use the same pixel values.
 	 */ useLayoutEffect(()=>{
         const element = bodyRef.current;
         const needsMeasurement = ctx.columns && (ctx.stickyHeader || ctx.stickyFooter);
         if (!element || !needsMeasurement || !ctx.setMeasuredColumnWidths) {
             return;
         }
-        // Find the first row and its cells once, reuse for both measurement and observation
-        const firstRow = element.querySelector('[role="row"]');
+        /**
+		 * Find the first row and its cells once, reuse for both measurement and
+		 * observation.
+		 */ const firstRow = element.querySelector('[role="row"]');
         if (!firstRow) {
             return;
         }
@@ -51,19 +53,19 @@ import { CellWrapper } from "../DataGridConstants/index.js";
             return;
         }
         const measureColumns = ()=>{
-            // Measure each cell's width
+            // Measure each cell's width.
             const widths = Array.from(cells).map((cell)=>cell.getBoundingClientRect().width);
             ctx.setMeasuredColumnWidths?.(widths);
         };
-        // Initial measurement
+        // Initial measurement.
         measureColumns();
-        // Set up ResizeObserver to re-measure when cells resize
+        // Set up ResizeObserver to re-measure when cells resize.
         const observer = new ResizeObserver(()=>{
             measureColumns();
         });
-        // Observe the body element for any size changes
+        // Observe the body element for any size changes.
         observer.observe(element);
-        // Also observe the first row's cells directly for more accurate updates
+        // Also observe the first row's cells directly for more accurate updates.
         for (const cell of cells){
             observer.observe(cell);
         }

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/DataGridCell.d.ts

@@ -1,13 +1,2 @@
 import type { DataGridCellProps } from "../DataGrid/DataGridTypes";
-import { type CellWrapperType, type ThemeMode } from "../DataGridConstants";
-export declare const getCellClasses: ({ cellWrapper, className, compact, align, active, mode, borderLeft, borderRight, }: {
-    cellWrapper?: CellWrapperType;
-    className?: string;
-    mode?: ThemeMode;
-    compact?: boolean;
-    align?: "left" | "center" | "right";
-    active?: boolean;
-    borderLeft?: boolean;
-    borderRight?: boolean;
-}) => string;
-export declare const DataGridCell: ({ className, children, align, active, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridCell/DataGridCell.js

@@ -1,76 +1,25 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/index.js";
+import { getCellClasses, getCellRole } from "../utilities/classes.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "clsx"
-
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
-;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
+;// CONCATENATED MODULE: external "../utilities/classes.js"
 
 ;// CONCATENATED MODULE: ./src/DataGridCell/DataGridCell.tsx
 
 
 
-
-const getCellClasses = ({ cellWrapper, className, compact, align, active, mode, borderLeft, borderRight })=>{
-    const isHeader = cellWrapper === CellWrapper.HEADER;
-    const mainClasses = clsx(// Base padding.
-    {
-        "px-2 py-1": compact,
-        "px-4 py-3": !compact
-    }, // Text alignment.
-    {
-        "text-left justify-start": align === "left" || !align,
-        "text-center justify-center": align === "center",
-        "text-right justify-end": align === "right"
-    }, // Header/footer specific styles.
-    {
-        "font-semibold": isHeader
-    }, // Active row indicator (left border on first cell).
-    {
-        "relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1": active,
-        "before:bg-table-active-dark": active && mode === "dark",
-        "before:bg-table-active-light": active && mode === "light",
-        "before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
-        "before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
-    }, /**
-		 * Vertical borders and active indicator. self-stretch ensures border spans
-		 * full row height in grid layout. When stretching, use flex + items-center
-		 * to maintain vertical centering of content.
-		 */ {
-        "self-stretch flex items-center": borderLeft || borderRight || active,
-        "border-l border-l-table-dark": borderLeft && mode === "dark",
-        "border-l border-l-table-light": borderLeft && mode === "light",
-        "border-l border-l-table-dark dark:border-l-table-light": borderLeft && mode === "system",
-        "border-l border-l-table-light dark:border-l-table-dark": borderLeft && mode === "alt-system",
-        "border-r border-r-table-dark": borderRight && mode === "dark",
-        "border-r border-r-table-light": borderRight && mode === "light",
-        "border-r border-r-table-dark dark:border-r-table-light": borderRight && mode === "system",
-        "border-r border-r-table-light dark:border-r-table-dark": borderRight && mode === "alt-system"
-    }, className);
-    return mainClasses;
-};
-/**
- * Returns the appropriate ARIA role for the cell based on the cell wrapper
- * type.
- */ const getCellRole = (cellWrapper)=>{
-    if (cellWrapper === CellWrapper.HEADER) {
-        return "columnheader";
-    }
-    return "gridcell";
-};
 /* =============================================================================
  * DataGridCell
- * ========================================================================== */ const DataGridCell = ({ className, children, align, active, borderLeft, borderRight, colSpan, style, ...rest })=>{
+ * ========================================================================== */ const DataGridCell = ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest })=>{
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
         children: ({ mode, compact, cellWrapper })=>{
             const mainClasses = getCellClasses({
@@ -79,7 +28,6 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
                 mode,
                 compact,
                 align,
-                active,
                 borderLeft,
                 borderRight
             });
@@ -100,4 +48,4 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
     });
 };
 
-export { DataGridCell, getCellClasses };
+export { DataGridCell };

package/dist/DataGridCell/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 
@@ -8,7 +8,7 @@ import { ButtonSort_private } from "@versini/ui-button/private";
 import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
 import clsx from "clsx";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { getCellClasses } from "../DataGridCell/DataGridCell.js";
+import { getCellClasses } from "../utilities/classes.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
@@ -20,7 +20,7 @@ import { getCellClasses } from "../DataGridCell/DataGridCell.js";
 
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
-;// CONCATENATED MODULE: external "../DataGridCell/DataGridCell.js"
+;// CONCATENATED MODULE: external "../utilities/classes.js"
 
 ;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
 

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/DataGridConstants.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/DataGridFooter.d.ts

@@ -1,19 +1,4 @@
 import type { DataGridFooterProps } from "../DataGrid/DataGridTypes";
-import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridConstants";
-/**
- * Generates classes for the DataGridFooter.
- *
- * When columns are provided (subgrid mode), uses display:contents so the footer
- * doesn't break the parent grid flow.
- *
- */
-export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, hasColumns, }: {
-    mode: ThemeMode;
-    blurEffect?: BlurEffect;
-    className?: string;
-    hasColumns?: boolean;
-    stickyFooter?: boolean;
-}) => string;
 export declare const DataGridFooter: {
     ({ className, children, ...rest }: DataGridFooterProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,66 +1,30 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
 import { useEffect, useLayoutEffect, useRef } from "react";
-import { getHeaderFooterBackgroundClasses, getStickyBlurClasses } from "../common/utilities.js";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants.js";
+import { CellWrapper } from "../DataGridConstants/DataGridConstants.js";
+import { getFooterClasses } from "../utilities/classes.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "clsx"
-
 ;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: external "../common/utilities.js"
-
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
 
-;// CONCATENATED MODULE: ./src/DataGridFooter/DataGridFooter.tsx
+;// CONCATENATED MODULE: external "../utilities/classes.js"
 
+;// CONCATENATED MODULE: ./src/DataGridFooter/DataGridFooter.tsx
 
 
 
 
 
-/**
- * Generates classes for the DataGridFooter.
- *
- * When columns are provided (subgrid mode), uses display:contents so the footer
- * doesn't break the parent grid flow.
- *
- */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect, hasColumns })=>{
-    /**
-	 * When columns are provided and not sticky, use display:contents so the
-	 * rowgroup doesn't interfere with the grid flow. The rows will use subgrid.
-	 */ if (hasColumns && !stickyFooter) {
-        return clsx("contents", className);
-    }
-    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
-    return clsx("flex flex-col", {
-        /**
-			 * Absolute positioning like Panel's footer: absolute left-0 right-0 z-20
-			 * bottom-0 rounded-b-lg to match the wrapper's rounded-lg corners.
-			 */ "absolute left-0 right-0 z-20 bottom-0 rounded-b-lg": stickyFooter,
-        // Shadow for visual depth (upward glow).
-        "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "dark",
-        "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "system",
-        "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "light",
-        "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "alt-system"
-    }, getHeaderFooterBackgroundClasses({
-        mode,
-        hasBlur,
-        sticky: Boolean(stickyFooter)
-    }), stickyFooter && getStickyBlurClasses({
-        blurEffect
-    }), className);
-};
 /* =============================================================================
  * DataGridFooter
  * ========================================================================== */ const DataGridFooter = ({ className, children, ...rest })=>{
@@ -133,4 +97,4 @@ DataGridFooter.displayName = "DataGridFooter";
     });
 };
 
-export { DataGridFooter, getFooterClasses };
+export { DataGridFooter };

package/dist/DataGridFooter/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.6
+  @versini/ui-datagrid v0.3.8
   © 2026 gizmette.com
 */
 

package/dist/DataGridHeader/DataGridHeader.d.ts

@@ -1,31 +1,4 @@
 import type { DataGridHeaderProps } from "../DataGrid/DataGridTypes";
-import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridConstants";
-/**
- * Generates classes for the DataGridHeader wrapper.
- *
- * When stickyHeader is true, uses position:absolute so the header overlays the
- * scrollbar area. The parent DataGrid auto-detects caption presence and applies
- * appropriate padding to the scrollable content.
- *
- * When columns are provided (subgrid mode) and not sticky, uses
- * display:contents so the header doesn't break the parent grid flow.
- *
- */
-export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, hasColumns, }: {
-    mode: ThemeMode;
-    blurEffect?: BlurEffect;
-    className?: string;
-    hasColumns?: boolean;
-    stickyHeader?: boolean;
-}) => string;
-/**
- * Generates classes for the caption element inside DataGridHeader. When
- * hasColumns is true (subgrid mode), adds col-span-full to span all columns.
- */
-export declare const getCaptionClasses: ({ captionClassName, hasColumns, }: {
-    captionClassName?: string;
-    hasColumns?: boolean;
-}) => string;
 export declare const DataGridHeader: {
     ({ caption, captionClassName, className, children, ...rest }: DataGridHeaderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;