@skdx/react 0.27.0 → 0.29.0

package/dist/table/types.d.ts

@@ -1,355 +1,410 @@
+import type * as React from 'react';
 import type { CheckboxProps } from '../checkbox/types.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Direction a {@link Table} column is sorted in: ascending or descending. */
+/** Column sort direction: ascending or descending. */
 export type SortDirection = 'asc' | 'desc';
-/** The currently sorted column and its direction, as tracked by {@link Table}. */
+/** Currently sorted column and its sort direction. */
 export interface TableSortState {
     columnKey: string;
     direction: SortDirection;
 }
-/**
- * A whole table's sort state: one column (single sort, the default), an ordered
- * list of columns (`multiSort`, most significant first), or nothing sorted.
- *
- * Single-sort tables are given and handed back the bare object — the array form
- * only appears once `multiSort` is on, so existing single-sort code is unaffected.
- */
-export type TableSort = TableSortState | TableSortState[] | null;
-/**
- * Which rows a {@link TableSelectAllCheckbox} covers: only the ids it was
- * handed (`'page'`) or the entire dataset (`'all'`). There is no default — the
- * two behave identically until the table is paginated or virtualized, at which
- * point picking the wrong one is a bug found in production.
- */
+/** Array of sorted columns, most significant first, always present even with `multiSort` off. */
+export type TableSort = TableSortState[];
+/** Whether `TableSelectAllCheckbox` covers the page or entire dataset. */
 export type TableSelectAllScope = 'page' | 'all';
-/** How many rows a {@link Table} allows selected at once: one, many, or no selection. */
+/** How many rows can be selected: one, many, or none. */
 export type TableSelectionMode = 'single' | 'multiple' | 'none';
-/** Per-column pixel widths, keyed by a header cell's `columnKey` (falling back to its `sortKey`). */
+/** Per-column pixel widths keyed by `columnKey`. */
 export type TableColumnWidths = Record<string, number>;
-/** @internal Shared sort/selection state distributed from {@link Table} to its parts via context. Not part of the public API. */
+/** Shared sort/selection state distributed from `Table` to its parts. */
 export interface TableContextValue {
-    /** Unique per-table id, used to derive stable `id`/`aria-controls` pairs for detail rows. */
+    /** Unique per-table id for stable detail row `id`/`aria-controls` pairs. */
     tableId: string;
-    /** The most significant sorted column, or `null`. Equivalent to `sortList[0] ?? null`. */
-    sort: TableSortState | null;
-    /** Every sorted column, most significant first. At most one entry unless `multiSort` is on. */
+    /** Every sorted column, most significant first. */
     sortList: TableSortState[];
-    /** Whether activating a second column adds to the sort rather than replacing it. */
+    /** Whether a second sorted column appends or replaces the first. */
     multiSort: boolean;
     selected: Set<string>;
     selectionMode: TableSelectionMode;
-    /** Row ids whose detail row is currently expanded. */
+    /** Row ids whose detail row is expanded. */
     expandedRows: Set<string>;
     toggleRowExpanded: (rowId: string) => void;
     isRowExpanded: (rowId: string) => boolean;
-    /** Current per-column widths in pixels; columns absent from it are left to the browser. */
+    /** Current per-column pixel widths. */
     columnWidths: TableColumnWidths;
     setColumnWidth: (columnKey: string, width: number) => void;
-    /**
-     * Cycles the given column through asc → desc → unsorted; switching to a
-     * different column always starts at asc. `columnLabel` is the header cell's
-     * own text, used only for the live-region announcement.
-     */
+    /** Commit column widths, fires `onColumnWidthsCommit` once. */
+    commitColumnWidths: () => void;
+    /** Cycle column sort asc → desc → unsorted; switch columns always start at asc. */
     toggleSort: (columnKey: string, columnLabel?: string) => void;
-    /**
-     * Toggles a row's selection. In `'single'` mode, selecting a new row replaces
-     * the current selection. Passing `extend` (a Shift-click) selects every row
-     * between the last row toggled and this one, in `'multiple'` mode only.
-     */
+    /** Toggle a row's selection; `extend` selects range in `'multiple'` mode. */
     toggleRow: (id: string, extend?: boolean) => void;
     isRowSelected: (id: string) => boolean;
-    /** Toggles all given row ids: selects every id unless all are already selected, in which case it deselects them. */
+    /** Header cells currently mounted, falling back to the root's `columnCount` before any header renders. */
+    headerCellCount: number;
+    /** @internal Counts a mounted `TableHeaderCell` into `headerCellCount`; the returned callback removes it. */
+    registerHeaderCell: () => () => void;
+    /** Deselect all or select all given row ids. */
     toggleAll: (allIds: string[]) => void;
     isAllSelected: (allIds: string[]) => boolean;
     isSomeSelected: (allIds: string[]) => boolean;
 }
