nexus-shared 1.1.21 → 3.0.0

package/dist/Interfaces/FormInterfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/Interfaces/InputInterfaces.d.ts

@@ -0,0 +1,141 @@
+import type { ReactNode } from "react";
+/**
+ * How a field shows its label:
+ * - `standard`: above the box. Easiest to scan, and the default.
+ * - `outlined`: inside the box like a placeholder, rising onto the top border on focus or once there is a value.
+ * - `inbox`: small, inside the top of a taller box.
+ */
+export type InputDesign = "standard" | "outlined" | "inbox";
+/** When a field shows its own validation message. Submitting the form always shows it. */
+export type ValidateOn = "blur" | "change" | "submit";
+/** A regular expression with the message shown when a value does not match. Plain strings, so params stay serializable. */
+export interface TextPattern {
+    /** Regular expression source. It must match the whole value, as with the HTML `pattern` attribute. */
+    source: string;
+    /** Shown when the value does not match. */
+    message: string;
+}
+/** Custom check. Receives the trimmed value, also when it is empty; returns a message to fail. */
+export type TextValidator = (value: string) => string | null | undefined;
+/** Validation rules for text, named like the HTML attributes. */
+export interface TextRules {
+    required?: boolean;
+    /** Fewest characters, counted like the HTML attribute. Not checked on an empty value; use `required` for that. */
+    minLength?: number;
+    /** Most characters. Inputs also stop typing at this length. */
+    maxLength?: number;
+    /** A `TEXT_PATTERNS` entry, a regular expression source, or a `RegExp`. Not checked on an empty value. */
+    pattern?: TextPattern | string | RegExp;
+    /** Message for a `pattern` given as a string or `RegExp`. Default: "<field> is not valid." */
+    patternMessage?: string;
+    /** Runs after the built-in rules pass. */
+    validate?: TextValidator;
+}
+/** Custom check for a number. Receives the value, or `null` when the field is empty; returns a message to fail. */
+export type NumberValidator = (value: number | null) => string | null | undefined;
+/** Validation rules for a number, named like the HTML attributes. */
+export interface NumberRules {
+    required?: boolean;
+    /** Smallest value allowed. Below 0 also allows typing a minus sign. */
+    min?: number;
+    /** Largest value allowed. */
+    max?: number;
+    /** Runs after the built-in rules pass. */
+    validate?: NumberValidator;
+}
+/** How a number is shown. Plain values, so they can come from params. */
+export interface NumberFormatOptions {
+    /** Most digits after the decimal point. Typing stops there, and other values round to it. `0` allows whole numbers only. */
+    decimals?: number;
+    /** Always shows `decimals` digits, e.g. 1,250.00 for amounts. */
+    fixedDecimals?: boolean;
+    /** Group separators while the field is not being edited: 1,250,000. */
+    grouping?: boolean;
+    /** Locale of the separators, e.g. `en-IN` for 12,50,000 or `de-DE` for 1.250.000,5. Default `en-US`, so server and browser agree. */
+    locale?: string;
+}
+/** The value of a choice. Numbers are kept as numbers, so ids from an API come back with their type. */
+export type OptionValue = string | number;
+/** One option of a checkbox group, a radio group, and later a dropdown. */
+export interface ChoiceOption<T extends OptionValue = string> {
+    value: T;
+    label: ReactNode;
+    /** A second line under the label. */
+    description?: ReactNode;
+    /** Shown before the label, e.g. `<Icon name="wifi" />`. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+/** `default`: a box or circle beside each label. `cards`: each option is a card, for choices that need a description. */
+export type ChoiceDesign = "default" | "cards";
+/** Custom check for a single checkbox or switch; returns a message to fail. */
+export type CheckValidator = (checked: boolean) => string | null | undefined;
+/** Validation rules for a single checkbox or switch. */
+export interface CheckRules {
+    /** Must be checked, e.g. "I accept the terms". */
+    required?: boolean;
+    validate?: CheckValidator;
+}
+/** Validation rules for a set of chosen values. */
+export interface SelectionRules<T extends OptionValue = OptionValue> {
+    /** At least one choice. */
+    required?: boolean;
+    /** Fewest choices. Not checked when nothing is chosen; use `required` for that. */
+    min?: number;
+    /** Most choices. A checkbox group also stops further choices at this count. */
+    max?: number;
+    /** Runs after the built-in rules pass, with the chosen values. */
+    validate?: (values: T[]) => string | null | undefined;
+}
+/** A labelled point under a slider's track, e.g. `{ value: 50, label: "Mid-range" }`. Clicking it moves the nearest thumb there. */
+export interface SliderMark {
+    value: number;
+    /** Default: the value, formatted like the slider's value. */
+    label?: ReactNode;
+}
+/** Any object can be a dropdown item: API rows as they come, or `ChoiceOption`s. Fields are read by key. */
+export type DropdownItem = object;
+/**
+ * How a dropdown column draws its field:
+ * - `text`: the value as text, cut with an ellipsis. The default.
+ * - `muted`: text in the muted color, for secondary details such as an email or a role.
+ * - `code`: short muted text with even digits, such as a country code or an employee number.
+ * - `avatar`: a round photo from a URL; the initials of the item's label when there is no URL or it fails to load.
+ * - `image`: a small picture from a URL, 4:3, such as a flag or a logo.
+ * - `icon`: a Tabler icon by name, such as `"wifi"`.
+ */
+export type DropdownColumnType = "text" | "muted" | "code" | "avatar" | "image" | "icon";
+/** One column of a dropdown's rows. Plain values, so a list of fields can describe it; `render` is the only function. */
+export interface DropdownColumn<TItem extends DropdownItem = DropdownItem> {
+    /** The item's field, e.g. `"username"`. */
+    key: string;
+    /** Heading of the column. The list shows a header row when any column has one. */
+    header?: string;
+    /** Default `text`. */
+    type?: DropdownColumnType;
+    /** A CSS grid track: `"6rem"`, `"auto"`, `"1fr"`. Default: `auto` for avatar, image, icon, and code; `minmax(0, 1fr)` for text. */
+    width?: string;
+    /** Default `start`. */
+    align?: "start" | "center" | "end";
+    /** Draws the cell instead of `type`. */
+    render?: (item: TItem) => ReactNode;
+}
+/** What `loadOptions` receives: the search text and the page to load. `skip` suits APIs that take skip and take (max) counts. */
+export interface DropdownPageRequest {
+    search: string;
+    /** From 1. */
+    page: number;
+    pageSize: number;
+    /** Items before this page: `(page - 1) * pageSize`. */
+    skip: number;
+    /** Aborted when a newer search replaces this request, or the dropdown unmounts. */
+    signal: AbortSignal;
+}
+/** What `loadOptions` returns for one page. */
+export interface DropdownPage<TItem extends DropdownItem = DropdownItem> {
+    items: readonly TItem[];
+    /** Whether another page follows. Default: the page was full (`items.length === pageSize`). */
+    hasMore?: boolean;
+    /** All matches on the server, shown as "25 of 1,240" under the list. */
+    total?: number;
+}

package/dist/Interfaces/InputInterfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/Interfaces/MessageInterfaces.d.ts

@@ -0,0 +1,111 @@
+/** The actions the builder knows by name (`MESSAGE_ACTION_NAMES`); `actionWords(name)` gives their words. */
+export type MessageActionName = "load" | "save" | "create" | "update" | "delete" | "trash" | "restore" | "recover" | "flag" | "unflag" | "pin" | "unpin" | "send" | "submit" | "upload" | "download" | "import" | "export" | "copy" | "approve" | "reject" | "cancel";
+/** The words of an action. */
+export interface ActionWords {
+    /** "save", or with the object inside: "move {object} to the trash". */
+    verb: string;
+    /** "saved", "moved to the trash". */
+    done: string;
+    /** "Saving", "Moving {object} to the trash". */
+    doing: string;
+    /** What a message names when nothing else is named: "the changes", "the file". */
+    object: string;
+    /** Whether the action sends values the server checks, which words a refusal as "did not accept the values". */
+    sendsValues?: boolean;
+}
+/**
+ * What a call or a button does, for its messages: "Room 204 saved.", "Could not delete 3 rooms." A name from
+ * `MESSAGE_ACTION_NAMES`, or the words of an action of your own: `{ verb: "check in", done: "checked in", doing: "Checking in",
+ * object: "the guest" }`.
+ */
+export type MessageAction = MessageActionName | ActionWords;
+/**
+ * The kinds of message:
+ * - `success`: "Room 204 saved.", "3 rooms deleted.", "Saved."
+ * - `failure`: "Could not save Room 204."
+ * - `reason`: why it failed, by HTTP status: "You do not have permission to delete Room 204."
+ * - `loading`: "Saving Room 204…"
+ * - `confirm`: "Delete 3 rooms?"
+ * - `confirmDetail`: the line under a question, such as "This cannot be undone." (empty for most actions)
+ * - `label`: the action on a button: "Delete", "Move to the trash"
+ */
+export type MessageKind = "success" | "failure" | "reason" | "loading" | "confirm" | "confirmDetail" | "label";
+/** What a message is about. Every part is optional: a message without a subject names the action's object. */
+export interface MessageContext {
+    /** Default `save`. */
+    action?: MessageAction;
+    /** "Room 204", or a noun with `count`: "room". */
+    subject?: string;
+    /** How many: 3 with subject "room" → "3 rooms". */
+    count?: number;
+    /** The plural of `subject` when adding "s" is wrong: "people". */
+    plural?: string;
+    /** The HTTP status of a failure, for `reason`. */
+    status?: number;
+    /** Nothing reached the server, for `reason`. */
+    network?: boolean;
+    /** The server did not answer in time, for `reason`. */
+    timeout?: boolean;
+}
+/** A message ready to show: a toast's tone, title, and line under it. */
+export interface BuiltMessage {
+    tone: "success" | "danger";
+    title: string;
+    message?: string;
+}
+/**
+ * Every text the builder uses, in one table. Filled in: `{act}` (the verb with its object: "delete Room 204"), `{acting}`
+ * ("Deleting Room 204"), `{verb}`, `{done}`, `{doing}`, `{object}` (what is named, or the action's object),
+ * `{target}` (what is named, or "this record"), `{status}`, `{module}`, and `{env}`. A capital first letter
+ * (`{Object}`, `{Act}`) capitalizes the value. Change them all at once with `configureMessages`, to reword or translate.
+ */
+export interface MessageTexts {
+    /** "{Object} {done}." → "Room 204 saved." */
+    success: string;
+    /** With nothing named: "{Done}." → "Saved." */
+    successPlain: string;
+    /** "Could not {act}." */
+    failure: string;
+    /** "{Acting}…" */
+    loading: string;
+    /** "{Act}?" */
+    confirm: string;
+    /** A button: "{Verb}". */
+    label: string;
+    /** The line under a question, by action. */
+    confirmDetails: Partial<Record<MessageActionName, string>>;
+    /** Why a call failed. */
+    reasons: MessageReasons;
+}
+export interface MessageReasons {
+    /** Nothing reached the server. */
+    network: string;
+    /** No answer in time, or 408. */
+    timeout: string;
+    /** 400 or 422 for an action that sends values. */
+    rejectedValues: string;
+    /** 400 or 422 for the rest. */
+    rejected: string;
+    /** 401. */
+    signedOut: string;
+    /** 403. */
+    forbidden: string;
+    /** 404 or 410. */
+    notFound: string;
+    /** 405. */
+    notAllowed: string;
+    /** 409. */
+    conflict: string;
+    /** 413. */
+    tooLarge: string;
+    /** 429. */
+    tooMany: string;
+    /** 502, 503, 504. */
+    unavailable: string;
+    /** Other 5xx. */
+    serverError: string;
+    /** Any other status: "{status}" is the number. */
+    other: string;
+    /** A module whose API root is not set: "{module}" and "{env}". */
+    notConfigured: string;
+}

package/dist/Interfaces/MessageInterfaces.js

@@ -0,0 +1,5 @@
+/*
+ * Types of the message builder: what an action is called ("save", "saved", "Saving"), the kinds of message built from
+ * it, and the one table of texts every message comes from.
+ */
+export {};

package/dist/Interfaces/TableInterfaces.d.ts

@@ -0,0 +1,351 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import type { TableStore } from "../Helpers/TableStore.ts";
+import type { ExcelEndpoints } from "./ExcelInterfaces.ts";
+import type { Size, Tone } from "./TypeInterfaces.ts";
+/** A row's id: its `rowKey` field, such as `id`. */
+export type TableKey = string | number;
+/** A row of a data table: any object. */
+export type TableRow = object;
+/** How a column shows its values. */
+export type TableColumnFormat = "text" | "number" | "money" | "percent" | "date" | "time" | "date-time" | "boolean";
+/** One of the values a column can hold, with its label: a status, a type. With a `tone`, the cell shows it as a tag. */
+export interface TableColumnOption {
+    value: unknown;
+    label: string;
+    /** Draws the value as a tag with a dot of this color. */
+    tone?: Tone;
+}
+/** One column: which field it shows, how, and what the user can do with it. */
+export interface TableColumn<TRow extends TableRow = TableRow> {
+    /** The field: `"name"`, or a path into the row, `"guest.name"`. It is also the column's id and its sort name. */
+    key: string;
+    /** The heading, and the column's name in the Columns menu and the details view. */
+    label: string;
+    /**
+     * The heading of the band above this column: "Amount details" over the quantity, the price, and the total. Columns
+     * next to each other that name the same group share one heading spanning them all, and the columns with no group keep
+     * one heading of their own, as tall as both rows. A table whose columns name no group has one header row, as before.
+     *
+     * The bands are read off the order on screen, so a column the user drags out of its run takes its group's heading
+     * with it and the run it left is drawn with the same heading twice.
+     */
+    group?: string;
+    /** Default `text`. Numbers, money, and percents line up at the end; dates and times follow the user's settings. */
+    format?: TableColumnFormat;
+    /** Digits after the decimal point of a number (money: 2). */
+    decimals?: number;
+    /** Text before a number, such as "Rs. ". */
+    prefix?: string;
+    /** Text after a number, such as " kg". */
+    suffix?: string;
+    /** Labels for the values the column holds, such as the names of an enum's numbers. */
+    options?: readonly TableColumnOption[];
+    /** The value when it is not one field: `row => row.first + " " + row.last`. Sorting and searching use it too. */
+    value?: (row: TRow) => unknown;
+    /** Draws the cell. Default: the value in the column's format. */
+    render?: (row: TRow, value: unknown) => ReactNode;
+    /** Text the search looks in. Default: the value as text (labels of `options`, ISO dates). */
+    text?: (row: TRow) => string;
+    /** Width: pixels or a CSS length ("12rem"). Default: by content. */
+    width?: number | string;
+    /** Narrowest the column gets. Default by format. */
+    minWidth?: number | string;
+    /** Default: `end` for numbers, money, and percents, `center` for booleans, else `start`. */
+    align?: "start" | "center" | "end";
+    /** Default true. */
+    sortable?: boolean;
+    /** Name the server sorts by, when it differs from `key`. */
+    sortKey?: string;
+    /** The table's search looks in this column. Default true. (A server searches as it likes.) */
+    searchable?: boolean;
+    /** Starts hidden; the Columns menu shows it. */
+    hidden?: boolean;
+    /** The Columns menu can hide it. Default true. */
+    hideable?: boolean;
+    /** Long text wraps onto more lines instead of ending in "…". */
+    wrap?: boolean;
+    /** The user can drag the heading to another place, or move it from its menu. Default true. */
+    movable?: boolean;
+    /** The user can drag the edge of the heading to change the width. Default true; `false` for a column that must keep its width. */
+    resizable?: boolean;
+    /** The user can keep the column on the left or the right while the others scroll. Default true. */
+    pinnable?: boolean;
+    /** Pinned before the user pins anything: `left` keeps it at the start, `right` at the end. */
+    pinned?: TablePinSide;
+}
+/** Which side a pinned column stays on while the others scroll. */
+export type TablePinSide = "left" | "right";
+export type TableSortDirection = "asc" | "desc";
+export interface TableSort {
+    /** A column's `key` (its `sortKey` goes to a server). */
+    key: string;
+    direction: TableSortDirection;
+}
+/** What the table shows: the search, the sort, and the page. */
+export interface TableQuery {
+    /** The search text, trimmed. */
+    search: string;
+    sort: TableSort | null;
+    /** The page, from 1. */
+    page: number;
+    pageSize: number;
+}
+/** One page of rows, as a server sends it. */
+export interface TablePage<TRow extends TableRow = TableRow> {
+    rows: readonly TRow[];
+    /** Every row there is. Default: the rows given. */
+    total?: number;
+    /** The rows that match the search. Default: `total`. */
+    matches?: number;
+}
+/**
+ * Loads rows for a query: every row (a list the table searches, sorts, and pages itself) or one page (the server did it).
+ * It may answer at once, without a promise, such as from a cache.
+ */
+export type TableLoader<TRow extends TableRow = TableRow> = (query: TableQuery, signal: AbortSignal) => TablePage<TRow> | readonly TRow[] | Promise<TablePage<TRow> | readonly TRow[]>;
+/** `client`: the table has every row and pages them itself. `server`: each page comes from the loader. */
+export type TablePaging = "client" | "server";
+/** `loading`: the first rows are on their way. `ready`: rows (or none) are shown. `error`: the rows could not load. */
+export type TableStatus = "loading" | "ready" | "error";
+/** What the table shows now. A new object after every change. */
+export interface TableState<TRow extends TableRow = TableRow> {
+    status: TableStatus;
+    /** A load runs while rows show: another page, a search, a sort, a reload. */
+    refreshing: boolean;
+    /** Why the rows could not load. */
+    error: string | null;
+    /** The rows on the page. */
+    rows: readonly TRow[];
+    /** How many rows come before the page: its first row is number `offset + 1`. */
+    offset: number;
+    /** Every row there is. */
+    total: number;
+    /** The rows that match the search. */
+    matches: number;
+    query: TableQuery;
+    /** The selected rows by key (keys as text), in the order they were picked. */
+    selected: ReadonlyMap<string, TRow>;
+    /** Rows with an action running. */
+    busy: ReadonlySet<string>;
+    /** Rows just added or changed, highlighted for a moment. */
+    flashed: ReadonlySet<string>;
+    /** Keys of the hidden columns. */
+    hidden: ReadonlySet<string>;
+    /** Column keys in the order the user put them. Empty: the order the columns were given in. */
+    order: readonly string[];
+    /** Widths the user set, in pixels, by column key (and by `#index`, `#actions` for the table's own columns). */
+    widths: Readonly<Record<string, number>>;
+    /** The side each pinned column stays on, by column key. */
+    pinned: Readonly<Record<string, TablePinSide>>;
+}
+/** A column as the table draws it: where it sits, whether it is pinned, and how far from that edge. */
+export interface TableViewColumn<TRow extends TableRow = TableRow> {
+    column: TableColumn<TRow>;
+    /** The side it stays on, or null when it scrolls with the rest. */
+    pin: TablePinSide | null;
+    /** Pixels from that edge, once the table has measured the columns before it. */
+    offset: number;
+    /** The last pinned column of its side: the one that shows the shadow while columns scroll under it. */
+    edge: boolean;
+    /** The user can drag its edge to change the width. */
+    resizable: boolean;
+    /** The user can drag it to another place. */
+    movable: boolean;
+    /** Its width in pixels, once the user has set one. */
+    width?: number;
+}
+/**
+ * One cell of the band above the headings: a group's heading over the columns next to each other that name it, or a
+ * single column with no group, whose own heading stands in the band row and is as tall as both rows.
+ */
+export interface TableHeadBand<TRow extends TableRow = TableRow> {
+    /** The heading above the columns, or `null` for a column with no group. */
+    group: string | null;
+    /** The columns under it, in the order they are drawn. One, for a column with no group. */
+    columns: TableViewColumn<TRow>[];
+}
+/**
+ * What a table needs to work a spreadsheet: the model's Excel endpoints, and what the page knows that the table does
+ * not. The search, the sort, and how many rows the search leaves are the table's own and are sent for it.
+ */
+export interface TableExcel {
+    /** The model's endpoints, from `excelEndpoints(controller)`. */
+    endpoints: ExcelEndpoints;
+    /** What one row is, for the questions and the messages: "city". Default: what the backend's settings say. */
+    subject?: string;
+    /** Values the endpoints' own params need, such as a parent's id. */
+    params?: Record<string, string | number>;
+    /** The filters the page holds, beside the table's search and sort, read when an export is asked for. */
+    filters?: () => Record<string, unknown>;
+    /** After an import wrote something. The table reloads itself either way. */
+    onImported?: () => void;
+}
+/** An item of the table's options menu (⋮): Import, Print, a report of the page's own. */
+export interface TableMenuAction {
+    /** Tells items apart; a test or a style can find it by `data-action`. */
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** A second line in the menu. */
+    description?: string;
+    /** `danger` for items that lose something. */
+    tone?: "danger";
+    disabled?: boolean;
+    /** A line above the item, to start a group. */
+    separator?: boolean;
+    onSelect: () => void;
+}
+/** An action on one row, in its row: an icon button (`inline`) or an item of the row's menu. */
+export interface TableRowAction<TRow extends TableRow = TableRow> {
+    /** Tells actions apart; a test or a style can find it by `data-action`. */
+    id: string;
+    label: string;
+    /** Needed for an `inline` action, which shows only its icon. */
+    icon?: ReactNode;
+    /** A second line in the menu. */
+    description?: string;
+    /** `danger` for actions that lose something. */
+    tone?: "danger";
+    /** Shown as an icon button on the row; the rest are in the row's menu. */
+    inline?: boolean;
+    disabled?: boolean;
+    /** Runs the action. While a promise it returns runs, the row is busy and its actions wait. */
+    onSelect: (row: TRow) => unknown;
+}
+/** An action on the selected rows, on the bar that shows while rows are selected. */
+export interface TableMassAction<TRow extends TableRow = TableRow> {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    tone?: "danger";
+    disabled?: boolean;
+    /** Runs the action. While a promise it returns runs, the bar waits. */
+    onSelect: (rows: TRow[]) => unknown;
+}
+/** Props of `DataTable`. */
+export interface DataTableProps<TRow extends TableRow = TableRow> {
+    /** The columns, in their order on screen. Keep the array stable (a constant or `useMemo`). */
+    columns: readonly TableColumn<TRow>[];
+    /** Every row, given by the page. The table searches, sorts, and pages them. */
+    rows?: readonly TRow[];
+    /** Loads the rows: every row once (`paging="client"`), or one page per query (`paging="server"`). */
+    load?: TableLoader<TRow>;
+    /** Default `client`. */
+    paging?: TablePaging;
+    /** Loads again, from the first page, when it changes: another list behind the same table, such as a CRUD's trash. */
+    loadKey?: string | number;
+    /** The field that tells rows apart. Default `id`. */
+    rowKey?: string | ((row: TRow) => TableKey);
+    /** Names a row for screen readers and messages ("Select Sita Sharma"). Default: the first column's text. */
+    rowLabel?: (row: TRow) => string;
+    /** The store behind the table, from `useTable()`, to reload, change rows, or read the selection from outside. */
+    table?: TableStore<TRow>;
+    /** The table's name for screen readers, such as "Guests". A visible heading can name it through `aria-labelledby`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** A search box. Default true. */
+    searchable?: boolean;
+    /** Default "Search…". */
+    searchPlaceholder?: string;
+    /** Before the search box, on the left of the bar: tabs, filters. */
+    toolbar?: ReactNode;
+    /** At the end of the bar: an Add button. */
+    actions?: ReactNode;
+    /** The Columns panel, where columns are shown, hidden, and dragged into another order. Default true. */
+    columnsMenu?: boolean;
+    /**
+     * The spreadsheet side of this table, against the backend's Excel controller. The options menu (⋮) then offers
+     * **Download template**, **Import from a spreadsheet** (the file is verified, the person goes over the rows, and the
+     * table reloads once they are written) and, where the endpoints have one, **Export to Excel** - which asks the
+     * server with the search and the sort on screen instead of writing a file of the rows this browser happens to hold.
+     *
+     * It replaces `onImport`, which is the hook for a page that imports its own way.
+     */
+    excel?: TableExcel;
+    /** A Reload button. Default true when rows are loaded. */
+    reloadable?: boolean;
+    /** When the user presses Reload, before the rows load again: drop a cache of your own. */
+    onReload?: () => void;
+    /** Columns can be dragged into another order (also from each heading's menu). Default true. */
+    reorderable?: boolean;
+    /** Columns can be resized by dragging the edge of a heading. Default true; a single column opts out with `resizable: false`. */
+    resizable?: boolean;
+    /** Columns can be pinned to the left or the right. Default true; a single column opts out with `pinnable: false`. */
+    pinnable?: boolean;
+    /** Items of the options menu (⋮), after Export and Print: Import, a report, anything of the page's own. */
+    moreActions?: readonly TableMenuAction[];
+    /** An Export item in the options menu, which writes the shown columns as a CSV file. Default true. */
+    exportable?: boolean;
+    /** A Print item in the options menu, which prints the shown columns. Default true. */
+    printable?: boolean;
+    /** Name of the file an export writes, and the heading a print shows. Default: the table's `aria-label`, else "Table". */
+    exportName?: string;
+    /** An Import item in the options menu, which calls this: the page asks for a file and loads it. */
+    onImport?: () => void;
+    /** A checkbox on each row, and a bar of `massActions` while rows are selected. */
+    selectable?: boolean;
+    /** Most rows that can be selected. Default 500. */
+    maxSelection?: number;
+    /** After the selection changes. */
+    onSelectionChange?: (rows: TRow[]) => void;
+    /** Actions on the selected rows. A function gets the selected rows. */
+    massActions?: readonly TableMassAction<TRow>[] | ((rows: TRow[]) => readonly TableMassAction<TRow>[]);
+    /** Actions of each row. */
+    rowActions?: (row: TRow) => readonly TableRowAction<TRow>[];
+    /** A double-click on a row, such as to open its details. */
+    onRowOpen?: (row: TRow) => void;
+    /**
+     * A single click opens a row, not only a double-click: for tables whose rows are opened to be read more than they
+     * are selected. A click on a control in the row (its menu, a link, a checkbox) still does only what that control
+     * does, and so does a click that ends a text selection, so a value can still be copied out of a cell.
+     */
+    openOnClick?: boolean;
+    /**
+     * Rows kept in a section above the page, which the user folds open: the records they pinned. They are the rows as
+     * they came from their own endpoint, and the same records also show in the list below. Leave it out for no section.
+     */
+    pinnedRows?: readonly TRow[];
+    /** The pinned rows are on their way: the section shows that it is loading. */
+    pinnedLoading?: boolean;
+    /** What the section is called. Default "Pinned". */
+    pinnedLabel?: string;
+    /** Most rows that can be pinned, shown beside the count so the user knows the limit. */
+    pinnedMax?: number;
+    /** Rows per page. Default 10, or the user's last choice with `stateKey`. */
+    pageSize?: number;
+    /** Choices of rows per page. Default 10, 25, 50, 100. */
+    pageSizes?: readonly number[];
+    /** The sort before the user picks one. Default none: the order the rows came in. */
+    defaultSort?: TableSort | null;
+    /**
+     * Row numbers in the first column. Default: on when `selectable`, where the number becomes the row's checkbox as soon
+     * as the pointer is over the row or anything is selected.
+     */
+    numbered?: boolean;
+    /** Remembers the page size, the sort, hidden columns, the order, widths, and pins of the columns, and whether the
+     * pinned section is open, on this device. */
+    stateKey?: string;
+    /** Milliseconds after the last key before a search goes to a server. Default 300; a table with every row searches at once. */
+    searchDelay?: number;
+    /** Shown when there are no rows at all. Default "No records yet." */
+    emptyMessage?: ReactNode;
+    /** Beside the empty message, such as an Add button. */
+    emptyAction?: ReactNode;
+    /** The tallest the table grows before its rows scroll under a header that stays: pixels or a CSS length. */
+    maxHeight?: number | string;
+    /**
+     * The table takes the whole height it is given instead of growing with its rows: the bar stays on top, the rows
+     * scroll inside the frame under a header that stays, and the footer sits at the bottom of the page. The page around
+     * it never scrolls, so the footer never moves and no scrollbar comes and goes as rows load.
+     *
+     * It needs a parent with a height. An `AdminPage` gives it one: the admin shell is exactly the window, and a page
+     * holding a filling table stretches it to the room under the heading. `maxHeight` is ignored while it is on.
+     */
+    fill?: boolean;
+    /** Row height and text size. Default `md`. */
+    size?: Extract<Size, "sm" | "md">;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<TableStore<TRow>>;
+}

package/dist/Interfaces/TableInterfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/Interfaces/ThemeInterfaces.d.ts

@@ -0,0 +1,17 @@
+/** Light, dark, or whatever the operating system uses. */
+export type ThemeMode = "light" | "dark" | "system";
+export interface ThemeOption {
+    /** The `data-nx-theme` value: lowercase letters, digits, and dashes. */
+    id: string;
+    name: string;
+    description: string;
+}
+/** The themes in `nexus-shared/styles.css`. Each has a light and a dark palette. */
+export declare const NEXUS_THEMES: readonly ThemeOption[];
+export declare const DEFAULT_THEME = "nexus";
+/** Browser storage keys for the saved choice. */
+export declare const THEME_STORAGE_KEY = "nx-theme";
+export declare const THEME_MODE_STORAGE_KEY = "nx-mode";
+/** Attributes on `<html>` that select the theme and the mode. Without `data-nx-mode`, the system setting applies. */
+export declare const THEME_ATTRIBUTE = "data-nx-theme";
+export declare const THEME_MODE_ATTRIBUTE = "data-nx-mode";

package/dist/Interfaces/ThemeInterfaces.js

@@ -0,0 +1,17 @@
+/** The themes in `nexus-shared/styles.css`. Each has a light and a dark palette. */
+export const NEXUS_THEMES = [
+    { id: "nexus", name: "Nexus", description: "Neutral grays with a confident blue" },
+    { id: "github", name: "GitHub", description: "Primer grays with GitHub green" },
+    { id: "nord", name: "Nord", description: "Arctic, north-bluish calm" },
+    { id: "dracula", name: "Dracula", description: "The dark purple classic, Alucard in light" },
+    { id: "solarized", name: "Solarized", description: "Warm cream or deep teal, precise accents" },
+    { id: "catppuccin", name: "Catppuccin", description: "Soothing pastels: Latte and Mocha" },
+    { id: "rose-pine", name: "Rosé Pine", description: "Muted pine, iris, and rose" },
+];
+export const DEFAULT_THEME = "nexus";
+/** Browser storage keys for the saved choice. */
+export const THEME_STORAGE_KEY = "nx-theme";
+export const THEME_MODE_STORAGE_KEY = "nx-mode";
+/** Attributes on `<html>` that select the theme and the mode. Without `data-nx-mode`, the system setting applies. */
+export const THEME_ATTRIBUTE = "data-nx-theme";
+export const THEME_MODE_ATTRIBUTE = "data-nx-mode";

package/dist/Interfaces/TypeInterfaces.d.ts

@@ -0,0 +1,4 @@
+/** A value that may be missing: `string | UN`. */
+export type UN = undefined | null;
+export type Size = "sm" | "md" | "lg";
+export type Tone = "neutral" | "primary" | "success" | "warning" | "danger" | "info";