nexus-shared 3.0.0 → 3.2.0

package/dist/Components/Inputs/CodeBox.d.ts

@@ -0,0 +1,69 @@
+import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from "react";
+import type { CodeRules, InputDesign, ValidateOn } from "../../Interfaces/InputInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+type NativeInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "size" | "value" | "defaultValue" | "pattern" | "minLength" | "maxLength" | "prefix" | "placeholder" | "children" | keyof CodeRules>;
+export interface CodeBoxProps extends NativeInputProps, CodeRules {
+    label?: ReactNode;
+    /** Help text under the boxes. */
+    hint?: ReactNode;
+    /** An error from outside, such as the server's "That code is wrong". Shown before the field's own message. */
+    error?: string | null;
+    /** Accepted for forms that set one on every input; the label of a code always sits above its boxes. */
+    design?: InputDesign;
+    /** Default `md`. */
+    size?: Size;
+    /** The boxes share the field's whole width, as on a sign-in card. Default: each box keeps its size. */
+    block?: boolean;
+    /** Shown between groups, such as "-" for an SSN. Default: a wider gap only. */
+    separator?: string;
+    /** A dot in each filled box instead of its character, for a PIN or an SSN. The browser treats it as a password. */
+    masked?: boolean;
+    /** Faint text in the empty boxes: one character for every box ("0"), or one per box ("MMDDYYYY"). */
+    slotPlaceholder?: string;
+    /**
+     * The code: only the characters it takes, without separators ("123456789" for an SSN). A saved code loses only its
+     * separators and case (`loadCode`); one the boxes cannot hold - a character the code does not take, or more characters
+     * than boxes - is kept as it is and shown invalid at once, with its message, never cut.
+     */
+    value?: string;
+    defaultValue?: string;
+    /** What a read-only field says when someone tries to change it. Default "Read-only: this code cannot be changed." */
+    readOnlyMessage?: string;
+    /** Name used in messages, e.g. "The code needs all 6 digits." Default: the label, when it is text. */
+    fieldName?: string;
+    /** When the field shows its own message. Default `blur`; submitting a form always shows it. */
+    validateOn?: ValidateOn;
+    /** The code after each change. */
+    onValueChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Once every box is filled, with the code, so a one-time code can go without a button press. Once per code, and again
+     * once the boxes were short, however they got so: typing, a form's reset, or the page emptying a controlled `value`.
+     */
+    onComplete?: (value: string) => void;
+    /** Class of the outer field. `inputClassName` goes on the input. */
+    className?: string;
+    inputClassName?: string;
+}
+/**
+ * A code typed one character to a box: a one-time code, a PIN, an SSN, a licence key, a hex colour. Digits, letters,
+ * both, hex, or any one-character pattern; boxes in groups with a separator; dots for a secret.
+ *
+ * It is one real input under the boxes, so a phone offers the code from its message (`autoComplete="one-time-code"`),
+ * a pasted "123-45-6789" fills every box, and a screen reader reads one field. The boxes are drawn from that input
+ * straight in the DOM, so typing re-renders nothing. Uncontrolled by default, like the text box; `value` also works.
+ *
+ * Typing follows one model, however the text comes - a key, a phone's keyboard, an input method, a paste, autofill
+ * (`typeCode`): a whole code replaces everything; a character goes over a selected box, or into the box with the ring -
+ * inserted while the code has an empty box, so a gap Backspace or Delete left takes back what was there, and over that
+ * box once the code is full. A click or an arrow key selects a filled box; a full code's caret selects its last box. An
+ * input method's word goes in once, when it commits.
+ *
+ * A saved code loses only its separators and case (`loadCode`); one the boxes cannot hold is kept and shown invalid at
+ * once, never cut. A screen reader hears the label, then what the boxes show: "9 digits, in groups of 3, 2 and 4", or
+ * "8 digits: DD/MM/YYYY" with a hint in each box (`describeCode`). A read-only code rings every box while it has focus.
+ *
+ * @example <CodeBox label="Verification code" autoComplete="one-time-code" required onComplete={code => verify(code)} />
+ * @example <CodeBox label="SSN" groups={[3, 2, 4]} separator="-" masked />
+ */
+export declare function CodeBox(props: CodeBoxProps): import("react").JSX.Element;
+export {};

