@neasg/design-system 0.4.22 → 0.4.24

package/dist/table.d.ts

@@ -30,6 +30,14 @@ declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<
     treatWidthAsMinWidth?: boolean;
     containOverflow?: boolean;
 } & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRowHeader: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    wrap?: boolean;
+    treatWidthAsMinWidth?: boolean;
+    containOverflow?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 type TableAlign = "left" | "center" | "right";
 export type TableRowTone = "default" | "muted" | "warning";
@@ -85,13 +93,15 @@ export interface TableColumn<Row> {
     skeleton?: TableSkeletonConfig;
     headerClassName?: string;
     cellClassName?: string;
+    /** Renders this column's body cells as semantic row headers. */
+    rowHeader?: boolean;
     /** Pins the column to the left or right edge while the table scrolls horizontally. */
     sticky?: "left" | "right";
     /** Enables a resize handle for this column. Use `resizableColumns` on Table to opt every column in by default. */
     resizable?: boolean;
     /** Minimum pixel width while resizing. Defaults to `minWidth`, then 64. */
     resizeMinWidth?: number;
-    /** Maximum pixel width while resizing. Omit to allow the column to grow. */
+    /** Maximum pixel width while resizing. Defaults to 1200. */
     resizeMaxWidth?: number;
 }
 export interface TableSortingProps {
@@ -137,6 +147,8 @@ export interface TableColumnResizeHandleRenderProps<Row> {
     handle: React.ReactElement;
 }
 export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Accessible name used as a visually hidden caption when `caption` is omitted. */
+    accessibleLabel: string;
     columns: TableColumn<Row>[];
     rows: Row[];
     getRowKey: (row: Row, index: number) => string;
@@ -155,6 +167,8 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     sorting?: TableSortingProps;
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
+    /** Status announced while loading. */
+    loadingLabel?: string;
     loadingRows?: number;
     /** Optional controlled ordered list of visible column keys. Omit to render every column in config order. */
     visibleColumnKeys?: readonly string[];
@@ -180,8 +194,6 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     striped?: boolean;
     /** Adds a disclosure column and full-width expandable content for nested tables or row details. */
     rowExpansion?: TableRowExpansionProps<Row>;
-    /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
-    onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };
+declare function Table<Row>({ accessibleLabel, columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingLabel, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -14,6 +14,7 @@ const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx(
 TableContainer.displayName = "TableContainer";
 const DEFAULT_COLUMN_RESIZE_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_RESIZE_START_WIDTH = 160;
+const DEFAULT_COLUMN_RESIZE_MAX_WIDTH = 1200;
 const COLUMN_RESIZE_KEYBOARD_STEP = 16;
 const TABLE_EXPANSION_COLUMN_WIDTH = 48;
 const TABLE_MIN_WIDTH_CSS_VAR = "--table-min-width";
@@ -62,7 +63,7 @@ function getColumnResizeMinWidth(column) {
 }
 function getColumnResizeMaxWidth(column) {
     var _a;
-    return (_a = parsePixelSize(column.resizeMaxWidth)) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
+    return (_a = parsePixelSize(column.resizeMaxWidth)) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_RESIZE_MAX_WIDTH;
 }
 function getColumnResizeMaxWidthStyle(column) {
     const maxWidth = getColumnResizeMaxWidth(column);
@@ -138,6 +139,15 @@ function getColumnResizeLabel(column) {
     }
     return column.key;
 }
+function getColumnHeaderAriaLabel(column) {
+    if (column.header === null ||
+        column.header === undefined ||
+        column.header === false ||
+        column.header === "") {
+        return getColumnResizeLabel(column);
+    }
+    return undefined;
+}
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-[hsl(var(--table-header-background))] [&_tr]:border-b [&_tr]:border-[hsl(var(--table-border))] [&>tr]:bg-inherit", className), ...props })));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
@@ -146,7 +156,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tf
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b border-[hsl(var(--table-border))] bg-card text-card-foreground transition-colors data-[state=selected]:bg-muted", className), ...props })));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
+const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-instructional [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
         style: {
             ...style,
             fontWeight: 500,
@@ -165,6 +175,14 @@ const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidt
         treatWidthAsMinWidth,
     }), ...props })));
 TableCell.displayName = "TableCell";
