@versini/ui-datagrid 0.1.0

package/dist/DataGridAnimated/AnimatedWrapper.js

@@ -0,0 +1,49 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { jsx } from "react/jsx-runtime";
+import { useAnimatedHeight } from "./useAnimatedHeight.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "./useAnimatedHeight.js"
+
+;// CONCATENATED MODULE: ./src/DataGridAnimated/AnimatedWrapper.tsx
+
+
+/**
+ * Wrapper component that animates height changes when content changes.
+ *
+ * @example
+ * ```tsx
+ * const { visibleCount } = useInfiniteScroll({ totalItems: data.length });
+ *
+ * return (
+ *   <AnimatedWrapper dependency={visibleCount}>
+ *     <DataGrid>
+ *       <DataGridBody>
+ *         {data.slice(0, visibleCount).map((item) => (
+ *           <DataGridRow key={item.id}>...</DataGridRow>
+ *         ))}
+ *       </DataGridBody>
+ *     </DataGrid>
+ *   </AnimatedWrapper>
+ * );
+ * ```
+ *
+ */ const AnimatedWrapper = ({ children, dependency, duration, enabled = true, className })=>{
+    const { ref, style } = useAnimatedHeight(dependency, {
+        duration,
+        enabled
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        style: style,
+        className: className,
+        children: children
+    });
+};
+
+export { AnimatedWrapper };

package/dist/DataGridAnimated/index.d.ts

@@ -0,0 +1,4 @@
+export type { AnimatedWrapperProps } from "./AnimatedWrapper";
+export { AnimatedWrapper } from "./AnimatedWrapper";
+export type { UseAnimatedHeightOptions, UseAnimatedHeightReturn, } from "./useAnimatedHeight";
+export { useAnimatedHeight } from "./useAnimatedHeight";

package/dist/DataGridAnimated/index.js

@@ -0,0 +1,17 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { AnimatedWrapper } from "./AnimatedWrapper.js";
+import { useAnimatedHeight } from "./useAnimatedHeight.js";
+
+;// CONCATENATED MODULE: external "./AnimatedWrapper.js"
+
+;// CONCATENATED MODULE: external "./useAnimatedHeight.js"
+
+;// CONCATENATED MODULE: ./src/DataGridAnimated/index.ts
+
+
+
+export { AnimatedWrapper, useAnimatedHeight };

package/dist/DataGridAnimated/useAnimatedHeight.d.ts

@@ -0,0 +1,49 @@
+export type UseAnimatedHeightOptions = {
+    /**
+     * Animation duration in milliseconds.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Whether animation is enabled.
+     * @default true
+     */
+    enabled?: boolean;
+};
+export type UseAnimatedHeightReturn<T extends HTMLElement> = {
+    /**
+     * Ref to attach to the container element.
+     */
+    ref: React.RefObject<T | null>;
+    /**
+     * Style object to apply to the container.
+     */
+    style: React.CSSProperties;
+    /**
+     * Whether an animation is currently in progress.
+     */
+    isAnimating: boolean;
+};
+/**
+ * Hook that provides smooth height animations when content changes.
+ *
+ * Uses FLIP technique: captures height before render via a persistent ref, then
+ * animates from old height to new height after the DOM updates.
+ *
+ * @param dependency - Value that triggers animation when changed.
+ * @param options - Configuration options.
+ *
+ * @example
+ * ```tsx
+ * const items = useMemo(() => data.slice(0, visibleCount), [data, visibleCount]);
+ * const { ref, style } = useAnimatedHeight(items.length);
+ *
+ * return (
+ *   <div ref={ref} style={style}>
+ *     {items.map((item) => <Row key={item.id} {...item} />)}
+ *   </div>
+ * );
+ * ```
+ *
+ */
+export declare function useAnimatedHeight<T, E extends HTMLElement = HTMLDivElement>(dependency: T, options?: UseAnimatedHeightOptions): UseAnimatedHeightReturn<E>;

package/dist/DataGridAnimated/useAnimatedHeight.js