package/dist/Components/Inputs/CodeBox.js

@@ -0,0 +1,316 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { codeAfterInput, codeFits, codeGroups, codeLength, describeCode, loadCode, moveCode, typeCode, validateCode, } from "../../Helpers/CodeHelpers.js";
+import { Field } from "./Field.js";
+import { useInputField } from "./InputField.js";
+import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+/**
+ * A code typed one character to a box: a one-time code, a PIN, an SSN, a licence key, a hex colour. Digits, letters,
+ * both, hex, or any one-character pattern; boxes in groups with a separator; dots for a secret.
+ *
+ * It is one real input under the boxes, so a phone offers the code from its message (`autoComplete="one-time-code"`),
+ * a pasted "123-45-6789" fills every box, and a screen reader reads one field. The boxes are drawn from that input
+ * straight in the DOM, so typing re-renders nothing. Uncontrolled by default, like the text box; `value` also works.
+ *
+ * Typing follows one model, however the text comes - a key, a phone's keyboard, an input method, a paste, autofill
+ * (`typeCode`): a whole code replaces everything; a character goes over a selected box, or into the box with the ring -
+ * inserted while the code has an empty box, so a gap Backspace or Delete left takes back what was there, and over that
+ * box once the code is full. A click or an arrow key selects a filled box; a full code's caret selects its last box. An
+ * input method's word goes in once, when it commits.
+ *
+ * A saved code loses only its separators and case (`loadCode`); one the boxes cannot hold is kept and shown invalid at
+ * once, never cut. A screen reader hears the label, then what the boxes show: "9 digits, in groups of 3, 2 and 4", or
+ * "8 digits: DD/MM/YYYY" with a hint in each box (`describeCode`). A read-only code rings every box while it has focus.
+ *
+ * @example <CodeBox label="Verification code" autoComplete="one-time-code" required onComplete={code => verify(code)} />
+ * @example <CodeBox label="SSN" groups={[3, 2, 4]} separator="-" masked />
+ */
+export function CodeBox(props) {
+    const { label, hint, error, design: _design, size = "md", block = false, separator, masked = false, slotPlaceholder, length, groups, characters = "digits", allowed, letterCase = "upper", required, validate, value, defaultValue, readOnlyMessage = "Read-only: this code cannot be changed.", fieldName, validateOn, onValueChange, onComplete, className, inputClassName, style, disabled, readOnly, ref, autoComplete = "off", inputMode, onChange, onBlur, onInvalid, onKeyDown, onClick, onPaste, onFocus, onSelect, ...inputProps } = props;
+    const rules = { length, groups, characters, allowed, letterCase, required, validate };
+    const shape = { ...rules, separator, slotPlaceholder };
+    const sizes = codeGroups(rules);
+    const total = codeLength(rules);
+    const editable = !disabled && !readOnly;
+    // What the boxes say to the eye - how many, of what, in which groups, the hint in each - said to a screen reader.
+    const shapeId = useId();
+    const rowRef = useRef(null);
+    // The last code `onComplete` was told, so moving the caret or retyping the same code does not tell it again. It is
+    // forgotten whenever the boxes are short of a whole code, however they got so: typing, a form's reset, the page.
+    const completedRef = useRef(null);
+    // The input as its last change left it, for a change no `beforeinput` announced (autofill).
+    const lastRef = useRef(null);
+    // The input just before the browser changes it, from `beforeinput`.
+    const beforeRef = useRef(null);
+    // While an input method composes: the input as it was before. Its word is applied once, when it commits.
+    const composingRef = useRef(null);
+    // Set while this box announces its own change, which the browser-change listener leaves alone.
+    const announcingRef = useRef(false);
+    // A controlled box's text while an input method composes, so a render then does not put the code back over the word.
+    const [composed, setComposed] = useState(null);
+    const field = useInputField({
+        ...props,
+        "aria-describedby": [shapeId, props["aria-describedby"]].filter(Boolean).join(" "),
+        onChange: event => {
+            const code = event.currentTarget.value;
+            onChange?.(event);
+            onValueChange?.(code, event);
+            if ([...code].length < total)
+                completedRef.current = null;
+            else if (completedRef.current !== code) {
+                completedRef.current = code;
+                onComplete?.(code);
+            }
+        },
+    }, {
+        check: (element, name) => validateCode(element.value, rules, name),
+        checkKeys: [value, required, total, sizes.join(), characters, allowed, letterCase, validate],
+        onReset: element => {
+            forgetIfShort(element.value);
+            lastRef.current = readEdit(element);
+            paint();
+        },
+    });
+    const readOnlyNotice = useReadOnlyNotice(Boolean(readOnly) && !disabled, field.elementRef, readOnlyMessage);
+    function forgetIfShort(code) {
+        if ([...code].length < total)
+            completedRef.current = null;
+    }
+    /**
+     * Draws the boxes from the input: each one's character (or a dot), and the caret, the selection, and focus. While an
+     * input method composes, they show its word as the code will hold it.
+     */
+    function paint() {
+        const input = field.elementRef.current;
+        const row = rowRef.current;
+        if (!input || !row)
+            return;
+        const composing = composingRef.current;
+        const shown = composing ? codeAfterInput(composing, readEdit(input), rules) : readEdit(input);
+        const characters = [...shown.value];
+        const hasFocus = !disabled && input.ownerDocument.activeElement === input;
+        const focused = editable && hasFocus;
+        // A read-only code has no caret: focus marks every box, which shows the accent border alone, as a read-only box does.
+        const lookedAt = hasFocus && !editable;
+        const { start, end } = shown;
+        row.querySelectorAll(".nx-code__slot").forEach((slot, index, slots) => {
+            const character = characters[index];
+            const text = character === undefined ? "" : masked ? "•" : character;
+            if (slot.textContent !== text)
+                slot.textContent = text;
+            const selected = focused && end > start && index >= start && index < end;
+            // A caret is drawn on the box after it; at the end of a full code, on the last box.
+            const caret = focused && start === end && index === Math.min(start, slots.length - 1);
+            mark(slot, "data-active", lookedAt || selected || caret);
+            mark(slot, "data-selected", selected);
+            mark(slot, "data-caret", caret && character === undefined);
+        });
+    }
+    // A value from the parent, a new shape, or the first render: the input holds the code as the boxes take it. Not
+    // while an input method composes: its word goes in when it commits. A saved code the boxes cannot hold says so at once.
+    useLayoutEffect(() => {
+        const input = field.elementRef.current;
+        if (!input)
+            return;
+        if (!composingRef.current) {
+            if (value !== undefined) {
+                const code = loadCode(value, shape);
+                if (input.value !== code)
+                    input.value = code;
+            }
+            lastRef.current = readEdit(input);
+            if (editable && input.value && !codeFits(input.value, rules))
+                field.touch();
+        }
+        forgetIfShort(input.value);
+        paint();
+    });
+    // The caret moves without a change (a click, the browser's own keys): follow it while the input has focus.
+    const follow = useEffectEvent(() => {
+        const input = field.elementRef.current;
+        if (!input || input.ownerDocument.activeElement !== input)
+            return;
+        if (!composingRef.current)
+            lastRef.current = readEdit(input);
+        paint();
+    });
+    useEffect(() => {
+        const document = field.elementRef.current?.ownerDocument;
+        document?.addEventListener("selectionchange", follow);
+        return () => document?.removeEventListener("selectionchange", follow);
+    }, []);
+    /* Text the browser puts in itself: a phone's keyboard, an input method, autofill, a drop, Backspace and Delete */
+    const beforeInput = useEffectEvent(() => {
+        const input = field.elementRef.current;
+        if (input && !composingRef.current)
+            beforeRef.current = readEdit(input);
+    });
+    const compositionStart = useEffectEvent(() => {
+        const input = field.elementRef.current;
+        if (input)
+            composingRef.current = readEdit(input);
+        beforeRef.current = null;
+    });
+    // The input method committed (or gave up): its word goes in once, as typed text does, and is announced.
+    const compositionEnd = useEffectEvent(() => {
+        const input = field.elementRef.current;
+        const composing = composingRef.current;
+        composingRef.current = null;
+        if (value !== undefined)
+            setComposed(null);
+        if (input && composing)
+            apply(input, codeAfterInput(composing, readEdit(input), rules), true);
+    });
+    const browserInput = useEffectEvent((event) => {
+        const input = field.elementRef.current;
+        if (!input || announcingRef.current)
+            return;
+        if (!composingRef.current && event.isComposing)
+            composingRef.current = lastRef.current;
+        if (composingRef.current) {
+            // Mid-composition the input keeps the input method's text: rewriting it now makes the input method type its whole
+            // word again. React does not hear of it either, so nothing checks or reports a word half typed.
+            event.stopPropagation();
+            if (value !== undefined)
+                setComposed(input.value);
+            paint();
+            return;
+        }
+        // Before React's onChange: the input holds the code the model makes of the change, and React reports that.
+        const before = beforeRef.current ?? lastRef.current ?? readEdit(input);
+        beforeRef.current = null;
+        apply(input, codeAfterInput(before, readEdit(input), rules), false);
+    });
+    useLayoutEffect(() => {
+        const input = field.elementRef.current;
+        if (!input)
+            return;
+        const listeners = [
+            ["beforeinput", () => beforeInput()],
+            ["compositionstart", () => compositionStart()],
+            ["compositionend", () => compositionEnd()],
+            ["input", event => browserInput(event)],
+        ];
+        for (const [name, listener] of listeners)
+            input.addEventListener(name, listener);
+        return () => {
+            for (const [name, listener] of listeners)
+                input.removeEventListener(name, listener);
+        };
+    }, []);
+    /** Puts an edit into the input and draws it; `announce` reports it as typing does, so React and every listener hear. */
+    function apply(input, edit, announce) {
+        // setRangeText leaves React's own copy of the value alone, so React sees the change and calls onChange.
+        if (input.value !== edit.value)
+            input.setRangeText(edit.value, 0, input.value.length, "end");
+        input.setSelectionRange(edit.start, edit.end);
+        lastRef.current = edit;
+        if (announce) {
+            announcingRef.current = true;
+            try {
+                input.dispatchEvent(new Event("input", { bubbles: true }));
+            }
+            finally {
+                announcingRef.current = false;
+            }
+        }
+        paint();
+    }
+    function handleChange(event) {
+        lastRef.current = readEdit(event.currentTarget);
+        paint();
+        field.controlProps.onChange(event);
+    }
+    function handleKeyDown(event) {
+        readOnlyNotice.onKeyDown(event);
+        onKeyDown?.(event);
+        // An input method's keys are its own until it commits (229 is a key it holds, in every browser).
+        const composing = event.nativeEvent.isComposing || event.keyCode === 229;
+        if (event.defaultPrevented || !editable || composing || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        const input = event.currentTarget;
+        if (isCodeMove(event.key) && !event.shiftKey) {
+            event.preventDefault();
+            apply(input, moveCode(readEdit(input), event.key, rules), false);
+            return;
+        }
+        if ([...event.key].length !== 1)
+            return;
+        // One character from a keyboard goes in by the model; one the code does not take is not typed at all.
+        event.preventDefault();
+        const next = typeCode(readEdit(input), event.key, rules);
+        if (next)
+            apply(input, next, true);
+    }
+    function handlePaste(event) {
+        onPaste?.(event);
+        if (event.defaultPrevented || !editable)
+            return;
+        event.preventDefault();
+        const input = event.currentTarget;
+        // A whole code replaces what is there, a part of one goes in at the caret, and a message is read for its code.
+        const next = typeCode(readEdit(input), event.clipboardData.getData("text"), rules);
+        if (next)
+            apply(input, next, true);
+    }
+    function handleClick(event) {
+        readOnlyNotice.onClick(event);
+        onClick?.(event);
+        const input = event.currentTarget;
+        const slots = rowRef.current?.querySelectorAll(".nx-code__slot");
+        if (!editable || !slots?.length)
+            return;
+        // The box under the pointer: a filled one is selected, to type over it; past the code, the caret goes to its end.
+        let nearest = 0;
+        let distance = Infinity;
+        slots.forEach((slot, index) => {
+            const box = slot.getBoundingClientRect();
+            const away = Math.abs(event.clientX - (box.left + box.right) / 2);
+            if (away < distance) {
+                nearest = index;
+                distance = away;
+            }
+        });
+        const filled = [...input.value].length;
+        if (nearest < filled)
+            input.setSelectionRange(nearest, nearest + 1);
+        else
+            input.setSelectionRange(filled, filled);
+        paint();
+    }
+    function handleFocus(event) {
+        onFocus?.(event);
+        paint();
+    }
+    function handleBlur(event) {
+        readOnlyNotice.hide();
+        field.controlProps.onBlur(event);
+        paint();
+    }
+    const hints = [...(slotPlaceholder ?? "")];
+    let next = 0;
+    const boxes = sizes.map((count, group) => (_jsxs(Fragment, { children: [group > 0 && _jsx("span", { className: "nx-code__separator", children: separator }), _jsx("span", { className: "nx-code__group", children: Array.from({ length: count }, () => {
+                    const index = next++;
+                    return _jsx("span", { className: "nx-code__slot", "data-placeholder": (hints.length === 1 ? hints[0] : hints[index]) || undefined }, index);
+                }) })] }, group)));
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, size: size, hint: hint, error: field.error, actions: readOnlyNotice.lock, disabled: disabled, readOnly: readOnly, className: cx("nx-field--code", className), style: style, children: _jsxs("span", { className: "nx-code", "data-block": block || undefined, children: [_jsx("span", { ref: rowRef, className: "nx-code__slots", "aria-hidden": "true", children: boxes }), _jsx("span", { id: shapeId, className: "nx-visually-hidden", children: describeCode(shape) }), _jsx("input", { autoCorrect: "off", spellCheck: false, autoCapitalize: characters === "digits" && !allowed ? "off" : "characters", ...inputProps, ...field.controlProps, type: masked ? "password" : "text", inputMode: inputMode ?? (characters === "digits" && !allowed ? "numeric" : "text"), autoComplete: autoComplete, className: cx("nx-code__input", inputClassName), value: value === undefined ? undefined : (composed ?? loadCode(value, shape)), defaultValue: value === undefined ? loadCode(defaultValue, shape) : undefined, disabled: disabled, readOnly: readOnly, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onSelect: event => {
+                                onSelect?.(event);
+                                paint();
+                            } })] }) }), readOnlyNotice.notice] }));
+}
+function mark(element, name, on) {
+    if (on)
+        element.setAttribute(name, "");
+    else
+        element.removeAttribute(name);
+}
+/** The input's code and selection, as the typing model takes them. */
+function readEdit(input) {
+    const value = input.value;
+    const start = input.selectionStart ?? value.length;
+    return { value, start, end: input.selectionEnd ?? start };
+}
+const CODE_MOVES = new Set(["ArrowLeft", "ArrowRight", "Home", "End"]);
+const isCodeMove = (key) => CODE_MOVES.has(key);

