@skdx/react 0.26.0

package/dist/table/TableExpandedRow.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TableExpandedRowProps } from './types.cjs';
+/**
+ * The full-width detail row a `TableExpandTrigger` reveals: a `<tr>` whose
+ * single `<td colspan>` holds the row's expanded content, with `data-state` of
+ * `"expanded"`/`"collapsed"`. Render it as the next sibling of the row it
+ * belongs to, inside the same `TableBody`.
+ *
+ * It stays mounted while collapsed and is `hidden` instead — the trigger's
+ * `aria-controls` has to resolve to a real element for assistive tech to follow
+ * it, which an unmounted row could not do.
+ *
+ * @example
+ * ```tsx
+ * <TableExpandedRow rowId={row.id} colSpan={3}>
+ *   <dl>…</dl>
+ * </TableExpandedRow>
+ * ```
+ */
+export declare const TableExpandedRow: React.ForwardRefExoticComponent<Omit<TableExpandedRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/table/TableExpandedRow.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TableExpandedRowProps } from './types.js';
+/**
+ * The full-width detail row a `TableExpandTrigger` reveals: a `<tr>` whose
+ * single `<td colspan>` holds the row's expanded content, with `data-state` of
+ * `"expanded"`/`"collapsed"`. Render it as the next sibling of the row it
+ * belongs to, inside the same `TableBody`.
+ *
+ * It stays mounted while collapsed and is `hidden` instead — the trigger's
+ * `aria-controls` has to resolve to a real element for assistive tech to follow
+ * it, which an unmounted row could not do.
+ *
+ * @example
+ * ```tsx
+ * <TableExpandedRow rowId={row.id} colSpan={3}>
+ *   <dl>…</dl>
+ * </TableExpandedRow>
+ * ```
+ */
+export declare const TableExpandedRow: React.ForwardRefExoticComponent<Omit<TableExpandedRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/table/TableFooter.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TableFooterProps } from './types.cjs';
+/**
+ * `<tfoot>` section, e.g. for column totals.
+ *
+ * @example
+ * ```tsx
+ * <TableFooter>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>{total}</TableCell>
+ *   </TableRow>
+ * </TableFooter>
+ * ```
+ */
+export declare const TableFooter: React.ForwardRefExoticComponent<Omit<TableFooterProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/table/TableFooter.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TableFooterProps } from './types.js';
+/**
+ * `<tfoot>` section, e.g. for column totals.
+ *
+ * @example
+ * ```tsx
+ * <TableFooter>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>{total}</TableCell>
+ *   </TableRow>
+ * </TableFooter>
+ * ```
+ */
+export declare const TableFooter: React.ForwardRefExoticComponent<Omit<TableFooterProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/table/TableHeader.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { TableHeaderProps } from './types.cjs';
+/**
+ * `<thead>` section, typically wrapping a header `TableRow` of `TableHeaderCell`s.
+ *
+ * @example
+ * ```tsx
+ * <TableHeader>
+ *   <TableRow>
+ *     <TableHeaderCell sortKey="name">Name</TableHeaderCell>
+ *   </TableRow>
+ * </TableHeader>
+ * ```
+ */
+export declare const TableHeader: React.ForwardRefExoticComponent<Omit<TableHeaderProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/table/TableHeader.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { TableHeaderProps } from './types.js';
+/**
+ * `<thead>` section, typically wrapping a header `TableRow` of `TableHeaderCell`s.
+ *
+ * @example
+ * ```tsx
+ * <TableHeader>
+ *   <TableRow>
+ *     <TableHeaderCell sortKey="name">Name</TableHeaderCell>
+ *   </TableRow>
+ * </TableHeader>
+ * ```
+ */
+export declare const TableHeader: React.ForwardRefExoticComponent<Omit<TableHeaderProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/table/TableHeaderCell.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { TableHeaderCellProps } from './types.cjs';
+/**
+ * A `<th>`. Passing `sortKey` makes it sortable: the cell sets `aria-sort`
+ * (`"ascending"`, `"descending"`, or `"none"`) and `data-sort-direction`, and
+ * wraps its children in a `TableColumnHeaderSortTrigger` (the APG
+ * sortable-table pattern) that cycles the table's sort for that column through
+ * ascending → descending → unsorted on click or Enter/Space. The `<th>` itself
+ * is never focusable. Without `sortKey`, it's a plain header cell.
+ *
+ * Render a `TableColumnHeaderSortTrigger` among the children yourself — to put
+ * a `TableSortIndicator` inside the button, say — and the cell skips its own,
+ * so there is always exactly one sort button per column.
+ *
+ * Passing `resizable` (plus a `columnKey`, defaulting to `sortKey`) appends a
+ * `TableColumnResizeTrigger`: dragging it, or pressing Arrow Left/Right
+ * (Home/End for the bounds) while it has focus, writes the column's width into
+ * the table's `columnWidths` state, clamped to `minWidth`/`maxWidth`. A stored
+ * width is published on the cell as an inline `width` *and* as the
+ * `--skdx-table-column-width` custom property, so sticky overlays and shadows
+ * can follow the column without re-measuring it.
+ *
+ * @example
+ * ```tsx
+ * <TableHeaderCell sortKey="amount" resizable minWidth={80}>Amount</TableHeaderCell>
+ * ```
+ */
+export declare const TableHeaderCell: React.ForwardRefExoticComponent<Omit<TableHeaderCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/table/TableHeaderCell.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { TableHeaderCellProps } from './types.js';
+/**
+ * A `<th>`. Passing `sortKey` makes it sortable: the cell sets `aria-sort`
+ * (`"ascending"`, `"descending"`, or `"none"`) and `data-sort-direction`, and
+ * wraps its children in a `TableColumnHeaderSortTrigger` (the APG
+ * sortable-table pattern) that cycles the table's sort for that column through
+ * ascending → descending → unsorted on click or Enter/Space. The `<th>` itself
+ * is never focusable. Without `sortKey`, it's a plain header cell.
+ *
+ * Render a `TableColumnHeaderSortTrigger` among the children yourself — to put
+ * a `TableSortIndicator` inside the button, say — and the cell skips its own,
+ * so there is always exactly one sort button per column.
+ *
+ * Passing `resizable` (plus a `columnKey`, defaulting to `sortKey`) appends a
+ * `TableColumnResizeTrigger`: dragging it, or pressing Arrow Left/Right
+ * (Home/End for the bounds) while it has focus, writes the column's width into
+ * the table's `columnWidths` state, clamped to `minWidth`/`maxWidth`. A stored
+ * width is published on the cell as an inline `width` *and* as the
+ * `--skdx-table-column-width` custom property, so sticky overlays and shadows
+ * can follow the column without re-measuring it.
+ *
+ * @example
+ * ```tsx
+ * <TableHeaderCell sortKey="amount" resizable minWidth={80}>Amount</TableHeaderCell>
+ * ```
+ */
+export declare const TableHeaderCell: React.ForwardRefExoticComponent<Omit<TableHeaderCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/table/TableRow.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TableRowProps } from './types.cjs';
+/**
+ * A `<tr>`. When given `rowId` and the table's `selectionMode` isn't
+ * `'none'`, sets `aria-selected` and `data-state="selected"` while selected,
+ * and clicking anywhere in the row (outside interactive descendants matching
+ * `button, a, input, [role="button"]`) toggles its selection.
+ * Shift-clicking selects every row between the last row toggled and this one,
+ * in `'multiple'` mode.
+ *
+ * @example
+ * ```tsx
+ * <TableRow rowId={row.id}>
+ *   <TableCell>{row.name}</TableCell>
+ * </TableRow>
+ * ```
+ */
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/table/TableRow.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TableRowProps } from './types.js';
+/**
+ * A `<tr>`. When given `rowId` and the table's `selectionMode` isn't
+ * `'none'`, sets `aria-selected` and `data-state="selected"` while selected,
+ * and clicking anywhere in the row (outside interactive descendants matching
+ * `button, a, input, [role="button"]`) toggles its selection.
+ * Shift-clicking selects every row between the last row toggled and this one,
+ * in `'multiple'` mode.
+ *
+ * @example
+ * ```tsx
+ * <TableRow rowId={row.id}>
+ *   <TableCell>{row.name}</TableCell>
+ * </TableRow>
+ * ```
+ */
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/table/TableRowSelectCheckbox.d.cts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { TableRowSelectCheckboxProps } from './types.cjs';
+/**
+ * One row's selection checkbox, driven by the table's selection state rather
+ * than its own. Put it in a `TableCell` of the row it belongs to.
+ *
+ * **Shift-click selects a range**: every row between the last row toggled and
+ * this one, resolved in DOM order at click time (so under virtualization it
+ * spans the rendered window). Space activates it, as on any checkbox — hold
+ * Shift for the same range behaviour.
+ *
+ * It renders a real `<button role="checkbox">`, which `TableRow` already
+ * excludes from its own click-to-select handling, so the click counts once.
+ *
+ * Give each one a row-specific accessible name — `"Select Aster"`, not
+ * `"Select row"` repeated down the column. There is deliberately no default:
+ * only you know what names the row.
+ *
+ * @example
+ * ```tsx
+ * <TableRow rowId={row.id}>
+ *   <TableCell>
+ *     <TableRowSelectCheckbox rowId={row.id} aria-label={`Select ${row.name}`}>
+ *       <CheckboxIndicator>✓</CheckboxIndicator>
+ *     </TableRowSelectCheckbox>
+ *   </TableCell>
+ * </TableRow>
+ * ```
+ */
+export declare const TableRowSelectCheckbox: React.ForwardRefExoticComponent<Omit<TableRowSelectCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/table/TableRowSelectCheckbox.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { TableRowSelectCheckboxProps } from './types.js';
+/**
+ * One row's selection checkbox, driven by the table's selection state rather
+ * than its own. Put it in a `TableCell` of the row it belongs to.
+ *
+ * **Shift-click selects a range**: every row between the last row toggled and
+ * this one, resolved in DOM order at click time (so under virtualization it
+ * spans the rendered window). Space activates it, as on any checkbox — hold
+ * Shift for the same range behaviour.
+ *
+ * It renders a real `<button role="checkbox">`, which `TableRow` already
+ * excludes from its own click-to-select handling, so the click counts once.
+ *
+ * Give each one a row-specific accessible name — `"Select Aster"`, not
+ * `"Select row"` repeated down the column. There is deliberately no default:
+ * only you know what names the row.
+ *
+ * @example
+ * ```tsx
+ * <TableRow rowId={row.id}>
+ *   <TableCell>
+ *     <TableRowSelectCheckbox rowId={row.id} aria-label={`Select ${row.name}`}>
+ *       <CheckboxIndicator>✓</CheckboxIndicator>
+ *     </TableRowSelectCheckbox>
+ *   </TableCell>
+ * </TableRow>
+ * ```
+ */
+export declare const TableRowSelectCheckbox: React.ForwardRefExoticComponent<Omit<TableRowSelectCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/table/TableSelectAllCheckbox.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { TableSelectAllCheckboxProps, TableSelectAllScope } from './types.cjs';
+/**
+ * Default accessible name — the count and the scope, never a bare "Select all".
+ * "Select all 40 rows on this page" and "Select all 1,204 rows" are different
+ * promises, and the whole point of `scope` is that the user hears which one.
+ */
+export declare function defaultSelectAllLabel(scope: TableSelectAllScope, count: number): string;
+/**
+ * The header checkbox that selects or clears a set of rows at once. Tri-state:
+ * checked when every id in `rowIds` is selected, `indeterminate` when only some
+ * are, unchecked otherwise (including over an empty list — a select-all above
+ * no rows reads unchecked, not vacuously checked).
+ *
+ * `rowIds` and `scope` are both required, and that is the point. The table
+ * holds no row registry, so "select all" means exactly the ids you hand it:
+ * pass the rendered page's ids with `scope="page"`, or the whole dataset's with
+ * `scope="all"`. The two are indistinguishable until the table paginates or
+ * virtualizes, at which point a "select all" that silently covered only the
+ * visible window is a bug found in production — so the API makes you say which
+ * you meant, and says it in the accessible name too.
+ *
+ * Meaningful only with `selectionMode="multiple"`.
+ *
+ * @example
+ * ```tsx
+ * <TableHeaderCell>
+ *   <TableSelectAllCheckbox scope="page" rowIds={pageRows.map((row) => row.id)}>
+ *     <CheckboxIndicator>✓</CheckboxIndicator>
+ *   </TableSelectAllCheckbox>
+ * </TableHeaderCell>
+ * ```
+ */
+export declare const TableSelectAllCheckbox: React.ForwardRefExoticComponent<Omit<TableSelectAllCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/table/TableSelectAllCheckbox.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { TableSelectAllCheckboxProps, TableSelectAllScope } from './types.js';
+/**
+ * Default accessible name — the count and the scope, never a bare "Select all".
+ * "Select all 40 rows on this page" and "Select all 1,204 rows" are different
+ * promises, and the whole point of `scope` is that the user hears which one.
+ */
+export declare function defaultSelectAllLabel(scope: TableSelectAllScope, count: number): string;
+/**
+ * The header checkbox that selects or clears a set of rows at once. Tri-state:
+ * checked when every id in `rowIds` is selected, `indeterminate` when only some
+ * are, unchecked otherwise (including over an empty list — a select-all above
+ * no rows reads unchecked, not vacuously checked).
+ *
+ * `rowIds` and `scope` are both required, and that is the point. The table
+ * holds no row registry, so "select all" means exactly the ids you hand it:
+ * pass the rendered page's ids with `scope="page"`, or the whole dataset's with
+ * `scope="all"`. The two are indistinguishable until the table paginates or
+ * virtualizes, at which point a "select all" that silently covered only the
+ * visible window is a bug found in production — so the API makes you say which
+ * you meant, and says it in the accessible name too.
+ *
+ * Meaningful only with `selectionMode="multiple"`.
+ *
+ * @example
+ * ```tsx
+ * <TableHeaderCell>
+ *   <TableSelectAllCheckbox scope="page" rowIds={pageRows.map((row) => row.id)}>
+ *     <CheckboxIndicator>✓</CheckboxIndicator>
+ *   </TableSelectAllCheckbox>
+ * </TableHeaderCell>
+ * ```
+ */
+export declare const TableSelectAllCheckbox: React.ForwardRefExoticComponent<Omit<TableSelectAllCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/table/TableSortIndicator.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { TableSortIndicatorProps } from './types.cjs';
+/**
+ * The arrow (or caret, or badge) showing which way a column is sorted. A
+ * `<span aria-hidden="true">` carrying `data-sort-direction`
+ * (`"asc"`/`"desc"`/`"none"`) and, under `multiSort`, `data-sort-index` — the
+ * column's 0-based position in the sort order.
+ *
+ * `aria-hidden` is deliberate and not configurable: the header cell already
+ * publishes `aria-sort`, and the sort button announces the new order through
+ * the live announcer. An indicator that also spoke would say it a third time.
+ *
+ * It renders whatever children you give it and stays mounted in all three
+ * states, so a CSS-driven arrow can rotate rather than swap.
+ *
+ * @example
+ * ```tsx
+ * <TableHeaderCell sortKey="amount">
+ *   <TableColumnHeaderSortTrigger>
+ *     Amount
+ *     <TableSortIndicator>▲</TableSortIndicator>
+ *   </TableColumnHeaderSortTrigger>
+ * </TableHeaderCell>
+ * ```
+ */
+export declare const TableSortIndicator: React.ForwardRefExoticComponent<Omit<TableSortIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/table/TableSortIndicator.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { TableSortIndicatorProps } from './types.js';
+/**
+ * The arrow (or caret, or badge) showing which way a column is sorted. A
+ * `<span aria-hidden="true">` carrying `data-sort-direction`
+ * (`"asc"`/`"desc"`/`"none"`) and, under `multiSort`, `data-sort-index` — the
+ * column's 0-based position in the sort order.
+ *
+ * `aria-hidden` is deliberate and not configurable: the header cell already
+ * publishes `aria-sort`, and the sort button announces the new order through
+ * the live announcer. An indicator that also spoke would say it a third time.
+ *
+ * It renders whatever children you give it and stays mounted in all three
+ * states, so a CSS-driven arrow can rotate rather than swap.
+ *
+ * @example
+ * ```tsx
+ * <TableHeaderCell sortKey="amount">
+ *   <TableColumnHeaderSortTrigger>
+ *     Amount
+ *     <TableSortIndicator>▲</TableSortIndicator>
+ *   </TableColumnHeaderSortTrigger>
+ * </TableHeaderCell>
+ * ```
+ */
+export declare const TableSortIndicator: React.ForwardRefExoticComponent<Omit<TableSortIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/table/index.d.cts

