@jwcarman/roux-web 0.0.0-stage → 0.1.0

package/dist/form/errors.d.ts

@@ -0,0 +1,8 @@
+import type { Problem } from "../problem/problem";
+/**
+ * The messages to show for a field's errors. Validators return strings, or objects with a
+ * `message` (as schema validators do), or lists of either; empty entries and repeats are dropped.
+ */
+export declare function errorMessages(errors: readonly unknown[]): string[];
+/** A problem's field errors, the first message for each field, for `showServerErrors`. */
+export declare function fieldErrorsOf(problem: Problem): Record<string, string>;

package/dist/form/errors.js

@@ -0,0 +1,17 @@
+function e(e) {
+	let t = [], n = (e) => {
+		if (Array.isArray(e)) e.forEach(n);
+		else if (typeof e == "string") t.push(e);
+		else if (typeof e == "object" && e) {
+			let n = e.message;
+			t.push(typeof n == "string" ? n : "Invalid value");
+		}
+	};
+	return e.forEach(n), [...new Set(t.filter((e) => e.trim() !== ""))];
+}
+function t(e) {
+	let t = {};
+	for (let { field: n, message: r } of e.errors ?? []) t[n] ??= r;
+	return t;
+}
+export { e as errorMessages, t as fieldErrorsOf };

package/dist/form/fields/CheckboxField.d.ts

@@ -0,0 +1,4 @@
+import { type FormFieldProps } from "./FormField";
+export type CheckboxFieldProps = Omit<FormFieldProps, "children" | "controlLabelled">;
+/** A checkbox for a boolean field, named by its own label. */
+export declare function CheckboxField({ label, helperText, required }: CheckboxFieldProps): import("react").JSX.Element;

package/dist/form/fields/CheckboxField.js

@@ -0,0 +1,25 @@
+import { useFieldContext as e } from "../formContext.js";
+import { FormField as t } from "./FormField.js";
+import { Checkbox as n } from "@chakra-ui/react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/form/fields/CheckboxField.tsx
+function a({ label: a, helperText: o, required: s }) {
+	let c = e();
+	return /* @__PURE__ */ r(t, {
+		label: a,
+		helperText: o,
+		required: s,
+		controlLabelled: !0,
+		children: /* @__PURE__ */ i(n.Root, {
+			name: c.name,
+			checked: c.state.value,
+			onCheckedChange: ({ checked: e }) => c.handleChange(e === !0),
+			children: [
+				/* @__PURE__ */ r(n.HiddenInput, { onBlur: c.handleBlur }),
+				/* @__PURE__ */ r(n.Control, {}),
+				/* @__PURE__ */ r(n.Label, { children: a })
+			]
+		})
+	});
+}
+export { a as CheckboxField };

package/dist/form/fields/FormField.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface FormFieldProps {
+    label: ReactNode;
+    /** A hint under the field, replaced by its errors when it has any. */
+    helperText?: ReactNode;
+    required?: boolean;
+    /**
+     * The control names itself with `label` (a radio group's own group label), so the frame shows no
+     * `<label>` of its own.
+     */
+    controlLabelled?: boolean;
+    children: ReactNode;
+}
+/**
+ * A field's frame: its label, its control (the children, wired by Chakra's Field to the label and
+ * the messages, so screen readers announce them), and its errors. Errors show once the field has
+ * been left or the form submitted, never while a first entry is still being typed, and a server's
+ * error for the field shows at once (TanStack Form clears it when the field changes).
+ */
+export declare function FormField({ label, helperText, required, controlLabelled, children }: FormFieldProps): import("react").JSX.Element;

package/dist/form/fields/FormField.js

