@versini/ui-datagrid 0.3.7 → 0.4.0

package/dist/DataGridRow/DataGridRow.js

@@ -1,55 +1,30 @@
 /*!
-  @versini/ui-datagrid v0.3.7
+  @versini/ui-datagrid v0.4.0
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
 import react from "react";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 import { CellWrapper } from "../DataGridConstants/index.js";
+import { getRowClasses } from "../utilities/classes.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "clsx"
-
 ;// CONCATENATED MODULE: external "react"
 
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
 
+;// CONCATENATED MODULE: external "../utilities/classes.js"
+
 ;// CONCATENATED MODULE: ./src/DataGridRow/DataGridRow.tsx
 
 
 
 
 
-const getRowClasses = ({ mode, className, cellWrapper })=>{
-    // Always use CSS Grid for proper column alignment, with vertical centering.
-    // `group` enables child cells to use group-data-[active] for active row indicator.
-    const layoutClass = "group grid items-center";
-    if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
-        /**
-		 * When in a sticky header/footer, don't apply background to row since the
-		 * background is applied to the rowgroup for blur effect to work.
-		 */ return clsx(layoutClass, className);
-    }
-    return clsx(layoutClass, "border-b last:border-0", {
-        "border-table-dark": mode === "dark" || mode === "system",
-        "border-table-light": mode === "light" || mode === "alt-system",
-        "dark:border-table-light": mode === "system",
-        "dark:border-table-dark": mode === "alt-system",
-        "odd:bg-table-dark-odd even:bg-table-dark-even": mode === "dark",
-        "hover:bg-table-dark-hover": mode === "dark",
-        "odd:bg-table-light-odd even:bg-table-light-even": mode === "light",
-        "hover:bg-table-light-hover": mode === "light",
-        "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": mode === "system",
-        "hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
-        "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": mode === "alt-system",
-        "hover:bg-table-light-hover dark::hover:bg-table-dark-hover": mode === "alt-system"
-    }, className);
-};
 /* =============================================================================
  * DataGridRow
  * ========================================================================== */ const DataGridRow = ({ className, children, active, style: userStyle, ...rest })=>{
@@ -79,11 +54,12 @@ const getRowClasses = ({ mode, className, cellWrapper })=>{
 				 */ let rowStyle;
             if (columns) {
                 if (isInStickyContext) {
-                    // Sticky elements can't use subgrid.
-                    // Use measured widths from body if available for perfect alignment.
-                    // Also check that widths are valid (non-zero) - in test environments
-                    // or before layout, measurements may be zero.
-                    const hasValidMeasurements = measuredColumnWidths && measuredColumnWidths.length === columns.length && measuredColumnWidths.some((w)=>w > 0);
+                    /**
+						 * Sticky elements can't use subgrid. Use measured widths from body if
+						 * available for perfect alignment. Also check that widths are valid
+						 * (non-zero) - in test environments or before layout, measurements may be
+						 * zero.
+						 */ const hasValidMeasurements = measuredColumnWidths && measuredColumnWidths.length === columns.length && measuredColumnWidths.some((w)=>w > 0);
                     if (hasValidMeasurements) {
                         rowStyle = {
                             gridTemplateColumns: measuredColumnWidths.map((w)=>`${w}px`).join(" ")

package/dist/DataGridRow/index.js

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

package/dist/DataGridSorting/index.js

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

package/dist/DataGridSorting/sortingUtils.js

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

package/dist/utilities/classes.d.ts

@@ -0,0 +1,150 @@
+import { type BlurEffect, type CellWrapperType, type ThemeMode } from "../DataGridConstants/DataGridConstants";
+/**
+ * ============================================================================
+ * Primitive Theme Mappings (reusable building blocks)
+ * ============================================================================
+ */
+/**
+ * Text color classes based on theme mode. Used by: DataGrid wrapper, grid,
+ * spinner, header/footer copy.
+ */
+export declare const getTextColorClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
+/**
+ * Surface background classes (main container backgrounds). Used by: DataGrid
+ * wrapper.
+ */
+export declare const getSurfaceBackgroundClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
+/**
+ * Header/footer background classes (with optional blur transparency). Used by:
+ * DataGridHeader, DataGridFooter.
+ */
+export declare const getHeaderFooterBackgroundClasses: ({ mode, hasBlur, sticky, }: {
+    mode: ThemeMode;
+    hasBlur: boolean;
+    sticky: boolean;
+}) => string;
+/**
+ * Border color classes for rows. Used by: DataGridRow.
+ */
+export declare const getBorderClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
+/**
+ * Blur effect classes for sticky elements. Used by: DataGridHeader,
+ * DataGridFooter.
+ */
+export declare const getBlurClasses: ({ blurEffect }: {
+    blurEffect?: BlurEffect;
+}) => string;
+/**
+ * Shadow classes for sticky headers (downward glow).
+ */
+export declare const getStickyHeaderShadowClasses: ({ mode, stickyHeader, }: {
+    mode: ThemeMode;
+    stickyHeader?: boolean;
+}) => string;
+/**
+ * Shadow classes for sticky footers (upward glow).
+ */
+export declare const getStickyFooterShadowClasses: ({ mode, stickyFooter, }: {
+    mode: ThemeMode;
+    stickyFooter?: boolean;
+}) => string;
+/**
+ * ============================================================================
+ * Composite Class Generators (component-specific combinations)
+ * ============================================================================
+ */
+/**
+ * Spinner classes for loading state.
+ */
+export declare const getSpinnerClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
+/**
+ * Overlay classes for disabled state.
+ */
+export declare const getOverlayClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => {
+    inner: string;
+    overlay: string;
+    spinnerWrapper: string;
+    spinner: string;
+};
+/**
+ * Generates classes for the main DataGrid wrapper and grid.
+ */
+export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasColumns, }: {
+    mode: ThemeMode;
+    className?: string;
+    disabled?: boolean;
+    hasColumns?: boolean;
+    stickyFooter?: boolean;
+    stickyHeader?: boolean;
+    wrapperClassName?: string;
+}) => {
+    overlay: string;
+    inner: string;
+    spinnerWrapper: string;
+    spinner: string;
+    wrapper: string;
+    scrollableContent: string;
+    grid: string;
+};
+/**
+ * Generates classes for the DataGridHeader wrapper.
+ */
+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.
+ */
+export declare const getCaptionClasses: ({ captionClassName, hasColumns, }: {
+    captionClassName?: string;
+    hasColumns?: boolean;
+}) => string;
+/**
+ * Generates classes for the DataGridFooter.
+ */
+export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, hasColumns, }: {
+    mode: ThemeMode;
+    blurEffect?: BlurEffect;
+    className?: string;
+    hasColumns?: boolean;
+    stickyFooter?: boolean;
+}) => string;
+/**
+ * Generates classes for DataGridRow.
+ */
+export declare const getRowClasses: ({ mode, className, cellWrapper, }: {
+    mode: ThemeMode;
+    cellWrapper?: CellWrapperType;
+    className?: string;
+}) => string;
+/**
+ * Generates classes for DataGridCell.
+ */
+export declare const getCellClasses: ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight, }: {
+    cellWrapper?: CellWrapperType;
+    className?: string;
+    mode?: ThemeMode;
+    compact?: boolean;
+    align?: "left" | "center" | "right";
+    borderLeft?: boolean;
+    borderRight?: boolean;
+}) => string;
+/**
+ * Returns the appropriate ARIA role for the cell based on the cell wrapper
+ * type.
+ */
+export declare const getCellRole: (cellWrapper?: CellWrapperType) => string;

