@nxgt/material 3.88.0 → 3.90.0

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, 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;
+export declare function ListTileLine({ title, subtitle, leading, trailing, chips, content, variant, inset, actions, className, selected: selectedProp, 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

@@ -12,6 +12,8 @@ type RenderRowOptions = {
     disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     selected: boolean;
+    /** The raw `selected` prop: a button is a toggle (`aria-pressed`) only when it is set. */
+    pressed?: boolean;
     rowClass: string;
     body: ReactNode;
 };
@@ -20,5 +22,5 @@ type RenderRowOptions = {
  * tile (it carries the tile's attributes); with them, only the row inside the
  * box, which keeps the rest props so `aria-label`, `id`… still land on it.
  */
-export declare function renderRow({ props, tileAttrs, split, href, linkComponent, disabled, onClick, selected, rowClass, body, }: RenderRowOptions): ReactNode;
+export declare function renderRow({ props, tileAttrs, split, href, linkComponent, disabled, onClick, selected, pressed, rowClass, body, }: RenderRowOptions): ReactNode;
 export {};

package/dist/lib/components/ui/display/person-cell/index.d.ts

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

package/dist/lib/components/ui/display/person-cell/person-cell.d.ts

@@ -0,0 +1,23 @@
+import { Tone } from '../../tones.js';
+export type PersonCellProps = {
+    /** The person's name, truncated with an ellipsis when it does not fit; the full text stays in the DOM. */
+    name: string;
+    /** A picture; the initials show in its place until it loads or when it fails. */
+    src?: string;
+    /** The letters shown without a picture. Unset: derived from `name` (`'Ada Lovelace'` → `'AL'`). */
+    initials?: string;
+    /** The tone of the initials. Unset: neutral. */
+    tone?: Tone;
+    /** A muted line under the name (a role, an email, a team), truncated too. */
+    description?: string;
+    /** `'sm'` (24 px avatar) fits a table row; `'md'` (32 px) a card or a list. */
+    size?: 'sm' | 'md';
+    className?: string;
+};
+/**
+ * An avatar before a name, for the first column of a table of people or the
+ * title of a card. The avatar is decorative (`aria-hidden`): the name is the
+ * text a screen reader and a row link read. Takes the width it is given and
+ * truncates (`min-w-0`), so it holds on a phone.
+ */
+export declare function PersonCell({ name, src, initials, tone, description, size, className, }: PersonCellProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/tone-value/index.d.ts

@@ -0,0 +1,2 @@
+export { type ToneBand, type ToneBands, toneBands, } from '@nxgt/material-core/cell-tone';
+export * from './tone-value.js';

package/dist/lib/components/ui/display/tone-value/tone-value.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Tone } from '../../tones.js';
+export type ToneValueProps = Omit<ComponentProps<'span'>, 'children'> & {
+    /** The tone: a named tone or one the app declared in `AppTones`. `undefined` renders the value as is. */
+    tone?: Tone;
+    /** The value shown. */
+    children?: ReactNode;
+    /**
+     * Words for a screen reader after the value (`'Low'`), visually hidden. The
+     * mark is `aria-hidden`: without a label the tone is for sighted users only.
+     */
+    label?: string;
+};
+/**
+ * A value in the text colour of its tone, with a small shape before it (a
+ * diamond for `error`, a triangle for `warning`, a circle for `success`, a
+ * square for any other tone; none for `neutral`), so the tone survives when
+ * the colour does not (forced colours, colour blindness, a black and white
+ * print). The cells of `DataTable`, `ServerTable` and `DataGrid` wear it for a
+ * column with `meta.tone`; import it for a `renderCard` or any figure of your
+ * own. With no `tone` it renders the value in a plain span, without a mark.
+ */
+export declare function ToneValue({ tone, label, className, children, ...props }: ToneValueProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/error-state/partials/error-state-actions.d.ts

@@ -1,10 +1,15 @@
 import { ReactNode } from 'react';
+import { ButtonVariant } from '../../../actions/button/button.js';
 type Props = {
     onRetry?: () => unknown;
     retrying?: boolean;
     retryLabel?: ReactNode;
     action?: ReactNode;
+    /** The Retry button's variant (outlined by default). */
+    retryVariant?: ButtonVariant;
+    /** The Retry button's `data-slot`. */
+    retrySlot?: string;
 };
 /** Retry (loading while a returned promise is pending), then the extra actions. */
-export declare function ErrorStateActions({ onRetry, retrying, retryLabel, action, }: Props): import("react").JSX.Element;
+export declare function ErrorStateActions({ onRetry, retrying, retryLabel, action, retryVariant, retrySlot, }: Props): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/feedback/page-load-failed/page-load-failed.d.ts

@@ -1,9 +1,16 @@
+import { ReactNode } from 'react';
 import { EmptyStateProps } from '../empty-state/empty-state.js';
 export type PageLoadFailedProps = Omit<EmptyStateProps, 'action'> & {
     /** Where "Back to the start" goes: the list without its cursor. */
     href: string;
     /** The link's text (translated "Back to the start" by default). */
     linkLabel?: string;
+    /** Shows a filled Retry before the link. A returned promise keeps it loading until settled. */
+    onRetry?: () => unknown;
+    /** Forces the loading state of Retry; else derived from the promise. */
+    retrying?: boolean;
+    /** Retry's text (translated "Retry" by default). */
+    retryLabel?: ReactNode;
 };
 /**
  * The page of a list opened at a cursor that failed to load: an
@@ -12,4 +19,4 @@ export type PageLoadFailedProps = Omit<EmptyStateProps, 'action'> & {
  * library. For the next page of a list that is already shown, use
  * `LoadMoreFooter`'s failed state instead, which keeps the rows.
  */
-export declare function PageLoadFailed({ href, linkLabel, title, ...props }: PageLoadFailedProps): import("react").JSX.Element;
+export declare function PageLoadFailed({ href, linkLabel, onRetry, retrying, retryLabel, title, ...props }: PageLoadFailedProps): import("react").JSX.Element;