package/dist/Components/Inputs/DatePicker.js

@@ -10,6 +10,7 @@ import { Calendar } from "./Calendar.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 const GAP = 4;
 const MARGIN = 8;
 /**
@@ -20,7 +21,9 @@ const MARGIN = 8;
  * @example <DatePicker name="checkIn" label="Check-in" required min={todayIsoDate()} />
  */
 export function DatePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: this date cannot be changed.", validateOn, value, defaultValue, onValueChange, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: this date cannot be changed.", validateOn, value, defaultValue, onValueChange, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const settings = {
         calendar: props.calendar ?? preferences.calendar,

package/dist/Components/Inputs/DateRangePicker.js

@@ -10,6 +10,7 @@ import { Calendar } from "./Calendar.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 const GAP = 4;
 const MARGIN = 8;
 // Two months of the small calendar are about 480px wide; a narrower window gets one month.
@@ -26,7 +27,9 @@ const sameRange = (a, b) => (a === null || b === null ? a === b : a[0] === b[0]
  * @example <DateRangePicker startName="checkIn" endName="checkOut" label="Stay" required min={todayIsoDate()} minDistance={1} />
  */
 export function DateRangePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, months = 2, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: these dates cannot be changed.", validateOn, value, defaultValue, onValueChange, startName, endName, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, minDistance, maxDistance, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, months = 2, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: these dates cannot be changed.", validateOn, value, defaultValue, onValueChange, startName, endName, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, minDistance, maxDistance, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const settings = {
         calendar: props.calendar ?? preferences.calendar,

package/dist/Components/Inputs/DateTimePicker.js

@@ -15,6 +15,7 @@ import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 import { TimePanel } from "./TimePanel.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 const PANEL_GAP = 4;
 const PANEL_MARGIN = 8;
 /**
@@ -27,7 +28,9 @@ const PANEL_MARGIN = 8;
  * @example <DateTimePicker name="pickupAt" label="Pickup" required min={new Date()} step={900} />
  */
 export function DateTimePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, calendar: calendarProp, format: formatProp, timeFormat: timeFormatProp, script: scriptProp, timeZone: timeZoneProp, showTimeZone = Boolean(timeZoneProp), view = "columns", defaultTime, clearable = true, fieldName, readOnlyMessage = "Read-only: this date and time cannot be changed.", validateOn, value, defaultValue, onValueChange, isDateDisabled, isTimeDisabled, weekStart, weekendDays, showOutsideDays, className, inputClassName, style, required, min, max, minTime, maxTime, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, calendar: calendarProp, format: formatProp, timeFormat: timeFormatProp, script: scriptProp, timeZone: timeZoneProp, showTimeZone = Boolean(timeZoneProp), view = "columns", defaultTime, clearable = true, fieldName, readOnlyMessage = "Read-only: this date and time cannot be changed.", validateOn, value, defaultValue, onValueChange, isDateDisabled, isTimeDisabled, weekStart, weekendDays, showOutsideDays, className, inputClassName, style, required, min, max, minTime, maxTime, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const browserZone = useBrowserTimeZone();
     // Unknown on the server and while the page hydrates: the box stays empty until then rather than show another zone's time.

package/dist/Components/Inputs/Dropdown.js

@@ -11,6 +11,7 @@ import { DropdownChip, DropdownMedia, DropdownOption, DropdownTag, hasIcon } fro
 import { Field } from "./Field.js";
 import { useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 /** Rows a local list renders at first, and adds each time it scrolls near its end, so 10,000 options open at once. */
 const RENDER_STEP = 100;
 /** Closer to the end of the list than this, in pixels, renders or loads more. */
@@ -27,7 +28,9 @@ const NAMES_LISTED = 20;
 const SKELETON_WIDTHS = ["72%", "54%", "64%", "46%"];
 const IDLE_LIST = { search: "", loadKey: undefined, items: [], page: 0, hasMore: false, total: undefined, status: "idle", errorPage: 1, firstKeys: new Set() };
 export function Dropdown(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, valueKey = "value", labelKey = "label", descriptionKey = "description", iconKey = "icon", columns, searchKeys, isOptionDisabled = isDisabledItem, isOptionInactive = isInactiveItem, searchable: searchableProp, clearable = true, loading = false, emptyMessage = "No options", renderValue, panelWidth, readOnlyMessage, fieldName, validateOn, className, inputClassName, style, required, validate, name, form, placeholder, disabled, readOnly, ref, onBlur, onFocus, onKeyDown, onClick, onInvalid, multiple: multipleProp, value: valueProp, defaultValue, onValueChange, min, max, selectAll = true, maxChips = 10, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, valueKey = "value", labelKey = "label", descriptionKey = "description", iconKey = "icon", columns, searchKeys, isOptionDisabled = isDisabledItem, isOptionInactive = isInactiveItem, searchable: searchableProp, clearable = true, loading = false, emptyMessage = "No options", renderValue, panelWidth, readOnlyMessage, fieldName, validateOn, className, inputClassName, style, required, validate, name, form, placeholder, disabled, readOnly, ref, onBlur, onFocus, onKeyDown, onClick, onInvalid, multiple: multipleProp, value: valueProp, defaultValue, onValueChange, min, max, selectAll = true, maxChips = 10, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const multiple = multipleProp === true;
     const controlled = valueProp !== undefined;
     const editable = !disabled && !readOnly;

package/dist/Components/Inputs/DropdownParts.d.ts

@@ -11,7 +11,7 @@ export declare const DROPDOWN_STATE_LABELS: Record<DropdownValueState, string>;
 /** The tooltip of a current value that cannot be picked again. */
 export declare const DROPDOWN_STATE_NOTES: Record<DropdownValueState, string>;
 type AnyColumn = DropdownColumn<never>;
-/** A round photo, or the initials of the name on a soft tone when there is no photo or it fails to load. */
+/** The shared `Avatar`, sized to the dropdown's pictures by its class. */
 export declare function DropdownAvatar({ src, name }: {
     src: unknown;
     name: string;

package/dist/Components/Inputs/DropdownParts.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Icon, iconCheck, iconX, InlineIcon } from "nexus-icons";
 import { isValidElement, memo, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { avatarTone, initials, isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { Avatar } from "../Viewers/Avatar.js";
 export const DROPDOWN_STATE_LABELS = {
     inactive: "Inactive",
     unavailable: "Unavailable",
@@ -15,12 +16,9 @@ export const DROPDOWN_STATE_NOTES = {
     unavailable: "No longer in the list: kept as the current value. Once removed, it cannot be chosen again.",
     unknown: "Not found in the list: kept as the current value. Once removed, it cannot be chosen again.",
 };
-/** A round photo, or the initials of the name on a soft tone when there is no photo or it fails to load. */
+/** The shared `Avatar`, sized to the dropdown's pictures by its class. */
 export function DropdownAvatar({ src, name }) {
-    const url = typeof src === "string" ? src.trim() : "";
-    const [failed, setFailed] = useState(null);
-    const photo = url !== "" && failed !== url;
-    return (_jsx("span", { className: "nx-dropdown-avatar", "data-tone": photo ? undefined : avatarTone(name), "aria-hidden": "true", children: photo ? _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setFailed(url) }) : initials(name) }));
+    return _jsx(Avatar, { name: name, src: src, className: "nx-dropdown-avatar" });
 }
 /** A small 4:3 picture, such as a flag or a logo; an empty frame when there is none or it fails to load. */
 export function DropdownImage({ src }) {

package/dist/Components/Inputs/InputRenderer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
 import { CheckBox, RadioButton, Switch } from "./CheckBox.js";
 import { CheckBoxGroup } from "./CheckBoxGroup.js";
+import { CodeBox } from "./CodeBox.js";
 import { DatePicker } from "./DatePicker.js";
 import { DateRangePicker } from "./DateRangePicker.js";
 import { DateTimePicker } from "./DateTimePicker.js";
@@ -58,6 +59,8 @@ export function renderInput(params, overrides = {}) {
             return _jsx(TextArea, { ...props });
         case "number":
             return _jsx(NumberBox, { ...props });
+        case "code":
+            return _jsx(CodeBox, { ...props });
         case "checkbox":
             return _jsx(CheckBox, { ...props });
         case "switch":

package/dist/Components/Inputs/NumberBox.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { InlineIcon, iconMinus, iconPlus } from "nexus-icons";
 import { useEffect, useLayoutEffect, useRef, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { clampNumber, cleanNumberText, DEFAULT_NUMBER_LOCALE, formatNumber, getNumberSymbols, isPartialNumber, parseNumber, readPastedNumber, roundDecimal, stepNumber, } from "../../Helpers/NumberHelpers.js";
+import { clampNumber, cleanNumberText, formatNumber, getNumberSymbols, isPartialNumber, parseNumber, readPastedNumber, roundDecimal, stepNumber, } from "../../Helpers/NumberHelpers.js";
+import { useInputDesign, useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { validateNumber } from "../../Helpers/ValidationHelpers.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
@@ -23,7 +24,12 @@ const isNumber = (value) => value !== null && !Number.isNaN(value);
  * @example <NumberBox label="Amount" prefix="Rs" min={0} decimals={2} fixedDecimals grouping required />
  */
 export function NumberBox(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, iconEnd, prefix, suffix, step = 1, stepper = false, clamp = false, readOnlyMessage = "Read-only: this number cannot be changed.", fieldName, validateOn, value, defaultValue, onValueChange, decimals, fixedDecimals = false, grouping = false, locale = DEFAULT_NUMBER_LOCALE, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onPaste, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, iconEnd, prefix, suffix, step = 1, stepper = false, clamp = false, readOnlyMessage = "Read-only: this number cannot be changed.", fieldName, validateOn, value, defaultValue, onValueChange, decimals, fixedDecimals = false, grouping = false, locale: ownLocale, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onPaste, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
+    // Without a locale of its own, the box writes and reads numbers the way the person chose (Number scale, Thousands).
+    const preferred = useNumberLocale();
+    const locale = ownLocale ?? preferred;
     const format = { decimals, fixedDecimals, grouping, locale };
     const { decimal, group } = getNumberSymbols(locale);
     const textRules = { decimals, negative: min === undefined || min < 0 };
@@ -55,8 +61,11 @@ export function NumberBox(props) {
     const readOnlyNotice = useReadOnlyNotice(Boolean(readOnly) && !disabled, field.elementRef, readOnlyMessage, {
         keys: ["ArrowUp", "ArrowDown", "PageUp", "PageDown"],
     });
+    // The number the box holds, as last read in the marks it was written in.
+    const numberRef = useRef(initial);
     /** Writes what depends on the value straight to the DOM, so typing re-renders nothing: the hidden input and the button limits. */
     function sync(number) {
+        numberRef.current = number;
         if (hiddenRef.current)
             hiddenRef.current.value = isNumber(number) ? String(number) : "";
         for (const [button, direction] of [
@@ -69,6 +78,21 @@ export function NumberBox(props) {
                 button?.removeAttribute("aria-disabled");
         }
     }
+    // The person changed how numbers are written (Number scale, Thousands): the number the box held is written again in
+    // the new marks. Its text is not read again, because by now it may be either: React has already rewritten an untouched
+    // box's default text, and "1,250.5" read with a decimal comma would be 1.2505. Runs before the effects below read it.
+    const localeRef = useRef(locale);
+    useLayoutEffect(() => {
+        const previous = localeRef.current;
+        localeRef.current = locale;
+        const input = field.elementRef.current;
+        const number = numberRef.current;
+        if (previous === locale || !input || !input.value || !isNumber(number))
+            return;
+        input.value = document.activeElement === input ? editText(number) : displayText(number);
+        sync(number);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [locale]);
     // A controlled value that differs from the box's text replaces it. Text that already means this number ("12.") stays.
     useLayoutEffect(() => {
         const input = field.elementRef.current;

package/dist/Components/Inputs/RowsInput.js

@@ -135,10 +135,10 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
         add: (values, index) => {
             actions.add(values, index);
         },
-        remove: index => {
+        remove: (index, options) => {
             const key = store.keyAt(index);
             if (key)
-                store.remove(key);
+                store.remove(key, options);
         },
         validate: () => {
             const place = store.validateAll();

package/dist/Components/Inputs/Slider.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useEffectEvent, useRef, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { clampNumber, countDecimals, formatNumber, roundDecimal } from "../../Helpers/NumberHelpers.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { GroupFooter, leavesField, OPTION_ATTRIBUTE, useChoiceField } from "./ChoiceField.js";
 import { hasContent } from "./Field.js";
 import { setInputValue } from "./InputField.js";
@@ -54,7 +55,9 @@ function SliderField(props) {
     const { readOnlyMessage = range ? "Read-only: this range cannot be changed." : "Read-only: this value cannot be changed." } = props;
     const span = max - min || 1;
     const initial = (values ?? defaultValues).map(value => clampNumber(value, min, max));
-    const text = (value) => (format ? format(value) : `${prefix ?? ""}${formatNumber(value, { decimals, fixedDecimals, grouping, locale })}${suffix ?? ""}`);
+    // Without a locale of its own, the values are written the way the person chose.
+    const numbers = useNumberLocale();
+    const text = (value) => (format ? format(value) : `${prefix ?? ""}${formatNumber(value, { decimals, fixedDecimals, grouping, locale: locale ?? numbers })}${suffix ?? ""}`);
     const fraction = (value) => (clampNumber(value, min, max) - min) / span;
     const controlRef = useRef(null);
     const valueRef = useRef(null);