@nxgt/material 3.73.0 → 3.75.0

package/dist/lib/components/ui/collections/server-table/partials/server-table-empty-page.d.ts

@@ -8,3 +8,7 @@ export declare function ServerTableEmptyPage<T extends RowData>({ props, state,
     props: ServerTableProps<T>;
     state: ReturnType<typeof useServerTable<T>>;
 }): import("react").JSX.Element;
+/** The table's `empty` slot: the empty page, or, without `empty`, nothing, so
+ * the table's own default says it (the failure and the past-end page still
+ * show). */
+export declare function emptyPageOrDefault<T extends RowData>(props: ServerTableProps<T>, state: ReturnType<typeof useServerTable<T>>): import("react").JSX.Element | undefined;

package/dist/lib/components/ui/collections/server-table/server-table-classes.d.ts

@@ -1,5 +1,11 @@
-/** The list, one surface: the top band, the chips row, then the table. */
-export declare const SERVER_TABLE_CLASS = "grid w-full min-w-0 gap-3 bg-background/80 p-4";
+/** The list, one surface: the top band, the chips row, then the table. On a
+ * phone it draws no surface and no padding (`max-md:`): the layout owns the
+ * page gutter, and a panel around the list would stack a second inset and a
+ * card in a card (#2292). */
+export declare const SERVER_TABLE_CLASS = "grid w-full min-w-0 gap-3 bg-background/80 p-4 max-md:bg-transparent max-md:p-0";
+/** `surface: 'none'`: the list sits on its container's surface (a Card, a
+ * page section), so it draws no surface and no padding of its own. */
+export declare const SERVER_TABLE_FLUSH_CLASS = "bg-transparent p-0";
 /** The `DataTable` inside: the surface and its padding are the list's. */
 export declare const SERVER_TABLE_TABLE_CLASS = "bg-transparent p-0";
 /** The top band: the title, the search landmark (the bar, the chips row under it), the page's actions; one compact, wrapping row. */

package/dist/lib/components/ui/collections/server-table/types.d.ts

@@ -45,7 +45,13 @@ export type ServerTableProps<T extends RowData> = PassedThrough<T> & ServerTable
      * `tableFilters(model)`, whether an empty page is "nothing matches", and
      * what "clear" removes. */
     filters?: TableFilterBinding;
-    empty: ServerTableEmpty;
+    /** What the empty page says. Optional: omit it when the page answers
+     * "nothing yet" and "nothing matches" itself and renders the table only
+     * when there are rows. Without it, a table that is still empty falls
+     * back to the `DataTable` default ("No data available", or "No results"
+     * when filtered); the failure with Retry and the page past the last
+     * still show. */
+    empty?: ServerTableEmpty;
     /** The fetch failed. While set, the failure and a Retry (`onRetry`)
      * replace the rows and the empty page, the footer and the header: the
      * rows are the previous query's, never shown under an error. It is
@@ -85,5 +91,9 @@ export type ServerTableProps<T extends RowData> = PassedThrough<T> & ServerTable
     /** Without `filter`: what the live region says once a new query is
      * answered. Default "N results" (`material.server-table.results`). */
     resultsLabel?: (count: number) => string;
+    /** The list's own surface: `'card'` (default) a translucent background
+     * with 16px of padding; `'none'` neither, for a table placed in a Card,
+     * a section or any surface that already frames it (no frame in a frame). */
+    surface?: 'card' | 'none';
     className?: string;
 };

package/dist/lib/components/ui/display/change-history/partials/changes-collapse.d.ts

