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

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

@@ -0,0 +1,58 @@
+import { useFormContext } from "../../lib/forms/context.js";
+import { getFieldErrors } from "../../lib/forms/errors.js";
+import { FieldGroup } from "./field-group.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@tanstack/react-form";
+// src/components/fieldset/tsf-field-group.tsx
+/**
+* `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>
+*/
+var TSFFieldGroup = (t0) => {
+	const $ = c(8);
+	let names;
+	let props;
+	if ($[0] !== t0) {
+		({names, ...props} = t0);
+		$[0] = t0;
+		$[1] = names;
+		$[2] = props;
+	} else {
+		names = $[1];
+		props = $[2];
+	}
+	const form = useFormContext();
+	let t1;
+	if ($[3] !== names) {
+		t1 = (state) => names.map((name) => ({
+			name,
+			errors: getFieldErrors(state, [name])
+		}));
+		$[3] = names;
+		$[4] = t1;
+	} else t1 = $[4];
+	const members = useStore(form.store, t1);
+	let t2;
+	if ($[5] !== members || $[6] !== props) {
+		t2 = /* @__PURE__ */ jsx(FieldGroup, {
+			...props,
+			members
+		});
+		$[5] = members;
+		$[6] = props;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+export { TSFFieldGroup };

package/dist/components/file-field/tsf-file-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFFileField = (props) => {
 	const $ = c(11);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (files) => field.handleChange(files);

package/dist/components/number-field/tsf-number-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFNumberField = (props) => {
 	const $ = c(5);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
 		t0 = /* @__PURE__ */ jsx(NumberField, {

package/dist/components/otp-field/tsf-otp-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFOtpField = (props) => {
 	const $ = c(5);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
 		t0 = /* @__PURE__ */ jsx(OtpField, {

package/dist/components/password-field/tsf-password-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFPasswordField = (props) => {
 	const $ = c(5);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
 		t0 = /* @__PURE__ */ jsx(PasswordField, {

package/dist/components/photo-field/tsf-photo-field.js

@@ -26,7 +26,7 @@ var TSFPhotoField = (t0) => {
 		onValueChange = $[1];
 		props = $[2];
 	}
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t1;
 	if ($[3] !== field || $[4] !== onValueChange) {
 		t1 = (file) => {

package/dist/components/radio-group-field/radio-group.d.ts

@@ -3,7 +3,7 @@ import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import type { ReactNode } from "react";
 import { Field } from "../field/index.ts";
-import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldset/fieldset-root.tsx";
 export type RadioGroupRootProps = FieldsetRootProps;
 declare const RadioGroupGroup: <TValue>({ className, ...props }: BaseRadioGroup.Props<TValue>) => ReactNode;
 declare const RadioGroupItem: ({ className, ...props }: BaseField.Item.Props) => ReactNode;

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

@@ -1,7 +1,7 @@
 import { Field as Field$1 } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus } from "../field/use-field-focus.js";
-import { FieldsetLegend, FieldsetRoot } from "../field/fieldset.js";
+import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
 import radio_group_module_default from "./radio-group.module.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/components/radio-group-field/tsf-radio-group-field.js

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFRadioGroupField = (props) => {
 	const $ = c(7);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (next) => field.handleChange(next);

package/dist/components/segmented-control-field/segmented-control.d.ts

@@ -2,7 +2,7 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import type { ReactNode } from "react";
 import { Field, type ChoiceOption } from "../field/index.ts";
-import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldset/fieldset-root.tsx";
 export type SegmentedControlRootProps = FieldsetRootProps;
 export type SegmentedControlGroupProps = Omit<BaseToggleGroup.Props, "multiple"> & Readonly<{
     /** Read-only groups still read, but no longer answer a press. */

package/dist/components/segmented-control-field/segmented-control.js

@@ -1,7 +1,7 @@
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus } from "../field/use-field-focus.js";
-import { FieldsetLegend, FieldsetRoot } from "../field/fieldset.js";
+import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
 import { useFormDisabled } from "../form/form-context.js";
 import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
 import segmented_control_module_default from "./segmented-control.module.js";

package/dist/components/segmented-control-field/tsf-segmented-control-field.js

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFSegmentedControlField = (props) => {
 	const $ = c(7);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (value) => field.handleChange(value);

package/dist/components/select-field/tsf-select-field.js

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFSelectField = (props) => {
 	const $ = c(7);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (next) => field.handleChange(next);

package/dist/components/switch-field/tsf-switch-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFSwitchField = (props) => {
 	const $ = c(7);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (checked) => field.handleChange(checked);

package/dist/components/text-field/connect-text-preset.js

@@ -12,7 +12,7 @@ import { jsx } from "react/jsx-runtime";
 var connectTextPreset = (Preset) => {
 	const Connected = (props) => {
 		const $ = c(5);
-		const { field, props: connected } = useConnectedField();
+		const { field, props: connected } = useConnectedField(props.label);
 		let t0;
 		if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
 			t0 = /* @__PURE__ */ jsx(Preset, {

package/dist/components/text-field/text-field.css

@@ -1,9 +1,9 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1g29w_3 {
+  ._root_1kpis_3 {
     min-inline-size: 0;
   }
-  ._group_1g29w_6 {
+  ._group_1kpis_6 {
     --field-fg: var(--sys-color-text);
     --field-muted-fg: var(--sys-color-text-muted);
     --field-placeholder-fg: var(--sys-color-text-placeholder);
@@ -17,33 +17,33 @@
     color: var(--field-fg);
     font: var(--sys-font-body-medium);
   }
-  ._group_1g29w_6 {
+  ._group_1kpis_6 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._group_1g29w_6[data-focus-visible] {
+  ._group_1kpis_6[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._group_1g29w_6 {
+    ._group_1kpis_6 {
       transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._group_1g29w_6:hover:not([data-disabled], [data-readonly]), ._group_1g29w_6[data-focused], ._group_1g29w_6[data-popup-open] {
+  ._group_1kpis_6:hover:not([data-disabled], [data-readonly]), ._group_1kpis_6[data-focused], ._group_1kpis_6[data-popup-open] {
     border-color: var(--sys-color-primary);
   }
-  ._group_1g29w_6[data-readonly] {
+  ._group_1kpis_6[data-readonly] {
     --field-fg: var(--sys-color-text);
     border-style: dashed;
     border-color: var(--sys-color-outline);
     background: var(--sys-color-surface-high);
     color: var(--field-fg);
   }
-  ._group_1g29w_6[data-pending] {
+  ._group_1kpis_6[data-pending] {
     cursor: progress;
     caret-color: var(--sys-color-text-muted);
   }
-  ._group_1g29w_6[data-invalid] {
+  ._group_1kpis_6[data-invalid] {
     --field-fg: var(--sys-color-error-fg);
     --field-muted-fg: var(--sys-color-error-fg);
     --field-placeholder-fg: var(--sys-color-error-fg);
@@ -51,7 +51,7 @@
     background-color: var(--sys-color-error-bg);
     color: var(--field-fg);
   }
-  ._group_1g29w_6[data-disabled] {
+  ._group_1kpis_6[data-disabled] {
     --field-fg: var(--sys-color-disabled-fg);
     --field-muted-fg: var(--sys-color-disabled-fg);
     --field-placeholder-fg: var(--sys-color-disabled-fg);
@@ -59,16 +59,16 @@
     cursor: not-allowed;
     background: var(--sys-color-disabled-bg);
   }
-  ._group_1g29w_6 {
+  ._group_1kpis_6 {
     position: relative;
     display: flex;
     gap: var(--sys-unit-4);
   }
-  ._group_1g29w_6 {
+  ._group_1kpis_6 {
     inline-size: 100%;
     cursor: text;
   }
-  ._control_1g29w_71 {
+  ._control_1kpis_71 {
     flex: 1;
     min-inline-size: 0;
     border: none;
@@ -77,31 +77,31 @@
     color: inherit;
     font: inherit;
   }
-  ._control_1g29w_71::-webkit-search-cancel-button {
+  ._control_1kpis_71::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._control_1g29w_71::-webkit-search-decoration {
+  ._control_1kpis_71::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._control_1g29w_71 {
+  ._control_1kpis_71 {
     line-height: normal;
   }
-  ._control_1g29w_71::placeholder {
+  ._control_1kpis_71::placeholder {
     color: var(--field-placeholder-fg);
   }
-  ._bar_1g29w_94 {
+  ._bar_1kpis_94 {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--sys-unit-4);
     pointer-events: none;
   }
-  ._bar_1g29w_94:empty {
+  ._bar_1kpis_94:empty {
     display: none;
   }
-  ._inlay_1g29w_104 {
+  ._inlay_1kpis_104 {
     display: inline-flex;
     flex: none;
     align-items: center;
@@ -112,14 +112,14 @@
     pointer-events: none;
     line-height: normal;
   }
-  ._action_1g29w_115 {
+  ._action_1kpis_115 {
     position: relative;
     flex: none;
     margin-block: calc(-1 * var(--sys-unit-6));
     cursor: pointer;
   }
   @media (any-pointer: coarse) {
-    ._action_1g29w_115::before {
+    ._action_1kpis_115::before {
       content: "";
       position: absolute;
       inset: 50%;
@@ -128,7 +128,7 @@
       block-size: var(--sys-unit-22);
     }
   }
-  ._copyStatus_1g29w_131 {
+  ._copyStatus_1kpis_131 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -136,30 +136,31 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._counter_1g29w_139 {
+  ._counter_1kpis_139 {
     --counter-fg: var(
     	--text-field-counter-fg,
     	var(--sys-color-text-muted)
     );
     align-self: flex-end;
+    justify-self: end;
     color: var(--counter-fg);
     font: var(--text-field-counter-font, var(--sys-font-body-small));
     font-variant-numeric: tabular-nums;
     cursor: default;
   }
-  ._counter_1g29w_139[data-tone=warning] {
+  ._counter_1kpis_139[data-tone=warning] {
     --counter-fg: var(
     	--text-field-counter-warning-fg,
     	var(--sys-color-warning-fg)
     );
   }
-  ._counter_1g29w_139[data-tone=error] {
+  ._counter_1kpis_139[data-tone=error] {
     --counter-fg: var(
     	--text-field-counter-error-fg,
     	var(--sys-color-error-fg)
     );
   }
-  ._visuallyHidden_1g29w_162 {
+  ._visuallyHidden_1kpis_163 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);

package/dist/components/text-field/text-field.module.js

@@ -1,13 +1,13 @@
 import './text-field.css';// src/components/text-field/text-field.module.scss
-var root = "_root_1g29w_3";
-var group = "_group_1g29w_6";
-var control = "_control_1g29w_71";
-var bar = "_bar_1g29w_94";
-var inlay = "_inlay_1g29w_104";
-var action = "_action_1g29w_115";
-var copyStatus = "_copyStatus_1g29w_131";
-var counter = "_counter_1g29w_139";
-var visuallyHidden = "_visuallyHidden_1g29w_162";
+var root = "_root_1kpis_3";
+var group = "_group_1kpis_6";
+var control = "_control_1kpis_71";
+var bar = "_bar_1kpis_94";
+var inlay = "_inlay_1kpis_104";
+var action = "_action_1kpis_115";
+var copyStatus = "_copyStatus_1kpis_131";
+var counter = "_counter_1kpis_139";
+var visuallyHidden = "_visuallyHidden_1kpis_163";
 var text_field_module_default = {
 	root,
 	group,

package/dist/components/text-field/tsf-text-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFTextField = (props) => {
 	const $ = c(5);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
 		t0 = /* @__PURE__ */ jsx(TextField, {

package/dist/components/textarea-field/tsf-textarea-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFTextareaField = (props) => {
 	const $ = c(5);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
 		t0 = /* @__PURE__ */ jsx(TextareaField, {

package/dist/components/time-field/tsf-time-field.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFTimeField = (props) => {
 	const $ = c(7);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (next) => field.handleChange(next);

package/dist/components/toggle-group-field/toggle-group.d.ts

@@ -2,7 +2,7 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import type { ReactNode } from "react";
 import { Field } from "../field/index.ts";
-import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldset/fieldset-root.tsx";
 export type ToggleGroupRootProps = FieldsetRootProps;
 export type ToggleGroupGroupProps = Omit<BaseToggleGroup.Props, "multiple"> & Readonly<{
     /** Read-only groups still read, but no longer answer a press. */

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

@@ -1,7 +1,7 @@
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus } from "../field/use-field-focus.js";
-import { FieldsetLegend, FieldsetRoot } from "../field/fieldset.js";
+import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
 import { useFormDisabled } from "../form/form-context.js";
 import toggle_group_module_default from "./toggle-group.module.js";
 import { c } from "react/compiler-runtime";

package/dist/components/toggle-group-field/tsf-toggle-group-field.js

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 */
 var TSFToggleGroupField = (props) => {
 	const $ = c(7);
-	const { field, props: connected } = useConnectedField();
+	const { field, props: connected } = useConnectedField(props.label);
 	let t0;
 	if ($[0] !== field) {
 		t0 = (value) => field.handleChange(value);

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from "./components/error-message/index.ts";
 export * from "./components/error-text/index.ts";
 export * from "./components/field/index.ts";
 export * from "./components/field-placeholder/index.ts";
+export * from "./components/fieldset/index.ts";
 export * from "./components/file-field/index.ts";
 export * from "./components/filter-bar/index.ts";
 export * from "./components/form/index.ts";

package/dist/index.js

@@ -21,6 +21,7 @@ import { Breadcrumbs } from "./components/breadcrumbs/breadcrumbs.js";
 import { getFieldErrors, normalizeFieldErrors } from "./lib/forms/errors.js";
 import { ErrorText } from "./components/error-text/error-text.js";
 import { Spinner } from "./components/spinner/spinner.js";
+import { useFieldContext, useFormContext } from "./lib/forms/context.js";
 import { Field, useFieldIds } from "./components/field/field.js";
 import { fieldStateAttributes } from "./components/field/field-state.js";
 import { optionsLoad } from "./components/field/options-load.js";
@@ -30,7 +31,7 @@ import { useFieldState } from "./components/field/use-field-state.js";
 import { CheckboxGlyph } from "./components/checkbox-field/checkbox-glyph.js";
 import { Checkbox } from "./components/checkbox-field/checkbox.js";
 import { CheckboxField } from "./components/checkbox-field/checkbox-field.js";
-import { useFieldContext, useFormContext } from "./lib/forms/context.js";
+import { useConnectedField } from "./lib/forms/use-connected-field.js";
 import { TSFCheckboxField } from "./components/checkbox-field/tsf-checkbox-field.js";
 import { CheckboxGroup } from "./components/checkbox-group-field/checkbox-group.js";
 import { CheckboxGroupField } from "./components/checkbox-group-field/checkbox-group-field.js";
@@ -65,6 +66,9 @@ import { EmptyMessage } from "./components/empty-message/empty-message.js";
 import { ErrorMessage } from "./components/error-message/error-message.js";
 import { ErrorBoundary } from "./components/error-boundary/error-boundary.js";
 import { FieldPlaceholder } from "./components/field-placeholder/field-placeholder.js";
+import { Fieldset } from "./components/fieldset/fieldset.js";
+import { FieldGroup } from "./components/fieldset/field-group.js";
+import { TSFFieldGroup } from "./components/fieldset/tsf-field-group.js";
 import { FileInput } from "./components/file-field/file-input.js";
 import { FileField } from "./components/file-field/file-field.js";
 import { TSFFileField } from "./components/file-field/tsf-file-field.js";
@@ -129,4 +133,4 @@ import { useTheme } from "./lib/hooks/use-theme.js";
 import { storedPageSize, tableStoredValue } from "./lib/table-storage.js";
 import { useBeforeUnload } from "./lib/unsaved-changes/before-unload.js";
 import { LeaveGuardDialog, useLeaveGuard } from "./lib/unsaved-changes/leave-guard.js";
-export { Accordion, ActiveFilters, AttachmentPreview, AttachmentTile, Avatar, AvatarGroup, Badge, Breadcrumbs, Button, Checkbox, CheckboxField, CheckboxGlyph, CheckboxGroup, CheckboxGroupField, Collapsible, Combobox, ComboboxField, ConfirmDialog, Conversation, DateField, DateInput, DateRangeField, DateRangeInput, DetailList, Dialog, Divider, Drawer, EmailField, EmptyMessage, ErrorBoundary, ErrorMessage, ErrorText, Field, FieldPlaceholder, FileField, FileInput, FilterBar, Form, Icon, LeaveGuardDialog, Link, LinkButton, LoadingMessage, LocaleProvider, Menu, Nav, NavItemView, NumberField, NumberInput, OtpField, OtpInput, Pagination, PasswordField, PasswordStrength, PhoneField, PhotoField, PhotoInput, Popover, RadioGroup, RadioGroupField, SearchField, SegmentedControl, SegmentedControlField, Select, SelectField, SentAttachmentTile, Skeleton, Spinner, Stale, StatusMessage, Switch, SwitchField, TSFCheckboxField, TSFCheckboxGroupField, TSFComboboxField, TSFDateField, TSFDateRangeField, TSFEmailField, TSFFileField, TSFNumberField, TSFOtpField, TSFPasswordField, TSFPhoneField, TSFPhotoField, TSFRadioGroupField, TSFSearchField, TSFSegmentedControlField, TSFSelectField, TSFSwitchField, TSFTextField, TSFTextareaField, TSFTimeField, TSFToggleGroupField, Tabs, Tag, TagGroup, TextField, TextInput, Textarea, TextareaField, TimeField, TimeInput, TimeZoneProvider, ToastProvider, ToggleGroup, ToggleGroupField, Tooltip, connectTextPreset, createAppForm, currencyFormat, describeFlag, describeList, describeValue, fieldStateAttributes, getFieldErrors, groupByBurst, groupByDay, isoDateRangeToInstants, never, normalizeFieldErrors, optionsLoad, percentFormat, storedPageSize, tableStoredValue, toast, toastManager, unitFormat, useAttachmentPreview, useBeforeUnload, useBusyPhase, useFieldContext, useFieldFocus, useFieldIds, useFieldState, useFilterView, useFold, useFormContext, useFormDisabled, useLeaveGuard, useLocale, useMediaQuery, usePresence, useReportUnsavedChanges, useRowSelection, useTheme, useTimeZone, useUnsavedChanges, whenDirty };
+export { Accordion, ActiveFilters, AttachmentPreview, AttachmentTile, Avatar, AvatarGroup, Badge, Breadcrumbs, Button, Checkbox, CheckboxField, CheckboxGlyph, CheckboxGroup, CheckboxGroupField, Collapsible, Combobox, ComboboxField, ConfirmDialog, Conversation, DateField, DateInput, DateRangeField, DateRangeInput, DetailList, Dialog, Divider, Drawer, EmailField, EmptyMessage, ErrorBoundary, ErrorMessage, ErrorText, Field, FieldGroup, FieldPlaceholder, Fieldset, FileField, FileInput, FilterBar, Form, Icon, LeaveGuardDialog, Link, LinkButton, LoadingMessage, LocaleProvider, Menu, Nav, NavItemView, NumberField, NumberInput, OtpField, OtpInput, Pagination, PasswordField, PasswordStrength, PhoneField, PhotoField, PhotoInput, Popover, RadioGroup, RadioGroupField, SearchField, SegmentedControl, SegmentedControlField, Select, SelectField, SentAttachmentTile, Skeleton, Spinner, Stale, StatusMessage, Switch, SwitchField, TSFCheckboxField, TSFCheckboxGroupField, TSFComboboxField, TSFDateField, TSFDateRangeField, TSFEmailField, TSFFieldGroup, TSFFileField, TSFNumberField, TSFOtpField, TSFPasswordField, TSFPhoneField, TSFPhotoField, TSFRadioGroupField, TSFSearchField, TSFSegmentedControlField, TSFSelectField, TSFSwitchField, TSFTextField, TSFTextareaField, TSFTimeField, TSFToggleGroupField, Tabs, Tag, TagGroup, TextField, TextInput, Textarea, TextareaField, TimeField, TimeInput, TimeZoneProvider, ToastProvider, ToggleGroup, ToggleGroupField, Tooltip, connectTextPreset, createAppForm, currencyFormat, describeFlag, describeList, describeValue, fieldStateAttributes, getFieldErrors, groupByBurst, groupByDay, isoDateRangeToInstants, never, normalizeFieldErrors, optionsLoad, percentFormat, storedPageSize, tableStoredValue, toast, toastManager, unitFormat, useAttachmentPreview, useBeforeUnload, useBusyPhase, useConnectedField, useFieldContext, useFieldFocus, useFieldIds, useFieldState, useFilterView, useFold, useFormContext, useFormDisabled, useLeaveGuard, useLocale, useMediaQuery, usePresence, useReportUnsavedChanges, useRowSelection, useTheme, useTimeZone, useUnsavedChanges, whenDirty };

package/dist/lib/forms/create-app-form.d.ts

@@ -5,20 +5,29 @@ type Bridge = Readonly<{
 }>["bivarianceHack"];
 /** The bridges a form hook renders through `form.AppField`, by the name a field reaches each under. */
 export type AppFieldComponents = Readonly<Record<string, Bridge>>;
-type FormComponents = Readonly<Record<string, never>>;
-type AppFormHook<TFields extends AppFieldComponents> = ReturnType<typeof createFormHook<TFields, FormComponents>>;
+/** The bridges that read a whole form rather than one field, such as `TSFFieldGroup`, by the name a form reaches each under. */
+export type AppFormComponents = Readonly<Record<string, Bridge>>;
+/** A form hook's form components when it registers none. */
+export type NoFormComponents = Readonly<Record<string, never>>;
+type AppFormHook<TFields extends AppFieldComponents, TForms extends AppFormComponents> = ReturnType<typeof createFormHook<TFields, TForms>>;
 /** The form hook `createAppForm` builds, with the form and field-group helpers bound to it. */
-export type AppForm<TFields extends AppFieldComponents> = Readonly<Pick<AppFormHook<TFields>, "useAppForm" | "withForm" | "withFieldGroup">>;
+export type AppForm<TFields extends AppFieldComponents, TForms extends AppFormComponents = NoFormComponents> = Readonly<Pick<AppFormHook<TFields, TForms>, "useAppForm" | "withForm" | "withFieldGroup">>;
+/** `createAppForm`, with or without form components. */
+export type CreateAppForm = {
+    <TFields extends AppFieldComponents>(fieldComponents: TFields): AppForm<TFields>;
+    <TFields extends AppFieldComponents, TForms extends AppFormComponents>(fieldComponents: TFields, formComponents: TForms): AppForm<TFields, TForms>;
+};
 /**
  * The app's form hook, with only the bridges it registers. A form reaches each
- * through `form.AppField` under its key, and a failed submit focuses the first
+ * field bridge through `form.AppField` under its key, and each form component,
+ * such as `TSFFieldGroup`, as `form.<key>`. A failed submit focuses the first
  * invalid control of the `Form.Root` the form renders in.
  *
  * @example
- * export const { useAppForm, withForm, withFieldGroup } = createAppForm({
- * 	TextField: TSFTextField,
- * 	SelectField: TSFSelectField,
- * });
+ * export const { useAppForm, withForm, withFieldGroup } = createAppForm(
+ * 	{ TextField: TSFTextField, SelectField: TSFSelectField },
+ * 	{ FieldGroup: TSFFieldGroup },
+ * );
  */
-export declare const createAppForm: <TFields extends AppFieldComponents>(fieldComponents: TFields) => AppForm<TFields>;
+export declare const createAppForm: CreateAppForm;
 export {};

package/dist/lib/forms/create-app-form.js

@@ -2,19 +2,15 @@ import { fieldContext, formContext } from "./context.js";
 import { focusFirstInvalidField } from "./failed-submit.js";
 import { createFormHook } from "@tanstack/react-form";
 // src/lib/forms/create-app-form.ts
-var formComponents = {};
+var noFormComponents = {};
 /**
-* The app's form hook, with only the bridges it registers. A form reaches each
-* through `form.AppField` under its key, and a failed submit focuses the first
+* A form hook over the given bridges, whose failed submit focuses the first
 * invalid control of the `Form.Root` the form renders in.
 *
 * @example
-* export const { useAppForm, withForm, withFieldGroup } = createAppForm({
-* 	TextField: TSFTextField,
-* 	SelectField: TSFSelectField,
-* });
+* const { useAppForm } = buildAppForm({ TextField: TSFTextField }, {});
 */
-var createAppForm = (fieldComponents) => {
+var buildAppForm = (fieldComponents, formComponents) => {
 	const hook = createFormHook({
 		fieldContext,
 		formContext,
@@ -33,4 +29,17 @@ var createAppForm = (fieldComponents) => {
 		withFieldGroup: hook.withFieldGroup
 	};
 };
+/**
+* The app's form hook, with only the bridges it registers. A form reaches each
+* field bridge through `form.AppField` under its key, and each form component,
+* such as `TSFFieldGroup`, as `form.<key>`. A failed submit focuses the first
+* invalid control of the `Form.Root` the form renders in.
+*
+* @example
+* export const { useAppForm, withForm, withFieldGroup } = createAppForm(
+* 	{ TextField: TSFTextField, SelectField: TSFSelectField },
+* 	{ FieldGroup: TSFFieldGroup },
+* );
+*/
+var createAppForm = (fieldComponents, formComponents) => formComponents === void 0 ? buildAppForm(fieldComponents, noFormComponents) : buildAppForm(fieldComponents, formComponents);
 export { createAppForm };

package/dist/lib/forms/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./create-app-form.ts";
 export { useFieldContext, useFormContext, } from "./context.tsx";
 export * from "./errors.ts";
+export * from "./use-connected-field.ts";

package/dist/lib/forms/index.js

@@ -1,4 +1,5 @@
 import { createAppForm } from "./create-app-form.js";
 import { useFieldContext, useFormContext } from "./context.js";
 import { getFieldErrors, normalizeFieldErrors } from "./errors.js";
-export { createAppForm, getFieldErrors, normalizeFieldErrors, useFieldContext, useFormContext };
+import { useConnectedField } from "./use-connected-field.js";
+export { createAppForm, getFieldErrors, normalizeFieldErrors, useConnectedField, useFieldContext, useFormContext };

package/dist/lib/forms/use-connected-field.d.ts

@@ -15,13 +15,16 @@ export type ConnectedField<TValue> = Readonly<{
     props: ConnectedFieldProps;
 }>;
 /**
- * The field a bridge renders for, and the props every field takes from it:
- * its name, its errors as the validators returned them, `dirty`, `touched`,
- * `pending` while it validates, and the blur handler. The value and its change
- * handler are the control's own.
+ * The TanStack Form field a control renders in, and the props every field
+ * takes from it: its name, its errors as the validators returned them,
+ * `dirty`, `touched`, `pending` while it validates, and the blur handler. The
+ * value and its change handler are the control's own. Given the field's
+ * label, it tells an enclosing field group, whose `formatError` receives it.
  *
  * @example
- * const { field, props } = useConnectedField<string>();
- * <TextField {...props} value={field.state.value} onValueChange={field.handleChange} label={label} optionalLabel={optionalLabel} />
+ * const { field, props: { name, onBlur, ...state } } = useConnectedField<string>(label);
+ * <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange} optionalLabel="optional">
+ * 	<TextInput.Input name={name} onBlur={onBlur} />
+ * </TextInput.Root>
  */
-export declare const useConnectedField: <TValue>() => ConnectedField<TValue>;
+export declare const useConnectedField: <TValue>(label?: string) => ConnectedField<TValue>;