nexus-shared 3.2.0 → 4.0.0

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

@@ -63,6 +63,24 @@ export interface ChoiceItemProps<T extends OptionValue> {
 }
 /** One option of a group: a native input and its label, icon, and description, all inside one clickable label. */
 export declare function ChoiceItem<T extends OptionValue>({ type, groupId, name, option, index, size, checked, defaultChecked, invalid, readOnly, onInvalid }: ChoiceItemProps<T>): import("react").JSX.Element;
+/**
+ * One option of a group drawn as tabs (`design="tabs"`): the native input out of sight inside a tab of the `TabButtons`
+ * track. Its description is its tooltip, and the input's description for a screen reader: `descriptionId` names the
+ * group's note for this option (`ChoiceTabNotes`), which a hidden note still gives.
+ */
+export declare function ChoiceTab<T extends OptionValue>({ type, groupId, name, option, index, checked, defaultChecked, invalid, readOnly, onInvalid }: Omit<ChoiceItemProps<T>, "size">): import("react").JSX.Element;
+/**
+ * The descriptions of a group drawn as tabs, under the track: the chosen option's shows (a phone has no tooltip), the
+ * rest stay hidden but still describe their inputs. `chosen` is the option chosen when the group is drawn; after that
+ * `showChosenNote` follows the inputs, as the group's `sync` rule.
+ */
+export declare function ChoiceTabNotes<T extends OptionValue>({ groupId, options, chosen }: {
+    groupId: string;
+    options: readonly ChoiceOption<T>[];
+    chosen: number;
+}): (import("react").JSX.Element | null)[];
+/** Shows the note of the option checked now and hides the others (a `useChoiceField` `sync` rule). */
+export declare function showChosenNote(inputs: HTMLInputElement[]): void;
 /** The legend of a choice group, with the required mark and, when read-only, a lock. */
 export declare function ChoiceLegend({ label, required, lock }: {
     label: ReactNode;
@@ -108,7 +126,9 @@ type GroupStyle = CSSProperties & {
     "--nx-choices-columns"?: number;
 };
 /** Class names and inline style of a group's fieldset and options list. */
-export declare function groupLayout(props: ChoiceGroupProps<OptionValue>): {
+export declare function groupLayout(props: Omit<ChoiceGroupProps<OptionValue>, "design"> & {
+    design?: ChoiceDesign | "tabs";
+}): {
     className: string;
     optionsStyle: GroupStyle | undefined;
 };

package/dist/Components/Inputs/ChoiceField.js

@@ -123,7 +123,7 @@ export function preventChange(event) {
  * reaches the input too), or pressed with Space or an arrow key, which browsers turn into a click.
  */
 export function optionAnchor(target) {
-    return target instanceof HTMLInputElement ? target.closest(".nx-choice") : null;
+    return target instanceof HTMLInputElement ? target.closest(".nx-choice, .nx-tabs__option") : null;
 }
 /** Hides a field's read-only note when focus leaves the field, not when it moves between its options. */
 export function leavesField(event) {
@@ -146,6 +146,32 @@ export function ChoiceItem({ type, groupId, name, option, index, size, checked,
                 onChange: checked === undefined ? undefined : noop }), hasContent(option.icon) && (_jsx("span", { className: "nx-choice__icon", "aria-hidden": "true", children: option.icon })), _jsxs("span", { className: "nx-choice__text", children: [_jsx("span", { id: labelId, className: "nx-choice__label", children: option.label }), descriptionId && (_jsx("span", { id: descriptionId, className: "nx-choice__description", children: option.description }))] })] }));
 }
 function noop() { }