@@ -0,0 +1,24 @@
+import { errorMessages as e } from "../errors.js";
+import { useFieldContext as t } from "../formContext.js";
+import { Box as n, Field as r } from "@chakra-ui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useStore as o } from "@tanstack/react-form";
+// src/form/fields/FormField.tsx
+function s({ label: s, helperText: c, required: l, controlLabelled: u = !1, children: d }) {
+	let f = t(), p = o(f.form.store, (e) => e.submissionAttempts > 0), m = f.state.meta, h = m.isBlurred || p || m.errorMap.onServer ? e(m.errors) : [];
+	return /* @__PURE__ */ a(r.Root, {
+		invalid: h.length > 0,
+		required: l,
+		children: [
+			!u && /* @__PURE__ */ a(r.Label, { children: [s, l && /* @__PURE__ */ i(r.RequiredIndicator, {})] }),
+			d,
+			/* @__PURE__ */ i(n, {
+				display: "flex",
+				flexDirection: "column",
+				minH: "4",
+				children: h.length > 0 ? /* @__PURE__ */ i(r.ErrorText, { children: h.join(" ") }) : c && /* @__PURE__ */ i(r.HelperText, { children: c })
+			})
+		]
+	});
+}
+export { s as FormField };

package/dist/form/fields/InputField.d.ts

@@ -0,0 +1,5 @@
+import { type InputProps } from "@chakra-ui/react";
+import { type FormFieldProps } from "./FormField";
+export type InputFieldProps = Omit<InputProps, "value" | "onChange" | "onBlur" | "name" | "required"> & Omit<FormFieldProps, "children">;
+/** A text input (or email, password, search: any `type`) for a string field. */
+export declare function InputField({ label, helperText, required, ...props }: InputFieldProps): import("react").JSX.Element;

package/dist/form/fields/InputField.js

@@ -0,0 +1,21 @@
+import { useFieldContext as e } from "../formContext.js";
+import { FormField as t } from "./FormField.js";
+import { Input as n } from "@chakra-ui/react";
+import { jsx as r } from "react/jsx-runtime";
+// src/form/fields/InputField.tsx
+function i({ label: i, helperText: a, required: o, ...s }) {
+	let c = e();
+	return /* @__PURE__ */ r(t, {
+		label: i,
+		helperText: a,
+		required: o,
+		children: /* @__PURE__ */ r(n, {
+			name: c.name,
+			value: c.state.value,
+			onChange: (e) => c.handleChange(e.target.value),
+			onBlur: c.handleBlur,
+			...s
+		})
+	});
+}
+export { i as InputField };

package/dist/form/fields/NumberField.d.ts

