@versini/ui-datagrid 0.8.0 → 0.8.2

package/dist/utilities/classes.js

@@ -1,267 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.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 })=>{
-    return 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"
-    });
-};
-const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>{
-    return clsx({
-        "text-copy-dark": mode === "dark" && !hasBlur || mode === "light",
-        "text-copy-light dark:text-copy-dark": mode === "system" && hasBlur,
-        "text-copy-dark dark:text-copy-dark": (mode === "system" || mode === "alt-system") && !hasBlur
-    });
-};
-/**
- * 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 = ({ hasBlur, sticky })=>{
-    return clsx({
-        // Semi-transparent for blur effect.
-        "bg-surface-medium/50 dark:bg-surface-medium/50": hasBlur && sticky,
-        // Solid backgrounds.
-        "bg-surface-medium-light dark:bg-surface-medium-light": !hasBlur
-    });
-};
-/**
- * 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
-    });
-/**
- * ============================================================================
- * Composite Class Generators (component-specific combinations)
- * ============================================================================
- */ /**
- * Loading text classes for loading state.
- */ const getLoadingTextClasses = ({ mode })=>clsx("text-lg font-medium", {
-        "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 loading state.
- */ const getOverlayClasses = ({ mode })=>({
-        inner: "relative",
-        overlay: clsx("absolute inset-0 z-20 cursor-not-allowed rounded-lg", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
-        loadingWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
-        loadingText: getLoadingTextClasses({
-            mode
-        })
-    });
-/**
- * Generates classes for the main DataGrid wrapper and grid.
- */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading })=>{
-    const overlayClasses = loading ? getOverlayClasses({
-        mode
-    }) : null;
-    const hasSticky = stickyHeader || stickyFooter;
-    return {
-        overlay: overlayClasses?.overlay ?? "",
-        inner: overlayClasses?.inner ?? "",
-        loadingWrapper: overlayClasses?.loadingWrapper ?? "",
-        loadingText: overlayClasses?.loadingText ?? "",
-        wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
-            "overflow-x-auto": !hasSticky && !loading,
-            "overflow-hidden flex flex-col": hasSticky || loading
-        }, 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 grid", className, getTextColorClasses({
-            mode
-        }))
-    };
-};
-/**
- * Generates classes for the DataGridHeader wrapper.
- */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect })=>{
-    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
-    if (!stickyHeader) {
-        return clsx("contents", getHeaderFooterBackgroundClasses({
-            hasBlur,
-            sticky: false
-        }), getTextColorClassesForHeaderFooter({
-            mode,
-            hasBlur
-        }), className);
-    }
-    return clsx("flex flex-col", "border-b border-table-medium shadow-md", "absolute left-0 right-0 z-20 top-0 rounded-t-lg", getHeaderFooterBackgroundClasses({
-        hasBlur,
-        sticky: true
-    }), getTextColorClassesForHeaderFooter({
-        mode,
-        hasBlur
-    }), stickyHeader && getBlurClasses({
-        blurEffect
-    }), className);
-};
-/**
- * Generates classes for the caption element inside DataGridHeader.
- * Needs explicit styling since the parent may use `display: contents`
- * when not sticky, which doesn't render a box and breaks CSS inheritance.
- */ const getCaptionClasses = ({ captionClassName, mode, hasBlur, stickyHeader })=>{
-    /**
-	 * When sticky, the header wrapper renders a box with background/text colors.
-	 * When NOT sticky, the header uses `display: contents` so the caption needs
-	 * its own background and text color styling.
-	 */ const needsOwnBackground = !stickyHeader;
-    return clsx("py-2 text-sm text-center font-bold col-span-full", getTextColorClassesForHeaderFooter({
-        mode,
-        hasBlur
-    }), needsOwnBackground && getHeaderFooterBackgroundClasses({
-        hasBlur,
-        sticky: false
-    }), captionClassName);
-};
-/**
- * Generates classes for the DataGridFooter.
- */ /**
- * Generates classes for the DataGridFooter.
- */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect })=>{
-    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
-    if (!stickyFooter) {
-        return clsx("contents", getTextColorClassesForHeaderFooter({
-            mode,
-            hasBlur
-        }), className);
-    }
-    return clsx("flex flex-col", "border-t border-table-medium", {
-        "absolute left-0 right-0 z-20 bottom-0 rounded-b-lg shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]": stickyFooter
-    }, getHeaderFooterBackgroundClasses({
-        hasBlur,
-        sticky: Boolean(stickyFooter)
-    }), stickyFooter && getBlurClasses({
-        blurEffect
-    }), getTextColorClassesForHeaderFooter({
-        mode,
-        hasBlur
-    }), className);
-};
-/**
- * Generates classes for DataGridRow. When rowIndex is provided (e.g., from
- * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
- * :nth-child selectors, which don't work with wrapper elements.
- */ const getRowClasses = ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter })=>{
-    const layoutClass = "group grid items-center";
-    if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
-        /**
-		 * When not sticky, the parent wrapper uses `display: contents` which
-		 * doesn't render a box. In this case, we need to apply background and
-		 * border styling directly to the row.
-		 */ const isHeader = cellWrapper === CellWrapper.HEADER;
-        const parentUsesContents = isHeader ? !stickyHeader : !stickyFooter;
-        if (parentUsesContents) {
-            return clsx(layoutClass, getHeaderFooterBackgroundClasses({
-                hasBlur: false,
-                sticky: false
-            }), {
-                "border-b border-table-medium shadow-md": isHeader,
-                "border-t border-table-medium": !isHeader
-            }, className);
-        }
-        return clsx(layoutClass, className);
-    }
-    /**
-	 * Border classes: use explicit border-0 for last row when isLastRow is
-	 * provided, otherwise fall back to CSS :last-child selector.
-	 */ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" // Last row: transparent border to maintain spacing
-     : "border-b" : "border-b last:border-0"; // Fallback to CSS :last-child
-    return clsx(layoutClass, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
-        mode
-    }), className);
-};
-/**
- * Generates classes for DataGridCell.
- */ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
-    const isHeader = cellWrapper === CellWrapper.HEADER;
-    const isFooter = cellWrapper === CellWrapper.FOOTER;
-    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-bold": isHeader || isFooter
-    }, // 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, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses, getTextColorClassesForHeaderFooter };