nexus-shared 1.1.21 → 3.0.0

package/dist/Components/Forms/CrudParts.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import type { FormValues } from "../../Interfaces/FormInterfaces.ts";
+import type { TableColumn } from "../../Interfaces/TableInterfaces.ts";
+export interface CrudDetailsProps<TRow extends FormValues = FormValues> {
+    /** The record as the list has it, shown at once. */
+    row: TRow;
+    /** The fields, as the table's columns describe them; hidden columns included. */
+    columns: readonly TableColumn<TRow>[];
+    /** Loads the full record (fields the list leaves out); its values replace the row's when they come. */
+    load?: (signal: AbortSignal) => Promise<Partial<TRow> | null | undefined>;
+    /** Draws the details instead of the list of fields. */
+    render?: (row: TRow) => ReactNode;
+}
+/** A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. */
+export declare function CrudDetails<TRow extends FormValues = FormValues>({ row, columns, load, render }: CrudDetailsProps<TRow>): import("react").JSX.Element;

package/dist/Components/Forms/CrudParts.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconInfoCircle, iconLoader2, InlineIcon } from "nexus-icons";
+import { useEffect, useMemo, useState } from "react";
+import { isAbortError } from "../../Helpers/ApiResponses.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { TableCellValue } from "../Viewers/DataTableParts.js";
+/** A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. */
+export function CrudDetails({ row, columns, load, render }) {
+    const [record, setRecord] = useState(row);
+    const [state, setState] = useState(load ? "loading" : "done");
+    const preferences = useDatePreferences();
+    const timeZone = useBrowserTimeZone();
+    const options = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined }), [preferences, timeZone]);
+    useEffect(() => {
+        if (!load)
+            return;
+        const controller = new AbortController();
+        load(controller.signal).then(full => {
+            if (controller.signal.aborted)
+                return;
+            if (full)
+                setRecord(current => ({ ...current, ...full }));
+            setState("done");
+        }, error => {
+            if (controller.signal.aborted || isAbortError(error))
+                return;
+            setState("failed");
+        });
+        return () => controller.abort();
+        // The record loads once per popup.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsxs("div", { className: "nx-crud-details", "aria-busy": state === "loading" || undefined, children: [state === "loading" && (_jsxs("p", { className: "nx-crud-details__note", role: "status", children: [_jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }), "Loading the full record\u2026"] })), state === "failed" && (_jsxs("p", { className: "nx-crud-details__note", role: "status", children: [_jsx(InlineIcon, { icon: iconInfoCircle }), "The full record could not be loaded; these are the values from the list."] })), render ? (render(record)) : (_jsx("dl", { className: "nx-crud-details__list", children: columns.map(column => (_jsxs("div", { className: cx("nx-crud-details__item", column.wrap && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: _jsx(TableCellValue, { column: column, row: record, options: options }) })] }, column.key))) }))] }));
+}

package/dist/Components/Forms/ExcelImport.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import type { ExcelEndpoints, ExcelImportAnswer } from "../../Interfaces/ExcelInterfaces.ts";
+import { type ExcelCallOptions } from "../../Services/ExcelApi.ts";
+import { type PopupHandle } from "../Layouts/PopupHost.tsx";
+/** What an import panel needs. */
+export interface ExcelImportProps {
+    /** The model's spreadsheet endpoints: `excelEndpoints(CITIES)`, or the app's own four. */
+    endpoints: ExcelEndpoints;
+    /** What one row is: "city". Default: what the settings say. */
+    subject?: string;
+    /** Path values the calls need, such as a parent id. */
+    params?: ExcelCallOptions["params"];
+    /** After an import wrote something, to reload the list behind the panel. */
+    onImported?: (answer: ExcelImportAnswer) => void;
+    /** The Close button, and what it does. Without it, none shows (a popup has its own). */
+    onClose?: () => void;
+    /** No template download is offered, for a model whose file comes from somewhere else. */
+    templateDownload?: false;
+    /** The tallest each editor grows before its rows scroll. Default 320. */
+    maxHeight?: number;
+    className?: string;
+}
+/**
+ * The three steps of an import in one panel: the template, the file, and the review.
+ *
+ * @example
+ * <ExcelImport endpoints={CITY_SHEET} subject="city" onImported={() => table.reload()} />
+ */
+export declare function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight, className }: ExcelImportProps): import("react").JSX.Element;
+/** Options of the import popup: the panel's, plus what the window looks like. */
+export interface OpenExcelImportOptions extends Omit<ExcelImportProps, "onClose"> {
+    /** The window's title. Default: "Import <subjects> from a spreadsheet". */
+    title?: ReactNode;
+    /** One popup per key. Default: the import endpoint's path, so one model opens one. */
+    popupKey?: string;
+}
+/**
+ * Opens the import panel as a window. This is the one line a data table's Import entry needs.
+ *
+ * @example onImport={() => openExcelImport({ endpoints: CITY_SHEET, subject: "city", onImported: reload })}
+ */
+export declare function openExcelImport({ title, popupKey, ...props }: OpenExcelImportOptions): PopupHandle;