@@ -0,0 +1,10 @@
+import { type FormFieldProps } from "./FormField";
+export type NumberFieldProps = Omit<FormFieldProps, "children"> & {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+/** What the input shows for the field's value: nothing for `undefined`. */
+export declare function numberTextOf(value: number | undefined): string;
+/** A number input; an empty or unreadable entry is `undefined`, never NaN. */
+export declare function NumberField({ label, helperText, required, min, max, step }: NumberFieldProps): import("react").JSX.Element;

package/dist/form/fields/NumberField.js

@@ -0,0 +1,26 @@
+import { useFieldContext as e } from "../formContext.js";
+import { FormField as t } from "./FormField.js";
+import { NumberInput as n } from "@chakra-ui/react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/form/fields/NumberField.tsx
+function a(e) {
+	return e === void 0 ? "" : String(e);
+}
+function o({ label: o, helperText: s, required: c, min: l, max: u, step: d }) {
+	let f = e();
+	return /* @__PURE__ */ r(t, {
+		label: o,
+		helperText: s,
+		required: c,
+		children: /* @__PURE__ */ i(n.Root, {
+			name: f.name,
+			value: a(f.state.value),
+			onValueChange: ({ valueAsNumber: e }) => f.handleChange(Number.isFinite(e) ? e : void 0),
+			min: l,
+			max: u,
+			step: d,
+			children: [/* @__PURE__ */ r(n.Control, {}), /* @__PURE__ */ r(n.Input, { onBlur: f.handleBlur })]
+		})
+	});
+}
+export { o as NumberField, a as numberTextOf };

package/dist/form/fields/RadioGroupField.d.ts

@@ -0,0 +1,8 @@
+import { type FormFieldProps } from "./FormField";
+import type { Option } from "./SelectField";
+export type RadioGroupFieldProps = Omit<FormFieldProps, "children"> & {
+    options: readonly Option[];
+    orientation?: "horizontal" | "vertical";
+};
+/** One choice of `options` for a string field, as radio buttons. */
+export declare function RadioGroupField({ label, helperText, required, options, orientation, }: RadioGroupFieldProps): import("react").JSX.Element;

package/dist/form/fields/RadioGroupField.js

@@ -0,0 +1,33 @@
+import { useFieldContext as e } from "../formContext.js";
+import { FormField as t } from "./FormField.js";
+import { RadioGroup as n, Stack as r } from "@chakra-ui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+// src/form/fields/RadioGroupField.tsx
+function o({ label: o, helperText: s, required: c, options: l, orientation: u = "vertical" }) {
+	let d = e();
+	return /* @__PURE__ */ i(t, {
+		label: o,
+		helperText: s,
+		required: c,
+		controlLabelled: !0,
+		children: /* @__PURE__ */ a(n.Root, {
+			name: d.name,
+			value: d.state.value,
+			onValueChange: ({ value: e }) => d.handleChange(e),
+			onBlur: d.handleBlur,
+			children: [/* @__PURE__ */ i(n.Label, { children: o }), /* @__PURE__ */ i(r, {
+				direction: u === "vertical" ? "column" : "row",
+				gap: "3",
+				children: l.map((e) => /* @__PURE__ */ a(n.Item, {
+					value: e.value,
+					children: [
+						/* @__PURE__ */ i(n.ItemHiddenInput, {}),
+						/* @__PURE__ */ i(n.ItemIndicator, {}),
+						/* @__PURE__ */ i(n.ItemText, { children: e.label })
+					]
+				}, e.value))
+			})]
+		})
+	});
+}
+export { o as RadioGroupField };

package/dist/form/fields/SelectField.d.ts

@@ -0,0 +1,12 @@
+import { type FormFieldProps } from "./FormField";
+export interface Option {
+    value: string;
+    label: string;
+}
+export type SelectFieldProps = Omit<FormFieldProps, "children"> & {
+    options: readonly Option[];
+    /** Shown while nothing is chosen; the field's value is then "". */
+    placeholder?: string;
+};
+/** A drop-down of `options` for a string field (the browser's own select: accessible everywhere). */
+export declare function SelectField({ label, helperText, required, options, placeholder }: SelectFieldProps): import("react").JSX.Element;

package/dist/form/fields/SelectField.js

@@ -0,0 +1,25 @@
+import { useFieldContext as e } from "../formContext.js";
+import { FormField as t } from "./FormField.js";
+import { NativeSelect as n } from "@chakra-ui/react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/form/fields/SelectField.tsx
+function a({ label: a, helperText: o, required: s, options: c, placeholder: l }) {
+	let u = e();
+	return /* @__PURE__ */ r(t, {
+		label: a,
+		helperText: o,
+		required: s,
+		children: /* @__PURE__ */ i(n.Root, { children: [/* @__PURE__ */ r(n.Field, {
+			name: u.name,
+			value: u.state.value,
+			onChange: (e) => u.handleChange(e.target.value),
+			onBlur: u.handleBlur,
+			placeholder: l,
+			children: c.map((e) => /* @__PURE__ */ r("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		}), /* @__PURE__ */ r(n.Indicator, {})] })
+	});
+}
+export { a as SelectField };

package/dist/form/fields/TextAreaField.d.ts

@@ -0,0 +1,5 @@
+import { type TextareaProps } from "@chakra-ui/react";
+import { type FormFieldProps } from "./FormField";
+export type TextAreaFieldProps = Omit<TextareaProps, "value" | "onChange" | "onBlur" | "name" | "required"> & Omit<FormFieldProps, "children">;
+/** A multi-line text input for a string field. */
+export declare function TextAreaField({ label, helperText, required, ...props }: TextAreaFieldProps): import("react").JSX.Element;

package/dist/form/fields/TextAreaField.js

@@ -0,0 +1,21 @@
+import { useFieldContext as e } from "../formContext.js";
+import { FormField as t } from "./FormField.js";
+import { Textarea as n } from "@chakra-ui/react";
+import { jsx as r } from "react/jsx-runtime";
+// src/form/fields/TextAreaField.tsx
+function i({ label: i, helperText: a, required: o, ...s }) {
+	let c = e();
+	return /* @__PURE__ */ r(t, {
+		label: i,
+		helperText: a,
+		required: o,
+		children: /* @__PURE__ */ r(n, {
+			name: c.name,
+			value: c.state.value,
+			onChange: (e) => c.handleChange(e.target.value),
+			onBlur: c.handleBlur,
+			...s
+		})
+	});
+}
+export { i as TextAreaField };

package/dist/form/fields/formComponents.d.ts

@@ -0,0 +1,18 @@
+import { type ButtonProps } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+/**
+ * The `<form>`, submitting through the form once: a submit button inside it (or Enter in a field)
+ * submits, and nothing else calls `handleSubmit`. The browser's own validation is off; the form's
+ * validators speak for it, in the app's words.
+ */
+export declare function Form({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Submits the form; busy and disabled while it submits, so a second click sends nothing. */
+export declare function SubmitButton({ children, ...props }: Omit<ButtonProps, "type" | "onClick">): import("react").JSX.Element;
+/** Puts every field back to its default value. */
+export declare function ResetButton({ children, ...props }: Omit<ButtonProps, "type" | "onClick">): import("react").JSX.Element;
+/** "Saving…" (or `children`), announced, while the form submits. */
+export declare function SubmittingIndicator({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/form/fields/formComponents.js

@@ -0,0 +1,50 @@
+import { useFormContext as e } from "../formContext.js";
+import { Button as t, HStack as n, Spinner as r, Text as i } from "@chakra-ui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useStore as s } from "@tanstack/react-form";
+// src/form/fields/formComponents.tsx
+function c({ children: t }) {
+	let n = e();
+	return /* @__PURE__ */ a("form", {
+		noValidate: !0,
+		onSubmit: (e) => {
+			e.preventDefault(), e.stopPropagation(), n.validateAllFields("submit").then(() => n.handleSubmit());
+		},
+		children: t
+	});
+}
+function l({ children: n, ...r }) {
+	let i = e(), o = s(i.store, (e) => e.isSubmitting);
+	return /* @__PURE__ */ a(t, {
+		type: "submit",
+		loading: o,
+		loadingText: n,
+		disabled: o,
+		alignSelf: "start",
+		...r,
+		children: n
+	});
+}
+function u({ children: n = "Reset", ...r }) {
+	let i = e();
+	return /* @__PURE__ */ a(t, {
+		type: "button",
+		variant: "outline",
+		onClick: () => i.reset(),
+		...r,
+		children: n
+	});
+}
+function d({ children: t = "Saving…" }) {
+	let c = e();
+	return s(c.store, (e) => e.isSubmitting) ? /* @__PURE__ */ o(n, {
+		role: "status",
+		gap: "2",
+		color: "fg.muted",
+		children: [/* @__PURE__ */ a(r, { size: "sm" }), /* @__PURE__ */ a(i, {
+			fontSize: "sm",
+			children: t
+		})]
+	}) : null;
+}
+export { c as Form, u as ResetButton, l as SubmitButton, d as SubmittingIndicator };

package/dist/form/form.d.ts

@@ -0,0 +1,73 @@
+import { type AnyFormApi } from "@tanstack/react-form";
+import { CheckboxField } from "./fields/CheckboxField";
+import { Form, ResetButton, SubmitButton, SubmittingIndicator } from "./fields/formComponents";
+import { InputField } from "./fields/InputField";
+import { NumberField } from "./fields/NumberField";
+import { RadioGroupField } from "./fields/RadioGroupField";
+import { SelectField } from "./fields/SelectField";
+import { TextAreaField } from "./fields/TextAreaField";
+/**
+ * The app's forms: TanStack Form with Chakra fields.
+ *
+ *   const form = useAppForm({ defaultValues: { name: "" }, onSubmit: async ({ value }) => ... });
+ *   <form.AppForm>
+ *     <form.Form>
+ *       <form.AppField name="name" validators={{ onBlur: ({ value }) => (value.trim() ? undefined : "Enter a name") }}>
+ *         {(field) => <field.InputField label="Name" required />}
+ *       </form.AppField>
+ *       <form.SubmitButton>Save</form.SubmitButton>
+ *     </form.Form>
+ *   </form.AppForm>
+ */
+export declare const useAppForm: <TFormData, TOnMount extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnChange extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: import("@tanstack/form-core").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+    readonly CheckboxField: typeof CheckboxField;
+    readonly InputField: typeof InputField;
+    readonly NumberField: typeof NumberField;
+    readonly TextAreaField: typeof TextAreaField;
+    readonly SelectField: typeof SelectField;
+    readonly RadioGroupField: typeof RadioGroupField;
+}, {
+    readonly Form: typeof Form;
+    readonly SubmitButton: typeof SubmitButton;
+    readonly ResetButton: typeof ResetButton;
+    readonly SubmittingIndicator: typeof SubmittingIndicator;
+}>, withForm: <TFormData, TOnMount extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnChange extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | import("@tanstack/form-core").FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends object = {}>({ render, props, }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+    readonly CheckboxField: typeof CheckboxField;
+    readonly InputField: typeof InputField;
+    readonly NumberField: typeof NumberField;
+    readonly TextAreaField: typeof TextAreaField;
+    readonly SelectField: typeof SelectField;
+    readonly RadioGroupField: typeof RadioGroupField;
+}, {
+    readonly Form: typeof Form;
+    readonly SubmitButton: typeof SubmitButton;
+    readonly ResetButton: typeof ResetButton;
+    readonly SubmittingIndicator: typeof SubmittingIndicator;
+}, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
+        readonly CheckboxField: typeof CheckboxField;
+        readonly InputField: typeof InputField;
+        readonly NumberField: typeof NumberField;
+        readonly TextAreaField: typeof TextAreaField;
+        readonly SelectField: typeof SelectField;
+        readonly RadioGroupField: typeof RadioGroupField;
+    }, {
+        readonly Form: typeof Form;
+        readonly SubmitButton: typeof SubmitButton;
+        readonly ResetButton: typeof ResetButton;
+        readonly SubmittingIndicator: typeof SubmittingIndicator;
+    }>;
+}>>;
+/**
+ * Shows the server's messages from a 400 under their fields (see `fieldErrorsOf`); each clears
+ * when its field is edited. Returns the messages for fields the form does not have, to show
+ * elsewhere.
+ */
+export declare function showServerErrors(form: AnyFormApi, fields: Record<string, string>): string[];
+/**
+ * Tells the user why the server refused a form: each field error goes under its field (a server
+ * field can be named to a form field with `fieldNames`, such as `{ rule: "days" }`), messages with
+ * no field to go under are toasted under `fallback`, and a refusal without field errors toasts the
+ * server's reason, or `fallback` when it gave none.
+ */
+export declare function showProblem(form: AnyFormApi, response: Response, fallback: string, fieldNames?: Record<string, string>): Promise<void>;

package/dist/form/form.js

@@ -0,0 +1,54 @@
+import { CheckboxField as e } from "./fields/CheckboxField.js";
+import { Form as t, ResetButton as n, SubmitButton as r, SubmittingIndicator as i } from "./fields/formComponents.js";
+import { InputField as a } from "./fields/InputField.js";
+import { NumberField as o } from "./fields/NumberField.js";
+import { RadioGroupField as s } from "./fields/RadioGroupField.js";
+import { SelectField as c } from "./fields/SelectField.js";
+import { TextAreaField as l } from "./fields/TextAreaField.js";
+import { fieldContext as u, formContext as d } from "./formContext.js";
+import { fieldErrorsOf as f } from "./errors.js";
+import { notify as p } from "../feedback/notify.js";
+import { problemOf as m } from "../problem/problem.js";
+import { createFormHook as h } from "@tanstack/react-form";
+// src/form/form.tsx
+var { useAppForm: g, withForm: _ } = h({
+	fieldContext: u,
+	formContext: d,
+	fieldComponents: {
+		CheckboxField: e,
+		InputField: a,
+		NumberField: o,
+		TextAreaField: l,
+		SelectField: c,
+		RadioGroupField: s
+	},
+	formComponents: {
+		Form: t,
+		SubmitButton: r,
+		ResetButton: n,
+		SubmittingIndicator: i
+	}
+});
+function v(e, t) {
+	let n = [];
+	for (let [r, i] of Object.entries(t)) r in e.fieldInfo ? e.setFieldMeta(r, (e) => ({
+		...e,
+		errorMap: {
+			...e.errorMap,
+			onServer: i
+		}
+	})) : n.push(i);
+	return n;
+}
+async function y(e, t, n, r = {}) {
+	let i = await m(t);
+	if (i.errors === void 0) {
+		p.problem(i, n);
+		return;
+	}
+	let a = {};
+	for (let [e, t] of Object.entries(f(i))) a[r[e] ?? e] = t;
+	let o = v(e, a);
+	o.length > 0 && p.error(n, o.join(" "));
+}
+export { y as showProblem, v as showServerErrors, g as useAppForm, _ as withForm };

package/dist/form/formContext.d.ts

@@ -0,0 +1,2 @@
+/** The contexts the field and form components read; see form.tsx. */
+export declare const fieldContext: import("react").Context<import("@tanstack/form-core").AnyFieldApi>, useFieldContext: <TData>() => import("@tanstack/form-core").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, formContext: import("react").Context<import("@tanstack/form-core").AnyFormApi>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;

package/dist/form/formContext.js

@@ -0,0 +1,4 @@
+import { createFormHookContexts as e } from "@tanstack/react-form";
+// src/form/formContext.ts
+var { fieldContext: t, useFieldContext: n, formContext: r, useFormContext: i } = e();
+export { t as fieldContext, r as formContext, n as useFieldContext, i as useFormContext };

package/dist/form/index.d.ts

@@ -0,0 +1,13 @@
+export { errorMessages, fieldErrorsOf } from "./errors";
+export { showProblem, showServerErrors, useAppForm, withForm } from "./form";
+export { fieldContext, formContext, useFieldContext, useFormContext } from "./formContext";
+export { FormDialog, type FormDialogProps } from "./FormDialog";
+export { dateTimeInputOf, inputOf, instantOrNull, numberInputOf, numberOrNull, textOrNull } from "./values";
+export { CheckboxField, type CheckboxFieldProps } from "./fields/CheckboxField";
+export { Form, ResetButton, SubmitButton, SubmittingIndicator } from "./fields/formComponents";
+export { FormField, type FormFieldProps } from "./fields/FormField";
+export { InputField, type InputFieldProps } from "./fields/InputField";
+export { NumberField, type NumberFieldProps } from "./fields/NumberField";
+export { RadioGroupField, type RadioGroupFieldProps } from "./fields/RadioGroupField";
+export { SelectField, type Option, type SelectFieldProps } from "./fields/SelectField";
+export { TextAreaField, type TextAreaFieldProps } from "./fields/TextAreaField";

package/dist/form/index.js

@@ -0,0 +1,14 @@
+import { errorMessages as e, fieldErrorsOf as t } from "./errors.js";
+import { showProblem as n, showServerErrors as r, useAppForm as i, withForm as a } from "./form.js";
+import { fieldContext as o, formContext as s, useFieldContext as c, useFormContext as l } from "./formContext.js";
+import { FormDialog as u } from "./FormDialog.js";
+import { dateTimeInputOf as d, inputOf as f, instantOrNull as p, numberInputOf as m, numberOrNull as h, textOrNull as g } from "./values.js";
+import { CheckboxField as _ } from "./fields/CheckboxField.js";
+import { Form as v, ResetButton as y, SubmitButton as b, SubmittingIndicator as x } from "./fields/formComponents.js";
+import { FormField as S } from "./fields/FormField.js";
+import { InputField as C } from "./fields/InputField.js";
+import { NumberField as w } from "./fields/NumberField.js";
+import { RadioGroupField as T } from "./fields/RadioGroupField.js";
+import { SelectField as E } from "./fields/SelectField.js";
+import { TextAreaField as D } from "./fields/TextAreaField.js";
+export { _ as CheckboxField, v as Form, u as FormDialog, S as FormField, C as InputField, w as NumberField, T as RadioGroupField, y as ResetButton, E as SelectField, b as SubmitButton, x as SubmittingIndicator, D as TextAreaField, d as dateTimeInputOf, e as errorMessages, o as fieldContext, t as fieldErrorsOf, s as formContext, f as inputOf, p as instantOrNull, m as numberInputOf, h as numberOrNull, n as showProblem, r as showServerErrors, g as textOrNull, i as useAppForm, c as useFieldContext, l as useFormContext, a as withForm };

package/dist/form/values.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Form values to and from a record's. Inputs hold strings (and NumberField `number | undefined`);
+ * the API takes `null` for an empty optional field, never `""`.
+ */
+/** Trimmed text, or null when blank. */
+export declare function textOrNull(value: string): string | null;
+/** A number input's value, or null when empty. */
+export declare function numberOrNull(value: number | undefined): number | null;
+/** A record's number as a number input's value. */
+export declare function numberInputOf(value: number | null): number | undefined;
+/** A record's text as an input's value. */
+export declare function inputOf(value: string | null): string;
+/** An ISO instant as a `datetime-local` input's value, in the browser's time zone. */
+export declare function dateTimeInputOf(iso: string | null): string;
+/**
+ * A `datetime-local` input's value (the browser's time zone) as an ISO instant, or null. The input
+ * shows minutes only, so an input that still shows `original` gives `original` back whole: saving a
+ * form must not drop the seconds of an instant nobody changed.
+ */
+export declare function instantOrNull(local: string, original?: string | null): string | null;

package/dist/form/values.js

@@ -0,0 +1,24 @@
+// src/form/values.ts
+function e(e) {
+	let t = e.trim();
+	return t === "" ? null : t;
+}
+function t(e) {
+	return e ?? null;
+}
+function n(e) {
+	return e ?? void 0;
+}
+function r(e) {
+	return e ?? "";
+}
+var i = (e) => String(e).padStart(2, "0");
+function a(e) {
+	if (e === null) return "";
+	let t = new Date(e);
+	return `${t.getFullYear()}-${i(t.getMonth() + 1)}-${i(t.getDate())}T${i(t.getHours())}:${i(t.getMinutes())}`;
+}
+function o(e, t = null) {
+	return e === a(t) ? t : e === "" ? null : new Date(e).toISOString();
+}
+export { a as dateTimeInputOf, r as inputOf, o as instantOrNull, n as numberInputOf, t as numberOrNull, e as textOrNull };

package/dist/paging/index.d.ts

@@ -0,0 +1 @@
+export { enumSearchOf, fetchAllPages, MAX_PAGE_SIZE, MAX_PAGES, nextPageIndex, pageParamsOf, pageQuery, rowRange, searchTermOf, tableSearchOf, type PageDto, type PageParams, type PaginationDto, type SortDirection, type TableSearch, } from "./paging";

package/dist/paging/index.js

@@ -0,0 +1 @@
+export { MAX_PAGES, MAX_PAGE_SIZE, enumSearchOf, fetchAllPages, nextPageIndex, pageParamsOf, pageQuery, rowRange, searchTermOf, tableSearchOf } from "./paging.js";