@neasg/design-system 0.4.16 → 0.4.18

package/dist/calendar.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { DayButton, DayPicker } from "react-day-picker";
 import { Button } from "./button";
 declare function CalendarDayButton({ className, day, modifiers, children, disabled, onClick, onFocus, onBlur, onKeyDown, onMouseEnter, onMouseLeave, tabIndex, type, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+declare function Calendar({ className, classNames, showOutsideDays, fixedWeeks, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): import("react/jsx-runtime").JSX.Element;
 export { Calendar, CalendarDayButton };

package/dist/calendar.js

@@ -18,9 +18,9 @@ function CalendarDayButton({ className, day, modifiers, children, disabled, onCl
             !modifiers.range_end &&
             !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("inline-flex cursor-pointer items-center justify-center rounded-control outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-primary/10 data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 aspect-square w-full min-w-[--cell-size] data-[range-end=true]:rounded-control data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-control group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", defaultClassNames.day, className), children: _jsx(Typography, { as: "span", variant: "bodySm", color: "inherit", children: children }) }));
 }
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, fixedWeeks = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
             formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
             ...formatters,
         }, classNames: {

package/dist/date-input.js

@@ -164,7 +164,7 @@ const DateInput = React.forwardRef((props, ref) => {
         }
     };
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
-    const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
+    const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, showOutsideDays: false, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
         return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }

package/dist/index.d.ts

@@ -132,7 +132,7 @@ export type { TableColumnVisibilityMenuProps } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
-export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowExpansionProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
 export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/table.d.ts

@@ -94,6 +94,20 @@ export interface TableSortingProps {
     direction: TableSortDirection;
     onSort: (field: string) => void;
 }
+export interface TableRowExpansionProps<Row> {
+    /** Renders the full-width content below an expanded parent row. */
+    renderExpandedContent: (row: Row, rowIndex: number) => React.ReactNode;
+    /** Controls which rows can be expanded. Every row is expandable by default. */
+    isRowExpandable?: (row: Row, rowIndex: number) => boolean;
+    /** Controlled list of expanded row keys. */
+    expandedRowKeys?: readonly string[];
+    /** Initially expanded row keys for uncontrolled usage. */
+    defaultExpandedRowKeys?: readonly string[];
+    /** Called when a row expansion toggle changes the expanded key list. */
+    onExpandedRowKeysChange?: (expandedRowKeys: string[]) => void;
+    /** Accessible label for a row's expansion toggle. */
+    getToggleLabel?: (row: Row, rowIndex: number, expanded: boolean) => string;
+}
 interface SortableTableHeadProps<T extends string> {
     field: T;
     children: React.ReactNode;
@@ -159,8 +173,10 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     emptyStateMinHeight?: React.CSSProperties["minHeight"];
     /** When true, applies alternating row backgrounds for easier scanning. */
     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, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+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, };

package/dist/table.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ArrowUpDown } from "lucide-react";
+import { ArrowUpDown, ChevronRight } from "lucide-react";
 import { ArrowDownIcon } from "./animated-icons/arrow-down";
 import { ArrowUpIcon } from "./animated-icons/arrow-up";
 import { EmptyState } from "./empty-state";
@@ -14,6 +14,7 @@ TableContainer.displayName = "TableContainer";
 const DEFAULT_COLUMN_RESIZE_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_RESIZE_START_WIDTH = 160;
 const COLUMN_RESIZE_KEYBOARD_STEP = 16;
+const TABLE_EXPANSION_COLUMN_WIDTH = 48;
 const TABLE_MIN_WIDTH_CSS_VAR = "--table-min-width";
 const DEFAULT_TABLE_MIN_HEIGHT = "var(--table-min-height, var(--app-table-min-height, 24rem))";
 const DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT = "calc(var(--table-min-height, var(--app-table-min-height, 24rem)) - var(--table-empty-state-offset, var(--app-table-empty-state-offset, 5.75rem)))";