package/dist/Components/Forms/ExcelImport.js

@@ -0,0 +1,190 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlertTriangle, iconChevronDown, iconCircleCheck, iconCopy, iconDownload, iconFileImport, iconTable, iconUpload, InlineIcon } from "nexus-icons";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { EXCEL_FILE_ACCEPT, excelColumnInputs, excelCount, excelEditorRows, excelPlural, excelProblemPlace, excelProblems, excelRowsOfKind, excelSheetRows, excelText, excelWritableRows, isExcelRowEdited, } from "../../Helpers/ExcelHelpers.js";
+import { ExcelRowKind } from "../../Interfaces/ExcelInterfaces.js";
+import { downloadExcelTemplate, excelSettings, importExcelRows, verifyExcelFile } from "../../Services/ExcelApi.js";
+import { toast } from "../Layouts/Toaster.js";
+import { openPopup } from "../Layouts/PopupHost.js";
+import { Button } from "../Documents/Button.js";
+import { TabularForm } from "../Inputs/TabularForm.js";
+const DEFAULT_MAX_HEIGHT = 320;
+/**
+ * The three steps of an import in one panel: the template, the file, and the review.
+ *
+ * @example
+ * <ExcelImport endpoints={CITY_SHEET} subject="city" onImported={() => table.reload()} />
+ */
+export function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight = DEFAULT_MAX_HEIGHT, className }) {
+    const id = useId();
+    const fileRef = useRef(null);
+    const newRef = useRef(null);
+    const sameRef = useRef(null);
+    const [settings, setSettings] = useState(null);
+    const [file, setFile] = useState(null);
+    const [verify, setVerify] = useState(null);
+    const [imported, setImported] = useState(null);
+    const [failure, setFailure] = useState(null);
+    const [busy, setBusy] = useState("settings");
+    /** Bumped on every answer: the editors take their rows again instead of being told to change them. */
+    const [generation, setGeneration] = useState(0);
+    // A page may well write its endpoints and its params as literals, which are a new object every render. What they
+    // say is what matters, so the settings are asked for again only when that changes.
+    const sheetKey = `${String(endpoints.settings.module)}|${endpoints.settings.path}|${JSON.stringify(params ?? null)}`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const callOptions = useMemo(() => ({ params }), [sheetKey]);
+    useEffect(() => {
+        let left = false;
+        void (async () => {
+            const answer = await excelSettings(endpoints, callOptions);
+            if (left)
+                return;
+            if (answer.ok && answer.result)
+                setSettings(answer.result);
+            setBusy(null);
+        })();
+        return () => {
+            left = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sheetKey]);
+    const subject = given ?? verify?.subject ?? settings?.subject ?? "row";
+    const columns = verify?.columns ?? settings?.columns ?? [];
+    const inputs = useMemo(() => excelColumnInputs(columns), [columns]);
+    const fresh = useMemo(() => (verify ? excelWritableRows(verify.rows) : []), [verify]);
+    const same = useMemo(() => (verify ? excelRowsOfKind(verify.rows, ExcelRowKind.Duplicate) : []), [verify]);
+    const freshRows = useMemo(() => excelEditorRows(fresh, columns), [fresh, columns]);
+    const sameRows = useMemo(() => excelEditorRows(same, columns), [same, columns]);
+    function reset() {
+        setFile(null);
+        setVerify(null);
+        setImported(null);
+        setFailure(null);
+        setGeneration(value => value + 1);
+        if (fileRef.current)
+            fileRef.current.value = "";
+    }
+    async function onTemplate() {
+        setBusy("template");
+        await downloadExcelTemplate(endpoints, callOptions);
+        setBusy(null);
+    }
+    async function onPicked(picked) {
+        if (!picked)
+            return;
+        setFile(picked);
+        setVerify(null);
+        setImported(null);
+        setFailure(null);
+        setBusy("checking");
+        const answer = await verifyExcelFile(endpoints, picked, callOptions);
+        setBusy(null);
+        // Clearing the input is what lets the same file be picked again after a fix in the spreadsheet.
+        if (fileRef.current)
+            fileRef.current.value = "";
+        if (!answer.ok || !answer.result) {
+            setFailure(answer.message ?? excelText("verifyFailed"));
+            return;
+        }
+        setVerify(answer.result);
+        setGeneration(value => value + 1);
+    }
+    async function onImport() {
+        if (!verify)
+            return;
+        const newValues = newRef.current?.getValue() ?? freshRows;
+        const sameValues = sameRef.current?.getValue() ?? sameRows;
+        // A duplicate is never updated, so one the person left alone is not sent at all; one they edited is a new record.
+        const edited = sameValues.filter(row => isExcelRowEdited(row, columns));
+        if (newValues.length && newRef.current && !newRef.current.validate())
+            return;
+        if (edited.length && sameRef.current && !sameRef.current.validate())
+            return;
+        const rows = excelSheetRows([...newValues, ...edited], columns);
+        if (!rows.length) {
+            setFailure(excelText("importNothing"));
+            return;
+        }
+        setBusy("importing");
+        const answer = await importExcelRows(endpoints, rows, callOptions);
+        setBusy(null);
+        if (!answer.ok) {
+            setFailure(answer.message ?? excelText("importedNone"));
+            if (answer.result)
+                setImported(answer.result);
+            return;
+        }
+        const written = answer.result;
+        if (!written)
+            return;
+        setFailure(null);
+        setImported(written);
+        toast.success(`${excelCount(written.created, subject)} imported`, { message: written.note });
+        // What was written is gone from the file's point of view: only what was refused stays to be fixed and sent again,
+        // and the counts are what those rows are now - not what the verify said about a file that has been half written.
+        const left = written.refused ?? [];
+        setVerify(current => current
+            ? {
+                ...current,
+                rows: left,
+                read: left.length,
+                new: left.filter(row => row.kind === ExcelRowKind.New).length,
+                duplicates: left.filter(row => row.kind === ExcelRowKind.Duplicate).length,
+                invalid: left.filter(row => row.kind === ExcelRowKind.Invalid).length,
+                isReady: false,
+            }
+            : current);
+        setGeneration(value => value + 1);
+        onImported?.(written);
+    }
+    /** A problem names a cell: clicking it brings that row into view and puts the caret in it. */
+    const goTo = (editor, list) => (problem) => {
+        const index = list.findIndex(row => row.number === problem.row);
+        if (index >= 0)
+            editor.current?.focusRow(index, problem.field);
+    };
+    const checking = busy === "checking";
+    const importing = busy === "importing";
+    const canImport = Boolean(verify) && !busy && (fresh.length > 0 || same.length > 0);
+    return (_jsxs("section", { className: cx("nx-excel", className), "aria-label": `Import ${excelPlural(subject)} from a spreadsheet`, "data-nx-excel": "", children: [_jsxs("ol", { className: "nx-excel__steps", children: [_jsxs("li", { children: ["Download the template", templateDownload === false ? "" : " below", ": every list in it is a dropdown, and the ids beside a choice fill themselves."] }), _jsxs("li", { children: ["Fill in one row per ", subject, ". Leave the locked columns alone."] }), _jsx("li", { children: "Send it here to be checked. Nothing is written until you import." })] }), _jsxs("div", { className: "nx-excel__pick", children: [templateDownload !== false && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconDownload }), loading: busy === "template", onClick: onTemplate, children: excelText("template") })), _jsx("input", { ref: fileRef, id: `${id}-file`, className: "nx-visually-hidden", type: "file", accept: EXCEL_FILE_ACCEPT, onChange: event => void onPicked(event.currentTarget.files?.[0]) }), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconFileImport }), loading: checking, onClick: () => fileRef.current?.click(), children: file ? excelText("change") : excelText("choose") }), _jsx("p", { className: "nx-excel__file", "data-nx-excel-file": "", children: checking ? (_jsxs(_Fragment, { children: [excelText("checking"), " ", _jsx("strong", { children: file?.name }), String.fromCharCode(8230)] })) : file ? (_jsx("strong", { children: file.name })) : (_jsx("span", { className: "nx-excel__muted", children: excelText("nothingPicked") })) }), settings && (_jsxs("p", { className: "nx-excel__limits", children: [excelCount(settings.maxImportRows, "row"), " at most per file"] }))] }), failure && (_jsxs("p", { className: "nx-excel__failure", role: "alert", "data-nx-excel-failure": "", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: failure })] })), imported && _jsx(ImportedReport, { answer: imported, subject: subject }), verify && (_jsxs("div", { className: "nx-excel__review", "data-nx-excel-review": "", children: [!imported && _jsx("p", { className: "nx-excel__note", children: verify.note }), _jsx(ReviewSection, { id: `${id}-new`, title: excelText("newRows"), tone: verify.invalid > 0 ? "warning" : "neutral", count: fresh.length, hint: verify.invalid > 0 ? `${excelCount(verify.invalid, "row")} to fix before anything is written.` : undefined, rows: fresh, onGo: goTo(newRef, fresh), open: true, children: _jsx(TabularForm, { ref: newRef, "aria-label": excelText("newRows"), inputs: inputs, itemLabel: subject, defaultValue: freshRows, addable: false, sortable: false, maxHeight: maxHeight, size: "sm" }, `new-${generation}`) }), _jsx(ReviewSection, { id: `${id}-same`, title: excelText("duplicates"), tone: "muted", count: same.length, hint: excelText("duplicateHint"), rows: same, onGo: goTo(sameRef, same), children: _jsx(TabularForm, { ref: sameRef, "aria-label": excelText("duplicates"), inputs: inputs, itemLabel: subject, defaultValue: sameRows, addable: false, removable: false, sortable: false, maxHeight: maxHeight, size: "sm" }, `same-${generation}`) })] })), _jsxs("footer", { className: "nx-excel__actions", children: [verify && (fresh.length > 0 || same.length > 0) && (_jsxs("p", { className: "nx-excel__sending", "data-nx-excel-sending": "", children: [fresh.length > 0 ? `${excelCount(fresh.length, subject)} to send.` : "Nothing to send yet.", same.length > 0 ? ` Edit ${same.length === 1 ? `the one ${subject}` : `one of the ${excelCount(same.length, subject)}`} already there to send it too.` : ""] })), _jsxs("div", { className: "nx-excel__buttons", children: [file && !busy && (_jsx(Button, { variant: "ghost", onClick: reset, children: excelText("startOver") })), onClose && (_jsx(Button, { variant: "secondary", onClick: onClose, children: excelText("close") })), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconUpload }), loading: importing, disabled: !canImport, onClick: () => void onImport(), children: excelText("importLabel") })] })] })] }));
+}
+/**
+ * One half of the review: a line that says what these rows are and how many, and the editor under it. Collapsible,
+ * because a person with twenty duplicates and three new rows is looking at the three.
+ */
+function ReviewSection({ id, title, count, tone, hint, rows, onGo, open: openByDefault = false, children }) {
+    const [open, setOpen] = useState(openByDefault);
+    const problems = useMemo(() => excelProblems(rows), [rows]);
+    const duplicates = useMemo(() => rows.filter(row => row.duplicate), [rows]);
+    if (count === 0)
+        return null;
+    return (_jsxs("section", { className: "nx-excel__section", "data-open": open || undefined, "data-tone": tone, "data-nx-excel-section": title, children: [_jsx("h3", { className: "nx-excel__section-head", children: _jsxs("button", { type: "button", className: "nx-excel__toggle", "aria-expanded": open, "aria-controls": open ? id : undefined, onClick: () => setOpen(!open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-excel__chevron", "aria-hidden": "true" }), _jsx("span", { className: "nx-excel__title", children: title }), _jsx("span", { className: "nx-excel__tag", children: count.toLocaleString("en-US") }), hint && _jsx("span", { className: "nx-excel__hint", children: hint })] }) }), open && (_jsxs("div", { className: "nx-excel__section-body", id: id, children: [children, problems.length > 0 && _jsx(ProblemList, { problems: problems, onGo: onGo }), duplicates.length > 0 && (_jsxs("div", { className: "nx-excel__problems nx-excel__problems--same", "data-nx-excel-duplicates": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconCopy, "aria-hidden": "true" }), _jsx("span", { children: excelText("whyDuplicate") })] }), _jsx("ul", { children: duplicates.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate })] }, row.number))) })] }))] }))] }));
+}
+/** What the server found wrong, each naming the cell the person reads, and taking them to it. */
+function ProblemList({ problems, onGo }) {
+    return (_jsxs("div", { className: "nx-excel__problems", "data-nx-excel-problems": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: excelText("toFix") })] }), _jsx("ul", { children: problems.map(problem => (_jsxs("li", { children: [onGo ? (_jsx("button", { type: "button", className: "nx-excel__place nx-excel__go", onClick: () => onGo(problem), children: excelProblemPlace(problem) })) : (_jsx("span", { className: "nx-excel__place", children: excelProblemPlace(problem) })), _jsx("span", { children: problem.message })] }, `${problem.row}:${problem.column}:${problem.message}`))) })] }));
+}
+/** What the import did, in the backend's own words, and what it did not write. */
+function ImportedReport({ answer, subject }) {
+    const wrote = answer.created > 0;
+    return (_jsxs("div", { className: cx("nx-excel__result", wrote ? "nx-excel__result--ok" : "nx-excel__result--none"), role: "status", "data-nx-excel-result": "", children: [_jsxs("p", { className: "nx-excel__result-head", children: [_jsx(InlineIcon, { icon: wrote ? iconCircleCheck : iconAlertTriangle, "aria-hidden": "true" }), _jsx("strong", { children: wrote ? `${excelCount(answer.created, subject)} added` : excelText("importedNone") })] }), _jsx("p", { className: "nx-excel__result-note", children: answer.note }), (answer.refused?.length ?? 0) > 0 && (_jsx("ul", { className: "nx-excel__refused", children: answer.refused?.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate ?? row.problems?.[0]?.message ?? excelText("refused") })] }, row.number))) }))] }));
+}
+/**
+ * Opens the import panel as a window. This is the one line a data table's Import entry needs.
+ *
+ * @example onImport={() => openExcelImport({ endpoints: CITY_SHEET, subject: "city", onImported: reload })}
+ */
+export function openExcelImport({ title, popupKey, ...props }) {
+    const subject = props.subject ?? "row";
+    return openPopup({
+        key: popupKey ?? `nx-excel:${String(props.endpoints.import.module)}:${props.endpoints.import.path}`,
+        title: title ?? `Import ${excelPlural(subject)} from a spreadsheet`,
+        icon: _jsx(InlineIcon, { icon: iconTable }),
+        size: "xl",
+        closeOnBackdrop: false,
+        // No Close of its own: the window's title bar already has one, and two ways out of one panel is one too many.
+        content: _jsx(ExcelImport, { ...props }),
+    });
+}

