@igne-agency/react-web-ui 0.2.1 → 0.3.1

package/dist/components/fieldset/field-group.js

@@ -0,0 +1,102 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { Fieldset } from "./fieldset.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/fieldset/field-group.tsx
+/**
+* Related fields side by side under one legend, with one error for all of
+* them: the lines of its `members`, each tied to its field's control, then its
+* own `errors`. Every field's label, control, description and error line up
+* with its neighbours'. The `--field-group-columns` knob sets the columns.
+*
+* @example
+* <FieldGroup legend="Address" optionalLabel="optional" members={members}>
+* 	<TextField label="Postal code" … />
+* 	<TextField label="House number" … />
+* </FieldGroup>
+*/
+var FieldGroup = (t0) => {
+	const $ = c(27);
+	const { legend, description, errors, requiredness, optionalLabel, members, formatError, className, children } = t0;
+	const id = useId();
+	const descriptionId = `${id}description`;
+	const errorId = `${id}error`;
+	let t1;
+	if ($[0] !== description || $[1] !== descriptionId || $[2] !== errorId || $[3] !== errors) {
+		t1 = [description === void 0 ? "" : descriptionId, normalizeFieldErrors(errors).length === 0 ? "" : errorId].filter(_temp).join(" ") || void 0;
+		$[0] = description;
+		$[1] = descriptionId;
+		$[2] = errorId;
+		$[3] = errors;
+		$[4] = t1;
+	} else t1 = $[4];
+	const describedBy = t1;
+	let t2;
+	if ($[5] !== legend || $[6] !== optionalLabel || $[7] !== requiredness) {
+		t2 = /* @__PURE__ */ jsx(Fieldset.Legend, {
+			requiredness,
+			optionalLabel,
+			children: legend
+		});
+		$[5] = legend;
+		$[6] = optionalLabel;
+		$[7] = requiredness;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== description || $[10] !== descriptionId) {
+		t3 = /* @__PURE__ */ jsx(Fieldset.Description, {
+			id: descriptionId,
+			children: description
+		});
+		$[9] = description;
+		$[10] = descriptionId;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== children) {
+		t4 = /* @__PURE__ */ jsx(Fieldset.Fields, { children });
+		$[12] = children;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== errorId) {
+		t5 = /* @__PURE__ */ jsx(Fieldset.Error, { id: errorId });
+		$[14] = errorId;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== className || $[17] !== describedBy || $[18] !== errors || $[19] !== formatError || $[20] !== members || $[21] !== requiredness || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fieldset.Root, {
+			errors,
+			requiredness,
+			members,
+			formatError,
+			"aria-describedby": describedBy,
+			className,
+			children: [
+				t2,
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[16] = className;
+		$[17] = describedBy;
+		$[18] = errors;
+		$[19] = formatError;
+		$[20] = members;
+		$[21] = requiredness;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
+	return t6;
+};
+function _temp(part) {
+	return part !== "";
+}
+export { FieldGroup };

package/dist/components/fieldset/fieldset-root.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+import { type FieldLabelProps, type FieldProps, type FieldRootProps } from "../field/field.tsx";
+/** A field whose errors a fieldset collects, by the name of the TanStack Form field it renders in. */
+export type FieldsetMember = Readonly<{
+    name: string;
+    /** Errors in any shape `normalizeFieldErrors` accepts. */
+    errors: unknown;
+}>;
+/** The field a collected line belongs to, as `formatError` receives it. */
+export type FieldsetMemberField = Readonly<{
+    name: string;
+    /** The field's label, once the field has told the group. */
+    label: string | undefined;
+}>;
+/** Turns one of a member's messages into the line the group shows for it. */
+export type FieldsetErrorFormat = (field: FieldsetMemberField, message: string) => ReactNode;
+/** One line of a fieldset's error. */
+export type FieldsetLine = Readonly<{
+    id: string;
+    /** The member the line belongs to, or `undefined` for a line about the group. */
+    name: string | undefined;
+    content: ReactNode;
+}>;
+/** What a fieldset's root hands its parts. */
+export type FieldsetContextValue = Readonly<{
+    /** The members' lines in member order, then the group's own. */
+    lines: readonly FieldsetLine[];
+}>;
+/**
+ * The lines of the surrounding fieldset's error.
+ *
+ * @example
+ * const { lines } = useFieldsetContext();
+ */
+export declare const useFieldsetContext: () => FieldsetContextValue;
+/** What the root of a fieldset takes, for a group of choices or a group of fields. */
+export type FieldsetRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    /** A choice is made. */
+    filled?: boolean;
+    readOnly?: boolean;
+    /** The fields whose errors the group shows in its own error instead of under each field. */
+    members?: readonly FieldsetMember[];
+    /** Turns a member's message into its line. Left out, the line is the message. */
+    formatError?: FieldsetErrorFormat;
+}>;
+/**
+ * A field rendered as a fieldset, named by its legend: a group of choices, or a
+ * group of fields that shows the errors of its `members` in one place.
+ *
+ * @example
+ * <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
+ */
+export declare const FieldsetRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, members, formatError, children, ...props }: FieldsetRootProps) => ReactNode;
+/**
+ * The legend that names a {@link FieldsetRoot}.
+ *
+ * @example
+ * <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+ */
+export declare const FieldsetLegend: (props: FieldLabelProps) => ReactNode;