package/dist/utilities/classes.js

@@ -0,0 +1,249 @@
+/*!
+  @versini/ui-datagrid v0.4.0
+  © 2026 gizmette.com
+*/
+
+import clsx from "clsx";
+import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants.js";
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
+
+;// CONCATENATED MODULE: ./src/utilities/classes.ts
+
+
+/**
+ * ============================================================================
+ * Primitive Theme Mappings (reusable building blocks)
+ * ============================================================================
+ */ /**
+ * Text color classes based on theme mode. Used by: DataGrid wrapper, grid,
+ * spinner, header/footer copy.
+ */ const getTextColorClasses = ({ mode })=>clsx({
+        "text-copy-light": mode === "dark",
+        "text-copy-dark": mode === "light",
+        "text-copy-light dark:text-copy-dark": mode === "system",
+        "text-copy-dark dark:text-copy-light": mode === "alt-system"
+    });
+/**
+ * Surface background classes (main container backgrounds). Used by: DataGrid
+ * wrapper.
+ */ const getSurfaceBackgroundClasses = ({ mode })=>clsx({
+        "bg-surface-darker": mode === "dark" || mode === "system",
+        "bg-surface-light": mode === "light" || mode === "alt-system",
+        "dark:bg-surface-light": mode === "system",
+        "dark:bg-surface-darker": mode === "alt-system"
+    });
+/**
+ * Header/footer background classes (with optional blur transparency). Used by:
+ * DataGridHeader, DataGridFooter.
+ */ const getHeaderFooterBackgroundClasses = ({ mode, hasBlur, sticky })=>clsx({
+        // Semi-transparent for blur effect.
+        "bg-surface-darkest/50": hasBlur && sticky && (mode === "dark" || mode === "system"),
+        "bg-surface-light/50": hasBlur && sticky && (mode === "light" || mode === "alt-system"),
+        "dark:bg-surface-light/50": hasBlur && sticky && mode === "system",
+        "dark:bg-surface-darkest/50": hasBlur && sticky && mode === "alt-system",
+        // Solid backgrounds.
+        "bg-surface-darkest": !hasBlur && (mode === "dark" || mode === "system"),
+        "bg-surface-light": !hasBlur && (mode === "light" || mode === "alt-system"),
+        "dark:bg-surface-light": !hasBlur && mode === "system",
+        "dark:bg-surface-darkest": !hasBlur && mode === "alt-system"
+    });
+/**
+ * Border color classes for rows. Used by: DataGridRow.
+ */ const getBorderClasses = ({ mode })=>clsx({
+        "border-table-dark": mode === "dark" || mode === "system",
+        "border-table-light": mode === "light" || mode === "alt-system",
+        "dark:border-table-light": mode === "system",
+        "dark:border-table-dark": mode === "alt-system"
+    });
+/**
+ * Blur effect classes for sticky elements. Used by: DataGridHeader,
+ * DataGridFooter.
+ */ const getBlurClasses = ({ blurEffect })=>clsx({
+        "backdrop-blur-sm": blurEffect === BlurEffects.SMALL,
+        "backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
+        "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
+    });
+/**
+ * Shadow classes for sticky headers (downward glow).
+ */ const getStickyHeaderShadowClasses = ({ mode, stickyHeader })=>clsx({
+        "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark",
+        "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system",
+        "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light",
+        "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "alt-system"
+    });
+/**
+ * Shadow classes for sticky footers (upward glow).
+ */ const getStickyFooterShadowClasses = ({ mode, stickyFooter })=>clsx({
+        "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"
+    });
+/**
+ * ============================================================================
+ * Composite Class Generators (component-specific combinations)
+ * ============================================================================
+ */ /**
+ * Spinner classes for loading state.
+ */ const getSpinnerClasses = ({ mode })=>clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
+        "text-copy-dark": mode === "light",
+        "text-copy-light": mode === "dark",
+        "text-copy-dark dark:text-copy-light": mode === "alt-system",
+        "text-copy-light dark:text-copy-dark": mode === "system"
+    });
+/**
+ * Overlay classes for disabled state.
+ */ const getOverlayClasses = ({ mode })=>({
+        inner: "relative",
+        overlay: clsx("absolute inset-0 z-20 cursor-not-allowed", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
+        spinnerWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
+        spinner: getSpinnerClasses({
+            mode
+        })
+    });
+/**
+ * Generates classes for the main DataGrid wrapper and grid.
+ */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasColumns })=>{
+    const overlayClasses = disabled ? getOverlayClasses({
+        mode
+    }) : null;
+    const hasSticky = stickyHeader || stickyFooter;
+    return {
+        overlay: overlayClasses?.overlay ?? "",
+        inner: overlayClasses?.inner ?? "",
+        spinnerWrapper: overlayClasses?.spinnerWrapper ?? "",
+        spinner: overlayClasses?.spinner ?? "",
+        wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
+            "overflow-x-auto": !hasSticky && !disabled,
+            "overflow-hidden flex flex-col": hasSticky || disabled
+        }, getSurfaceBackgroundClasses({
+            mode
+        }), getTextColorClasses({
+            mode
+        }), wrapperClassName),
+        scrollableContent: clsx("overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0"),
+        grid: clsx("my-0 w-full text-left text-sm", hasColumns ? "grid" : "flex flex-col", className, getTextColorClasses({
+            mode
+        }))
+    };
+};
+/**
+ * Generates classes for the DataGridHeader wrapper.
+ */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect, hasColumns })=>{
+    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
+    if (hasColumns && !stickyHeader) {
+        return clsx("contents", getHeaderFooterBackgroundClasses({
+            mode,
+            hasBlur,
+            sticky: Boolean(stickyHeader)
+        }), getTextColorClasses({
+            mode
+        }), className);
+    }
+    return clsx("flex flex-col", {
+        "absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
+    }, getHeaderFooterBackgroundClasses({
+        mode,
+        hasBlur,
+        sticky: Boolean(stickyHeader)
+    }), getTextColorClasses({
+        mode
+    }), stickyHeader && getBlurClasses({
+        blurEffect
+    }), className);
+};
+/**
+ * Generates classes for the caption element inside DataGridHeader.
+ */ const getCaptionClasses = ({ captionClassName, hasColumns })=>{
+    return clsx("py-2 text-sm text-center font-bold", hasColumns && "col-span-full", captionClassName);
+};
+/**
+ * Generates classes for the DataGridFooter.
+ */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect, hasColumns })=>{
+    if (hasColumns && !stickyFooter) {
+        return clsx("contents", className);
+    }
+    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
+    return clsx("flex flex-col", {
+        "absolute left-0 right-0 z-20 bottom-0 rounded-b-lg": stickyFooter
+    }, getStickyFooterShadowClasses({
+        mode,
+        stickyFooter
+    }), getHeaderFooterBackgroundClasses({
+        mode,
+        hasBlur,
+        sticky: Boolean(stickyFooter)
+    }), stickyFooter && getBlurClasses({
+        blurEffect
+    }), className);
+};
+/**
+ * Generates classes for DataGridRow.
+ */ const getRowClasses = ({ mode, className, cellWrapper })=>{
+    const layoutClass = "group grid items-center";
+    if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
+        return clsx(layoutClass, className);
+    }
+    return clsx(layoutClass, "border-b last:border-0", getBorderClasses({
+        mode
+    }), {
+        "odd:bg-table-dark-odd even:bg-table-dark-even": mode === "dark",
+        "hover:bg-table-dark-hover": mode === "dark",
+        "odd:bg-table-light-odd even:bg-table-light-even": mode === "light",
+        "hover:bg-table-light-hover": mode === "light",
+        "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": mode === "system",
+        "hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
+        "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": mode === "alt-system",
+        "hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
+    }, className);
+};
+/**
+ * Generates classes for DataGridCell.
+ */ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
+    const isHeader = cellWrapper === CellWrapper.HEADER;
+    return 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.
+    "first:group-data-[active]:relative", "first:group-data-[active]:before:absolute first:group-data-[active]:before:left-0 first:group-data-[active]:before:top-0 first:group-data-[active]:before:bottom-0 first:group-data-[active]:before:w-1", "first:group-data-[active]:self-stretch first:group-data-[active]:flex first:group-data-[active]:items-center", // Active indicator color based on theme mode.
+    {
+        "first:group-data-[active]:before:bg-table-active-dark": mode === "dark",
+        "first:group-data-[active]:before:bg-table-active-light": mode === "light",
+        "first:group-data-[active]:before:bg-table-active-dark dark:first:group-data-[active]:before:bg-table-active-light": mode === "system",
+        "first:group-data-[active]:before:bg-table-active-light dark:first:group-data-[active]:before:bg-table-active-dark": mode === "alt-system"
+    }, // Vertical borders.
+    {
+        "self-stretch flex items-center": borderLeft || borderRight,
+        "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);
+};
+/**
+ * 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";
+};
+
+export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getOverlayClasses, getRowClasses, getSpinnerClasses, getStickyFooterShadowClasses, getStickyHeaderShadowClasses, getSurfaceBackgroundClasses, getTextColorClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.3.7",
+	"version": "0.4.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -94,5 +94,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "3b25e27cfdc5acb579f2a6c668265260662b5596"
+	"gitHead": "fa25a9204c1b506f6eed099cc11e321b53bb0f05"
 }

package/dist/DataGrid/utilities.d.ts

@@ -1,44 +0,0 @@
-import { type ThemeMode } from "../DataGridConstants/DataGridConstants";
-/**
- * Generates classes for the main DataGrid wrapper and grid. When sticky
- * header/footer is enabled:
- * - Outer wrapper has overflow-hidden
- * - Scrollable area is a separate inner container with dynamic padding
- * - Header/footer use position:absolute to overlay scrollbar
- * - Padding is dynamically set via inline styles based on measured heights
- *
- * When columns prop is provided, the grid uses CSS Grid layout with subgrid
- * support for proper column alignment across all rows.
- *
- */
-export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasColumns, }: {
-    mode: ThemeMode;
-    className?: string;
-    disabled?: boolean;
-    hasColumns?: boolean;
-    stickyFooter?: boolean;
-    stickyHeader?: boolean;
-    wrapperClassName?: string;
-}) => {
-    overlay: string;
-    inner: string;
-    spinnerWrapper: string;
-    spinner: string;
-    /**
-     * Outer wrapper - overflow-hidden when sticky, like Panel's outerWrapper.
-     * Uses flex layout when sticky to allow scrollableContent to respect
-     * max-height.
-     */
-    wrapper: string;
-    /**
-     * Scrollable content area for absolute-positioned header/footer. Padding is
-     * applied via inline styles based on measured header/footer heights,
-     * eliminating the need for hard-coded values that break when styles change.
-     */
-    scrollableContent: string;
-    /**
-     * When columns are provided, use CSS Grid so rows can use subgrid for
-     * consistent column alignment. Otherwise, use flexbox.
-     */
-    grid: string;
-};

