@versini/ui-table 6.5.1 → 6.6.1

package/dist/Table/Table.d.ts

@@ -0,0 +1,8 @@
+import type { TableBodyProps, TableCellProps, TableCellSortProps, TableHeadProps, TableProps, TableRowProps } from "./TableTypes";
+export declare const Table: ({ children, mode, caption, compact, disabled, summary, className, wrapperClassName, maxHeight, stickyHeader, stickyFooter, ...otherProps }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHead: ({ children, className, ...otherProps }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableFooter: ({ children, className, ...otherProps }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: ({ children, ...otherProps }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ children, className, ...otherProps }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCell: ({ children, component, className, align, ...otherProps }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCellSort: ({ align, children, buttonClassName, className, component, focusMode, mode, onClick, sortDirection, sortedCell, cellId, ...otherProps }: TableCellSortProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.js

@@ -0,0 +1,213 @@
+/*!
+  @versini/ui-table v6.6.1
+  © 2025 gizmette.com
+*/
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ButtonSort_private } from "@versini/ui-button/private";
+import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
+import { useContext } from "react";
+import { TableContext } from "./TableContext.js";
+import { CELL_WRAPPER_BODY, CELL_WRAPPER_FOOTER, CELL_WRAPPER_HEAD, TableCellSortDirections, getTableCellClasses, getTableCellSortButtonClasses, getTableClasses, getTableFooterClasses, getTableHeadClasses, getTableRowClasses } from "./utilities.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-button/private"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "./TableContext.js"
+
+;// CONCATENATED MODULE: external "./utilities.js"
+
+;// CONCATENATED MODULE: ./src/components/Table/Table.tsx
+
+
+
+
+
+
+const Table = ({ children, mode = "system", caption, compact, disabled = false, summary, className, wrapperClassName, maxHeight, stickyHeader, stickyFooter, ...otherProps })=>{
+    const tableClass = getTableClasses({
+        mode,
+        className,
+        wrapperClassName,
+        stickyHeader,
+        stickyFooter,
+        disabled
+    });
+    return /*#__PURE__*/ jsx(TableContext.Provider, {
+        value: {
+            mode,
+            stickyHeader,
+            stickyFooter,
+            compact
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: tableClass.wrapper,
+            ...maxHeight && {
+                style: {
+                    maxHeight
+                }
+            },
+            children: disabled ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: tableClass.spinnerWrapper,
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: tableClass.spinner,
+                            role: "status",
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: "sr-only",
+                                children: "Loading..."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: tableClass.inner,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: tableClass.overlay
+                            }),
+                            /*#__PURE__*/ jsxs("table", {
+                                className: tableClass.table,
+                                summary: summary,
+                                ...disabled && {
+                                    "aria-disabled": "true"
+                                },
+                                ...otherProps,
+                                children: [
+                                    caption && /*#__PURE__*/ jsx("caption", {
+                                        className: tableClass.caption,
+                                        children: caption
+                                    }),
+                                    children
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs("table", {
+                className: tableClass.table,
+                summary: summary,
+                ...otherProps,
+                children: [
+                    caption && /*#__PURE__*/ jsx("caption", {
+                        className: tableClass.caption,
+                        children: caption
+                    }),
+                    children
+                ]
+            })
+        })
+    });
+};
+const TableHead = ({ children, className, ...otherProps })=>{
+    const context = useContext(TableContext);
+    context.cellWrapper = CELL_WRAPPER_HEAD;
+    const tableHeadClass = getTableHeadClasses({
+        className,
+        mode: context.mode,
+        stickyHeader: context.stickyHeader
+    });
+    return /*#__PURE__*/ jsx("thead", {
+        className: tableHeadClass,
+        ...otherProps,
+        children: children
+    });
+};
+const TableFooter = ({ children, className, ...otherProps })=>{
+    const context = useContext(TableContext);
+    context.cellWrapper = CELL_WRAPPER_FOOTER;
+    const tableFooterClass = getTableFooterClasses({
+        className,
+        mode: context.mode,
+        stickyFooter: context.stickyFooter
+    });
+    return /*#__PURE__*/ jsx("tfoot", {
+        className: tableFooterClass,
+        ...otherProps,
+        children: children
+    });
+};
+const TableBody = ({ children, ...otherProps })=>{
+    const context = useContext(TableContext);
+    context.cellWrapper = CELL_WRAPPER_BODY;
+    return /*#__PURE__*/ jsx("tbody", {
+        ...otherProps,
+        children: children
+    });
+};
+const TableRow = ({ children, className, ...otherProps })=>{
+    const context = useContext(TableContext);
+    const rowClass = getTableRowClasses({
+        mode: context.mode,
+        cellWrapper: context.cellWrapper,
+        className
+    });
+    return /*#__PURE__*/ jsx("tr", {
+        className: rowClass,
+        ...otherProps,
+        children: children
+    });
+};
+const TableCell = ({ children, component, className, align, ...otherProps })=>{
+    const context = useContext(TableContext);
+    const Component = component || (context.cellWrapper === CELL_WRAPPER_HEAD ? "th" : "td");
+    const { mainClasses, alignClasses } = getTableCellClasses({
+        cellWrapper: context.cellWrapper,
+        className,
+        mode: context.mode,
+        compact: context.compact,
+        align
+    });
+    return align ? /*#__PURE__*/ jsx(Component, {
+        className: mainClasses,
+        ...otherProps,
+        children: /*#__PURE__*/ jsx("div", {
+            className: alignClasses,
+            children: children
+        })
+    }) : /*#__PURE__*/ jsx(Component, {
+        className: mainClasses,
+        ...otherProps,
+        children: children
+    });
+};
+const TableCellSort = ({ align, children, buttonClassName, className, component, focusMode = "alt-system", mode = "alt-system", onClick, sortDirection, sortedCell, cellId, ...otherProps })=>{
+    const buttonClass = getTableCellSortButtonClasses({
+        buttonClassName
+    });
+    return /*#__PURE__*/ jsx(TableCell, {
+        component: component,
+        className: className,
+        role: "columnheader",
+        "aria-sort": sortDirection === TableCellSortDirections.ASC && sortedCell === cellId ? "ascending" : sortDirection === TableCellSortDirections.DESC && sortedCell === cellId ? "descending" : "other",
+        ...otherProps,
+        children: /*#__PURE__*/ jsx(ButtonSort_private, {
+            active: sortedCell === cellId,
+            className: buttonClass,
+            onClick: onClick,
+            align: align,
+            noBorder: true,
+            focusMode: focusMode,
+            mode: mode,
+            fullWidth: true,
+            labelRight: children,
+            children: sortDirection === TableCellSortDirections.ASC && sortedCell === cellId ? /*#__PURE__*/ jsx(IconSortUp, {
+                className: "size-4",
+                monotone: true
+            }) : sortDirection === TableCellSortDirections.DESC && sortedCell === cellId ? /*#__PURE__*/ jsx(IconSortDown, {
+                className: "size-4",
+                monotone: true
+            }) : /*#__PURE__*/ jsx(IconSort, {
+                className: "size-4",
+                monotone: true
+            })
+        })
+    });
+};
+
+export { Table, TableBody, TableCell, TableCellSort, TableFooter, TableHead, TableRow };

package/dist/Table/TableContext.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const TableContext: React.Context<{
+    mode: "light" | "dark" | "system" | "alt-system";
+    cellWrapper?: "thead" | "tbody" | "tfoot";
+    compact?: boolean;
+    stickyFooter?: boolean;
+    stickyHeader?: boolean;
+}>;

package/dist/Table/TableContext.js

@@ -0,0 +1,20 @@
+/*!
+  @versini/ui-table v6.6.1
+  © 2025 gizmette.com
+*/
+
+import react from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/Table/TableContext.ts
+
+const TableContext = react.createContext({
+    mode: "light",
+    cellWrapper: "thead",
+    stickyHeader: false,
+    stickyFooter: false,
+    compact: false
+});
+
+export { TableContext };

package/dist/Table/utilities.d.ts

@@ -0,0 +1,60 @@
+import { TableCellSortDirections } from "../TableConstants/TableConstants";
+export declare const CELL_WRAPPER_HEAD = "thead";
+export declare const CELL_WRAPPER_FOOTER = "tfoot";
+export declare const CELL_WRAPPER_BODY = "tbody";
+export { TableCellSortDirections };
+export declare const getTableSpinnerClasses: ({ mode }: {
+    mode: string;
+}) => string;
+export declare const getTableOverlayClasses: ({ mode }: {
+    mode: string;
+}) => {
+    inner: string;
+    overlay: string;
+    spinnerWrapper: string;
+    spinner: string;
+};
+export declare const getTableClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, }: {
+    mode: string;
+    className?: string;
+    disabled?: boolean;
+    stickyFooter?: boolean;
+    stickyHeader?: boolean;
+    wrapperClassName?: string;
+}) => {
+    overlay: string;
+    inner: string;
+    spinnerWrapper: string;
+    spinner: string;
+    wrapper: string;
+    table: string;
+    caption: string;
+};
+export declare const getTableHeadClasses: ({ className, stickyHeader, mode, }: {
+    mode: string;
+    className?: string;
+    stickyHeader?: boolean;
+}) => string;
+export declare const getTableFooterClasses: ({ className, stickyFooter, mode, }: {
+    mode: string;
+    className?: string;
+    stickyFooter?: boolean;
+}) => string;
+export declare const getTableRowClasses: ({ mode, className, cellWrapper, }: {
+    mode: string;
+    cellWrapper?: string;
+    className?: string;
+}) => string;
+export declare const getTableCellClasses: ({ cellWrapper, className, compact, mode, align, }: {
+    mode: string;
+    cellWrapper?: string;
+    className?: string;
+    compact?: boolean;
+    align?: "left" | "center" | "right";
+}) => {
+    alignClasses: string;
+    mainClasses: string;
+};
+export declare const getTableCellSortButtonClasses: ({ buttonClassName, }: {
+    buttonClassName?: string;
+}) => string;

package/dist/Table/utilities.js

@@ -0,0 +1,139 @@
+/*!
+  @versini/ui-table v6.6.1
+  © 2025 gizmette.com
+*/
+
+import clsx from "clsx";
+import { TableCellSortDirections } from "../TableConstants/TableConstants.js";
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "../TableConstants/TableConstants.js"
+
+;// CONCATENATED MODULE: ./src/components/Table/utilities.ts
+
+
+const CELL_WRAPPER_HEAD = "thead";
+const CELL_WRAPPER_FOOTER = "tfoot";
+const CELL_WRAPPER_BODY = "tbody";
+// Re-export moved constant for backward compatibility (tree-shakable now)
+
+const getTableSpinnerClasses = ({ 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"
+    });
+};
+const getTableOverlayClasses = ({ 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: getTableSpinnerClasses({
+            mode
+        })
+    };
+};
+const getTableClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled })=>{
+    const overlayClasses = disabled ? getTableOverlayClasses({
+        mode
+    }) : null;
+    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": !stickyHeader && !stickyFooter && !disabled,
+            "overflow-y-scroll": (stickyHeader || stickyFooter) && !disabled,
+            "overflow-hidden": 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),
+        table: clsx("my-0 w-full text-left text-sm", 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"
+        }),
+        caption: clsx("py-2 text-sm font-bold", {
+            "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 getTableHeadClasses = ({ className, stickyHeader, mode })=>{
+    return clsx({
+        "sticky top-0 z-10": stickyHeader,
+        "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"
+    }, className);
+};
+const getTableFooterClasses = ({ className, stickyFooter, mode })=>{
+    return clsx({
+        "sticky bottom-0 z-10": stickyFooter,
+        "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"
+    }, className);
+};
+const getTableRowClasses = ({ mode, className, cellWrapper })=>{
+    if (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER) {
+        return clsx({
+            "bg-table-head-dark": mode === "dark" || mode === "system",
+            "bg-table-head-light": mode === "light" || mode === "alt-system",
+            "dark:bg-table-head-light": mode === "system",
+            "dark:bg-table-head-dark": mode === "alt-system"
+        }, className);
+    }
+    return clsx("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);
+};
+const getTableCellClasses = ({ cellWrapper, className, compact, mode, align })=>{
+    return {
+        alignClasses: clsx({
+            "flex justify-start text-left": align === "left",
+            "flex justify-center text-center": align === "center",
+            "flex justify-end text-right": align === "right"
+        }),
+        mainClasses: clsx({
+            "text-copy-light": mode === "dark" || mode === "system",
+            "text-copy-dark": mode === "light" || mode === "alt-system",
+            "dark:text-copy-dark": mode === "system",
+            "dark:text-copy-light": mode === "alt-system",
+            "px-4 py-3": !compact && (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER),
+            "p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
+            "px-2 py-1.5": compact
+        }, className)
+    };
+};
+const getTableCellSortButtonClasses = ({ buttonClassName })=>{
+    return clsx("rounded-none text-sm", buttonClassName);
+};
+
+export { CELL_WRAPPER_BODY, CELL_WRAPPER_FOOTER, CELL_WRAPPER_HEAD, TableCellSortDirections, getTableCellClasses, getTableCellSortButtonClasses, getTableClasses, getTableFooterClasses, getTableHeadClasses, getTableOverlayClasses, getTableRowClasses, getTableSpinnerClasses };

package/dist/TableConstants/TableConstants.d.ts

@@ -0,0 +1,5 @@
+export declare const TableCellSortDirections: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+};
+export type TableCellSortDirection = (typeof TableCellSortDirections)[keyof typeof TableCellSortDirections];

package/dist/TableConstants/TableConstants.js

@@ -0,0 +1,14 @@
+/*!
+  @versini/ui-table v6.6.1
+  © 2025 gizmette.com
+*/
+
+
+;// CONCATENATED MODULE: ./src/components/TableConstants/TableConstants.tsx
+// Side-effect free constants for ui-table.
+const TableCellSortDirections = {
+    ASC: "asc",
+    DESC: "desc"
+};
+
+export { TableCellSortDirections };

package/dist/index.d.ts

@@ -1,136 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-declare const TableCellSortDirections: {
-    readonly ASC: "asc";
-    readonly DESC: "desc";
-};
-
-type TableProps = {
-	/**
-	 * This attribute defines the caption (or title) of a table.
-	 */
-	caption?: React.ReactNode;
-	/**
-	 * If true, the table will be smaller.
-	 */
-	compact?: boolean;
-	/**
-	 * If true, a frosty overlay will be placed above the table,
-	 * blocking all interactions (sorting, scrolling, etc.).
-	 * The table content remains visible but slightly blurred.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * The max height of the table. It follows the CSS max-height property.
-	 * Note: It is required to configure 'maxHeight' prop for the prop
-	 * 'stickyHeader' to work.
-	 */
-	maxHeight?: string;
-	/**
-	 * The mode of table. It defines the color of the table.
-	 */
-	mode?: "dark" | "light" | "system" | "alt-system";
-	/**
-	 * If true, the table footer will be sticky.
-	 * Note: It is required to configure 'maxHeight' prop for the prop
-	 * 'stickyHeader' to work.
-	 */
-	stickyFooter?: boolean;
-	/**
-	 * If true, the table header will be sticky.
-	 * Note: It is required to configure 'maxHeight' prop for the prop
-	 * 'stickyHeader' to work.
-	 */
-	stickyHeader?: boolean;
-	/**
-	 * This attribute defines an alternative text that summarizes
-	 * the content of the table. It is not visible but will be
-	 * read out loud by screen readers to represent the table.
-	 */
-	summary?: string;
-	/**
-	 * CSS class to apply to the table wrapper.
-	 */
-	wrapperClassName?: string;
-} & React.HTMLAttributes<HTMLTableElement>;
-
-type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
-type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
-type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;
-
-type TableCellProps = {
-	/**
-	 * The type of cell.
-	 * @default "td"
-	 */
-	component?: "td" | "th";
-	/**
-	 * Whether to align the cell content to the left, center, or right.
-	 */
-	align?: "left" | "center" | "right";
-} & React.ThHTMLAttributes<HTMLTableCellElement> &
-	React.TdHTMLAttributes<HTMLTableCellElement>;
-
-type TableCellSortProps = {
-	/**
-	 * Unique identifier for the cell. This string will have to be onClick
-	 * handler to sort on this particular cell.
-	 */
-	cellId: string;
-	/**
-	 * The label of the cell.
-	 */
-	children: string;
-	/**
-	 * The handler to be called when the cell is clicked.
-	 */
-	onClick: (event: React.MouseEvent<unknown>) => void;
-	/**
-	 * The direction of the sort.
-	 */
-	sortDirection:
-		| typeof TableCellSortDirections.ASC
-		| typeof TableCellSortDirections.DESC
-		| false;
-	/**
-	 * The cellId that is currently sorted.
-	 */
-	sortedCell: string;
-	/**
-	 * Whether to align the cell content to the left, center, or right.
-	 */
-	align?: "left" | "center" | "right";
-	/**
-	 * CSS class to apply to the button within the sort table cell.
-	 */
-	buttonClassName?: string;
-	/**
-	 * The type of cell.
-	 * @default "td"
-	 */
-	component?: "td" | "th";
-	/**
-	 * Pass through to the underlying ButtonIcon.
-	 * The type of focus for the Button. This will change the color
-	 * of the focus ring around the Button.
-	 */
-	focusMode?: "system" | "light" | "dark" | "alt-system";
-	/**
-	 * Pass through to the underlying ButtonIcon.
-	 * The mode of Button. This will change the color of the Button.
-	 */
-	mode?: "system" | "light" | "dark" | "alt-system";
-} & React.ThHTMLAttributes<HTMLTableCellElement> &
-	React.TdHTMLAttributes<HTMLTableCellElement>;
-
-declare const Table: ({ children, mode, caption, compact, disabled, summary, className, wrapperClassName, maxHeight, stickyHeader, stickyFooter, ...otherProps }: TableProps) => react_jsx_runtime.JSX.Element;
-declare const TableHead: ({ children, className, ...otherProps }: TableHeadProps) => react_jsx_runtime.JSX.Element;
-declare const TableFooter: ({ children, className, ...otherProps }: TableHeadProps) => react_jsx_runtime.JSX.Element;
-declare const TableBody: ({ children, ...otherProps }: TableBodyProps) => react_jsx_runtime.JSX.Element;
-declare const TableRow: ({ children, className, ...otherProps }: TableRowProps) => react_jsx_runtime.JSX.Element;
-declare const TableCell: ({ children, component, className, align, ...otherProps }: TableCellProps) => react_jsx_runtime.JSX.Element;
-declare const TableCellSort: ({ align, children, buttonClassName, className, component, focusMode, mode, onClick, sortDirection, sortedCell, cellId, ...otherProps }: TableCellSortProps) => react_jsx_runtime.JSX.Element;
-
-export { Table, TableBody, TableCell, TableCellSort, TableCellSortDirections, TableFooter, TableHead, TableRow };
+export * from "./Table/Table";
+export { TableCellSortDirections } from "./TableConstants/TableConstants";

package/dist/index.js

@@ -1,21 +1,15 @@
-import { Table as a, TableBody as r, TableCell as T, TableCellSort as i, TableFooter as _, TableHead as t, TableRow as b } from "./components/Table/Table.js";
-import { TableCellSortDirections as n } from "./components/TableConstants/TableConstants.js";
-try {
-  window.__VERSINI_UI_TABLE__ || (window.__VERSINI_UI_TABLE__ = {
-    version: "6.5.1",
-    buildTime: "12/26/2025 01:21 PM EST",
-    homepage: "https://www.npmjs.com/package/@versini/ui-table",
-    license: "MIT"
-  });
-} catch {
-}
-export {
-  a as Table,
-  r as TableBody,
-  T as TableCell,
-  i as TableCellSort,
-  n as TableCellSortDirections,
-  _ as TableFooter,
-  t as TableHead,
-  b as TableRow
-};
+/*!
+  @versini/ui-table v6.6.1
+  © 2025 gizmette.com
+*/
+
+import { TableCellSortDirections } from "./TableConstants/TableConstants.js";
+export * from "./Table/Table.js";
+
+;// CONCATENATED MODULE: external "./TableConstants/TableConstants.js"
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+export { TableCellSortDirections };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-table",
-	"version": "6.5.1",
+	"version": "6.6.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -14,12 +14,12 @@
 	"type": "module",
 	"exports": {
 		"./constants": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/components/TableConstants/TableConstants.js"
+			"types": "./dist/TableConstants/TableConstants.d.ts",
+			"import": "./dist/TableConstants/TableConstants.js"
 		},
 		"./table": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/components/Table/Table.js"
+			"types": "./dist/Table/Table.d.ts",
+			"import": "./dist/Table/Table.js"
 		}
 	},
 	"files": [
@@ -28,13 +28,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp coverage",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -58,5 +58,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "a3730974df8fcea3c016bd83844c4243dbb10208"
+	"gitHead": "04a29ca9e4e6697942e9d8414f82b65fbd38e0ab"
 }

