@siyahi/ui 0.0.0-stage → 0.1.0-next.4

package/dist/components/registry/niko-table/core/data-table-root.d.ts

@@ -0,0 +1,62 @@
+import { DataTableFeatures } from "../lib/data-table-features.js";
+import { DataTableColumns, GlobalFilter } from "../types/index.js";
+import React from "react";
+import { ColumnFiltersState, ColumnOrderState, ColumnVisibilityState, ExpandedState, GroupingState, PaginationState, ReactTable, RowData, RowSelectionState, SortingState, TableOptions, Updater } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-root.d.ts
+export interface DataTableConfig {
+  enablePagination?: boolean;
+  enableFilters?: boolean;
+  enableSorting?: boolean;
+  enableRowSelection?: boolean;
+  enableMultiSort?: boolean;
+  enableGrouping?: boolean;
+  enableExpanding?: boolean;
+  /**
+   * Enable drag-to-resize column widths (opt-in; off by default so existing
+   * tables are unaffected). When on, columns render at `column.getSize()` and a
+   * resize handle appears on each resizable header's right edge. Drop
+   * `<DataTableColumnResize />` inside the root to enable via feature detection.
+   * Double-click a grip to autosize; columns opt out with `enableResizing: false`.
+   */
+  enableColumnResizing?: boolean;
+  /**
+   * When grouping is active, how grouped columns are placed in the column flow.
+   * TanStack default: `'reorder'` (move grouped columns to the start).
+   * `'remove'` hides them; `false` leaves them in place.
+   */
+  groupedColumnMode?: false | "reorder" | "remove";
+  manualSorting?: boolean;
+  manualPagination?: boolean;
+  manualFiltering?: boolean;
+  pageCount?: number;
+  initialPageSize?: number;
+  initialPageIndex?: number;
+  autoResetPageIndex?: boolean;
+  autoResetExpanded?: boolean;
+}
+interface TableRootProps<TData extends RowData> extends Omit<Partial<TableOptions<DataTableFeatures, TData>>, "columns" | "data" | "getRowId" | "key"> {
+  table?: ReactTable<DataTableFeatures, TData>;
+  columns?: DataTableColumns<TData>;
+  data?: TData[];
+  children: React.ReactNode;
+  className?: string;
+  config?: DataTableConfig;
+  getRowId?: (originalRow: TData, index: number) => string;
+  isLoading?: boolean;
+  onGlobalFilterChange?: (value: GlobalFilter) => void;
+  onPaginationChange?: (updater: Updater<PaginationState>) => void;
+  onSortingChange?: (updater: Updater<SortingState>) => void;
+  onColumnVisibilityChange?: (updater: Updater<ColumnVisibilityState>) => void;
+  onColumnFiltersChange?: (updater: Updater<ColumnFiltersState>) => void;
+  onRowSelectionChange?: (updater: Updater<RowSelectionState>) => void;
+  onExpandedChange?: (updater: Updater<ExpandedState>) => void;
+  onGroupingChange?: (updater: Updater<GroupingState>) => void;
+  onColumnOrderChange?: (updater: Updater<ColumnOrderState>) => void;
+  onRowSelection?: (selectedRows: TData[]) => void;
+}
+export declare function DataTableRoot<TData extends RowData>({ table: externalTable, columns, data, children, className, isLoading, ...rest }: TableRootProps<TData>): React.JSX.Element;
+export declare namespace DataTableRoot {
+  var displayName: string;
+}
+//#endregion
+export {};

package/dist/components/registry/niko-table/core/data-table-root.js