package/dist/DataGrid/utilities.js

@@ -1,92 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.3.7
-  © 2026 gizmette.com
-*/
-
-import clsx from "clsx";
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: ./src/DataGrid/utilities.ts
-
-/**
- * Generates classes for the loading spinner.
- */ const getSpinnerClasses = ({ mode })=>{
-    return clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
-        "text-copy-dark": mode === "light",
-        "text-copy-light": mode === "dark",
-        "text-copy-dark dark:text-copy-light": mode === "alt-system",
-        "text-copy-light dark:text-copy-dark": mode === "system"
-    });
-};
-/**
- * Generates classes for the loading overlay.
- */ const getOverlayClasses = ({ mode })=>{
-    return {
-        inner: "relative",
-        overlay: clsx("absolute inset-0 z-20 cursor-not-allowed", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
-        spinnerWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
-        spinner: getSpinnerClasses({
-            mode
-        })
-    };
-};
-/**
- * Generates classes for the main DataGrid wrapper and grid. When sticky
- * header/footer is enabled:
- * - Outer wrapper has overflow-hidden
- * - Scrollable area is a separate inner container with dynamic padding
- * - Header/footer use position:absolute to overlay scrollbar
- * - Padding is dynamically set via inline styles based on measured heights
- *
- * When columns prop is provided, the grid uses CSS Grid layout with subgrid
- * support for proper column alignment across all rows.
- *
- */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasColumns })=>{
-    const overlayClasses = disabled ? getOverlayClasses({
-        mode
-    }) : null;
-    const hasSticky = stickyHeader || stickyFooter;
-    return {
-        overlay: overlayClasses?.overlay ?? "",
-        inner: overlayClasses?.inner ?? "",
-        spinnerWrapper: overlayClasses?.spinnerWrapper ?? "",
-        spinner: overlayClasses?.spinner ?? "",
-        /**
-		 * Outer wrapper - overflow-hidden when sticky, like Panel's outerWrapper.
-		 * Uses flex layout when sticky to allow scrollableContent to respect
-		 * max-height.
-		 */ wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
-            "overflow-x-auto": !hasSticky && !disabled,
-            "overflow-hidden flex flex-col": hasSticky || disabled,
-            "bg-surface-darker": mode === "dark" || mode === "system",
-            "bg-surface-light": mode === "light" || mode === "alt-system",
-            "dark:bg-surface-light": mode === "system",
-            "dark:bg-surface-darker": mode === "alt-system",
-            "text-copy-light": mode === "dark",
-            "text-copy-dark": mode === "light",
-            "text-copy-light dark:text-copy-dark": mode === "system",
-            "text-copy-dark dark:text-copy-light": mode === "alt-system"
-        }, wrapperClassName),
-        /**
-		 * Scrollable content area for absolute-positioned header/footer. Padding is
-		 * applied via inline styles based on measured header/footer heights,
-		 * eliminating the need for hard-coded values that break when styles change.
-		 */ scrollableContent: clsx(/**
-			 * flex-1 + min-h-0 allows this to shrink within flex parent and enable
-			 * scrolling. min-h-0 overrides the default min-height:auto that prevents
-			 * flex items from shrinking.
-			 */ "overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0"),
-        /**
-		 * When columns are provided, use CSS Grid so rows can use subgrid for
-		 * consistent column alignment. Otherwise, use flexbox.
-		 */ grid: clsx("my-0 w-full text-left text-sm", hasColumns ? "grid" : "flex flex-col", className, {
-            "text-copy-light": mode === "dark",
-            "text-copy-dark": mode === "light",
-            "text-copy-light dark:text-copy-dark": mode === "system",
-            "text-copy-dark dark:text-copy-light": mode === "alt-system"
-        })
-    };
-};
-
-export { getDataGridClasses };