@nxgt/material 3.96.1 → 3.97.0

package/dist/lib/components/ui/fields/currency-field/currency-field.d.ts

@@ -17,5 +17,13 @@ export type CurrencyFieldProps = Omit<TextFieldProps, 'type' | 'value' | 'defaul
      * (`CalculatorField`'s "Open calculator"). It keeps its own name and focus.
      */
     trailingAction?: ReactNode;
+    /**
+     * `value`, `defaultValue` and `onChange` are whole minor units (cents,
+     * centimes, yen) instead of major units: `1999` shows `19.99` in EUR.
+     * The decimals are the currency's own (EUR 2, XAF 0, KWD 3), or
+     * `fractionDigits` when given, as `formatAmount`'s `minorUnits` option.
+     * Off by default.
+     */
+    minorUnits?: boolean;
 };
-export declare function CurrencyField({ value, defaultValue, onChange, currency, fractionDigits, trailingAction, className, ...props }: CurrencyFieldProps): import("react").JSX.Element;
+export declare function CurrencyField({ value, defaultValue, onChange, currency, fractionDigits, trailingAction, minorUnits, className, ...props }: CurrencyFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/currency-field/use-currency-amount.d.ts

@@ -4,12 +4,14 @@ type Options = {
     onChange?: (value: number | null) => void;
     currency: string;
     fractionDigits?: number;
+    /** `value`, `defaultValue` and `onChange` are whole minor units. */
+    minorUnits?: boolean;
 };
 /**
  * The text a currency field shows and the amount it holds, controlled or
  * not: `change` follows typing, `commit` formats the amount on blur.
  */
-export declare function useCurrencyAmount({ value, defaultValue, onChange, currency, fractionDigits, }: Options): {
+export declare function useCurrencyAmount({ value, defaultValue, onChange, currency, fractionDigits, minorUnits, }: Options): {
     draft: string;
     change: (raw: string) => void;
     commit: (raw: string) => void;

package/dist/lib/components/ui/fields/currency-field/use-minor-units.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The two conversions between the amount a currency field holds (major
+ * units) and the one its props carry: identity, or whole minor units when
+ * `minorUnits` is set.
+ */
+export declare function useMinorUnits(minorUnits: boolean, currency: string, fractionDigits?: number): {
+    toMajor: (external: number | null | undefined) => number | null | undefined;
+    toExternal: (major: number | null) => number | null;
+};

package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-heading.d.ts

@@ -6,6 +6,18 @@ export declare function RepeatableGroupLabel({ id, children, }: {
 }): import("react").JSX.Element;
 /** An error about the whole group, under the rows; it describes the group. */
 export declare function RepeatableGroupError({ id, children, }: {
+    id: string;
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+/** Help text under the label; it describes the group. */
+export declare function RepeatableGroupDescription({ id, children, }: {
     id: string;
     children: ReactNode;
 }): import("react").JSX.Element;
+/** The label, then the description under it, each only when given. */
+export declare function RepeatableGroupHeading({ label, labelId, description, descriptionId, }: {
+    label?: ReactNode;
+    labelId: string;
+    description?: ReactNode;
+    descriptionId: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group.d.ts

@@ -9,4 +9,4 @@ export type { RepeatableGroupProps, RepeatableGroupRowContext, } from './types.j
  * politely. For react-hook-form, `RepeatableGroupFormField` wires it to
  * `useFieldArray`.
  */
-export declare function RepeatableGroup<TItem>({ items, renderRow, getKey, label, rowLabel, addLabel, onAdd, onRemove, onMove, reorderable, min, removeAtMin, max, removable, removeDisabledReason, disabled, error, emptyTitle, emptyDescription, className, ref, ...props }: RepeatableGroupProps<TItem>): import("react").JSX.Element;
+export declare function RepeatableGroup<TItem>({ items, renderRow, getKey, label, description, rowLabel, addLabel, onAdd, onRemove, onMove, reorderable, min, removeAtMin, max, removable, removeDisabledReason, disabled, error, emptyTitle, emptyDescription, className, ref, 'aria-describedby': own, ...props }: RepeatableGroupProps<TItem>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/types.d.ts

@@ -19,6 +19,11 @@ export type RepeatableGroupProps<TItem> = Omit<ComponentProps<'div'>, 'children'
     getKey?: (item: TItem, index: number) => Key;
     /** The group's label, above the rows; it names the group and the list. */
     label?: ReactNode;
+    /**
+     * Help text under the label, like other fields' help text; the group's
+     * `aria-describedby` points at it, so it is announced with the group.
+     */
+    description?: ReactNode;
     /**
      * What one row is, lower case: it names the row's buttons ("Remove
      * period 2") and the announcements. Default "row", translated.

package/dist/lib/components/ui/fields/repeatable-group/use-repeatable-group-text.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * The ids of the group's label, description and error, which of the three are
+ * given, and the group's `aria-describedby` (the caller's own ids, then the
+ * description's and the error's).
+ */
+export declare function useRepeatableGroupText(label: ReactNode, description: ReactNode, error: ReactNode, own?: string): {
+    named: boolean;
+    failed: boolean;
+    errorId: string;
+    /** The `RepeatableGroupHeading` props: what is not given stays undefined. */
+    heading: {
+        label: ReactNode;
+        labelId: string;
+        description: ReactNode;
+        descriptionId: string;
+    };
+    describedBy: string | undefined;
+};

package/dist/lib/components/ui/fields/textarea-field/textarea-field.d.ts

@@ -6,5 +6,7 @@ export type TextareaProps = {
     minRows?: number;
     maxRows?: number;
     showCount?: boolean;
+    /** Sets the theme's monospace font (`--font-mono`) for code-like plain text. */
+    monospace?: boolean;
 } & ComponentProps<'textarea'>;
-export declare function TextareaField({ error, helperText, label, className, placeholder, minRows, maxRows, showCount, maxLength, value, defaultValue, onChange, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function TextareaField({ error, helperText, label, className, placeholder, minRows, maxRows, showCount, monospace, maxLength, value, defaultValue, onChange, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/lib/components/ui/media/image-cropper/image-cropper.d.ts

@@ -5,7 +5,12 @@ export type ImageCropperProps = {
     aspect?: number;
     cropShape?: ImageCropShape;
     fileName?: string;
-    onCrop: (result: ImageCropResult) => void;
+    /**
+     * Receives the cropped file. May return a promise (an upload, say): Apply
+     * stays busy and Cancel disabled until it settles. A rejection keeps the
+     * crop, so the user can apply again; show your own error.
+     */
+    onCrop: (result: ImageCropResult) => void | Promise<void>;
     onCancel?: () => void;
     /** The Cancel button's variant. Default `'tonal'`; `'ghost'` restores the earlier look. */
     cancelVariant?: ButtonVariant;

package/dist/lib/components/ui/media/image-cropper/use-apply-crop.d.ts

@@ -0,0 +1,16 @@
+import { Area } from 'react-easy-crop';
+import { ImageCropResult } from './types.js';
+type Options = {
+    src: string;
+    area: Area | null;
+    rotation: number;
+    fileName?: string;
+    onCrop: (result: ImageCropResult) => void | Promise<void>;
+};
+/** The apply step: crops the image, hands it to `onCrop` and tracks saving. */
+export declare function useApplyCrop({ src, area, rotation, fileName, onCrop, }: Options): {
+    apply: () => Promise<void>;
+    isSaving: boolean;
+    error: string | null;
+};
+export {};

package/dist/lib/components/ui/media/image-cropper/use-image-cropper.d.ts

@@ -6,10 +6,10 @@ type Options = {
     src: string;
     aspect?: number;
     fileName?: string;
-    onCrop: (result: ImageCropResult) => void;
+    onCrop: (result: ImageCropResult) => void | Promise<void>;
     frameRef: RefObject<HTMLDivElement | null>;
 };
-/** The cropper's crop, zoom, rotation and aspect state, and the apply step. */
+/** The cropper's crop, zoom, rotation and aspect state, and the area to apply. */
 export declare function useImageCropper({ src, aspect: aspectProp, fileName, onCrop, frameRef, }: Options): {
     crop: Point;
     setCrop: import('react').Dispatch<import('react').SetStateAction<Point>>;

package/dist/lib/components/ui/widgets/education/questions/partials/content-lang.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export declare const ContentLangProvider: import('react').Provider<string | undefined>;
+export declare function useContentLang(): string | undefined;
+/**
+ * Marks a content part (prompt, option, hint, explanation, reference, example)
+ * with the question's `contentLang`. Without one it renders its children as
+ * they are, so a card with no `contentLang` keeps its markup. The card's own
+ * strings never go through it.
+ */
+export declare function ContentLang({ children, block, }: {
+    children: ReactNode;
+    /** A `div` instead of a `span`, for block content. */
+    block?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/partials/question-content.d.ts

@@ -1,3 +1,3 @@
 import { QuestionProps } from '../types.js';
 /** A question's fieldset: prompt, header, media, hint, the answer body and the feedback. */
-export declare function QuestionContent({ question, value, onValueChange, revealed: revealedProp, verdict, points, feedback, disabled, readOnly, busy, renderCode, promptId: promptIdProp, variant, density, showShortcuts, number, showFeedback: showFeedbackProp, preview, }: QuestionProps): import("react").JSX.Element;
+export declare function QuestionContent({ question, value, onValueChange, revealed: revealedProp, verdict, points, feedback, disabled, readOnly, busy, renderCode, promptId: promptIdProp, variant, density, showShortcuts, number, showFeedback: showFeedbackProp, preview, contentLang, }: QuestionProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/question-props.types.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { Question, QuestionAnswer, QuestionPoints, QuestionVerdict } from './types.js';
+/**
+ * What `renderCode` gets to draw the code field of a `code` question. The
+ * editor must be named by the prompt (`label`, or `aria-labelledby={labelledBy}`)
+ * and honour `readOnly` and `disabled`.
+ */
+export type QuestionCodeField = {
+    value: string;
+    onChange: (value: string) => void;
+    /** The prompt's id: name the field with `aria-labelledby`. */
+    labelledBy: string;
+    /** The id of the `description` line, when there is one: add it to `aria-describedby`. */
+    describedBy?: string;
+    /** The prompt, as a text label for editors that take one. */
+    label: string;
+    language?: string;
+    maxLength?: number;
+    readOnly: boolean;
+    disabled: boolean;
+    /** The card's `contentLang`, for an editor that takes a `lang` (the starter code's language). */
+    lang?: string;
+};
+export type QuestionProps = {
+    question: Question;
+    value?: QuestionAnswer;
+    onValueChange?: (value: QuestionAnswer) => void;
+    revealed?: boolean;
+    /**
+     * The id of the prompt (the fieldset's legend text), so a wrapper can use
+     * `aria-labelledby`. Default: a generated id. The `description` line is
+     * `${promptId}-description`.
+     */
+    promptId?: string;
+    /**
+     * The verdict the server gave, shown as given (no comparison with
+     * `question.correct` in the browser). It reveals the card; `pending` is a
+     * free answer still waiting for a grader; `unanswered` is a question left
+     * blank (no value is shown, the points read 0). `question.correct` may still
+     * be passed to highlight the correct choices.
+     */
+    verdict?: QuestionVerdict;
+    /** Points earned, shown in the verdict banner (needs `verdict`). */
+    points?: QuestionPoints;
+    /** A grader's remark, shown in the verdict banner (needs `verdict`). */
+    feedback?: string;
+    disabled?: boolean;
+    /** The answer is shown but not editable (already submitted), without the revealed marks. Every kind honours it. */
+    readOnly?: boolean;
+    /** An answer is being saved: the field is locked like `readOnly` and `aria-busy`. Every kind honours it. */
+    busy?: boolean;
+    /**
+     * The code field of a `code` question, e.g. `@nxgt/material/code-editor`'s
+     * `CodeEditor` (kept out of this bundle: Monaco is heavy). Without it the
+     * field is a monospace textarea.
+     */
+    renderCode?: (field: QuestionCodeField) => ReactNode;
+    className?: string;
+    /** `card` (the default) is framed; `plain` sits inside another surface. */
+    variant?: 'card' | 'plain';
+    density?: 'comfortable' | 'compact';
+    /** Shows a key badge (1, 2, 3…) on each option. */
+    showShortcuts?: boolean;
+    /** The question's number, shown above the prompt ("Question 2"). */
+    number?: number;
+    /** The verdict banner once revealed: right or wrong, the correct answer. */
+    showFeedback?: boolean;
+    /**
+     * An author's preview: the card is read-only and shows the marks, the
+     * `question.correct` answer (the right options marked, the expected text or
+     * number filled in) and the `explanation`, with no verdict banner.
+     * `verdict` and `showFeedback` are always ignored in a preview; `value` is
+     * ignored when the question has a `correct`. An `open` or `code` question
+     * has none, so pass its reference answer as `value`. Never used for a
+     * learner's attempt.
+     */
+    preview?: boolean;
+    /**
+     * The language of the question's content (a BCP 47 tag, `en`): sets `lang`
+     * on the prompt, the options, the hints, the explanation, the option
+     * explanations, the references and the code examples and starter, so a
+     * screen reader announces them in their own language. The card's own
+     * strings (buttons, labels, notes) keep the page's language. Default: no
+     * `lang`, the content takes the page's.
+     */
+    contentLang?: string;
+};

package/dist/lib/components/ui/widgets/education/questions/question.d.ts

@@ -1,2 +1,2 @@
 import { QuestionProps } from './types.js';
-export declare function QuestionCard({ question, value, onValueChange, revealed, verdict, points, feedback, disabled, readOnly, busy, renderCode, promptId, className, variant, density, showShortcuts, number, showFeedback, preview, }: QuestionProps): import("react").JSX.Element;
+export declare function QuestionCard({ question, value, onValueChange, revealed, verdict, points, feedback, disabled, readOnly, busy, renderCode, promptId, className, variant, density, showShortcuts, number, showFeedback, preview, contentLang, }: QuestionProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/types.d.ts

@@ -109,77 +109,4 @@ export type Question = {
     /** `code`: the language of the code ("python"), given to `renderCode`. */
     language?: string;
 };
-/**
- * What `renderCode` gets to draw the code field of a `code` question. The
- * editor must be named by the prompt (`label`, or `aria-labelledby={labelledBy}`)
- * and honour `readOnly` and `disabled`.
- */
-export type QuestionCodeField = {
-    value: string;
-    onChange: (value: string) => void;
-    /** The prompt's id: name the field with `aria-labelledby`. */
-    labelledBy: string;
-    /** The id of the `description` line, when there is one: add it to `aria-describedby`. */
-    describedBy?: string;
-    /** The prompt, as a text label for editors that take one. */
-    label: string;
-    language?: string;
-    maxLength?: number;
-    readOnly: boolean;
-    disabled: boolean;
-};
-export type QuestionProps = {
-    question: Question;
-    value?: QuestionAnswer;
-    onValueChange?: (value: QuestionAnswer) => void;
-    revealed?: boolean;
-    /**
-     * The id of the prompt (the fieldset's legend text), so a wrapper can use
-     * `aria-labelledby`. Default: a generated id. The `description` line is
-     * `${promptId}-description`.
-     */
-    promptId?: string;
-    /**
-     * The verdict the server gave, shown as given (no comparison with
-     * `question.correct` in the browser). It reveals the card; `pending` is a
-     * free answer still waiting for a grader; `unanswered` is a question left
-     * blank (no value is shown, the points read 0). `question.correct` may still
-     * be passed to highlight the correct choices.
-     */
-    verdict?: QuestionVerdict;
-    /** Points earned, shown in the verdict banner (needs `verdict`). */
-    points?: QuestionPoints;
-    /** A grader's remark, shown in the verdict banner (needs `verdict`). */
-    feedback?: string;
-    disabled?: boolean;
-    /** The answer is shown but not editable (already submitted), without the revealed marks. Every kind honours it. */
-    readOnly?: boolean;
-    /** An answer is being saved: the field is locked like `readOnly` and `aria-busy`. Every kind honours it. */
-    busy?: boolean;
-    /**
-     * The code field of a `code` question, e.g. `@nxgt/material/code-editor`'s
-     * `CodeEditor` (kept out of this bundle: Monaco is heavy). Without it the
-     * field is a monospace textarea.
-     */
-    renderCode?: (field: QuestionCodeField) => ReactNode;
-    className?: string;
-    /** `card` (the default) is framed; `plain` sits inside another surface. */
-    variant?: 'card' | 'plain';
-    density?: 'comfortable' | 'compact';
-    /** Shows a key badge (1, 2, 3…) on each option. */
-    showShortcuts?: boolean;
-    /** The question's number, shown above the prompt ("Question 2"). */
-    number?: number;
-    /** The verdict banner once revealed: right or wrong, the correct answer. */
-    showFeedback?: boolean;
-    /**
-     * An author's preview: the card is read-only and shows the marks, the
-     * `question.correct` answer (the right options marked, the expected text or
-     * number filled in) and the `explanation`, with no verdict banner.
-     * `verdict` and `showFeedback` are always ignored in a preview; `value` is
-     * ignored when the question has a `correct`. An `open` or `code` question
-     * has none, so pass its reference answer as `value`. Never used for a
-     * learner's attempt.
-     */
-    preview?: boolean;
-};
+export type { QuestionCodeField, QuestionProps, } from './question-props.types.js';

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-badge.d.ts

@@ -5,12 +5,10 @@ import { CalendarEventBadge } from '../types.js';
  * and, hidden visually, its text. The container that names it (a button, a
  * cell) holds the label in its own name.
  */
-export declare function CalendarBadge({ badge, slot, dot, wrap, className, }: {
+export declare function CalendarBadge({ badge, slot, dot, className, }: {
     badge: CalendarEventBadge;
     /** The `data-slot` of the pill; the dot adds `-dot`. */
     slot: string;
     dot?: boolean;
-    /** The label may take two lines instead of one clipped (a narrow corner). */
-    wrap?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-event-chip.d.ts

@@ -1,9 +1,11 @@
 import { CalendarEvent } from '../types.js';
-export declare function CalendarEventChip({ event: drawn, compact, tight, className, continuesBefore, continuesAfter, appearance, }: {
+export declare function CalendarEventChip({ event: drawn, compact, tight, short, className, continuesBefore, continuesAfter, appearance, }: {
     event: CalendarEvent;
     compact?: boolean;
     /** The chip's box is under 20px tall (back-to-back short events). */
     tight?: boolean;
+    /** The box is under 60px: a badge joins the time's line instead of a row of its own. */
+    short?: boolean;
     className?: string;
     continuesBefore?: boolean;
     continuesAfter?: boolean;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -1872,6 +1872,8 @@ export declare const en: {
             cancelled: string;
             "week-badge": string;
             "time-zone": string;
+            from: string;
+            until: string;
         };
         "event-chip": {
             cancelled: string;

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -1861,7 +1861,9 @@ declare const _default: {
 		"lane-all": "All weeks",
 		"cancelled": "Cancelled",
 		"week-badge": "Week: {label}",
-		"time-zone": "Time zone: {zone}"
+		"time-zone": "Time zone: {zone}",
+		"from": "From {time}",
+		"until": "Until {time}"
 	},
 	"event-chip": {
 		"cancelled": "Cancelled"

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -1872,6 +1872,8 @@ export declare const fr: {
             cancelled: string;
             "week-badge": string;
             "time-zone": string;
+            from: string;
+            until: string;
         };
         "event-chip": {
             cancelled: string;

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -1861,7 +1861,9 @@ declare const _default: {
 		"lane-all": "Toutes les semaines",
 		"cancelled": "Annulé",
 		"week-badge": "Semaine : {label}",
-		"time-zone": "Fuseau horaire : {zone}"
+		"time-zone": "Fuseau horaire : {zone}",
+		"from": "À partir de {time}",
+		"until": "Jusqu’à {time}"
 	},
 	"event-chip": {
 		"cancelled": "Annulé"

package/dist/lib/i18n/resources/resources.d.ts

@@ -1870,6 +1870,8 @@ export declare const resources: {
                 cancelled: string;
                 "week-badge": string;
                 "time-zone": string;
+                from: string;
+                until: string;
             };
             "event-chip": {
                 cancelled: string;
@@ -5461,6 +5463,8 @@ export declare const resources: {
                 cancelled: string;
                 "week-badge": string;
                 "time-zone": string;
+                from: string;
+                until: string;
             };
             "event-chip": {
                 cancelled: string;