@datum-cloud/datum-ui 2.10.0 → 2.12.0

package/dist/components/features/data-table/components/column-header.d.ts

@@ -1,3 +1,3 @@
 import type { RowData } from '@tanstack/react-table';
 import type { ColumnHeaderProps } from '../types';
-export declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, className, }: ColumnHeaderProps<TData, TValue>): import("react").JSX.Element;
+export declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, className, density, }: ColumnHeaderProps<TData, TValue>): import("react").JSX.Element;

package/dist/components/features/data-table/components/content.d.ts

@@ -1,2 +1,3 @@
+import type { RowData } from '@tanstack/react-table';
 import type { ContentProps } from '../types';
-export declare function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, }: ContentProps): import("react").JSX.Element;
+export declare function DataTableContent<TData extends RowData = Record<string, any>>({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, density, onRowClick, }: ContentProps<TData>): import("react").JSX.Element;

package/dist/components/features/data-table/components/list-pagination.d.ts

@@ -0,0 +1,7 @@
+import type { ListPaginationProps } from '../types';
+/**
+ * Compact list-page footer: `[pageSize ▾] Rows per page … 1-100 of N [resource]`
+ * + joined prev/next buttons. Pass `labels` to localize — this package ships no
+ * i18n of its own.
+ */
+export declare function DataTableListPagination({ pageSizes, resourceLabel, hideWhenSinglePage, labels, className, }: ListPaginationProps): import("react").JSX.Element | null;

package/dist/components/features/data-table/components/list-panel.d.ts

@@ -0,0 +1,10 @@
+import type { RowData } from '@tanstack/react-table';
+import type { ListPanelProps } from '../types';
+/**
+ * Compact "list table" card: search row + dense sticky-header table, matching
+ * staff-portal's Figma org-list pattern. Renders inside `DataTable.Client` /
+ * `DataTable.Server`, same as every other `DataTable.*` part. Pagination is
+ * deliberately not included — render `DataTable.ListPagination` as a sibling,
+ * below the panel.
+ */
+export declare function DataTableListPanel<TData extends RowData = Record<string, any>>({ search, searchSlot, toolbar, emptyMessage, loading, onRowClick, className, panelClassName, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, }: ListPanelProps<TData>): import("react").JSX.Element;

package/dist/components/features/data-table/data-table.d.ts

@@ -2,6 +2,8 @@ import { DataTableBulkActions } from './components/bulk-actions';
 import { DataTableColumnHeader } from './components/column-header';
 import { DataTableContent } from './components/content';
 import { DataTableInlineContent } from './components/inline-content';
+import { DataTableListPagination } from './components/list-pagination';
+import { DataTableListPanel } from './components/list-panel';
 import { DataTableLoading } from './components/loading';
 import { DataTablePagination } from './components/pagination';
 import { DataTableRowActions } from './components/row-actions';