@@ -0,0 +1,131 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { useLayoutEffect, useRef, useState } from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/DataGridAnimated/useAnimatedHeight.ts
+
+const DEFAULT_ANIMATION_DURATION = 300;
+/**
+ * Hook that provides smooth height animations when content changes.
+ *
+ * Uses FLIP technique: captures height before render via a persistent ref, then
+ * animates from old height to new height after the DOM updates.
+ *
+ * @param dependency - Value that triggers animation when changed.
+ * @param options - Configuration options.
+ *
+ * @example
+ * ```tsx
+ * const items = useMemo(() => data.slice(0, visibleCount), [data, visibleCount]);
+ * const { ref, style } = useAnimatedHeight(items.length);
+ *
+ * return (
+ *   <div ref={ref} style={style}>
+ *     {items.map((item) => <Row key={item.id} {...item} />)}
+ *   </div>
+ * );
+ * ```
+ *
+ */ function useAnimatedHeight(dependency, options) {
+    const { duration = DEFAULT_ANIMATION_DURATION, enabled = true } = options ?? {};
+    const ref = useRef(null);
+    const [animationState, setAnimationState] = useState({
+        height: "auto",
+        isAnimating: false
+    });
+    /**
+	 * Track the last measured height persistently. This ref is updated AFTER each
+	 * animation completes, so it holds the "before" value when dependency changes.
+	 */ const lastHeightRef = useRef(0);
+    const prevDependencyRef = useRef(dependency);
+    const animationFrameRef = useRef(0);
+    const timeoutRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (!ref.current || !enabled) {
+            return;
+        }
+        /**
+		 * On first render or when not animating, just record the current height.
+		 */ if (lastHeightRef.current === 0) {
+            lastHeightRef.current = ref.current.offsetHeight;
+            prevDependencyRef.current = dependency;
+            return;
+        }
+        /**
+		 * If dependency hasn't changed, nothing to animate.
+		 */ if (prevDependencyRef.current === dependency) {
+            return;
+        }
+        prevDependencyRef.current = dependency;
+        const previousHeight = lastHeightRef.current;
+        const newHeight = ref.current.scrollHeight;
+        /**
+		 * Update the stored height for next time.
+		 */ lastHeightRef.current = newHeight;
+        /**
+		 * If heights are the same or previous was 0, no animation needed.
+		 */ if (previousHeight === newHeight || previousHeight === 0) {
+            return;
+        }
+        /**
+		 * Cancel any ongoing animation.
+		 */ if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        /**
+		 * Lock to the previous height immediately.
+		 */ setAnimationState({
+            height: previousHeight,
+            isAnimating: true
+        });
+        /**
+		 * Use double RAF to ensure the browser has painted the locked height, then
+		 * transition to the new height.
+		 */ animationFrameRef.current = requestAnimationFrame(()=>{
+            animationFrameRef.current = requestAnimationFrame(()=>{
+                setAnimationState({
+                    height: newHeight,
+                    isAnimating: true
+                });
+                timeoutRef.current = setTimeout(()=>{
+                    setAnimationState({
+                        height: "auto",
+                        isAnimating: false
+                    });
+                }, duration);
+            });
+        });
+        return ()=>{
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [
+        dependency,
+        duration,
+        enabled
+    ]);
+    const style = enabled ? {
+        height: animationState.height === "auto" ? "auto" : `${animationState.height}px`,
+        overflow: animationState.isAnimating ? "hidden" : undefined,
+        transition: animationState.isAnimating ? `height ${duration}ms ease-out` : undefined
+    } : {};
+    return {
+        ref,
+        style,
+        isAnimating: animationState.isAnimating
+    };
+}
+
+export { useAnimatedHeight };

package/dist/DataGridBody/DataGridBody.d.ts

@@ -0,0 +1,2 @@
+import type { DataGridBodyProps } from "../DataGrid/DataGridTypes";
+export declare const DataGridBody: ({ className, children, ...rest }: DataGridBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridBody/DataGridBody.js

@@ -0,0 +1,38 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { jsx } from "react/jsx-runtime";
+import { DataGridContext } from "../DataGrid/DataGridContext.js";
+import { CellWrapper } from "../DataGridConstants/index.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
+
+;// CONCATENATED MODULE: ./src/DataGridBody/DataGridBody.tsx
+
+
+
+/* =============================================================================
+ * DataGridBody
+ * ========================================================================== */ const DataGridBody = ({ className, children, ...rest })=>{
+    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
+        children: (ctx)=>/*#__PURE__*/ jsx(DataGridContext.Provider, {
+                value: {
+                    ...ctx,
+                    cellWrapper: CellWrapper.BODY
+                },
+                children: /*#__PURE__*/ jsx("tbody", {
+                    className: className,
+                    ...rest,
+                    children: children
+                })
+            })
+    });
+};
+
+export { DataGridBody };

package/dist/DataGridBody/index.d.ts

@@ -0,0 +1 @@
+export { DataGridBody } from "./DataGridBody";

package/dist/DataGridBody/index.js

