@nxgt/material 3.103.0 → 3.104.0

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

@@ -19,6 +19,7 @@ export * from './percent-field/index.js';
 export * from './phone-field/index.js';
 export * from './postal-address/index.js';
 export * from './quantity-field/index.js';
+export * from './quantity-stepper/index.js';
 export * from './rating-field/index.js';
 export * from './repeatable-group/index.js';
 export * from './search-field/index.js';

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

@@ -31,7 +31,7 @@ export type QuantityFieldProps = {
     max?: number;
     step?: number;
     hideSteppers?: boolean;
-    /** The units offered. */
+    /** The units offered. Without `units` and `allowCustomUnit` the unit chip is not drawn: a plain count. */
     units?: QuantityUnit[];
     /** The unit is typed; `units` become suggestions. Without it the unit is picked from `units`. */
     allowCustomUnit?: boolean;

package/dist/lib/components/ui/fields/quantity-stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { QuantityStepper } from './quantity-stepper.js';
+export type { QuantityStepperProps, QuantityStepperSize, } from './quantity-stepper.types.js';

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper-model.d.ts

@@ -0,0 +1,9 @@
+export type StepperLimits = {
+    min: number;
+    max?: number;
+    step: number;
+};
+/** The value a key asks for, or `null` when the key is not the stepper's. */
+export declare function valueForKey(key: string, value: number, { min, max, step }: StepperLimits): number | null;
+/** What was typed, clamped; `null` (keep the old value) when it is not a number. */
+export declare function valueForText(text: string, { min, max }: StepperLimits): number | null;

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper-value.d.ts

@@ -0,0 +1,15 @@
+import { StepperLimits } from './quantity-stepper-model.js';
+type Props = {
+    value: number;
+    limits: StepperLimits;
+    name: string;
+    editable?: boolean;
+    disabled?: boolean;
+    onValue: (value: number) => void;
+};
+/**
+ * The value: a spinbutton (arrow keys, Page and Home/End). A `<span>` to read,
+ * or a text input with `editable`, whose text is committed on Enter or blur.
+ */
+export declare function QuantityStepperValue({ value, limits, name, editable, disabled, onValue, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper.d.ts

@@ -0,0 +1,9 @@
+import { QuantityStepperProps } from './quantity-stepper.types.js';
+/**
+ * An inline −/value/+ control for a cart or ticket line: no label, no field
+ * box. A named `group` holding a minus button, the value (a `spinbutton`, with
+ * the arrow keys; typed with `editable`) and a plus button, each button 44px
+ * under a coarse pointer. With `onRemove`, the minus button becomes a remove
+ * (trash) button at `min`. Fits a `ListTile`'s `content` or `trailing`.
+ */
+export declare function QuantityStepper({ 'aria-label': ariaLabel, value: controlled, defaultValue, onValueChange, min, max, step, size, editable, onRemove, disabled, className, ...props }: QuantityStepperProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper.types.d.ts

@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react';
+export type QuantityStepperSize = 'sm' | 'md';
+export type QuantityStepperProps = Omit<ComponentProps<'div'>, 'children' | 'defaultValue' | 'onChange' | 'role' | 'aria-label'> & {
+    /**
+     * What the control counts, as a sentence: "Quantity of Orange juice". It
+     * names the group and the value, and the buttons are named after it
+     * ("Decrease Quantity of Orange juice"). Required: a stepper in a list
+     * row has no visible label.
+     */
+    'aria-label': string;
+    /** The controlled value. */
+    value?: number;
+    /** The first value when uncontrolled; `min` (or 0) when unset. */
+    defaultValue?: number;
+    /** Called with the new value, always within `min` and `max`. */
+    onValueChange?: (value: number) => void;
+    /** The lowest value. Default 0. */
+    min?: number;
+    /** The highest value. Default none. */
+    max?: number;
+    /** What a button press adds or removes. Default 1. */
+    step?: number;
+    /** `sm` 32px buttons, `md` 36px buttons (default). Both are 44px under a coarse pointer. */
+    size?: QuantityStepperSize;
+    /** The value can be typed: it is a text input (committed on Enter or blur, Escape cancels). Default false. */
+    editable?: boolean;
+    /**
+     * Turns the minus button into a remove (trash) button while the value is
+     * at `min`: it calls `onRemove` instead of stepping. Without it the minus
+     * button is disabled at `min`.
+     */
+    onRemove?: () => void;
+    /** Disables every control. */
+    disabled?: boolean;
+};

package/dist/lib/components/ui/fields/quantity-stepper/use-quantity-stepper.d.ts

@@ -0,0 +1,28 @@
+type Options = {
+    label: string;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min: number;
+    max?: number;
+    step: number;
+    onRemove?: () => void;
+};
+/** The stepper's value (controlled or not), its limits, its button names and what each button does. */
+export declare function useQuantityStepper({ label, value: controlled, defaultValue, onValueChange, min, max, step, onRemove, }: Options): {
+    value: number;
+    set: (next: number) => void;
+    limits: {
+        min: number;
+        max: number | undefined;
+        step: number;
+    };
+    atMin: boolean;
+    atMax: boolean;
+    removing: boolean;
+    decreaseLabel: string;
+    increaseLabel: string;
+    decrease: () => void;
+    increase: () => void;
+};
+export {};

package/dist/lib/components/ui/layout/pane-layout/pane-layout.d.ts

@@ -1,17 +1,22 @@
 import { ComponentProps } from 'react';
 import { PaneLayoutContent } from './partials/pane-layout-content.js';
-import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
+import { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
 import { PaneLayoutPane } from './partials/pane-layout-pane.js';
 import { PaneLayoutTrigger } from './partials/pane-layout-trigger.js';
 export { PaneLayoutContent, type PaneLayoutContentProps, } from './partials/pane-layout-content.js';
-export type { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
+export type { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
 export { usePaneLayout } from './partials/pane-layout-context.js';
 export { PaneLayoutPane, type PaneLayoutPaneProps, } from './partials/pane-layout-pane.js';
 export { PaneLayoutTrigger, type PaneLayoutTriggerProps, } from './partials/pane-layout-trigger.js';
 export interface PaneLayoutProps extends ComponentProps<'div'> {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    defaultOpen?: boolean;
+    /**
+     * Whether the pane starts open: a boolean for every viewport, `'desktop'`
+     * (open wide, shut on a phone) or `{ desktop, phone }`. The phone value
+     * applies from the first client render, with no sheet flash.
+     */
+    defaultOpen?: PaneLayoutDefaultOpen;
     paneSide?: PaneSide;
     /**
      * How the pane shows below 768px: `sheet` (side sheet), `bottom` (bottom

package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-classes.d.ts

@@ -1,7 +1,7 @@
 import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
 /** The flex direction of the row that holds the pane and the content. */
-export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): string;
+export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint): string;
 /** The inline pane's size, and when it gives way to a sheet or a stack. */
-export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth): string;
+export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth, paneSide: PaneSide): string;
 /** The edge the pane shares with the content. */
 export declare function paneBorderClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): "border-t md:border-t-0 md:border-r" | "border-t md:border-t-0 md:border-l" | "border-t @3xl:border-t-0 @3xl:border-r" | "border-t @3xl:border-t-0 @3xl:border-l" | "border-l" | "border-r";

package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-context.d.ts

@@ -10,6 +10,15 @@ export type PaneLayoutPhone = 'sheet' | 'bottom' | 'stack';
 export type PaneLayoutBreakpoint = 'viewport' | 'container';
 /** Width of the inline pane: `sm` 16rem, `md` 20rem (default), `lg` 24rem. */
 export type PaneLayoutPaneWidth = 'sm' | 'md' | 'lg';
+/**
+ * Whether the pane starts open. A boolean applies to every viewport; `'desktop'`
+ * is open on a wide screen and shut on a phone; an object sets each side
+ * (a missing key is shut).
+ */
+export type PaneLayoutDefaultOpen = boolean | 'desktop' | {
+    desktop?: boolean;
+    phone?: boolean;
+};
 export interface PaneLayoutContextProps {
     open: boolean;
     setOpen: (open: boolean | ((prevOpen: boolean) => boolean)) => void;

package/dist/lib/components/ui/layout/pane-layout/partials/use-pane-layout-state.d.ts

@@ -1,10 +1,15 @@
 import { RefObject } from 'react';
-import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
+import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
 export declare const PHONE_MAX = 768;
+/** The default open state for a wide screen and for a phone. */
+export declare function resolveDefaultOpen(d: PaneLayoutDefaultOpen): {
+    desktop: boolean;
+    phone: boolean;
+};
 interface Options {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    defaultOpen: boolean;
+    defaultOpen: PaneLayoutDefaultOpen;
     paneSide: PaneSide;
     phone?: PaneLayoutPhone;
     breakpoint: PaneLayoutBreakpoint;

package/dist/lib/components/ui/layout/panel-card/panel-card.d.ts

@@ -16,6 +16,8 @@ export type PanelCardProps = Omit<ComponentProps<'div'>, 'title'> & {
 /**
  * A titled card for the side of a page (an `ActivityContent` aside) or its
  * sections: a heading, an optional description and header actions over the
- * content. The card is a named region, labelled by its heading.
+ * content. The card is a named region, labelled by its heading. The title is
+ * set in the card-title step (`title-sm` emphasized), one step below an
+ * `ActivityContent` page title, whatever its heading level.
  */
 export declare function PanelCard({ title, description, headingLevel, actions, className, children, ...props }: PanelCardProps): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/collapsible/collapsible.d.ts

@@ -9,8 +9,16 @@ type CollapsibleTriggerProps = ComponentProps<typeof CollapsiblePrimitive.Collap
      * look and brings its own icon.
      */
     variant?: 'tonal' | 'text';
+    /**
+     * With `variant="text"`, drops the inline padding so the label starts at
+     * the section's left edge, and takes the font of its parent, so the
+     * trigger can sit inside a heading (`Typography as="h3"`) and line up
+     * with the headings around it. The chevron, its rotation, the hover and
+     * the focus ring stay. Ignored on the other variants.
+     */
+    flush?: boolean;
 };
-declare function CollapsibleTrigger({ className, children, variant, asChild, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+declare function CollapsibleTrigger({ className, children, variant, flush, asChild, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
 /**
  * Springs open to its height and folds away (collapsible.css); reduced
  * motion shows and hides it at once.

package/dist/lib/components/ui/primitives/tabs/partials/tabs-list.d.ts

@@ -8,7 +8,12 @@ import { TabsScrollButtonsMode } from '../tabs-overflow-classes.js';
  * `scrollButtons="none"` the buttons are left out and the list stays a plain
  * touch-scrollable row with a soft fade on each side that hides tabs.
  */
-export declare function TabsList({ scrollButtons, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
+export declare function TabsList({ scrollButtons, fullWidth, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
     /** `auto` (default): scroll buttons while tabs are hidden; `none`: no buttons. */
     scrollButtons?: TabsScrollButtonsMode;
+    /**
+     * `segmented` only: the list fills its container and its tabs share the
+     * width in equal parts. Ignored by `underline`, which already stretches.
+     */
+    fullWidth?: boolean;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/tabs/tabs-classes.d.ts

@@ -18,6 +18,7 @@ export type TabsLook = 'underline' | 'segmented';
 export declare function tabsLook(variant: TabsVariant | undefined): TabsLook;
 export declare const TABS_ROOT: Record<TabsLook, string>;
 export declare const TABS_LIST: Record<TabsLook, string>;
+export declare const TABS_LIST_FULL = "w-full [&>[role=tab]]:flex-1 [&>[role=tab]]:basis-0";
 export declare const TABS_TRIGGER: Record<TabsLook, string>;
 export declare const TABS_INDICATOR: Record<TabsLook, string>;
 /** The label beside a trigger's icon. */

package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.d.ts

@@ -16,6 +16,14 @@ type ChipGroupFieldBase = ChoiceGroupBase & ChoiceSelection & {
      * the accessible description.
      */
     showDisabledReason?: boolean;
+    /**
+     * `'wrap'` (default) lets the chips flow onto several lines. `'scroll'`
+     * keeps them on one line that scrolls sideways (touch, trackpad, the
+     * wheel; a focused chip scrolls into view), with a fade at each
+     * edge that hides more chips. The page never scrolls sideways. Ignored
+     * with `columns` or `groups`, which lay the chips out in a grid.
+     */
+    overflow?: 'wrap' | 'scroll';
 };
 export type ChipGroupFieldProps = ChipGroupFieldBase & {
     /** The chips, in one flow. Give `options` or `groups`. */

package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.types.d.ts

@@ -1,3 +1,4 @@
+import { Tone } from '../../tones.js';
 import { ChoiceOption } from '../choice-group/choice-group.types.js';
 export type ChipGroupOption = ChoiceOption & {
     label: string;
@@ -5,6 +6,11 @@ export type ChipGroupOption = ChoiceOption & {
     description?: string;
     /** Shown after the label and added to its accessible name. */
     count?: number;
+    /**
+     * The chip's tone, as `Badge`'s: unselected a soft tint with the tone's text,
+     * selected the filled tone (the check still marks the choice). Neutral without one.
+     */
+    tone?: Tone;
 };
 /** A titled run of options, such as "Morning" or "Afternoon". */
 export type ChipGroupSection = {

package/dist/lib/components/ui/selection/chip-group-field/partials/chip-group-reasons.d.ts

@@ -0,0 +1,10 @@
+type Reason = {
+    id: string;
+    text: string;
+    label: string;
+};
+/** The disabled options' reasons, printed below the whole chip row ("Label: reason"). */
+export declare function ChipGroupReasons({ reasons }: {
+    reasons: Reason[];
+}): import("react").JSX.Element | null;
+export {};

package/dist/lib/components/ui/selection/chip-group-field/partials/use-chip-rail.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/**
+ * The single scrolling line of `ChipGroupField overflow="scroll"`: the ref and
+ * attributes of the chips' box, and its classes. `data-fade` says which edge
+ * hides more chips (`start`, `end` or `both`), read off the scroll offset.
+ * With `enabled` false nothing is attached and the chips wrap.
+ */
+export declare function useChipRail(enabled: boolean): {
+    ref: RefObject<HTMLDivElement | null> | undefined;
+    props: Record<string, string | undefined> | undefined;
+    className: string | undefined;
+};

package/dist/lib/components/ui/selection/choice-group/choice-group-root.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, Ref } from 'react';
 import { useChoiceGroup } from './use-choice-group.js';
 export type ChoiceGroupRootProps = {
     /** What the root reads of the group: not its items, so any element type fits. */
@@ -11,10 +11,13 @@ export type ChoiceGroupRootProps = {
     inlineReasons?: boolean;
     /** Printed after the items, outside their flow: the visible reasons the items point to. */
     reasonsBelow?: ReactNode;
+    /** Ref and extra attributes of the box that holds the items (a scrolling rail reads its edges). */
+    contentRef?: Ref<HTMLDivElement>;
+    contentProps?: ComponentProps<'div'> & Record<`data-${string}`, string | undefined>;
     children: ReactNode;
 } & Omit<ComponentProps<'div'>, 'children' | 'role' | 'id' | 'onKeyDown'>;
 /**
  * A choice group's root: label, items, help or "not valid" hint, the hidden
  * reasons items point to, and a polite live region for the count.
  */
-export declare function ChoiceGroupRoot({ group, name, slot, className, contentClassName, inlineReasons, reasonsBelow, children, ref: _ref, ...props }: ChoiceGroupRootProps): import("react").JSX.Element;
+export declare function ChoiceGroupRoot({ group, name, slot, className, contentClassName, inlineReasons, reasonsBelow, contentRef, contentProps, children, ref: _ref, ...props }: ChoiceGroupRootProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/native-charts/core/label-placement.d.ts

@@ -0,0 +1,25 @@
+/** A point of a series on the plot, in pixels. */
+export type PlotPoint = {
+    x: number;
+    y: number;
+};
+/**
+ * Where a threshold's label goes: the first of end-above, end-below, start-above
+ * and start-below whose text box stays inside the plot and meets no series
+ * segment nor marker within its x-range. When none is free, the label stays at
+ * the end, clamped inside the plot (`thresholdLabelBaseline`). `edge` is the x
+ * of the label's end side (its right edge), `startEdge` of its start side (its
+ * left edge); `width` is the text's width. The label box spans `edge - width`
+ * to `edge` at the end side, `startEdge` to `startEdge + width` at the start.
+ */
+export declare function placeThresholdLabel(input: {
+    lineY: number;
+    floor: number;
+    edge: number;
+    startEdge: number;
+    width: number;
+    series: readonly (readonly (PlotPoint | null)[])[];
+}): {
+    side: 'end' | 'start';
+    baseline: number;
+};

package/dist/lib/components/ui/widgets/native-charts/core/reference-geometry.d.ts

@@ -57,9 +57,10 @@ export declare function markersBetween(ys: readonly (number | null)[], x: (index
  * of the plot. `pointYs` are the y of the series' points under the label's
  * width: when one would sit on the label above the line and none would
  * under it, the label goes to the other side, so it never covers a point or
- * its marker.
+ * its marker. `floor` is the plot's height: the label stays inside the plot,
+ * so a side with no room is left for the other, or the baseline is clamped.
  */
-export declare function thresholdLabelBaseline(lineY: number, pointYs?: readonly number[]): number;
+export declare function thresholdLabelBaseline(lineY: number, pointYs?: readonly number[], floor?: number): number;
 /** How many of `values` lie outside `band` (a missing value is not counted, nor one in a row where a stepped band has no range), and how many there are. */
 export declare function outsideBand(values: readonly (number | null | undefined)[], band: Pick<RefBand, 'from' | 'to' | 'ranges'>): {
     outside: number;

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

@@ -1374,6 +1374,9 @@ export declare const en: {
             "unit-named": string;
             "use-typed": string;
         };
+        "quantity-stepper": {
+            remove: string;
+        };
         "markdown-textarea-field": {
             write: string;
             preview: string;

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

@@ -1364,6 +1364,9 @@ declare const _default: {
 		"unit-named": "{label} unit",
 		"use-typed": "Use “{unit}”"
 	},
+	"quantity-stepper": {
+		"remove": "Remove {label}"
+	},
 	"markdown-textarea-field": {
 		"write": "Write",
 		"preview": "Preview",
@@ -3205,7 +3208,7 @@ declare const _default: {
 			"modulo": "Modulo",
 			"separator": "Argument separator",
 			"answer": "Previous answer",
-			"double-zero": "Double zero",
+			"double-zero": "00, double zero",
 			"quantity": "Enter a quantity",
 			"discount": "Enter a discount",
 			"add-line": "Add to ticket",

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

@@ -1374,6 +1374,9 @@ export declare const fr: {
             "unit-named": string;
             "use-typed": string;
         };
+        "quantity-stepper": {
+            remove: string;
+        };
         "markdown-textarea-field": {
             write: string;
             preview: string;

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

@@ -1364,6 +1364,9 @@ declare const _default: {
 		"unit-named": "Unité de {label}",
 		"use-typed": "Utiliser « {unit} »"
 	},
+	"quantity-stepper": {
+		"remove": "Retirer {label}"
+	},
 	"markdown-textarea-field": {
 		"write": "Écrire",
 		"preview": "Aperçu",
@@ -3205,7 +3208,7 @@ declare const _default: {
 			"modulo": "Modulo",
 			"separator": "Séparateur d’arguments",
 			"answer": "Dernier résultat",
-			"double-zero": "Double zéro",
+			"double-zero": "00, double zéro",
 			"quantity": "Saisir une quantité",
 			"discount": "Saisir une remise",
 			"add-line": "Ajouter au ticket",

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

@@ -1372,6 +1372,9 @@ export declare const resources: {
                 "unit-named": string;
                 "use-typed": string;
             };
+            "quantity-stepper": {
+                remove: string;
+            };
             "markdown-textarea-field": {
                 write: string;
                 preview: string;
@@ -4997,6 +5000,9 @@ export declare const resources: {
                 "unit-named": string;
                 "use-typed": string;
             };
+            "quantity-stepper": {
+                remove: string;
+            };
             "markdown-textarea-field": {
                 write: string;
                 preview: string;