@10x-media/form-builder 0.1.0-beta.2 → 0.1.0-beta.21

package/dist/react/primitives/ChoiceGroup.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/primitives/ChoiceGroup.tsx
+/**
+* A native `role="radiogroup"` of radio inputs backing a single-select field: the `radio` and
+* `buttons` display variants of the select field type. `aria-invalid` sits on each radio input, not
+* the group `div` (a `div` can't take focus), so the terminal-submit focus routing
+* (`[aria-invalid="true"]`) can land on it same as any other control.
+*/
+const ChoiceGroup = ({ name, value, options, onChange, onBlur, required, disabled, invalid, describedById, labelledById, variant }) => /* @__PURE__ */ jsx("div", {
+	role: "radiogroup",
+	"aria-labelledby": labelledById,
+	"aria-describedby": describedById,
+	className: variant === "buttons" ? "fb-choice fb-choice--buttons" : "fb-choice",
+	children: options.map((option) => /* @__PURE__ */ jsxs("label", {
+		className: "fb-choice__option",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "radio",
+			name,
+			value: option.value,
+			checked: value === option.value,
+			onChange: () => onChange(option.value),
+			onBlur,
+			required,
+			disabled,
+			"aria-invalid": invalid || void 0
+		}), /* @__PURE__ */ jsx("span", { children: option.label })]
+	}, option.value))
+});
+//#endregion
+export { ChoiceGroup };
+
+//# sourceMappingURL=ChoiceGroup.js.map

package/dist/react/primitives/ChoiceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceGroup.js","names":[],"sources":["../../../src/react/primitives/ChoiceGroup.tsx"],"sourcesContent":["'use client'\n\nexport type ChoiceOption = { label: string; value: string }\n\nexport type ChoiceGroupProps = {\n\tname: string\n\tvalue: string\n\toptions: ChoiceOption[]\n\tonChange: (value: string) => void\n\tonBlur?: () => void\n\trequired?: boolean\n\tdisabled?: boolean\n\tinvalid?: boolean\n\tdescribedById?: string\n\t/** id of the element that names the group (`aria-labelledby`); omit when the field has no label. */\n\tlabelledById?: string\n\t/** `radio` is the plain native list; `buttons` is the same semantics styled as a segmented control. */\n\tvariant: 'radio' | 'buttons'\n}\n\n/**\n * A native `role=\"radiogroup\"` of radio inputs backing a single-select field: the `radio` and\n * `buttons` display variants of the select field type. `aria-invalid` sits on each radio input, not\n * the group `div` (a `div` can't take focus), so the terminal-submit focus routing\n * (`[aria-invalid=\"true\"]`) can land on it same as any other control.\n */\nexport const ChoiceGroup = ({\n\tname,\n\tvalue,\n\toptions,\n\tonChange,\n\tonBlur,\n\trequired,\n\tdisabled,\n\tinvalid,\n\tdescribedById,\n\tlabelledById,\n\tvariant,\n}: ChoiceGroupProps) => (\n\t<div\n\t\trole=\"radiogroup\"\n\t\taria-labelledby={labelledById}\n\t\taria-describedby={describedById}\n\t\tclassName={variant === 'buttons' ? 'fb-choice fb-choice--buttons' : 'fb-choice'}\n\t>\n\t\t{options.map((option) => (\n\t\t\t<label key={option.value} className=\"fb-choice__option\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={option.value}\n\t\t\t\t\tchecked={value === option.value}\n\t\t\t\t\tonChange={() => onChange(option.value)}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\t/>\n\t\t\t\t<span>{option.label}</span>\n\t\t\t</label>\n\t\t))}\n\t</div>\n)\n"],"mappings":";;;;;;;;;AA0BA,MAAa,eAAe,EAC3B,MACA,OACA,SACA,UACA,QACA,UACA,UACA,SACA,eACA,cACA,cAEA,oBAAC,OAAD;CACC,MAAK;CACL,mBAAiB;CACjB,oBAAkB;CAClB,WAAW,YAAY,YAAY,iCAAiC;WAEnE,QAAQ,KAAK,WACb,qBAAC,SAAD;EAA0B,WAAU;YAApC,CACC,oBAAC,SAAD;GACC,MAAK;GACC;GACN,OAAO,OAAO;GACd,SAAS,UAAU,OAAO;GAC1B,gBAAgB,SAAS,OAAO,KAAK;GAC7B;GACE;GACA;GACV,gBAAc,WAAW,KAAA;EACzB,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAY,CAAA,CACpB;IAbK,OAAO,KAaZ,CACP;AACG,CAAA"}

package/dist/react/primitives/FieldShell.d.ts

