@crewlethq/ui 0.2.0 → 0.3.0

package/dist/DataTable/DataTable.d.ts

@@ -0,0 +1,615 @@
+import { type ReactNode } from 'react';
+/**
+ * DataTable, the sortable table the whole product reads its records from, in
+ * two visual variants (default and compact) over one data, sort, pagination
+ * and persistence model.
+ *
+ * THE FOUR RULES THAT DECIDE ITS SHAPE, each of them a defect that reached a
+ * reader before it was one:
+ *
+ * 1. THE SORT CONTROL IS A BUTTON INSIDE THE HEADER CELL, and `aria-sort`
+ *    sits on the cell. A `th` with a click handler is neither focusable nor
+ *    announced as a control, so a keyboard reader could see which way a column
+ *    was sorted and could not change it.
+ * 2. THE COMPARATOR IS THREE-WAY, ABSENT LAST AND INDEX-STABLE. An absent
+ *    value is not a small one: a seat with no meter has not spent nothing, it
+ *    has not been measured, so it sorts below every measurement in BOTH
+ *    directions. A comparator that returns -1 for equal operands (the
+ *    `a < b ? 1 : -1` idiom) makes equal rows trade places on every render
+ *    under V8's sort, which is a list that shuffles itself while somebody
+ *    reads it.
+ * 3. A ROW THAT NAVIGATES IS A LINK, and a press that started on a control
+ *    inside the row is that control's press and nobody else's. Both halves
+ *    were wrong: a clickable `tr` could not be reached by keyboard, and a
+ *    click on a chip inside it navigated twice.
+ * 4. NOTHING IT PERSISTS IS TRUSTED ON THE WAY BACK IN. A corrupt entry under
+ *    `storageKey` used to throw from a state initialiser, which is a blank
+ *    screen rather than a table, and `storageKey` stays optional because a
+ *    surface whose state belongs in the URL should read no storage at all.
+ */
+/**
+ * A row, as the table itself sees one: an opaque record it reads named
+ * columns out of. A caller names its own row type through the generic, and
+ * every callback on the column and on the table is typed with it.
+ */
+export type DataTableRow = Record<string, unknown>;
+export type DataTableSortDirection = 'asc' | 'desc';
+/**
+ * What a second and third press on the same header do.
+ *
+ * `asc-desc-none` is the default: the third press clears the sort and hands
+ * the rows back in the order the server sent them, which on a live table is
+ * the only ordering that means anything. `asc-desc` is for a table that has
+ * no meaningful unsorted order, where clearing the sort would look like a
+ * glitch.
+ */
+export type DataTableSortCycle = 'asc-desc-none' | 'asc-desc';
+/**
+ * How a row is marked as a state rather than as an identity.
+ *
+ * Three, and they are the rail colours a state may take: `info` for something
+ * that is happening, `warning` for something a person has to look at, and
+ * `danger` for something that failed. There is no brand tone, because the
+ * accent means "where the reader is" and a selected row already spends it.
+ */
+export type DataTableRowTone = 'info' | 'warning' | 'danger';
+/**
+ * The column order a table draws, given the order a reader arranged and the
+ * columns the caller declares now.
+ *
+ * Kept order first, so nothing a reader did is lost; anything newly declared
+ * goes in BESIDE THE COLUMN IT WAS DECLARED AFTER, wherever the reader has
+ * since put that one, so a column that arrives in the middle of the set does
+ * not appear at the far end of the row. Counting the earlier columns instead
+ * of finding the nearest one puts it at the right DEPTH of a row the reader
+ * has rearranged rather than in the right PLACE: with the last two columns
+ * swapped, a column declared third landed second.
+ */
+export declare function reconcileOrder(current: readonly string[], declared: readonly string[]): string[];
+export interface DataTableColumn<TRow = DataTableRow> {
+    label: ReactNode;
+    render?: (row: TRow, value: unknown) => ReactNode;
+    sortable?: boolean;
+    defaultVisible?: boolean;
+    /**
+     * Whether a reader may hide this column. Defaults to true.
+     *
+     * FALSE IS FOR THE COLUMN THAT SAYS WHICH ROW THIS IS: the node, the seat,
+     * the name. Hidden, every remaining cell is a fact about something the
+     * reader can no longer identify, which is a table of numbers belonging to
+     * nobody. The tick is drawn, and drawn fixed with a reason beside it, rather
+     * than left out: a column missing from the list reads as a column that is
+     * not there at all.
+     */
+    hideable?: boolean;
+    defaultWidth?: number;
+    /** Override the value used when sorting this column (defaults to row[key]). */
+    sortValue?: (row: TRow) => string | number | Date | null | undefined;
+    /**
+     * Which way the FIRST press on this header sorts. A name reads ascending
+     * first and a cost reads descending first, because the interesting end of
+     * each is the one the reader came for.
+     */
+    firstDirection?: DataTableSortDirection;
+    /**
+     * Cell alignment. A right-aligned column is a column of numbers, so it also
+     * takes tabular figures and stops wrapping: a digit that changes width is a
+     * column that jiggles on every push.
+     */
+    align?: 'left' | 'right' | 'center';
+    /** Shrink to the content and never wrap. For a status chip or a short id. */
+    shrink?: boolean;
+    /**
+     * Monospace cell content at a smaller font, suitable for opaque ids,
+     * timestamps, and similar fixed-pitch values. Compact variant only.
+     */
+    mono?: boolean;
+    /**
+     * When true, the cell value is wrapped in a hover-revealed copy
+     * affordance. The clipboard value defaults to String(row[key]) but
+     * can be overridden via copyValue. Compact variant only.
+     */
+    copyable?: boolean;
+    copyValue?: (row: TRow) => unknown;
+    /**
+     * Fixed pixel-or-string width applied directly to the <th>/<td>. A
+     * column with `width` is locked at exactly that width; `defaultWidth`
+     * is a starting width that resizing and the fit-to-container pass can
+     * change.
+     */
+    width?: string | number;
+    /**
+     * Pin the column to the right edge of the scroll container so it
+     * stays visible regardless of horizontal scroll or how the operator
+     * resizes the surrounding data columns. Typical use is a trailing
+     * row-action link or affordance that must always be reachable
+     * without scrolling. Compact variant only; the default variant
+     * already uses fixed widths that do not overflow.
+     */
+    sticky?: 'right';
+}
+export interface DataTableSortState {
+    key: string;
+    direction: DataTableSortDirection;
+}
+/**
+ * Single action shown in the row-actions kebab menu. `rowActions` returns
+ * a list of these per row; falsy entries are dropped, so a caller can
+ * include an action conditionally with `condition && { ... }`.
+ */
+export interface DataTableRowAction {
+    label: string;
+    onClick?: () => void;
+    /** A glyph component, drawn before the label. */
+    icon?: ReactNode;
+    /** A destructive action, drawn in the critical ink. */
+    danger?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+    description?: string;
+    divider?: 'before' | 'after';
+}
+export type DataTableVariant = 'default' | 'compact';
+/**
+ * The value the All chip stands for.
+ *
+ * A SENTINEL RATHER THAN A COUNT. It used to be written as `data.length`,
+ * which is not "all" but "as many as there were at the instant somebody
+ * pressed it": a reader who chose All on twelve rows was on twelve per page,
+ * and the table quietly began paging the moment a thirteenth arrived. On an
+ * empty table the same press wrote 0, and a page of zero rows hid every row
+ * that came afterwards, for the life of the screen and, with a `storageKey`,
+ * for every session after it. A word cannot go stale, so the word is what is
+ * stored, what a controlled caller is handed, and what the chip compares
+ * itself against.
+ */
+export declare const ALL_ITEMS = "all";
+/** How many rows a page holds: a count, or every row there is. */
+export type DataTableItemsPerPage = number | typeof ALL_ITEMS;
+/**
+ * Row density for the compact variant. The two presets cover the two
+ * places a compact table usually sits:
+ *
+ *   - 'compact'     the 2xs header over the compact cell step, tight
+ *                   padding. For full-width list pages where density
+ *                   matters more than air.
+ *   - 'comfortable' the small cell step with more padding and extra outer
+ *                   space on the first and last cells, so the rows align
+ *                   with the inner padding of the card they sit in.
+ *
+ * Has no effect on variant="default" since the default variant uses
+ * its own resizable column widths.
+ */
+export type DataTableDensity = 'compact' | 'comfortable';
+/**
+ * Every string the table renders on its own behalf, in one prop.
+ *
+ * ONE PROP RATHER THAN THIRTY. A table draws a lot of chrome it invents the
+ * words for, and each of those words is one a product may have to say
+ * differently or in another language. They are gathered here so the signature
+ * stays readable and so a caller can override one without restating the rest;
+ * `DATA_TABLE_LABELS` is the English default, exported so an override can
+ * start from it.
+ */
+export interface DataTableLabels {
+    settings: string;
+    resetColumns: string;
+    resetConfirmed: string;
+    cancel: string;
+    apply: string;
+    settingsTitle: string;
+    itemsPerPage: string;
+    allItems: string;
+    /**
+     * HOW MANY ROWS All IS, read after the word itself, so the chip's whole name
+     * is "All 1,284 rows". The word alone is a promise with no size on it, and
+     * the size is what a reader is deciding: every row of a list of forty is a
+     * page, and every row of a list of forty thousand is a layout the browser
+     * will spend seconds on.
+     */
+    allItemsCount: (rows: number) => string;
+    wrapLines: string;
+    wrapLinesHint: string;
+    columnsSection: string;
+    columnsHint: string;
+    moveUp: (column: string) => string;
+    moveDown: (column: string) => string;
+    /** Why Move up does nothing, for the column already at the top. */
+    atTop: (column: string) => string;
+    atBottom: (column: string) => string;
+    /** The drag handle, which is also the arrow-key control beside it. */
+    reorder: (column: string) => string;
+    reorderHint: string;
+    /** Where a column landed, said after a move nobody can see happen. */
+    columnMoved: (column: string, position: number, of: number) => string;
+    /** Why a column's tick is fixed: the caller's rule, and the table's own. */
+    columnAlwaysShown: string;
+    columnLastShown: string;
+    pagination: string;
+    firstPage: string;
+    previousPage: string;
+    nextPage: string;
+    lastPage: string;
+    page: (page: number, of: number) => string;
+    /**
+     * WHICH ROWS THIS PAGE IS, said after which page it is. "Page 2 of 7" tells
+     * a reader where they are in the chrome; it does not tell them what they
+     * are looking at, and on a table whose page size the same panel sets, the
+     * range is the answer to both "how far in am I" and "how much is there".
+     */
+    pageRange: (from: number, to: number, total: number) => string;
+    expandRow: string;
+    collapseRow: string;
+    expandAll: string;
+    collapseAll: string;
+    resize: (column: string) => string;
+    /** The width a resize handle is at, for a reader who cannot see the edge. */
+    resizeWidth: (pixels: number) => string;
+    copyCell: (column: string) => string;
+    rowActions: string;
+    /** The action column's own header, for a reader moving across a row. */
+    actions: string;
+    /** Said of a row the caller marks archived, in that row's own title. */
+    archivedRow: (label: string) => string;
+    /** Read in place of the dash a cell with no value is drawn as. */
+    absent: string;
+    /** Said while the rows are being fetched and none are on screen yet. */
+    loading: string;
+    tone: Record<DataTableRowTone, string>;
+}
+export declare const DATA_TABLE_LABELS: DataTableLabels;
+export interface DataTableProps<TRow = DataTableRow> {
+    data?: TRow[];
+    columns?: Record<string, DataTableColumn<TRow>>;
+    /**
+     * Where the operator's own layout choices are kept. Leave it out and the
+     * table reads no storage at all, which is what a surface whose state
+     * belongs in the URL wants.
+     *
+     * WHAT IS KEPT HERE, AND WHAT IS NOT. Two of this table's choices are facts
+     * about the browser somebody is reading in: whether cells wrap at this
+     * window width, and how wide each column was dragged. Those are stored, and
+     * only here. The other five, which page, how many rows a page holds, which
+     * columns are shown, in what order, and the sort, are facts about WHAT IS ON
+     * SCREEN: they are what a reader would send somebody, so each one has a
+     * controlled pair a screen can keep in its own history and hand back. A
+     * controlled choice is never written to storage, even with a key set, and
+     * never read from it either, because the caller holding it has somewhere
+     * better and the two would disagree on the first reload.
+     */
+    storageKey?: string;
+    defaultColumnOrder?: string[] | null;
+    /**
+     * The order the columns are drawn in, as a controlled pair with
+     * `onColumnOrderChange`. Names every declared column; a column the caller
+     * leaves out is put back beside the one it was declared after.
+     *
+     * Without the pair, the order a reader arranges in the settings frame lives
+     * in `localStorage` under `storageKey`, so it cannot be shared and, on a
+     * surface with no key, cannot survive a reload at all.
+     */
+    columnOrder?: string[];
+    onColumnOrderChange?: (next: string[]) => void;
+    defaultItemsPerPage?: DataTableItemsPerPage;
+    itemsPerPageOptions?: number[];
+    /**
+     * How many rows a page holds, as a controlled pair with
+     * `onItemsPerPageChange`. `ALL_ITEMS` is every row.
+     *
+     * Passing `onItemsPerPageChange` is also what offers the size to a table
+     * that does NOT slice its own rows: the number then means something (the
+     * caller reads it), so the frame draws the row of chips.
+     */
+    itemsPerPage?: DataTableItemsPerPage;
+    onItemsPerPageChange?: (next: DataTableItemsPerPage) => void;
+    /**
+     * Which page the table is on, 1-indexed, as a controlled pair with
+     * `onPageChange`. It is where the reader is, so it belongs in the screen's
+     * own history: a link to page four of an event log is a link somebody sends.
+     */
+    page?: number;
+    onPageChange?: (next: number) => void;
+    /**
+     * How many pages there are, for a caller that slices or fetches its own.
+     *
+     * Required to draw the chevrons for a table with `paginated={false}`, and
+     * not defaulted: a bound nobody supplied would be a Next button disabled on
+     * page one of a server's ten. With `paginated` on, the table counts its own
+     * rows and this is ignored.
+     */
+    pageCount?: number;
+    /**
+     * Minimum column width, in pixels, that the resize handle will
+     * honor. Operators can drag a column down to this width but no
+     * further; trying to shrink past it pins the column at the floor.
+     * Default 80px, which keeps short labels and the sort indicator
+     * legible without being chatty.
+     */
+    minColumnWidth?: number;
+    /**
+     * Enable the per-column drag-to-resize handle on every header.
+     * Defaults to true. Set to false on tables whose width should be
+     * controlled entirely by the fit-to-container pass (read-mostly
+     * lists, single-purpose tables that should not invite the
+     * operator to reflow the row). When off, no resize handles
+     * render anywhere on the table.
+     */
+    resizable?: boolean;
+    onRowAction?: ((row: TRow) => void) | null;
+    actionLabel?: string;
+    /** The action column's glyph. A component, not a name. */
+    actionIcon?: ReactNode;
+    getRowKey?: (row: TRow) => string | number;
+    /** Pulls the row key from a fixed property (alternative to getRowKey). */
+    rowKey?: string;
+    /**
+     * What an empty table says. A node, so an EmptyState with its own title,
+     * cause and action goes here: "nothing happened", "nothing could be read"
+     * and "not configured" are three different facts and a reader has to be
+     * told which one this is.
+     */
+    emptyMessage?: ReactNode;
+    /**
+     * What sits after the last row when there are no more to fetch. Left out,
+     * the end of the rows is silent, which is right for a table that is simply
+     * short and wrong for a feed somebody has paged to the bottom of.
+     */
+    endMessage?: ReactNode;
+    showActions?: boolean;
+    className?: string;
+    /**
+     * Visual treatment.
+     * - 'default': roomier cells with the settings cog in the Actions
+     *   column header; suited to directory-style tables an operator
+     *   reshapes and revisits.
+     * - 'compact': lighter chrome, tight padding, uppercase headers,
+     *   full-row loading and error states, and the settings cog beside the
+     *   pager rather than in the header row. That pair is drawn in the
+     *   table's own bar, in its own header where it has one, or on the header
+     *   of the card the table fills. Designed for dense list pages.
+     * Both variants honour `resizable` and open the same settings frame.
+     */
+    variant?: DataTableVariant;
+    /**
+     * Row density for the compact variant. Defaults to 'compact'.
+     * See the DataTableDensity docs for what each preset paints.
+     */
+    density?: DataTableDensity;
+    /**
+     * How tall the rows may grow before they scroll, which is ALSO what pins the
+     * column names and paints the band they need to be read over the rows
+     * passing behind them. A number is pixels; a string is any CSS length.
+     *
+     * ONE PROP, because a pinned header and a bounded body are one thing. The
+     * rows already sit in a scroller of their own (the table has to be able to
+     * overflow sideways, and a box that scrolls in one axis scrolls in both), so
+     * a `position: sticky` header pins against THAT box and against nothing
+     * else. Left unbounded it is as tall as its rows, never scrolls, and the
+     * pin has nothing to happen against: a table told to pin its header and not
+     * told how tall to be simply does not pin it, which is a boolean whose true
+     * case does nothing. Naming the height is the whole of what a caller has to
+     * decide, and it cannot be said without also meaning the pin.
+     *
+     * Unset, the rows are as tall as they are and the header row is an ordinary
+     * row of names on whatever the table stands on, which is what a table the
+     * PAGE scrolls wants.
+     */
+    maxBodyHeight?: number | string;
+    /**
+     * Controlled sort state. When provided, the table delegates sort to
+     * the caller (typical pairing: an external sort menu shares state
+     * with the column headers). When omitted, sort is internal.
+     */
+    sort?: DataTableSortState | null;
+    onSortChange?: (next: DataTableSortState | null) => void;
+    /**
+     * Which column the table opens sorted on, and which order Reset puts back.
+     *
+     * It seeds the sort only while the sort is the table's own, but it is what
+     * BOTH resets mean by "default" either way: a caller holding the sort still
+     * has to say what the default IS, or Reset to Default can only offer to
+     * order the rows by nothing.
+     */
+    defaultSort?: DataTableSortState | null;
+    /** What a second and third press on the same header do. */
+    sortCycle?: DataTableSortCycle;
+    /**
+     * Holds the order a sort produced until a header is pressed again.
+     *
+     * For a LIVE table. Without it, a table sorted by a number that a push
+     * updates re-ranks itself under the reader's cursor several times a second,
+     * so the row somebody is reading is not the row they click. With it, the
+     * order is taken once, when the sort is chosen; rows that arrive afterwards
+     * join the end until the next press re-ranks everything.
+     */
+    stableOrder?: boolean;
+    /**
+     * Multi-action menu per row. When supplied, an actions column is
+     * appended on the right that renders a kebab menu. Takes precedence
+     * over onRowAction (the single-button affordance).
+     */
+    rowActions?: (row: TRow) => Array<DataTableRowAction | null | undefined | false>;
+    /** Dim rows the predicate marks as archived, with a left edge accent. */
+    archivedPredicate?: (row: TRow) => boolean;
+    archivedLabel?: string;
+    /**
+     * Skeleton loading state. While true and no rows are present, the
+     * body renders shimmer bars inside the real table structure (one
+     * bar per visible column) so column alignment, paddings, and row
+     * heights match the data that replaces them, no layout shift when
+     * the fetch lands. Tables that already have rows keep showing them
+     * during a refresh.
+     */
+    loading?: boolean;
+    /** Number of shimmer rows painted while loading. Default 5. */
+    skeletonRows?: number;
+    /** Renders a single full-row error message when truthy. Wins over empty. */
+    error?: ReactNode;
+    /**
+     * Whether the TABLE slices the rows into pages. When false the caller
+     * slices them, and says how many there are with `pageCount` if it wants the
+     * chevrons drawn.
+     */
+    paginated?: boolean;
+    /** When false, the settings cog and Actions column header are suppressed. */
+    showSettings?: boolean;
+    /**
+     * Fires when a row's surface is clicked. Used by click-to-detail tables
+     * (an order row opening its detail page, a log entry opening a drawer).
+     * The row becomes focusable and takes Enter and Space, and a press that
+     * began on a control inside the row belongs to that control alone.
+     */
+    onRowClick?: (row: TRow) => void;
+    /**
+     * Where a row leads, for a row that navigates.
+     *
+     * A REAL LINK, not a click handler: the first cell carries an anchor whose
+     * hit area covers the row, so the row can be opened in a new tab, its
+     * address copied, and read by a screen reader as the link it is. Prefer it
+     * to `onRowClick` wherever the destination is a URL.
+     */
+    getRowHref?: (row: TRow) => string | null | undefined;
+    /**
+     * Marks a row as a state. The row takes a rail in the tone's colour and a
+     * word for a reader who cannot see the rail, because colour is never the
+     * only carrier of a state.
+     */
+    rowTone?: (row: TRow) => DataTableRowTone | null | undefined;
+    /** Whether a row is the selected one: `aria-selected` and the selection ring. */
+    isSelected?: (row: TRow) => boolean;
+    /**
+     * Optional secondary row rendered immediately below each main row,
+     * spanning the full column width. Returning null skips it for that
+     * row. Used by tree-like tables (for example API keys grouped under
+     * their owner) where each entity owns an attached detail strip that
+     * visually belongs to the main row but does not share its column
+     * layout.
+     */
+    renderAccessoryRow?: (row: TRow) => ReactNode | null | undefined;
+    /**
+     * Slot rendered above the table header (and inside the same root
+     * wrapper) for filter bars, search inputs, or batch-action toolbars.
+     * uilet is intentionally agnostic about what goes here, the caller
+     * composes whichever primitives match its domain (Select, Input,
+     * datetime-local, etc.). The slot is rendered exactly once per
+     * mount, regardless of pagination state.
+     */
+    renderToolbar?: ReactNode;
+    /**
+     * A band BETWEEN the toolbar and the rows, inside the same panel, for what
+     * the toolbar has switched on: the chips a list screen draws for its active
+     * filters, a selection count, a batch action bar.
+     *
+     * It is a slot of its own rather than more of `renderToolbar` because the
+     * two are different rows: the toolbar is a row of controls the table's own
+     * pagination and settings share, and this is the state those controls
+     * produced. Stacked into one slot, the controls at the table's right edge
+     * would centre themselves against a two-line block. Left out, no band is
+     * drawn at all, so a screen with no chips on has no empty strip.
+     */
+    renderFilterBar?: ReactNode;
+    /**
+     * Clear-filters affordance for tables whose renderToolbar slot
+     * carries filter controls. When onClearFilters is supplied and
+     * filtersActive is true, a "Clear filters" link button renders at
+     * the end of the filter slot; clicking it fires the callback so
+     * the caller resets its own filter state. The button stays hidden
+     * while filtersActive is false so an untouched toolbar carries no
+     * dead control.
+     */
+    onClearFilters?: () => void;
+    filtersActive?: boolean;
+    /** Label override for the clear-filters button. */
+    clearFiltersLabel?: string;
+    /**
+     * A value that changes whenever the caller's own filters change, so the
+     * table can go back to the first page.
+     *
+     * THE PAGE IS RESET BY A FILTER OR A SORT, AND BY NOTHING ELSE. It used to
+     * reset whenever the row COUNT changed, which on a live table is whenever
+     * anything happened: a reader on page four of an activity feed was thrown
+     * back to page one by an event they were not looking at.
+     */
+    filterKey?: string | number;
+    /**
+     * Which columns are shown, as a controlled pair with
+     * `onVisibleColumnsChange`.
+     *
+     * Without the pair the table owns the choice and keeps it in
+     * `localStorage` under `storageKey`, so a surface that passes neither can
+     * never bring back a column hidden by `defaultVisible: false`. Supplied,
+     * the caller keeps it wherever its other state lives, which for a dashboard
+     * screen is the URL.
+     *
+     * EITHER WAY, THE SETTINGS FRAME IS THE WAY IN, so a caller that passes the
+     * pair and `showSettings={false}` has taken the reader's way in with it and
+     * owes them a control of its own. The pair still drives the table: what it
+     * says is what is drawn, whoever changed it.
+     */
+    visibleColumns?: Record<string, boolean>;
+    onVisibleColumnsChange?: (next: Record<string, boolean>) => void;
+    /**
+     * When supplied, each row becomes expandable. The chevron button in the
+     * leading cell toggles a detail panel rendered immediately below the row,
+     * spanning the full column width. Returning null from the function
+     * suppresses expansion for that row.
+     *
+     * Mutually exclusive with onRowClick (expansion takes the click);
+     * combine with rowActions freely since the kebab stops propagation.
+     * ANY NUMBER OF ROWS MAY BE OPEN AT ONCE: opening one closes nothing, and
+     * the header chevron opens or closes every row on the page.
+     */
+    renderExpandedRow?: (row: TRow) => ReactNode | null | undefined;
+    /** Optional initial expanded row key (resolved via the row-key resolver). */
+    defaultExpandedKey?: string | number | null;
+    /**
+     * Cursor-pagination footer. When hasMore is true, the table renders
+     * a centered "Load more" button below the rows that fires onLoadMore.
+     * The button is disabled while loadingMore is true. When hasMore is
+     * false, `endMessage` says so, or nothing does.
+     *
+     * Independent from the built-in client-side paginated prop: cursor
+     * pagination is server-driven (caller fetches and appends rows),
+     * client pagination slices a fully loaded dataset.
+     */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
+    loadMoreLabel?: string;
+    /**
+     * Optional table header rendered above the toolbar. The title is the
+     * section name (e.g. "Projects"), the description is a one-line
+     * explanation of what the rows represent, and icon is an optional
+     * glyph rendered to the left of the title (the same icon, title and
+     * description header a settings card uses). Folding them into the table
+     * primitive lets the entire surface, header + toolbar + table, share the
+     * same card boundary and spacing without each caller recomposing the
+     * `<header><h2/><p/></header>` pattern.
+     *
+     * When a header is present, the table's right-side controls
+     * (pagination chevrons + settings cog) move ONTO the header row so
+     * the section title and the controls share the same line. The
+     * caller-supplied filter slot (renderToolbar) renders on its own
+     * row below the header.
+     *
+     * A TABLE THAT FILLS A CARD USUALLY WANTS THE CARD'S HEADER INSTEAD, which
+     * carries the icon, the name and the count, and which takes the same
+     * controls with nothing passed: see `Card.Header` and `useCardHeaderSlot`.
+     * This one is for a table that is the whole of its own surface.
+     */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** The header's glyph. A component, not a name. */
+    icon?: ReactNode;
+    /**
+     * Initial value for the Wrap lines toggle.
+     * When true, cells wrap their content with overflow-wrap: anywhere.
+     * When false, cells stay on a single line and truncate with an
+     * ellipsis. Persisted under `${storageKey}_wrapLines` when a
+     * storageKey is provided.
+     */
+    defaultWrapLines?: boolean;
+    /** Every string the table renders itself. Merged over the English defaults. */
+    labels?: Partial<DataTableLabels>;
+}
+export declare const DataTable: <TRow>({ data, columns, storageKey, defaultColumnOrder, columnOrder: columnOrderProp, onColumnOrderChange, defaultItemsPerPage, itemsPerPage: itemsPerPageProp, onItemsPerPageChange, page: pageProp, onPageChange, pageCount, minColumnWidth, resizable, itemsPerPageOptions, onRowAction, actionLabel, actionIcon, getRowKey, rowKey, emptyMessage, endMessage, showActions, className, variant, density, maxBodyHeight, sort: sortProp, onSortChange, defaultSort, sortCycle, stableOrder, rowActions, archivedPredicate, archivedLabel, loading, skeletonRows, error, paginated, showSettings, onRowClick, getRowHref, rowTone, isSelected, renderAccessoryRow, renderToolbar, renderFilterBar, onClearFilters, filtersActive, clearFiltersLabel, filterKey, visibleColumns: visibleColumnsProp, onVisibleColumnsChange, renderExpandedRow, defaultExpandedKey, hasMore, onLoadMore, loadingMore, loadMoreLabel, title, description, icon, defaultWrapLines, labels: labelOverrides, }: DataTableProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/dist/DataTable/RowActionsMenu.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableRowAction } from './DataTable.js';
+export interface RowActionsMenuProps {
+    actions: Array<DataTableRowAction | null | undefined | false>;
+    /** The trigger's accessible name. */
+    label?: string;
+}
+export declare const RowActionsMenu: ({ actions, label }: RowActionsMenuProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/DataTable/index.d.ts

@@ -0,0 +1,7 @@
+import './DataTable.css';
+export { DataTable, DATA_TABLE_LABELS, ALL_ITEMS } from './DataTable.js';
+export type { DataTableColumn, DataTableDensity, DataTableItemsPerPage, DataTableLabels, DataTableProps, DataTableRow, DataTableRowAction, DataTableRowTone, DataTableSortCycle, DataTableSortDirection, DataTableSortState, DataTableVariant, } from './DataTable.js';
+export { CopyableCell } from './CopyableCell.js';
+export type { CopyableCellProps } from './CopyableCell.js';
+export { RowActionsMenu } from './RowActionsMenu.js';
+export type { RowActionsMenuProps } from './RowActionsMenu.js';

package/dist/DataTable/index.js

@@ -0,0 +1,14 @@
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-EHMQQHYR.js';
+import '../chunk-FBZAKNSX.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-2EOKFKHX.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-2PRH365R.js';
+import '../chunk-V663QU4R.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';