nexus-shared 3.1.0 → 4.0.0

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,7 +1,9 @@
 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";
 import { DatePicker } from "./DatePicker.js";
 import { DateRangePicker } from "./DateRangePicker.js";
 import { DateTimePicker } from "./DateTimePicker.js";
@@ -9,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)
@@ -42,57 +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 "checkbox":
+        case EInputTypes.Code:
+            return _jsx(CodeBox, { ...props });
+        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/NumberBox.js

@@ -4,7 +4,7 @@ import { InlineIcon, iconMinus, iconPlus } from "nexus-icons";
 import { useEffect, useLayoutEffect, useRef, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { clampNumber, cleanNumberText, formatNumber, getNumberSymbols, isPartialNumber, parseNumber, readPastedNumber, roundDecimal, stepNumber, } from "../../Helpers/NumberHelpers.js";
-import { useNumberLocale } from "../../Helpers/UserPreferences.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";
@@ -24,7 +24,9 @@ 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: ownLocale, 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;

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;

package/dist/Components/Inputs/PictureInput.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconPencil, iconPhoto, iconTrash, iconUpload, InlineIcon } from "nexus-icons";
+import { useId, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { getFileAdapter } from "../../Services/FileApi.js";
+import { preloadImageEditor } from "../../Services/ImageEditorLoader.js";
+import { Button } from "../Documents/Button.js";
+import { busyProps, openPictureGallery, useFocusThroughChange, useOwnerFiles } from "../Viewers/OwnerFiles.js";
+import { ChoiceLegend, GroupFooter } from "./ChoiceField.js";
+const HEIGHTS = { sm: 72, md: 112, lg: 152 };
+/**
+ * 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 function PictureInput({ label, hint, size = "md", disabled = false, readOnly = false, subject = "record", id, className, style, "aria-label": ariaLabel, ...params }) {
+    const generated = useId();
+    const fieldId = id ?? generated;
+    const [failed, setFailed] = useState(null);
+    const files = useOwnerFiles({ ...params, readOnly: readOnly || disabled });
+    const { status, data, busy, canWrite, readOnlyReason, editorProblem, actions } = files;
+    // A keyboard's focus stays in the input through a change: on the button pressed, or the first left when it went.
+    const rootRef = useRef(null);
+    useFocusThroughChange(rootRef, busy);
+    const primary = data?.files.find(file => file.isPrimary) ?? null;
+    const url = primary ? getFileAdapter().fileUrl(primary, "thumbnail") : null;
+    const shown = url && failed !== url;
+    const ratio = typeof params.aspect === "number" && params.aspect > 0 ? params.aspect : 1;
+    const preview = { "--nx-picture-h": `${HEIGHTS[size]}px`, "--nx-picture-ratio": ratio };
+    const unsaved = !params.ownerId;
+    // A category that keeps one file: a new picture takes its place, and Remove deletes it (there is nothing else to show).
+    const single = data?.category.maxCount === 1;
+    const kept = data?.files ?? [];
+    const note = unsaved
+        ? `Save the ${subject} first, then add its picture.`
+        : status.kind === "failed"
+            ? status.message
+            : busy
+                ? `${busy}…`
+                : editorProblem
+                    ? // Why Upload or Edit did not open the editor, until a try opens it: never a button that does nothing.
+                        editorProblem
+                    : // Why it cannot be changed, when the page or the backend says (`lockReason`, a refused key): never a silent input.
+                        (readOnlyReason ?? hint ?? (data && canWrite ? `${data.files.length} of ${data.category.maxCount} ${single ? "picture" : "pictures"} kept.` : undefined));
+    const problem = status.kind === "failed" || (!unsaved && !busy && Boolean(editorProblem));
+    const named = typeof label === "string" && label ? label : "Picture";
+    /** The pictures window, as All pictures opens it: what changes there is read again here. */
+    const openAll = () => openPictureGallery({
+        ...params,
+        ownerId: params.ownerId,
+        readOnly: readOnly || disabled,
+        onChange: primary => {
+            void actions.reload();
+            params.onChange?.(primary);
+        },
+    });
+    const pictureClass = cx("nx-picture", params.shape === "circle" && "nx-picture--round", !shown && "nx-picture--empty", status.kind === "loading" && "nx-picture--loading");
+    const face = shown ? _jsx("img", { src: url, alt: "", decoding: "async", onError: () => setFailed(url) }) : _jsx(InlineIcon, { icon: iconPhoto });
+    return (_jsxs("fieldset", { ref: rootRef, id: fieldId, className: cx("nx-choices", size !== "md" && `nx-choices--${size}`, "nx-picture-input", className), style: style, disabled: disabled, "aria-label": ariaLabel, "aria-busy": status.kind === "loading" || Boolean(busy) || undefined, "aria-describedby": note ? `${fieldId}-message` : undefined, "data-readonly": readOnly || undefined, children: [_jsx(ChoiceLegend, { label: label }), _jsxs("div", { className: "nx-picture-input__body", children: [!unsaved && data ? (_jsx("button", { type: "button", className: pictureClass, style: preview, "aria-label": primary ? `${named}: open the pictures` : `${named}: none yet, open the pictures`, "aria-haspopup": "dialog", title: "All pictures", ...busyProps(busy, openAll), onPointerEnter: preloadImageEditor, children: face })) : (_jsx("span", { className: pictureClass, style: preview, role: "img", "aria-label": primary ? `${named}: ${primary.name}` : "No picture", children: face })), !unsaved && data && (_jsxs("div", { className: "nx-picture-input__actions", role: "group", children: [canWrite && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconUpload }), ...busyProps(busy, () => void actions.replace()), onPointerEnter: preloadImageEditor, onFocus: preloadImageEditor, children: single && kept.length > 0 ? "Replace" : "Upload" })), canWrite && primary && (_jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconPencil }), ...busyProps(busy, () => void actions.edit(primary)), onPointerEnter: preloadImageEditor, onFocus: preloadImageEditor, children: "Edit" })), canWrite && primary && (_jsx(Button, { size: "sm", variant: "ghost", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), ...busyProps(busy, () => void (single ? actions.remove(primary) : actions.makePrimary(null))), children: single ? "Delete" : "Remove" })), (data.category.maxCount > 1 || kept.length > 1 || (kept.length > 0 && !primary)) && (_jsxs(Button, { size: "sm", variant: "ghost", ...busyProps(busy, openAll), children: ["All pictures (", data.files.length, ")"] }))] }))] }), _jsx(GroupFooter, { id: `${fieldId}-message`, hint: problem ? undefined : note, error: problem ? note : undefined })] }));
+}

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