@@ -19,6 +21,8 @@ export declare const DataTable: {
     readonly InlineContent: typeof DataTableInlineContent;
     readonly ColumnHeader: typeof DataTableColumnHeader;
     readonly Pagination: typeof DataTablePagination;
+    readonly ListPanel: typeof DataTableListPanel;
+    readonly ListPagination: typeof DataTableListPagination;
     readonly Search: typeof DataTableSearch;
     readonly RowActions: typeof DataTableRowActions;
     readonly BulkActions: typeof DataTableBulkActions;

package/dist/components/features/data-table/index.d.ts

@@ -11,4 +11,4 @@ export type { SearchConfig } from './core/filter-engine';
 export { createDataTableStore } from './core/store';
 export { DataTable } from './data-table';
 export { useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableSorting, } from './hooks/use-selectors';
-export type { ActionItem, ActiveFiltersProps, BulkActionsProps, ClientPaginationControls, ClientPaginationState, ColumnHeaderProps, ContentProps, CreateStoreOptions, DataTableClientProps, DataTableContextValue, DataTableServerProps, DataTableState, DataTableStore, DataTableStoreState, FilterCheckboxProps, FilterDatePickerProps, FilterFn, FilterFnMap, FilterOption, FilterSelectProps, FilterStrategy, FilterValue, InlineContentEntry, InlineContentProps, InlineContentRenderParams, LoadingProps, PaginationProps, PaginationState, RowActionsProps, SearchProps, SelectionColumnOptions, ServerFetchArgs, ServerPaginationControls, ServerPaginationState, ServerTransformResult, StateAdapter, UseDataTableClientOptions, UseDataTableServerOptions, } from './types';
+export type { ActionItem, ActiveFiltersProps, BulkActionsProps, ClientPaginationControls, ClientPaginationState, ColumnHeaderProps, ContentProps, CreateStoreOptions, DataTableClientProps, DataTableContextValue, DataTableServerProps, DataTableState, DataTableStore, DataTableStoreState, FilterCheckboxProps, FilterDatePickerProps, FilterFn, FilterFnMap, FilterOption, FilterSelectProps, FilterStrategy, FilterValue, InlineContentEntry, InlineContentProps, InlineContentRenderParams, ListPaginationProps, ListPanelProps, ListPanelSearchConfig, LoadingProps, PaginationProps, PaginationState, RowActionsProps, SearchProps, SelectionColumnOptions, ServerFetchArgs, ServerPaginationControls, ServerPaginationState, ServerTransformResult, StateAdapter, UseDataTableClientOptions, UseDataTableServerOptions, } from './types';

package/dist/components/features/data-table/types.d.ts

@@ -229,6 +229,8 @@ export interface ColumnHeaderProps<TData extends RowData, TValue> {
     readonly column: Column<DataTableFeatures, TData, TValue>;
     readonly title: string;
     readonly className?: string;
+    /** `'compact'` swaps in the dense uppercase header label + dual-caret sort icon used by list pages. Default `'default'` renders unchanged. */
+    readonly density?: 'default' | 'compact';
 }
 export interface RowActionsProps<TData extends RowData> {
     readonly row: Row<DataTableFeatures, TData>;
@@ -252,6 +254,10 @@ export interface ContentProps<TData extends RowData = Record<string, any>> {
     readonly bodyClassName?: string;
     readonly rowClassName?: string | ((row: Row<DataTableFeatures, TData>) => string);
     readonly cellClassName?: string | ((cell: Cell<DataTableFeatures, TData, unknown>) => string);
+    /** `'compact'` applies the sticky mist header, dense rows, and borderless dividers used by list pages. Default `'default'` renders unchanged. */
+    readonly density?: 'default' | 'compact';
+    /** Fires on row click. Skipped when the click lands on a link, button, checkbox, form control, or the row-actions menu, so nested interactive elements keep working. */
+    readonly onRowClick?: (row: TData) => void;
 }
 export interface PaginationProps {
     readonly pageSizes?: readonly number[];
@@ -282,6 +288,62 @@ export interface LoadingProps {
     readonly columns?: number;
     readonly className?: string;
 }
+/** Search-row config for {@link ListPanelProps}. */
+export interface ListPanelSearchConfig {
+    readonly placeholder?: string;
+    /**
+     * Set together with `onChange` to drive the search input externally (server-side
+     * search). When set, the built-in store search is not read — the panel renders
+     * whatever rows the caller already scoped.
+     */
+    readonly value?: string;
+    readonly onChange?: (value: string) => void;
+}
+export interface ListPanelProps<TData extends RowData = Record<string, any>> {
+    /** `false` hides the search row entirely. Defaults to the built-in (client-filtered) search. */
+    readonly search?: false | ListPanelSearchConfig;
+    /** Rendered to the right of the search input, inside the search row (e.g. a mobile filter trigger). */
+    readonly searchSlot?: ReactNode;
+    /** Rendered between the search row and the table (e.g. active-filter chips). */
+    readonly toolbar?: ReactNode;
+    readonly emptyMessage?: ReactNode;
+    /** Renders a skeleton in place of the table body. */
+    readonly loading?: boolean;
+    /** See {@link ContentProps.onRowClick}. */
+    readonly onRowClick?: (row: TData) => void;
+    /** Class on the panel's outer element. */
+    readonly className?: string;
+    /** Class on the card container (border/rounding/background) — merges with, and can override, the default chrome. */
+    readonly panelClassName?: string;
+    /**
+     * Forwarded to the underlying `DataTable.Content` (`density="compact"` already
+     * applied) — merges with, and can override, the compact preset. Use this for
+     * app-specific cell integrations (e.g. sizing a row-actions menu or a
+     * copy-button rendered inside a cell) that don't belong in the shared preset.
+     */
+    readonly tableClassName?: string;
+    readonly headerClassName?: string;
+    readonly headerRowClassName?: string;
+    readonly headerCellClassName?: string;
+    readonly bodyClassName?: string;
+    readonly rowClassName?: string | ((row: Row<DataTableFeatures, TData>) => string);
+    readonly cellClassName?: string | ((cell: Cell<DataTableFeatures, TData, unknown>) => string);
+}
+export interface ListPaginationProps {
+    readonly pageSizes?: readonly number[];
+    /** Appended to the row-count summary, e.g. `"1-20 of 42 organizations"`. */
+    readonly resourceLabel?: string;
+    /** Hides the whole control when there's one page or fewer. */
+    readonly hideWhenSinglePage?: boolean;
+    /** English defaults; pass translated strings to localize. */
+    readonly labels?: {
+        readonly rowsPerPage?: string;
+        readonly of?: string;
+        readonly previousPage?: string;
+        readonly nextPage?: string;
+    };
+    readonly className?: string;
+}
 export type FilterStrategy = 'checkbox' | 'select' | 'date-gte' | 'date-lte' | FilterFn;
 export interface DataTableStoreState<TData extends RowData> {
     readonly data: TData[];

package/dist/data-table/index.mjs

@@ -1,2 +1,2 @@
-import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "../data-table-CW3-xqkg.mjs";
+import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "../data-table-BOe7pdpJ.mjs";
 export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, DataTableColumnHeader, DataTableRowActions, createDataTableStore, createSelectionColumn, dataTableFeatures, resolvePath, rowMatchesSearch, useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableSorting, useNuqsAdapter };

package/dist/{data-table-CW3-xqkg.mjs → data-table-BOe7pdpJ.mjs}

@@ -12,7 +12,7 @@ import { t as CalendarDatePicker } from "./calendar-date-picker-DW31tDSa.mjs";
 import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { t as MultiSelect } from "./multi-select-CH8KERkt.mjs";
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, Search, X } from "lucide-react";
 import { createContext, memo, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
@@ -151,13 +151,54 @@ function withSelectionColumn(columns, options = {}) {
 }
 //#endregion
 //#region src/components/features/data-table/components/column-header.tsx
-function DataTableColumnHeader({ column, title, className }) {
+/** Figma `Datum App UI/Tables/Header/Dropdown` — two carets, one dimmed to show sort direction. */
+function CompactSortIcon({ sorted }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "text-muted-foreground relative h-[15px] w-[5px] shrink-0",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 5.28572 3.25",
+			fill: "none",
+			className: cn("absolute inset-[26.66%_6.67%_58.34%_7.62%] overflow-visible", sorted === "desc" ? "opacity-35" : "opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0.5 2.75L2.64286 0.5L4.78571 2.75",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 5.28572 3.25",
+			fill: "none",
+			className: cn("absolute inset-[61.66%_6.67%_23.34%_7.62%] overflow-visible", sorted === "asc" ? "opacity-35" : "opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0.5 0.5L2.64286 2.75L4.78571 0.5",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+function DataTableColumnHeader({ column, title, className, density = "default" }) {
+	const isCompact = density === "compact";
 	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
-		className: cn(className),
+		className: cn(isCompact && "text-xs leading-4 font-normal tracking-normal text-inherit uppercase", className),
 		"data-slot": "dt-column-header",
 		children: title
 	});
 	const sorted = column.getIsSorted();
+	const sortLabel = `Sort by ${title}${sorted === "asc" ? ", sorted ascending" : sorted === "desc" ? ", sorted descending" : ""}`;
+	if (isCompact) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", className),
+		"data-slot": "dt-column-header",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "hover:text-foreground inline-flex h-9 cursor-pointer items-center gap-2 text-xs leading-4 font-normal tracking-normal text-inherit uppercase",
+			onClick: column.getToggleSortingHandler(),
+			"aria-label": sortLabel,
+			children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(CompactSortIcon, { sorted })]
+		})
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center gap-2", className),
 		"data-slot": "dt-column-header",
@@ -165,7 +206,7 @@ function DataTableColumnHeader({ column, title, className }) {
 			type: "button",
 			className: "flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 cursor-pointer",
 			onClick: column.getToggleSortingHandler(),
-			"aria-label": `Sort by ${title}${sorted === "asc" ? ", sorted ascending" : sorted === "desc" ? ", sorted descending" : ""}`,
+			"aria-label": sortLabel,
 			children: [/* @__PURE__ */ jsx("span", { children: title }), sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }) : sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4" })]
 		})
 	});