+/**
+ * One option of a group drawn as tabs (`design="tabs"`): the native input out of sight inside a tab of the `TabButtons`
+ * track. Its description is its tooltip, and the input's description for a screen reader: `descriptionId` names the
+ * group's note for this option (`ChoiceTabNotes`), which a hidden note still gives.
+ */
+export function ChoiceTab({ type, groupId, name, option, index, checked, defaultChecked, invalid, readOnly, onInvalid }) {
+    const descriptionId = hasContent(option.description) ? `${groupId}-${index}-description` : undefined;
+    return (_jsxs("label", { className: "nx-tabs__option", title: typeof option.description === "string" ? option.description : undefined, children: [_jsx("input", { id: `${groupId}-${index}`, type: type, name: name, value: String(option.value), [OPTION_ATTRIBUTE]: index, className: "nx-visually-hidden", checked: checked, defaultChecked: checked === undefined ? defaultChecked : undefined, disabled: option.disabled, "aria-invalid": invalid || undefined, "aria-describedby": descriptionId, onClick: readOnly ? preventChange : undefined, onInvalid: onInvalid, onChange: checked === undefined ? undefined : noop }), option.icon, _jsx("span", { className: "nx-tabs__label", children: _jsx("span", { className: "nx-tabs__text", children: option.label }) })] }));
+}
+/**
+ * The descriptions of a group drawn as tabs, under the track: the chosen option's shows (a phone has no tooltip), the
+ * rest stay hidden but still describe their inputs. `chosen` is the option chosen when the group is drawn; after that
+ * `showChosenNote` follows the inputs, as the group's `sync` rule.
+ */
+export function ChoiceTabNotes({ groupId, options, chosen }) {
+    return options.map((option, index) => hasContent(option.description) ? (_jsx("p", { id: `${groupId}-${index}-description`, className: "nx-choices__note", "data-nx-note": index, hidden: index !== chosen, children: option.description }, String(option.value))) : null);
+}
+/** Shows the note of the option checked now and hides the others (a `useChoiceField` `sync` rule). */
+export function showChosenNote(inputs) {
+    const group = inputs[0]?.closest(".nx-choices");
+    if (!group)
+        return;
+    const chosen = inputs.find(input => input.checked)?.getAttribute(OPTION_ATTRIBUTE) ?? null;
+    for (const note of Array.from(group.querySelectorAll("[data-nx-note]")))
+        note.hidden = note.dataset.nxNote !== chosen;
+}
 /** The legend of a choice group, with the required mark and, when read-only, a lock. */
 export function ChoiceLegend({ label, required, lock }) {
     if (!hasContent(label))
@@ -156,7 +182,7 @@ export function ChoiceLegend({ label, required, lock }) {
 export function groupLayout(props) {
     const { size = "md", design = "default", orientation = "vertical", columns } = props;
     return {
-        className: cx("nx-choices", `nx-choices--${size}`, design === "cards" && "nx-choices--cards", orientation === "horizontal" && "nx-choices--horizontal", props.className),
+        className: cx("nx-choices", `nx-choices--${size}`, design === "cards" && "nx-choices--cards", design === "tabs" && "nx-choices--tabs", orientation === "horizontal" && "nx-choices--horizontal", props.className),
         optionsStyle: (columns && columns > 1 ? { "--nx-choices-columns": columns } : undefined),
     };
 }

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

@@ -8,6 +8,11 @@ interface DropdownBaseProps<TItem extends DropdownItem, TValue extends OptionVal
     hint?: ReactNode;
     /** An error from outside, such as a server message. Shown before the field's own message. */
     error?: string | null;
+    /**
+     * Drawn as invalid with no message line, for a box whose reason the page says elsewhere (`Field` `invalid`); a screen
+     * reader hears that reason through `aria-describedby`. A CRUD's narrowing box is drawn so while it asks for a pick.
+     */
+    invalid?: boolean;
     /** Default `standard`. */
     design?: InputDesign;
     /** Default `md`. */
@@ -29,6 +34,14 @@ interface DropdownBaseProps<TItem extends DropdownItem, TValue extends OptionVal
     selectedOptions?: readonly TItem[];
     /** Loads the items of values that no list or `selectedOptions` has, e.g. by id. Values it does not return show as "Not found". */
     resolveOptions?: (values: TValue[]) => Promise<readonly TItem[]>;
+    /**
+     * The item of a value (as text) that the page already holds, at once and with no call: a list kept for the page, a
+     * record looked up before. Asked before `resolveOptions`, so a value it knows is named from the first draw - and a form
+     * can name the values it holds without a call (a CRUD's save does). It answers only what is fresh: a record marked old
+     * since may have changed, and the dropdown then asks `resolveOptions`. With `aged` it answers an old one too, which a
+     * CRUD's save takes over no name at all. `crudPicker` gives one.
+     */
+    peekOption?: (key: string, aged?: boolean) => TItem | null | undefined;
     /** The item field that holds the value. Default `value`. */
     valueKey?: string;
     /** The item field shown as its name, in the box and in the list. Default `label`. */

package/dist/Components/Inputs/Dropdown.js

@@ -7,7 +7,7 @@ import { columnTrack, defaultSearchKeys, filterItems, foldSearchText, indexItems
 import { followAnchor, isPopoverOpen, placeListPanel } from "../../Helpers/PopoverHelpers.js";
 import { DEFAULT_FIELD_NAME, validateSelection } from "../../Helpers/ValidationHelpers.js";
 import { Button } from "../Documents/Button.js";
-import { DropdownChip, DropdownMedia, DropdownOption, DropdownTag, hasIcon } from "./DropdownParts.js";
+import { columnAlignStyle, DropdownChip, DropdownMedia, DropdownOption, DropdownTag, hasIcon } from "./DropdownParts.js";
 import { Field } from "./Field.js";
 import { useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
@@ -28,7 +28,7 @@ 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: 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;
+    const { label, hint, error, invalid = false, design: ownDesign, size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, peekOption, 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;
@@ -48,7 +48,7 @@ export function Dropdown(props) {
     const optionIndex = useMemo(() => (options ? indexItems(options, valueKey) : null), [options, valueKey]);
     const selectedIndex = useMemo(() => (selectedOptions ? indexItems(selectedOptions, valueKey) : null), [selectedOptions, valueKey]);
     const knownRef = useRef(new Map());
-    const findItem = (key) => optionIndex?.get(key) ?? knownRef.current.get(key) ?? selectedIndex?.get(key) ?? null;
+    const findItem = (key) => optionIndex?.get(key) ?? knownRef.current.get(key) ?? selectedIndex?.get(key) ?? peekOption?.(key) ?? null;
     const labelOf = (item) => itemLabel(item, labelKey, valueKey);
     const listId = `${useId()}-list`;
     const selectionId = `${listId}-selection`;
@@ -777,7 +777,7 @@ export function Dropdown(props) {
         const failed = Boolean(loadOptions) && server.status === "error";
         const empty = rows.length === 0 && !skeleton && !failed;
         const typed = deferredSearch.trim();
-        listContent = (_jsxs(_Fragment, { children: [showHeader && (_jsxs("div", { className: "nx-dropdown-list__header", "aria-hidden": "true", children: [_jsx("span", {}), typedColumns.map((column, index) => (_jsx("span", { className: "nx-dropdown-list__heading", style: column.align && column.align !== "start" ? { justifySelf: column.align, textAlign: column.align } : undefined, children: column.header }, index)))] })), rows.map((row, index) => {
+        listContent = (_jsxs(_Fragment, { children: [showHeader && (_jsxs("div", { className: "nx-dropdown-list__header", "aria-hidden": "true", children: [_jsx("span", {}), typedColumns.map((column, index) => (_jsx("span", { className: "nx-dropdown-list__heading", style: columnAlignStyle(column), children: column.header }, index)))] })), rows.map((row, index) => {
                     const labelField = row.item ? readField(row.item, labelKey) : undefined;
                     const description = row.item && !typedColumns ? readField(row.item, descriptionKey) : undefined;
                     const pending = isPending(row.key, row.item);
@@ -809,7 +809,7 @@ export function Dropdown(props) {
     // The check column, the columns, and an empty last track whose gap keeps text off the row's end.
     const gridColumns = columns ? `auto ${columns.map(column => columnTrack(column)).join(" ")} 0px` : undefined;
     const panelStyle = panelWidth === undefined ? undefined : { width: typeof panelWidth === "number" ? `${panelWidth}px` : panelWidth };
-    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, icon: icon, actions: _jsxs(_Fragment, { children: [busy && (_jsx("span", { className: "nx-dropdown__spinner", title: "Loading", "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })), showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__toggle", tabIndex: -1, "aria-label": open ? "Close the list" : "Open the list", "aria-expanded": open, "aria-controls": open ? listId : undefined, disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel()), children: _jsx(InlineIcon, { icon: iconChevronDown }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: values.length > 0 || Boolean(placeholder), className: cx("nx-field--dropdown", className), style: style, children: [_jsxs("div", { className: cx("nx-dropdown__control", multiple ? "nx-dropdown__control--multiple" : "nx-dropdown__control--single"), "data-searchable": searchable || undefined, "data-has-value": values.length > 0 || undefined, onMouseDown: handleControlMouseDown, children: [boxContent, _jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": open ? listId : undefined, "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined, "aria-autocomplete": searchable ? "list" : "none", inputMode: searchable ? inputProps.inputMode : "none", name: undefined, form: form, className: cx("nx-field__control", "nx-dropdown__input", inputClassName), placeholder: values.length > 0 ? " " : placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), _jsx("span", { id: selectionId, className: "nx-visually-hidden", children: values.length > 0 ? `Selected: ${namesOf(values)}` : "" })] }), name &&
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, invalid: invalid, icon: icon, actions: _jsxs(_Fragment, { children: [busy && (_jsx("span", { className: "nx-dropdown__spinner", title: "Loading", "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })), showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__toggle", tabIndex: -1, "aria-label": open ? "Close the list" : "Open the list", "aria-expanded": open, "aria-controls": open ? listId : undefined, disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel()), children: _jsx(InlineIcon, { icon: iconChevronDown }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: values.length > 0 || Boolean(placeholder), className: cx("nx-field--dropdown", className), style: style, children: [_jsxs("div", { className: cx("nx-dropdown__control", multiple ? "nx-dropdown__control--multiple" : "nx-dropdown__control--single"), "data-searchable": searchable || undefined, "data-has-value": values.length > 0 || undefined, onMouseDown: handleControlMouseDown, children: [boxContent, _jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": open ? listId : undefined, "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined, "aria-autocomplete": searchable ? "list" : "none", "aria-busy": busy || undefined, inputMode: searchable ? inputProps.inputMode : "none", name: undefined, form: form, className: cx("nx-field__control", "nx-dropdown__input", inputClassName), placeholder: values.length > 0 ? " " : placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), _jsx("span", { id: selectionId, className: "nx-visually-hidden", children: values.length > 0 ? `Selected: ${namesOf(values)}` : busy ? "Loading" : "" })] }), name &&
                         (multiple ? (values.map(value => _jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: optionKey(value) }, optionKey(value)))) : (_jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: optionKey(values[0]) })))] }), readOnlyNotice.notice, !readOnly && (_jsx("div", { ref: panelRef, popover: "manual", className: cx("nx-popover", "nx-dropdown-panel", `nx-dropdown-panel--${size}`), style: panelStyle, onKeyDown: handlePanelKeyDown, onBlur: handlePanelBlur, 
                 // The box keeps focus while rows and buttons are pressed. A press on the list itself is left alone, so its
                 // scroll bar can be dragged.

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import type { DropdownColumn, DropdownItem } from "../../Interfaces/InputInterfaces.ts";
 /**
  * Why a current value cannot be picked again:
@@ -24,6 +24,8 @@ export declare function DropdownImage({ src }: {
 export declare function iconNode(icon: unknown): ReactNode;
 /** Whether an icon field has something to draw. */
 export declare function hasIcon(icon: unknown): boolean;
+/** A column's cells and heading where they sit (`dropdownColumnAlign`): nothing to say for `start`. */
+export declare const columnAlignStyle: (column: Pick<AnyColumn, "type" | "align">) => CSSProperties | undefined;
 /** One cell of a row with columns. `label` names the avatar's initials; `tag` follows the text. */
 export declare function DropdownCell({ column, item, label, tag }: {
     column: AnyColumn;

package/dist/Components/Inputs/DropdownParts.js

@@ -3,7 +3,9 @@ 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 { isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { dropdownColumnAlign, isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { formatMoney } from "../../Helpers/NumberHelpers.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { Avatar } from "../Viewers/Avatar.js";
 export const DROPDOWN_STATE_LABELS = {
     inactive: "Inactive",
@@ -38,11 +40,21 @@ export function iconNode(icon) {
 export function hasIcon(icon) {
     return (typeof icon === "string" && icon !== "") || isValidElement(icon);
 }
-const alignStyle = (align) => align && align !== "start" ? { justifySelf: align, textAlign: align } : undefined;
+/** A column's cells and heading where they sit (`dropdownColumnAlign`): nothing to say for `start`. */
+export const columnAlignStyle = (column) => {
+    const align = dropdownColumnAlign(column);
+    return align !== "start" ? { justifySelf: align, textAlign: align } : undefined;
+};
+/** A money column's figure: 2 places in the person's number format; nothing for a missing one or one that is no figure. */
+function DropdownMoney({ value }) {
+    const locale = useNumberLocale();
+    const figure = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : Number.NaN;
+    return _jsx("span", { className: "nx-dropdown-cell__text", children: formatMoney(Number.isFinite(figure) ? figure : null, { locale }) });
+}
 /** One cell of a row with columns. `label` names the avatar's initials; `tag` follows the text. */
 export function DropdownCell({ column, item, label, tag }) {
     const type = column.type ?? "text";
-    const style = alignStyle(column.align);
+    const style = columnAlignStyle(column);
     if (column.render) {
         return (_jsxs("span", { className: cx("nx-dropdown-cell", `nx-dropdown-cell--${type}`), style: style, children: [column.render(item), tag] }));
     }
@@ -51,7 +63,7 @@ export function DropdownCell({ column, item, label, tag }) {
         return (_jsx("span", { className: "nx-dropdown-cell nx-dropdown-cell--media", style: style, "aria-hidden": "true", children: type === "avatar" ? _jsx(DropdownAvatar, { src: value, name: label }) : type === "image" ? _jsx(DropdownImage, { src: value }) : _jsx("span", { className: "nx-dropdown-icon", children: iconNode(value) }) }));
     }
     const text = value === null || value === undefined ? "" : String(value);
-    return (_jsxs("span", { className: cx("nx-dropdown-cell", `nx-dropdown-cell--${type}`), style: style, children: [_jsx("span", { className: "nx-dropdown-cell__text", children: text }), tag] }));
+    return (_jsxs("span", { className: cx("nx-dropdown-cell", `nx-dropdown-cell--${type}`), style: style, children: [type === "money" ? _jsx(DropdownMoney, { value: value }) : _jsx("span", { className: "nx-dropdown-cell__text", children: text }), tag] }));
 }
 /** The picture that leads a value in the box or a chip: the first avatar, image, or icon column, or the icon field. */
 export function DropdownMedia({ item, label, columns, iconKey }) {

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

@@ -17,6 +17,12 @@ export interface FieldProps {
     hint?: ReactNode;
     /** Error message. Marks the field invalid and replaces the hint. */
     error?: ReactNode;
+    /**
+     * Draws the field as invalid, the look an error gives it, with no message line of its own: for a field the page says
+     * why about elsewhere, such as a CRUD's narrowing box while its list asks for a pick. Nothing is said to a screen
+     * reader by it: point the control's `aria-describedby` at the words that say why.
+     */
+    invalid?: boolean;
     /** Id of the hint or error line, for the control's `aria-describedby`. */
     messageId?: string;
     /** Decorative icon at the start of the box. */
@@ -48,6 +54,6 @@ export interface FieldProps {
  * The frame around every input: label, box, icons, and the hint or error line. It has no state, so it renders
  * anywhere; inputs such as `TextBox` build on it, and so can custom controls.
  */
-export declare function Field({ controlId, label, labelId, required, design, size, hint, error, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled, readOnly, raiseLabel, multiline, className, style, children, }: FieldProps): import("react").JSX.Element;
+export declare function Field({ controlId, label, labelId, required, design, size, hint, error, invalid, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled, readOnly, raiseLabel, multiline, className, style, children, }: FieldProps): import("react").JSX.Element;
 /** Whether a node renders something: not `undefined`, `null`, `false`, or "". */
 export declare const hasContent: (node: ReactNode) => boolean;

package/dist/Components/Inputs/Field.js

@@ -5,12 +5,12 @@ import { cx } from "../../Helpers/ClassHelpers.js";
  * The frame around every input: label, box, icons, and the hint or error line. It has no state, so it renders
  * anywhere; inputs such as `TextBox` build on it, and so can custom controls.
  */
-export function Field({ controlId, label, labelId, required = false, design = "standard", size = "md", hint, error, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled = false, readOnly = false, raiseLabel = false, multiline = false, className, style, children, }) {
+export function Field({ controlId, label, labelId, required = false, design = "standard", size = "md", hint, error, invalid = false, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled = false, readOnly = false, raiseLabel = false, multiline = false, className, style, children, }) {
     const hasLabel = hasContent(label);
     const hasError = hasContent(error);
     const message = hasError ? error : hint;
     const labelElement = hasLabel && (_jsxs("label", { id: labelId, className: "nx-field__label", htmlFor: controlId, children: [label, required && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" }))] }));
-    return (_jsxs("div", { className: cx("nx-field", `nx-field--${design}`, `nx-field--${size}`, multiline && "nx-field--multiline", className), "data-invalid": hasError || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-raised": raiseLabel || undefined, style: style, children: [design === "standard" && labelElement, _jsxs("div", { className: "nx-field__box", children: [actionsStart && _jsx("span", { className: "nx-field__actions nx-field__actions--start", children: actionsStart }), icon && (_jsx("span", { className: "nx-field__icon", "aria-hidden": "true", children: icon })), hasContent(prefix) && (_jsx("span", { id: `${controlId}-prefix`, className: "nx-field__affix", children: prefix })), children, design !== "standard" && labelElement, hasContent(suffix) && (_jsx("span", { id: `${controlId}-suffix`, className: "nx-field__affix nx-field__affix--end", children: suffix })), actions && _jsx("span", { className: "nx-field__actions", children: actions }), iconEnd && (_jsx("span", { className: "nx-field__icon nx-field__icon--end", "aria-hidden": "true", children: iconEnd }))] }), (message || aside) && (_jsxs("div", { className: "nx-field__footer", children: [message && (_jsxs("p", { id: messageId, className: cx("nx-field__message", hasError && "nx-field__message--error"), children: [hasError && _jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: message })] })), aside && _jsx("span", { className: "nx-field__aside", children: aside })] }))] }));
+    return (_jsxs("div", { className: cx("nx-field", `nx-field--${design}`, `nx-field--${size}`, multiline && "nx-field--multiline", className), "data-invalid": hasError || invalid || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-raised": raiseLabel || undefined, style: style, children: [design === "standard" && labelElement, _jsxs("div", { className: "nx-field__box", children: [actionsStart && _jsx("span", { className: "nx-field__actions nx-field__actions--start", children: actionsStart }), icon && (_jsx("span", { className: "nx-field__icon", "aria-hidden": "true", children: icon })), hasContent(prefix) && (_jsx("span", { id: `${controlId}-prefix`, className: "nx-field__affix", children: prefix })), children, design !== "standard" && labelElement, hasContent(suffix) && (_jsx("span", { id: `${controlId}-suffix`, className: "nx-field__affix nx-field__affix--end", children: suffix })), actions && _jsx("span", { className: "nx-field__actions", children: actions }), iconEnd && (_jsx("span", { className: "nx-field__icon nx-field__icon--end", "aria-hidden": "true", children: iconEnd }))] }), (message || aside) && (_jsxs("div", { className: "nx-field__footer", children: [message && (_jsxs("p", { id: messageId, className: cx("nx-field__message", hasError && "nx-field__message--error"), children: [hasError && _jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: message })] })), aside && _jsx("span", { className: "nx-field__aside", children: aside })] }))] }));
 }
 /** Whether a node renders something: not `undefined`, `null`, `false`, or "". */
 export const hasContent = (node) => node !== undefined && node !== null && node !== false && node !== "";

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

@@ -1,4 +1,4 @@
-import type { GroupFormProps, RowValue } from "../../Interfaces/FormInterfaces.ts";
+import { type GroupFormProps, type RowValue } from "../../Interfaces/FormInterfaces.ts";
 /**
  * The rows of a `TabularForm` as sections: each row's inputs with their own labels, on a 12-column grid (`span` in
  * each input's params). The same params, value, rules, and form behavior as `TabularForm`; only the layout differs. It
@@ -10,11 +10,11 @@ import type { GroupFormProps, RowValue } from "../../Interfaces/FormInterfaces.t
  *
  * @example
  * <GroupForm name="addresses" label="Addresses" itemLabel="Address" max={5} inputs={[
- *   { type: "dropdown", name: "country", label: "Country", required: true, options: countries, span: 6 },
- *   { type: "text", name: "city", label: "City", required: true, span: 6 },
- *   { type: "text", name: "zipCode", label: "Zip code", span: 4 },
- *   { type: "dropdown", name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
- *   { type: "radio", name: "isPrimary", label: "Primary address", span: 4, required: true },
+ *   { type: EInputTypes.Dropdown, name: "country", label: "Country", required: true, options: countries, span: 6 },
+ *   { type: EInputTypes.Text, name: "city", label: "City", required: true, span: 6 },
+ *   { type: EInputTypes.Text, name: "zipCode", label: "Zip code", span: 4 },
+ *   { type: EInputTypes.Dropdown, name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
+ *   { type: EInputTypes.Radio, name: "isPrimary", label: "Primary address", span: 4, required: true },
  * ]} />
  */
 export declare function GroupForm<TRow extends RowValue = RowValue>(props: GroupFormProps<TRow>): import("react").JSX.Element;

package/dist/Components/Inputs/GroupForm.js

@@ -4,13 +4,12 @@ import { iconAlertCircle, iconArrowDown, iconArrowUp, iconChevronDown, iconCopy,
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useDatePreferences } from "../../Helpers/DatePreferences.js";
-import { formatInputValue } from "../../Helpers/InputParamsHelpers.js";
+import { formatInputValue, isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
 import { firstFocusable, labelText, RowCell, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
 /** Inputs that read as a line of text in a collapsed section's summary. */
-const SUMMARY_SKIP = new Set(["checkbox", "switch", "radio", "tree", "tabular", "group", "markdown"]);
-/** Inputs without a box: they line up with the boxes beside them. */
-const CHOICE_TYPES = new Set(["checkbox", "switch", "radio"]);
+const SUMMARY_SKIP = new Set([EInputTypes.CheckBox, EInputTypes.Switch, EInputTypes.Radio, EInputTypes.Tree, EInputTypes.Tabular, EInputTypes.Group, EInputTypes.Markdown, EInputTypes.Picture]);
 function defaultSummary(row, inputs, preferences) {
     const parts = [];
     for (const params of inputs) {
@@ -46,7 +45,7 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
             setCollapsed(false);
     }, [problems, collapsed]);
     // Radio columns this row has on show as tags: "Primary".
-    const tags = inputs.filter(params => params.type === "radio" && !params.hidden && row[params.name] === true).map(labelText);
+    const tags = inputs.filter(params => params.type === EInputTypes.Radio && !params.hidden && row[params.name] === true).map(labelText);
     let summary = null;
     if (!open) {
         const { summary: pick } = context;
@@ -64,7 +63,7 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
         store.touch(rowKey, cell.dataset.nxCell ?? "");
     }
     const heading = (_jsxs(_Fragment, { children: [_jsx("span", { id: titleId, className: "nx-group-form__title", children: title }), tags.map(tag => (_jsx("span", { className: "nx-group-form__tag", children: tag }, tag))), summary && _jsx("span", { className: "nx-group-form__summary", children: summary }), problems > 0 && (_jsxs("span", { className: "nx-group-form__problems", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), problems, " to fix"] }))] }));
-    return (_jsxs("li", { className: "nx-group-form__section", "data-nx-row": rowKey, "data-open": open || undefined, "data-problem": problems > 0 || undefined, children: [_jsxs("div", { className: "nx-group-form__head", children: [context.collapsible ? (_jsxs("button", { type: "button", className: "nx-group-form__toggle", "aria-expanded": open, "aria-controls": open ? bodyId : undefined, "data-nx-row-actions": "", onClick: () => setCollapsed(open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-group-form__chevron" }), heading] })) : (_jsx("div", { className: "nx-group-form__heading", children: heading })), (context.sortable || context.canAdd || context.removable) && (_jsxs("div", { className: "nx-group-form__actions", children: [context.sortable && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowUp }), "aria-label": `Move ${name} up`, title: "Move up", disabled: index === 0, onClick: () => onAction("move-up", rowKey) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowDown }), "aria-label": `Move ${name} down`, title: "Move down", disabled: index === count - 1, onClick: () => onAction("move-down", rowKey) })] })), context.canAdd && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconCopy }), "aria-label": `Duplicate ${name}`, title: "Duplicate", onClick: () => onAction("duplicate", rowKey) })), context.removable && (_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Remove ${name}`, title: "Remove", onClick: () => onAction("remove", rowKey) }))] }))] }), open && (_jsx("div", { id: bodyId, role: "group", "aria-labelledby": titleId, className: "nx-group-form__body", onBlur: onBlur, children: inputs.map(params => params.hidden ? null : (_jsx("div", { className: cx("nx-group-form__cell", CHOICE_TYPES.has(params.type) && "nx-group-form__cell--choice"), style: { "--nx-span": Math.max(1, Math.min(12, params.span ?? 12)) }, "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "group", idPrefix: context.idPrefix, size: context.size, design: context.design, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name))) }))] }));
+    return (_jsxs("li", { className: "nx-group-form__section", "data-nx-row": rowKey, "data-open": open || undefined, "data-problem": problems > 0 || undefined, children: [_jsxs("div", { className: "nx-group-form__head", children: [context.collapsible ? (_jsxs("button", { type: "button", className: "nx-group-form__toggle", "aria-expanded": open, "aria-controls": open ? bodyId : undefined, "data-nx-row-actions": "", onClick: () => setCollapsed(open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-group-form__chevron" }), heading] })) : (_jsx("div", { className: "nx-group-form__heading", children: heading })), (context.sortable || context.canAdd || context.removable) && (_jsxs("div", { className: "nx-group-form__actions", children: [context.sortable && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowUp }), "aria-label": `Move ${name} up`, title: "Move up", disabled: index === 0, onClick: () => onAction("move-up", rowKey) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowDown }), "aria-label": `Move ${name} down`, title: "Move down", disabled: index === count - 1, onClick: () => onAction("move-down", rowKey) })] })), context.canAdd && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconCopy }), "aria-label": `Duplicate ${name}`, title: "Duplicate", onClick: () => onAction("duplicate", rowKey) })), context.removable && (_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Remove ${name}`, title: "Remove", onClick: () => onAction("remove", rowKey) }))] }))] }), open && (_jsx("div", { id: bodyId, role: "group", "aria-labelledby": titleId, className: "nx-group-form__body", onBlur: onBlur, children: inputs.map(params => params.hidden ? null : (_jsx("div", { className: cx("nx-group-form__cell", isBooleanInput(params) && "nx-group-form__cell--choice"), style: { "--nx-span": Math.max(1, Math.min(12, params.span ?? 12)) }, "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "group", idPrefix: context.idPrefix, size: context.size, design: context.design, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name))) }))] }));
 });
 /**
  * The rows of a `TabularForm` as sections: each row's inputs with their own labels, on a 12-column grid (`span` in
@@ -77,11 +76,11 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
  *
  * @example
  * <GroupForm name="addresses" label="Addresses" itemLabel="Address" max={5} inputs={[
- *   { type: "dropdown", name: "country", label: "Country", required: true, options: countries, span: 6 },
- *   { type: "text", name: "city", label: "City", required: true, span: 6 },
- *   { type: "text", name: "zipCode", label: "Zip code", span: 4 },
- *   { type: "dropdown", name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
- *   { type: "radio", name: "isPrimary", label: "Primary address", span: 4, required: true },
+ *   { type: EInputTypes.Dropdown, name: "country", label: "Country", required: true, options: countries, span: 6 },
+ *   { type: EInputTypes.Text, name: "city", label: "City", required: true, span: 6 },
+ *   { type: EInputTypes.Text, name: "zipCode", label: "Zip code", span: 4 },
+ *   { type: EInputTypes.Dropdown, name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
+ *   { type: EInputTypes.Radio, name: "isPrimary", label: "Primary address", span: 4, required: true },
  * ]} />
  */
 export function GroupForm(props) {

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { InputParams } from "../../Interfaces/FormInterfaces.ts";
+import { type InputParams } from "../../Interfaces/FormInterfaces.ts";
 import type { InputDesign } from "../../Interfaces/InputInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 /** What a form sets on an input it renders from params. Keys given here replace the params' own, even when `undefined`. */
@@ -10,8 +10,8 @@ export interface InputOverrides {
     form?: string;
     /** The value the input starts with: `defaultChecked` for a checkbox, switch, or radio, `defaultValue` for the rest. */
     defaultValue?: unknown;
-    /** The new value after each change, before the params' own `onValueChange`. */
-    onValueChange?: (value: unknown) => void;
+    /** The new value after each change, before the params' own `onValueChange`; a dropdown's item (items) with it. */
+    onValueChange?: (value: unknown, item?: unknown) => void;
     error?: string | null;
     /** Replaces the params' own, e.g. `false` for a radio in rows, where "required" means one row has it. */
     required?: boolean;
@@ -25,13 +25,16 @@ export interface InputOverrides {
     readOnlyMessage?: string;
     /** On top of the params, like `readOnly`. */
     disabled?: boolean;
+    /** A dropdown's value is on its way: its spinner shows, as a form's does while a picker is asked about a remembered value. */
+    loading?: boolean;
     fieldName?: string;
     className?: string;
     "aria-label"?: string;
 }
 /**
- * Renders an input from its params: `{ type: "email", name: "email", label: "Email", required: true }` gives a
- * `TextBox` of type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
- * Layout keys (`span`, `width`, `grow`) stay out of the component's props; `hidden` renders nothing.
+ * Renders an input from its params: `{ type: EInputTypes.Email, name: "email", label: "Email", required: true }` gives a
+ * `TextBox` of HTML type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
+ * Layout keys (`span`, `width`, `grow`, and the Form-only ones such as `showWhen` and `compute`) stay out of the
+ * component's props; `hidden` renders nothing.
  */
 export declare function renderInput(params: InputParams, overrides?: InputOverrides): ReactNode;

package/dist/Components/Inputs/InputRenderer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { CheckBox, RadioButton, Switch } from "./CheckBox.js";
 import { CheckBoxGroup } from "./CheckBoxGroup.js";
 import { CodeBox } from "./CodeBox.js";
@@ -10,23 +11,26 @@ import { Dropdown } from "./Dropdown.js";
 import { GroupForm } from "./GroupForm.js";
 import { MarkdownEditor } from "./MarkdownEditor.js";
 import { NumberBox } from "./NumberBox.js";
+import { PictureInput } from "./PictureInput.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { RichTextEditor } from "./RichTextEditor.js";
 import { RangeSlider, Slider } from "./Slider.js";
 import { TabularForm } from "./TabularForm.js";
 import { TextArea } from "./TextArea.js";
 import { TextBox } from "./TextBox.js";
+import { isTextInputType, TEXT_BOX_TYPES } from "./TextBoxTypes.js";
 import { TimePicker } from "./TimePicker.js";
 import { TreeView } from "./TreeView.js";
 /**
- * Renders an input from its params: `{ type: "email", name: "email", label: "Email", required: true }` gives a
- * `TextBox` of type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
- * Layout keys (`span`, `width`, `grow`) stay out of the component's props; `hidden` renders nothing.
+ * Renders an input from its params: `{ type: EInputTypes.Email, name: "email", label: "Email", required: true }` gives a
+ * `TextBox` of HTML type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
+ * Layout keys (`span`, `width`, `grow`, and the Form-only ones such as `showWhen` and `compute`) stay out of the
+ * component's props; `hidden` renders nothing.
  */
 export function renderInput(params, overrides = {}) {
     if (params.hidden)
         return null;
-    const { type, section: _section, span: _span, width: _width, grow: _grow, hidden: _hidden, dependsOn: _dependsOn, onValueChange: ownChange, ...rest } = params;
+    const { type, section: _section, span: _span, width: _width, grow: _grow, hidden: _hidden, dependsOn: _dependsOn, narrowedBy: _narrowedBy, showWhen: _showWhen, readOnlyWhen: _readOnlyWhen, remember: _remember, labelWhen: _labelWhen, spanWhen: _spanWhen, compute: _compute, onValueChange: ownChange, ...rest } = params;
     const { defaultValue, onValueChange, readOnly, disabled, ...set } = overrides;
     const props = { ...rest, ...set };
     if (readOnly)
@@ -43,59 +47,60 @@ export function renderInput(params, overrides = {}) {
     }
     if (onValueChange || ownChange) {
         props.onValueChange = (value, ...more) => {
-            onValueChange?.(value);
+            // A dropdown says which item it picked; the other inputs' second argument is their event.
+            onValueChange?.(value, type === EInputTypes.Dropdown ? more[0] : undefined);
             ownChange?.(value, ...more);
         };
     }
+    if (isTextInputType(type))
+        return _jsx(TextBox, { ...props, type: TEXT_BOX_TYPES[type] });
     switch (type) {
-        case "text":
-        case "email":
-        case "password":
-        case "search":
-        case "tel":
-        case "url":
-            return _jsx(TextBox, { ...props, type: type });
-        case "textarea":
+        case EInputTypes.TextArea:
             return _jsx(TextArea, { ...props });
-        case "number":
+        case EInputTypes.Number:
             return _jsx(NumberBox, { ...props });
-        case "code":
+        case EInputTypes.Code:
             return _jsx(CodeBox, { ...props });
-        case "checkbox":
+        case EInputTypes.CheckBox:
             return _jsx(CheckBox, { ...props });
-        case "switch":
+        case EInputTypes.Switch:
             return _jsx(Switch, { ...props });
-        case "radio":
+        case EInputTypes.Radio:
             return _jsx(RadioButton, { ...props });
-        case "checkbox-group":
+        case EInputTypes.CheckBoxGroup:
             return _jsx(CheckBoxGroup, { ...props });
-        case "radio-group":
+        case EInputTypes.RadioGroup:
             return _jsx(RadioGroup, { ...props });
-        case "dropdown":
+        case EInputTypes.Dropdown:
             // Either overload: `multiple` travels in the props.
             return _jsx(Dropdown, { ...props });
-        case "date":
+        case EInputTypes.Date:
             return _jsx(DatePicker, { ...props });
-        case "date-range":
+        case EInputTypes.DateRange:
             return _jsx(DateRangePicker, { ...props });
-        case "time":
+        case EInputTypes.Time:
             return _jsx(TimePicker, { ...props });
-        case "date-time":
+        case EInputTypes.DateTime:
             return _jsx(DateTimePicker, { ...props });
-        case "slider":
+        case EInputTypes.Slider:
             return _jsx(Slider, { ...props });
-        case "range-slider":
+        case EInputTypes.RangeSlider:
             return _jsx(RangeSlider, { ...props });
-        case "markdown":
+        case EInputTypes.Markdown:
             return _jsx(MarkdownEditor, { ...props });
-        case "rich-text":
+        case EInputTypes.RichText:
             return _jsx(RichTextEditor, { ...props });
-        case "tree":
+        case EInputTypes.Tree:
             return _jsx(TreeView, { ...props });
-        case "tabular":
+        case EInputTypes.Tabular:
             return _jsx(TabularForm, { ...props });
-        case "group":
+        case EInputTypes.Group:
             return _jsx(GroupForm, { ...props });
+        case EInputTypes.Picture: {
+            // A picture is the owner's file, not a value: the form's value and field name stay out of it.
+            const { defaultValue: _value, name: _name, form: _form, ...picture } = props;
+            return _jsx(PictureInput, { ...picture });
+        }
         default:
             return null;
     }

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

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { ApiModuleValue } from "../../Interfaces/ApiInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+import { type OwnerFilesParams } from "../Viewers/OwnerFiles.tsx";
+export interface PictureInputProps extends Omit<OwnerFilesParams<ApiModuleValue>, "ownerId"> {
+    /**
+     * The owner's id: the record the form edits (`row?.id` in a CRUD's inputs). Null or missing for a record not saved
+     * yet, which has no pictures until it is: the input says so.
+     */
+    ownerId?: string | null;
+    label?: ReactNode;
+    /**
+     * Help text under the picture. Default: what the category takes, once it is known. There is no `required`: the
+     * picture is saved at once, apart from the form, so a form could not refuse a save without one.
+     */
+    hint?: ReactNode;
+    /** The preview's height: `sm` 72px, `md` 112px, `lg` 152px. Default `md`. */
+    size?: Size;
+    disabled?: boolean;
+    /** What the record is, for the note a new one shows: "branch". Default "record". */
+    subject?: string;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    "aria-label"?: string;
+}
+/**
+ * A record's picture in a form: the owner's main picture, with Upload (a new one, edited first, made the main picture),
+ * Edit (the main one, saved as a new picture), Remove (no main picture; the pictures stay) and, when the category keeps
+ * more than one, All pictures (the gallery). In a category that keeps one file, Upload is Replace and Remove deletes it.
+ * Clicking or pressing the picture opens the pictures window too, read only where the input is. The change is saved at
+ * once, not with the form: a picture is the owner's file, not one of the record's values, so the form keeps no field for
+ * it and sends nothing under its name.
+ *
+ * @example
+ * inputs: (action, row) => [
+ *   { type: EInputTypes.Picture, name: "logo", label: "Logo", module: NexusModule.Enterprise, category: "company-logo", ownerId: row?.id, aspect: 1 },
+ *   ...
+ * ]
+ */
+export declare function PictureInput({ label, hint, size, disabled, readOnly, subject, id, className, style, "aria-label": ariaLabel, ...params }: PictureInputProps): import("react").JSX.Element;