@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/table/column-resize.d.ts

@@ -0,0 +1,48 @@
+import type { GridNode } from "../collections/grid.js";
+import type { Key } from "../collections/types.js";
+import type { ColumnSize, TableColumnResizeState } from "../state/table-column-resize.js";
+export interface AriaTableColumnResizeProps<T> {
+    /** An object representing the column header. */
+    column: GridNode<T>;
+    /** Aria label for the hidden input. Gets read when resizing. */
+    "aria-label": string;
+    /** Ref to the trigger (column header) if resizing was started from a column header menu. */
+    triggerRef?: {
+        readonly current: Element | null;
+    } | (() => Element | null | undefined) | undefined;
+    /** If resizing is disabled. */
+    isDisabled?: boolean | undefined;
+    /** Called when resizing starts. */
+    onResizeStart?: ((widths: Map<Key, ColumnSize>) => void) | undefined;
+    /** Called for every resize event that results in new column sizes. */
+    onResize?: ((widths: Map<Key, ColumnSize>) => void) | undefined;
+    /** Called when resizing ends. */
+    onResizeEnd?: ((widths: Map<Key, ColumnSize>) => void) | undefined;
+    /** Rivet: id of the hidden input (react-aria `useId`). */
+    id: string;
+    /** Rivet: id of the hidden "press Enter to resize" description element (react-aria `useDescription`). */
+    descriptionId?: string | undefined;
+    /** Rivet: locale of the strings. */
+    locale?: string | undefined;
+}
+export interface TableColumnResizeAria {
+    /** Props for the visually hidden input element. */
+    inputProps: Record<string, unknown>;
+    /** Props for the resizer element. */
+    resizerProps: Record<string, unknown>;
+    /** Whether this column is currently being resized. */
+    isResizing: () => boolean;
+    /** Whether a mouse drag-resize is active (the cursor overlay renders only then). */
+    isMouseResizing: () => boolean;
+}
+/**
+ * Provides the behavior and accessibility implementation for a table column resizer element
+ * (react-aria `useTableColumnResize` → `tableColumnResizeProps`). Call once in the component body;
+ * spread `resizerProps` on the resizer and `inputProps` on its visually hidden `<input>`.
+ */
+export declare function tableColumnResizeProps<T>(props: AriaTableColumnResizeProps<T>, state: () => TableColumnResizeState<T>): TableColumnResizeAria;
+/**
+ * Focus the column's resizer input after `startResize` (react-aria: a timeout, plus a second one for
+ * VoiceOver on iOS). `column` is the column header element.
+ */
+export declare function focusColumnResizer(column: Element | null): void;

package/table/column-resize.jsx