@@ -870,10 +911,33 @@ function DataTableBulkActions({ children, className }) {
 }
 //#endregion
 //#region src/components/features/data-table/components/content.tsx
+/**
+* Per-slot class presets keyed by `density`. `'default'` is intentionally empty
+* so omitting `density` (or passing `'default'`) renders identically to before
+* this prop existed. Every preset only ever *adds* to what a caller passes via
+* the matching `*ClassName` prop — `cn(preset, callerClassName)` below lets the
+* caller's own classes win on conflict.
+*/
+const DENSITY_PRESETS = {
+	default: {},
+	compact: {
+		className: "overflow-auto [&>div]:overflow-visible",
+		headerClassName: "[&_tr]:border-0",
+		headerRowClassName: "border-0 hover:bg-transparent",
+		headerCellClassName: cn("sticky top-0 z-10 h-9 border-b border-border bg-table-header-background px-4", "text-xs leading-4 font-normal tracking-normal text-table-header-foreground uppercase"),
+		bodyClassName: "[&_tr:last-child]:border-b-0",
+		rowClassName: "border-0 hover:bg-muted/30",
+		cellClassName: "border-b border-border px-4 py-2 text-sm"
+	}
+};
 function resolveClassName(value, item) {
 	if (typeof value === "function") return value(item);
 	return value;
 }