-/**
- * @internal Column-scoped defaults a {@link TableHeaderCell} publishes to the
- * sort/resize parts nested inside it, so those parts don't repeat the column's
- * key and bounds. Every field is optional — the parts also work standalone,
- * given their own props. Not part of the public API.
- */
+/** @internal Column-scoped defaults `TableHeaderCell` publishes to its nested parts. */
 export interface TableHeaderCellContextValue {
-    sortKey?: string;
-    columnKey?: string;
-    minWidth?: number;
-    maxWidth?: number;
-    resizeLabel?: string;
-    resizeStep?: number;
+    /** The column's single identifier for sort and resize. */
+    columnKey?: string | undefined;
+    /** Whether this column can be sorted. */
+    sortable?: boolean | undefined;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+    resizeLabel?: string | undefined;
+    resizeStep?: number | undefined;
 }
-/** Props for the {@link Table} root, a native `<table>` with optional headless sorting and selection state. */
-export interface TableProps extends Omit<PrimitivePropsWithRef<'table'>, 'onChange'> {
+/** Props for `TableRoot`, a native table with optional sorting and selection state. */
+export interface TableRootProps extends Omit<PrimitivePropsWithRef<'table'>, 'onChange'> {
     /**
-     * Current sort state, for controlled usage. Pair with `onSortChange`. A bare
-     * object (or `null`) for single sort, an array — most significant column
-     * first — when `multiSort` is on.
-     * @default undefined — uncontrolled, the table tracks its own sort state.
+     * Hand-composed table sections such as header, body and footer.
+     * @default undefined
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Sorted columns, most significant first, for controlled usage.
+     * @default undefined
      */
-    sort?: TableSort;
+    sort?: TableSort | undefined;
     /**
-     * Initial sort state, for uncontrolled usage.
-     * @default null — nothing sorted, so every header reports `aria-sort="none"`.
+     * Initially sorted columns for uncontrolled usage.
+     * @default []
      */
-    defaultSort?: TableSort;
+    defaultSort?: TableSort | undefined;
     /**
-     * Fires with the new sort state whenever a sortable `TableHeaderCell` is
-     * activated, controlled or not. Handed the same shape `sort` takes: a bare
-     * object or `null` while `multiSort` is off, an array once it is on.
-     * @default undefined — no-op if omitted; the table still tracks sort internally.
+     * Total rows in the full dataset; set when DOM rows don't represent all.
+     * @default undefined
      */
-    onSortChange?: (sort: TableSort) => void;
+    rowCount?: number | undefined;
     /**
-     * Lets several columns be sorted at once: activating a second column appends
-     * it to the sort instead of replacing the first, and `sort` becomes an array
-     * ordered most-significant-first. Off, exactly one column can carry
-     * `aria-sort="ascending" | "descending"` at a time.
-     * @default false — a second column replaces the first, and `sort` stays a bare object.
+     * Total number of columns in the full dataset.
+     * @default undefined
      */
-    multiSort?: boolean;
+    columnCount?: number | undefined;
     /**
-     * Selected row ids, for controlled usage. Pair with `onSelectedChange`. Accepts a `Set` or an array.
+     * Fires with the new sort state on sortable header activation.
      * @default undefined
      */
-    selected?: Set<string> | string[];
+    onSortChange?: ((sort: TableSort) => void) | undefined;
+    /**
+     * Whether a second sorted column appends or replaces the first.
+     * @default false
+     */
+    multiSort?: boolean | undefined;
     /**
-     * Initially selected row ids, for uncontrolled usage. Accepts a `Set` or an array.
+     * Selected row ids for controlled usage.
      * @default undefined
      */
-    defaultSelected?: Set<string> | string[];
+    selected?: Set<string> | string[] | undefined;
     /**
-     * Fires with the new selected ids (as an array) whenever selection changes, controlled or not.
+     * Initially selected row ids for uncontrolled usage.
      * @default undefined
      */
-    onSelectedChange?: (selected: string[]) => void;
+    defaultSelected?: Set<string> | string[] | undefined;
     /**
-     * Whether rows can be selected at all, and if so, whether one or many at
-     * once. `'none'` disables row-click and checkbox selection entirely.
+     * Fires with the new selected ids on selection change.
+     * @default undefined
+     */
+    onSelectedChange?: ((selected: string[]) => void) | undefined;
+    /**
+     * Whether rows can be selected: one, many, or none.
      * @default 'none'
      */
-    selectionMode?: TableSelectionMode;
+    selectionMode?: TableSelectionMode | undefined;
     /**
-     * Formats the message announced (through the shared `LiveAnnouncer`) when a
-     * sortable `TableHeaderCell` is activated — a changed `aria-sort` is not
-     * itself re-announced by screen readers. `column` is the header cell's own
-     * text. Return an empty string to announce nothing.
-     * @default defaultGetSortLabel — e.g. `"Amount sorted ascending"`
+     * Format the message announced on sortable header activation.
+     * @default defaultGetSortLabel
      */
-    getSortLabel?: (column: string, direction: SortDirection | null) => string;
+    getSortLabel?: ((column: string, direction: SortDirection | null) => string) | undefined;
     /**
-     * Row ids whose `TableExpandedRow` detail row is open, for controlled usage.
-     * Pair with `onExpandedRowIdsChange`.
+     * Row ids whose detail row is expanded for controlled usage.
      * @default undefined
      */
-    expandedRowIds?: string[];
+    expandedRowIds?: string[] | undefined;
     /**
-     * Initially expanded detail rows, for uncontrolled usage.
+     * Initially expanded detail rows for uncontrolled usage.
      * @default []
      */
-    defaultExpandedRowIds?: string[];
+    defaultExpandedRowIds?: string[] | undefined;
     /**
-     * Fires with the new set of expanded row ids whenever a `TableExpandTrigger`
-     * is activated, controlled or not.
+     * Fires with new expanded row ids on expand trigger activation.
      * @default undefined
      */
-    onExpandedRowIdsChange?: (rowIds: string[]) => void;
+    onExpandedRowIdsChange?: ((rowIds: string[]) => void) | undefined;
     /**
-     * Per-column pixel widths keyed by `columnKey`, for controlled usage. Pair
-     * with `onColumnWidthsChange`.
+     * Per-column pixel widths keyed by `columnKey` for controlled usage.
      * @default undefined
      */
-    columnWidths?: TableColumnWidths;
+    columnWidths?: TableColumnWidths | undefined;
     /**
-     * Initial per-column pixel widths, for uncontrolled usage. Columns left out
-     * size themselves until the user resizes them.
+     * Initial per-column pixel widths for uncontrolled usage.
      * @default {}
      */
-    defaultColumnWidths?: TableColumnWidths;
+    defaultColumnWidths?: TableColumnWidths | undefined;
+    /**
+     * Fires during column resize via drag or keyboard, continuously.
+     * @default undefined
+     */
+    onColumnWidthsChange?: ((widths: TableColumnWidths) => void) | undefined;
     /**
-     * Fires with the full width map whenever a resizable column is dragged or
-     * keyboard-resized, controlled or not.
+     * Fires once per gesture when column resizing settles.
      * @default undefined
      */
-    onColumnWidthsChange?: (widths: TableColumnWidths) => void;
+    onColumnWidthsCommit?: ((widths: TableColumnWidths) => void) | undefined;
+    /**
+     * Spacing rung the skin packs the cells by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Pins the header row while the body scrolls, mirrored as a bare `data-sticky-header`.
+     * @default undefined — the header scrolls with the body.
+     */
+    stickyHeader?: boolean | undefined;
+}
+/** One column in a derived table. */
+export interface TableColumn<T extends object = object> {
+    /** This column's identifier for sorting and resizing; a `T` key, or any string for a computed column. */
+    key: Extract<keyof T, string> | (string & {});
+    /**
+     * The derived header cell's content.
+     * @default column's `key`
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Render a cell for this column.
+     * @default falls back to `renderCell`, then `String(row[key])`
+     */
+    cell?: ((row: T) => React.ReactNode) | undefined;
+    /**
+     * Override the root's `sortable` for this column alone.
+     * @default inherits root's `sortable`
+     */
+    sortable?: boolean | undefined;
+    /**
+     * Override the root's `resizable` for this column alone.
+     * @default inherits root's `resizable`
+     */
+    resizable?: boolean | undefined;
+    /** @default 40 */
+    minWidth?: number | undefined;
+    /** @default 1000 */
+    maxWidth?: number | undefined;
 }
-/** Props for {@link TableHeader}, the `<thead>` section. */
+/** Props for the Table recipe, generic over row datum `T`. No `children`: use TableRoot for manual composition. */
+export interface TableProps<T extends object = object> extends Omit<TableRootProps, 'children'> {
+    /** Columns to derive header cells and row cells from. */
+    columns: TableColumn<T>[];
+    /** Rows to render — one per entry. */
+    data: T[];
+    /**
+     * Default `sortable` for every column that doesn't set its own.
+     * @default false
+     */
+    sortable?: boolean | undefined;
+    /**
+     * Derive a leading selection checkbox column, defaulting `selectionMode` to `'multiple'`.
+     * @default false
+     */
+    selectable?: boolean | undefined;
+    /**
+     * Derive a leading expand trigger column and detail row per row.
+     * @default false
+     */
+    expandable?: boolean | undefined;
+    /**
+     * Render a derived detail row's content for one row.
+     * @default detail row renders empty
+     */
+    renderExpanded?: ((row: T) => React.ReactNode) | undefined;
+    /**
+     * Default `resizable` for every column that doesn't set its own.
+     * @default false
+     */
+    resizable?: boolean | undefined;
+    /**
+     * Content for a derived empty row shown when data is empty.
+     * @default no empty row
+     */
+    empty?: React.ReactNode | undefined;
+    /**
+     * Content for the derived `<caption>`, which names the table for assistive technology.
+     * @default no caption
+     */
+    caption?: React.ReactNode | undefined;
+    /**
+     * Cell renderer for columns without their own `cell`.
+     * @default `String(row[column.key])`
+     */
+    renderCell?: ((row: T, column: TableColumn<T>) => React.ReactNode) | undefined;
+    /**
+     * Derive each row's identity for selection, expansion and keys.
+     * @default (row, index) => String(row.id ?? index)
+     */
+    rowId?: ((row: T, index: number) => string) | undefined;
+    /**
+     * Names each row in its derived select checkbox and expand trigger.
+     * @default (row, index) => `row ${rowId(row, index)}`
+     */
+    getRowLabel?: ((row: T, index: number) => string) | undefined;
+    /**
+     * Size rung the skin scales the selection boxes by, fed to the derived row and select-all checkboxes.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+}
+/** Props for the table header section. */
 export interface TableHeaderProps extends PrimitivePropsWithRef<'thead'> {
 }
-/** Props for {@link TableBody}, the `<tbody>` section. */
+/** Props for the table body section. */
 export interface TableBodyProps extends PrimitivePropsWithRef<'tbody'> {
 }
-/** Props for {@link TableFooter}, the `<tfoot>` section. */
+/** Props for the table footer section. */
 export interface TableFooterProps extends PrimitivePropsWithRef<'tfoot'> {
 }
-/** Props for a single selectable, sortable-aware row inside a {@link Table}. */
+/** Props for a selectable, sortable-aware table row. */
 export interface TableRowProps extends PrimitivePropsWithRef<'tr'> {
     /**
-     * This row's identifier within the table's selection state. Required for
-     * the row to be selectable (via click or its own checkbox); rows without
-     * it are never selected or clickable-to-select.
+     * This row's identifier within the table's selection state, required for the row to be selectable.
      * @default undefined
      */
-    rowId?: string;
+    rowId?: string | undefined;
 }
-/** Props for a single column header cell inside a {@link Table}, optionally sortable and resizable. */
+/** Props for a column header cell, optionally sortable and resizable. */
 export interface TableHeaderCellProps extends PrimitivePropsWithRef<'th'> {
     /**
-     * Column identifier used for sorting. Presence of this prop is what makes
-     * the header cell sortable — omit it for a non-sortable column header.
+     * This column's identifier for sorting and resizing.
      * @default undefined
      */
-    sortKey?: string;
+    columnKey?: string | undefined;
     /**
-     * Column identifier used for resizing, when it differs from `sortKey`.
-     * Defaults to `sortKey`; a resizable column needs one of the two.
-     * @default sortKey
+     * Whether this column can be sorted.
+     * @default undefined
      */
-    columnKey?: string;
+    sortable?: boolean | undefined;
     /**
-     * Renders a focusable `role="separator"` resize handle at the cell's inline
-     * end. Drag it, or focus it and press Arrow Left/Right (Home/End jump to the
-     * bounds) to resize the column.
+     * Renders a focusable resize handle, dragged or stepped with Arrow Left/Right.
      * @default false
      */
-    resizable?: boolean;
+    resizable?: boolean | undefined;
     /**
      * Smallest width in pixels the column can be resized to.
      * @default 40
      */
-    minWidth?: number;
+    minWidth?: number | undefined;
     /**
      * Largest width in pixels the column can be resized to.
      * @default 1000
      */
-    maxWidth?: number;
+    maxWidth?: number | undefined;
     /**
-     * Accessible name for the resize handle — a `role="separator"` widget needs
-     * its own name, distinct from the column header's.
+     * Accessible name for the resize handle.
      * @default 'Resize column'
      */
-    resizeLabel?: string;
+    resizeLabel?: string | undefined;
     /**
-     * Pixels one Arrow keypress moves the column edge by. Also inherited by a
-     * `TableColumnResizeTrigger` rendered as a child of this cell.
-     * @default 8 — matches the handle's own default, small enough to land on a
-     * precise width without a hundred presses.
+     * Pixels one Arrow keypress moves the column edge by.
+     * @default 8
      */
-    resizeStep?: number;
+    resizeStep?: number | undefined;
 }
-/**
- * Props for {@link TableColumnHeaderSortTrigger}, the button inside a `<th>`
- * that cycles that column's sort.
- */
+/** Props for the button inside a header cell that cycles column sort. */
 export interface TableColumnHeaderSortTriggerProps extends PrimitivePropsWithRef<'button'> {
     /**
-     * Column this trigger sorts. Inherited from the enclosing `TableHeaderCell`'s
-     * `sortKey`, so you only pass it when rendering the trigger outside one.
-     * @default the enclosing `TableHeaderCell`'s `sortKey` — the trigger renders nothing without either.
+     * Column this trigger sorts, inherited from the enclosing `TableHeaderCell`'s `columnKey`.
+     * @default enclosing `TableHeaderCell`'s `columnKey`
      */
-    sortKey?: string;
+    columnKey?: string | undefined;
 }
-/**
- * Props for {@link TableSortIndicator}, the decorative arrow reflecting a
- * column's sort direction.
- */
+/** Props for the decorative sort direction arrow. */
 export interface TableSortIndicatorProps extends PrimitivePropsWithRef<'span'> {
     /**
-     * Column whose direction this indicator reflects. Inherited from the
-     * enclosing `TableHeaderCell`'s `sortKey`.
-     * @default the enclosing `TableHeaderCell`'s `sortKey`.
+     * Column whose direction this indicator reflects, inherited from the enclosing `TableHeaderCell`'s `columnKey`.
+     * @default enclosing `TableHeaderCell`'s `columnKey`
      */
-    sortKey?: string;
+    columnKey?: string | undefined;
 }
-/** Props for {@link TableSelectAllCheckbox}, the tri-state header checkbox. */
+/** Props for the tri-state header select-all checkbox. */
 export interface TableSelectAllCheckboxProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> {
     /**
-     * The ids this checkbox selects and reports on. Must be the *whole dataset's*
-     * ids when `scope` is `'all'`, and only the rendered page's when it is
-     * `'page'` — the table stores no row registry, so this list is the only thing
-     * that decides which.
+     * The row ids this checkbox selects — the whole dataset when `scope='all'`, the page when `scope='page'`.
      */
     rowIds: string[];
     /**
-     * Whether `rowIds` is the current page/window or the entire dataset. Required
-     * and unset by default: the two are indistinguishable until the table
-     * paginates or virtualizes, and guessing produces a "select all" that quietly
-     * selects only what is on screen.
+     * Whether `rowIds` is the page or entire dataset.
      */
     scope: TableSelectAllScope;
     /**
-     * Words the checkbox's accessible name. `count` is `rowIds.length`, so the
-     * name can keep saying how many rows and which scope — which is the reason a
-     * plain `aria-label` is not enough here.
-     * @default defaultSelectAllLabel — e.g. `"Select all 40 rows on this page"`
+     * Formats the checkbox's accessible name, given the current scope and how many rows it affects.
+     * @default defaultSelectAllLabel
      */
-    getSelectAllLabel?: (scope: TableSelectAllScope, count: number) => string;
+    getSelectAllLabel?: ((scope: TableSelectAllScope, count: number) => string) | undefined;
 }
-/** Props for {@link TableRowSelectCheckbox}, one row's selection checkbox. */
+/** Props for a single row's selection checkbox. */
 export interface TableRowSelectCheckboxProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> {
-    /** Id of the row this checkbox selects. Must match the enclosing `TableRow`'s `rowId`. */
+    /** Id of the row this checkbox selects. */
     rowId: string;
 }
-/** Props for {@link TableColumnResizeTrigger}, the draggable/keyboard-operable column edge. */
+/** Props for the draggable/keyboard-operable column resize handle. */
 export interface TableColumnResizeTriggerProps extends PrimitivePropsWithRef<'span'> {
     /**
-     * Column whose width this handle writes. Inherited from the enclosing
-     * `TableHeaderCell`'s `columnKey` (which itself falls back to `sortKey`); a
-     * handle with neither has nowhere to store a width and renders nothing.
-     * @default the enclosing `TableHeaderCell`'s `columnKey ?? sortKey`.
+     * Column whose width this handle resizes, inherited from the enclosing `TableHeaderCell`'s `columnKey`.
+     * @default enclosing `TableHeaderCell`'s `columnKey`
      */
-    columnKey?: string;
+    columnKey?: string | undefined;
     /**
-     * Smallest width in pixels the column can be dragged or stepped to; also the
-     * width **Home** snaps to.
-     * @default the enclosing `TableHeaderCell`'s `minWidth`, otherwise `40`.
+     * Smallest width in pixels; **Home** snaps to this.
+     * @default enclosing `TableHeaderCell`'s `minWidth` or `40`
      */
-    minWidth?: number;
+    minWidth?: number | undefined;
     /**
-     * Largest width in pixels the column can be dragged or stepped to; also the
-     * width **End** snaps to.
-     * @default the enclosing `TableHeaderCell`'s `maxWidth`, otherwise `1000`.
+     * Largest width in pixels; **End** snaps to this.
+     * @default enclosing `TableHeaderCell`'s `maxWidth` or `1000`
      */
-    maxWidth?: number;
+    maxWidth?: number | undefined;
     /**
-     * Pixels one Arrow keypress moves the column edge by.
-     * @default the enclosing `TableHeaderCell`'s `resizeStep`, otherwise `8`.
+     * Pixels one Arrow keypress moves the edge by.
+     * @default enclosing `TableHeaderCell`'s `resizeStep` or `8`
      */
-    step?: number;
+    step?: number | undefined;
     /**
-     * Accessible name for the handle — a focusable `role="separator"` is a widget
-     * and needs its own name. Prefer a column-specific one
-     * (`"Resize Name column"`): the handle sits inside the `<th>`, so its name
-     * joins the header's name-from-content.
-     * @default the enclosing `TableHeaderCell`'s `resizeLabel`, otherwise `'Resize column'`.
+     * Accessible name for the resize handle; a focusable separator widget needs its own name.
+     * @default enclosing `TableHeaderCell`'s `resizeLabel` or `'Resize column'`
      */
-    label?: string;
+    label?: string | undefined;
 }
-/** Props for a single body cell (`<td>`) rendered inside a {@link Table} row. */
+/** Props for a single body cell. */
 export interface TableCellProps extends PrimitivePropsWithRef<'td'> {
 }
-/** Props for {@link TableCaption}, the table's `<caption>`. */
+/** Props for the table caption. */
 export interface TableCaptionProps extends PrimitivePropsWithRef<'caption'> {
 }
-/** Props for {@link TableExpandTrigger}, the disclosure button that opens a row's detail row. */
+/** Props for the disclosure button that opens a row's detail row. */
 export interface TableExpandTriggerProps extends PrimitivePropsWithRef<'button'> {
-    /** Id of the row this trigger expands. Must match the `rowId` of the paired `TableExpandedRow`. */
+    /** Id of the row this trigger expands. */
     rowId: string;
 }
-/** Props for {@link TableExpandedRow}, the full-width detail row revealed by a {@link TableExpandTrigger}. */
+/** Props for the full-width detail row revealed by an expand trigger. */
 export interface TableExpandedRowProps extends PrimitivePropsWithRef<'tr'> {
-    /** Id of the row this detail row belongs to. Must match the paired `TableExpandTrigger`'s `rowId`. */
+    /** Id of the row this detail row belongs to. */
     rowId: string;
     /**
-     * How many columns the detail cell spans — set it to the table's column
-     * count so the row doesn't tear the column grid.
-     * @default 1
+     * How many columns the detail cell spans.
+     * @default undefined — the table's own header cell count, so a column added later still spans.
      */
-    colSpan?: number;
+    colSpan?: number | undefined;
 }
-/** Props for {@link TableEmpty}, the full-width row shown in place of body rows when there is no data. */
+/** Props for the full-width row shown when there is no data. */
 export interface TableEmptyProps extends PrimitivePropsWithRef<'tr'> {
     /**
-     * How many columns the empty cell spans — set it to the table's column count.
-     * @default 1
+     * How many columns the empty cell spans.
+     * @default undefined — the table's own header cell count, so a column added later still spans.
      */
-    colSpan?: number;
+    colSpan?: number | undefined;
 }

package/dist/tabs/Tabs.cjs

@@ -1 +1,2 @@
-"use strict";var q=Object.create;var p=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var a in e)p(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of J(e))!U.call(t,o)&&o!==a&&p(t,o,{get:()=>e[o],enumerable:!(r=G(e,o))||r.enumerable});return t};var T=(t,e,a)=>(a=t!=null?q(Q(t)):{},y(e||!t||!t.__esModule?p(a,"default",{value:t,enumerable:!0}):a,t)),X=t=>y(p({},"__esModule",{value:!0}),t);var j={};W(j,{Tabs:()=>k,TabsContent:()=>x,TabsList:()=>C,TabsProvider:()=>L,TabsTrigger:()=>E,makeContentId:()=>b,makeTriggerId:()=>d,useTabsContext:()=>s});module.exports=X(j);var i=T(require("react"),1),R=require("../utils/createContext.cjs"),P=require("../utils/part.cjs"),V=require("../utils/primitive.cjs"),I=require("../utils/useControllableState.cjs"),v=require("react/jsx-runtime"),[L,s]=(0,R.createSafeContext)("Tabs");function d(t,e){return`${t}-trigger-${e}`}function b(t,e){return`${t}-content-${e}`}var k=i.forwardRef(({value:t,defaultValue:e,onValueChange:a,orientation:r="horizontal",activationMode:o="automatic",...n},m)=>{let[f,B]=(0,I.useControllableState)({prop:t,defaultProp:e,onChange:a}),O=i.useId(),[_,z]=i.useState(null);return(0,v.jsx)(L,{baseId:O,value:f,onValueChange:B,orientation:r,activationMode:o,firstEnabledValue:_,setFirstEnabledValue:z,children:(0,v.jsx)(V.Primitive.div,{"data-orientation":r,...n,...(0,P.skdxPart)("tabs","root",n.className),ref:m})})});k.displayName="Tabs";var u=T(require("react"),1),h=require("../utils/composeRefs.cjs"),w=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),c=require("../utils/useRovingFocus.cjs");var D=require("react/jsx-runtime"),Y='[role="tab"]:not([disabled])',Z='[role="tab"][data-state="active"]:not([disabled])',C=u.forwardRef(({loop:t=!0,...e},a)=>{let r=s("TabsList"),o=(0,c.useRovingFocus)({orientation:r.orientation,loop:t,itemSelector:'[role="tab"]'}),n=u.useRef(null),m=(0,h.useComposedRefs)(a,n);return(0,c.useRovingTabStop)(n,Z,"data-value",r.firstEnabledValue,r.setFirstEnabledValue),(0,c.useRovingTabStop)(n,Y,"data-value",r.firstEnabledValue,r.setFirstEnabledValue),(0,D.jsx)(g.Primitive.div,{role:"tablist","aria-orientation":r.orientation,"data-orientation":r.orientation,...e,...(0,w.skdxPart)("tabs","list",e.className),ref:m,onKeyDown:(0,g.composeEventHandlers)(e.onKeyDown,o)})});C.displayName="TabsList";var S=T(require("react"),1),H=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),M=require("../utils/useRovingFocus.cjs");var N=require("react/jsx-runtime"),E=S.forwardRef(({value:t,disabled:e,...a},r)=>{let o=s("TabsTrigger"),n=o.value===t,m=o.firstEnabledValue===null?n&&!e:o.firstEnabledValue===t;return(0,N.jsx)(l.Primitive.button,{type:"button",role:"tab","aria-selected":n,"aria-controls":b(o.baseId,t),id:d(o.baseId,t),"data-state":n?"active":"inactive","data-disabled":e?"":void 0,"data-orientation":o.orientation,"data-value":t,disabled:e,tabIndex:(0,M.rovingTabIndex)(o.firstEnabledValue!==null||o.value!==void 0,m,e),...a,...(0,H.skdxPart)("tabs","trigger",a.className),ref:r,onClick:(0,l.composeEventHandlers)(a.onClick,()=>{e||o.onValueChange(t)}),onFocus:(0,l.composeEventHandlers)(a.onFocus,()=>{o.activationMode==="automatic"&&!e&&!n&&o.onValueChange(t)}),onKeyDown:(0,l.composeEventHandlers)(a.onKeyDown,f=>{[" ","Enter"].includes(f.key)&&!e&&(f.preventDefault(),o.onValueChange(t))})})});E.displayName="TabsTrigger";var F=T(require("react"),1),K=require("../utils/part.cjs"),$=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),x=F.forwardRef(({value:t,forceMount:e,...a},r)=>{let o=s("TabsContent"),n=o.value===t;return e||n?(0,A.jsx)($.Primitive.div,{role:"tabpanel","aria-labelledby":d(o.baseId,t),id:b(o.baseId,t),"data-state":n?"active":"inactive","data-orientation":o.orientation,hidden:!n,tabIndex:0,...a,...(0,K.skdxPart)("tabs","content",a.className),ref:r}):null});x.displayName="TabsContent";0&&(module.exports={Tabs,TabsContent,TabsList,TabsProvider,TabsTrigger,makeContentId,makeTriggerId,useTabsContext});
+'use client';
+"use strict";var se=Object.create;var C=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var be=(e,n)=>{for(var r in n)C(e,r,{get:n[r],enumerable:!0})},L=(e,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of le(n))!ce.call(e,t)&&t!==r&&C(e,t,{get:()=>n[t],enumerable:!(o=ie(n,t))||o.enumerable});return e};var v=(e,n,r)=>(r=e!=null?se(de(e)):{},L(n||!e||!e.__esModule?C(r,"default",{value:e,enumerable:!0}):r,e)),ue=e=>L(C({},"__esModule",{value:!0}),e);var pe={};be(pe,{Tabs:()=>N,TabsContent:()=>E,TabsList:()=>V,TabsProvider:()=>Y,TabsTrigger:()=>P,makeContentId:()=>g,makeTriggerId:()=>T,useTabsContext:()=>p});module.exports=ue(pe);var d=v(require("react"),1),q=require("../utils/createContext.cjs"),G=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs"),W=require("../utils/useControllableState.cjs");var M=v(require("react"),1),F=require("../utils/part.cjs"),K=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),E=({value:e,forceMount:n,tabIndex:r=0,ref:o,...t})=>{let a=p("TabsContent"),s=a.value===e,c=n||s,{setContentMounted:i}=a;return M.useEffect(()=>(i(e,c),()=>i(e,!1)),[i,e,c]),c?(0,H.jsx)(K.Primitive.div,{role:"tabpanel","aria-labelledby":T(a.baseId,e),id:g(a.baseId,e),"data-state":s?"active":"inactive","data-orientation":a.orientation,hidden:!s,tabIndex:r,...t,...(0,F.skdxPart)("tabs","content",t.className),ref:o}):null};E.displayName="TabsContent";var B=v(require("react"),1),A=require("../utils/composeRefs.cjs"),$=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),R=require("../utils/useRovingFocus.cjs");var O=require("react/jsx-runtime"),me='[role="tab"]:not([disabled])',fe='[role="tab"][data-state="active"]:not([disabled])',V=({loop:e=!0,ref:n,...r})=>{let o=p("TabsList"),{arrowNavigatingRef:t}=o,a=(0,R.useRovingFocus)({orientation:o.orientation,loop:e,itemSelector:'[role="tab"]'}),s=B.useRef(null),c=(0,A.useComposedRefs)(n,s);(0,R.useRovingTabStop)(s,fe,"data-value",o.firstEnabledValue,o.setFirstEnabledValue),(0,R.useRovingTabStop)(s,me,"data-value",o.firstEnabledValue,o.setFirstEnabledValue);let i=l=>{let I=l.currentTarget.ownerDocument.activeElement;t.current=!0;try{a(l)}finally{t.current=!1}let b=l.currentTarget.ownerDocument.activeElement;b!==I&&b instanceof HTMLElement&&s.current?.contains(b)&&b.scrollIntoView?.({block:"nearest",inline:"nearest"})};return(0,O.jsx)(x.Primitive.div,{role:"tablist","aria-orientation":o.orientation,"data-orientation":o.orientation,...r,...(0,$.skdxPart)("tabs","list",r.className),ref:c,onKeyDown:(0,x.useComposedEventHandlers)(r.onKeyDown,i)})};V.displayName="TabsList";var _=v(require("react"),1),z=require("../utils/part.cjs"),u=require("../utils/primitive.cjs"),J=require("../utils/useRovingFocus.cjs");var U=require("react/jsx-runtime"),P=({value:e,disabled:n,ref:r,...o})=>{let t=p("TabsTrigger"),a=t.disabled||n||!1,s=t.value===e,c=t.firstEnabledValue===null?s&&!a:t.firstEnabledValue===e,i=_.useRef(!1);return(0,U.jsx)(u.Primitive.button,{type:"button",role:"tab","aria-selected":s,"aria-controls":s||t.mountedContentValues.has(e)?g(t.baseId,e):void 0,id:T(t.baseId,e),"data-state":s?"active":"inactive","data-disabled":a?"":void 0,"data-orientation":t.orientation,"data-value":e,disabled:a,tabIndex:(0,J.rovingTabIndex)(t.firstEnabledValue!==null||t.value!==void 0,c,a),...o,...(0,z.skdxPart)("tabs","trigger",o.className),ref:r,onPointerDown:(0,u.useComposedEventHandlers)(o.onPointerDown,()=>{i.current=!0}),onBlur:(0,u.useComposedEventHandlers)(o.onBlur,()=>{i.current=!1}),onClick:(0,u.composeEventHandlers)(o.onClick,()=>{a||t.onValueChange(e,"pointer")}),onFocus:(0,u.useComposedEventHandlers)(o.onFocus,()=>{let l=i.current||t.arrowNavigatingRef.current;t.activationMode==="automatic"&&l&&!a&&!s&&t.onValueChange(e,i.current?"pointer":"keyboard")}),onKeyDown:(0,u.composeEventHandlers)(o.onKeyDown,l=>{[" ","Enter"].includes(l.key)&&!a&&(l.preventDefault(),t.onValueChange(e,"keyboard"))})})};P.displayName="TabsTrigger";var m=require("react/jsx-runtime"),X=({items:e=[],renderPanel:n,loop:r,"aria-label":o,"aria-labelledby":t})=>(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(V,{loop:r,"aria-label":o,"aria-labelledby":t,children:e.map(a=>(0,m.jsx)(P,{value:a.value,disabled:a.disabled,children:a.label},a.value))}),e.map(a=>(0,m.jsx)(E,{value:a.value,children:n?n(a):a.content},a.value))]});var h=require("react/jsx-runtime"),[Y,p]=(0,q.createSafeContext)("Tabs");function T(e,n){return`${e}-trigger-${n}`}function g(e,n){return`${e}-content-${n}`}var N=({value:e,defaultValue:n,onValueChange:r,orientation:o="horizontal",activationMode:t="automatic",disabled:a=!1,items:s,renderPanel:c,loop:i,children:l,ref:I,...b})=>{let D=d.useRef({previousValue:null,reason:"programmatic"}),[S,Z]=(0,W.useControllableState)({prop:e,defaultProp:n,onChange:f=>{r?.({value:f,...D.current})}}),j=d.useId(),[ee,te]=d.useState(null),ae=d.useRef(!1),[ne,oe]=d.useState(()=>new Set),re=d.useCallback((f,y)=>{oe(k=>{if(k.has(f)===y)return k;let w=new Set(k);return y?w.add(f):w.delete(f),w})},[]);return(0,h.jsx)(Y,{baseId:j,value:S,onValueChange:(f,y)=>{D.current={previousValue:S??null,reason:y},Z(f)},orientation:o,activationMode:t,disabled:a,arrowNavigatingRef:ae,mountedContentValues:ne,setContentMounted:re,firstEnabledValue:ee,setFirstEnabledValue:te,children:(0,h.jsx)(Q.Primitive.div,{"data-orientation":o,"data-disabled":a?"":void 0,...b,...(0,G.skdxPart)("tabs","root",b.className),ref:I,children:l??(0,h.jsx)(X,{items:s,renderPanel:c,loop:i,"aria-label":b["aria-label"],"aria-labelledby":b["aria-labelledby"]})})})};N.displayName="Tabs";0&&(module.exports={Tabs,TabsContent,TabsList,TabsProvider,TabsTrigger,makeContentId,makeTriggerId,useTabsContext});