@@ -0,0 +1,247 @@
+// Ported from @react-aria/table (useTableColumnResize.ts), Apache-2.0, © Adobe.
+//
+// Rivet: `useTableColumnResize` → `tableColumnResizeProps(props, state)`; the bags carry the press
+// (`../interactions/press.tsx`), move (`../interactions/move.tsx`) and keyboard machines' handlers —
+// closures, so this module is `.tsx` (resume-compiled: R2 symbols). `state` is an ACCESSOR of the
+// react-stately `TableColumnResizeState` view (`../state/table-column-resize.ts`
+// `tableColumnResizeState(data, tableState)`): handlers read it at event time. Value attributes of
+// `inputProps` (`min`, `max`, `value`, `aria-valuetext`, `aria-describedby`) are accessors (spreads
+// resolve them inside bindings).
+// - react-aria's effect starting a resize when `resizingColumn` becomes this column (a Column
+//   `startResize` render prop, a menu "Resize" item) → the input's `onFocus`: the component
+//   focuses the input after `startResize` (`focusColumnResizer`), and the input's focus handler runs the
+//   resize start (`lastSize`, `onResizeStart`).
+// - Refs (`isResizingRef`, `lastSize`, `wasFocusedOnResizeStart`, `columnResizeWidthRef`) → one plain
+//   per-instance object (JSON; widths kept as `[key, size][]` until a callback gets a `Map`).
+import { signal, untrack } from "@rivetjs/reactivity";
+import { formatMessage } from "../_adapters/intl.js";
+import { focusSafely } from "../focus/index.js";
+import { getInteractionModality } from "../interactions/focus-visible.jsx";
+import { keyboardProps as keyboardPropsOf } from "../interactions/keyboard.jsx";
+import { moveProps as movePropsOf } from "../interactions/move.jsx";
+import { pressProps as pressPropsOf } from "../interactions/press.jsx";
+import { visuallyHidden } from "../a11y/index.js";
+import { getActiveElement, getEventTarget } from "../utils/dom.js";
+import { direction as elementDirection } from "../bidi/index.js";
+import { getColumnHeaderId } from "./behaviour.js";
+import { strings } from "./intl.js";
+const toMap = (entries) => new Map(entries ?? []);
+const triggerOf = (t) => (typeof t === "function" ? t() : t?.current) ?? null;
+/**
+ * Provides the behavior and accessibility implementation for a table column resizer element
+ * (react-aria `useTableColumnResize` → `tableColumnResizeProps`). Call once in the component body;
+ * spread `resizerProps` on the resizer and `inputProps` on its visually hidden `<input>`.
+ */
+export function tableColumnResizeProps(props, state) {
+    // Locals only: closures never capture `props` (the column node is a class instance, not serializable).
+    const { isDisabled, onResizeStart, onResize, onResizeEnd, "aria-label": ariaLabel, id, locale, triggerRef, descriptionId } = props;
+    const key = props.column.key;
+    const memo = { isResizing: false, lastSize: null, wasFocusedOnResizeStart: false, columnResizeWidth: 0 };
+    // Whether a mouse drag-resize is active. Set on the first move (not on press) so a cursor overlay
+    // only mounts during an actual drag.
+    const mouseResizing = signal(false);
+    const editModeEnabled = () => untrack(() => state().tableState.isKeyboardNavigationDisabled);
+    const startResize = (input) => {
+        const s = untrack(state);
+        if (!memo.isResizing) {
+            // react-aria's effect on the resizing column: whether the resizer had focus when resizing started.
+            memo.wasFocusedOnResizeStart = !!input && getActiveElement(input.ownerDocument) === input;
+            memo.lastSize = [...s.updateResizedColumns(key, s.getColumnWidth(key))];
+            s.startResize(key);
+            s.tableState.setKeyboardNavigationDisabled(true);
+            onResizeStart?.(toMap(memo.lastSize));
+        }
+        memo.isResizing = true;
+    };
+    const resize = (newWidth) => {
+        const sizes = untrack(state).updateResizedColumns(key, newWidth);
+        onResize?.(sizes);
+        memo.lastSize = [...sizes];
+    };
+    const endResize = (input) => {
+        const s = untrack(state);
+        if (memo.isResizing) {
+            if (memo.lastSize == null)
+                memo.lastSize = [...s.updateResizedColumns(key, s.getColumnWidth(key))];
+            s.endResize();
+            s.tableState.setKeyboardNavigationDisabled(false);
+            onResizeEnd?.(toMap(memo.lastSize));
+            memo.isResizing = false;
+            const trigger = triggerOf(triggerRef);
+            // switch focus back to the column header unless the resizer was already focused when resizing started.
+            if (trigger && !memo.wasFocusedOnResizeStart)
+                focusSafely(trigger);
+        }
+        memo.lastSize = null;
+        void input;
+    };
+    const endResizeEvent = () => {
+        if (editModeEnabled()) {
+            endResize();
+            return;
+        }
+        return false;
+    };
+    // Declared before the handler bags: resumable closures capture their free locals when the bag is built.
+    const focusInput = (input) => {
+        if (input)
+            focusSafely(input);
+    };
+    const inputOf = (resizer) => resizer?.querySelector("input") ?? null;
+    const kb = keyboardPropsOf({
+        shortcuts: {
+            Escape: () => endResizeEvent(),
+            Enter: (e) => {
+                if (editModeEnabled())
+                    endResize();
+                else
+                    startResize(inputOf(e.currentTarget));
+            },
+            " ": () => endResizeEvent(),
+            Tab: () => endResizeEvent(),
+        },
+    });
+    const mv = movePropsOf({
+        onMoveStart(e) {
+            memo.columnResizeWidth = untrack(state).getColumnWidth(key);
+            if (e.pointerType === "mouse")
+                mouseResizing.set(true);
+            const doc = globalThis.document;
+            startResize(doc ? getActiveElement(doc) : null);
+        },
+        onMove(e) {
+            let { deltaX } = e;
+            const { deltaY, pointerType } = e;
+            const doc = globalThis.document;
+            const active = doc ? getActiveElement(doc) : null;
+            if (elementDirection(active ?? undefined) === "rtl")
+                deltaX *= -1;
+            if (pointerType === "keyboard") {
+                if (deltaY !== 0 && deltaX === 0)
+                    deltaX = deltaY * -1;
+                deltaX *= 10;
+            }
+            // if moving up/down only, no need to resize
+            if (deltaX !== 0) {
+                memo.columnResizeWidth += deltaX;
+                resize(memo.columnResizeWidth);
+            }
+        },
+        onMoveEnd(e) {
+            const { pointerType } = e;
+            memo.columnResizeWidth = 0;
+            mouseResizing.set(false);
+            if (pointerType === "mouse" || (pointerType === "touch" && memo.wasFocusedOnResizeStart))
+                endResize();
+        },
+    });
+    const pr = pressPropsOf({
+        preventFocusOnPress: true,
+        onPressStart: (e) => {
+            if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === "keyboard")
+                return;
+            if (e.pointerType === "virtual" && untrack(state).resizingColumn != null) {
+                endResize();
+                return;
+            }
+            // Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away
+            // can cancel resize mode for us.
+            focusInput(inputOf(e.target));
+            // If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need
+            // to handle a virtual click to start the resizer.
+            if (e.pointerType !== "virtual")
+                startResize(inputOf(e.target));
+        },
+        onPress: (e) => {
+            if (((e.pointerType === "touch" && memo.wasFocusedOnResizeStart) || e.pointerType === "mouse") && untrack(state).resizingColumn != null)
+                endResize();
+        },
+    });
+    const min = () => Math.floor(state().getColumnMinWidth(key));
+    const max = () => {
+        const m = Math.floor(state().getColumnMaxWidth(key));
+        return m === Infinity ? Number.MAX_SAFE_INTEGER : m;
+    };
+    const value = () => Math.floor(state().getColumnWidth(key));
+    const description = () => {
+        let modality = getInteractionModality();
+        if (modality === "virtual" && "ontouchstart" in globalThis)
+            modality = "touch";
+        return triggerOf(triggerRef) == null && (modality === "keyboard" || modality === "virtual") && state().resizingColumn !== key
+            ? formatMessage(strings, locale, "resizerDescription")
+            : undefined;
+    };
+    const keys = kb.keyboardProps;
+    const move = mv.moveProps;
+    const press = pr.pressProps;
+    // RESUMABLE CLOSURES: one object literal of inline arrows (react-aria mergeProps(keyboardProps,
+    // moveProps, pressProps) chain order), no post-hoc merge.
+    return {
+        resizerProps: {
+            "data-rv-pressable": "",
+            style: { touchAction: "none" },
+            onKeyDown: (e) => {
+                keys.onKeyDown?.(e);
+                if (editModeEnabled())
+                    move.onKeyDown?.(e);
+                press.onKeyDown?.(e);
+            },
+            onKeyUp: (e) => keys.onKeyUp?.(e),
+            onPointerDown: (e) => {
+                move.onPointerDown?.(e);
+                press.onPointerDown?.(e);
+            },
+            onMouseDown: (e) => press.onMouseDown?.(e),
+            onPointerUp: (e) => press.onPointerUp?.(e),
+            onPointerEnter: (e) => press.onPointerEnter?.(e),
+            onPointerLeave: (e) => press.onPointerLeave?.(e),
+            onClick: (e) => press.onClick?.(e),
+            onDragStart: (e) => press.onDragStart?.(e),
+        },
+        inputProps: {
+            style: visuallyHidden,
+            id,
+            onBlur: () => endResize(),
+            onFocus: () => {
+                // react-aria's effect: this column became the resizing column from outside (a Column
+                // `startResize`): start the resize once the input has focus.
+                if (untrack(state).resizingColumn === key && !memo.isResizing) {
+                    startResize(null);
+                    memo.wasFocusedOnResizeStart = false;
+                }
+            },
+            onChange: (e) => {
+                const currentWidth = untrack(state).getColumnWidth(key);
+                let nextValue = parseFloat(getEventTarget(e).value);
+                if (nextValue > currentWidth)
+                    nextValue = currentWidth + 10;
+                else
+                    nextValue = currentWidth - 10;
+                resize(nextValue);
+            },
+            disabled: isDisabled,
+            "aria-label": ariaLabel,
+            "aria-orientation": "horizontal",
+            "aria-labelledby": () => `${id} ${getColumnHeaderId(state().tableState, key)}`,
+            "aria-valuetext": () => formatMessage(strings, locale, "columnSize", { value: value() }),
+            type: "range",
+            min,
+            max,
+            value,
+            "aria-describedby": () => (description() ? descriptionId : undefined),
+        },
+        isResizing: () => state().resizingColumn === key,
+        isMouseResizing: () => mouseResizing(),
+    };
+}
+/**
+ * Focus the column's resizer input after `startResize` (react-aria: a timeout, plus a second one for
+ * VoiceOver on iOS). `column` is the column header element.
+ */
+export function focusColumnResizer(column) {
+    const input = column?.querySelector(".rv-ColumnResizer input, [data-rv-column-resizer] input");
+    if (!input)
+        return;
+    setTimeout(() => focusSafely(input), 0);
+    setTimeout(() => getActiveElement(input.ownerDocument) !== input && focusSafely(input), 400);
+}

