@zeno-lib/forms 0.9.1 → 0.10.1

package/dist/lib/use-form-dialog.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useRef, useState } from "react";
-//#region src/lib/use-form-dialog.ts
+// src/lib/use-form-dialog.ts
 /**
 * Open/close state for a dialog-hosted form, one "session" per `open()`.
 *
@@ -91,7 +91,7 @@ function useLeaveGuard({ hasUnsavedChanges, onSave }) {
 }
 const FOCUSABLE = "input:not([type=\"hidden\"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 function attributeSelector(attribute, value) {
-	return `[${attribute}="${value.replace(/["\\]/g, "\\$&")}"]`;
+	return `[${attribute}="${value.replace(/["\\]/gu, "\\$&")}"]`;
 }
 /**
 * Find the element to focus for field `name` inside `root`: the control with
@@ -108,5 +108,4 @@ function findFieldElement(root, name) {
 	const labelFor = fieldRoot.querySelector("label[for]")?.getAttribute("for");
 	return (labelFor ? fieldRoot.querySelector(attributeSelector("id", labelFor)) : null) ?? fieldRoot.querySelector(FOCUSABLE);
 }
-//#endregion
 export { findFieldElement, useFormDialog, useLeaveGuard };

package/dist/lib/use-formatted-number.d.mts

@@ -1,5 +1,4 @@
 import { ChangeEvent, ClipboardEvent } from "react";
-//#region src/lib/use-formatted-number.d.ts
 type UseFormattedNumberOptions = {
   /** The stored value. `null`/`undefined` renders an empty input. */
   value: number | null | undefined;