@@ -6,15 +6,23 @@ type FieldShellProps = {
   label?: string;
   description?: string;
   required?: boolean;
-  errors?: string[];
-  warnings?: string[]; /** id used for aria-describedby on the control; the shell renders description + messages under it. */
+  errors?: string[]; /** id used for aria-describedby on the control; the shell renders description + messages under it. */
   describedById: string;
+  /**
+   * When true, the caption renders as a plain `<span>` instead of a `<label htmlFor>`: for a control
+   * with no single element to bind to (a native radiogroup), `htmlFor` pointing at a nonexistent id is
+   * a dead click and invalid HTML. The caption still carries `id={`${id}-label`}` either way, so the
+   * child wires `aria-labelledby={`${id}-label`}` itself.
+   */
+  group?: boolean;
   children: ReactNode;
 };
 /**
- * Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional
- * description, and error/warning messages. The control inside must set `aria-describedby={describedById}`
+ * Accessible wrapper for a single field: a caption bound to the control, the control slot, an optional
+ * description, and error messages. The control inside must set `aria-describedby={describedById}`
  * and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.
+ * The caption carries `id={`${id}-label`}`, so a control with no single element to `htmlFor` (see
+ * `group`) can still name itself via `aria-labelledby`.
  */
 declare const FieldShell: ({
   id,
@@ -22,8 +30,8 @@ declare const FieldShell: ({
   description,
   required,
   errors,
-  warnings,
   describedById,
+  group,
   children
 }: FieldShellProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/react/primitives/FieldShell.js

@@ -2,33 +2,40 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/primitives/FieldShell.tsx
 /**
-* Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional
-* description, and error/warning messages. The control inside must set `aria-describedby={describedById}`
+* Accessible wrapper for a single field: a caption bound to the control, the control slot, an optional
+* description, and error messages. The control inside must set `aria-describedby={describedById}`
 * and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.
+* The caption carries `id={`${id}-label`}`, so a control with no single element to `htmlFor` (see
+* `group`) can still name itself via `aria-labelledby`.
 */
-const FieldShell = ({ id, label, description, required, errors = [], warnings = [], describedById, children }) => /* @__PURE__ */ jsxs("div", {
-	className: "fb-field",
-	"data-invalid": errors.length > 0 ? "" : void 0,
-	children: [
-		label ? /* @__PURE__ */ jsxs("label", {
-			className: "fb-field__label",
-			htmlFor: id,
-			children: [label, required ? /* @__PURE__ */ jsx("span", {
-				className: "fb-field__required",
-				"aria-hidden": "true",
-				children: " *"
-			}) : null]
-		}) : null,
-		children,
-		/* @__PURE__ */ jsxs("div", {
-			id: describedById,
-			className: "fb-field__messages",
-			children: [
-				description ? /* @__PURE__ */ jsx("p", {
+const FieldShell = ({ id, label, description, required, errors = [], describedById, group = false, children }) => {
+	const requiredMark = required ? /* @__PURE__ */ jsx("span", {
+		className: "fb-field__required",
+		"aria-hidden": "true",
+		children: " *"
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-field",
+		"data-invalid": errors.length > 0 ? "" : void 0,
+		children: [
+			label ? group ? /* @__PURE__ */ jsxs("span", {
+				className: "fb-field__label",
+				id: `${id}-label`,
+				children: [label, requiredMark]
+			}) : /* @__PURE__ */ jsxs("label", {
+				className: "fb-field__label",
+				htmlFor: id,
+				id: `${id}-label`,
+				children: [label, requiredMark]
+			}) : null,
+			children,
+			/* @__PURE__ */ jsxs("div", {
+				id: describedById,
+				className: "fb-field__messages",
+				children: [description ? /* @__PURE__ */ jsx("p", {
 					className: "fb-field__description",
 					children: description
-				}) : null,
-				errors.length > 0 ? /* @__PURE__ */ jsx("div", {
+				}) : null, errors.length > 0 ? /* @__PURE__ */ jsx("div", {
 					role: "alert",
 					"aria-atomic": "true",
 					className: "fb-field__errors",
@@ -36,15 +43,11 @@ const FieldShell = ({ id, label, description, required, errors = [], warnings =
 						className: "fb-field__error",
 						children: message
 					}, message))
-				}) : null,
-				warnings.map((message) => /* @__PURE__ */ jsx("p", {
-					className: "fb-field__warning",
-					children: message
-				}, message))
-			]
-		})
-	]
-});
+				}) : null]
+			})
+		]
+	});
+};
 //#endregion
 export { FieldShell };
 

package/dist/react/primitives/FieldShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldShell.js","names":[],"sources":["../../../src/react/primitives/FieldShell.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\n\nexport type FieldShellProps = {\n\t/** The control id this shell labels and describes. */\n\tid: string\n\tlabel?: string\n\tdescription?: string\n\trequired?: boolean\n\terrors?: string[]\n\twarnings?: string[]\n\t/** id used for aria-describedby on the control; the shell renders description + messages under it. */\n\tdescribedById: string\n\tchildren: ReactNode\n}\n\n/**\n * Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional\n * description, and error/warning messages. The control inside must set `aria-describedby={describedById}`\n * and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.\n */\nexport const FieldShell = ({\n\tid,\n\tlabel,\n\tdescription,\n\trequired,\n\terrors = [],\n\twarnings = [],\n\tdescribedById,\n\tchildren,\n}: FieldShellProps) => (\n\t<div className=\"fb-field\" data-invalid={errors.length > 0 ? '' : undefined}>\n\t\t{label ? (\n\t\t\t<label className=\"fb-field__label\" htmlFor={id}>\n\t\t\t\t{label}\n\t\t\t\t{required ? (\n\t\t\t\t\t<span className=\"fb-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t{' *'}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</label>\n\t\t) : null}\n\t\t{children}\n\t\t<div id={describedById} className=\"fb-field__messages\">\n\t\t\t{description ? <p className=\"fb-field__description\">{description}</p> : null}\n\t\t\t{errors.length > 0 ? (\n\t\t\t\t<div role=\"alert\" aria-atomic=\"true\" className=\"fb-field__errors\">\n\t\t\t\t\t{errors.map((message) => (\n\t\t\t\t\t\t<p key={message} className=\"fb-field__error\">\n\t\t\t\t\t\t\t{message}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{warnings.map((message) => (\n\t\t\t\t<p key={message} className=\"fb-field__warning\">\n\t\t\t\t\t{message}\n\t\t\t\t</p>\n\t\t\t))}\n\t\t</div>\n\t</div>\n)\n"],"mappings":";;;;;;;;AAsBA,MAAa,cAAc,EAC1B,IACA,OACA,aACA,UACA,SAAS,CAAC,GACV,WAAW,CAAC,GACZ,eACA,eAEA,qBAAC,OAAD;CAAK,WAAU;CAAW,gBAAc,OAAO,SAAS,IAAI,KAAK,KAAA;WAAjE;EACE,QACA,qBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;aAA5C,CACE,OACA,WACA,oBAAC,QAAD;IAAM,WAAU;IAAqB,eAAY;cAC/C;GACI,CAAA,IACH,IACE;OACJ;EACH;EACD,qBAAC,OAAD;GAAK,IAAI;GAAe,WAAU;aAAlC;IACE,cAAc,oBAAC,KAAD;KAAG,WAAU;eAAyB;IAAe,CAAA,IAAI;IACvE,OAAO,SAAS,IAChB,oBAAC,OAAD;KAAK,MAAK;KAAQ,eAAY;KAAO,WAAU;eAC7C,OAAO,KAAK,YACZ,oBAAC,KAAD;MAAiB,WAAU;gBACzB;KACC,GAFK,OAEL,CACH;IACG,CAAA,IACF;IACH,SAAS,KAAK,YACd,oBAAC,KAAD;KAAiB,WAAU;eACzB;IACC,GAFK,OAEL,CACH;GACG;;CACD"}
+{"version":3,"file":"FieldShell.js","names":[],"sources":["../../../src/react/primitives/FieldShell.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\n\nexport type FieldShellProps = {\n\t/** The control id this shell labels and describes. */\n\tid: string\n\tlabel?: string\n\tdescription?: string\n\trequired?: boolean\n\terrors?: string[]\n\t/** id used for aria-describedby on the control; the shell renders description + messages under it. */\n\tdescribedById: string\n\t/**\n\t * When true, the caption renders as a plain `<span>` instead of a `<label htmlFor>`: for a control\n\t * with no single element to bind to (a native radiogroup), `htmlFor` pointing at a nonexistent id is\n\t * a dead click and invalid HTML. The caption still carries `id={`${id}-label`}` either way, so the\n\t * child wires `aria-labelledby={`${id}-label`}` itself.\n\t */\n\tgroup?: boolean\n\tchildren: ReactNode\n}\n\n/**\n * Accessible wrapper for a single field: a caption bound to the control, the control slot, an optional\n * description, and error messages. The control inside must set `aria-describedby={describedById}`\n * and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.\n * The caption carries `id={`${id}-label`}`, so a control with no single element to `htmlFor` (see\n * `group`) can still name itself via `aria-labelledby`.\n */\nexport const FieldShell = ({\n\tid,\n\tlabel,\n\tdescription,\n\trequired,\n\terrors = [],\n\tdescribedById,\n\tgroup = false,\n\tchildren,\n}: FieldShellProps) => {\n\tconst requiredMark = required ? (\n\t\t<span className=\"fb-field__required\" aria-hidden=\"true\">\n\t\t\t{' *'}\n\t\t</span>\n\t) : null\n\n\treturn (\n\t\t<div className=\"fb-field\" data-invalid={errors.length > 0 ? '' : undefined}>\n\t\t\t{label ? (\n\t\t\t\tgroup ? (\n\t\t\t\t\t<span className=\"fb-field__label\" id={`${id}-label`}>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{requiredMark}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<label className=\"fb-field__label\" htmlFor={id} id={`${id}-label`}>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{requiredMark}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t) : null}\n\t\t\t{children}\n\t\t\t<div id={describedById} className=\"fb-field__messages\">\n\t\t\t\t{description ? <p className=\"fb-field__description\">{description}</p> : null}\n\t\t\t\t{errors.length > 0 ? (\n\t\t\t\t\t<div role=\"alert\" aria-atomic=\"true\" className=\"fb-field__errors\">\n\t\t\t\t\t\t{errors.map((message) => (\n\t\t\t\t\t\t\t<p key={message} className=\"fb-field__error\">\n\t\t\t\t\t\t\t\t{message}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,cAAc,EAC1B,IACA,OACA,aACA,UACA,SAAS,CAAC,GACV,eACA,QAAQ,OACR,eACsB;CACtB,MAAM,eAAe,WACpB,oBAAC,QAAD;EAAM,WAAU;EAAqB,eAAY;YAC/C;CACI,CAAA,IACH;CAEJ,OACC,qBAAC,OAAD;EAAK,WAAU;EAAW,gBAAc,OAAO,SAAS,IAAI,KAAK,KAAA;YAAjE;GACE,QACA,QACC,qBAAC,QAAD;IAAM,WAAU;IAAkB,IAAI,GAAG,GAAG;cAA5C,CACE,OACA,YACI;QAEN,qBAAC,SAAD;IAAO,WAAU;IAAkB,SAAS;IAAI,IAAI,GAAG,GAAG;cAA1D,CACE,OACA,YACK;QAEL;GACH;GACD,qBAAC,OAAD;IAAK,IAAI;IAAe,WAAU;cAAlC,CACE,cAAc,oBAAC,KAAD;KAAG,WAAU;eAAyB;IAAe,CAAA,IAAI,MACvE,OAAO,SAAS,IAChB,oBAAC,OAAD;KAAK,MAAK;KAAQ,eAAY;KAAO,WAAU;eAC7C,OAAO,KAAK,YACZ,oBAAC,KAAD;MAAiB,WAAU;gBACzB;KACC,GAFK,OAEL,CACH;IACG,CAAA,IACF,IACA;;EACD;;AAEP"}

package/dist/react/primitives/Input.d.ts

@@ -2,7 +2,7 @@
 type InputProps = {
   id: string;
   name: string;
-  type?: 'text' | 'email' | 'number';
+  type?: 'text' | 'email' | 'number' | 'date';
   value: string;
   onChange: (value: string) => void;
   onBlur?: () => void;
@@ -11,6 +11,7 @@ type InputProps = {
   disabled?: boolean;
   invalid?: boolean;
   describedById?: string;
+  autoComplete?: string;
 };
 declare const Input: ({
   id,
@@ -23,7 +24,8 @@ declare const Input: ({
   required,
   disabled,
   invalid,
-  describedById
+  describedById,
+  autoComplete
 }: InputProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { Input, InputProps };

package/dist/react/primitives/Input.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/primitives/Input.tsx
-const Input = ({ id, name, type = "text", value, onChange, onBlur, placeholder, required, disabled, invalid, describedById }) => /* @__PURE__ */ jsx("input", {
+const Input = ({ id, name, type = "text", value, onChange, onBlur, placeholder, required, disabled, invalid, describedById, autoComplete }) => /* @__PURE__ */ jsx("input", {
 	id,
 	name,
 	type,
@@ -12,6 +12,7 @@ const Input = ({ id, name, type = "text", value, onChange, onBlur, placeholder,
 	disabled,
 	"aria-invalid": invalid || void 0,
 	"aria-describedby": describedById,
+	autoComplete,
 	onChange: (event) => onChange(event.target.value),
 	onBlur
 });

package/dist/react/primitives/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/react/primitives/Input.tsx"],"sourcesContent":["'use client'\n\nexport type InputProps = {\n\tid: string\n\tname: string\n\ttype?: 'text' | 'email' | 'number'\n\tvalue: string\n\tonChange: (value: string) => void\n\tonBlur?: () => void\n\tplaceholder?: string\n\trequired?: boolean\n\tdisabled?: boolean\n\tinvalid?: boolean\n\tdescribedById?: string\n}\n\nexport const Input = ({\n\tid,\n\tname,\n\ttype = 'text',\n\tvalue,\n\tonChange,\n\tonBlur,\n\tplaceholder,\n\trequired,\n\tdisabled,\n\tinvalid,\n\tdescribedById,\n}: InputProps) => (\n\t<input\n\t\tid={id}\n\t\tname={name}\n\t\ttype={type}\n\t\tclassName=\"fb-input\"\n\t\tvalue={value}\n\t\tplaceholder={placeholder}\n\t\trequired={required}\n\t\tdisabled={disabled}\n\t\taria-invalid={invalid || undefined}\n\t\taria-describedby={describedById}\n\t\tonChange={(event) => onChange(event.target.value)}\n\t\tonBlur={onBlur}\n\t/>\n)\n"],"mappings":";;;AAgBA,MAAa,SAAS,EACrB,IACA,MACA,OAAO,QACP,OACA,UACA,QACA,aACA,UACA,UACA,SACA,oBAEA,oBAAC,SAAD;CACK;CACE;CACA;CACN,WAAU;CACH;CACM;CACH;CACA;CACV,gBAAc,WAAW,KAAA;CACzB,oBAAkB;CAClB,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;CACxC;AACR,CAAA"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/react/primitives/Input.tsx"],"sourcesContent":["'use client'\n\nexport type InputProps = {\n\tid: string\n\tname: string\n\ttype?: 'text' | 'email' | 'number' | 'date'\n\tvalue: string\n\tonChange: (value: string) => void\n\tonBlur?: () => void\n\tplaceholder?: string\n\trequired?: boolean\n\tdisabled?: boolean\n\tinvalid?: boolean\n\tdescribedById?: string\n\tautoComplete?: string\n}\n\nexport const Input = ({\n\tid,\n\tname,\n\ttype = 'text',\n\tvalue,\n\tonChange,\n\tonBlur,\n\tplaceholder,\n\trequired,\n\tdisabled,\n\tinvalid,\n\tdescribedById,\n\tautoComplete,\n}: InputProps) => (\n\t<input\n\t\tid={id}\n\t\tname={name}\n\t\ttype={type}\n\t\tclassName=\"fb-input\"\n\t\tvalue={value}\n\t\tplaceholder={placeholder}\n\t\trequired={required}\n\t\tdisabled={disabled}\n\t\taria-invalid={invalid || undefined}\n\t\taria-describedby={describedById}\n\t\tautoComplete={autoComplete}\n\t\tonChange={(event) => onChange(event.target.value)}\n\t\tonBlur={onBlur}\n\t/>\n)\n"],"mappings":";;;AAiBA,MAAa,SAAS,EACrB,IACA,MACA,OAAO,QACP,OACA,UACA,QACA,aACA,UACA,UACA,SACA,eACA,mBAEA,oBAAC,SAAD;CACK;CACE;CACA;CACN,WAAU;CACH;CACM;CACH;CACA;CACV,gBAAc,WAAW,KAAA;CACzB,oBAAkB;CACJ;CACd,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;CACxC;AACR,CAAA"}

package/dist/react/renderers/calculation.js

@@ -1,12 +1,11 @@
 "use client";
+import { formatCalcValue } from "../../calc/formatCalcValue.js";
 import { defineFieldRenderer } from "../contract.js";
 import { FieldShell } from "../primitives/FieldShell.js";
-import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/renderers/calculation.tsx
 /** Read-only renderer for a calculation field: the value is derived, never user-editable, so it shows in an `<output>` rather than an input. */
-const calculationRenderer = defineFieldRenderer(({ field, value, errors, warnings, required }) => {
-	const id = useId();
+const calculationRenderer = defineFieldRenderer(({ field, id, value, errors, required }) => {
 	const describedById = `${id}-desc`;
 	return /* @__PURE__ */ jsx(FieldShell, {
 		id,
@@ -14,13 +13,16 @@ const calculationRenderer = defineFieldRenderer(({ field, value, errors, warning
 		description: typeof field.description === "string" ? field.description : void 0,
 		required,
 		errors,
-		warnings,
 		describedById,
 		children: /* @__PURE__ */ jsx("output", {
 			id,
 			className: "fb-field__calc",
 			"aria-describedby": describedById,
-			children: value == null ? "" : String(value)
+			children: value == null ? "" : formatCalcValue(value, {
+				decimals: field.decimals,
+				prefix: field.prefix,
+				suffix: field.suffix
+			})
 		})
 	});
 });

package/dist/react/renderers/calculation.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculation.js","names":[],"sources":["../../../src/react/renderers/calculation.tsx"],"sourcesContent":["'use client'\n\nimport { useId } from 'react'\nimport { defineFieldRenderer } from '../contract'\nimport { FieldShell } from '../primitives/FieldShell'\n\n/** Read-only renderer for a calculation field: the value is derived, never user-editable, so it shows in an `<output>` rather than an input. */\nexport const calculationRenderer = defineFieldRenderer<number | undefined>(\n\t({ field, value, errors, warnings, required }) => {\n\t\tconst id = useId()\n\t\tconst describedById = `${id}-desc`\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\twarnings={warnings}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<output id={id} className=\"fb-field__calc\" aria-describedby={describedById}>\n\t\t\t\t\t{value == null ? '' : String(value)}\n\t\t\t\t</output>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;;AAOA,MAAa,sBAAsB,qBACjC,EAAE,OAAO,OAAO,QAAQ,UAAU,eAAe;CACjD,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACE;EACK;YAEf,oBAAC,UAAD;GAAY;GAAI,WAAU;GAAiB,oBAAkB;aAC3D,SAAS,OAAO,KAAK,OAAO,KAAK;EAC3B,CAAA;CACG,CAAA;AAEd,CACD"}
+{"version":3,"file":"calculation.js","names":[],"sources":["../../../src/react/renderers/calculation.tsx"],"sourcesContent":["'use client'\n\nimport { formatCalcValue } from '../../calc/formatCalcValue'\nimport { defineFieldRenderer } from '../contract'\nimport { FieldShell } from '../primitives/FieldShell'\n\n/** Read-only renderer for a calculation field: the value is derived, never user-editable, so it shows in an `<output>` rather than an input. */\nexport const calculationRenderer = defineFieldRenderer<number | undefined>(\n\t({ field, id, value, errors, required }) => {\n\t\tconst describedById = `${id}-desc`\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<output id={id} className=\"fb-field__calc\" aria-describedby={describedById}>\n\t\t\t\t\t{value == null\n\t\t\t\t\t\t? ''\n\t\t\t\t\t\t: formatCalcValue(value, {\n\t\t\t\t\t\t\t\tdecimals: field.decimals,\n\t\t\t\t\t\t\t\tprefix: field.prefix,\n\t\t\t\t\t\t\t\tsuffix: field.suffix,\n\t\t\t\t\t\t\t})}\n\t\t\t\t</output>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;;AAOA,MAAa,sBAAsB,qBACjC,EAAE,OAAO,IAAI,OAAO,QAAQ,eAAe;CAC3C,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACO;YAEf,oBAAC,UAAD;GAAY;GAAI,WAAU;GAAiB,oBAAkB;aAC3D,SAAS,OACP,KACA,gBAAgB,OAAO;IACvB,UAAU,MAAM;IAChB,QAAQ,MAAM;IACd,QAAQ,MAAM;GACf,CAAC;EACI,CAAA;CACG,CAAA;AAEd,CACD"}

package/dist/react/renderers/checkbox.js

@@ -2,11 +2,9 @@
 import { defineFieldRenderer } from "../contract.js";
 import { FieldShell } from "../primitives/FieldShell.js";
 import { Checkbox } from "../primitives/Checkbox.js";
-import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/renderers/checkbox.tsx
-const checkboxRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
-	const id = useId();
+const checkboxRenderer = defineFieldRenderer(({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {
 	const describedById = `${id}-desc`;
 	return /* @__PURE__ */ jsx(FieldShell, {
 		id,
@@ -14,7 +12,6 @@ const checkboxRenderer = defineFieldRenderer(({ field, name, value, onChange, on
 		description: typeof field.description === "string" ? field.description : void 0,
 		required,
 		errors,
-		warnings,
 		describedById,
 		children: /* @__PURE__ */ jsx(Checkbox, {
 			id,
@@ -25,7 +22,8 @@ const checkboxRenderer = defineFieldRenderer(({ field, name, value, onChange, on
 			required,
 			disabled,
 			invalid: errors.length > 0,
-			describedById
+			describedById,
+			variant: field.display === "switch" ? "switch" : void 0
 		})
 	});
 });

package/dist/react/renderers/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/react/renderers/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport { useId } from 'react'\nimport { defineFieldRenderer } from '../contract'\nimport { Checkbox } from '../primitives/Checkbox'\nimport { FieldShell } from '../primitives/FieldShell'\n\nexport const checkboxRenderer = defineFieldRenderer<boolean>(\n\t({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {\n\t\tconst id = useId()\n\t\tconst describedById = `${id}-desc`\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\twarnings={warnings}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<Checkbox\n\t\t\t\t\tid={id}\n\t\t\t\t\tname={name}\n\t\t\t\t\tchecked={value ?? false}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t/>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;;AAOA,MAAa,mBAAmB,qBAC9B,EAAE,OAAO,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,UAAU,eAAe;CACnF,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACE;EACK;YAEf,oBAAC,UAAD;GACK;GACE;GACN,SAAS,SAAS;GACR;GACF;GACE;GACA;GACV,SAAS,OAAO,SAAS;GACV;EACf,CAAA;CACU,CAAA;AAEd,CACD"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/react/renderers/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport { defineFieldRenderer } from '../contract'\nimport { Checkbox } from '../primitives/Checkbox'\nimport { FieldShell } from '../primitives/FieldShell'\n\nexport const checkboxRenderer = defineFieldRenderer<boolean>(\n\t({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {\n\t\tconst describedById = `${id}-desc`\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<Checkbox\n\t\t\t\t\tid={id}\n\t\t\t\t\tname={name}\n\t\t\t\t\tchecked={value ?? false}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t\tvariant={field.display === 'switch' ? 'switch' : undefined}\n\t\t\t\t/>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;AAMA,MAAa,mBAAmB,qBAC9B,EAAE,OAAO,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,eAAe;CAC7E,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACO;YAEf,oBAAC,UAAD;GACK;GACE;GACN,SAAS,SAAS;GACR;GACF;GACE;GACA;GACV,SAAS,OAAO,SAAS;GACV;GACf,SAAS,MAAM,YAAY,WAAW,WAAW,KAAA;EACjD,CAAA;CACU,CAAA;AAEd,CACD"}

package/dist/react/renderers/consent.js

@@ -1,51 +1,99 @@
 "use client";
+import { sanitizeUrl } from "../../actions/body/converters.js";
+import { serializeBody } from "../../actions/body/serializeBody.js";
+import { textOfBody } from "../../actions/body/textOfBody.js";
 import { defineFieldRenderer } from "../contract.js";
 import { FieldShell } from "../primitives/FieldShell.js";
 import { Checkbox } from "../primitives/Checkbox.js";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/react/renderers/consent.tsx
-const consentRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
-	const id = useId();
+const text = (raw) => typeof raw === "string" && raw.trim() !== "" ? raw : void 0;
+/**
+* HTML for a rich text statement. A plain string never goes through this path: `serializeBody`
+* interpolates a string body unescaped (its pre-richText behavior), so rendering one as HTML would
+* let literal markup execute; the renderer shows a plain string as text instead.
+*/
+const richStatementHtml = (statement) => {
+	if (typeof statement === "string" || statement == null) return;
+	const html = serializeBody(statement, {
+		values: [],
+		descriptors: []
+	});
+	return html === "" ? void 0 : html;
+};
+/**
+* The resolved policy link, or nothing unless the source carries both a url and a name to show
+* for it: an anchor labelled by a raw URL or a machine key is worse than no anchor. The href is
+* sanitized like every other url the package renders, since a source is admin-authored and can
+* point anywhere (`sanitizeUrl` keeps http(s)/mailto/tel and relative urls, and neutralizes the
+* rest to `#`).
+*/
+const linkOf = (raw) => {
+	const link = raw;
+	const label = text(link?.label);
+	return label && typeof link?.url === "string" && link.url !== "" ? {
+		label,
+		url: sanitizeUrl(link.url)
+	} : void 0;
+};
+/**
+* The `statement` and `link` this reads are server-resolved from the field's consent source and
+* injected by `toFormDocument(doc, { consentStatements })`; the form document itself carries only
+* the source key, so a form rendered without that step shows no statement rather than a stale one.
+* The wording arrives already selected for the field's display (a notice source's
+* `noticeStatement` lands here as `statement`), so this renderer never picks between phrasings.
+* A `display: 'notice'` field renders the statement and link as passive prose with no checkbox and
+* no required marker: submitting the form is the consent, and the server records the agreement.
+*/
+const consentRenderer = defineFieldRenderer(({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {
 	const describedById = `${id}-desc`;
-	const text = (raw) => typeof raw === "string" && raw.trim() !== "" ? raw : void 0;
-	const statement = text(field.statement) ?? text(field.label);
-	const links = Array.isArray(field.consentLinks) ? field.consentLinks : (() => {
-		const sc = field.sourceConfig;
-		if (sc && typeof sc.url === "string" && sc.url) return [{
-			label: typeof sc.label === "string" ? sc.label : "Policy",
-			url: sc.url
-		}];
-		return [];
-	})();
+	const isNotice = field.display === "notice";
+	const plainStatement = text(textOfBody(field.statement));
+	const html = useMemo(() => richStatementHtml(field.statement), [field.statement]);
+	const link = linkOf(field.link);
 	return /* @__PURE__ */ jsxs(FieldShell, {
 		id,
-		label: statement,
 		description: typeof field.description === "string" ? field.description : void 0,
-		required,
+		required: isNotice ? false : required,
 		errors,
-		warnings,
 		describedById,
-		children: [/* @__PURE__ */ jsx(Checkbox, {
-			id,
-			name,
-			checked: value ?? false,
-			onChange,
-			onBlur,
-			required,
-			disabled,
-			invalid: errors.length > 0,
-			describedById
-		}), links.length > 0 ? /* @__PURE__ */ jsx("span", {
-			className: "fb-consent__links",
-			children: links.map((link) => /* @__PURE__ */ jsx("a", {
-				href: link.url,
-				target: "_blank",
-				rel: "noopener noreferrer",
-				className: "fb-consent__link",
-				children: link.label
-			}, link.url))
-		}) : null]
+		children: [
+			html ? /* @__PURE__ */ jsx("div", {
+				className: "fb-consent__statement",
+				dangerouslySetInnerHTML: { __html: html }
+			}) : plainStatement ? /* @__PURE__ */ jsx("span", {
+				className: "fb-consent__statement",
+				children: plainStatement
+			}) : null,
+			!isNotice && required && (html || plainStatement) ? /* @__PURE__ */ jsx("span", {
+				className: "fb-field__required",
+				"aria-hidden": "true",
+				children: " *"
+			}) : null,
+			isNotice ? null : /* @__PURE__ */ jsx(Checkbox, {
+				id,
+				name,
+				checked: value ?? false,
+				onChange,
+				onBlur,
+				required,
+				disabled,
+				invalid: errors.length > 0,
+				describedById,
+				ariaLabel: plainStatement ?? name
+			}),
+			link ? /* @__PURE__ */ jsx("span", {
+				className: "fb-consent__links",
+				children: /* @__PURE__ */ jsx("a", {
+					href: link.url,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "fb-consent__link",
+					children: link.label
+				})
+			}) : null
+		]
 	});
 });
 //#endregion

package/dist/react/renderers/consent.js.map

@@ -1 +1 @@
-{"version":3,"file":"consent.js","names":[],"sources":["../../../src/react/renderers/consent.tsx"],"sourcesContent":["'use client'\n\nimport { useId } from 'react'\nimport type { ConsentLink } from '../../consent/defineConsentSource'\nimport { defineFieldRenderer } from '../contract'\nimport { Checkbox } from '../primitives/Checkbox'\nimport { FieldShell } from '../primitives/FieldShell'\n\nexport const consentRenderer = defineFieldRenderer<boolean>(\n\t({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {\n\t\tconst id = useId()\n\t\tconst describedById = `${id}-desc`\n\t\t// The visible agreement text labels the checkbox. Prefer the explicit `statement`; fall back to the\n\t\t// field `label` so a consent field authored with only a label (or a blank statement) is never an\n\t\t// unlabelled control (a11y). A blank or whitespace-only value counts as absent.\n\t\tconst text = (raw: unknown): string | undefined =>\n\t\t\ttypeof raw === 'string' && raw.trim() !== '' ? raw : undefined\n\t\tconst statement = text(field.statement) ?? text(field.label)\n\n\t\tconst links: ConsentLink[] = Array.isArray(field.consentLinks)\n\t\t\t? (field.consentLinks as ConsentLink[])\n\t\t\t: (() => {\n\t\t\t\t\tconst sc = field.sourceConfig as Record<string, unknown> | undefined\n\t\t\t\t\tif (sc && typeof sc.url === 'string' && sc.url) {\n\t\t\t\t\t\treturn [{ label: typeof sc.label === 'string' ? sc.label : 'Policy', url: sc.url }]\n\t\t\t\t\t}\n\t\t\t\t\treturn []\n\t\t\t\t})()\n\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={statement}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\twarnings={warnings}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<Checkbox\n\t\t\t\t\tid={id}\n\t\t\t\t\tname={name}\n\t\t\t\t\tchecked={value ?? false}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t/>\n\t\t\t\t{links.length > 0 ? (\n\t\t\t\t\t<span className=\"fb-consent__links\">\n\t\t\t\t\t\t{links.map((link) => (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={link.url}\n\t\t\t\t\t\t\t\thref={link.url}\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tclassName=\"fb-consent__link\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{link.label}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkB,qBAC7B,EAAE,OAAO,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,UAAU,eAAe;CACnF,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,GAAG,GAAG;CAI5B,MAAM,QAAQ,QACb,OAAO,QAAQ,YAAY,IAAI,KAAK,MAAM,KAAK,MAAM,KAAA;CACtD,MAAM,YAAY,KAAK,MAAM,SAAS,KAAK,KAAK,MAAM,KAAK;CAE3D,MAAM,QAAuB,MAAM,QAAQ,MAAM,YAAY,IACzD,MAAM,sBACA;EACP,MAAM,KAAK,MAAM;EACjB,IAAI,MAAM,OAAO,GAAG,QAAQ,YAAY,GAAG,KAC1C,OAAO,CAAC;GAAE,OAAO,OAAO,GAAG,UAAU,WAAW,GAAG,QAAQ;GAAU,KAAK,GAAG;EAAI,CAAC;EAEnF,OAAO,CAAC;CACT,GAAG;CAEL,OACC,qBAAC,YAAD;EACK;EACJ,OAAO;EACP,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACE;EACK;YAPhB,CASC,oBAAC,UAAD;GACK;GACE;GACN,SAAS,SAAS;GACR;GACF;GACE;GACA;GACV,SAAS,OAAO,SAAS;GACV;EACf,CAAA,GACA,MAAM,SAAS,IACf,oBAAC,QAAD;GAAM,WAAU;aACd,MAAM,KAAK,SACX,oBAAC,KAAD;IAEC,MAAM,KAAK;IACX,QAAO;IACP,KAAI;IACJ,WAAU;cAET,KAAK;GACJ,GAPG,KAAK,GAOR,CACH;EACI,CAAA,IACH,IACO;;AAEd,CACD"}
+{"version":3,"file":"consent.js","names":[],"sources":["../../../src/react/renderers/consent.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo } from 'react'\nimport { sanitizeUrl } from '../../actions/body/converters'\nimport { serializeBody } from '../../actions/body/serializeBody'\nimport { textOfBody } from '../../actions/body/textOfBody'\nimport { defineFieldRenderer } from '../contract'\nimport { Checkbox } from '../primitives/Checkbox'\nimport { FieldShell } from '../primitives/FieldShell'\n\ntype ConsentLink = { label: string; url: string }\n\nconst text = (raw: unknown): string | undefined =>\n\ttypeof raw === 'string' && raw.trim() !== '' ? raw : undefined\n\n/**\n * HTML for a rich text statement. A plain string never goes through this path: `serializeBody`\n * interpolates a string body unescaped (its pre-richText behavior), so rendering one as HTML would\n * let literal markup execute; the renderer shows a plain string as text instead.\n */\nconst richStatementHtml = (statement: unknown): string | undefined => {\n\tif (typeof statement === 'string' || statement == null) {\n\t\treturn undefined\n\t}\n\tconst html = serializeBody(statement, { values: [], descriptors: [] })\n\treturn html === '' ? undefined : html\n}\n\n/**\n * The resolved policy link, or nothing unless the source carries both a url and a name to show\n * for it: an anchor labelled by a raw URL or a machine key is worse than no anchor. The href is\n * sanitized like every other url the package renders, since a source is admin-authored and can\n * point anywhere (`sanitizeUrl` keeps http(s)/mailto/tel and relative urls, and neutralizes the\n * rest to `#`).\n */\nconst linkOf = (raw: unknown): ConsentLink | undefined => {\n\tconst link = raw as Partial<ConsentLink> | undefined\n\tconst label = text(link?.label)\n\treturn label && typeof link?.url === 'string' && link.url !== ''\n\t\t? { label, url: sanitizeUrl(link.url) }\n\t\t: undefined\n}\n\n/**\n * The `statement` and `link` this reads are server-resolved from the field's consent source and\n * injected by `toFormDocument(doc, { consentStatements })`; the form document itself carries only\n * the source key, so a form rendered without that step shows no statement rather than a stale one.\n * The wording arrives already selected for the field's display (a notice source's\n * `noticeStatement` lands here as `statement`), so this renderer never picks between phrasings.\n * A `display: 'notice'` field renders the statement and link as passive prose with no checkbox and\n * no required marker: submitting the form is the consent, and the server records the agreement.\n */\nexport const consentRenderer = defineFieldRenderer<boolean>(\n\t({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {\n\t\tconst describedById = `${id}-desc`\n\t\tconst isNotice = field.display === 'notice'\n\n\t\t// The checkbox's accessible name is always plain text, regardless of the statement's shape,\n\t\t// so it stays a single unambiguous string even though the visible statement can carry\n\t\t// formatting and inline links. With no statement resolved the field is misconfigured; the\n\t\t// machine name still beats leaving the control unnamed.\n\t\tconst plainStatement = text(textOfBody(field.statement))\n\t\tconst html = useMemo(() => richStatementHtml(field.statement), [field.statement])\n\t\tconst link = linkOf(field.link)\n\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={isNotice ? false : required}\n\t\t\t\terrors={errors}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t{html ? (\n\t\t\t\t\t// The statement is a plain sibling, never a <label>: a native <label> forwards clicks to\n\t\t\t\t\t// its control even for descendant links (they aren't \"labelable\" elements per the HTML\n\t\t\t\t\t// spec), so an inline link here would also silently toggle the checkbox. The checkbox's\n\t\t\t\t\t// name comes from aria-label instead. A <div>, because serializeBody emits block\n\t\t\t\t\t// elements (<p>, headings, lists) that are invalid inside inline wrappers.\n\t\t\t\t\t// Safe to inject: serializeBody HTML-escapes all text and sanitizes link URLs.\n\t\t\t\t\t// biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is produced by our escaping serializer, never raw user input\n\t\t\t\t\t<div className=\"fb-consent__statement\" dangerouslySetInnerHTML={{ __html: html }} />\n\t\t\t\t) : plainStatement ? (\n\t\t\t\t\t<span className=\"fb-consent__statement\">{plainStatement}</span>\n\t\t\t\t) : null}\n\t\t\t\t{!isNotice && required && (html || plainStatement) ? (\n\t\t\t\t\t<span className=\"fb-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t{' *'}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t\t{isNotice ? null : (\n\t\t\t\t\t<Checkbox\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={name}\n\t\t\t\t\t\tchecked={value ?? false}\n\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\trequired={required}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t\t\tariaLabel={plainStatement ?? name}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{link ? (\n\t\t\t\t\t<span className=\"fb-consent__links\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref={link.url}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\tclassName=\"fb-consent__link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{link.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;;;;;AAYA,MAAM,QAAQ,QACb,OAAO,QAAQ,YAAY,IAAI,KAAK,MAAM,KAAK,MAAM,KAAA;;;;;;AAOtD,MAAM,qBAAqB,cAA2C;CACrE,IAAI,OAAO,cAAc,YAAY,aAAa,MACjD;CAED,MAAM,OAAO,cAAc,WAAW;EAAE,QAAQ,CAAC;EAAG,aAAa,CAAC;CAAE,CAAC;CACrE,OAAO,SAAS,KAAK,KAAA,IAAY;AAClC;;;;;;;;AASA,MAAM,UAAU,QAA0C;CACzD,MAAM,OAAO;CACb,MAAM,QAAQ,KAAK,MAAM,KAAK;CAC9B,OAAO,SAAS,OAAO,MAAM,QAAQ,YAAY,KAAK,QAAQ,KAC3D;EAAE;EAAO,KAAK,YAAY,KAAK,GAAG;CAAE,IACpC,KAAA;AACJ;;;;;;;;;;AAWA,MAAa,kBAAkB,qBAC7B,EAAE,OAAO,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,eAAe;CAC7E,MAAM,gBAAgB,GAAG,GAAG;CAC5B,MAAM,WAAW,MAAM,YAAY;CAMnC,MAAM,iBAAiB,KAAK,WAAW,MAAM,SAAS,CAAC;CACvD,MAAM,OAAO,cAAc,kBAAkB,MAAM,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC;CAChF,MAAM,OAAO,OAAO,MAAM,IAAI;CAE9B,OACC,qBAAC,YAAD;EACK;EACJ,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EACzE,UAAU,WAAW,QAAQ;EACrB;EACO;YALhB;GAOE,OAQA,oBAAC,OAAD;IAAK,WAAU;IAAwB,yBAAyB,EAAE,QAAQ,KAAK;GAAI,CAAA,IAChF,iBACH,oBAAC,QAAD;IAAM,WAAU;cAAyB;GAAqB,CAAA,IAC3D;GACH,CAAC,YAAY,aAAa,QAAQ,kBAClC,oBAAC,QAAD;IAAM,WAAU;IAAqB,eAAY;cAC/C;GACI,CAAA,IACH;GACH,WAAW,OACX,oBAAC,UAAD;IACK;IACE;IACN,SAAS,SAAS;IACR;IACF;IACE;IACA;IACV,SAAS,OAAO,SAAS;IACV;IACf,WAAW,kBAAkB;GAC7B,CAAA;GAED,OACA,oBAAC,QAAD;IAAM,WAAU;cACf,oBAAC,KAAD;KACC,MAAM,KAAK;KACX,QAAO;KACP,KAAI;KACJ,WAAU;eAET,KAAK;IACJ,CAAA;GACE,CAAA,IACH;EACO;;AAEd,CACD"}

package/dist/react/renderers/date.js

@@ -0,0 +1,33 @@
+"use client";
+import { defineFieldRenderer } from "../contract.js";
+import { FieldShell } from "../primitives/FieldShell.js";
+import { Input } from "../primitives/Input.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/renderers/date.tsx
+const dateRenderer = defineFieldRenderer(({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {
+	const describedById = `${id}-desc`;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		describedById,
+		children: /* @__PURE__ */ jsx(Input, {
+			id,
+			name,
+			type: "date",
+			value: value ?? "",
+			onChange,
+			onBlur,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		})
+	});
+});
+//#endregion
+export { dateRenderer };
+
+//# sourceMappingURL=date.js.map

package/dist/react/renderers/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","names":[],"sources":["../../../src/react/renderers/date.tsx"],"sourcesContent":["'use client'\n\nimport { defineFieldRenderer } from '../contract'\nimport { FieldShell } from '../primitives/FieldShell'\nimport { Input } from '../primitives/Input'\n\nexport const dateRenderer = defineFieldRenderer<string>(\n\t({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {\n\t\tconst describedById = `${id}-desc`\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tid={id}\n\t\t\t\t\tname={name}\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tvalue={value ?? ''}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t/>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;AAMA,MAAa,eAAe,qBAC1B,EAAE,OAAO,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,eAAe;CAC7E,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACO;YAEf,oBAAC,OAAD;GACK;GACE;GACN,MAAK;GACL,OAAO,SAAS;GACN;GACF;GACE;GACA;GACV,SAAS,OAAO,SAAS;GACV;EACf,CAAA;CACU,CAAA;AAEd,CACD"}

package/dist/react/renderers/email.js

@@ -2,19 +2,17 @@
 import { defineFieldRenderer } from "../contract.js";
 import { FieldShell } from "../primitives/FieldShell.js";
 import { Input } from "../primitives/Input.js";
-import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/renderers/email.tsx
-const emailRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
-	const id = useId();
+const emailRenderer = defineFieldRenderer(({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {
 	const describedById = `${id}-desc`;
+	const autoComplete = typeof field.autocomplete === "string" && field.autocomplete.trim() ? field.autocomplete : void 0;
 	return /* @__PURE__ */ jsx(FieldShell, {
 		id,
 		label: field.label,
 		description: typeof field.description === "string" ? field.description : void 0,
 		required,
 		errors,
-		warnings,
 		describedById,
 		children: /* @__PURE__ */ jsx(Input, {
 			id,
@@ -27,7 +25,8 @@ const emailRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlu
 			required,
 			disabled,
 			invalid: errors.length > 0,
-			describedById
+			describedById,
+			autoComplete
 		})
 	});
 });

package/dist/react/renderers/email.js.map

@@ -1 +1 @@
-{"version":3,"file":"email.js","names":[],"sources":["../../../src/react/renderers/email.tsx"],"sourcesContent":["'use client'\n\nimport { useId } from 'react'\nimport { defineFieldRenderer } from '../contract'\nimport { FieldShell } from '../primitives/FieldShell'\nimport { Input } from '../primitives/Input'\n\nexport const emailRenderer = defineFieldRenderer<string>(\n\t({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {\n\t\tconst id = useId()\n\t\tconst describedById = `${id}-desc`\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\twarnings={warnings}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tid={id}\n\t\t\t\t\tname={name}\n\t\t\t\t\ttype=\"email\"\n\t\t\t\t\tvalue={value ?? ''}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\tplaceholder={typeof field.placeholder === 'string' ? field.placeholder : undefined}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t/>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;;AAOA,MAAa,gBAAgB,qBAC3B,EAAE,OAAO,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,UAAU,eAAe;CACnF,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACE;EACK;YAEf,oBAAC,OAAD;GACK;GACE;GACN,MAAK;GACL,OAAO,SAAS;GACN;GACF;GACR,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;GAC/D;GACA;GACV,SAAS,OAAO,SAAS;GACV;EACf,CAAA;CACU,CAAA;AAEd,CACD"}
+{"version":3,"file":"email.js","names":[],"sources":["../../../src/react/renderers/email.tsx"],"sourcesContent":["'use client'\n\nimport { defineFieldRenderer } from '../contract'\nimport { FieldShell } from '../primitives/FieldShell'\nimport { Input } from '../primitives/Input'\n\nexport const emailRenderer = defineFieldRenderer<string>(\n\t({ field, id, name, value, onChange, onBlur, errors, required, disabled }) => {\n\t\tconst describedById = `${id}-desc`\n\t\tconst autoComplete =\n\t\t\ttypeof field.autocomplete === 'string' && field.autocomplete.trim()\n\t\t\t\t? field.autocomplete\n\t\t\t\t: undefined\n\t\treturn (\n\t\t\t<FieldShell\n\t\t\t\tid={id}\n\t\t\t\tlabel={field.label}\n\t\t\t\tdescription={typeof field.description === 'string' ? field.description : undefined}\n\t\t\t\trequired={required}\n\t\t\t\terrors={errors}\n\t\t\t\tdescribedById={describedById}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tid={id}\n\t\t\t\t\tname={name}\n\t\t\t\t\ttype=\"email\"\n\t\t\t\t\tvalue={value ?? ''}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\tplaceholder={typeof field.placeholder === 'string' ? field.placeholder : undefined}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinvalid={errors.length > 0}\n\t\t\t\t\tdescribedById={describedById}\n\t\t\t\t\tautoComplete={autoComplete}\n\t\t\t\t/>\n\t\t\t</FieldShell>\n\t\t)\n\t}\n)\n"],"mappings":";;;;;;AAMA,MAAa,gBAAgB,qBAC3B,EAAE,OAAO,IAAI,MAAM,OAAO,UAAU,QAAQ,QAAQ,UAAU,eAAe;CAC7E,MAAM,gBAAgB,GAAG,GAAG;CAC5B,MAAM,eACL,OAAO,MAAM,iBAAiB,YAAY,MAAM,aAAa,KAAK,IAC/D,MAAM,eACN,KAAA;CACJ,OACC,oBAAC,YAAD;EACK;EACJ,OAAO,MAAM;EACb,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;EAC/D;EACF;EACO;YAEf,oBAAC,OAAD;GACK;GACE;GACN,MAAK;GACL,OAAO,SAAS;GACN;GACF;GACR,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc,KAAA;GAC/D;GACA;GACV,SAAS,OAAO,SAAS;GACV;GACD;EACd,CAAA;CACU,CAAA;AAEd,CACD"}