@@ -0,0 +1,13 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { DataGridBody } from "./DataGridBody.js";
+
+;// CONCATENATED MODULE: external "./DataGridBody.js"
+
+;// CONCATENATED MODULE: ./src/DataGridBody/index.ts
+
+
+export { DataGridBody };

package/dist/DataGridCell/DataGridCell.d.ts

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

package/dist/DataGridCell/DataGridCell.js

@@ -0,0 +1,77 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 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";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
+
+;// CONCATENATED MODULE: ./src/DataGridCell/DataGridCell.tsx
+
+
+
+
+const getCellClasses = ({ cellWrapper, className, compact, align, active, mode })=>{
+    const isHeader = cellWrapper === CellWrapper.HEADER;
+    const mainClasses = clsx(// Base padding.
+    {
+        "px-2 py-1": compact,
+        "px-4 py-3": !compact
+    }, // 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"
+    }, className);
+    const alignClasses = clsx("flex", {
+        "justify-start": align === "left" || !align,
+        "justify-center": align === "center",
+        "justify-end": align === "right"
+    });
+    return {
+        mainClasses,
+        alignClasses
+    };
+};
+/* =============================================================================
+ * DataGridCell
+ * ========================================================================== */ const DataGridCell = ({ className, children, align, active, component, ...rest })=>{
+    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
+        children: ({ mode, compact, cellWrapper })=>{
+            const { mainClasses, alignClasses } = getCellClasses({
+                cellWrapper,
+                className,
+                mode,
+                compact,
+                align,
+                active
+            });
+            const Component = component || (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER ? "th" : "td");
+            return /*#__PURE__*/ jsx(Component, {
+                className: mainClasses,
+                ...rest,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: alignClasses,
+                    children: children
+                })
+            });
+        }
+    });
+};
+
+export { DataGridCell, getCellClasses };

package/dist/DataGridCell/index.d.ts

@@ -0,0 +1 @@
+export { DataGridCell } from "./DataGridCell";

package/dist/DataGridCell/index.js

@@ -0,0 +1,13 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { DataGridCell } from "./DataGridCell.js";
+
+;// CONCATENATED MODULE: external "./DataGridCell.js"
+
+;// CONCATENATED MODULE: ./src/DataGridCell/index.ts
+
+
+export { DataGridCell };

package/dist/DataGridCellSort/DataGridCellSort.d.ts

@@ -0,0 +1,2 @@
+import type { DataGridCellSortProps } from "../DataGrid/DataGridTypes";
+export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, focusMode, ...rest }: DataGridCellSortProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -0,0 +1,107 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonSort_private } from "@versini/ui-button/private";
+import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
+import { DataGridContext } from "../DataGrid/DataGridContext.js";
+import { getCellClasses } from "../DataGridCell/DataGridCell.js";
+import { CellWrapper } from "../DataGridConstants/index.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-button/private"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+
+;// CONCATENATED MODULE: external "../DataGridCell/DataGridCell.js"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
+
+;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
+
+
+
+
+
+
+/* =============================================================================
+ * DataGridCellSort
+ * ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, focusMode = "alt-system", ...rest })=>{
+    const isSorted = sortedCell === cellId;
+    const handleSort = ()=>{
+        if (onSort) {
+            // Convert false to undefined for the callback.
+            const currentDirection = isSorted && sortDirection ? sortDirection : undefined;
+            onSort(cellId, currentDirection);
+        }
+    };
+    const getSortIcon = ()=>{
+        if (isSorted && sortDirection === "asc") {
+            return /*#__PURE__*/ jsx(IconSortUp, {
+                className: "size-4",
+                monotone: true
+            });
+        }
+        if (isSorted && sortDirection === "desc") {
+            return /*#__PURE__*/ jsx(IconSortDown, {
+                className: "size-4",
+                monotone: true
+            });
+        }
+        return /*#__PURE__*/ jsx(IconSort, {
+            className: "size-4",
+            monotone: true
+        });
+    };
+    const getAriaSort = ()=>{
+        if (isSorted && sortDirection === "asc") {
+            return "ascending";
+        }
+        if (isSorted && sortDirection === "desc") {
+            return "descending";
+        }
+        return "other";
+    };
+    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
+        children: ({ mode, compact, cellWrapper })=>{
+            const { mainClasses, alignClasses } = getCellClasses({
+                cellWrapper,
+                className,
+                mode,
+                compact
+            });
+            const Component = cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER ? "th" : "td";
+            return /*#__PURE__*/ jsx(Component, {
+                className: mainClasses,
+                role: "columnheader",
+                "aria-sort": getAriaSort(),
+                ...rest,
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: alignClasses,
+                    children: [
+                        slotLeft,
+                        /*#__PURE__*/ jsx(ButtonSort_private, {
+                            active: isSorted,
+                            className: buttonClassName,
+                            onClick: handleSort,
+                            noBorder: true,
+                            focusMode: focusMode,
+                            mode: mode,
+                            fullWidth: true,
+                            labelRight: children,
+                            children: getSortIcon()
+                        }),
+                        slotRight
+                    ]
+                })
+            });
+        }
+    });
+};
+
+export { DataGridCellSort };