@@ -0,0 +1,406 @@
+import { TooltipProvider } from "../../../ui/tooltip.js";
+import { cn } from "../../../../lib/utils.js";
+import { FILTER_VARIANTS, SYSTEM_COLUMN_IDS, SYSTEM_COLUMN_ID_LIST } from "../lib/constants.js";
+import { DataTableProvider } from "./data-table-context.js";
+import { detectFeaturesFromChildren } from "../config/feature-detection.js";
+import { globalFilter } from "../lib/filter-functions.js";
+import { features } from "../lib/data-table-features.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTable } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-root.tsx
+/**
+* Delay (ms) before a tooltip inside a data table opens. Deliberately long so
+* header help/sort tooltips don't pop while the assigner is scanning or
+* clicking through sorts — they only appear on a considered hover. Scopes to
+* the table via a nested `TooltipProvider`, so action-button tooltips outside
+* the table keep their own (faster) provider delay.
+*/
+const TABLE_TOOLTIP_DELAY_MS = 1e3;
+/**
+* Dual-generation tooltip delay: Radix's provider reads `delayDuration`,
+* Base UI's reads `delay`, and each ignores the other prop. Spread as an
+* object (not literal attributes) so it typechecks against both shadcn
+* generations and the CLI's Base UI codemod leaves it alone.
+*/
+const tooltipProviderDelay = {
+	delayDuration: TABLE_TOOLTIP_DELAY_MS,
+	delay: TABLE_TOOLTIP_DELAY_MS
+};
+function DataTableRootInternal({ columns, data, children, className, config, getRowId, isLoading, onGlobalFilterChange, onPaginationChange, onSortingChange, onColumnVisibilityChange, onColumnFiltersChange, onRowSelectionChange, onExpandedChange, onGroupingChange, onColumnOrderChange, onColumnPinningChange, onColumnSizingChange, onRowSelection, state: restState, initialState: restInitialState, globalFilterFn: restGlobalFilterFn, manualGrouping: manualGroupingProp, manualExpanding: manualExpandingProp, ...passthroughTableOptions }) {
+	const hasSelectColumn = React.useMemo(() => columns?.some((col) => col.id === SYSTEM_COLUMN_IDS.SELECT) ?? false, [columns]);
+	const hasExpandColumn = React.useMemo(() => columns?.some((col) => col.id === SYSTEM_COLUMN_IDS.EXPAND || col.meta && "expandedContent" in col.meta && col.meta.expandedContent) ?? false, [columns]);
+	const finalConfig = React.useMemo(() => ({
+		enablePagination: config?.enablePagination,
+		enableFilters: config?.enableFilters,
+		enableSorting: config?.enableSorting,
+		enableRowSelection: config?.enableRowSelection ?? hasSelectColumn,
+		enableMultiSort: config?.enableMultiSort,
+		enableGrouping: config?.enableGrouping,
+		enableExpanding: config?.enableExpanding ?? hasExpandColumn,
+		enableColumnResizing: config?.enableColumnResizing,
+		groupedColumnMode: config?.groupedColumnMode,
+		manualSorting: config?.manualSorting,
+		manualPagination: config?.manualPagination,
+		manualFiltering: config?.manualFiltering,
+		pageCount: config?.pageCount,
+		initialPageSize: config?.initialPageSize,
+		initialPageIndex: config?.initialPageIndex,
+		autoResetPageIndex: config?.autoResetPageIndex ?? false,
+		autoResetExpanded: config?.autoResetExpanded ?? false
+	}), [
+		config?.enablePagination,
+		config?.enableFilters,
+		config?.enableSorting,
+		config?.enableRowSelection,
+		hasSelectColumn,
+		config?.enableMultiSort,
+		config?.enableGrouping,
+		config?.enableExpanding,
+		config?.enableColumnResizing,
+		config?.groupedColumnMode,
+		hasExpandColumn,
+		config?.manualSorting,
+		config?.manualPagination,
+		config?.manualFiltering,
+		config?.pageCount,
+		config?.initialPageSize,
+		config?.initialPageIndex,
+		config?.autoResetPageIndex,
+		config?.autoResetExpanded
+	]);
+	const detectedFeaturesRef = React.useRef(null);
+	if (detectedFeaturesRef.current === null) detectedFeaturesRef.current = detectFeaturesFromChildren(children, columns);
+	const detectFeatures = React.useMemo(() => {
+		const detectedFeatures = detectedFeaturesRef.current ?? {};
+		return {
+			enablePagination: finalConfig.enablePagination ?? detectedFeatures.enablePagination ?? false,
+			enableFilters: finalConfig.enableFilters ?? detectedFeatures.enableFilters ?? false,
+			enableRowSelection: finalConfig.enableRowSelection ?? detectedFeatures.enableRowSelection ?? false,
+			enableSorting: finalConfig.enableSorting ?? detectedFeatures.enableSorting ?? false,
+			enableMultiSort: finalConfig.enableMultiSort ?? detectedFeatures.enableMultiSort ?? true,
+			enableGrouping: finalConfig.enableGrouping ?? detectedFeatures.enableGrouping ?? false,
+			enableExpanding: finalConfig.enableExpanding ?? detectedFeatures.enableExpanding ?? finalConfig.enableGrouping ?? detectedFeatures.enableGrouping ?? false,
+			enableColumnResizing: finalConfig.enableColumnResizing ?? detectedFeatures.enableColumnResizing ?? false,
+			manualSorting: finalConfig.manualSorting ?? detectedFeatures.manualSorting ?? false,
+			manualPagination: finalConfig.manualPagination ?? detectedFeatures.manualPagination ?? false,
+			manualFiltering: finalConfig.manualFiltering ?? detectedFeatures.manualFiltering ?? false,
+			pageCount: finalConfig.pageCount ?? detectedFeatures.pageCount
+		};
+	}, [finalConfig]);
+	const [globalFilter$1, setGlobalFilter] = React.useState(restInitialState?.globalFilter ?? "");
+	const [rowSelection, setRowSelection] = React.useState(restInitialState?.rowSelection ?? {});
+	const [columnVisibility, setColumnVisibility] = React.useState(restInitialState?.columnVisibility ?? {});
+	const [columnFilters, setColumnFilters] = React.useState(restInitialState?.columnFilters ?? []);
+	const [sorting, setSorting] = React.useState(restInitialState?.sorting ?? []);
+	const [expanded, setExpanded] = React.useState(restInitialState?.expanded ?? {});
+	const [grouping, setGrouping] = React.useState(restInitialState?.grouping ?? []);
+	const [columnPinning, setColumnPinning] = React.useState({
+		start: restInitialState?.columnPinning?.start ?? [],
+		end: restInitialState?.columnPinning?.end ?? []
+	});
+	const [columnOrder, setColumnOrder] = React.useState(restInitialState?.columnOrder ?? []);
+	const [columnSizing, setColumnSizing] = React.useState(restInitialState?.columnSizing ?? {});
+	const [pagination, setPagination] = React.useState({
+		pageIndex: finalConfig.initialPageIndex ?? restInitialState?.pagination?.pageIndex ?? 0,
+		pageSize: finalConfig.initialPageSize ?? restInitialState?.pagination?.pageSize ?? 10
+	});
+	const isMountedRef = React.useRef(true);
+	React.useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	const handleGlobalFilterChange = React.useCallback((value) => {
+		if (isMountedRef.current) setGlobalFilter(value);
+		onGlobalFilterChange?.(value);
+	}, [onGlobalFilterChange]);
+	const rowIdMap = React.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		data?.forEach((row, idx) => {
+			const rowId = getRowId?.(row, idx) ?? row.id?.toString() ?? String(idx);
+			map.set(rowId, row);
+		});
+		return map;
+	}, [data, getRowId]);
+	const handleRowSelectionChange = React.useCallback((valueFn) => {
+		if (!isMountedRef.current) return;
+		if (typeof valueFn === "function") setRowSelection((prev) => valueFn(prev));
+		else setRowSelection(valueFn);
+	}, []);
+	/**
+	* PERFORMANCE: Stable mount-guarded fallback setters
+	*
+	* WHY: Inline `(u) => isMounted && setX(u)` closures inside `tableOptions` get
+	* recreated on every memo invalidation, and the 6 setX refs added noise to the
+	* dep array (state setters are already stable by React contract).
+	*
+	* IMPACT: tableOptions memo no longer depends on 6 setters; fallback handlers
+	* keep referential identity across renders.
+	*
+	* WHAT: Hoists each fallback to a `useCallback([])`. Mount-guard preserved so
+	* StrictMode-unmounted fibers don't receive setState calls.
+	*/
+	const handleSortingChange = React.useCallback((u) => {
+		if (isMountedRef.current) setSorting(u);
+	}, []);
+	const handleColumnFiltersChange = React.useCallback((u) => {
+		if (isMountedRef.current) setColumnFilters(u);
+	}, []);
+	const handleColumnVisibilityChange = React.useCallback((u) => {
+		if (isMountedRef.current) setColumnVisibility(u);
+	}, []);
+	const handleColumnPinningChange = React.useCallback((updater) => {
+		if (!isMountedRef.current) return;
+		setColumnPinning((prev) => {
+			const next = typeof updater === "function" ? updater(prev) : updater;
+			return {
+				start: next.start ?? [],
+				end: next.end ?? []
+			};
+		});
+	}, []);
+	const handleColumnOrderChange = React.useCallback((u) => {
+		if (isMountedRef.current) setColumnOrder(u);
+	}, []);
+	const handleColumnSizingChange = React.useCallback((u) => {
+		if (isMountedRef.current) setColumnSizing(u);
+	}, []);
+	const handleExpandedChange = React.useCallback((u) => {
+		if (isMountedRef.current) setExpanded(u);
+	}, []);
+	const handleGroupingChange = React.useCallback((u) => {
+		if (isMountedRef.current) setGrouping(u);
+	}, []);
+	const handlePaginationChange = React.useCallback((u) => {
+		if (isMountedRef.current) setPagination(u);
+	}, []);
+	const skipInitialRowSelectionRef = React.useRef(true);
+	React.useEffect(() => {
+		if (!isMountedRef.current) return;
+		if (skipInitialRowSelectionRef.current) {
+			skipInitialRowSelectionRef.current = false;
+			return;
+		}
+		if (!onRowSelection) return;
+		onRowSelection(Object.keys(rowSelection).filter((key) => rowSelection[key]).map((key) => rowIdMap.get(key)).filter((row) => row !== void 0));
+	}, [
+		rowSelection,
+		rowIdMap,
+		onRowSelection
+	]);
+	/**
+	* Auto-apply filterFn based on meta.variant if not explicitly provided
+	* This allows developers to set variant in meta and get the right filterFn automatically
+	*/
+	const processedColumns = React.useMemo(() => {
+		return columns.map((col) => {
+			if (col.filterFn) return col;
+			const variant = (col.meta ?? {}).variant;
+			let autoFilterFn;
+			if (variant === FILTER_VARIANTS.RANGE || variant === FILTER_VARIANTS.NUMBER) autoFilterFn = "numberRange";
+			else if (variant === FILTER_VARIANTS.DATE || variant === FILTER_VARIANTS.DATE_RANGE) autoFilterFn = "dateRange";
+			if (autoFilterFn) return {
+				...col,
+				filterFn: autoFilterFn
+			};
+			return col;
+		});
+	}, [columns]);
+	const defaultColumn = React.useMemo(() => ({
+		enableSorting: detectFeatures.enableSorting ?? false,
+		enableHiding: true,
+		filterFn: "extended",
+		size: void 0,
+		...detectFeatures.enableColumnResizing ? { minSize: 40 } : {}
+	}), [detectFeatures.enableColumnResizing, detectFeatures.enableSorting]);
+	const controlledSorting = restState?.sorting ?? sorting;
+	const controlledColumnVisibility = restState?.columnVisibility ?? columnVisibility;
+	const controlledRowSelection = restState?.rowSelection ?? rowSelection;
+	const controlledColumnFilters = restState?.columnFilters ?? columnFilters;
+	const controlledGlobalFilter = restState?.globalFilter !== void 0 ? restState.globalFilter : globalFilter$1;
+	const controlledColumnPinning = restState?.columnPinning ?? columnPinning;
+	const controlledColumnOrder = restState?.columnOrder ?? columnOrder;
+	const controlledColumnSizing = restState?.columnSizing ?? columnSizing;
+	const controlledExpanded = restState?.expanded ?? expanded;
+	const controlledGrouping = restState?.grouping ?? grouping;
+	const controlledPagination = restState?.pagination ?? pagination;
+	const finalColumnPinning = React.useMemo(() => {
+		const getColumnId = (col) => {
+			if (col.id) return col.id;
+			if ("accessorKey" in col && typeof col.accessorKey === "string") return col.accessorKey;
+		};
+		const firstDataCol = columns.find((col) => {
+			const id = getColumnId(col);
+			return id && !SYSTEM_COLUMN_ID_LIST.includes(id);
+		});
+		if (!firstDataCol) return controlledColumnPinning;
+		const firstDataColId = getColumnId(firstDataCol);
+		if (!firstDataColId) return controlledColumnPinning;
+		const isPinnedStart = controlledColumnPinning.start?.includes(firstDataColId);
+		const isPinnedEnd = controlledColumnPinning.end?.includes(firstDataColId);
+		if (!isPinnedStart && !isPinnedEnd) return controlledColumnPinning;
+		const start = [...controlledColumnPinning.start ?? []];
+		const end = [...controlledColumnPinning.end ?? []];
+		const systemColsPresent = [];
+		if (hasSelectColumn) systemColsPresent.push(SYSTEM_COLUMN_IDS.SELECT);
+		if (hasExpandColumn) systemColsPresent.push(SYSTEM_COLUMN_IDS.EXPAND);
+		const cleanStart = start.filter((id) => !SYSTEM_COLUMN_ID_LIST.includes(id));
+		const cleanEnd = end.filter((id) => !SYSTEM_COLUMN_ID_LIST.includes(id));
+		if (isPinnedStart) return {
+			start: [...systemColsPresent, ...cleanStart],
+			end: cleanEnd
+		};
+		if (isPinnedEnd) return {
+			start: cleanStart,
+			end: [...systemColsPresent, ...cleanEnd]
+		};
+		return controlledColumnPinning;
+	}, [
+		controlledColumnPinning,
+		columns,
+		hasSelectColumn,
+		hasExpandColumn
+	]);
+	const tableOptions = React.useMemo(() => ({
+		...passthroughTableOptions,
+		features,
+		data,
+		columns: processedColumns,
+		defaultColumn,
+		state: {
+			...restState,
+			sorting: controlledSorting,
+			columnVisibility: controlledColumnVisibility,
+			columnPinning: finalColumnPinning,
+			columnOrder: controlledColumnOrder,
+			columnSizing: controlledColumnSizing,
+			rowSelection: controlledRowSelection,
+			columnFilters: controlledColumnFilters,
+			globalFilter: controlledGlobalFilter,
+			expanded: controlledExpanded,
+			grouping: controlledGrouping,
+			pagination: controlledPagination
+		},
+		enableColumnResizing: detectFeatures.enableColumnResizing,
+		columnResizeMode: "onEnd",
+		onColumnSizingChange: onColumnSizingChange ?? handleColumnSizingChange,
+		enableRowSelection: detectFeatures.enableRowSelection,
+		enableFilters: detectFeatures.enableFilters,
+		enableSorting: detectFeatures.enableSorting,
+		enableMultiSort: detectFeatures.enableMultiSort,
+		enableGrouping: detectFeatures.enableGrouping,
+		enableExpanding: detectFeatures.enableExpanding || detectFeatures.enableGrouping,
+		groupedColumnMode: finalConfig.groupedColumnMode ?? "reorder",
+		manualSorting: detectFeatures.manualSorting || !detectFeatures.enableSorting,
+		manualPagination: detectFeatures.manualPagination || !detectFeatures.enablePagination,
+		manualFiltering: detectFeatures.manualFiltering || !detectFeatures.enableFilters,
+		manualGrouping: manualGroupingProp ?? !detectFeatures.enableGrouping,
+		manualExpanding: manualExpandingProp ?? !(detectFeatures.enableExpanding || detectFeatures.enableGrouping),
+		autoResetPageIndex: finalConfig.autoResetPageIndex,
+		autoResetExpanded: finalConfig.autoResetExpanded,
+		onGlobalFilterChange: handleGlobalFilterChange,
+		onRowSelectionChange: onRowSelectionChange ?? handleRowSelectionChange,
+		onSortingChange: onSortingChange ?? handleSortingChange,
+		onColumnFiltersChange: onColumnFiltersChange ?? handleColumnFiltersChange,
+		onColumnVisibilityChange: onColumnVisibilityChange ?? handleColumnVisibilityChange,
+		onColumnPinningChange: onColumnPinningChange ?? handleColumnPinningChange,
+		onColumnOrderChange: onColumnOrderChange ?? handleColumnOrderChange,
+		onExpandedChange: onExpandedChange ?? handleExpandedChange,
+		onGroupingChange: onGroupingChange ?? handleGroupingChange,
+		onPaginationChange: onPaginationChange ?? handlePaginationChange,
+		globalFilterFn: restGlobalFilterFn ?? globalFilter,
+		getRowId: getRowId ?? ((originalRow, index) => {
+			const rowWithId = originalRow;
+			if (rowWithId.id !== void 0 && rowWithId.id !== null) return String(rowWithId.id);
+			return String(index);
+		}),
+		pageCount: (() => {
+			if (!detectFeatures.manualPagination) return void 0;
+			return finalConfig.pageCount !== void 0 ? finalConfig.pageCount : detectFeatures.pageCount !== void 0 ? detectFeatures.pageCount : -1;
+		})()
+	}), [
+		restState,
+		restGlobalFilterFn,
+		data,
+		processedColumns,
+		defaultColumn,
+		detectFeatures,
+		finalConfig,
+		handleGlobalFilterChange,
+		onRowSelectionChange,
+		handleRowSelectionChange,
+		onSortingChange,
+		handleSortingChange,
+		onColumnFiltersChange,
+		handleColumnFiltersChange,
+		onColumnVisibilityChange,
+		handleColumnVisibilityChange,
+		onColumnPinningChange,
+		handleColumnPinningChange,
+		onColumnOrderChange,
+		handleColumnOrderChange,
+		onColumnSizingChange,
+		handleColumnSizingChange,
+		onExpandedChange,
+		handleExpandedChange,
+		onGroupingChange,
+		handleGroupingChange,
+		onPaginationChange,
+		handlePaginationChange,
+		getRowId,
+		manualGroupingProp,
+		manualExpandingProp,
+		controlledSorting,
+		controlledColumnVisibility,
+		controlledRowSelection,
+		controlledColumnFilters,
+		controlledGlobalFilter,
+		controlledColumnOrder,
+		controlledColumnSizing,
+		controlledExpanded,
+		controlledGrouping,
+		controlledPagination,
+		finalColumnPinning
+	]);
+	const table = useTable(tableOptions);
+	return /* @__PURE__ */ jsx(DataTableProvider, {
+		table,
+		columns: processedColumns,
+		isLoading,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			...tooltipProviderDelay,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("w-full min-w-0 space-y-4", className),
+				children
+			})
+		})
+	});
+}
+function DataTableRoot({ table: externalTable, columns, data, children, className, isLoading, ...rest }) {
+	if (externalTable) return /* @__PURE__ */ jsx(DataTableProvider, {
+		table: externalTable,
+		columns,
+		isLoading,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			...tooltipProviderDelay,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("w-full min-w-0 space-y-4", className),
+				children
+			})
+		})
+	});
+	if (!columns || !data) throw new Error("DataTableRoot: Either provide a 'table' prop or both 'columns' and 'data' props");
+	return /* @__PURE__ */ jsx(DataTableRootInternal, {
+		columns,
+		data,
+		className,
+		isLoading,
+		...rest,
+		children
+	});
+}
+DataTableRoot.displayName = "DataTableRoot";
+//#endregion
+export { DataTableRoot };