package/dist/components/fieldset/fieldset-root.js

@@ -0,0 +1,285 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Field } from "../field/field.js";
+import { FieldGroupContext } from "../field/field-group-context.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldState } from "../field/use-field-state.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+// src/components/fieldset/fieldset-root.tsx
+var FieldsetContext = createContext(null);
+/**
+* The lines of the surrounding fieldset's error.
+*
+* @example
+* const { lines } = useFieldsetContext();
+*/
+var useFieldsetContext = () => {
+	return useRequiredContext(FieldsetContext, "Fieldset parts must be rendered within <Fieldset.Root>.");
+};
+/**
+* A copy of `record` without `key`.
+*
+* @example
+* withoutKey({ street: "Street", city: "City" }, "city"); // { street: "Street" }
+*/
+var withoutKey = (record, key) => Object.fromEntries(Object.entries(record).filter(([name]) => name !== key));
+/**
+* A field rendered as a fieldset, named by its legend: a group of choices, or a
+* group of fields that shows the errors of its `members` in one place.
+*
+* @example
+* <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
+*/
+var FieldsetRoot = (t0) => {
+	const $ = c(64);
+	let children;
+	let dirty;
+	let disabled;
+	let errors;
+	let filled;
+	let formatError;
+	let members;
+	let pending;
+	let props;
+	let readOnly;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, members, formatError, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = dirty;
+		$[3] = disabled;
+		$[4] = errors;
+		$[5] = filled;
+		$[6] = formatError;
+		$[7] = members;
+		$[8] = pending;
+		$[9] = props;
+		$[10] = readOnly;
+		$[11] = requiredness;
+		$[12] = touched;
+	} else {
+		children = $[1];
+		dirty = $[2];
+		disabled = $[3];
+		errors = $[4];
+		filled = $[5];
+		formatError = $[6];
+		members = $[7];
+		pending = $[8];
+		props = $[9];
+		readOnly = $[10];
+		requiredness = $[11];
+		touched = $[12];
+	}
+	const id = useId();
+	const parentGroup = useContext(FieldGroupContext);
+	let t1;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {};
+		$[13] = t1;
+	} else t1 = $[13];
+	const [labels, setLabels] = useState(t1);
+	let t2;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (name, label) => {
+			setLabels((current) => ({
+				...current,
+				[name]: label
+			}));
+			return () => {
+				setLabels((current_0) => withoutKey(current_0, name));
+			};
+		};
+		$[14] = t2;
+	} else t2 = $[14];
+	const registerLabel = t2;
+	let t3;
+	if ($[15] !== members) {
+		t3 = members ?? [];
+		$[15] = members;
+		$[16] = t3;
+	} else t3 = $[16];
+	let group;
+	let lines;
+	let t4;
+	let t5;
+	if ($[17] !== errors || $[18] !== formatError || $[19] !== id || $[20] !== labels || $[21] !== members || $[22] !== parentGroup || $[23] !== t3) {
+		let t6;
+		if ($[28] !== formatError || $[29] !== id || $[30] !== labels) {
+			t6 = (member, memberIndex) => normalizeFieldErrors(member.errors).map((message, lineIndex) => ({
+				id: `${id}member${memberIndex}line${lineIndex}`,
+				name: member.name,
+				content: formatError === void 0 ? message : formatError({
+					name: member.name,
+					label: labels[member.name]
+				}, message)
+			}));
+			$[28] = formatError;
+			$[29] = id;
+			$[30] = labels;
+			$[31] = t6;
+		} else t6 = $[31];
+		const memberLines = t3.flatMap(t6);
+		const groupMessages = normalizeFieldErrors(errors);
+		let t7;
+		if ($[32] !== id) {
+			t7 = (message_0, lineIndex_0) => ({
+				id: `${id}line${lineIndex_0}`,
+				name: void 0,
+				content: message_0
+			});
+			$[32] = id;
+			$[33] = t7;
+		} else t7 = $[33];
+		lines = [...memberLines, ...groupMessages.map(t7)];
+		group = members === void 0 ? parentGroup : {
+			lineIds: (name_0) => members.some((member_0) => member_0.name === name_0) ? memberLines.filter((line) => line.name === name_0).map(_temp) : void 0,
+			registerLabel
+		};
+		t5 = useFieldState;
+		let t8;
+		if ($[34] !== members) {
+			t8 = members ?? [];
+			$[34] = members;
+			$[35] = t8;
+		} else t8 = $[35];
+		t4 = [...groupMessages, ...t8.flatMap(_temp2)];
+		$[17] = errors;
+		$[18] = formatError;
+		$[19] = id;
+		$[20] = labels;
+		$[21] = members;
+		$[22] = parentGroup;
+		$[23] = t3;
+		$[24] = group;
+		$[25] = lines;
+		$[26] = t4;
+		$[27] = t5;
+	} else {
+		group = $[24];
+		lines = $[25];
+		t4 = $[26];
+		t5 = $[27];
+	}
+	let t6;
+	if ($[36] !== dirty || $[37] !== disabled || $[38] !== filled || $[39] !== pending || $[40] !== readOnly || $[41] !== requiredness || $[42] !== t4 || $[43] !== touched) {
+		t6 = {
+			errors: t4,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled
+		};
+		$[36] = dirty;
+		$[37] = disabled;
+		$[38] = filled;
+		$[39] = pending;
+		$[40] = readOnly;
+		$[41] = requiredness;
+		$[42] = t4;
+		$[43] = touched;
+		$[44] = t6;
+	} else t6 = $[44];
+	const field = t5(t6);
+	let t7;
+	if ($[45] !== lines) {
+		t7 = { lines };
+		$[45] = lines;
+		$[46] = t7;
+	} else t7 = $[46];
+	let t8;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Fieldset.Root, {});
+		$[47] = t8;
+	} else t8 = $[47];
+	const t9 = field.disabled;
+	const t10 = field.invalid;
+	let t11;
+	if ($[48] !== field.state) {
+		t11 = fieldStateAttributes(field.state);
+		$[48] = field.state;
+		$[49] = t11;
+	} else t11 = $[49];
+	let t12;
+	if ($[50] !== children || $[51] !== dirty || $[52] !== field.disabled || $[53] !== field.invalid || $[54] !== props || $[55] !== t11 || $[56] !== touched) {
+		t12 = /* @__PURE__ */ jsx(Field.Root, {
+			render: t8,
+			disabled: t9,
+			invalid: t10,
+			dirty,
+			touched,
+			...t11,
+			...props,
+			children
+		});
+		$[50] = children;
+		$[51] = dirty;
+		$[52] = field.disabled;
+		$[53] = field.invalid;
+		$[54] = props;
+		$[55] = t11;
+		$[56] = touched;
+		$[57] = t12;
+	} else t12 = $[57];
+	let t13;
+	if ($[58] !== group || $[59] !== t12) {
+		t13 = /* @__PURE__ */ jsx(FieldGroupContext, {
+			value: group,
+			children: t12
+		});
+		$[58] = group;
+		$[59] = t12;
+		$[60] = t13;
+	} else t13 = $[60];
+	let t14;
+	if ($[61] !== t13 || $[62] !== t7) {
+		t14 = /* @__PURE__ */ jsx(FieldsetContext, {
+			value: t7,
+			children: t13
+		});
+		$[61] = t13;
+		$[62] = t7;
+		$[63] = t14;
+	} else t14 = $[63];
+	return t14;
+};
+/**
+* The legend that names a {@link FieldsetRoot}.
+*
+* @example
+* <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+*/
+var FieldsetLegend = (props) => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Fieldset.Legend, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			nativeLabel: false,
+			render: t0,
+			...props
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+function _temp(line_0) {
+	return line_0.id;
+}
+function _temp2(member_1) {
+	return normalizeFieldErrors(member_1.errors);
+}
+export { FieldsetLegend, FieldsetRoot, useFieldsetContext };