+const TableRowHeader = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, scope = "row", ...props }, ref) => (_jsx("th", { ref: ref, scope: scope, className: cn("h-12 px-4 py-2 text-left align-middle font-medium text-card-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
+        style,
+        width,
+        minWidth,
+        maxWidth,
+        treatWidthAsMinWidth,
+    }), ...props })));
+TableRowHeader.displayName = "TableRowHeader";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
 TableCaption.displayName = "TableCaption";
 const STICKY_SCROLL_EDGE_THRESHOLD = 1;
@@ -246,13 +264,20 @@ export const TABLE_SKELETON_PRESETS = {
 };
 function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }) {
     const isSorted = currentSortField === field;
-    return (_jsxs(TableHead, { "data-slot": "table-column-head", className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
+    const resolvedSortLabel = sortLabel !== null && sortLabel !== void 0 ? sortLabel : (typeof children === "string" || typeof children === "number"
+        ? String(children)
+        : field);
+    return (_jsxs(TableHead, { "data-slot": "table-column-head", scope: "col", "aria-sort": isSorted
+            ? currentSortDirection === "asc"
+                ? "ascending"
+                : "descending"
+            : undefined, className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
                     ? "max-w-full whitespace-normal text-left"
-                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
+                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${resolvedSortLabel}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { "aria-hidden": "true", className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
 }
 const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandle({ column, nextColumn, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
     const label = getColumnResizeLabel(column);
-    return (_jsx("button", { ...props, ref: ref, type: "button", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, onPointerDown: (event) => onResizeStart(column, nextColumn, event), onClick: (event) => {
+    return (_jsx("div", { ...props, ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, "aria-valuetext": currentWidth === undefined ? undefined : `${currentWidth} pixels`, onPointerDown: (event) => onResizeStart(column, nextColumn, event), onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             if (event.defaultPrevented) {
                 return;
@@ -268,11 +293,11 @@ const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandl
             onResizeByKeyboard(column, nextColumn, event.key === "ArrowLeft"
                 ? -COLUMN_RESIZE_KEYBOARD_STEP
                 : COLUMN_RESIZE_KEYBOARD_STEP);
-        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
+        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
 });
 const TableColumnGrowResizeHandle = React.forwardRef(function TableColumnGrowResizeHandle({ column, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
     const label = getColumnResizeLabel(column);
-    return (_jsx("button", { ...props, ref: ref, type: "button", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, onPointerDown: (event) => onResizeStart(column, event), onClick: (event) => {
+    return (_jsx("div", { ...props, ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, "aria-valuetext": currentWidth === undefined ? undefined : `${currentWidth} pixels`, onPointerDown: (event) => onResizeStart(column, event), onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             if (event.defaultPrevented) {
                 return;
@@ -288,7 +313,7 @@ const TableColumnGrowResizeHandle = React.forwardRef(function TableColumnGrowRes
             onResizeByKeyboard(column, event.key === "ArrowLeft"
                 ? -COLUMN_RESIZE_KEYBOARD_STEP
                 : COLUMN_RESIZE_KEYBOARD_STEP);
-        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
+        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
 });
 function getDefaultSkeleton(column) {
     var _a, _b;
@@ -329,7 +354,18 @@ function getVisibleColumns(columns, visibleColumnKeys) {
 function isStickyResizeBoundary(column, nextColumn) {
     return Boolean(column.sticky === "right" || nextColumn.sticky);
 }
-function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, onRowClick, onScroll, style, ...props }) {
+function getColumnPairResizeRange(column, nextColumn, columnWidths) {
+    const currentWidth = getResolvedResizableColumnWidth(column, columnWidths);
+    const nextWidth = getResolvedResizableColumnWidth(nextColumn, columnWidths);
+    const minDelta = Math.max(getColumnResizeMinWidth(column) - currentWidth, nextWidth - getColumnResizeMaxWidth(nextColumn));
+    const maxDelta = Math.min(getColumnResizeMaxWidth(column) - currentWidth, nextWidth - getColumnResizeMinWidth(nextColumn));
+    return {
+        currentWidth,
+        minWidth: Math.round(currentWidth + minDelta),
+        maxWidth: Math.round(currentWidth + maxDelta),
+    };
+}
+function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingLabel = "Loading table data", loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, onScroll, style, ...props }) {
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const hasExpansionColumn = Boolean(rowExpansion);
     const hasColumnFilters = visibleColumns.some((column) => column.filter);
@@ -353,6 +389,7 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
     const [stickyScrollState, setStickyScrollState] = React.useState({
         left: false,
         right: false,
+        scrollable: false,
     });
     const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = React.useState(() => { var _a; return new Set((_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.defaultExpandedRowKeys) !== null && _a !== void 0 ? _a : []); });
     const controlledExpandedRowKeys = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.expandedRowKeys;
@@ -364,12 +401,16 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         }
         const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
         const scrollLeft = Math.max(0, element.scrollLeft);
+        const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
         const nextScrollState = {
             left: scrollLeft > STICKY_SCROLL_EDGE_THRESHOLD,
             right: scrollLeft < maxScrollLeft - STICKY_SCROLL_EDGE_THRESHOLD,
+            scrollable: maxScrollLeft > STICKY_SCROLL_EDGE_THRESHOLD ||
+                maxScrollTop > STICKY_SCROLL_EDGE_THRESHOLD,
         };
         setStickyScrollState((currentScrollState) => currentScrollState.left === nextScrollState.left &&
-            currentScrollState.right === nextScrollState.right
+            currentScrollState.right === nextScrollState.right &&
+            currentScrollState.scrollable === nextScrollState.scrollable
             ? currentScrollState
             : nextScrollState);
     }, []);
@@ -499,13 +540,17 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         if (stickyResizeBoundary) {
             return null;
         }
+        const pairRange = getColumnPairResizeRange(column, nextColumn, resolvedColumnWidths);
         const currentWidth = isGrowResizeMode
             ? getColumnResizeBaseWidth(column, resolvedColumnWidths)
-            : getResolvedResizableColumnWidth(column, resolvedColumnWidths);
-        const maxWidth = Number.isFinite(getColumnResizeMaxWidth(column))
+            : pairRange.currentWidth;
+        const minWidth = isGrowResizeMode
+            ? getColumnResizeMinWidth(column)
+            : pairRange.minWidth;
+        const maxWidth = isGrowResizeMode
             ? getColumnResizeMaxWidth(column)
-            : undefined;
-        const handle = isGrowResizeMode ? (_jsx(TableColumnGrowResizeHandle, { column: column, currentWidth: currentWidth, minWidth: getColumnResizeMinWidth(column), maxWidth: maxWidth, onResizeStart: startGrowColumnResize, onResizeByKeyboard: resizeGrowColumnByKeyboard })) : (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: currentWidth, minWidth: getColumnResizeMinWidth(column), maxWidth: maxWidth, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
+            : pairRange.maxWidth;
+        const handle = isGrowResizeMode ? (_jsx(TableColumnGrowResizeHandle, { column: column, currentWidth: currentWidth, minWidth: minWidth, maxWidth: maxWidth, onResizeStart: startGrowColumnResize, onResizeByKeyboard: resizeGrowColumnByKeyboard })) : (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: currentWidth, minWidth: minWidth, maxWidth: maxWidth, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
         if (renderColumnResizeHandle) {
             return renderColumnResizeHandle({ column, nextColumn, handle });
         }
@@ -540,89 +585,94 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.onExpandedRowKeysChange) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, Array.from(nextExpandedRowKeys));
     }, [controlledExpandedRowKeys, rowExpansion, uncontrolledExpandedRowKeys]);
     const resolvedEmptyState = centerEmptyState ? (_jsx("div", { "data-slot": "table-empty-state", className: "flex w-full min-w-0 items-center justify-center whitespace-normal text-center [&>*]:mx-auto", style: { minHeight: emptyStateMinHeight }, children: emptyState })) : (emptyState);
-    const container = (_jsx(TableContainer, { ref: tableContainerRef, onScroll: handleTableContainerScroll, className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
+    const container = (_jsxs(TableContainer, { ref: tableContainerRef, role: stickyScrollState.scrollable ? "region" : undefined, "aria-label": stickyScrollState.scrollable
+            ? `${accessibleLabel} scroll area`
+            : undefined, tabIndex: stickyScrollState.scrollable ? 0 : undefined, onScroll: handleTableContainerScroll, className: cn("w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
             ...(growTableMinWidth !== undefined
                 ? { [TABLE_MIN_WIDTH_CSS_VAR]: `${growTableMinWidth}px` }
                 : {}),
             ...(maxHeight !== undefined ? { maxHeight } : {}),
             ...(resolvedMinHeight !== undefined ? { minHeight: resolvedMinHeight } : {}),
-        }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", isGrowResizeMode &&
-                (hasResolvedColumnWidths
-                    ? "w-[var(--table-min-width)]"
-                    : "min-w-[var(--table-min-width)]"), tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsxs("colgroup", { children: [hasExpansionColumn ? (_jsx("col", { style: {
-                                width: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
-                                minWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
-                                maxWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
-                            } })) : null, visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
-                                width: getRenderedColumnWidth({
-                                    column,
-                                    columnWidths: resolvedColumnWidths,
-                                    resizing: isColumnResizingEnabled,
-                                }),
-                                minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
-                                maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
-                                treatWidthAsMinWidth: !isColumnResizingEnabled,
-                            }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
-                                    var _a;
-                                    const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
-                                    const isSortable = column.sortable && sorting;
-                                    const columnWidth = getRenderedColumnWidth({
+        }, ...props, children: [_jsxs(TableRoot, { "aria-busy": loading, className: cn(shouldUseFixedLayout && "table-fixed", isGrowResizeMode &&
+                    (hasResolvedColumnWidths
+                        ? "w-[var(--table-min-width)]"
+                        : "min-w-[var(--table-min-width)]"), tableClassName), children: [_jsx(TableCaption, { className: caption ? undefined : "sr-only !m-0", children: caption !== null && caption !== void 0 ? caption : accessibleLabel }), _jsxs("colgroup", { children: [hasExpansionColumn ? (_jsx("col", { style: {
+                                    width: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
+                                    minWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
+                                    maxWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
+                                } })) : null, visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
+                                    width: getRenderedColumnWidth({
                                         column,
                                         columnWidths: resolvedColumnWidths,
                                         resizing: isColumnResizingEnabled,
-                                    });
-                                    const resizeHandle = renderResizeHandle(column, columnIndex);
-                                    return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { "data-slot": "table-column-head", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
-                                })] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
-                                    const columnWidth = getRenderedColumnWidth({
-                                        column,
-                                        columnWidths: resolvedColumnWidths,
-                                        resizing: isColumnResizingEnabled,
-                                    });
-                                    return (_jsx(TableHead, { "data-slot": "table-filter-cell", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn("relative h-11 px-2 py-1 font-normal", stickyClassName(column.sticky, "filter", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.filterClassName), children: column.filter ? (_jsx("div", { "data-slot": "table-filter-control", className: "absolute inset-x-2 inset-y-1 min-w-0", children: _jsx(TableColumnFilterControl, { filter: column.filter, label: getColumnResizeLabel(column) }) })) : null }, column.key));
-                                })] })) : null] }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: [
-                            ...(hasExpansionColumn
-                                ? [{ width: "1rem", height: "1rem" }]
-                                : []),
-                            ...visibleColumns.map((column) => {
-                                var _a;
-                                return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column);
-                            }),
-                        ] })) : rows.length ? (rows.map((row, rowIndex) => {
-                        var _a, _b, _c, _d;
-                        const rowKey = getRowKey(row, rowIndex);
-                        const resolvedTone = typeof rowTone === "function"
-                            ? rowTone(row, rowIndex)
-                            : rowTone;
-                        const isRowExpandable = (_b = (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.isRowExpandable) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, row, rowIndex)) !== null && _b !== void 0 ? _b : hasExpansionColumn;
-                        const isExpanded = isRowExpandable && resolvedExpandedRowKeys.has(rowKey);
-                        const expandedContentId = `${expansionIdPrefix}-expanded-row-${rowIndex}`;
-                        return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "data-expanded": isExpanded ? "true" : undefined, onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, className: cn(onRowClick && "cursor-pointer hover:bg-muted", striped &&
-                                        rowIndex % 2 === 1 &&
-                                        !resolvedTone &&
-                                        "bg-[hsl(var(--table-row-striped-background))]", tableRowToneClassName(resolvedTone), typeof rowClassName === "function"
-                                        ? rowClassName(row, rowIndex)
-                                        : rowClassName), children: [hasExpansionColumn ? (_jsx(TableCell, { className: "w-12 px-2 text-center", children: isRowExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": expandedContentId, "aria-label": (_d = (_c = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.getToggleLabel) === null || _c === void 0 ? void 0 : _c.call(rowExpansion, row, rowIndex, isExpanded)) !== null && _d !== void 0 ? _d : `${isExpanded ? "Collapse" : "Expand"} row ${rowIndex + 1}`, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    toggleExpandedRow(rowKey);
-                                                }, className: "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(ChevronRight, { "aria-hidden": "true", className: cn("h-4 w-4 transition-transform duration-150", isExpanded && "rotate-90") }) })) : null })) : null, visibleColumns.map((column) => {
-                                            var _a, _b;
-                                            const columnWidth = getRenderedColumnWidth({
-                                                column,
-                                                columnWidths: resolvedColumnWidths,
-                                                resizing: isColumnResizingEnabled,
-                                            });
-                                            const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
-                                                ? row[column.accessorKey]
-                                                : null);
-                                            return (_jsx(TableCell, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.cellClassName), children: value }, column.key));
-                                        })] }), isExpanded ? (_jsx(TableRow, { id: expandedContentId, "data-slot": "table-expanded-row", className: "bg-[hsl(var(--table-row-striped-background))] hover:bg-[hsl(var(--table-row-striped-background))]", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
-                                            (hasExpansionColumn ? 1 : 0), 1), className: "h-auto whitespace-normal p-4", children: rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.renderExpandedContent(row, rowIndex) }) })) : null] }, rowKey));
-                    })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length + (hasExpansionColumn ? 1 : 0), 1), className: "p-6", children: resolvedEmptyState }) })) })] }) }));
+                                    }),
+                                    minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
+                                    maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
+                                    treatWidthAsMinWidth: !isColumnResizingEnabled,
+                                }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", scope: "col", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
+                                        var _a;
+                                        const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
+                                        const isSortable = column.sortable && sorting;
+                                        const columnWidth = getRenderedColumnWidth({
+                                            column,
+                                            columnWidths: resolvedColumnWidths,
+                                            resizing: isColumnResizingEnabled,
+                                        });
+                                        const resizeHandle = renderResizeHandle(column, columnIndex);
+                                        return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { "data-slot": "table-column-head", "aria-label": getColumnHeaderAriaLabel(column), scope: "col", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
+                                    })] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableCell, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
+                                        const columnWidth = getRenderedColumnWidth({
+                                            column,
+                                            columnWidths: resolvedColumnWidths,
+                                            resizing: isColumnResizingEnabled,
+                                        });
+                                        return (_jsx(TableCell, { "data-slot": "table-filter-cell", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn("relative h-11 px-2 py-1 font-normal", stickyClassName(column.sticky, "filter", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.filterClassName), children: column.filter ? (_jsx("div", { "data-slot": "table-filter-control", className: "absolute inset-x-2 inset-y-1 min-w-0", children: _jsx(TableColumnFilterControl, { filter: column.filter, label: getColumnResizeLabel(column) }) })) : null }, column.key));
+                                    })] })) : null] }), _jsx(TableBody, { "aria-hidden": loading ? "true" : undefined, children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: [
+                                ...(hasExpansionColumn
+                                    ? [{ width: "1rem", height: "1rem" }]
+                                    : []),
+                                ...visibleColumns.map((column) => {
+                                    var _a;
+                                    return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column);
+                                }),
+                            ] })) : rows.length ? (rows.map((row, rowIndex) => {
+                            var _a, _b, _c, _d;
+                            const rowKey = getRowKey(row, rowIndex);
+                            const resolvedTone = typeof rowTone === "function"
+                                ? rowTone(row, rowIndex)
+                                : rowTone;
+                            const isRowExpandable = (_b = (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.isRowExpandable) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, row, rowIndex)) !== null && _b !== void 0 ? _b : hasExpansionColumn;
+                            const isExpanded = isRowExpandable && resolvedExpandedRowKeys.has(rowKey);
+                            const expandedContentId = `${expansionIdPrefix}-expanded-row-${rowIndex}`;
+                            return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "data-expanded": isExpanded ? "true" : undefined, className: cn(striped &&
+                                            rowIndex % 2 === 1 &&
+                                            !resolvedTone &&
+                                            "bg-[hsl(var(--table-row-striped-background))]", tableRowToneClassName(resolvedTone), typeof rowClassName === "function"
+                                            ? rowClassName(row, rowIndex)
+                                            : rowClassName), children: [hasExpansionColumn ? (_jsx(TableCell, { className: "w-12 px-2 text-center", children: isRowExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": isExpanded ? expandedContentId : undefined, "aria-label": (_d = (_c = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.getToggleLabel) === null || _c === void 0 ? void 0 : _c.call(rowExpansion, row, rowIndex, isExpanded)) !== null && _d !== void 0 ? _d : `${isExpanded ? "Collapse" : "Expand"} row ${rowIndex + 1}`, onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        toggleExpandedRow(rowKey);
+                                                    }, className: "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(ChevronRight, { "aria-hidden": "true", className: cn("h-4 w-4 transition-transform duration-150", isExpanded && "rotate-90") }) })) : null })) : null, visibleColumns.map((column) => {
+                                                var _a, _b;
+                                                const columnWidth = getRenderedColumnWidth({
+                                                    column,
+                                                    columnWidths: resolvedColumnWidths,
+                                                    resizing: isColumnResizingEnabled,
+                                                });
+                                                const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
+                                                    ? row[column.accessorKey]
+                                                    : null);
+                                                const Cell = column.rowHeader
+                                                    ? TableRowHeader
+                                                    : TableCell;
+                                                return (_jsx(Cell, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.cellClassName), children: value }, column.key));
+                                            })] }), isExpanded ? (_jsx(TableRow, { id: expandedContentId, "data-slot": "table-expanded-row", className: "bg-[hsl(var(--table-row-striped-background))] hover:bg-[hsl(var(--table-row-striped-background))]", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
+                                                (hasExpansionColumn ? 1 : 0), 1), className: "h-auto whitespace-normal p-4", children: rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.renderExpandedContent(row, rowIndex) }) })) : null] }, rowKey));
+                        })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length + (hasExpansionColumn ? 1 : 0), 1), className: "p-6", children: resolvedEmptyState }) })) })] }), _jsx("div", { role: "status", className: "sr-only", children: loading ? loadingLabel : null })] }));
     if (!pagination) {
         return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
     }
     return (_jsxs("div", { className: "space-y-4", children: [toolbar, container, _jsx(Pagination, { ...pagination })] }));
 }
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/tailwind-preset.js