@@ -0,0 +1,17 @@
+export * from './Table.cjs';
+export { TableHeader } from './TableHeader.cjs';
+export { TableBody } from './TableBody.cjs';
+export { TableFooter } from './TableFooter.cjs';
+export { TableRow } from './TableRow.cjs';
+export { TableHeaderCell } from './TableHeaderCell.cjs';
+export { TableCell } from './TableCell.cjs';
+export { TableCaption } from './TableCaption.cjs';
+export { TableExpandTrigger } from './TableExpandTrigger.cjs';
+export { TableExpandedRow } from './TableExpandedRow.cjs';
+export { TableEmpty } from './TableEmpty.cjs';
+export { TableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.cjs';
+export { TableSortIndicator } from './TableSortIndicator.cjs';
+export { TableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.cjs';
+export { TableRowSelectCheckbox } from './TableRowSelectCheckbox.cjs';
+export { TableColumnResizeTrigger } from './TableColumnResizeTrigger.cjs';
+export type { TableProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableCaptionProps, TableSortState, TableSort, SortDirection, TableSelectionMode, TableSelectAllScope, TableColumnWidths, TableExpandTriggerProps, TableExpandedRowProps, TableEmptyProps, TableColumnHeaderSortTriggerProps, TableSortIndicatorProps, TableSelectAllCheckboxProps, TableRowSelectCheckboxProps, TableColumnResizeTriggerProps, } from './types.cjs';

package/dist/table/index.d.ts

@@ -0,0 +1,17 @@
+export * from './Table.js';
+export { TableHeader } from './TableHeader.js';
+export { TableBody } from './TableBody.js';
+export { TableFooter } from './TableFooter.js';
+export { TableRow } from './TableRow.js';
+export { TableHeaderCell } from './TableHeaderCell.js';
+export { TableCell } from './TableCell.js';
+export { TableCaption } from './TableCaption.js';
+export { TableExpandTrigger } from './TableExpandTrigger.js';
+export { TableExpandedRow } from './TableExpandedRow.js';
+export { TableEmpty } from './TableEmpty.js';
+export { TableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.js';
+export { TableSortIndicator } from './TableSortIndicator.js';
+export { TableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.js';
+export { TableRowSelectCheckbox } from './TableRowSelectCheckbox.js';
+export { TableColumnResizeTrigger } from './TableColumnResizeTrigger.js';
+export type { TableProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableCaptionProps, TableSortState, TableSort, SortDirection, TableSelectionMode, TableSelectAllScope, TableColumnWidths, TableExpandTriggerProps, TableExpandedRowProps, TableEmptyProps, TableColumnHeaderSortTriggerProps, TableSortIndicatorProps, TableSelectAllCheckboxProps, TableRowSelectCheckboxProps, TableColumnResizeTriggerProps, } from './types.js';