package/dist/components/fieldset/fieldset.css

@@ -0,0 +1,22 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._description_xocet_3 {
+    color: var(--fieldset-description-fg, var(--sys-color-text-muted));
+    font: var(--fieldset-description-font, var(--sys-font-body-medium));
+  }
+  ._fields_xocet_7 {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-template-rows: [label] auto [control] auto [extra] auto [description] auto [error] auto;
+    grid-template-columns: var(--field-group-columns, none);
+    column-gap: var(--field-group-gap, var(--sys-unit-8));
+  }
+  ._fields_xocet_7 > [data-field-group-member] {
+    display: grid;
+    grid-row: 1/-1;
+    grid-template-rows: subgrid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: 0;
+  }
+}

package/dist/components/fieldset/fieldset.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps, ReactNode } from "react";
+import { FieldsetLegend, FieldsetRoot } from "./fieldset-root.tsx";
+export type FieldsetDescriptionProps = ComponentProps<"p">;
+declare const FieldsetDescription: ({ children, className, ...props }: FieldsetDescriptionProps) => ReactNode;
+export type FieldsetFieldsProps = ComponentProps<"div">;
+declare const FieldsetFields: ({ className, ...props }: FieldsetFieldsProps) => ReactNode;
+export type FieldsetErrorProps = Readonly<{
+    id?: string;
+    className?: string;
+}>;
+declare const FieldsetError: ({ id, className, }: FieldsetErrorProps) => ReactNode;
+/** The parts of a fieldset. */
+export type FieldsetParts = Readonly<{
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Description: typeof FieldsetDescription;
+    Fields: typeof FieldsetFields;
+    Error: typeof FieldsetError;
+}>;
+/**
+ * A group of related fields named by one legend, with one error for all of
+ * them. `Fields` lays the fields side by side on one grid, so every field's
+ * label, control, description and error share a row with its neighbours'.
+ * `Error` is the group's only live region: it shows the lines of the `members`
+ * the root collects, each tied to its field's control, then the group's own
+ * `errors`. For the ordinary case, use `FieldGroup`.
+ *
+ * @example
+ * <Fieldset.Root members={members} aria-describedby={descriptionId}>
+ * 	<Fieldset.Legend optionalLabel="optional">Address</Fieldset.Legend>
+ * 	<Fieldset.Description id={descriptionId}>We send the invoice here.</Fieldset.Description>
+ * 	<Fieldset.Fields>…</Fieldset.Fields>
+ * 	<Fieldset.Error />
+ * </Fieldset.Root>
+ */
+export declare const Fieldset: FieldsetParts;
+export {};

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,127 @@
+import { ErrorText } from "../error-text/error-text.js";
+import { FieldRowContext } from "../field/field-group-context.js";
+import { FieldsetLegend, FieldsetRoot, useFieldsetContext } from "./fieldset-root.js";
+import fieldset_module_default from "./fieldset.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/fieldset/fieldset.tsx
+var FieldsetDescription = (t0) => {
+	const $ = c(8);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = children === void 0 || children === null || children === false || children === "" ? null : /* @__PURE__ */ jsx("p", {
+			className: clsx(fieldset_module_default.description, className),
+			...props,
+			children
+		});
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+var FieldsetFields = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(fieldset_module_default.fields, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(FieldRowContext, {
+			value: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: t1,
+				...props
+			})
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var FieldsetError = (t0) => {
+	const $ = c(6);
+	const { id, className } = t0;
+	const { lines } = useFieldsetContext();
+	let t1;
+	if ($[0] !== lines) {
+		t1 = lines.map(_temp);
+		$[0] = lines;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== className || $[3] !== id || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ErrorText, {
+			role: "alert",
+			id,
+			className,
+			children: t1
+		});
+		$[2] = className;
+		$[3] = id;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* A group of related fields named by one legend, with one error for all of
+* them. `Fields` lays the fields side by side on one grid, so every field's
+* label, control, description and error share a row with its neighbours'.
+* `Error` is the group's only live region: it shows the lines of the `members`
+* the root collects, each tied to its field's control, then the group's own
+* `errors`. For the ordinary case, use `FieldGroup`.
+*
+* @example
+* <Fieldset.Root members={members} aria-describedby={descriptionId}>
+* 	<Fieldset.Legend optionalLabel="optional">Address</Fieldset.Legend>
+* 	<Fieldset.Description id={descriptionId}>We send the invoice here.</Fieldset.Description>
+* 	<Fieldset.Fields>…</Fieldset.Fields>
+* 	<Fieldset.Error />
+* </Fieldset.Root>
+*/
+var Fieldset = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Description: FieldsetDescription,
+	Fields: FieldsetFields,
+	Error: FieldsetError
+};
+function _temp(line) {
+	return /* @__PURE__ */ jsx("span", {
+		id: line.id,
+		children: line.content
+	}, line.id);
+}
+export { Fieldset };

package/dist/components/fieldset/fieldset.module.js

@@ -0,0 +1,8 @@
+import './fieldset.css';// src/components/fieldset/fieldset.module.scss
+var description = "_description_xocet_3";
+var fields = "_fields_xocet_7";
+var fieldset_module_default = {
+	description,
+	fields
+};
+export { fieldset_module_default as default, description, fields };

package/dist/components/fieldset/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./field-group.tsx";
+export * from "./fieldset.tsx";
+export type { FieldsetErrorFormat, FieldsetLine, FieldsetMember, FieldsetMemberField, FieldsetRootProps, } from "./fieldset-root.tsx";
+export * from "./tsf-field-group.tsx";

package/dist/components/fieldset/index.js

@@ -0,0 +1,4 @@
+import { FieldGroup } from "./field-group.js";
+import { Fieldset } from "./fieldset.js";
+import { TSFFieldGroup } from "./tsf-field-group.js";
+export { FieldGroup, Fieldset, TSFFieldGroup };

package/dist/components/fieldset/tsf-field-group.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type FieldGroupProps } from "./field-group.tsx";
+export type TSFFieldGroupProps = Omit<FieldGroupProps, "members"> & Readonly<{
+    /** The fields whose errors the group shows, by name, in the order it shows them. A field it does not name keeps its own error. */
+    names: readonly string[];
+}>;
+/**
+ * `FieldGroup` bound to the TanStack Form it renders in: it shows the errors
+ * of the fields it `names`. Registered as `form.FieldGroup`.
+ *
+ * @example
+ * <form.FieldGroup legend="Address" optionalLabel="optional" names={["postalCode", "houseNumber"]}>
+ * 	<form.AppField name="postalCode">
+ * 		{field => <field.TextField label="Postal code" optionalLabel="optional" />}
+ * 	</form.AppField>
+ * 	<form.AppField name="houseNumber">
+ * 		{field => <field.TextField label="House number" optionalLabel="optional" />}
+ * 	</form.AppField>
+ * </form.FieldGroup>
+ */
+export declare const TSFFieldGroup: ({ names, ...props }: TSFFieldGroupProps) => ReactNode;