package/table/index.d.ts

@@ -0,0 +1,339 @@
+import { type CollectionProps } from "../collections/components.jsx";
+import type { DisabledBehavior, Key, Selection, SelectionBehavior, SelectionMode, SortDescriptor, SortDirection } from "../collections/types.js";
+import type { Signal } from "@rivetjs/reactivity";
+import { type TableState } from "../state/table.js";
+import { type ColumnSize, type TableColumnResizeState } from "../state/table-column-resize.js";
+import type { ColumnStaticSize } from "../collections/table.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps, type StyleRenderProps } from "../slots/index.jsx";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type LoadMoreSentinelProps } from "../utils/load-more-sentinel.jsx";
+import { type LinkDOMProps } from "../utils/links.jsx";
+import type { HoverEvents } from "../utils/types.js";
+import type { PressEvents } from "../interactions/press.jsx";
+export { TableCollection } from "./collection.js";
+export type { TableState } from "../state/table.js";
+export type { TableColumnResizeState, ColumnSize } from "../state/table-column-resize.js";
+export type { ColumnStaticSize } from "../collections/table.js";
+type MaybeAccessor<T> = T | (() => T);
+type Px = Record<string, string | number | undefined>;
+/** RAC `TableContext`: props for the Tables inside a component, optionally per `slot`. */
+export declare const TableContext: import("@rivetjs/reactivity").Context<ContextValue<TableProps, HTMLTableElement>>;
+/** RAC `TableStateContext` (Rivet: an accessor of the state view of the enclosing Table). */
+export declare const TableStateContext: import("@rivetjs/reactivity").Context<(() => TableState<any>) | null>;
+/** RAC `TableColumnResizeStateContext` (Rivet: an accessor; null outside a ResizableTableContainer). */
+export declare const TableColumnResizeStateContext: import("@rivetjs/reactivity").Context<(() => TableColumnResizeState<unknown>) | null>;
+export interface TableOptionsContextValue {
+    /** The type of selection that is allowed in the table. */
+    selectionMode: SelectionMode;
+    /** The selection behavior for the table. If selectionMode is `"none"`, this will be `null`. */
+    selectionBehavior: SelectionBehavior | null;
+    /** Whether the table allows empty selection. */
+    disallowEmptySelection: boolean;
+    /** Whether the table allows rows to be dragged. */
+    allowsDragging: boolean;
+}
+/** Returns options from the parent `<Table>` component (RAC `useTableOptions`). */
+export declare function tableOptions(): TableOptionsContextValue;
+export interface RowFocusContextValue {
+    /** Whether a descendant of the row has keyboard focus (accessor). */
+    isFocusVisibleWithinRow: () => boolean;
+}
+/** RAC `RowFocusContext` (Rivet: `isFocusVisibleWithinRow` is an accessor). */
+export declare const RowFocusContext: import("@rivetjs/reactivity").Context<RowFocusContextValue>;
+export interface ResizableTableContainerProps extends GlobalDOMAttributes<HTMLDivElement> {
+    /** The CSS class of the element. Default "rv-ResizableTableContainer". */
+    class?: string | undefined;
+    style?: Px | undefined;
+    /** The Table (and anything else) inside the container. */
+    children?: unknown;
+    /** Handler that is called when a user starts a column resize. */
+    onResizeStart?: ((widths: Map<Key, ColumnSize>) => void) | undefined;
+    /** Handler that is called when a user performs a column resize (controlled widths: the Column `width` props). */
+    onResize?: ((widths: Map<Key, ColumnSize>) => void) | undefined;
+    /** Handler that is called after a user performs a column resize (store the widths). */
+    onResizeEnd?: ((widths: Map<Key, ColumnSize>) => void) | undefined;
+    ref?: RefValue<HTMLDivElement> | undefined;
+}
+/** Wraps a Table to enable column resizing (ColumnResizer); measures the scrollable width. */
+export declare function ResizableTableContainer(props: ResizableTableContainerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Render props of `Table` (accessors; `@selector` = the matching attribute). */
+export interface TableRenderProps {
+    /** Whether the table is currently focused. @selector [data-focused] */
+    isFocused: () => boolean;
+    /** Whether the table is currently keyboard focused. @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** Whether the table is currently the active drop target. @selector [data-drop-target] */
+    isDropTarget: () => boolean;
+    /** State of the table (accessor of the view). */
+    state: () => TableState<unknown>;
+}
+export interface TableProps extends StyleRenderProps<TableRenderProps>, SlotProps, GlobalDOMAttributes<HTMLTableElement> {
+    /** The elements that make up the table: TableHeader, TableBody, Columns, Rows. */
+    children?: unknown;
+    id?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    /** The type of selection that is allowed in the collection. Default "none". */
+    selectionMode?: SelectionMode | undefined;
+    /** How multiple selection should behave in the collection. Default "toggle". */
+    selectionBehavior?: SelectionBehavior | undefined;
+    /** The currently selected keys: a plain value (controlled) or a Signal (two-way). */
+    selectedKeys?: Signal<Selection> | "all" | Iterable<Key> | undefined;
+    /** The initial selected keys (uncontrolled). */
+    defaultSelectedKeys?: "all" | Iterable<Key> | undefined;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: ((keys: Selection) => void) | undefined;
+    /** Whether the collection allows empty selection. */
+    disallowEmptySelection?: boolean | undefined;
+    /** The row keys that are disabled. */
+    disabledKeys?: Iterable<Key> | undefined;
+    /** Whether `disabledKeys` applies to all interactions, or only selection. Default "all". */
+    disabledBehavior?: DisabledBehavior | undefined;
+    /** The current sorted column and direction: a plain value (controlled) or a Signal (two-way). */
+    sortDescriptor?: SortDescriptor | Signal<SortDescriptor | null> | null | undefined;
+    /** Handler that is called when the sorted column or direction changes. */
+    onSortChange?: ((descriptor: SortDescriptor) => any) | undefined;
+    /** The currently expanded row keys: a plain value (controlled) or a Signal (two-way). */
+    expandedKeys?: Signal<Set<Key>> | Iterable<Key> | undefined;
+    /** The initial expanded row keys (uncontrolled). */
+    defaultExpandedKeys?: Iterable<Key> | undefined;
+    /** Handler that is called when rows are expanded or collapsed. */
+    onExpandedChange?: ((keys: Set<Key>) => any) | undefined;
+    /** The id of the column that displays hierarchical data (treegrid). */
+    treeColumn?: Key | undefined;
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: ((key: Key) => void) | undefined;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: ((key: Key) => void) | undefined;
+    /** Whether keyboard navigation to focusable elements within cells is via arrow keys or the tab key. Default "arrow". */
+    keyboardNavigationBehavior?: "arrow" | "tab" | undefined;
+    /** Whether pressing the escape key should clear selection. Default "clearSelection". */
+    escapeKeyBehavior?: "clearSelection" | "none" | undefined;
+    /** Whether selection should occur on press up instead of press down. */
+    shouldSelectOnPressUp?: boolean | undefined;
+    /** Whether typeahead navigation is disabled. */
+    disallowTypeAhead?: boolean | undefined;
+    ref?: RefValue<HTMLTableElement> | undefined;
+}
+/**
+ * A table displays data in rows and columns and enables a user to navigate its contents via
+ * directional navigation keys, and optionally supports row selection and sorting.
+ */
+export declare function Table(inProps: TableProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface TableHeaderRenderProps {
+    /** Whether the table header is currently hovered with a mouse. @selector [data-hovered] */
+    isHovered: () => boolean;
+}
+export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLTableSectionElement> {
+    /** A list of table columns. */
+    columns?: Iterable<T> | (() => Iterable<T>) | undefined;
+    /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
+    children?: unknown | ((item: T) => unknown);
+    /** RAC parity; ignored (Rivet re-renders through signals). */
+    dependencies?: readonly unknown[] | undefined;
+    ref?: RefValue<HTMLTableSectionElement> | undefined;
+}
+/** A header within a `<Table>`, containing the table columns. */
+export declare const TableHeader: <T>(props: TableHeaderProps<T>) => unknown;
+export interface ColumnRenderProps {
+    /** @selector [data-hovered] */
+    isHovered: () => boolean;
+    /** @selector [data-pressed] */
+    isPressed: () => boolean;
+    /** @selector [data-focused] */
+    isFocused: () => boolean;
+    /** @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** Whether the column allows sorting. @selector [data-allows-sorting] */
+    allowsSorting: () => boolean;
+    /** The current sort direction. @selector [data-sort-direction="ascending | descending"] */
+    sortDirection: () => SortDirection | undefined;
+    /** Whether the column is currently being resized. @selector [data-resizing] */
+    isResizing: () => boolean;
+    /** Triggers sorting for this column in the given direction. */
+    sort(direction: SortDirection): void;
+    /** Starts column resizing if the table is contained in a `<ResizableTableContainer>` element. */
+    startResize(): void;
+}
+export interface ColumnProps extends RenderProps<ColumnRenderProps>, GlobalDOMAttributes<HTMLTableCellElement> {
+    /** The unique id of the column. */
+    id?: Key | undefined;
+    /** Whether the column allows sorting. */
+    allowsSorting?: boolean | undefined;
+    /** Whether a column is a row header and should be announced by assistive technology during row navigation. */
+    isRowHeader?: boolean | undefined;
+    /** A string representation of the column's contents, used for accessibility announcements. */
+    textValue?: string | undefined;
+    /** The width of the column (only inside a `<ResizableTableContainer>`). */
+    width?: ColumnSize | null | undefined;
+    /** The default width of the column (only inside a `<ResizableTableContainer>`). */
+    defaultWidth?: ColumnSize | null | undefined;
+    /** The minimum width of the column (only inside a `<ResizableTableContainer>`). */
+    minWidth?: ColumnStaticSize | null | undefined;
+    /** The maximum width of the column (only inside a `<ResizableTableContainer>`). */
+    maxWidth?: ColumnStaticSize | null | undefined;
+    /** Whether the column header or its first focusable child element should be focused when the column header is focused. */
+    focusMode?: "child" | "cell" | undefined;
+    /** Whether the column supports arrow key navigation even when the table uses tab keyboard navigation. */
+    allowsArrowNavigation?: boolean | undefined;
+    ref?: RefValue<HTMLTableCellElement> | undefined;
+}
+/** A column within a `<Table>`. */
+export declare const Column: (props: ColumnProps) => unknown;
+export interface ColumnResizerRenderProps {
+    /** @selector [data-hovered] */
+    isHovered: () => boolean;
+    /** @selector [data-focused] */
+    isFocused: () => boolean;
+    /** @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** Whether the resizer is currently being resized. @selector [data-resizing] */
+    isResizing: () => boolean;
+    /** The direction that the column is currently resizable. @selector [data-resizable-direction="right | left | both"] */
+    resizableDirection: () => "right" | "left" | "both";
+}
+export interface ColumnResizerProps extends HoverEvents, RenderProps<ColumnResizerRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+    /** A custom accessibility label for the resizer. */
+    "aria-label"?: string | undefined;
+    ref?: RefValue<HTMLDivElement> | undefined;
+}
+/** A draggable / keyboard-adjustable handle that resizes its Column (inside a ResizableTableContainer). */
+export declare function ColumnResizer(props: ColumnResizerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface TableBodyRenderProps {
+    /** Whether the table body has no rows and should display its empty state. @selector [data-empty] */
+    isEmpty: () => boolean;
+    /** Whether the Table is currently the active drop target. @selector [data-drop-target] */
+    isDropTarget: () => boolean;
+}
+export interface TableBodyProps<T> extends CollectionProps<T>, StyleRenderProps<TableBodyRenderProps>, GlobalDOMAttributes<HTMLTableSectionElement> {
+    /** Provides content to display when there are no rows in the table. */
+    renderEmptyState?: ((props: TableBodyRenderProps) => unknown) | undefined;
+    ref?: RefValue<HTMLTableSectionElement> | undefined;
+}
+/** The body of a `<Table>`, containing the table rows. */
+export declare const TableBody: <T>(props: TableBodyProps<T>) => unknown;
+export interface TableFooterProps<T> extends CollectionProps<T>, GlobalDOMAttributes<HTMLTableSectionElement> {
+    /** The CSS class of the element. Default "rv-TableFooter". */
+    class?: string | undefined;
+    style?: Px | undefined;
+    ref?: RefValue<HTMLTableSectionElement> | undefined;
+}
+/** The footer of a `<Table>`, containing table rows. */
+export declare const TableFooter: <T>(props: TableFooterProps<T>) => unknown;
+export interface RowRenderProps {
+    /** @selector [data-hovered] */
+    isHovered: () => boolean;
+    /** @selector [data-pressed] */
+    isPressed: () => boolean;
+    /** @selector [data-selected] */
+    isSelected: () => boolean;
+    /** @selector [data-focused] */
+    isFocused: () => boolean;
+    /** @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** @selector [data-disabled] */
+    isDisabled: () => boolean;
+    /** @selector [data-selection-mode="single | multiple"] */
+    selectionMode: () => SelectionMode;
+    selectionBehavior: () => SelectionBehavior;
+    /** @selector [data-allows-dragging] */
+    allowsDragging: () => boolean;
+    /** @selector [data-dragging] */
+    isDragging: () => boolean;
+    /** @selector [data-drop-target] */
+    isDropTarget: () => boolean;
+    /** Whether the row's children have keyboard focus. @selector [data-focus-visible-within] */
+    isFocusVisibleWithin: () => boolean;
+    /** The unique id of the row. */
+    id: Key;
+    /** Whether the row is expanded. @selector [data-expanded] */
+    isExpanded: () => boolean;
+    /** Whether the row has child rows. @selector [data-has-child-items] */
+    hasChildItems: () => boolean;
+    /** What level the row has within the table. @selector [data-level] */
+    level: () => number;
+    /** State of the table (accessor of the view). */
+    state: () => TableState<unknown>;
+}
+export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLTableRowElement>, "onClick"> {
+    /** A list of columns used when dynamically rendering cells. */
+    columns?: Iterable<T> | (() => Iterable<T>) | undefined;
+    /** The cells within the row. Supports static items or a function for dynamic rendering. */
+    children?: unknown | ((item: T) => unknown);
+    /** The object value that this row represents. When using dynamic collections, this is set automatically. */
+    value?: T | undefined;
+    /** RAC parity; ignored (Rivet re-renders through signals). */
+    dependencies?: readonly unknown[] | undefined;
+    /** A string representation of the row's contents, used for features like typeahead. */
+    textValue?: string | undefined;
+    /** Whether the row is disabled. */
+    isDisabled?: boolean | undefined;
+    /** Whether `disabledKeys` applies to all interactions, or only selection. */
+    disabledBehavior?: DisabledBehavior | undefined;
+    /** Handler that is called when a user performs an action on the row. */
+    onAction?: (() => void) | undefined;
+    /** The unique id of the row. */
+    id?: Key | undefined;
+    /** Whether this row has children, even if not loaded yet. */
+    hasChildItems?: boolean | undefined;
+    ref?: RefValue<HTMLTableRowElement> | undefined;
+}
+/** A row within a `<Table>`. */
+export declare const Row: <T>(props: RowProps<T>) => unknown;
+export interface CellRenderProps {
+    /** @selector [data-pressed] */
+    isPressed: () => boolean;
+    /** @selector [data-focused] */
+    isFocused: () => boolean;
+    /** @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** @selector [data-hovered] */
+    isHovered: () => boolean;
+    /** Whether the parent row is selected. @selector [data-selected] */
+    isSelected: () => boolean;
+    /** Whether the parent row is disabled. @selector [data-disabled] */
+    isDisabled: () => boolean;
+    /** Whether the parent row's children have keyboard focus. @selector [data-focus-visible-within-row] */
+    isFocusVisibleWithinRow: () => boolean;
+    /** The unique id of the cell. */
+    id?: Key | undefined;
+    /** The index of the column that this cell belongs to (respects column spans). @selector [data-column-index] */
+    columnIndex: () => number | null | undefined;
+    /** Whether the cell belongs to the hierarchical tree column. @selector [data-tree-column] */
+    isTreeColumn: () => boolean;
+    /** Whether the parent row is expanded. @selector [data-expanded] */
+    isExpanded: () => boolean;
+    /** Whether the parent row has child rows. @selector [data-has-child-items] */
+    hasChildItems: () => boolean;
+    /** What level the parent row has within the table. @selector [data-level] */
+    level: () => number;
+}
+export interface CellProps extends RenderProps<CellRenderProps>, GlobalDOMAttributes<HTMLTableCellElement> {
+    /** The unique id of the cell. */
+    id?: Key | undefined;
+    /** A string representation of the cell's contents, used for features like typeahead. */
+    textValue?: string | undefined;
+    /** Indicates how many columns the data cell spans. */
+    colSpan?: number | undefined;
+    /** Whether the cell or its first focusable child element should be focused when the grid cell is focused. */
+    focusMode?: "child" | "cell" | undefined;
+    /** Whether the cell supports arrow key navigation even when the table uses tab keyboard navigation. */
+    allowsArrowNavigation?: boolean | undefined;
+    ref?: RefValue<HTMLTableCellElement> | undefined;
+}
+/** A cell within a table row. */
+export declare const Cell: (props: CellProps) => unknown;
+export interface TableLoadMoreItemProps extends Omit<LoadMoreSentinelProps, "collection">, GlobalDOMAttributes<HTMLTableRowElement> {
+    /** The CSS class of the element. Default "rv-TableLoadingIndicator". */
+    class?: string | undefined;
+    style?: Px | undefined;
+    /** The load more spinner to render when loading additional items. */
+    children?: unknown;
+    /** Whether or not the loading spinner should be rendered (a value or an accessor). */
+    isLoading?: MaybeAccessor<boolean | undefined>;
+    ref?: RefValue<HTMLTableRowElement> | undefined;
+}
+/** A sentinel row: calls `onLoadMore` when scrolled near, and renders its children while `isLoading`. */
+export declare const TableLoadMoreItem: (props: TableLoadMoreItemProps) => unknown;