package/dist/components/Table/Table.js

@@ -1,405 +0,0 @@
-import { jsxs as _, jsx as l, Fragment as w } from "react/jsx-runtime";
-import { ButtonSort_private as C } from "@versini/ui-button/private";
-import o from "clsx";
-import N, { useContext as y } from "react";
-import { TableCellSortDirections as k } from "../TableConstants/TableConstants.js";
-try {
-  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.15.1",
-    buildTime: "11/03/2025 07:21 PM EST",
-    homepage: "https://github.com/aversini/ui-icons",
-    license: "MIT"
-  });
-} catch {
-}
-try {
-  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
-    version: "4.3.0",
-    buildTime: "11/03/2025 07:21 PM EST",
-    homepage: "https://github.com/aversini/ui-icons",
-    license: "MIT"
-  });
-} catch {
-}
-const x = ({ children: t, fill: r, viewBox: e, className: a, defaultViewBox: s, size: n, title: c, semantic: b = !1, ...i }) => {
-  const h = o(n, a);
-  return /* @__PURE__ */ _("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    className: h,
-    viewBox: e || s,
-    fill: r || "currentColor",
-    role: "img",
-    "aria-hidden": !b,
-    focusable: !1,
-    ...i,
-    children: [
-      c && b && /* @__PURE__ */ l("title", {
-        children: c
-      }),
-      t
-    ]
-  });
-}, S = ({ className: t, viewBox: r, title: e, monotone: a, ...s }) => /* @__PURE__ */ _(x, {
-  defaultViewBox: "0 0 576 512",
-  size: "size-5",
-  viewBox: r,
-  className: t,
-  title: e || "Sort",
-  ...s,
-  children: [
-    /* @__PURE__ */ l("path", {
-      d: "M297.4 137.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l41.3-41.4V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.3l41.4 41.4c12.5 12.5 32.8 12.5 45.3 0 6.2-6.2 9.4-14.4 9.4-22.6s-3.1-16.4-9.4-22.6l-96-96c-6.3-6.4-14.5-9.5-22.7-9.5s-16.4 3.1-22.6 9.4z",
-      opacity: a ? "1" : "0.4"
-    }),
-    /* @__PURE__ */ l("path", {
-      d: "M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 370.7V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v306.7l-41.4-41.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96z"
-    })
-  ]
-}), T = ({ className: t, viewBox: r, title: e, monotone: a, ...s }) => /* @__PURE__ */ _(x, {
-  defaultViewBox: "0 0 576 512",
-  size: "size-5",
-  viewBox: r,
-  className: t,
-  title: e || "Sort Down",
-  ...s,
-  children: [
-    /* @__PURE__ */ l("path", {
-      d: "M288 64c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32",
-      opacity: a ? "1" : "0.4"
-    }),
-    /* @__PURE__ */ l("path", {
-      d: "M128 480c9 0 17.5-3.8 23.6-10.4l88-96c11.9-13 11.1-33.3-2-45.2s-33.3-11.1-45.2 2L160 365.7V64c0-17.7-14.3-32-32-32S96 46.3 96 64v301.7l-32.4-35.3c-11.9-13-32.2-13.9-45.2-2s-13.9 32.2-2 45.2l88 96c6.1 6.6 14.6 10.4 23.6 10.4"
-    })
-  ]
-}), I = ({ className: t, viewBox: r, title: e, monotone: a, ...s }) => /* @__PURE__ */ _(x, {
-  defaultViewBox: "0 0 576 512",
-  size: "size-5",
-  viewBox: r,
-  className: t,
-  title: e || "Sort Up",
-  ...s,
-  children: [
-    /* @__PURE__ */ l("path", {
-      d: "M288 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32",
-      opacity: a ? "1" : "0.4"
-    }),
-    /* @__PURE__ */ l("path", {
-      d: "M128 32c9 0 17.5 3.8 23.6 10.4l88 96c11.9 13 11.1 33.3-2 45.2s-33.3 11.1-45.2-2L160 146.3V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V146.3l-32.4 35.3c-11.9 13-32.2 13.9-45.2 2s-13.9-32.2-2-45.2l88-96C110.5 35.8 119 32 128 32"
-    })
-  ]
-}), g = N.createContext({
-  mode: "light",
-  cellWrapper: "thead",
-  stickyHeader: !1,
-  stickyFooter: !1,
-  compact: !1
-}), u = "thead", v = "tfoot", f = "tbody", z = ({ mode: t }) => o(
-  "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": t === "light",
-    "text-copy-light": t === "dark",
-    "text-copy-dark dark:text-copy-light": t === "alt-system",
-    "text-copy-light dark:text-copy-dark": t === "system"
-  }
-), E = ({ mode: t }) => ({
-  inner: "relative",
-  overlay: o(
-    "absolute inset-0 z-20 cursor-not-allowed",
-    "backdrop-blur-xs bg-white/30 dark:bg-black/30"
-  ),
-  spinnerWrapper: o(
-    "absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]",
-    "flex items-center justify-center",
-    "pointer-events-none"
-  ),
-  spinner: z({ mode: t })
-}), R = ({
-  mode: t,
-  className: r,
-  wrapperClassName: e,
-  stickyHeader: a,
-  stickyFooter: s,
-  disabled: n
-}) => {
-  const c = n ? E({ mode: t }) : null;
-  return {
-    overlay: c?.overlay ?? "",
-    inner: c?.inner ?? "",
-    spinnerWrapper: c?.spinnerWrapper ?? "",
-    spinner: c?.spinner ?? "",
-    wrapper: o(
-      "not-prose relative w-full rounded-lg shadow-md",
-      {
-        "overflow-x-auto": !a && !s && !n,
-        "overflow-y-scroll": (a || s) && !n,
-        "overflow-hidden": n,
-        "bg-surface-darker": t === "dark" || t === "system",
-        "bg-surface-light": t === "light" || t === "alt-system",
-        "dark:bg-surface-light": t === "system",
-        "dark:bg-surface-darker": t === "alt-system",
-        "text-copy-light": t === "dark",
-        "text-copy-dark": t === "light",
-        "text-copy-light dark:text-copy-dark": t === "system",
-        "text-copy-dark dark:text-copy-light": t === "alt-system"
-      },
-      e
-    ),
-    table: o("my-0 w-full text-left text-sm", r, {
-      "text-copy-light": t === "dark",
-      "text-copy-dark": t === "light",
-      "text-copy-light dark:text-copy-dark": t === "system",
-      "text-copy-dark dark:text-copy-light": t === "alt-system"
-    }),
-    caption: o("py-2 text-sm font-bold", {
-      "text-copy-light": t === "dark",
-      "text-copy-dark": t === "light",
-      "text-copy-light dark:text-copy-dark": t === "system",
-      "text-copy-dark dark:text-copy-light": t === "alt-system"
-    })
-  };
-}, V = ({
-  className: t,
-  stickyHeader: r,
-  mode: e
-}) => o(
-  {
-    "sticky top-0 z-10": r,
-    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": r && e === "dark",
-    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": r && e === "system",
-    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": r && e === "light",
-    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": r && e === "alt-system"
-  },
-  t
-), W = ({
-  className: t,
-  stickyFooter: r,
-  mode: e
-}) => o(
-  {
-    "sticky bottom-0 z-10": r,
-    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": r && e === "dark",
-    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": r && e === "system",
-    "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": r && e === "light",
-    "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": r && e === "alt-system"
-  },
-  t
-), B = ({
-  mode: t,
-  className: r,
-  cellWrapper: e
-}) => e === u || e === v ? o(
-  {
-    "bg-table-head-dark": t === "dark" || t === "system",
-    "bg-table-head-light": t === "light" || t === "alt-system",
-    "dark:bg-table-head-light": t === "system",
-    "dark:bg-table-head-dark": t === "alt-system"
-  },
-  r
-) : o(
-  "border-b last:border-0",
-  {
-    "hover:bg-table-dark-odd/50! hover:dark:bg-table-light-odd/50!": t === "alt-system" || t === "light",
-    "hover:bg-table-light-odd/50! hover:dark:bg-table-dark-odd/50!": t === "system" || t === "dark",
-    "border-table-dark": t === "dark" || t === "system",
-    "odd:bg-table-dark-odd even:bg-table-dark-even": t === "dark",
-    "border-table-light": t === "light" || t === "alt-system",
-    "odd:bg-table-light-odd even:bg-table-light-even": t === "light",
-    "dark:border-table-light": t === "system",
-    "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": t === "system",
-    "dark:border-table-dark": t === "alt-system",
-    "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": t === "alt-system"
-  },
-  r
-), L = ({
-  cellWrapper: t,
-  className: r,
-  compact: e,
-  mode: a,
-  align: s
-}) => ({
-  alignClasses: o({
-    "flex justify-start text-left": s === "left",
-    "flex justify-center text-center": s === "center",
-    "flex justify-end text-right": s === "right"
-  }),
-  mainClasses: o(
-    {
-      "text-copy-light": a === "dark" || a === "system",
-      "text-copy-dark": a === "light" || a === "alt-system",
-      "dark:text-copy-dark": a === "system",
-      "dark:text-copy-light": a === "alt-system",
-      "px-4 py-3": !e && (t === u || t === v),
-      "p-4": !e && t === f,
-      "px-2 py-1.5": e
-    },
-    r
-  )
-}), M = ({
-  buttonClassName: t
-}) => o("rounded-none text-sm", t), H = ({
-  children: t,
-  mode: r = "system",
-  caption: e,
-  compact: a,
-  disabled: s = !1,
-  summary: n,
-  className: c,
-  wrapperClassName: b,
-  maxHeight: i,
-  stickyHeader: h,
-  stickyFooter: p,
-  ...m
-}) => {
-  const d = R({
-    mode: r,
-    className: c,
-    wrapperClassName: b,
-    stickyHeader: h,
-    stickyFooter: p,
-    disabled: s
-  });
-  return /* @__PURE__ */ l(
-    g.Provider,
-    {
-      value: { mode: r, stickyHeader: h, stickyFooter: p, compact: a },
-      children: /* @__PURE__ */ l(
-        "div",
-        {
-          className: d.wrapper,
-          ...i && {
-            style: { maxHeight: i }
-          },
-          children: s ? /* @__PURE__ */ _(w, { children: [
-            /* @__PURE__ */ l("div", { className: d.spinnerWrapper, children: /* @__PURE__ */ l("div", { className: d.spinner, role: "status", children: /* @__PURE__ */ l("span", { className: "sr-only", children: "Loading..." }) }) }),
-            /* @__PURE__ */ _("div", { className: d.inner, children: [
-              /* @__PURE__ */ l("div", { className: d.overlay }),
-              /* @__PURE__ */ _(
-                "table",
-                {
-                  className: d.table,
-                  summary: n,
-                  ...s && { "aria-disabled": "true" },
-                  ...m,
-                  children: [
-                    e && /* @__PURE__ */ l("caption", { className: d.caption, children: e }),
-                    t
-                  ]
-                }
-              )
-            ] })
-          ] }) : /* @__PURE__ */ _("table", { className: d.table, summary: n, ...m, children: [
-            e && /* @__PURE__ */ l("caption", { className: d.caption, children: e }),
-            t
-          ] })
-        }
-      )
-    }
-  );
-}, F = ({
-  children: t,
-  className: r,
-  ...e
-}) => {
-  const a = y(g);
-  a.cellWrapper = u;
-  const s = V({
-    className: r,
-    mode: a.mode,
-    stickyHeader: a.stickyHeader
-  });
-  return /* @__PURE__ */ l("thead", { className: s, ...e, children: t });
-}, G = ({
-  children: t,
-  className: r,
-  ...e
-}) => {
-  const a = y(g);
-  a.cellWrapper = v;
-  const s = W({
-    className: r,
-    mode: a.mode,
-    stickyFooter: a.stickyFooter
-  });
-  return /* @__PURE__ */ l("tfoot", { className: s, ...e, children: t });
-}, Y = ({ children: t, ...r }) => {
-  const e = y(g);
-  return e.cellWrapper = f, /* @__PURE__ */ l("tbody", { ...r, children: t });
-}, q = ({
-  children: t,
-  className: r,
-  ...e
-}) => {
-  const a = y(g), s = B({
-    mode: a.mode,
-    cellWrapper: a.cellWrapper,
-    className: r
-  });
-  return /* @__PURE__ */ l("tr", { className: s, ...e, children: t });
-}, O = ({
-  children: t,
-  component: r,
-  className: e,
-  align: a,
-  ...s
-}) => {
-  const n = y(g), c = r || (n.cellWrapper === u ? "th" : "td"), { mainClasses: b, alignClasses: i } = L({
-    cellWrapper: n.cellWrapper,
-    className: e,
-    mode: n.mode,
-    compact: n.compact,
-    align: a
-  });
-  return a ? /* @__PURE__ */ l(c, { className: b, ...s, children: /* @__PURE__ */ l("div", { className: i, children: t }) }) : /* @__PURE__ */ l(c, { className: b, ...s, children: t });
-}, J = ({
-  align: t,
-  children: r,
-  buttonClassName: e,
-  className: a,
-  component: s,
-  focusMode: n = "alt-system",
-  mode: c = "alt-system",
-  onClick: b,
-  sortDirection: i,
-  sortedCell: h,
-  cellId: p,
-  ...m
-}) => {
-  const d = M({ buttonClassName: e });
-  return /* @__PURE__ */ l(
-    O,
-    {
-      component: s,
-      className: a,
-      role: "columnheader",
-      "aria-sort": i === k.ASC && h === p ? "ascending" : i === k.DESC && h === p ? "descending" : "other",
-      ...m,
-      children: /* @__PURE__ */ l(
-        C,
-        {
-          active: h === p,
-          className: d,
-          onClick: b,
-          align: t,
-          noBorder: !0,
-          focusMode: n,
-          mode: c,
-          fullWidth: !0,
-          labelRight: r,
-          children: i === k.ASC && h === p ? /* @__PURE__ */ l(I, { className: "size-4", monotone: !0 }) : i === k.DESC && h === p ? /* @__PURE__ */ l(T, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ l(S, { className: "size-4", monotone: !0 })
-        }
-      )
-    }
-  );
-};
-export {
-  H as Table,
-  Y as TableBody,
-  O as TableCell,
-  J as TableCellSort,
-  G as TableFooter,
-  F as TableHead,
-  q as TableRow
-};

package/dist/components/TableConstants/TableConstants.js

@@ -1,7 +0,0 @@
-const e = {
-  ASC: "asc",
-  DESC: "desc"
-};
-export {
-  e as TableCellSortDirections
-};