@@ -10,7 +10,8 @@ export declare function useChangesCollapse(changes: ChangeHistoryChange[], after
 };
 /**
  * "N fields changed" ("N fields set" on a creation) with a preview of the
- * first names, as a button that expands the list.
+ * first names, as a button that expands the list. The preview wraps rather
+ * than clips, and the names past the preview are read out after the "+N".
  */
 export declare function ChangesToggle({ names, creation, open, onToggle, controls, className, }: {
     names: ReactNode[];

package/dist/lib/components/ui/display/highlighted-text/highlight-ranges.d.ts

@@ -0,0 +1,11 @@
+/** `[start, end)` offsets into the original text. */
+export type HighlightRange = readonly [number, number];
+/**
+ * Where the words of `query` start a word of `text`, as `[start, end)`
+ * offsets into `text` itself, sorted and never overlapping. Case, accents
+ * and ligatures are folded (`œ` is `oe`, `æ` is `ae`, `ß` is `ss`), and a
+ * query word matches only at the start of a word: `'oeuvre ete'` marks
+ * "Œuvre" and "été" in "Œuvres d'été", not the "ete" inside "complete".
+ * A blank query has no range.
+ */
+export declare function highlightRanges(text: string, query: string, locale?: string): HighlightRange[];

package/dist/lib/components/ui/display/highlighted-text/highlighted-text.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+export type HighlightedTextProps = Omit<ComponentProps<'span'>, 'children'> & {
+    /** The string to show. */
+    text: string;
+    /** Search words; each marks the words of `text` it starts. */
+    query: string;
+    /** Language for lowercasing (the runtime's when omitted). */
+    locale?: string;
+};
+/**
+ * `text` with the words of `query` in a themed `<mark>`. Case, accents and
+ * ligatures are folded (`œ` is `oe`) and a word matches at the start of a
+ * word. The text reads the same to a screen reader; forced colours add an
+ * underline where a background alone does not show.
+ */
+export declare function HighlightedText({ text, query, locale, className, ...props }: HighlightedTextProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/highlighted-text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './highlight-ranges.js';
+export * from './highlighted-text.js';

package/dist/lib/components/ui/display/index.d.ts

@@ -18,6 +18,7 @@ export * from './enrolment-secret/index.js';
 export * from './entity-header/index.js';
 export * from './event-chip/index.js';
 export * from './figure/index.js';
+export * from './highlighted-text/index.js';
 export * from './list-tile/index.js';
 export * from './markdown/index.js';
 export * from './metrics/index.js';

package/dist/lib/components/ui/display/list-tile/list-tile.d.ts

@@ -39,7 +39,7 @@ export type ListTileCommonProps = {
      * tiles, `m-0 list-none p-0` for divided rows.
      */
     as?: 'li';
-} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'title' | 'onClick'>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'title' | 'onClick' | 'content'>;
 export type ListTileLinkOrButtonProps = {
     /**
      * Buttons at the end of the tile, vertically centred, outside the link: a
@@ -58,6 +58,14 @@ export type ListTileLinkOrButtonProps = {
      * a block, grid or `w-full` flex child.
      */
     chips?: ReactNode;
+    /**
+     * Full-width content under the title row, inside the tile's box: a second
+     * line of controls such as an expected value beside an editable field. It
+     * sits outside the link or button, above its stretched hit area, so it may
+     * hold interactive controls (inputs, buttons) and its clicks never reach the
+     * tile's `onClick`. It follows the tile's variant and inset.
+     */
+    content?: ReactNode;
     href?: string;
     /**
      * A discreet chevron after `trailing`, flipped in right-to-left, decorative
@@ -90,6 +98,7 @@ export type ListTileSwitchProps = {
     onClick?: never;
     actions?: never;
     chips?: never;
+    content?: never;
     chevron?: never;
     linkComponent?: never;
 };

package/dist/lib/components/ui/display/list-tile/partials/list-tile-box.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+type ListTileBoxProps = {
+    props: HTMLAttributes<HTMLElement>;
+    tileAttrs: Record<string, unknown>;
+    className: string;
+    row: ReactNode;
+    actions?: ReactNode;
+    hasActions: boolean;
+    hasContent: boolean;
+    content?: ReactNode;
+    disabled?: boolean;
+    tight: boolean;
+};
+/** The tile's box around its row, its `actions` and its `content` slot. */
+export declare function ListTileBox({ props, tileAttrs, className, row, actions, hasActions, hasContent, content, disabled, tight, }: ListTileBoxProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/display/list-tile/partials/list-tile-classes.d.ts

@@ -12,9 +12,11 @@ type ListTileClassesOptions = {
     dense?: boolean;
     /** `divided` only: a 16px inline inset (`px-4`) in place of 4px (`px-1`). */
     inset?: boolean;
+    /** The tile has `content`: it wraps onto a full-width line under the row. */
+    stacked?: boolean;
 };
 /** The classes shared by the tile's three elements (link, button, div). */
-export declare function listTileClasses({ compact, selected, interactive, disabled, className, split, divided, dense, inset, }: ListTileClassesOptions): string;
+export declare function listTileClasses({ compact, selected, interactive, disabled, className, split, divided, dense, inset, stacked, }: ListTileClassesOptions): string;
 /**
  * The row of a tile with `actions` (its link, button or div): it fills the
  * tile's box except for the actions, and a link or button stretches over the

package/dist/lib/components/ui/display/list-tile/partials/list-tile-line.d.ts

@@ -1,3 +1,3 @@
 import { ListTileCommonProps, ListTileLinkOrButtonProps } from '../list-tile.js';
 /** A link, a button or a plain tile, with or without `actions` beside it. */
-export declare function ListTileLine({ title, subtitle, leading, trailing, chips, variant, inset, actions, className, selected, size, href, chevron, linkComponent: ownLink, disabled, onClick, ...props }: ListTileCommonProps & Omit<ListTileLinkOrButtonProps, 'toggle'>): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare function ListTileLine({ title, subtitle, leading, trailing, chips, content, variant, inset, actions, className, selected, size, href, chevron, linkComponent: ownLink, disabled, onClick, ...props }: ListTileCommonProps & Omit<ListTileLinkOrButtonProps, 'toggle'>): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/lib/components/ui/display/list-tile/partials/list-tile-row.d.ts

@@ -2,7 +2,7 @@ import { MouseEventHandler, ReactNode } from 'react';
 import { LinkComponent } from '../../../primitives/link/link-component.js';
 type Attrs = Record<string, unknown>;
 /** What stays on the box of a tile with actions: `data-*` and `style` (the class is its own). */
-export declare function boxProps(props: Attrs): Attrs;
+export declare function boxProps(props: object): Attrs;
 type RenderRowOptions = {
     props: Attrs;
     tileAttrs: Attrs;

package/dist/lib/components/ui/display/seat-ring/types.d.ts

@@ -21,6 +21,12 @@ export type Seat = {
     badge?: ReactNode;
     /** Cannot be picked: `aria-disabled`, still reachable by keyboard. */
     disabled?: boolean;
+    /**
+     * Eliminated: the seat stays visible but dimmed, its name struck through and
+     * its avatar greyed, with the word "Out" (`material.seat-ring.out`) shown and
+     * read as part of the seat's name. It stays pickable unless `disabled`.
+     */
+    out?: boolean;
     /** Nobody sits here: a dashed placeholder, never selectable. */
     empty?: boolean;
 };

package/dist/lib/components/ui/display/secret-card/types.d.ts

@@ -43,6 +43,12 @@ export type SecretCardProps = Omit<ComponentProps<'div'>, 'children' | 'title' |
     actions?: ReactNode;
     /** Hides the secret again after this many milliseconds shown. */
     autoHideMs?: number;
+    /**
+     * `sm` is the compact card for a phone, where content below must stay in
+     * the first viewport: the faces drop their 6rem minimum height and the
+     * card's padding and gap tighten (default `default`).
+     */
+    size?: 'default' | 'sm';
     /** The card cannot be revealed. A revealed card can always be hidden. */
     disabled?: boolean;
     labels?: Partial<SecretCardLabels>;

package/dist/lib/components/ui/feedback/celebration/celebration.d.ts

@@ -0,0 +1,24 @@
+export interface CelebrationProps {
+    /**
+     * Replays the burst when its value changes (a round number, a timestamp, a
+     * key). Unchanged: the burst plays once, on mount, and never again.
+     */
+    trigger?: unknown;
+    /** How many pieces fly out. Default 48. */
+    pieces?: number;
+    /** How long one burst lasts, in milliseconds. Default 2400. */
+    duration?: number;
+    /** Called once when a burst has ended (its pieces are gone from the DOM). */
+    onComplete?: () => void;
+    className?: string;
+}
+/**
+ * A one-shot confetti burst for a win or a reveal. It plays once when it
+ * mounts and again only when `trigger` changes; it never loops, and it
+ * removes its pieces when the burst ends. Pieces are painted with theme
+ * tokens, sit in a full-screen layer that ignores the pointer, and are hidden
+ * from assistive technology: announce the event in text (a `Moment`, an
+ * alert). Under `prefers-reduced-motion` it renders nothing, and it renders
+ * nothing on the server.
+ */
+export declare function Celebration({ trigger, pieces, duration, onComplete, className, }: CelebrationProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/feedback/celebration/index.d.ts

@@ -0,0 +1 @@
+export * from './celebration.js';

package/dist/lib/components/ui/feedback/countdown-timer/countdown-ring.d.ts

@@ -3,5 +3,5 @@ import { CountdownTone } from './countdown-timer.utils.js';
 export declare function CountdownRing({ tone, fraction, size, }: {
     tone: CountdownTone;
     fraction: number;
-    size: 'sm' | 'md';
+    size: 'sm' | 'md' | 'lg';
 }): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/countdown-timer/countdown-timer.d.ts

@@ -20,7 +20,8 @@ export type CountdownTimerProps = {
      * announcement then speaks the time only).
      */
     warningText?: string | false;
-    size?: 'sm' | 'md';
+    /** 28 px (`sm`), 36 px (`md`) or 56 px (`lg`) high; `lg` is for a countdown that is the focal point of a screen. */
+    size?: 'sm' | 'md' | 'lg';
 } & Omit<ComponentProps<'div'>, 'children'>;
 /**
  * A countdown clock: a ring that empties and `m:ss`, amber then red as the

package/dist/lib/components/ui/feedback/index.d.ts

@@ -1,6 +1,7 @@
 export * from './alert/index.js';
 export * from './alert-dialog/index.js';
 export * from './banner/index.js';
+export * from './celebration/index.js';
 export * from './circular-progress/index.js';
 export * from './confirm-dialog/index.js';
 export * from './confirmation-dialog/index.js';
@@ -11,6 +12,7 @@ export * from './empty-state/index.js';
 export * from './error-state/index.js';
 export * from './hydrate-loading/index.js';
 export * from './loading-indicator/index.js';
+export * from './moment/index.js';
 export * from './notification-row/index.js';
 export * from './notifications/index.js';
 export * from './page-load-failed/index.js';

package/dist/lib/components/ui/feedback/moment/index.d.ts

@@ -0,0 +1 @@
+export * from './moment.js';

package/dist/lib/components/ui/feedback/moment/moment-body.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+/** What a Moment shows: the picture, the title, the description (or the hint for assistive technology), the action and the close button. */
+export declare function MomentBody({ illustration, title, description, action, closeLabel, }: {
+    illustration?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    closeLabel?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/moment/moment.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { Tone } from '../../tones.js';
+export interface MomentProps {
+    /** Whether the announcement is on screen. */
+    open: boolean;
+    /** Called with `false` when it is dismissed: Escape, a tap, the close button, the action or the end of `duration`. */
+    onOpenChange: (open: boolean) => void;
+    /** Dismisses it by itself after this many milliseconds. Unset: it stays until dismissed. */
+    duration?: number;
+    /** The picture above the title: a scene, a pictogram, an icon. Decorative (hidden from assistive technology): the title says it all. */
+    illustration?: ReactNode;
+    /** What happened, and the dialog's accessible name. */
+    title: ReactNode;
+    /** The line under the title. It sits in a `<p>`: phrasing content only. */
+    description?: ReactNode;
+    /** A button or a link under the text. A click on it dismisses the Moment after its own handler, unless that handler calls `event.preventDefault()`. */
+    action?: ReactNode;
+    /** The colour of the meaning: one of the library's tones, or an app's own. Unset: `neutral`. */
+    tone?: Tone;
+    /** Accessible name of the close button (translated by default). */
+    closeLabel?: string;
+    className?: string;
+}
+/**
+ * A transient full-screen announcement for a dramatic one-off event (a
+ * player is eliminated, a role is revealed). It is a modal dialog named by
+ * its title and described by its description, so a screen reader announces
+ * it as it opens; focus moves into it and goes back to the element that had
+ * it when it closes. Escape, a tap anywhere, the close button and the
+ * `action` dismiss it, and so does `duration`. It fades in and its picture
+ * pops in, none of it under `prefers-reduced-motion`.
+ */
+export declare function Moment({ open, onOpenChange, duration, illustration, title, description, action, tone, closeLabel, className, }: MomentProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-control.d.ts

@@ -0,0 +1,17 @@
+import { useMaterialTranslation } from '../../../../i18n/use-material-translation.js';
+import { ArrayError, useRefusedFocus } from './choice-list-focus.js';
+import { defaultRowLabel } from './choice-list-names.js';
+import { ChoiceListFieldProps, ChoiceRow } from './types.js';
+export type ChoiceListControlProps = Pick<ChoiceListFieldProps, 'min' | 'rowLabel' | 'disabled' | 'onChange'> & {
+    selection: NonNullable<ChoiceListFieldProps['selection']>;
+    rows: ChoiceRow[];
+    error: ArrayError | undefined;
+    focus: ReturnType<typeof useRefusedFocus>;
+    /** Sets the ids without dirtying the form; absent, they go through `onChange`. */
+    setIds?: (next: ChoiceRow[]) => void;
+    t: ReturnType<typeof useMaterialTranslation>['t'];
+    label: ReturnType<typeof defaultRowLabel>;
+    props: Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'onBlur'>;
+};
+/** The list itself, with the group and per-row errors of the field. */
+export declare function ChoiceListControl({ rows, error, focus, setIds, onChange, t, label, min, selection, rowLabel, disabled, props, }: ChoiceListControlProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-focus.d.ts

@@ -37,6 +37,13 @@ export declare function refusedFocus(handle: FocusHandle, read: {
  */
 export declare function useRefusedFocus(error: () => ArrayError | undefined, blank: () => string): {
     rows: RefObject<readonly ChoiceRow[]>;
+    list: RefObject<Element | null>;
     listRef: (node: Element | null) => void;
     through: (fieldRef: RefCallback<unknown>) => RefCallback<unknown>;
 };
+/**
+ * The handle React Hook Form gets as the `ref` of a row path
+ * (`choices.<i>.text`): `setFocus` and `setError(…, { shouldFocus })` on that
+ * path call its `focus()`, which goes to the row's text input.
+ */
+export declare function rowFocus(list: RefObject<Element | null>, position: number): FocusHandle;