@@ -109,7 +110,7 @@ function hasColumnWidthOverrides(columnWidths) {
 }
 function getMeasuredColumnWidths(resizeHandle, columns, fallbackColumnWidths) {
     const table = resizeHandle.closest("table");
-    const headerCells = table === null || table === void 0 ? void 0 : table.querySelectorAll("thead th");
+    const headerCells = table === null || table === void 0 ? void 0 : table.querySelectorAll('thead th:not([data-slot="table-expansion-head"])');
     if (!(headerCells === null || headerCells === void 0 ? void 0 : headerCells.length)) {
         return fallbackColumnWidths;
     }
@@ -327,8 +328,9 @@ 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, onRowClick, onScroll, style, ...props }) {
+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 }) {
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
+    const hasExpansionColumn = Boolean(rowExpansion);
     const isGrowResizeMode = columnResizeMode === "grow";
     const isColumnResizingEnabled = resizableColumns || visibleColumns.some((column) => column.resizable);
     // Use auto layout by default so the browser can grow a column to contain its
@@ -339,7 +341,8 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
     const resolvedColumnWidths = columnWidths !== null && columnWidths !== void 0 ? columnWidths : uncontrolledColumnWidths;
     const hasResolvedColumnWidths = hasColumnWidthOverrides(resolvedColumnWidths);
     const growTableMinWidth = isGrowResizeMode
-        ? getTableMinWidth(visibleColumns, resolvedColumnWidths)
+        ? getTableMinWidth(visibleColumns, resolvedColumnWidths) +
+            (hasExpansionColumn ? TABLE_EXPANSION_COLUMN_WIDTH : 0)
         : undefined;
     const resolvedMinHeight = minHeight !== null && minHeight !== void 0 ? minHeight : (centerEmptyState ? DEFAULT_TABLE_MIN_HEIGHT : undefined);
     const columnWidthsRef = React.useRef(resolvedColumnWidths);
@@ -349,6 +352,10 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         left: false,
         right: 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;
+    const resolvedExpandedRowKeys = new Set(controlledExpandedRowKeys !== null && controlledExpandedRowKeys !== void 0 ? controlledExpandedRowKeys : uncontrolledExpandedRowKeys);
+    const expansionIdPrefix = React.useId().replace(/:/g, "");
     const updateStickyScrollState = React.useCallback((element = tableContainerRef.current) => {
         if (!element) {
             return;
@@ -516,6 +523,20 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
         updateStickyScrollState(event.currentTarget);
     }, [onScroll, updateStickyScrollState]);
+    const toggleExpandedRow = React.useCallback((rowKey) => {
+        var _a;
+        const nextExpandedRowKeys = new Set(controlledExpandedRowKeys !== null && controlledExpandedRowKeys !== void 0 ? controlledExpandedRowKeys : uncontrolledExpandedRowKeys);
+        if (nextExpandedRowKeys.has(rowKey)) {
+            nextExpandedRowKeys.delete(rowKey);
+        }
+        else {
+            nextExpandedRowKeys.add(rowKey);
+        }
+        if (controlledExpandedRowKeys === undefined) {
+            setUncontrolledExpandedRowKeys(nextExpandedRowKeys);
+        }
+        (_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: {
             ...style,
@@ -527,49 +548,69 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         }, ...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, _jsx("colgroup", { children: 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))) }), _jsx(TableHeader, { children: _jsx(TableRow, { children: 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, { 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)));
-                        }) }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: visibleColumns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => {
-                        const resolvedTone = typeof rowTone === "function"
-                            ? rowTone(row, rowIndex)
-                            : rowTone;
-                        return (_jsx(TableRow, { 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: visibleColumns.map((column) => {
-                                var _a, _b;
+                    : "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)))] }), _jsx(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({
                                     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));
-                            }) }, getRowKey(row, rowIndex)));
-                    })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length, 1), className: "p-6", children: resolvedEmptyState }) })) })] }) }));
+                                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, { 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)));
+                            })] }) }), _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 }) })) })] }) }));
     if (!pagination) {
         return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.16",
+  "version": "0.4.18",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",