@@ -57,5 +56,4 @@ type FormattedNumberInputProps = {
  * can use it.
  */
 declare function useFormattedNumber({ value, onValueChange, onBlur, locale, maximumFractionDigits, padFraction, useGrouping, allowNegative, maxIntegerDigits, min, max, toDisplay, fromDisplay }: UseFormattedNumberOptions): FormattedNumberInputProps;
-//#endregion
 export { type FormattedNumberInputProps, type UseFormattedNumberOptions, useFormattedNumber };

package/dist/lib/use-formatted-number.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { formatNumber, mapCaret, parseLocaleNumber, parseTypedNumber, roundTo } from "./formatted-number.mjs";
 import { useLayoutEffect, useReducer, useRef, useState } from "react";
-//#region src/lib/use-formatted-number.ts
+// src/lib/use-formatted-number.ts
 const identity = (value) => value;
 function clamp(value, min, max) {
 	let next = value;
@@ -100,5 +100,4 @@ function useFormattedNumber({ value, onValueChange, onBlur, locale, maximumFract
 		value: text
 	};
 }
-//#endregion
 export { useFormattedNumber };

package/dist/lib/use-is-invalid.d.mts

@@ -1,8 +1,6 @@
 import { AnyFieldApi } from "@tanstack/react-form";
-//#region src/lib/use-is-invalid.d.ts
 declare function useIsInvalid(field: AnyFieldApi): boolean;
 declare function useHideFieldErrors(field: AnyFieldApi): boolean;
 declare function useIsFieldRequired(field: AnyFieldApi): boolean;
 declare function useIsFieldRequiredBySchema(field: AnyFieldApi): boolean;
-//#endregion
 export { useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid };

package/dist/lib/use-is-invalid.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { getFormHideFieldErrors, getFormValidationMode, isFieldRequired, isFieldRequiredBySchema } from "./validation-modes.mjs";
 import { useSelector } from "@tanstack/react-form";
-//#region src/lib/use-is-invalid.ts
+// src/lib/use-is-invalid.ts
 function hasFieldLevelError(errorMap, errorSourceMap, cause) {
 	if (!(errorMap && errorSourceMap)) return false;
 	return errorSourceMap[cause] === "field" && errorMap[cause] !== void 0;
@@ -30,5 +30,4 @@ function useIsFieldRequired(field) {
 function useIsFieldRequiredBySchema(field) {
 	return isFieldRequiredBySchema(field.form, field.name);
 }
-//#endregion
 export { useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid };

package/dist/lib/use-rebased-default-values.d.mts

@@ -1,10 +1,8 @@
 import { AnyFormApi } from "@tanstack/react-form";
-//#region src/lib/use-rebased-default-values.d.ts
 declare function useRebasedDefaultValues<T>(callerDefaults: T): {
   defaultValues: T;
   onMount: (props: {
     formApi: AnyFormApi;
   }) => void;
 };
-//#endregion
 export { useRebasedDefaultValues };

package/dist/lib/use-rebased-default-values.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { evaluate } from "@tanstack/react-form";
 import { useCallback, useLayoutEffect, useRef } from "react";
-//#region src/lib/use-rebased-default-values.ts
+// src/lib/use-rebased-default-values.ts
 function useRebasedDefaultValues(callerDefaults) {
 	const liveForm = useRef(null);
 	const lastCallerDefaults = useRef(callerDefaults);
@@ -18,5 +18,4 @@ function useRebasedDefaultValues(callerDefaults) {
 		onMount
 	};
 }
-//#endregion
 export { useRebasedDefaultValues };

package/dist/lib/use-unsaved-changes-warning.d.mts

@@ -1,6 +1,4 @@
 import { AnyFormApi } from "@tanstack/react-form";
-//#region src/lib/use-unsaved-changes-warning.d.ts
 type UnsavedChangesMode = "if-changed" | "if-touched";
 declare function useUnsavedChangesWarning(form: AnyFormApi, enabled: boolean | UnsavedChangesMode): void;
-//#endregion
 export { type UnsavedChangesMode, useUnsavedChangesWarning };

package/dist/lib/use-unsaved-changes-warning.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useSelector } from "@tanstack/react-form";
 import { useEffect } from "react";
-//#region src/lib/use-unsaved-changes-warning.ts
+// src/lib/use-unsaved-changes-warning.ts
 function useUnsavedChangesWarning(form, enabled) {
 	let mode;
 	if (enabled === false) mode = null;
@@ -20,5 +20,4 @@ function useUnsavedChangesWarning(form, enabled) {
 		return () => window.removeEventListener("beforeunload", handler);
 	}, [active]);
 }
-//#endregion
 export { useUnsavedChangesWarning };

package/dist/lib/validation-error.d.mts

@@ -1,4 +1,3 @@
-//#region src/lib/validation-error.d.ts
 type FieldMessage = string | readonly string[];
 declare class ValidationError extends Error {
   readonly fields: Readonly<Record<string, FieldMessage>>;
@@ -8,5 +7,4 @@ declare class ValidationError extends Error {
     message?: string;
   });
 }
-//#endregion
 export { type FieldMessage, ValidationError };

package/dist/lib/validation-error.mjs

@@ -1,4 +1,4 @@
-//#region src/lib/validation-error.ts
+// src/lib/validation-error.ts
 var ValidationError = class extends Error {
 	constructor(fields, options = {}) {
 		super(options.message ?? "Validation failed");
@@ -7,5 +7,4 @@ var ValidationError = class extends Error {
 		this.formError = options.formError;
 	}
 };
-//#endregion
 export { ValidationError };

package/dist/lib/validation-logic.d.mts

@@ -1,5 +1,3 @@
 import { ValidationLogicFn } from "@tanstack/react-form";
-//#region src/lib/validation-logic.d.ts
 declare const blurThenChangeLogic: ValidationLogicFn;
-//#endregion
 export { blurThenChangeLogic };

package/dist/lib/validation-logic.mjs

@@ -1,5 +1,5 @@
 "use client";
-//#region src/lib/validation-logic.ts
+// src/lib/validation-logic.ts
 function pickLiveValidator(validators, isAsync) {
 	const fn = isAsync ? validators?.onChangeAsync ?? validators?.onBlurAsync : validators?.onChange ?? validators?.onBlur;
 	return fn ? {
@@ -110,5 +110,4 @@ function blurThenChangeLogicImpl(props) {
 	});
 }
 const blurThenChangeLogic = blurThenChangeLogicImpl;
-//#endregion
 export { blurThenChangeLogic };

package/dist/lib/validation-modes.d.mts

@@ -1,6 +1,5 @@
 import { StandardSchemaLike } from "./schema-required.mjs";
 import { AnyFormApi } from "@tanstack/react-form";
-//#region src/lib/validation-modes.d.ts
 type ValidationMode = "change" | "blur" | "submit" | "blur-then-change";
 declare const DEFAULT_VALIDATION_MODE: ValidationMode;
 type ZenoFormState = {
@@ -16,5 +15,4 @@ declare function getFormHideFieldErrors(form: AnyFormApi): boolean;
 declare function getFormSchema(form: AnyFormApi): StandardSchemaLike | undefined;
 declare function isFieldRequiredBySchema(form: AnyFormApi, name: string): boolean;
 declare function isFieldRequired(form: AnyFormApi, name: string): boolean;
-//#endregion
 export { DEFAULT_VALIDATION_MODE, type ValidationMode, getFormHideFieldErrors, getFormSchema, getFormValidationMode, isFieldRequired, isFieldRequiredBySchema, setFormZenoState };

package/dist/lib/validation-modes.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { toRequiredPathKey } from "./schema-required.mjs";
-//#region src/lib/validation-modes.ts
+// src/lib/validation-modes.ts
 const DEFAULT_VALIDATION_MODE = "blur-then-change";
 const DEFAULT_FORM_STATE = {
 	hideFieldErrors: false,
@@ -39,5 +39,4 @@ function isFieldRequiredBySchema(form, name) {
 function isFieldRequired(form, name) {
 	return getFormZenoState(form).requiredIndicator && isFieldRequiredBySchema(form, name);
 }
-//#endregion
 export { DEFAULT_VALIDATION_MODE, getFormHideFieldErrors, getFormSchema, getFormValidationMode, isFieldRequired, isFieldRequiredBySchema, setFormZenoState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"
@@ -33,18 +33,18 @@
     "@tanstack/react-form": "1.33.5"
   },
   "devDependencies": {
-    "@types/node": "26.6.4",
+    "@types/node": "26.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@zeno-lib/test": "^0.1.1",
+    "@zeno-lib/test": "^0.1.2",
     "@zeno-lib/typescript": "^1.2.0",
     "@zeno-lib/ui": "^0.0.1",
-    "lucide-react": "^1.52.0",
-    "tsdown": "^0.23.0",
+    "lucide-react": "^1.62.0",
+    "tsdown": "^0.23.1",
     "typescript": "7.0.2",
-    "vite": "8.3.3",
-    "vitest": "5.0.3",
-    "zod": "^4.6.5"
+    "vite": "8.3.5",
+    "vitest": "5.0.5",
+    "zod": "^4.6.7"
   },
   "peerDependencies": {
     "@tanstack/react-devtools": ">=0.10",

package/src/composition.test.tsx

@@ -11,9 +11,9 @@ import {
   withForm,
 } from "./create-form"
 
-const STREET_LABEL = /Street/
-const CITY_LABEL = /City/
-const BILLING_STREET_LABEL = /Billing street/
+const STREET_LABEL = /Street/u
+const CITY_LABEL = /City/u
+const BILLING_STREET_LABEL = /Billing street/u
 
 afterEach(() => {
   cleanup()

package/src/control-field.test.tsx

@@ -9,7 +9,7 @@ afterEach(() => {
   cleanup()
 })
 
-const PHONE = /Phone/
+const PHONE = /Phone/u
 const SUBMIT = { name: "Submit" }
 
 // A control a `<label htmlFor>` can't name: only `aria-labelledby` does.

package/src/date-picker-field.test.tsx

@@ -9,9 +9,9 @@ import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
 import { Form, FormProvider, useForm } from "./create-form"
 import type { DateValueType } from "./lib/date-value"
 
-const DAY_LABEL = /Day/
-const OCTOBER_9_SELECTED = /October 9th, 2026, selected/
-const OCTOBER_10 = /October 10th, 2026/
+const DAY_LABEL = /Day/u
+const OCTOBER_9_SELECTED = /October 9th, 2026, selected/u
+const OCTOBER_10 = /October 10th, 2026/u
 
 afterEach(() => {
   cleanup()

package/src/field-hints.test.tsx

@@ -0,0 +1,118 @@
+import { cleanup, render, screen } from "@zeno-lib/test/testing-library"
+import userEvent from "@zeno-lib/test/user-event"
+import { afterEach, expect, test, vi } from "vitest"
+import { z } from "zod"
+import { Form, FormProvider, useForm } from "./create-form"
+
+afterEach(cleanup)
+
+type Hint = { field: string; scale?: "fraction" | "percent" }
+
+// Where `@zeno-lib/schema` registers a column's hint.
+const HINTS_KEY = Symbol.for("@zeno-lib/field-hints")
+const holder = globalThis as {
+  [HINTS_KEY]?: z.core.$ZodRegistry<Hint>
+}
+const hints = holder[HINTS_KEY] ?? z.registry<Hint>()
+holder[HINTS_KEY] = hints
+
+const hinted = <T extends z.ZodType>(column: T, hint: Hint) => {
+  hints.add(column, hint)
+  return column
+}
+
+// What a `percentage()` or `year()` column of `@zeno-lib/db/schema` hands a
+// form: the rule, its hint, and the wrappers of a nullable column.
+const schema = z.object({
+  built: hinted(z.int().min(1900).max(2100), { field: "year" })
+    .nullable()
+    .optional(),
+  occupancy: hinted(z.number().min(0).max(1), {
+    field: "percentage",
+    scale: "fraction",
+  })
+    .nullable()
+    .optional()
+    // Metadata of the form's own, around the column's schema.
+    .describe("Share of the floor area let"),
+  rate: hinted(z.number().min(-1).max(1), {
+    field: "percentage",
+    scale: "fraction",
+  })
+    // A caller's refinement narrows the column's bounds.
+    .max(0.5)
+    .nullable()
+    .optional(),
+})
+
+const captured: { values?: z.input<typeof schema> } = {}
+
+function Harness({ occupancyMax }: { occupancyMax?: number }) {
+  const form = useForm({
+    defaultValues: { occupancy: 0.125 },
+    onSubmit: vi.fn(),
+    schema,
+  })
+  const { PercentageField, Subscribe, YearField } = form
+  return (
+    <FormProvider form={form}>
+      <Form>
+        <PercentageField
+          label="Occupancy"
+          locale="en-US"
+          max={occupancyMax}
+          name="occupancy"
+        />
+        <PercentageField label="Rate" locale="en-US" name="rate" />
+        <YearField label="Built" name="built" />
+        <Subscribe selector={(state) => state.values}>
+          {(values) => {
+            captured.values = values
+            return null
+          }}
+        </Subscribe>
+      </Form>
+    </FormProvider>
+  )
+}
+
+test("a percentage field takes its scale and bounds from the column's hint", async () => {
+  const user = userEvent.setup()
+  render(<Harness />)
+  const occupancy = screen.getByLabelText("Occupancy") as HTMLInputElement
+  expect(occupancy.value).toBe("12.5")
+
+  await user.clear(occupancy)
+  await user.type(occupancy, "150")
+  await user.tab()
+  expect(captured.values?.occupancy).toBe(1)
+
+  // A bound below 0 lets the field take a negative rate, and the field
+  // clamps to the bound the schema narrowed.
+  const rate = screen.getByLabelText("Rate")
+  await user.type(rate, "-25")
+  await user.tab()
+  expect(captured.values?.rate).toBe(-0.25)
+  await user.clear(rate)
+  await user.type(rate, "90")
+  await user.tab()
+  expect(captured.values?.rate).toBe(0.5)
+})
+
+test("a year field clamps to the column's hinted bounds", async () => {
+  const user = userEvent.setup()
+  render(<Harness />)
+  await user.type(screen.getByLabelText("Built"), "1850")
+  await user.tab()
+  expect(captured.values?.built).toBe(1900)
+})
+
+test("a prop wins over the hint", async () => {
+  const user = userEvent.setup()
+  render(<Harness occupancyMax={0.5} />)
+  const occupancy = screen.getByLabelText("Occupancy")
+  await user.clear(occupancy)
+  await user.type(occupancy, "90")
+  await user.tab()
+  expect(captured.values?.occupancy).toBe(0.5)
+})

package/src/fields/input-field.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getNoTextValue } from "@zeno-lib/forms/lib/empty-value"
 import { useFieldControl } from "@zeno-lib/forms/lib/use-field-control"
 import { Children, type ComponentProps, type ReactNode } from "react"
 import { Input } from "@/components/ui/input"
@@ -29,10 +30,10 @@ function InputField({
   required,
   ...props
 }: InputFieldProps) {
-  const field = useFieldContext<string>()
+  const field = useFieldContext<string | null>()
   // The label names the input through `htmlFor`, so the input needs no
   // `aria-labelledby` and the hook doesn't get `label`.
-  const { controlProps, ...shell } = useFieldControl<string>({
+  const { controlProps, ...shell } = useFieldControl<string | null>({
     description,
     disabled,
     required,
@@ -40,11 +41,12 @@ function InputField({
   const hasAddons = Children.count(children) > 0
 
   // A text input keeps the `""` the user typed, where `controlProps.onChange`
-  // would store the field's empty value.
+  // would store the field's empty value, unless the schema takes `null`: then
+  // no text is `null`, as the field starts, so it saves as none.
   const inputProps = {
     ...controlProps,
     onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-      field.handleChange(event.target.value),
+      field.handleChange(event.target.value || getNoTextValue(field)),
     value: field.state.value ?? "",
     ...props,
   }

package/src/fields/percentage-field.tsx

@@ -2,6 +2,7 @@
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
+import { getFieldHints } from "@zeno-lib/forms/lib/field-hints"
 import { useFormattedNumber } from "@zeno-lib/forms/lib/use-formatted-number"
 import { InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
 import { InputField, type InputFieldProps } from "./input-field"
@@ -14,13 +15,16 @@ type PercentageFieldProps = Omit<
    * How the form value relates to what the user types:
    * - `"percent"` (default): the value is the number shown, `12.5` ↔ `12.5 %`.
    * - `"fraction"`: the value is a ratio, `0.125` ↔ `12.5 %`.
+   *
+   * A `percentage()` column of `@zeno-lib/db/schema` sets it, as it sets
+   * `min` and `max`.
    */
   scale?: "fraction" | "percent"
   /** BCP 47 locale driving the decimal separator. Defaults to the runtime locale. */
   locale?: string
   /** Digits allowed after the decimal separator (of the shown percentage). Defaults to `2`. */
   fractionDigits?: number
-  /** Accept negative percentages. Defaults to `false`. */
+  /** Accept negative percentages. Defaults to whether `min` is below 0. */
   allowNegative?: boolean
   /** Clamp on blur, in the form value's scale. */
   min?: number
@@ -33,23 +37,27 @@ const fromPercent = (value: number) => value / 100
 
 /**
  * Percentage input with a `%` add-on. The form value is `number | null`, on
- * the `scale` you pick (`0–100` by default, `0–1` with `scale="fraction"`).
+ * the `scale` you pick, or the one the schema's `percentage()` column hints
+ * (`0–100` by default, `0–1` with `scale="fraction"`).
  */
 function PercentageField({
-  allowNegative = false,
+  allowNegative,
   children,
   fractionDigits = 2,
   locale,
-  max,
-  min,
-  scale = "percent",
+  max: maxProp,
+  min: minProp,
+  scale: scaleProp,
   ...props
 }: PercentageFieldProps) {
   const field = useFieldContext<number | null | undefined>()
-  const isFraction = scale === "fraction"
+  const hints = getFieldHints(field, "percentage")
+  const max = maxProp ?? hints.max
+  const min = minProp ?? hints.min
+  const isFraction = (scaleProp ?? hints.scale ?? "percent") === "fraction"
 
   const inputProps = useFormattedNumber({
-    allowNegative,
+    allowNegative: allowNegative ?? (min !== undefined && min < 0),
     locale,
     max,
     maximumFractionDigits: fractionDigits,

package/src/fields/textarea-field.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getNoTextValue } from "@zeno-lib/forms/lib/empty-value"
 import { useFieldControl } from "@zeno-lib/forms/lib/use-field-control"
 import { Children, type ComponentProps, type ReactNode } from "react"
 import { InputGroup, InputGroupTextarea } from "@/components/ui/input-group"
@@ -29,10 +30,10 @@ function TextAreaField({
   required,
   ...props
 }: TextAreaFieldProps) {
-  const field = useFieldContext<string>()
+  const field = useFieldContext<string | null>()
   // The label names the textarea through `htmlFor`, so the textarea needs no
   // `aria-labelledby` and the hook doesn't get `label`.
-  const { controlProps, ...shell } = useFieldControl<string>({
+  const { controlProps, ...shell } = useFieldControl<string | null>({
     description,
     disabled,
     required,
@@ -40,11 +41,12 @@ function TextAreaField({
   const hasAddons = Children.count(children) > 0
 
   // A textarea keeps the `""` the user typed, where `controlProps.onChange`
-  // would store the field's empty value.
+  // would store the field's empty value, unless the schema takes `null`: then
+  // no text is `null`, as the field starts, so it saves as none.
   const textareaProps = {
     ...controlProps,
     onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-      field.handleChange(event.target.value),
+      field.handleChange(event.target.value || getNoTextValue(field)),
     value: field.state.value ?? "",
     ...props,
   }

package/src/fields/year-field.tsx

@@ -2,6 +2,7 @@
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
+import { getFieldHints } from "@zeno-lib/forms/lib/field-hints"
 import { useFormattedNumber } from "@zeno-lib/forms/lib/use-formatted-number"
 import { InputField, type InputFieldProps } from "./input-field"
 
@@ -25,13 +26,17 @@ type YearFieldProps = Omit<
 
 /**
  * Four-digit year input. The form value is an integer year or `null`. No
- * thousands separator, digits only, clamped to `min`/`max` on blur.
+ * thousands separator, digits only, clamped on blur to `min`/`max`, or to the
+ * bounds the schema's `year()` column hints.
  */
-function YearField({ max, min, ...props }: YearFieldProps) {
+function YearField({ max: maxProp, min: minProp, ...props }: YearFieldProps) {
   const field = useFieldContext<number | null | undefined>()
+  const hints = getFieldHints(field, "year")
+  const max = maxProp ?? hints.max
+  const min = minProp ?? hints.min
 
   const inputProps = useFormattedNumber({
-    allowNegative: false,
+    allowNegative: min !== undefined && min < 0,
     max,
     maxIntegerDigits: 4,
     maximumFractionDigits: 0,

package/src/form-dialog.test.tsx

@@ -20,9 +20,9 @@ import type { ActionResult } from "./lib/action-result"
 import { submitAction } from "./lib/submit-action"
 import { type FormDialogController, useFormDialog } from "./lib/use-form-dialog"
 
-const NAME = /Name/
-const EMAIL = /Email/
-const INNER_NAME = /Inner name/
+const NAME = /Name/u
+const EMAIL = /Email/u
+const INNER_NAME = /Inner name/u
 
 const animatable = HTMLElement.prototype as {
   getAnimations?: () => unknown[]

package/src/form-error.test.tsx

@@ -17,7 +17,7 @@ afterEach(() => {
   vi.unstubAllGlobals()
 })
 
-const NAME = /Name/
+const NAME = /Name/u
 const SUBMIT = { name: "Submit" }
 
 const schema = z.object({ name: z.string().min(1, "Required") })

package/src/formatted-number-fields.test.tsx

@@ -11,9 +11,9 @@ import { z } from "zod"
 import { Form, FormProvider, useForm } from "./create-form"
 import { getNumberSeparators } from "./lib/formatted-number"
 
-const AMOUNT = /Amount/
-const RATE = /Rate/
-const YEAR = /Year/
+const AMOUNT = /Amount/u
+const RATE = /Rate/u
+const YEAR = /Year/u
 const CH = getNumberSeparators("de-CH").group
 
 afterEach(() => {

package/src/lib/date-value.ts

@@ -9,7 +9,8 @@
  */
 type DateValueType = "date" | "iso-date" | "iso-datetime"
 
-const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/
+// biome-ignore lint/style/useNamedCaptureGroup: named groups need ES2018, past the ES6 target
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/u
 
 function pad(value: number, length: number): string {
   return String(value).padStart(length, "0")

package/src/lib/empty-value.ts

@@ -12,8 +12,8 @@ import { getFormSchema } from "./validation-modes"
 // accepts none of them is required. A cleared field holds its empty value,
 // and so does an untouched one whose schema rejects `""` or `[]`.
 
-const NAME_SEGMENT = /[^.[\]]+/g
-const INDEX = /^\d+$/
+const NAME_SEGMENT = /[^.[\]]+/gu
+const INDEX = /^\d+$/u
 
 // `members[2].name` (or `members.2.name`) → `["members", 2, "name"]`.
 function toPathKeys(name: string): PropertyKey[] {
@@ -171,4 +171,27 @@ function getEmptyValue<T>(field: AnyFieldApi, fallback: T): T {
   ) as T
 }
 
-export { emptyValueFor, getEmptyValue, withEmptyStartValues }
+/**
+ * What a text control stores once its text is cleared: `null` where the field
+ * starts at `null` (a nullable string), so it saves as none, and `""`
+ * otherwise. Read from the schema's shape rather than by validating the form,
+ * so the other fields' values never change it.
+ */
+function getNoTextValue(field: AnyFieldApi): string | null {
+  const schema = getFormSchema(field.form)
+  const start = schema
+    ? extractZodDefaultAt(
+        schema as Parameters<typeof extractZodDefaultAt>[0],
+        toPathKeys(field.name)
+      )
+    : { ok: false as const }
+  return start.ok && start.value === null ? null : ""
+}
+
+export {
+  emptyValueFor,
+  getEmptyValue,
+  getNoTextValue,
+  toPathKeys,
+  withEmptyStartValues,
+}