+/** Clicks inside these should drive their own control, not the row's `onRowClick`. */
+function isInteractiveTarget(target) {
+	return target instanceof HTMLElement && target.closest("a, button, [role=\"checkbox\"], input, textarea, select, [data-slot=\"dt-row-actions\"]") != null;
+}
 function renderInlineContentRow(entry, colSpan, rows) {
 	return /* @__PURE__ */ jsx(TableRow, {
 		"data-slot": "dt-inline-content",
@@ -888,7 +952,7 @@ function renderInlineContentRow(entry, colSpan, rows) {
 		})
 	}, entry.id);
 }
-function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName }) {
+function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, density = "default", onRowClick }) {
 	const { rows, headerGroups, totalColumns } = useDataTableRows();
 	const { isLoading, columnCount } = useDataTableLoading();
 	const { pageSize } = useDataTablePagination();
@@ -896,38 +960,42 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 	const openInlineContents = useMemo(() => inlineContents.filter((e) => e.open), [inlineContents]);
 	const colSpan = totalColumns;
 	const skeletonColumns = totalColumns || columnCount || 5;
+	const preset = DENSITY_PRESETS[density];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("datum-ui-data-table", className),
+		className: cn("datum-ui-data-table", preset.className, className),
 		"data-slot": "dt",
 		style: { overflowX: "auto" },
 		children: /* @__PURE__ */ jsxs(Table, {
 			className: cn(tableClassName),
 			"data-slot": "dt-table",
 			children: [/* @__PURE__ */ jsx(TableHeader, {
-				className: cn(headerClassName),
+				className: cn(preset.headerClassName, headerClassName),
 				"data-slot": "dt-header",
 				children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
-					className: cn(headerRowClassName),
+					className: cn(preset.headerRowClassName, headerRowClassName),
 					"data-slot": "dt-header-row",
 					children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
-						className: cn(headerCellClassName),
+						className: cn(preset.headerCellClassName, headerCellClassName),
 						"data-slot": "dt-header-cell",
 						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
 					}, header.id))
 				}, headerGroup.id))
 			}), /* @__PURE__ */ jsxs(TableBody, {
-				className: cn(bodyClassName),
+				className: cn(preset.bodyClassName, bodyClassName),
 				"data-slot": "dt-body",
 				children: [openInlineContents.filter((e) => e.position === "top").map((entry) => renderInlineContentRow(entry, colSpan, rows)), rows.length > 0 ? rows.map((row) => {
 					const rowEntry = openInlineContents.find((e) => e.position === "row" && e.rowId === row.id);
 					if (rowEntry) return renderInlineContentRow(rowEntry, colSpan, rows);
 					return /* @__PURE__ */ jsx(TableRow, {
-						className: cn(resolveClassName(rowClassName, row)),
+						className: cn(preset.rowClassName, resolveClassName(rowClassName, row), onRowClick && "cursor-pointer"),
 						style: { transitionProperty: "none" },
 						"data-slot": "dt-row",
 						"data-state": row.getIsSelected() ? "selected" : void 0,
+						onClick: onRowClick ? (e) => {
+							if (!isInteractiveTarget(e.target)) onRowClick(row.original);
+						} : void 0,
 						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
-							className: cn(resolveClassName(cellClassName, cell)),
+							className: cn(preset.cellClassName, resolveClassName(cellClassName, cell)),
 							"data-slot": "dt-cell",
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
@@ -1002,6 +1070,175 @@ function DataTableInlineContent({ position, rowId, open, onClose, className, chi
 	return null;
 }
 //#endregion
+//#region src/components/features/data-table/components/list-pagination.tsx
+const DEFAULT_LIST_PAGE_SIZES = [
+	10,
+	20,
+	50,
+	100
+];
+const DEFAULT_LABELS = {
+	rowsPerPage: "Rows per page",
+	of: "of",
+	previousPage: "Previous page",
+	nextPage: "Next page"
+};
+/**
+* Compact list-page footer: `[pageSize ▾] Rows per page … 1-100 of N [resource]`
+* + joined prev/next buttons. Pass `labels` to localize — this package ships no
+* i18n of its own.
+*/
+function DataTableListPagination({ pageSizes = DEFAULT_LIST_PAGE_SIZES, resourceLabel, hideWhenSinglePage = false, labels, className }) {
+	const { canNextPage, canPrevPage, nextPage, prevPage, pageIndex, pageCount, pageSize, setPageSize, totalRows } = useDataTablePagination();
+	const t = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	if (hideWhenSinglePage && pageCount <= 1) return null;
+	const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+	const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-7 w-full items-center justify-between gap-3", className),
+		"data-slot": "dt-list-pagination",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsxs(Select, {
+				value: String(pageSize),
+				onValueChange: (value) => setPageSize(Number(value)),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					className: cn("border-border text-muted-foreground h-7 w-[4.5rem] gap-1.5 rounded-md px-2.5 py-0", "min-h-0 text-xs font-normal shadow-none"),
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pageSize) })
+				}), /* @__PURE__ */ jsx(SelectContent, {
+					side: "top",
+					children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(size),
+						children: size
+					}, size))
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs leading-4 whitespace-nowrap",
+				children: t.rowsPerPage
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs leading-4 whitespace-nowrap tabular-nums",
+				children: `${startRow}-${endRow} ${t.of} ${totalRows}${resourceLabel ? ` ${resourceLabel}` : ""}`
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center overflow-hidden rounded-md border",
+				children: [/* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "border-border size-7 rounded-none border-0 border-r shadow-none",
+					onClick: prevPage,
+					disabled: !canPrevPage,
+					"aria-label": t.previousPage,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
+				}), /* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "size-7 rounded-none border-0 shadow-none",
+					onClick: nextPage,
+					disabled: !canNextPage,
+					"aria-label": t.nextPage,
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/data-table/components/search.tsx
+function DataTableSearch({ placeholder = "Search...", debounceMs = 300, className, disabled }) {
+	const { search, setSearch } = useDataTableSearch();
+	const [inputValue, setInputValue] = useDebouncedSearchInput(search, setSearch, debounceMs);
+	return /* @__PURE__ */ jsx(Input, {
+		placeholder,
+		value: inputValue,
+		onChange: (e) => setInputValue(e.target.value),
+		className,
+		disabled,
+		"aria-label": placeholder,
+		"data-slot": "dt-search"
+	});
+}
+//#endregion
+//#region src/components/features/data-table/components/list-panel.tsx
+const LOADING_SKELETON_ROWS = 8;
+const SEARCH_INPUT_CLASS = "h-10 border-0 bg-transparent pl-9 shadow-none focus-visible:shadow-none focus-visible:ring-0";
+function ListPanelSkeleton({ columnCount }) {
+	const cols = Math.max(columnCount, 1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-h-0 flex-1 overflow-hidden",
+		"data-slot": "dt-list-panel-loading",
+		"aria-busy": "true",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-border bg-table-header-background flex h-9 items-center border-b px-4",
+			children: Array.from({ length: cols }, (_, i) => /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 px-2 first:pl-0 last:pr-0",
+				children: /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-16" })
+			}, i))
+		}), Array.from({ length: LOADING_SKELETON_ROWS }, (_, row) => /* @__PURE__ */ jsx("div", {
+			className: "border-border flex h-8 items-center border-b px-4",
+			"data-slot": "dt-list-panel-skeleton-row",
+			children: Array.from({ length: cols }, (_, col) => /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 px-2 first:pl-0 last:pr-0",
+				children: /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3", col % 3 === 0 ? "w-3/4" : col % 3 === 1 ? "w-1/2" : "w-2/3") })
+			}, col))
+		}, row))]
+	});
+}
+/**
+* Compact "list table" card: search row + dense sticky-header table, matching
+* staff-portal's Figma org-list pattern. Renders inside `DataTable.Client` /
+* `DataTable.Server`, same as every other `DataTable.*` part. Pagination is
+* deliberately not included — render `DataTable.ListPagination` as a sibling,
+* below the panel.
+*/
+function DataTableListPanel({ search = {}, searchSlot, toolbar, emptyMessage, loading = false, onRowClick, className, panelClassName, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName }) {
+	const { totalColumns } = useDataTableRows();
+	const showSearch = search !== false;
+	const isControlledSearch = showSearch && (search.value !== void 0 || search.onChange !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-card text-card-foreground border-card-border flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border", panelClassName, className),
+		"data-slot": "dt-list-panel",
+		children: [
+			showSearch && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1 border-b pr-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(Search, {
+						className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2",
+						"aria-hidden": "true"
+					}), isControlledSearch ? /* @__PURE__ */ jsx(Input, {
+						placeholder: search.placeholder,
+						value: search.value,
+						onChange: (e) => search.onChange?.(e.target.value),
+						className: SEARCH_INPUT_CLASS
+					}) : /* @__PURE__ */ jsx(DataTableSearch, {
+						placeholder: search.placeholder,
+						className: SEARCH_INPUT_CLASS
+					})]
+				}), searchSlot]
+			}),
+			toolbar,
+			loading ? /* @__PURE__ */ jsx(ListPanelSkeleton, { columnCount: totalColumns }) : /* @__PURE__ */ jsx(DataTableContent, {
+				density: "compact",
+				emptyMessage,
+				onRowClick,
+				className: "min-h-0 flex-1",
+				tableClassName,
+				headerClassName,
+				headerRowClassName,
+				headerCellClassName,
+				bodyClassName,
+				rowClassName,
+				cellClassName
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/features/data-table/components/loading.tsx
 function DataTableLoading({ rows = 5, columns = 4, className }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -1135,21 +1372,6 @@ function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
 	});
 }
 //#endregion