@@ -1,7 +1,19 @@
 import type { ChangeEvent } from "react";
-import type { OptionValue } from "../../Interfaces/InputInterfaces.ts";
+import type { ChoiceDesign, OptionValue } from "../../Interfaces/InputInterfaces.ts";
 import { type ChoiceGroupProps } from "./ChoiceField.tsx";
-export interface RadioGroupProps<T extends OptionValue = string> extends ChoiceGroupProps<T> {
+/**
+ * How a `RadioGroup` draws its options: `default` (a circle beside each label), `cards` (a card each, with its
+ * description), or `tabs` (nav-style tabs on one track, as `TabButtons` draws them).
+ */
+export type RadioGroupDesign = ChoiceDesign | "tabs";
+export interface RadioGroupProps<T extends OptionValue = string> extends Omit<ChoiceGroupProps<T>, "design"> {
+    /**
+     * `default`: a circle beside each label. `cards`: each option is a card. `tabs`: the options as nav-style tabs on one
+     * track (`TabButtons`' look), wrapping onto more rows where they do not fit; each option's `description` is its
+     * tooltip and what a screen reader hears with it, and the chosen option's shows under the track. `orientation` and
+     * `columns` do not apply to tabs.
+     */
+    design?: RadioGroupDesign;
     /** The chosen value, or `null` for none. With `value`, the group is controlled; pair it with `onValueChange`. */
     value?: T | null;
     defaultValue?: T | null;
@@ -12,7 +24,8 @@ export interface RadioGroupProps<T extends OptionValue = string> extends ChoiceG
 }
 /**
  * One choice from a list of options, such as a room type or a payment method. Native radio buttons, so the arrow keys
- * move the choice. `design="cards"` shows each option as a card with its description. Read-only (default note
+ * move the choice. `design="cards"` shows each option as a card with its description, `design="tabs"` as nav-style tabs
+ * whose descriptions are tooltips (the chosen one's under the track). Read-only (default note
  * "Read-only: this choice cannot be changed.") shows a lock after the label and a note under a clicked option.
  *
  * @example <RadioGroup name="roomType" label="Room type" required design="cards" options={[{ value: "deluxe", label: "Deluxe" }]} />

package/dist/Components/Inputs/RadioGroup.js

@@ -1,11 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { validateSelection } from "../../Helpers/ValidationHelpers.js";
-import { ChoiceItem, ChoiceLegend, GroupFooter, groupLayout, leavesField, OPTION_ATTRIBUTE, optionAnchor, useChoiceField } from "./ChoiceField.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { ChoiceItem, ChoiceLegend, ChoiceTab, ChoiceTabNotes, GroupFooter, groupLayout, leavesField, OPTION_ATTRIBUTE, optionAnchor, showChosenNote, useChoiceField } from "./ChoiceField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 /**
  * One choice from a list of options, such as a room type or a payment method. Native radio buttons, so the arrow keys
- * move the choice. `design="cards"` shows each option as a card with its description. Read-only (default note
+ * move the choice. `design="cards"` shows each option as a card with its description, `design="tabs"` as nav-style tabs
+ * whose descriptions are tooltips (the chosen one's under the track). Read-only (default note
  * "Read-only: this choice cannot be changed.") shows a lock after the label and a note under a clicked option.
  *
  * @example <RadioGroup name="roomType" label="Room type" required design="cards" options={[{ value: "deluxe", label: "Deluxe" }]} />
@@ -14,6 +16,7 @@ export function RadioGroup(props) {
     const { options, name, label, hint, required, validate, value, defaultValue, readOnly = false, disabled, onValueChange } = props;
     const { readOnlyMessage = "Read-only: this choice cannot be changed." } = props;
     const { size = "md" } = props;
+    const tabs = props.design === "tabs";
     const chosen = (inputs) => {
         const input = inputs.find(item => item.checked);
         return input ? [options[Number(input.getAttribute(OPTION_ATTRIBUTE))].value] : [];
@@ -21,6 +24,8 @@ export function RadioGroup(props) {
     const field = useChoiceField(props, {
         check: (inputs, fieldName) => validateSelection(chosen(inputs), { required, validate: validate && (values => validate(values[0] ?? null)) }, fieldName),
         checkKeys: [value, required, validate, options],
+        // Tabs show the chosen option's description under the track: it follows every change and a form's reset.
+        sync: tabs ? showChosenNote : undefined,
     });
     function handleChange(event) {
         if (readOnly)
@@ -39,5 +44,5 @@ export function RadioGroup(props) {
     }
     const invalid = Boolean(field.error);
     const layout = groupLayout(props);
-    return (_jsxs("fieldset", { ref: field.containerRef, id: field.fieldId, role: "radiogroup", className: layout.className, style: props.style, disabled: disabled, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": field.error || hint ? field.messageId : undefined, "aria-required": required || undefined, "aria-invalid": invalid || undefined, "aria-readonly": readOnly || undefined, onChange: handleChange, onClick: readOnlyNotice.onClick, onKeyDown: readOnlyNotice.onKeyDown, onBlur: handleBlur, children: [_jsx(ChoiceLegend, { label: label, required: required, lock: readOnlyNotice.lock }), _jsx("div", { className: "nx-choices__options", style: layout.optionsStyle, children: options.map((option, index) => (_jsx(ChoiceItem, { type: "radio", groupId: field.fieldId, name: name ?? field.fieldId, option: option, index: index, size: size, checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, invalid: invalid, readOnly: readOnly, onInvalid: field.onInvalid }, String(option.value)))) }), _jsx(GroupFooter, { id: field.messageId, hint: hint, error: field.error }), readOnlyNotice.notice] }));
+    return (_jsxs("fieldset", { ref: field.containerRef, id: field.fieldId, role: "radiogroup", className: layout.className, style: props.style, disabled: disabled, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": field.error || hint ? field.messageId : undefined, "aria-required": required || undefined, "aria-invalid": invalid || undefined, "aria-readonly": readOnly || undefined, onChange: handleChange, onClick: readOnlyNotice.onClick, onKeyDown: readOnlyNotice.onKeyDown, onBlur: handleBlur, children: [_jsx(ChoiceLegend, { label: label, required: required, lock: readOnlyNotice.lock }), tabs ? (_jsx("div", { className: cx("nx-tabs", `nx-tabs--${size}`, "nx-tabs--wrap"), children: options.map((option, index) => (_jsx(ChoiceTab, { type: "radio", groupId: field.fieldId, name: name ?? field.fieldId, option: option, index: index, checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, invalid: invalid, readOnly: readOnly, onInvalid: field.onInvalid }, String(option.value)))) })) : (_jsx("div", { className: "nx-choices__options", style: layout.optionsStyle, children: options.map((option, index) => (_jsx(ChoiceItem, { type: "radio", groupId: field.fieldId, name: name ?? field.fieldId, option: option, index: index, size: size, checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, invalid: invalid, readOnly: readOnly, onInvalid: field.onInvalid }, String(option.value)))) })), tabs && _jsx(ChoiceTabNotes, { groupId: field.fieldId, options: options, chosen: options.findIndex(option => option.value === (value !== undefined ? value : defaultValue)) }), _jsx(GroupFooter, { id: field.messageId, hint: hint, error: field.error }), readOnlyNotice.notice] }));
 }

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

@@ -1,6 +1,6 @@
 import { type FormEvent, type ReactNode } from "react";
 import { RowsStore, type RowsSnapshot } from "../../Helpers/RowsStore.ts";
-import type { InputParams, RowsInputProps, RowValue } from "../../Interfaces/FormInterfaces.ts";
+import { type InputParams, type RowsInputProps, type RowValue } from "../../Interfaces/FormInterfaces.ts";
 import type { InputDesign } from "../../Interfaces/InputInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 /** Form names of inputs inside rows that need one (radio and checkbox groups). They are taken out of the form's data. */