package/dist/DataGridCellSort/index.d.ts

@@ -0,0 +1 @@
+export { DataGridCellSort } from "./DataGridCellSort";

package/dist/DataGridCellSort/index.js

@@ -0,0 +1,13 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { DataGridCellSort } from "./DataGridCellSort.js";
+
+;// CONCATENATED MODULE: external "./DataGridCellSort.js"
+
+;// CONCATENATED MODULE: ./src/DataGridCellSort/index.ts
+
+
+export { DataGridCellSort };

package/dist/DataGridConstants/DataGridConstants.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Sort direction constants for DataGrid sorting.
+ */
+export declare const SortDirections: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+};
+export type SortDirection = typeof SortDirections.ASC | typeof SortDirections.DESC;
+/**
+ * Blur effect intensity options for sticky header/footer.
+ */
+export declare const BlurEffects: {
+    readonly NONE: "none";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export type BlurEffect = typeof BlurEffects.NONE | typeof BlurEffects.SMALL | typeof BlurEffects.MEDIUM | typeof BlurEffects.LARGE;
+/**
+ * Theme mode options for DataGrid.
+ */
+export declare const ThemeModes: {
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+    readonly SYSTEM: "system";
+    readonly ALT_SYSTEM: "alt-system";
+};
+export type ThemeMode = typeof ThemeModes.DARK | typeof ThemeModes.LIGHT | typeof ThemeModes.SYSTEM | typeof ThemeModes.ALT_SYSTEM;
+/**
+ * Cell wrapper types for internal context.
+ */
+export declare const CellWrapper: {
+    readonly HEADER: "header";
+    readonly BODY: "body";
+    readonly FOOTER: "footer";
+};
+export type CellWrapperType = typeof CellWrapper.HEADER | typeof CellWrapper.BODY | typeof CellWrapper.FOOTER;

package/dist/DataGridConstants/DataGridConstants.js

@@ -0,0 +1,38 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+
+;// CONCATENATED MODULE: ./src/DataGridConstants/DataGridConstants.ts
+/**
+ * Sort direction constants for DataGrid sorting.
+ */ const SortDirections = {
+    ASC: "asc",
+    DESC: "desc"
+};
+/**
+ * Blur effect intensity options for sticky header/footer.
+ */ const BlurEffects = {
+    NONE: "none",
+    SMALL: "small",
+    MEDIUM: "medium",
+    LARGE: "large"
+};
+/**
+ * Theme mode options for DataGrid.
+ */ const ThemeModes = {
+    DARK: "dark",
+    LIGHT: "light",
+    SYSTEM: "system",
+    ALT_SYSTEM: "alt-system"
+};
+/**
+ * Cell wrapper types for internal context.
+ */ const CellWrapper = {
+    HEADER: "header",
+    BODY: "body",
+    FOOTER: "footer"
+};
+
+export { BlurEffects, CellWrapper, SortDirections, ThemeModes };

package/dist/DataGridConstants/index.d.ts

@@ -0,0 +1 @@
+export { type BlurEffect, BlurEffects, CellWrapper, type CellWrapperType, type SortDirection, SortDirections, type ThemeMode, ThemeModes, } from "./DataGridConstants";

package/dist/DataGridConstants/index.js

@@ -0,0 +1,13 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "./DataGridConstants.js";
+
+;// CONCATENATED MODULE: external "./DataGridConstants.js"
+
+;// CONCATENATED MODULE: ./src/DataGridConstants/index.ts
+
+
+export { BlurEffects, CellWrapper, SortDirections, ThemeModes };

package/dist/DataGridFooter/DataGridFooter.d.ts

@@ -0,0 +1,12 @@
+import type { DataGridFooterProps } from "../DataGrid/DataGridTypes";
+import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridConstants";
+/**
+ * Generates classes for the DataGridFooter.
+ */
+export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, }: {
+    mode: ThemeMode;
+    blurEffect?: BlurEffect;
+    className?: string;
+    stickyFooter?: boolean;
+}) => string;
+export declare const DataGridFooter: ({ className, children, ...rest }: DataGridFooterProps) => import("react/jsx-runtime").JSX.Element;