-//#region src/components/features/data-table/components/search.tsx
-function DataTableSearch({ placeholder = "Search...", debounceMs = 300, className, disabled }) {
-	const { search, setSearch } = useDataTableSearch();
-	const [inputValue, setInputValue] = useDebouncedSearchInput(search, setSearch, debounceMs);
-	return /* @__PURE__ */ jsx(Input, {
-		placeholder,
-		value: inputValue,
-		onChange: (e) => setInputValue(e.target.value),
-		className,
-		disabled,
-		"aria-label": placeholder,
-		"data-slot": "dt-search"
-	});
-}
-//#endregion
 //#region src/components/features/data-table/hooks/use-data-table-client.ts
 /**
 * Creates a TanStack Table instance from an existing store.
@@ -1622,6 +1844,8 @@ const DataTable = {
 	InlineContent: DataTableInlineContent,
 	ColumnHeader: DataTableColumnHeader,
 	Pagination: DataTablePagination,
+	ListPanel: DataTableListPanel,
+	ListPagination: DataTableListPagination,
 	Search: DataTableSearch,
 	RowActions: DataTableRowActions,
 	BulkActions: DataTableBulkActions,

package/dist/grouped-table/index.mjs

@@ -1,2 +1,2 @@
-import { t as GroupedTable } from "../grouped-table-DKUsSHpe.mjs";
+import { t as GroupedTable } from "../grouped-table-9nyHKSsK.mjs";
 export { GroupedTable };

package/dist/{grouped-table-DKUsSHpe.mjs → grouped-table-9nyHKSsK.mjs}

@@ -6,7 +6,7 @@ import { t as useControllableState } from "./use-controllable-state-Dna7u3r9.mjs
 import { Skeleton } from "./skeleton/index.mjs";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table/index.mjs";
 import { n as EASE } from "./motion-DvGRWdsm.mjs";
-import { f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, m as DataTableRowActions, p as dataTableFeatures } from "./data-table-CW3-xqkg.mjs";
+import { f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, m as DataTableRowActions, p as dataTableFeatures } from "./data-table-BOe7pdpJ.mjs";
 import { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { ChevronRight, Search, X } from "lucide-react";

package/dist/index.mjs

@@ -55,7 +55,7 @@ import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider }
 import { a as formatJson, c as isValidYaml, d as CodeEditor, i as CodeEditorTabs, l as jsonToYaml, n as jsonSchema, o as formatYaml, r as yamlSchema, s as isValidJson, t as createCodeEditorSchema, u as yamlToJson } from "./types-agDpVXBG.mjs";
 import { t as toast } from "./toast-BUPlDkN3.mjs";
 import { n as Toaster, t as useToast } from "./use-toast-Bpq0yJIT.mjs";
-import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "./data-table-CW3-xqkg.mjs";
+import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "./data-table-BOe7pdpJ.mjs";
 import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { n as useDebouncedSearchInput, t as DEFAULT_SEARCH_DEBOUNCE_MS } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { t as MultiSelect } from "./multi-select-CH8KERkt.mjs";
@@ -71,7 +71,7 @@ import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { t as TimePicker } from "./time-picker-BzNSUazl.mjs";
 import { t as Transfer } from "./transfer-DsshYgIk.mjs";
 import { a as getResponsiveValue, c as GRID_COLUMNS, d as RESPONSIVE_MAP, i as getGutter, l as GRID_PREFIX, n as Row, o as registerMediaQuery, r as RowContext, s as GRID_BREAKPOINTS, t as Col, u as RESPONSIVE_ARRAY } from "./col-BYGWTB4j.mjs";
-import { t as GroupedTable } from "./grouped-table-DKUsSHpe.mjs";
+import { t as GroupedTable } from "./grouped-table-9nyHKSsK.mjs";
 import { t as InputNumber } from "./input-number-TXmW-X9o.mjs";
 import { a as logoStyles, i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "./logo-text-Dpm5O6Kg.mjs";
 import { t as Logo } from "./logo-C3FxD7jb.mjs";

package/dist/styles/themes/alpha.css

@@ -118,6 +118,9 @@ Light-mode tokens on :root, dark-mode tokens on .dark
   --table-accent: var(--glacier-mist-800);
   --table-cell: hsl(0 0% 100%);
   --table-cell-hover: var(--glacier-mist-700);
+  /* Sticky "mist" list-table header (DataTable.Content density="compact" / DataTable.ListPanel) */
+  --table-header-background: var(--glacier-mist-700);
+  --table-header-foreground: color-mix(in oklch, var(--midnight-fjord) 60%, transparent);
 
   /* Badge */
   --badge-primary: var(--primary);
