nexus-shared 1.1.20 → 2.0.0

package/dist/Components/Inputs/GroupForm.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlertCircle, iconArrowDown, iconArrowUp, iconChevronDown, iconCopy, iconTrash, InlineIcon } from "nexus-icons";
+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 { 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"]);
+function defaultSummary(row, inputs, preferences) {
+    const parts = [];
+    for (const params of inputs) {
+        if (parts.length === 3)
+            break;
+        if (params.hidden || SUMMARY_SKIP.has(params.type))
+            continue;
+        const text = formatInputValue(params, row[params.name], { preferences });
+        if (text)
+            parts.push(text);
+    }
+    return parts.join(" · ");
+}
+/** One row as a section: a header that collapses it, and its inputs on a 12-column grid. */
+const GroupSection = memo(function GroupSection({ store, rowKey, index, count, inputs, context, isNew, onAction }) {
+    useRowVersion(store, rowKey);
+    // A title made from the row's values follows every change of the row; the inputs themselves do not render again.
+    const watchValues = Boolean(context.sectionTitle);
+    const subscribeValues = useCallback((listener) => (watchValues ? store.subscribeValue(listener) : () => undefined), [store, watchValues]);
+    const readRow = () => (watchValues ? store.row(rowKey) : null);
+    useSyncExternalStore(subscribeValues, readRow, readRow);
+    const [collapsed, setCollapsed] = useState(context.collapsible && context.defaultCollapsed && !isNew);
+    const problems = context.showAll ? store.rowProblems(rowKey) : 0;
+    const row = store.row(rowKey) ?? {};
+    const title = context.sectionTitle?.(row, index) ?? `${store.names.title} ${index + 1}`;
+    const name = `${store.names.item} ${index + 1}`;
+    const titleId = `${context.idPrefix}-${index}-title`;
+    const bodyId = `${context.idPrefix}-${index}-body`;
+    const open = !collapsed || problems > 0;
+    // A check that finds problems in a collapsed section opens it.
+    useLayoutEffect(() => {
+        if (problems > 0 && collapsed)
+            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);
+    let summary = null;
+    if (!open) {
+        const { summary: pick } = context;
+        if (typeof pick === "function")
+            summary = pick(row, index);
+        else if (pick)
+            summary = defaultSummary(row, inputs.filter(params => pick.includes(params.name)), context.preferences);
+        else
+            summary = defaultSummary(row, inputs, context.preferences);
+    }
+    function onBlur(event) {
+        const cell = event.target.closest("[data-nx-cell]");
+        if (!cell || (event.relatedTarget instanceof Node && cell.contains(event.relatedTarget)))
+            return;
+        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: params, 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 }, 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
+ * each input's params). The same params, value, rules, and form behavior as `TabularForm`; only the layout differs. It
+ * suits rows with more or wider inputs than a table row holds, such as addresses, guardians, or work history, when there
+ * are a few of them. For hundreds of rows, use `TabularForm`, which renders only the rows in view.
+ *
+ * A section collapses to one line that lists its first values, and tags the radios it has on ("Primary"). Sections can
+ * move, be copied, and be removed (with Undo). A check that finds problems opens their sections and says how many.
+ *
+ * @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 },
+ * ]} />
+ */
+export function GroupForm(props) {
+    const { inputs, label, hint, error, size = "md", design, readOnly = false, disabled = false, required, max, collapsible = true, defaultCollapsed = false, className, style } = props;
+    const addable = props.addable !== false && !readOnly;
+    const removable = props.removable !== false && !readOnly && !disabled;
+    const sortable = Boolean(props.sortable) && !readOnly && !disabled;
+    const preferences = useDatePreferences();
+    const layoutRef = useRef(null);
+    const rows = useRowsInput(props, "Item", layoutRef);
+    const store = rows.store;
+    const { snapshot } = rows;
+    const frame = useRowsFrame(props, store);
+    const count = snapshot.keys.length;
+    const listRef = useRef(null);
+    const pendingRef = useRef(null);
+    // Rows on the page when it first rendered; any other row is new and starts open.
+    const [loadedKeys] = useState(() => new Set(snapshot.keys));
+    function tryFocus() {
+        const pending = pendingRef.current;
+        if (!pending)
+            return;
+        const section = listRef.current?.querySelector(`:scope > [data-nx-row="${CSS.escape(pending.key)}"]`);
+        if (!section)
+            return;
+        const { target } = pending;
+        let element;
+        if (typeof target === "string") {
+            const cell = section.querySelector(`[data-nx-cell="${CSS.escape(target)}"]`);
+            // A collapsed section opens first; its inputs are on the page after the next render.
+            if (!cell) {
+                section.querySelector('.nx-group-form__toggle[aria-expanded="false"]')?.click();
+                return;
+            }
+            element = firstFocusable(cell);
+        }
+        else if ("actions" in target)
+            element = section.querySelector("[data-nx-row-actions]") ?? firstFocusable(section);
+        else
+            element = firstFocusable(section.querySelector(".nx-group-form__body")) ?? firstFocusable(section);
+        pendingRef.current = null;
+        element?.focus();
+        if (element)
+            section.scrollIntoView({ block: "nearest" });
+    }
+    layoutRef.current = {
+        focusRow(key, target) {
+            pendingRef.current = { key, target };
+            requestAnimationFrame(tryFocus);
+        },
+    };
+    useLayoutEffect(tryFocus);
+    const actionsRef = useRef(rows.actions);
+    actionsRef.current = rows.actions;
+    const onAction = useCallback((action, key) => {
+        const run = actionsRef.current;
+        if (action === "move-up")
+            run.move(key, -1);
+        else if (action === "move-down")
+            run.move(key, 1);
+        else if (action === "duplicate")
+            run.duplicate(key);
+        else
+            run.remove(key);
+    }, []);
+    const sectionTitle = props.sectionTitle;
+    const summary = props.summary;
+    const context = useMemo(() => ({
+        idPrefix: frame.id,
+        size,
+        design,
+        readOnly,
+        disabled,
+        removable,
+        sortable,
+        canAdd: rows.canAdd,
+        collapsible,
+        defaultCollapsed,
+        showAll: snapshot.showAll,
+        preferences,
+        sectionTitle,
+        summary,
+    }), [frame.id, size, design, readOnly, disabled, removable, sortable, rows.canAdd, collapsible, defaultCollapsed, snapshot.showAll, preferences, sectionTitle, summary]);
+    const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
+    return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-group-form", `nx-group-form--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), count === 0 ? (_jsx("p", { className: "nx-group-form__empty", children: frame.emptyMessage })) : (_jsx("ol", { ref: listRef, className: "nx-group-form__list", children: snapshot.keys.map((key, index) => (_jsx(GroupSection, { store: store, rowKey: key, index: index, count: count, inputs: inputs, context: context, isNew: !loadedKeys.has(key), onAction: onAction }, `${snapshot.generation}:${key}`))) })), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
+}

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

@@ -0,0 +1,59 @@
+import { type ChangeEvent, type FocusEvent, type FormEvent, type ReactNode, type Ref } from "react";
+import type { ValidateOn } from "../../Interfaces/InputInterfaces.ts";
+export type TextElement = HTMLInputElement | HTMLTextAreaElement;
+export interface InputFieldOptions<E extends TextElement> {
+    id?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    fieldName?: string;
+    error?: string | null;
+    validateOn?: ValidateOn;
+    required?: boolean;
+    /** Text shown before and after the value. Screen readers read it with the field, through `aria-describedby`. */
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    ref?: Ref<E>;
+    "aria-describedby"?: string;
+    onChange?: (event: ChangeEvent<E>) => void;
+    onBlur?: (event: FocusEvent<E>) => void;
+    onInvalid?: (event: FormEvent<E>) => void;
+}
+export interface InputFieldRules<E extends TextElement> {
+    /** The element's message under its rules, or `null` when valid. `name` is the field name for messages. */
+    check: (element: E, name: string | undefined) => string | null;
+    /** Everything `check` depends on (rules, a controlled value). The element is checked again when one changes. */
+    checkKeys: readonly unknown[];
+    /** Runs after a form reset has put the element's default text back. */
+    onReset?: (element: E) => void;
+}
+/**
+ * Behavior shared by every text-like input: ids, validation messages, and form integration. Typing never re-renders
+ * the field; the error state changes only when its message does. Validity is also set on the element with
+ * `setCustomValidity`, so a plain `<form>` blocks submit and reports each invalid field with its own message.
+ */
+export declare function useInputField<E extends TextElement>(options: InputFieldOptions<E>, rules: InputFieldRules<E>): {
+    controlId: string;
+    messageId: string;
+    elementRef: import("react").RefObject<E | null>;
+    error: string | null;
+    touch: () => void;
+    change: () => void;
+    /** Props for the input or text area. */
+    controlProps: {
+        id: string;
+        ref: (node: E | null) => void;
+        "aria-invalid": boolean | undefined;
+        "aria-required": true | undefined;
+        "aria-describedby": string | undefined;
+        onChange: (event: ChangeEvent<E>) => void;
+        onBlur: (event: FocusEvent<E>) => void;
+        onInvalid: (event: FormEvent<E>) => void;
+    };
+};
+/**
+ * Whether a control that failed its check is the first that failed around it, and so takes focus: in its `<form>`, or
+ * in the `Form` component around it (`data-nx-form`) when there is no `<form>`. A control in neither is always first.
+ */
+export declare function isFirstInvalid(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): boolean;
+/** Sets a value the way typing does, so React's onChange and every listener run. */
+export declare function setInputValue(element: TextElement, value: string): void;

package/dist/Components/Inputs/InputField.js

@@ -0,0 +1,169 @@
+"use client";
+import { useCallback, useEffect, useEffectEvent, useId, useRef, useState } from "react";
+import { hasContent } from "./Field.js";
+/**
+ * Behavior shared by every text-like input: ids, validation messages, and form integration. Typing never re-renders
+ * the field; the error state changes only when its message does. Validity is also set on the element with
+ * `setCustomValidity`, so a plain `<form>` blocks submit and reports each invalid field with its own message.
+ */
+export function useInputField(options, rules) {
+    const { id, label, hint, fieldName, error, validateOn = "blur", required, ref } = options;
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const messageId = `${controlId}-message`;
+    const name = fieldName ?? (typeof label === "string" ? label : undefined);
+    const elementRef = useRef(null);
+    // Shown after the first blur with a value, a change when validateOn is "change", or a submit.
+    const touchedRef = useRef(false);
+    const editedRef = useRef(false);
+    const shownRef = useRef(null);
+    const [shownError, setShownError] = useState(null);
+    function check(element) {
+        const message = rules.check(element, name);
+        element.setCustomValidity(message ?? "");
+        return message;
+    }
+    function show(message) {
+        if (shownRef.current === message)
+            return;
+        shownRef.current = message;
+        setShownError(message);
+    }
+    const setRef = useCallback((node) => {
+        elementRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // Rules or a controlled value changed: refresh the element's validity, and the message once it shows.
+    // Cross-field rules (confirm password) re-run here when the parent renders with a new `validate`.
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const message = check(element);
+        if (touchedRef.current)
+            show(message);
+    }, [...rules.checkKeys, name]);
+    // A form reset restores default values in the DOM; bring validity and the message back with them.
+    const onFormReset = useEffectEvent(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        touchedRef.current = false;
+        editedRef.current = false;
+        // React fires onChange only when the text differs from the last text it saw, and a reset changes the DOM without
+        // telling it. Assigning the restored text through the property lets React see it, so typing what was there
+        // before the reset still reports the change.
+        element.value = element.value;
+        rules.onReset?.(element);
+        check(element);
+        show(null);
+    });
+    useEffect(() => {
+        const form = elementRef.current?.form;
+        if (!form)
+            return;
+        // The reset event fires before the browser restores the values.
+        const onReset = () => setTimeout(() => onFormReset());
+        form.addEventListener("reset", onReset);
+        return () => form.removeEventListener("reset", onReset);
+    }, []);
+    /** Marks the field as used and shows its message now, e.g. after a +/− button changed the value. */
+    function touch() {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        touchedRef.current = true;
+        show(check(element));
+    }
+    /**
+     * Counts a change made without typing, such as a pick from a dropdown's list, the way typing counts: the field is
+     * checked again, and its message shows at the same moments (at once once shown, otherwise after blur or submit).
+     */
+    function change() {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        editedRef.current = true;
+        if (validateOn === "change")
+            touchedRef.current = true;
+        const message = check(element);
+        if (touchedRef.current)
+            show(message);
+    }
+    function onChange(event) {
+        const element = event.currentTarget;
+        editedRef.current = true;
+        if (validateOn === "change")
+            touchedRef.current = true;
+        const message = check(element);
+        if (touchedRef.current)
+            show(message);
+        options.onChange?.(event);
+    }
+    function onBlur(event) {
+        const element = event.currentTarget;
+        // Tabbing through an empty field does not flag it; typing something, or submitting, does.
+        if (validateOn !== "submit" && (editedRef.current || element.value)) {
+            touchedRef.current = true;
+            show(check(element));
+        }
+        options.onBlur?.(event);
+    }
+    function onInvalid(event) {
+        // Our message replaces the browser's bubble.
+        event.preventDefault();
+        const element = event.currentTarget;
+        touchedRef.current = true;
+        show(check(element) ?? element.validationMessage);
+        // The browser focuses nothing once the bubble is cancelled, so the first invalid field takes focus.
+        if (isFirstInvalid(element))
+            element.focus();
+        options.onInvalid?.(event);
+    }
+    const shownMessage = error || shownError;
+    const describedBy = [
+        options["aria-describedby"],
+        hasContent(options.prefix) && `${controlId}-prefix`,
+        hasContent(options.suffix) && `${controlId}-suffix`,
+        (shownMessage || hint) && messageId,
+    ]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return {
+        controlId,
+        messageId,
+        elementRef,
+        error: shownMessage,
+        touch,
+        change,
+        /** Props for the input or text area. */
+        controlProps: {
+            id: controlId,
+            ref: setRef,
+            "aria-invalid": shownMessage ? true : undefined,
+            "aria-required": required || undefined,
+            "aria-describedby": describedBy,
+            onChange,
+            onBlur,
+            onInvalid,
+        },
+    };
+}
+/**
+ * Whether a control that failed its check is the first that failed around it, and so takes focus: in its `<form>`, or
+ * in the `Form` component around it (`data-nx-form`) when there is no `<form>`. A control in neither is always first.
+ */
+export function isFirstInvalid(element) {
+    const scope = element.form ?? element.closest("[data-nx-form]");
+    const first = scope?.querySelector(":is(input, textarea, select):invalid");
+    return !first || first === element;
+}
+/** Sets a value the way typing does, so React's onChange and every listener run. */
+export function setInputValue(element, value) {
+    const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(prototype, "value")?.set?.call(element, value);
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+}

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+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`. */
+export interface InputOverrides {
+    id?: string;
+    /** The form field name. Leave it out to send nothing, as a tabular form's inputs do. */
+    name?: string;
+    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;
+    error?: string | null;
+    /** Replaces the params' own, e.g. `false` for a radio in rows, where "required" means one row has it. */
+    required?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    size?: Size;
+    design?: InputDesign;
+    /** On top of the params: `true` makes the input read-only even when its params do not. */
+    readOnly?: boolean;
+    /** On top of the params, like `readOnly`. */
+    disabled?: 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.
+ */
+export declare function renderInput(params: InputParams, overrides?: InputOverrides): ReactNode;

package/dist/Components/Inputs/InputRenderer.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { CheckBox, RadioButton, Switch } from "./CheckBox.js";
+import { CheckBoxGroup } from "./CheckBoxGroup.js";
+import { DatePicker } from "./DatePicker.js";
+import { DateRangePicker } from "./DateRangePicker.js";
+import { DateTimePicker } from "./DateTimePicker.js";
+import { Dropdown } from "./Dropdown.js";
+import { GroupForm } from "./GroupForm.js";
+import { MarkdownEditor } from "./MarkdownEditor.js";
+import { NumberBox } from "./NumberBox.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 { 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.
+ */
+export function renderInput(params, overrides = {}) {
+    if (params.hidden)
+        return null;
+    const { type, span: _span, width: _width, grow: _grow, hidden: _hidden, onValueChange: ownChange, ...rest } = params;
+    const { defaultValue, onValueChange, readOnly, disabled, ...set } = overrides;
+    const props = { ...rest, ...set };
+    if (readOnly)
+        props.readOnly = true;
+    if (disabled)
+        props.disabled = true;
+    if ("defaultValue" in overrides) {
+        if (isBooleanInput(params)) {
+            delete props.defaultValue;
+            props.defaultChecked = defaultValue === true;
+        }
+        else
+            props.defaultValue = defaultValue;
+    }
+    if (onValueChange || ownChange) {
+        props.onValueChange = (value, ...more) => {
+            onValueChange?.(value);
+            ownChange?.(value, ...more);
+        };
+    }
+    switch (type) {
+        case "text":
+        case "email":
+        case "password":
+        case "search":
+        case "tel":
+        case "url":
+            return _jsx(TextBox, { ...props, type: type });
+        case "textarea":
+            return _jsx(TextArea, { ...props });
+        case "number":
+            return _jsx(NumberBox, { ...props });
+        case "checkbox":
+            return _jsx(CheckBox, { ...props });
+        case "switch":
+            return _jsx(Switch, { ...props });
+        case "radio":
+            return _jsx(RadioButton, { ...props });
+        case "checkbox-group":
+            return _jsx(CheckBoxGroup, { ...props });
+        case "radio-group":
+            return _jsx(RadioGroup, { ...props });
+        case "dropdown":
+            // Either overload: `multiple` travels in the props.
+            return _jsx(Dropdown, { ...props });
+        case "date":
+            return _jsx(DatePicker, { ...props });
+        case "date-range":
+            return _jsx(DateRangePicker, { ...props });
+        case "time":
+            return _jsx(TimePicker, { ...props });
+        case "date-time":
+            return _jsx(DateTimePicker, { ...props });
+        case "slider":
+            return _jsx(Slider, { ...props });
+        case "range-slider":
+            return _jsx(RangeSlider, { ...props });
+        case "markdown":
+            return _jsx(MarkdownEditor, { ...props });
+        case "rich-text":
+            return _jsx(RichTextEditor, { ...props });
+        case "tree":
+            return _jsx(TreeView, { ...props });
+        case "tabular":
+            return _jsx(TabularForm, { ...props });
+        case "group":
+            return _jsx(GroupForm, { ...props });
+        default:
+            return null;
+    }
+}

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

@@ -0,0 +1,67 @@
+import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from "react";
+import { type MarkdownTool } from "../../Helpers/MarkdownEditing.ts";
+import type { TextRules, ValidateOn } from "../../Interfaces/InputInterfaces.ts";
+/** `write`: the text only. `split`: the text and its preview side by side (stacked when narrow). `preview`: the formatted text only. */
+export type MarkdownEditorMode = "write" | "split" | "preview";
+/** A toolbar button, or `"|"` for a divider between groups. */
+export type MarkdownToolbarItem = MarkdownTool | "|";
+/** The default toolbar: text marks, then inserts, then lists, then blocks. */
+export declare const MARKDOWN_TOOLBAR: readonly MarkdownToolbarItem[];
+type NativeTextAreaProps = Omit<ComponentPropsWithRef<"textarea">, "children" | "rows" | keyof TextRules>;
+export interface MarkdownEditorProps extends NativeTextAreaProps, TextRules {
+    label?: ReactNode;
+    /** Help text under the editor. */
+    hint?: ReactNode;
+    /** An error from outside, such as a server message. Shown before the field's own message. */
+    error?: string | null;
+    /** The view it opens in. Default `write`. */
+    defaultMode?: MarkdownEditorMode;
+    /** The view, when the page controls it; use with `onModeChange`. */
+    mode?: MarkdownEditorMode;
+    onModeChange?: (mode: MarkdownEditorMode) => void;
+    /** The views to switch between, in order. Default all three; a single view hides the switch. */
+    modes?: readonly MarkdownEditorMode[];
+    /** Toolbar buttons in order, `"|"` for a divider. Default `MARKDOWN_TOOLBAR`; `[]` hides them. Shortcuts work for the tools listed. */
+    toolbar?: readonly MarkdownToolbarItem[];
+    /** Height of the text and preview, in pixels. Default 280. A double-click on the handle goes back to it. */
+    height?: number;
+    /** Smallest height the handle allows. Default 120. */
+    minHeight?: number;
+    /** Largest height the handle allows. Default 960. */
+    maxHeight?: number;
+    /** The handle under the editor that drags its height. Default true. */
+    resizable?: boolean;
+    /** Remembers the height the user picks, in local storage under `nx-md-height:<heightKey>`. */
+    heightKey?: string;
+    /** A button that opens the editor over the whole window. Default true. */
+    fullscreen?: boolean;
+    /** Every line break inside a paragraph shows as a line break, as in GitHub comments. Default true. */
+    breaks?: boolean;
+    /** Writes in a monospace font, so tables and code line up. Default false. */
+    monospace?: boolean;
+    /** Word and character counts in the status bar. Default true. */
+    showCount?: boolean;
+    /** Shown in the preview while the text is empty. Default "Nothing to preview". */
+    emptyPreview?: ReactNode;
+    /** What a read-only editor says when someone tries to change it. Default "Read-only: this text cannot be changed." */
+    readOnlyMessage?: string;
+    /** Name used in messages. Default: the label, when it is text. */
+    fieldName?: string;
+    /** When the field shows its own message. Default `blur`; submitting a form always shows it. */
+    validateOn?: ValidateOn;
+    /** The new text after each change, typed or from the toolbar. */
+    onValueChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Class of the outer field. `textAreaClassName` goes on the text area. */
+    className?: string;
+    textAreaClassName?: string;
+}
+/**
+ * A Markdown editor: write, split, and preview views, a toolbar with shortcuts, lists that continue on Enter, a pasted
+ * URL that links the selected text, a height handle that drags, steps with the arrow keys, and can remember its height,
+ * and a full-screen view. The text area is uncontrolled by default, so typing re-renders nothing but the preview, and
+ * the preview renders at low priority, so typing stays smooth in long documents. Toolbar edits keep the browser's undo.
+ *
+ * @example <MarkdownEditor name="description" label="Description" defaultMode="split" heightKey="room-description" maxLength={5000} />
+ */
+export declare function MarkdownEditor(props: MarkdownEditorProps): import("react").JSX.Element;
+export {};