@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/split-button.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from 'lucide-react';
+import { Button } from './button.js';
+import { ButtonGroup } from './button-group.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+/**
+ * One dominant action and a menu, joined as a single shape.
+ *
+ * **The split is a boundary, and a boundary has a focus contract of its own.**
+ * That is the whole of this Component. The dominant action is one tab stop and
+ * the menu trigger is another, so the reader reaches the control twice and knows
+ * both times that they are still inside one thing; and the two halves are drawn
+ * as one shape, because a `Button` beside a `DropdownMenuTrigger` is two controls
+ * that happen to be near each other. `ButtonGroup` already owns the first half of
+ * that claim and `DropdownMenu` already owns the second, and this is the
+ * composition, so neither is redrawn: the joined frame, the single ring drawn
+ * around the pair and the collapsed inner borders are `ButtonGroup`'s, and the
+ * menu, its typeahead and its Escape handling are `DropdownMenu`'s.
+ *
+ * **Why this is a Component and not a call site, which is the question every
+ * audited upstream variant had to answer.** The composition is three lines, so the
+ * honest case cannot be that it is impossible to write. It is that the boundary
+ * carries three decisions a caller gets wrong in the same direction every time,
+ * and none of the three has anywhere to live but a Component:
+ *
+ * 1. **The cap's frame.** The trigger's frame is `DropdownMenuTrigger`'s, and
+ *    that Component may not be restyled from here: doing so is the override path
+ *    this package does not have. So the cap stays outlined whatever the dominant
+ *    action is, and a caller who wants the cap filled has to write a second menu
+ *    trigger, which is a second focus contract for one control. Publishing
+ *    `capTone` would not fix this; it would be a two-member union whose members
+ *    mean "the menu trigger" and "not the menu trigger", which is a boolean with
+ *    a vocabulary attached to it.
+ * 2. **The step.** The cap's height is the trigger's, and the trigger takes no
+ *    height prop. So there is no `size` here at all: a `size` a caller could
+ *    forward to one half and not the other is a joined group with a notch in it,
+ *    and a notch is the one thing a joined group may not have. Refusing the prop
+ *    is a smaller surface than documenting the trap.
+ * 3. **The three names.** `ButtonGroup` requires a name for the pair and the
+ *    trigger requires a name for itself, so the composition has two mandatory
+ *    accessible names describing one control, supplied on two unrelated
+ *    Components, with nothing tying them together. A caller who forgets the
+ *    trigger's produces a chevron announced as "button", which is the defect this
+ *    gate exists to catch and which no prop combination can catch.
+ *
+ * **The honest cost of the cap, stated rather than restyled away.** The two halves
+ * do not always match, because only one of them may be restyled. With
+ * `variant="default"` or `variant="destructive"` the dominant action is filled and
+ * the cap is outlined, and the group is two-tone. That is a real visual cost and
+ * it is not fixed here on purpose: the fix is a second menu trigger. A caller who
+ * wants one filled shape across both halves needs an upstream request, and
+ * `CONTRIBUTING.md` is where it goes.
+ *
+ * **The second cost is JavaScript, and it is paid by a page that may never open
+ * the menu.** `ButtonGroup` is a server Component and `DropdownMenu` is not, so
+ * composing the two makes this one client Component. A static page whose dominant
+ * action is the only thing it offers pays for a menu it might never open. That is
+ * the price of a menu, and a caller who has no menu to offer composes
+ * `ButtonGroup` and a `Button` instead, which is the arrangement this Component
+ * is not for.
+ *
+ * **An unavailable dominant action is drawn rather than removed, and an
+ * unavailable trigger is the menu's own.** The asymmetry is deliberate and it is
+ * not smoothed over. The dominant action's press this Component can decline
+ * outright, so it carries `aria-disabled`, keeps its place in the tab order and
+ * keeps its half of the shape. The trigger's open state belongs to
+ * `DropdownMenu`, and asking that Component for a drawn-unavailable state would
+ * mean reimplementing the control, so `disabled` goes to the menu and the
+ * trigger takes the state it already had.
+ */
+function SplitButton({ label, primaryLabel, menuLabel, actions, onPrimaryAction, onSecondaryAction, variant = 'outline', disabled = false, className, }) {
+    return (_jsxs(ButtonGroup, { className: className, label: label, children: [_jsx(Button, { "data-slot": "split-button-primary", type: "button", variant: variant, "aria-disabled": disabled || undefined, onClick: disabled ? () => undefined : onPrimaryAction, children: primaryLabel }), _jsxs(DropdownMenu, { disabled: disabled || actions.length === 0, children: [_jsx(DropdownMenuTrigger, { "data-slot": "split-button-menu-trigger", "aria-label": menuLabel, children: _jsx(ChevronDownIcon, { "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", children: actions.map((action) => (_jsxs(DropdownMenuItem, { variant: action.tone === 'danger' ? 'destructive' : 'default', disabled: action.disabled, onClick: () => onSecondaryAction(action.id), children: [action.icon, action.label] }, action.id))) })] })] }));
+}
+export { SplitButton };

package/dist/components/ui/stateful-table.d.ts

@@ -0,0 +1,345 @@
+import { type ReactNode } from 'react';
+import { type TableSortDirection } from './table-sort.js';
+/**
+ * Which way a column is ordered, and how to leave that order.
+ *
+ * `TableSort`'s own union, taken rather than restated, because two Components that
+ * each declared a direction would be two lists to keep in step and the sort
+ * header's whole reason for existing is that it agrees with whatever reorders the
+ * rows.
+ */
+export type StatefulTableDirection = TableSortDirection;
+/**
+ * One column of a StatefulTable that cannot be ordered.
+ *
+ * A separate arm rather than an optional `accessor` beside an optional `sortable`,
+ * and the split is the argument. A sortable column needs a value to sort *by*, and
+ * the value is not always the cell's text: a status column orders `critical,
+ * degraded, healthy` rather than alphabetically, and a column of charts orders on
+ * the number the chart reports. So the accessor is required in the sortable arm and
+ * the `sortable` boolean is absent from this one, and two optionals would be a
+ * combination that type-checks and then cannot sort anything.
+ */
+export type StatefulTableColumn<TRow> = {
+    /** The column's stable key, and what a sort names. */
+    id: string;
+    /** The column's visible name. */
+    header: ReactNode;
+    /** The cell's content for one row. */
+    cell: (row: TRow) => ReactNode;
+    /** Whether this column can be ordered. */
+    sortable?: false;
+};
+/** One column of a StatefulTable that can be ordered, and by what. */
+export type StatefulTableSortableColumn<TRow> = {
+    /** The column's stable key, and what a sort names. */
+    id: string;
+    /** The column's visible name. */
+    header: ReactNode;
+    /** The cell's content for one row. */
+    cell: (row: TRow) => ReactNode;
+    /** This column can be ordered, and the value it orders on. */
+    sortable: true;
+    /**
+     * The value this column orders on, for one row.
+     *
+     * Required, and it is the whole of this Component's authority over the caller's
+     * data: the value sorted on is the caller's and never the cell's text, because a
+     * Component that inferred an accessor from a rendered cell would be deciding the
+     * order of records it cannot read.
+     */
+    accessor: (row: TRow) => string | number;
+};
+/** One column, sortable or not. */
+export type StatefulTableColumnUnion<TRow> = StatefulTableColumn<TRow> | StatefulTableSortableColumn<TRow>;
+/**
+ * Which column is ordered, and which way.
+ *
+ * A single value rather than a per-column record, and the reason is the one
+ * `table-sort` gives for putting `aria-sort` on exactly one header: two columns
+ * both reporting an order is a table claiming to be sorted two ways at once, and a
+ * reader comparing the two hears a contradiction. One column, one direction.
+ */
+export type StatefulTableSort = {
+    /** The id of the column that is ordered. */
+    column: string;
+    /** The way it is ordered. */
+    direction: StatefulTableDirection;
+};
+/**
+ * The state a StatefulTable owns and the caller reads.
+ *
+ * One value rather than four props, and the reason is that these four are not
+ * independent. Which page is showing is a function of the order and the set in every
+ * implementation anyone writes, and four props let a caller hold a page number that
+ * contradicts the sort they have just set, which is a table showing rows that are
+ * not in the order its own header claims. One value is also one place to put, so a
+ * caller can hold it in a reducer, in a store, or in an address query and this
+ * Component does not care which.
+ */
+export type StatefulTableState = {
+    /**
+     * Which column is ordered and which way, or `null` for the caller's own order.
+     *
+     * `null` is the order of the array as it was handed over, and it is reachable from
+     * the control rather than only at mount, because a reader who sorted a column to
+     * find the extreme and no longer cares has to be able to get the original back
+     * from the header they already know. That is `table-sort`'s three-state cycle and
+     * this is where the third state is spent.
+     */
+    sort: StatefulTableSort | null;
+    /** The keys of the rows the reader has selected. */
+    selection: readonly string[];
+    /**
+     * The ids of the columns the reader has hidden.
+     *
+     * Kept beside `selection` rather than folded into the column list for the reason
+     * the sort is a value and not a column field: a column marked hidden in the list
+     * would be undone by every fetch that rebuilds the list, and a caller's columns
+     * say which columns exist rather than which are on screen right now.
+     */
+    hiddenColumns: readonly string[];
+    /**
+     * The page being shown, counting from zero.
+     *
+     * Clamped on the way out rather than refused on the way in, for the reason `Steps`
+     * clamps `current`: an out-of-range page after the caller narrows the set is an
+     * ordinary event, and the reader should land on the last page that has rows on it
+     * rather than on an empty table with an error beside it.
+     */
+    page: number;
+};
+/**
+ * One state change, and which of the four facts it moved.
+ *
+ * `changed` is there so a caller can persist one thing rather than four: a table in
+ * an address wants the sort and the page and not the selection, and a change report
+ * with no field for that makes every caller diff the object themselves. It is called
+ * `visibility` rather than `hiddenColumns` because it names the fact that changed
+ * rather than the field that holds it, and a caller reading a persisted event log is
+ * better served by the former.
+ */
+export type StatefulTableChange = {
+    /** The state to move to. */
+    state: StatefulTableState;
+    /** Which of the four facts changed. */
+    changed: 'sort' | 'selection' | 'visibility' | 'page';
+};
+/**
+ * The props a StatefulTable accepts.
+ *
+ * A declared interface rather than one extended from `Table`'s, and the reason is
+ * this Component: `Table` is presentational and forwards every native table prop, so
+ * extending it would hand this Component a `children` that is a body, a `className`
+ * that is a table's, and no place at all for the four state props that are the
+ * reason it exists.
+ */
+export interface StatefulTableProps<TRow> {
+    /**
+     * The rows, in the order the caller wants them before this Component has reordered
+     * anything.
+     *
+     * Required, and the caller's order is what `sort: null` means. A caller with a
+     * server-side order hands over rows already in that order and a reader who sorts
+     * and then unsorts gets the caller's order back rather than an arbitrary one.
+     */
+    rows: readonly TRow[];
+    /**
+     * The caller's key for a row.
+     *
+     * Required, because selection is a set of keys and reordering maps positions to
+     * rows, and a Component that read identity off a position would select the wrong
+     * row the instant the order changed.
+     */
+    getRowId: (row: TRow) => string;
+    /** The columns, in the order they are shown. */
+    columns: readonly StatefulTableColumnUnion<TRow>[];
+    /**
+     * The state, controlled.
+     *
+     * Required and never defaulted, because a table that kept its own sort and
+     * selection could not be read back by the caller, and a caller who cannot read the
+     * sort cannot put it in an address, cannot restore it, and cannot tell a server
+     * which page to send. Controlled is the decision; an uncontrolled sibling would be
+     * a second way to say the same four facts and the two would disagree within a
+     * release.
+     */
+    state: StatefulTableState;
+    /** Called when any of the four facts changes. */
+    onChange: (change: StatefulTableChange) => void;
+    /**
+     * The table's caption, drawn by `TableCaption` where a caption belongs.
+     *
+     * Optional rather than required because `label` already names the table, and a
+     * caption that repeats the accessible name is a sentence read twice. Pass one
+     * where it says something the name does not: what the set is a slice of, or what
+     * a row means.
+     */
+    caption?: ReactNode;
+    /**
+     * The table's accessible name.
+     *
+     * Required, and a `string` because it goes into `aria-label` and an accessible
+     * name is a string. A table with no name is announced as "table" and a page with
+     * two of them is a page where a reader cannot tell which is which.
+     */
+    label: string;
+    /**
+     * The words read for what pressing a sortable header will do.
+     *
+     * Required, and a function of the *next* direction for the reason `table-sort`
+     * gives at length: a header that announces "sorted ascending" when it is already
+     * ascending tells a reader nothing about the press they are about to make.
+     */
+    announceSort: (column: string, direction: StatefulTableDirection) => string;
+    /**
+     * The label of the control that selects every row on the page.
+     *
+     * Required, and a `string` because it is written into `aria-label` and an
+     * accessible name is a string. It is expected to carry the count, because a
+     * control labelled "Select all" beside twenty rows a reader has not seen is a
+     * claim about the whole set when it means the page.
+     */
+    selectAllLabel: string;
+    /** The accessible name of one row's selection control, given the row's key. */
+    selectRowLabel: (rowKey: string) => string;
+    /**
+     * The label of the control that shows and hides columns.
+     *
+     * Required, and it opens a disclosure rather than sitting as a row of checkboxes
+     * because which columns exist is a fact about the caller's data and the screen it
+     * is on, and a control that is a row of boxes beside the header on a phone has
+     * taken the table's whole width to describe itself.
+     */
+    columnsLabel: ReactNode;
+    /**
+     * The words shown when the set has no rows.
+     *
+     * Required, and required because an empty `<tbody>` is a table with a shape and
+     * nothing in it, which reads as a rendering failure. A sentence is the caller's,
+     * because a set that is empty because it is loading and a set that is empty
+     * because there is nothing are two different sentences and only the caller knows
+     * which one applies.
+     */
+    emptyLabel: ReactNode;
+    /**
+     * The words on the control that goes to the previous page.
+     *
+     * Required, and required as a pair with `nextPageLabel` because the two are the
+     * same control in two positions: a caller who localises one and not the other has
+     * a control that looks localised and is half of it, which is the state
+     * `PaginationPrevious` exists to prevent.
+     */
+    previousPageLabel: string;
+    /** The words on the control that goes to the next page. */
+    nextPageLabel: string;
+    /**
+     * The words for where the reader is in the set, given the page and how many there
+     * are.
+     *
+     * Required, and a function because "Page 2 of 9" is false in a language that puts
+     * the total first, and a pager that assembled the sentence would have assembled it
+     * in one of them. It is also the accessible name of the pager, so a reader who
+     * arrives at that row is told where they are before they touch either control.
+     */
+    pageLabel: (page: number, pages: number) => string;
+    /**
+     * How many rows a page holds.
+     *
+     * A number and not a class, because the bound is data: the same table is forty rows
+     * in a sidebar and eight on a full page, and a caller who could only say
+     * `max-h-80` would be picking one of those for the other. It has no effect on a
+     * set smaller than it.
+     *
+     * @defaultValue 10
+     */
+    pageSize?: number;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+}
+/**
+ * A row set that owns its sort, its selection, its column visibility and its page,
+ * and hands all four to the caller as one value.
+ *
+ * **Prism's `table` is presentational and `table-sort` is a header cell, and this
+ * is the thing neither of them is.** `Table` forwards every native table prop and
+ * holds nothing; `TableSort` reports a direction and leaves the reordering to the
+ * caller. Between them is the half every consumer writes again: the row order, which
+ * rows are selected, which columns are on screen and which page is showing, and the
+ * four have to agree with each other after every change. That agreement is the
+ * Component. A caller holding them as four independent props gets a page number that
+ * does not match the sort they have just set, which is a table whose rows are not in
+ * the order its own header claims.
+ *
+ * **One state value rather than four props, for the same reason.** The four are not
+ * independent: which page is showing is a function of the order and the set in every
+ * implementation anyone writes, and four props let a caller hold a contradiction. One
+ * value is also one place to hold it, so a caller can put it in a reducer, in their
+ * store, or in an address query and this Component does not care which. The cost is
+ * that a caller changing one fact spreads the rest, which is one line and is the
+ * price of the four being unable to disagree.
+ *
+ * **It owns the order, and the accessor is how.** This is the one place a Component
+ * in this package decides something about the caller's data, and the refusal to do
+ * it any other way is the design. A column is sortable only when it carries an
+ * `accessor`, so the value sorted on is the caller's and never the cell's text: a
+ * status column that orders `critical, degraded, healthy` and a column of charts that
+ * orders on the number the chart reports are both expressible here, and neither is
+ * guessable from a cell. That is why the column type is a union of a sortable arm and
+ * a plain one rather than two optionals: an optional accessor beside a `sortable`
+ * boolean is a combination that type-checks and then cannot sort anything.
+ *
+ * **Numbers compare as numbers and everything else goes through the platform's own
+ * collator.** The `Intl.Collator` half is not a nicety: a name column ordered with
+ * `<` puts every uppercase name before every lowercase one in half the languages a
+ * product is sold in, and the comparator that fixes that belongs to the platform
+ * rather than to this package. The locale is the runtime's own, which is right on a
+ * server and wrong on a multilingual page, so it is stated here rather than guessed.
+ * `numeric` is on so a column of identifiers orders 2 before 10, which is the one
+ * case a reader always notices.
+ *
+ * **A server-ordered set is the original order, and that is what `sort: null` means.**
+ * A caller with a server-side order hands over rows already in it, and a reader who
+ * sorts and then unsorts gets the caller's order back. The three-state cycle on the
+ * header is `table-sort`'s and it is spent here, in the third state: one route back
+ * to the original, and it is the header they already know.
+ *
+ * **Selection is a set of the caller's keys, and the header's control covers the
+ * page rather than the set.** The two differ whenever the caller pages, and
+ * conflating them is the defect this Component exists to prevent: a "select all"
+ * that selected every row on the server when twenty are on screen acted on four
+ * hundred rows a reader never saw. So the header's checkbox covers the rows on the
+ * current page, it is `indeterminate` when some of them are selected, and the words
+ * are the caller's.
+ *
+ * **Column visibility is the reader's preference and lives beside the columns rather
+ * than inside them.** A column marked hidden in the caller's array would be undone by
+ * every fetch that rebuilds the array, and a caller's columns say which columns exist
+ * rather than which are on screen right now. Nothing is hidden on width alone: a
+ * table with eleven columns on a phone is a hard problem, and pruning columns by
+ * guessing at a width takes away a column the reader needed without telling them,
+ * which is a worse failure than a scroll.
+ *
+ * **The header is a real `<tr>` of `<th scope="col">` cells and the sortable ones are
+ * `TableSort`, composed.** Neither is this Component's decision: a header row of
+ * `div`s is a grid with no column names in it, and a screen reader moving across a
+ * table announces a column rather than a button. `TableSort` carries the direction,
+ * the mark and the announcement, and the caller's `announceSort` is passed straight
+ * through to it, so the sentence a reader hears about a press is the caller's.
+ *
+ * **The pager is drawn only when there is more than one page**, because a pager on a
+ * set of four rows is a row of controls describing a choice the reader does not have.
+ * Its controls are `aria-disabled` rather than natively disabled on the end pages,
+ * for the reason `FormWizard` gives on its back control: a control that leaves the
+ * tab order answers a press with silence.
+ *
+ * **It is a client Component**, because every one of the four changes happens after
+ * the reader acts, and because `state`, `onChange` and the row and column accessors
+ * are functions the caller hands it, which is a client-to-client boundary wherever it
+ * is written. What that costs is the price of every client control: a server
+ * Component may render one page of rows once with the state already in place, and
+ * what it may not do is let the reader change any of the four facts.
+ */
+declare function StatefulTable({ rows, getRowId, columns, state, onChange, caption, label, announceSort, selectAllLabel, selectRowLabel, columnsLabel, emptyLabel, previousPageLabel, nextPageLabel, pageLabel, pageSize, className, }: StatefulTableProps<any>): import("react").JSX.Element;
+export { StatefulTable };
+//# sourceMappingURL=stateful-table.d.ts.map

package/dist/components/ui/stateful-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateful-table.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stateful-table.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/stateful-table.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Button } from './button.js';
+import { Checkbox } from './checkbox.js';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from './table.js';
+import { TableSort } from './table-sort.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A row set that owns its sort, its selection, its column visibility and its page,
+ * and hands all four to the caller as one value.
+ *
+ * **Prism's `table` is presentational and `table-sort` is a header cell, and this
+ * is the thing neither of them is.** `Table` forwards every native table prop and
+ * holds nothing; `TableSort` reports a direction and leaves the reordering to the
+ * caller. Between them is the half every consumer writes again: the row order, which
+ * rows are selected, which columns are on screen and which page is showing, and the
+ * four have to agree with each other after every change. That agreement is the
+ * Component. A caller holding them as four independent props gets a page number that
+ * does not match the sort they have just set, which is a table whose rows are not in
+ * the order its own header claims.
+ *
+ * **One state value rather than four props, for the same reason.** The four are not
+ * independent: which page is showing is a function of the order and the set in every
+ * implementation anyone writes, and four props let a caller hold a contradiction. One
+ * value is also one place to hold it, so a caller can put it in a reducer, in their
+ * store, or in an address query and this Component does not care which. The cost is
+ * that a caller changing one fact spreads the rest, which is one line and is the
+ * price of the four being unable to disagree.
+ *
+ * **It owns the order, and the accessor is how.** This is the one place a Component
+ * in this package decides something about the caller's data, and the refusal to do
+ * it any other way is the design. A column is sortable only when it carries an
+ * `accessor`, so the value sorted on is the caller's and never the cell's text: a
+ * status column that orders `critical, degraded, healthy` and a column of charts that
+ * orders on the number the chart reports are both expressible here, and neither is
+ * guessable from a cell. That is why the column type is a union of a sortable arm and
+ * a plain one rather than two optionals: an optional accessor beside a `sortable`
+ * boolean is a combination that type-checks and then cannot sort anything.
+ *
+ * **Numbers compare as numbers and everything else goes through the platform's own
+ * collator.** The `Intl.Collator` half is not a nicety: a name column ordered with
+ * `<` puts every uppercase name before every lowercase one in half the languages a
+ * product is sold in, and the comparator that fixes that belongs to the platform
+ * rather than to this package. The locale is the runtime's own, which is right on a
+ * server and wrong on a multilingual page, so it is stated here rather than guessed.
+ * `numeric` is on so a column of identifiers orders 2 before 10, which is the one
+ * case a reader always notices.
+ *
+ * **A server-ordered set is the original order, and that is what `sort: null` means.**
+ * A caller with a server-side order hands over rows already in it, and a reader who
+ * sorts and then unsorts gets the caller's order back. The three-state cycle on the
+ * header is `table-sort`'s and it is spent here, in the third state: one route back
+ * to the original, and it is the header they already know.
+ *
+ * **Selection is a set of the caller's keys, and the header's control covers the
+ * page rather than the set.** The two differ whenever the caller pages, and
+ * conflating them is the defect this Component exists to prevent: a "select all"
+ * that selected every row on the server when twenty are on screen acted on four
+ * hundred rows a reader never saw. So the header's checkbox covers the rows on the
+ * current page, it is `indeterminate` when some of them are selected, and the words
+ * are the caller's.
+ *
+ * **Column visibility is the reader's preference and lives beside the columns rather
+ * than inside them.** A column marked hidden in the caller's array would be undone by
+ * every fetch that rebuilds the array, and a caller's columns say which columns exist
+ * rather than which are on screen right now. Nothing is hidden on width alone: a
+ * table with eleven columns on a phone is a hard problem, and pruning columns by
+ * guessing at a width takes away a column the reader needed without telling them,
+ * which is a worse failure than a scroll.
+ *
+ * **The header is a real `<tr>` of `<th scope="col">` cells and the sortable ones are
+ * `TableSort`, composed.** Neither is this Component's decision: a header row of
+ * `div`s is a grid with no column names in it, and a screen reader moving across a
+ * table announces a column rather than a button. `TableSort` carries the direction,
+ * the mark and the announcement, and the caller's `announceSort` is passed straight
+ * through to it, so the sentence a reader hears about a press is the caller's.
+ *
+ * **The pager is drawn only when there is more than one page**, because a pager on a
+ * set of four rows is a row of controls describing a choice the reader does not have.
+ * Its controls are `aria-disabled` rather than natively disabled on the end pages,
+ * for the reason `FormWizard` gives on its back control: a control that leaves the
+ * tab order answers a press with silence.
+ *
+ * **It is a client Component**, because every one of the four changes happens after
+ * the reader acts, and because `state`, `onChange` and the row and column accessors
+ * are functions the caller hands it, which is a client-to-client boundary wherever it
+ * is written. What that costs is the price of every client control: a server
+ * Component may render one page of rows once with the state already in place, and
+ * what it may not do is let the reader change any of the four facts.
+ */
+function StatefulTable({ rows, getRowId, columns, state, onChange, caption, label, announceSort, selectAllLabel, selectRowLabel, columnsLabel, emptyLabel, previousPageLabel, nextPageLabel, pageLabel, pageSize = 10, className, }) {
+    const generated = useId();
+    const [columnsOpen, setColumnsOpen] = useState(false);
+    const columnsId = `${generated}-columns`;
+    const shown = columns.filter((column) => !state.hiddenColumns.includes(column.id));
+    const ordered = state.sort === null ? [...rows] : [...rows].sort(comparator(state.sort, columns));
+    const pages = Math.max(1, Math.ceil(ordered.length / Math.max(1, pageSize)));
+    const page = Math.min(Math.max(Math.trunc(state.page), 0), pages - 1);
+    const visible = ordered.slice(page * pageSize, page * pageSize + pageSize);
+    const selected = new Set(state.selection);
+    const pageKeys = visible.map(getRowId);
+    const everyOnPage = pageKeys.length > 0 && pageKeys.every((key) => selected.has(key));
+    const someOnPage = pageKeys.some((key) => selected.has(key));
+    const move = (next, changed) => onChange({ state: { ...state, ...next }, changed });
+    return (_jsxs("div", { "data-slot": "stateful-table", className: cn('flex w-full flex-col gap-3', className), children: [_jsxs("div", { "data-slot": "stateful-table-toolbar", className: "flex items-center justify-end", children: [_jsx(Button, { "data-slot": "stateful-table-columns-toggle", type: "button", variant: "outline", size: "sm", "aria-expanded": columnsOpen, "aria-controls": columnsId, onClick: () => setColumnsOpen((open) => !open), children: columnsLabel }), _jsx("div", { id: columnsId, "data-slot": "stateful-table-columns", hidden: !columnsOpen, className: "border-border bg-popover text-popover-foreground absolute end-4 mt-9 flex flex-col gap-2 rounded-md border p-3 shadow-md", children: columns.map((column) => (_jsxs("label", { "data-slot": "stateful-table-column-toggle", className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { checked: !state.hiddenColumns.includes(column.id), onCheckedChange: (next) => move({
+                                        hiddenColumns: next
+                                            ? state.hiddenColumns.filter((id) => id !== column.id)
+                                            : [...state.hiddenColumns, column.id],
+                                    }, 'visibility') }), column.header] }, column.id))) })] }), _jsxs(Table, { "data-slot": "stateful-table-frame", "aria-label": label, className: "w-full", children: [caption === undefined ? null : _jsx(TableCaption, { children: caption }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { "data-slot": "stateful-table-select-all", checked: everyOnPage, indeterminate: someOnPage && !everyOnPage, "aria-label": selectAllLabel, onCheckedChange: (next) => move({
+                                            // The page's rows and not the set's. A control that selected
+                                            // every row on the server when twenty are on screen acted on
+                                            // four hundred rows the reader never saw, and that is the defect
+                                            // this Component exists to prevent rather than to ship.
+                                            selection: next
+                                                ? [...new Set([...state.selection, ...pageKeys])]
+                                                : state.selection.filter((key) => !pageKeys.includes(key)),
+                                        }, 'selection') }) }), shown.map((column) => (_jsx(TableHead, { children: column.sortable === true ? (_jsx(TableSort, { column: column.id, direction: state.sort !== null && state.sort.column === column.id
+                                            ? state.sort.direction
+                                            : 'none', onDirectionChange: (direction) => move({
+                                            sort: direction === 'none' ? null : { column: column.id, direction },
+                                            // Back to the first page, because a page number chosen for
+                                            // one order means nothing in another and the reader who
+                                            // changed the order is on a page that may have nothing on
+                                            // it.
+                                            page: 0,
+                                        }, 'sort'), announce: (direction) => announceSort(column.id, direction), children: column.header })) : (column.header) }, column.id)))] }) }), _jsx(TableBody, { children: visible.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: shown.length + 1, "data-slot": "stateful-table-empty", children: emptyLabel }) })) : (visible.map((row) => {
+                            const key = getRowId(row);
+                            const isSelected = selected.has(key);
+                            return (_jsxs(TableRow, { "data-slot": "stateful-table-row", "data-selected": isSelected ? 'true' : undefined, "data-state": isSelected ? 'selected' : undefined, className: isSelected ? 'bg-muted' : undefined, children: [_jsx(TableCell, { className: "w-10", children: _jsx(Checkbox, { "data-slot": "stateful-table-select-row", checked: isSelected, "aria-label": selectRowLabel(key), onCheckedChange: (next) => move({
+                                                selection: next
+                                                    ? [...state.selection, key]
+                                                    : state.selection.filter((held) => held !== key),
+                                            }, 'selection') }) }), shown.map((column) => (_jsx(TableCell, { "data-slot": "stateful-table-cell", children: column.cell(row) }, column.id)))] }, key));
+                        })) })] }), pages <= 1 ? null : (_jsxs("nav", { "data-slot": "stateful-table-pager", "aria-label": pageLabel(page, pages), className: "flex items-center justify-end gap-2", children: [_jsx(Button, { "data-slot": "stateful-table-previous", type: "button", variant: "outline", size: "sm", "aria-disabled": page === 0 || undefined, onClick: () => {
+                            if (page === 0)
+                                return;
+                            move({ page: page - 1 }, 'page');
+                        }, children: previousPageLabel }), _jsx("span", { "data-slot": "stateful-table-page", "aria-hidden": "true", className: "text-muted-foreground text-sm tabular-nums", children: pageLabel(page, pages) }), _jsx(Button, { "data-slot": "stateful-table-next", type: "button", variant: "outline", size: "sm", "aria-disabled": page === pages - 1 || undefined, onClick: () => {
+                            if (page === pages - 1)
+                                return;
+                            move({ page: page + 1 }, 'page');
+                        }, children: nextPageLabel })] }))] }));
+}
+/**
+ * The comparator a sort uses, read off the caller's own accessor.
+ *
+ * A column with no accessor returns a comparator that preserves the order, and it is
+ * unreachable rather than defensive: `TableSort` is rendered only in the arm of the
+ * column union that carries one, so the type has already said the accessor is there.
+ * The guard is here because a caller can cast their columns into the union, and a
+ * silently unsorted column is the one failure this Component cannot afford.
+ */
+function comparator({ column, direction }, columns) {
+    const found = columns.find((candidate) => candidate.id === column);
+    const accessor = found?.accessor;
+    if (accessor === undefined)
+        return () => 0;
+    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+    const sign = direction === 'descending' ? -1 : 1;
+    return (a, b) => {
+        const left = accessor(a);
+        const right = accessor(b);
+        if (typeof left === 'number' && typeof right === 'number')
+            return (left - right) * sign;
+        return collator.compare(String(left), String(right)) * sign;
+    };
+}
+export { StatefulTable };