package/dist/Components/Forms/Form.d.ts

@@ -0,0 +1,52 @@
+import { FormStore, type AnyFormStore, type FormStatus } from "../../Helpers/FormStore.ts";
+import type { DatePreferences } from "../../Interfaces/DateInterfaces.ts";
+import type { FormProps, FormValues, InputParams } from "../../Interfaces/FormInterfaces.ts";
+/**
+ * A form store for the page to hold: pass it to a form as `form`, then read, watch, set, and submit through it.
+ *
+ * @example
+ * const form = useForm<Employee>();
+ * const country = useFormValue<string>(form, "country");
+ * <SubmitForm form={form} inputs={inputs} onSubmit={save} />
+ */
+export declare function useForm<TValues extends FormValues = FormValues>(): FormStore<TValues>;
+/** One value of a form; the component renders again only when it changes. */
+export declare function useFormValue<T = unknown>(form: AnyFormStore, name: string): T;
+/** Every value of a form; the component renders again on every change, so keep it to small forms or summaries. */
+export declare function useFormValues<TValues extends FormValues>(form: FormStore<TValues>): TValues;
+/** What the form's frame shows: changed, submitting, problems, the form's message, drafts. */
+export declare function useFormStatus(form: AnyFormStore): FormStatus;
+/** The form's own store, or the one given. */
+export declare function useFormStore<TValues extends FormValues>(given: FormStore<TValues> | undefined): FormStore<TValues>;
+/** An input's name in the form's messages: its `fieldName`, its label when it is text, or its name. */
+export declare function formInputLabel(params: InputParams | undefined, name?: string): string;
+/** The names a list shows: all of them up to one more than `most` ("and 1 more" says less than the name), else the first `most`. */
+export declare function namesToShow<T>(names: readonly T[], most?: number): {
+    shown: readonly T[];
+    more: number;
+};
+/** Names in a sentence: "A", "A and B", "A, B, and C", "A, B, C, and 3 more". */
+export declare function listInSentence(names: readonly string[], most?: number): string;
+/** A moment in the user's time format, with the date in their calendar when it was not today. */
+export declare function formatFormTime(ms: number, preferences: DatePreferences): string;
+/**
+ * Renders a list of input params on a 12-column grid (`span` in each input's params), with the values in a store outside
+ * React, so a form of any size types as fast as one input. The same params describe every input, so a CRUD page or a
+ * server can build a form from plain objects; a tabular or group input is one entry that holds rows.
+ *
+ * On its own it suits filters and settings that save as they change (`onValueChange`). `SubmitForm` adds checks on
+ * submit and the buttons; `ApiForm` sends the values to a server. Inside a plain `<form>`, each input sends its value
+ * under its name, and the form's own rule blocks the submit while it fails.
+ *
+ * @example
+ * <Form
+ *   inputs={[
+ *     { type: "text", name: "fullName", label: "Full name", required: true, span: 6 },
+ *     { type: "email", name: "email", label: "Email", span: 6 },
+ *     { type: "dropdown", name: "role", label: "Role", options: roles, span: 4 },
+ *   ]}
+ *   defaultValue={employee}
+ *   onValueChange={values => saveFilters(values)}
+ * />
+ */
+export declare function Form<TValues extends FormValues = FormValues>(props: FormProps<TValues>): import("react").JSX.Element;