@@ -38,6 +38,21 @@ export const neaTailwindPreset = {
                     DEFAULT: "hsl(var(--primary))",
                     foreground: "hsl(var(--primary-foreground))",
                 },
+                interactive: "hsl(var(--interactive-foreground))",
+                highlight: {
+                    DEFAULT: "hsl(var(--highlight-background))",
+                    foreground: "hsl(var(--highlight-foreground))",
+                },
+                "button-primary": {
+                    DEFAULT: "hsl(var(--button-primary-background))",
+                    foreground: "hsl(var(--button-primary-foreground))",
+                },
+                "button-primary-hover": "hsl(var(--button-primary-hover-background))",
+                "count-badge": {
+                    DEFAULT: "hsl(var(--count-badge-background))",
+                    foreground: "hsl(var(--count-badge-foreground))",
+                },
+                instructional: "hsl(var(--instructional-foreground))",
                 secondary: {
                     DEFAULT: "hsl(var(--secondary))",
                     foreground: "hsl(var(--secondary-foreground))",

package/dist/theme.d.ts

@@ -357,6 +357,15 @@ export declare const darkThemeTokenMapping: {
     readonly "--tooltip-foreground": "var(--nea-dark-neutral-50)";
     readonly "--primary": "148 30% 38%";
     readonly "--primary-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--interactive-foreground": "143 44% 67%";
+    readonly "--highlight-background": "148 20% 18%";
+    readonly "--highlight-foreground": "143 44% 67%";
+    readonly "--button-primary-background": "148 30% 38%";
+    readonly "--button-primary-hover-background": "148 30% 39%";
+    readonly "--button-primary-foreground": "0 0% 100%";
+    readonly "--count-badge-background": "148 24% 24%";
+    readonly "--count-badge-foreground": "143 44% 67%";
+    readonly "--instructional-foreground": "var(--nea-dark-neutral-200)";
     readonly "--secondary": "var(--nea-dark-neutral-500)";
     readonly "--secondary-foreground": "var(--nea-dark-neutral-100)";
     readonly "--muted": "var(--nea-dark-neutral-500)";
@@ -448,6 +457,42 @@ export declare const semanticColorTokens: readonly [{
     readonly foregroundToken: "--primary-foreground";
     readonly darkValue: "148 30% 38%";
     readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
+}, {
+    readonly name: "Interactive Foreground";
+    readonly token: "--interactive-foreground";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "143 44% 67%";
+    readonly darkForegroundValue?: undefined;
+}, {
+    readonly name: "Highlight";
+    readonly token: "--highlight-background";
+    readonly foregroundToken: "--highlight-foreground";
+    readonly darkValue: "148 20% 18%";
+    readonly darkForegroundValue: "143 44% 67%";
+}, {
+    readonly name: "Primary Button";
+    readonly token: "--button-primary-background";
+    readonly foregroundToken: "--button-primary-foreground";
+    readonly darkValue: "148 30% 38%";
+    readonly darkForegroundValue: "0 0% 100%";
+}, {
+    readonly name: "Primary Button Hover";
+    readonly token: "--button-primary-hover-background";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "148 30% 39%";
+    readonly darkForegroundValue?: undefined;
+}, {
+    readonly name: "Count Badge";
+    readonly token: "--count-badge-background";
+    readonly foregroundToken: "--count-badge-foreground";
+    readonly darkValue: "148 24% 24%";
+    readonly darkForegroundValue: "143 44% 67%";
+}, {
+    readonly name: "Instructional Foreground";
+    readonly token: "--instructional-foreground";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--nea-dark-neutral-200)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Secondary";
     readonly token: "--secondary";

package/dist/theme.js

@@ -186,6 +186,15 @@ export const darkThemeTokenMapping = {
     "--tooltip-foreground": "var(--nea-dark-neutral-50)",
     "--primary": "148 30% 38%",
     "--primary-foreground": "var(--nea-dark-neutral-50)",
+    "--interactive-foreground": "143 44% 67%",
+    "--highlight-background": "148 20% 18%",
+    "--highlight-foreground": "143 44% 67%",
+    "--button-primary-background": "148 30% 38%",
+    "--button-primary-hover-background": "148 30% 39%",
+    "--button-primary-foreground": "0 0% 100%",
+    "--count-badge-background": "148 24% 24%",
+    "--count-badge-foreground": "143 44% 67%",
+    "--instructional-foreground": "var(--nea-dark-neutral-200)",
     "--secondary": "var(--nea-dark-neutral-500)",
     "--secondary-foreground": "var(--nea-dark-neutral-100)",
     "--muted": "var(--nea-dark-neutral-500)",
@@ -273,6 +282,33 @@ export const semanticColorTokens = [
         token: "--primary",
         foregroundToken: "--primary-foreground",
     }),
+    withDarkThemeMapping({
+        name: "Interactive Foreground",
+        token: "--interactive-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Highlight",
+        token: "--highlight-background",
+        foregroundToken: "--highlight-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Primary Button",
+        token: "--button-primary-background",
+        foregroundToken: "--button-primary-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Primary Button Hover",
+        token: "--button-primary-hover-background",
+    }),
+    withDarkThemeMapping({
+        name: "Count Badge",
+        token: "--count-badge-background",
+        foregroundToken: "--count-badge-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Instructional Foreground",
+        token: "--instructional-foreground",
+    }),
     withDarkThemeMapping({
         name: "Secondary",
         token: "--secondary",

package/dist/toaster.js

@@ -32,11 +32,11 @@ function Toaster({ position = "top-right", visibleToasts = 3, closeButton = true
             style: toastLayoutStyle,
             classNames: {
                 toast: "group relative !grid w-[var(--width)] !grid-cols-[auto_var(--space-2)_auto_minmax(0,1fr)] !items-start !gap-x-0 !gap-y-2 !rounded-overlay !border !border-border/80 !bg-popover !p-3 !pr-10 !text-popover-foreground !shadow-overlay-strong [&_[data-action]]:col-start-1 [&_[data-button]]:row-start-2 [&_[data-button]]:!ml-0 [&_[data-button]]:!mr-0 [&_[data-cancel]]:col-start-1 [&_[data-content]]:col-span-full [&_[data-content]]:col-start-1 [&_[data-content]]:row-start-1 [&_[data-icon]]:col-start-1 [&_[data-icon]]:row-start-1 [&:has([data-cancel])_[data-action]]:col-start-3 [&:has([data-icon])]:!grid-cols-[auto_var(--space-3)_auto_var(--space-2)_auto_minmax(0,1fr)] [&:has([data-icon])_[data-action]]:col-start-3 [&:has([data-icon])_[data-cancel]]:col-start-3 [&:has([data-icon])_[data-content]]:col-start-3 [&:has([data-icon]):has([data-cancel])_[data-action]]:col-start-5",
-                content: "flex min-w-0 flex-col gap-1",
+                content: "flex min-w-0 flex-col gap-1 [&:not(:has([data-description]))]:min-h-8 [&:not(:has([data-description]))]:justify-center",
                 title: cn(typographyVariants({ variant: "bodySm" }), "!font-medium !text-popover-foreground"),
                 description: cn(typographyVariants({ variant: "bodySm" }), "!text-muted-foreground"),
                 icon: "!mx-0 flex !h-8 !w-8 shrink-0 !items-center !justify-center self-start rounded-control !border !border-border !bg-muted !text-muted-foreground [&>svg]:!m-0 [&>svg]:!h-4 [&>svg]:!w-4",
-                actionButton: cn(buttonVariants({ variant: "default", size: "compact" }), toastActionClassName, "!bg-primary !text-primary-foreground hover:!bg-primary/90"),
+                actionButton: cn(buttonVariants({ variant: "default", size: "compact" }), toastActionClassName, "!bg-button-primary !text-button-primary-foreground hover:!bg-button-primary-hover"),
                 cancelButton: cn(buttonVariants({ variant: "outline", size: "compact" }), toastActionClassName, "!border-[hsl(var(--button-outline-border))] !bg-[hsl(var(--button-outline-background))] !text-foreground hover:!bg-[hsl(var(--button-outline-hover-background))]"),
                 closeButton: "!absolute !left-auto !right-2.5 !top-2.5 !flex !h-6 !w-6 !translate-x-0 !translate-y-0 !items-center !justify-center !rounded-control !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
                 success: "border-[hsl(var(--status-success-foreground))]/20 [&_[data-icon]]:!border-status-success-foreground/20 [&_[data-icon]]:!bg-status-success [&_[data-icon]]:!text-status-success-foreground",

package/dist/tooltip.js

@@ -8,7 +8,15 @@ function TooltipProvider({ delayDuration = 100, ...props }) {
 }
 const TooltipRoot = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-overlay bg-[hsl(var(--tooltip-background))] px-3 py-1.5 text-sm text-[hsl(var(--tooltip-foreground))] shadow-[var(--overlay-shadow)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted)
+        return null;
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-overlay bg-[hsl(var(--tooltip-background))] px-3 py-1.5 text-sm text-[hsl(var(--tooltip-foreground))] shadow-[var(--overlay-shadow)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) }));
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 function Tooltip({ content, children, delayDuration = 100, side = "top", sideOffset = 4, contentClassName, open, defaultOpen, onOpenChange, }) {
     return (_jsx(TooltipProvider, { delayDuration: delayDuration, children: _jsxs(TooltipRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, sideOffset: sideOffset, className: contentClassName, children: content })] }) }));