@@ -320,6 +323,8 @@ Light-mode tokens on :root, dark-mode tokens on .dark
   --table-accent: var(--app-dark-utility-1);
   --table-cell: var(--midnight-fjord);
   --table-cell-hover: var(--app-dark-utility-1);
+  --table-header-background: var(--muted);
+  --table-header-foreground: var(--muted-foreground);
 
   /* Badge */
   --badge-primary: var(--primary);
@@ -425,6 +430,15 @@ TAILWIND CUSTOM UTILITIES FOR THEME
   /* Custom base shadow */
   --shadow: 0 2px 4px 2px rgba(12, 29, 49, 0.03);
   --shadow-tooltip: 0 4px 16px 0 rgba(0, 0, 0, 0.05), 1px 8px 8px 0 rgba(0, 0, 0, 0.02);
+  /**
+   * Section-card shadow (Figma org-overview cards). Aliases the base `--shadow`
+   * rather than a standalone value — applies identically in light and dark since
+   * `--shadow` itself isn't theme-split. Consumers reference it directly via
+   * `shadow-(--section-card-shadow)` (e.g. staff-portal's `SECTION_CARD_CHROME`),
+   * which previously pointed at an undefined custom property and rendered no
+   * shadow at all.
+   */
+  --section-card-shadow: var(--shadow);
 
   --color-tertiary: var(--tertiary);
   --color-tertiary-foreground: var(--tertiary-foreground);
@@ -445,6 +459,8 @@ TAILWIND CUSTOM UTILITIES FOR THEME
   --color-table-accent: var(--table-accent);
   --color-table-cell: var(--table-cell);
   --color-table-cell-hover: var(--table-cell-hover);
+  --color-table-header-background: var(--table-header-background);
+  --color-table-header-foreground: var(--table-header-foreground);
 
   --color-dialog-overlay: var(--dialog-overlay);
   --color-dialog-border: var(--dialog-border);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"