package/dist/components/registry/niko-table/core/data-table-structure.d.ts

@@ -0,0 +1,153 @@
+import { ScrollEvent } from "../lib/create-scroll-handler.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-structure.d.ts
+export interface DataTableHeaderProps {
+  className?: string;
+  /**
+   * Makes the header sticky at the top when scrolling.
+   * @default true
+   */
+  sticky?: boolean;
+}
+export declare const DataTableHeader: React.MemoExoticComponent<({ className, sticky }: DataTableHeaderProps) => React.JSX.Element | null>;
+export interface DataTableBodyProps<TData extends RowData> {
+  children?: React.ReactNode;
+  className?: string;
+  onScroll?: (event: ScrollEvent) => void;
+  onScrolledTop?: () => void;
+  onScrolledBottom?: () => void;
+  scrollThreshold?: number;
+  /**
+   * Click is dispatched per-row from each cell's onClick. The event's
+   * `currentTarget` is the `<td>` cell — typed as `HTMLElement` to
+   * stay consistent with the virtualized variants (which delegate on
+   * `<tbody>`). Consumers needing the row element can
+   * `event.target.closest("tr[data-row-id]")`.
+   */
+  onRowClick?: (row: TData, event: React.MouseEvent<HTMLElement>) => void;
+  /**
+   * Return a per-row memo invalidation key. When this key changes for a
+   * specific row, only that row re-renders.
+   */
+  getRowMemoKey?: (row: TData) => string;
+  /**
+   * Attach a native right-click context menu to each row. Return the menu
+   * items (`ContextMenuItem`, `ContextMenuSeparator`, `ContextMenuSub`, …)
+   * for the given row, or `null` to give that row no menu. The popup shell
+   * and portalling are handled internally.
+   *
+   * Wrap the callback in `useCallback` so memoized rows don't re-render.
+   */
+  renderRowContextMenu?: (row: TData) => React.ReactNode;
+}
+export declare function DataTableBody<TData extends RowData>({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold, onRowClick, getRowMemoKey, renderRowContextMenu }: DataTableBodyProps<TData>): React.JSX.Element;
+export declare namespace DataTableBody {
+  var displayName: string;
+}
+export interface DataTableEmptyBodyProps {
+  children?: React.ReactNode;
+  colSpan?: number;
+  className?: string;
+}
+/**
+ * Empty state component for data tables.
+ * Use composition pattern with DataTableEmpty* components for full customization.
+ *
+ * @example
+ * <DataTableEmptyBody>
+ *   <DataTableEmptyIcon>
+ *     <PackageOpen className="size-12" />
+ *   </DataTableEmptyIcon>
+ *   <DataTableEmptyMessage>
+ *     <DataTableEmptyTitle>No products found</DataTableEmptyTitle>
+ *     <DataTableEmptyDescription>
+ *       Get started by adding your first product
+ *     </DataTableEmptyDescription>
+ *   </DataTableEmptyMessage>
+ *   <DataTableEmptyFilteredMessage>
+ *     No matches found
+ *   </DataTableEmptyFilteredMessage>
+ *   <DataTableEmptyActions>
+ *     <Button onClick={handleAdd}>Add Product</Button>
+ *   </DataTableEmptyActions>
+ * </DataTableEmptyBody>
+ */
+export declare function DataTableEmptyBody({ children, colSpan, className }: DataTableEmptyBodyProps): React.JSX.Element | null;
+export declare namespace DataTableEmptyBody {
+  var displayName: string;
+}
+export interface DataTableSkeletonProps {
+  children?: React.ReactNode;
+  colSpan?: number;
+  /**
+   * Number of skeleton rows to display.
+   * @default 5
+   * @recommendation Set this to match your page size for better UX (e.g., if page size is 10, set rows={10})
+   */
+  rows?: number;
+  className?: string;
+  cellClassName?: string;
+  skeletonClassName?: string;
+}
+export declare function DataTableSkeleton({ children, colSpan, rows, className, cellClassName, skeletonClassName }: DataTableSkeletonProps): React.JSX.Element | null;
+export declare namespace DataTableSkeleton {
+  var displayName: string;
+}
+export interface DataTableLoadingProps {
+  children?: React.ReactNode;
+  colSpan?: number;
+  className?: string;
+}
+export declare function DataTableLoading({ children, colSpan, className }: DataTableLoadingProps): React.JSX.Element | null;
+export declare namespace DataTableLoading {
+  var displayName: string;
+}
+export interface DataTableLoadingMoreProps {
+  /**
+   * Whether a next-page fetch is currently in flight. Typically
+   * wired to tRPC's `useInfiniteQuery.isFetchingNextPage`. When
+   * false, this component renders nothing.
+   */
+  isFetching: boolean;
+  /**
+   * Optional custom content inside the loading-more row. Defaults
+   * to a spinner + "Loading more…" label. Pass children to
+   * customize the label per-table (e.g. "Loading more venues…").
+   */
+  children?: React.ReactNode;
+  colSpan?: number;
+  className?: string;
+}
+/**
+ * Composable "loading more" row for infinite-scroll tables. Renders
+ * a spinner + label row at the end of the body when `isFetching` is
+ * true, and nothing when false — designed to be dropped as a child
+ * of `DataTableBody` alongside `DataTableSkeleton` and
+ * `DataTableEmptyBody`.
+ *
+ * Mirror of `DataTableVirtualizedLoadingMore` for non-virtualized
+ * tables — same API, same styling, same self-gating behavior.
+ *
+ * @example
+ * const query = api.thing.list.useInfiniteQuery(...);
+ * <DataTableBody
+ *   onScrolledBottom={() => {
+ *     if (query.hasNextPage && !query.isFetchingNextPage) {
+ *       void query.fetchNextPage();
+ *     }
+ *   }}
+ * >
+ *   <DataTableSkeleton rows={5} />
+ *   <DataTableEmptyBody>No results</DataTableEmptyBody>
+ *   <DataTableLoadingMore isFetching={query.isFetchingNextPage}>
+ *     Loading more things…
+ *   </DataTableLoadingMore>
+ * </DataTableBody>
+ */
+export declare function DataTableLoadingMore({ isFetching, children, colSpan, className }: DataTableLoadingMoreProps): React.JSX.Element | null;
+export declare namespace DataTableLoadingMore {
+  var displayName: string;
+}
+//#endregion
+export type { ScrollEvent };