@igne-agency/react-web-ui 0.4.0 → 0.6.0

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

@@ -1,17 +1,17 @@
+import { renderAs } from "../../lib/render-as.js";
 import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
-import { Button as Button$1 } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import file_field_module_default from "./file-field.module.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, DropZone, FileTrigger, TagGroup, TagList } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+import { Button, DropZone, FileTrigger, Tag, TagGroup, TagList } from "react-aria-components";
 import { Fieldset } from "@base-ui/react/fieldset";
 // src/components/file-field/file-input.tsx
 /** The fieldset around the file input, which projects its state as `data-*` attributes. */
 var FileInputRoot = (t0) => {
-	const $ = c(15);
+	const $ = c(16);
 	let disabled;
 	let props;
 	let state;
@@ -32,33 +32,36 @@ var FileInputRoot = (t0) => {
 		$[4] = disabled;
 		$[5] = t1;
 	} else t1 = $[5];
-	let t2;
+	const t2 = state?.requiredness;
+	let t3;
 	if ($[6] !== state) {
-		t2 = state ?? {};
+		t3 = state ?? {};
 		$[6] = state;
-		$[7] = t2;
-	} else t2 = $[7];
-	let t3;
-	if ($[8] !== t2) {
-		t3 = fieldStateAttributes(t2);
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[10] !== disabled || $[11] !== props || $[12] !== t1 || $[13] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Field.Root, {
+	if ($[8] !== t3) {
+		t4 = fieldStateAttributes(t3);
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== disabled || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Field.Root, {
 			render: t1,
 			disabled,
-			...t3,
+			requiredness: t2,
+			...t4,
 			...props
 		});
 		$[10] = disabled;
 		$[11] = props;
 		$[12] = t1;
-		$[13] = t3;
+		$[13] = t2;
 		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
 };
 /** The legend that names the fieldset. */
 var FileInputLegend = (props) => {
@@ -129,130 +132,152 @@ var FileInputDropTarget = (t0) => {
 	} else t4 = $[13];
 	return t4;
 };
-/** The prompt inside the drop target, with an optional `icon` above it. */
+/**
+* The prompt inside the drop target, holding its text and an optional
+* `HintIcon` above it.
+*
+* @example
+* <FileInput.Hint>
+* 	<FileInput.HintIcon><UploadFileIcon /></FileInput.HintIcon>
+* 	Drag files here
+* </FileInput.Hint>
+*/
 var FileInputHint = (t0) => {
-	const $ = c(14);
+	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(file_field_module_default.hint, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The glyph above the prompt, such as an upload icon. Renders nothing without
+* children.
+*
+* @example
+* <FileInput.HintIcon><UploadFileIcon /></FileInput.HintIcon>
+*/
+var FileInputHintIcon = (t0) => {
+	const $ = c(8);
 	let children;
 	let className;
-	let icon;
 	let props;
 	if ($[0] !== t0) {
-		({className, icon, children, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = icon;
-		$[4] = props;
+		$[3] = props;
 	} else {
 		children = $[1];
 		className = $[2];
-		icon = $[3];
-		props = $[4];
+		props = $[3];
 	}
 	let t1;
-	if ($[5] !== className) {
-		t1 = clsx(file_field_module_default.hint, className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[7] !== icon) {
-		t2 = icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: file_field_module_default.hintIcon,
-			children: icon
-		});
-		$[7] = icon;
-		$[8] = t2;
-	} else t2 = $[8];
-	let t3;
-	if ($[9] !== children || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("p", {
-			className: t1,
+			className: clsx(file_field_module_default.hintIcon, className),
 			...props,
-			children: [t2, children]
+			children
 		});
-		$[9] = children;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
-	return t3;
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
 };
-/** The button that opens the file dialog. */
+/**
+* The button that opens the file dialog. It renders whichever button it is
+* given.
+*
+* @example
+* <FileInput.Trigger
+* 	onSelect={onSelect}
+* 	render={<Button variant="secondary" size="sm" icon={<AttachFileIcon />}>Choose files</Button>}
+* />
+*/
 var FileInputTrigger = (t0) => {
-	const $ = c(22);
+	const $ = c(18);
 	let buttonRef;
 	let describedBy;
 	let disabled;
-	let icon;
 	let invalid;
-	let label;
 	let props;
+	let render;
 	if ($[0] !== t0) {
-		({label, disabled, describedBy, buttonRef, invalid, icon, ...props} = t0);
+		({render, disabled, describedBy, buttonRef, invalid, ...props} = t0);
 		$[0] = t0;
 		$[1] = buttonRef;
 		$[2] = describedBy;
 		$[3] = disabled;
-		$[4] = icon;
-		$[5] = invalid;
-		$[6] = label;
-		$[7] = props;
+		$[4] = invalid;
+		$[5] = props;
+		$[6] = render;
 	} else {
 		buttonRef = $[1];
 		describedBy = $[2];
 		disabled = $[3];
-		icon = $[4];
-		invalid = $[5];
-		label = $[6];
-		props = $[7];
+		invalid = $[4];
+		props = $[5];
+		render = $[6];
 	}
-	const t1 = invalid === true ? "invalid" : void 0;
+	let t1;
+	if ($[7] !== invalid || $[8] !== render) {
+		t1 = renderAs(render, { ...fieldStateAttributes({ validity: invalid === true ? "invalid" : void 0 }) });
+		$[7] = invalid;
+		$[8] = render;
+		$[9] = t1;
+	} else t1 = $[9];
 	let t2;
-	if ($[8] !== t1) {
-		t2 = fieldStateAttributes({ validity: t1 });
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
-	let t3;
-	if ($[10] !== disabled) {
-		t3 = /* @__PURE__ */ jsx(Button, { isDisabled: disabled });
-		$[10] = disabled;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== buttonRef || $[13] !== describedBy || $[14] !== icon || $[15] !== label || $[16] !== t2 || $[17] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Button$1, {
-			variant: "secondary",
-			size: "sm",
-			icon,
+	if ($[10] !== buttonRef || $[11] !== describedBy || $[12] !== disabled || $[13] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
 			ref: buttonRef,
+			isDisabled: disabled,
 			"aria-describedby": describedBy,
-			...t2,
-			render: t3,
-			children: label
+			render: t1
 		});
-		$[12] = buttonRef;
-		$[13] = describedBy;
-		$[14] = icon;
-		$[15] = label;
-		$[16] = t2;
-		$[17] = t3;
-		$[18] = t4;
-	} else t4 = $[18];
-	let t5;
-	if ($[19] !== props || $[20] !== t4) {
-		t5 = /* @__PURE__ */ jsx(FileTrigger, {
+		$[10] = buttonRef;
+		$[11] = describedBy;
+		$[12] = disabled;
+		$[13] = t1;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== props || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsx(FileTrigger, {
 			...props,
-			children: t4
+			children: t2
 		});
-		$[19] = props;
-		$[20] = t4;
-		$[21] = t5;
-	} else t5 = $[21];
-	return t5;
+		$[15] = props;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
 };
 /** The staged files, as a group of removable tiles. */
 var FileInputList = (t0) => {
@@ -288,53 +313,83 @@ var FileInputList = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
-/** One staged file as an `AttachmentTile`. */
+/**
+* One staged file's tile in the `List`, holding `AttachmentTile`'s parts.
+*
+* @example
+* <FileInput.Item id={id} textValue={file.name}>
+* 	<AttachmentTile.Preview name={file.name} src={src}>…</AttachmentTile.Preview>
+* </FileInput.Item>
+*/
 var FileInputItem = (t0) => {
-	const $ = c(8);
+	const $ = c(12);
+	let id;
 	let props;
 	let t1;
-	let t2;
+	let textValue;
 	if ($[0] !== t0) {
-		({invalid: t1, disabled: t2, ...props} = t0);
+		({id, textValue, disabled: t1, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = t1;
-		$[3] = t2;
+		$[1] = id;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = textValue;
 	} else {
-		props = $[1];
-		t1 = $[2];
-		t2 = $[3];
+		id = $[1];
+		props = $[2];
+		t1 = $[3];
+		textValue = $[4];
 	}
-	const invalid = t1 === void 0 ? false : t1;
-	const disabled = t2 === void 0 ? false : t2;
+	const disabled = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[5] !== disabled || $[6] !== id || $[7] !== textValue) {
+		t2 = /* @__PURE__ */ jsx(Tag, {
+			id,
+			textValue,
+			isDisabled: disabled
+		});
+		$[5] = disabled;
+		$[6] = id;
+		$[7] = textValue;
+		$[8] = t2;
+	} else t2 = $[8];
 	let t3;
-	if ($[4] !== disabled || $[5] !== invalid || $[6] !== props) {
-		t3 = /* @__PURE__ */ jsx(AttachmentTile, {
-			invalid,
-			disabled,
+	if ($[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(AttachmentTile.Root, {
+			render: t2,
 			...props
 		});
-		$[4] = disabled;
-		$[5] = invalid;
-		$[6] = props;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
 	return t3;
 };
 /**
 * The styled parts of a file input: the field frame around react-aria's
-* `DropZone` and `FileTrigger`, plus the staged files as removable
-* `AttachmentTile`s. The `Root` is a fieldset named by its `Legend`. For the
+* `DropZone` and `FileTrigger`, plus the staged files as removable tiles built
+* from `AttachmentTile`'s parts. The `Root` is a fieldset named by its `Legend`. For the
 * ordinary case, use `FileField`.
 *
 * @example
 * <FileInput.Root state={{ requiredness: "optional" }}>
-* 	<FileInput.Legend optionalLabel="optional">Attachments</FileInput.Legend>
+* 	<FileInput.Legend>Attachments <Field.Requiredness optionalLabel="optional" /></FileInput.Legend>
 * 	<FileInput.DropTarget aria-label="Drop zone for attachments" onDrop={onDrop}>
-* 		<FileInput.Hint icon={<UploadFileIcon />}>Drag files here</FileInput.Hint>
-* 		<FileInput.Trigger label="Choose files" icon={<AttachFileIcon />} onSelect={onSelect} />
+* 		<FileInput.Hint>
+* 			<FileInput.HintIcon><UploadFileIcon /></FileInput.HintIcon>
+* 			Drag files here
+* 		</FileInput.Hint>
+* 		<FileInput.Trigger
+* 			onSelect={onSelect}
+* 			render={<Button variant="secondary" size="sm" icon={<AttachFileIcon />}>Choose files</Button>}
+* 		/>
 * 		<FileInput.List label="Files for attachments" onRemove={onRemove}>
-* 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" removeIcon={<CloseIcon />} />
+* 			<FileInput.Item id={id} textValue={file.name}>
+* 				<AttachmentTile.Preview name={file.name} src={undefined}>
+* 					<AttachmentTile.Extension />
+* 					<AttachmentTile.Name />
+* 				</AttachmentTile.Preview>
+* 			</FileInput.Item>
 * 		</FileInput.List>
 * 	</FileInput.DropTarget>
 * </FileInput.Root>
@@ -344,6 +399,7 @@ var FileInput = {
 	Legend: FileInputLegend,
 	DropTarget: FileInputDropTarget,
 	Hint: FileInputHint,
+	HintIcon: FileInputHintIcon,
 	Trigger: FileInputTrigger,
 	Pending: Field.Pending,
 	List: FileInputList,

package/dist/components/filter-bar/filter-bar.css

@@ -1,34 +1,34 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._bar_1j1i8_3 {
+  ._bar_lt3dt_3 {
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--filter-bar-gap, var(--sys-unit-8));
   }
-  ._search_1j1i8_10 {
+  ._search_lt3dt_10 {
     flex: 1 1 var(--filter-bar-search-basis, var(--sys-unit-64));
     min-inline-size: 0;
   }
-  ._active_1j1i8_14 {
+  ._active_lt3dt_14 {
     display: flex;
     flex: 1 0 100%;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--filter-bar-active-gap, var(--sys-unit-4));
   }
-  ._fields_1j1i8_21 {
+  ._fields_lt3dt_21 {
     display: flex;
     flex-direction: column;
     gap: var(--filter-bar-fields-gap, var(--sys-unit-12));
-    margin-block-start: var(--sys-unit-12);
+    margin-block-start: var(--filter-bar-fields-space, var(--sys-unit-12));
   }
-  ._footer_1j1i8_27 {
+  ._footer_lt3dt_27 {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--sys-unit-8);
-    margin-block-start: var(--sys-unit-16);
+    gap: var(--filter-bar-footer-gap, var(--sys-unit-8));
+    margin-block-start: var(--filter-bar-footer-space, var(--sys-unit-16));
   }
 }

package/dist/components/filter-bar/filter-bar.d.ts

@@ -47,7 +47,16 @@ export type FilterBarContentProps = Readonly<{
     children: ReactNode;
     className?: string;
 }>;
-/** The drawer itself: its portal, backdrop, viewport and popup, around the content. */
+/**
+ * The drawer itself, a `Drawer.Sheet`: its portal, backdrop, viewport and popup,
+ * around the content. For a drawer without the backdrop, compose `Drawer.Portal`,
+ * `Drawer.Viewport`, `Drawer.Popup` and `Drawer.Content` in its place.
+ *
+ * @example
+ * <FilterBar.Content>
+ * 	<FilterBar.Fields>…</FilterBar.Fields>
+ * </FilterBar.Content>
+ */
 declare const Content: ({ children, className, }: FilterBarContentProps) => ReactNode;
 export type FilterBarFieldsProps = useRender.ComponentProps<"div">;
 /** The filter controls, bound to the view's `draft`, in a column. */
@@ -86,7 +95,7 @@ type FilterBarParts = Readonly<{
  * Composite filter surface. `Root` holds a `useFilterView` in context: `Search`
  * and the `Drawer` share the leading row, and `Active`, the applied-filter row,
  * takes a line of its own. The drawer's header is the `Drawer` component's own
- * `Drawer.Header`, `Drawer.Title` and `Drawer.CloseButton`.
+ * `Drawer.Header`, `Drawer.Title` and `Drawer.Close`.
  *
  * @example
  * <FilterBar.Root filters={filters}>
@@ -96,7 +105,7 @@ type FilterBarParts = Readonly<{
  * 		<FilterBar.Content>
  * 			<Drawer.Header>
  * 				<Drawer.Title>Filter clients</Drawer.Title>
- * 				<Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+ * 				<Drawer.Close render={<IconButton label="Close" variant="tertiary"><CloseIcon /></IconButton>} />
  * 			</Drawer.Header>
  * 			<FilterBar.Fields><ClientFilterFields filters={filters} /></FilterBar.Fields>
  * 			<FilterBar.Footer>

package/dist/components/filter-bar/filter-bar.js

@@ -7,7 +7,7 @@ import filter_bar_module_default from "./filter-bar.module.js";
 import { c } from "react/compiler-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useRef, useState } from "react";
 // src/components/filter-bar/filter-bar.tsx
 var FilterBarContext = createContext(null);
@@ -270,32 +270,30 @@ var FilterBadge = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
-/** The drawer itself: its portal, backdrop, viewport and popup, around the content. */
+/**
+* The drawer itself, a `Drawer.Sheet`: its portal, backdrop, viewport and popup,
+* around the content. For a drawer without the backdrop, compose `Drawer.Portal`,
+* `Drawer.Viewport`, `Drawer.Popup` and `Drawer.Content` in its place.
+*
+* @example
+* <FilterBar.Content>
+* 	<FilterBar.Fields>…</FilterBar.Fields>
+* </FilterBar.Content>
+*/
 var Content = (t0) => {
-	const $ = c(6);
+	const $ = c(3);
 	const { children, className } = t0;
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Drawer.Backdrop, {});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== children) {
-		t2 = /* @__PURE__ */ jsx(Drawer.Content, { children });
-		$[1] = children;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== className || $[4] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Drawer.Portal, { children: [t1, /* @__PURE__ */ jsx(Drawer.Viewport, { children: /* @__PURE__ */ jsx(Drawer.Popup, {
+	if ($[0] !== children || $[1] !== className) {
+		t1 = /* @__PURE__ */ jsx(Drawer.Sheet, {
 			className,
-			children: t2
-		}) })] });
-		$[3] = className;
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
-	return t3;
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 };
 /** The filter controls, bound to the view's `draft`, in a column. */
 var Fields = (t0) => {
@@ -605,7 +603,7 @@ var ClearAll = (t0) => {
 * Composite filter surface. `Root` holds a `useFilterView` in context: `Search`
 * and the `Drawer` share the leading row, and `Active`, the applied-filter row,
 * takes a line of its own. The drawer's header is the `Drawer` component's own
-* `Drawer.Header`, `Drawer.Title` and `Drawer.CloseButton`.
+* `Drawer.Header`, `Drawer.Title` and `Drawer.Close`.
 *
 * @example
 * <FilterBar.Root filters={filters}>
@@ -615,7 +613,7 @@ var ClearAll = (t0) => {
 * 		<FilterBar.Content>
 * 			<Drawer.Header>
 * 				<Drawer.Title>Filter clients</Drawer.Title>
-* 				<Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+* 				<Drawer.Close render={<IconButton label="Close" variant="tertiary"><CloseIcon /></IconButton>} />
 * 			</Drawer.Header>
 * 			<FilterBar.Fields><ClientFilterFields filters={filters} /></FilterBar.Fields>
 * 			<FilterBar.Footer>

package/dist/components/filter-bar/filter-bar.module.js

@@ -1,9 +1,9 @@
 import './filter-bar.css';// src/components/filter-bar/filter-bar.module.scss
-var bar = "_bar_1j1i8_3";
-var search = "_search_1j1i8_10";
-var active = "_active_1j1i8_14";
-var fields = "_fields_1j1i8_21";
-var footer = "_footer_1j1i8_27";
+var bar = "_bar_lt3dt_3";
+var search = "_search_lt3dt_10";
+var active = "_active_lt3dt_14";
+var fields = "_fields_lt3dt_21";
+var footer = "_footer_lt3dt_27";
 var filter_bar_module_default = {
 	bar,
 	search,

package/dist/components/form/form.d.ts

@@ -1,5 +1,6 @@
+import { useRender } from "@base-ui/react/use-render";
 import { type AnyFormApi } from "@tanstack/react-form";
-import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
 import { type LeaveGuardPolicy } from "../../lib/unsaved-changes/policy.ts";
 import { type ButtonProps } from "../button/index.ts";
 export type FormRootProps = Omit<ComponentPropsWithRef<"form">, "onSubmit" | "children"> & Readonly<{
@@ -31,15 +32,24 @@ export type FormErrorsProps = Readonly<{
  * <Form.Errors />
  */
 declare const FormErrors: ({ className, }: FormErrorsProps) => ReactNode;
-export type FormSubmitProps = Omit<Extract<ButtonProps, Readonly<{
-    iconOnly?: false;
-}>>, "type" | "iconOnly"> & Readonly<{
+export type FormPendingProps = useRender.ComponentProps<"span">;
+/**
+ * What the form shows while its wait is worth showing, such as a spinner: it
+ * renders once the form has been busy for 150 ms, and stays at least 200 ms.
+ * It is decoration; `Form.Submit` announces the wait.
+ *
+ * @example
+ * <Form.Pending render={<Spinner size={1} />} />
+ */
+declare const FormPending: ({ render, ref, ...props }: FormPendingProps) => ReactElement | null;
+export type FormSubmitProps = Omit<ButtonProps, "type"> & Readonly<{
     /** What a wait is announced as once it has lasted, such as "Saving". */
     busyLabel: string;
 }>;
 /**
- * The form's submit button. A wait that lasts 150 ms shows a spinner, is
- * announced as `busyLabel`, and stays shown at least 200 ms.
+ * The form's submit button. A wait that lasts 150 ms shows a `Form.Pending`
+ * spinner in place of its icon, is announced as `busyLabel`, and stays shown
+ * at least 200 ms.
  *
  * @example
  * <Form.Submit busyLabel="Saving">Save</Form.Submit>
@@ -49,11 +59,13 @@ declare const FormSubmit: ({ busyLabel, variant, icon, children, ...props }: For
 export type FormParts = Readonly<{
     Root: typeof FormRoot;
     Errors: typeof FormErrors;
+    Pending: typeof FormPending;
     Submit: typeof FormSubmit;
 }>;
 /**
  * A form over a TanStack Form instance: `Root` is the `<form>`, `Errors` its
- * form-level errors and `Submit` its submit button.
+ * form-level errors, `Submit` its submit button and `Pending` what shows while
+ * it waits.
  *
  * @example
  * <Form.Root form={form}>