@zeno-lib/forms 0.2.2 → 0.3.0

package/dist/index.d.mts

@@ -8,4 +8,5 @@ import { useFieldContext, useFormContext } from "./lib/contexts.mjs";
 import { SubmitActionOptions, SubmitActionSchema, applyActionError, submitAction } from "./lib/submit-action.mjs";
 import { useHideFieldErrors, useIsFieldRequired, useIsInvalid } from "./lib/use-is-invalid.mjs";
 import { blurThenChangeLogic } from "./lib/validation-logic.mjs";
-export { type ActionError, type ActionIssue, type ActionResult, type FieldMessage, Form, FormProvider, type SubmitActionOptions, type SubmitActionSchema, ValidationError, type ValidationMode, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid };
+import { useSelector } from "@tanstack/react-form";
+export { type ActionError, type ActionIssue, type ActionResult, type FieldMessage, Form, FormProvider, type SubmitActionOptions, type SubmitActionSchema, ValidationError, type ValidationMode, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid, useSelector };

package/dist/index.mjs

@@ -7,4 +7,5 @@ import { Form, FormProvider } from "./form-element.mjs";
 import { toActionError, toFieldName } from "./lib/action-result.mjs";
 import { applyActionError, submitAction } from "./lib/submit-action.mjs";
 import { useHideFieldErrors, useIsFieldRequired, useIsInvalid } from "./lib/use-is-invalid.mjs";
-export { Form, FormProvider, ValidationError, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid };
+import { useSelector } from "@tanstack/react-form";
+export { Form, FormProvider, ValidationError, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid, useSelector };

package/dist/lib/schema-required.mjs

@@ -22,11 +22,14 @@ function joinPath(keys) {
 function toRequiredPathKey(name) {
 	return name.replace(INDEX_IN_NAME, "[0]");
 }
-function probeContainer(expected) {
+function probeValue(expected) {
 	if (typeof expected !== "string") return;
-	const kind = expected.toLowerCase();
-	if (kind === "object") return {};
-	return kind === "array" ? [{}] : void 0;
+	switch (expected.toLowerCase()) {
+		case "object": return {};
+		case "array": return [{}];
+		case "string": return "";
+		default: return;
+	}
 }
 function fillAt(root, keys, value) {
 	let node = root;
@@ -50,20 +53,38 @@ function validateSync(schema, value) {
 	if (result instanceof Promise) return;
 	return "issues" in result && result.issues ? result.issues : [];
 }
+function recordPass(issues, probe, required) {
+	const failing = /* @__PURE__ */ new Set();
+	const filledStrings = [];
+	let descended = false;
+	for (const issue of issues) {
+		const keys = issue.path?.map(pathKey) ?? [];
+		if (keys.length === 0) continue;
+		const path = joinPath(keys);
+		failing.add(path);
+		required.add(path);
+		const value = probeValue(issue.expected);
+		if (value !== void 0 && fillAt(probe, keys, value)) {
+			descended = true;
+			if (value === "") filledStrings.push(path);
+		}
+	}
+	return {
+		descended,
+		failing,
+		filledStrings
+	};
+}
 function getRequiredPaths(schema) {
 	const required = /* @__PURE__ */ new Set();
 	const probe = {};
+	let filledStrings = [];
 	for (let depth = 0; depth < MAX_PROBE_DEPTH; depth += 1) {
 		const issues = validateSync(schema, probe);
 		if (!issues) return required;
-		let descended = false;
-		for (const issue of issues) {
-			const keys = issue.path?.map(pathKey) ?? [];
-			if (keys.length === 0) continue;
-			required.add(joinPath(keys));
-			const container = probeContainer(issue.expected);
-			if (container !== void 0 && fillAt(probe, keys, container)) descended = true;
-		}
+		const { descended, failing, filledStrings: filled } = recordPass(issues, probe, required);
+		for (const path of filledStrings) if (!failing.has(path)) required.delete(path);
+		filledStrings = filled;
 		if (!descended) break;
 	}
 	return required;

package/dist/lib/use-form-dialog.d.mts

@@ -65,8 +65,9 @@ type LeaveGuard = {
 declare function useLeaveGuard({ hasUnsavedChanges }: UseLeaveGuardOptions): LeaveGuard;
 /**
  * Find the element to focus for field `name` inside `root`: the control with
- * `id={name}` (what the shipped fields render), else the first focusable
- * element inside the field root marked `data-field={name}`.
+ * `id={name}` (fields that use the name as their id), else, inside the field
+ * root marked `data-field={name}`, the control its label points at (the shipped
+ * fields' ids come from `useId`), else that root's first focusable element.
  */
 declare function findFieldElement(root: ParentNode | null | undefined, name: string): HTMLElement | null;
 //#endregion

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

@@ -77,14 +77,18 @@ function attributeSelector(attribute, value) {
 }
 /**
 * Find the element to focus for field `name` inside `root`: the control with
-* `id={name}` (what the shipped fields render), else the first focusable
-* element inside the field root marked `data-field={name}`.
+* `id={name}` (fields that use the name as their id), else, inside the field
+* root marked `data-field={name}`, the control its label points at (the shipped
+* fields' ids come from `useId`), else that root's first focusable element.
 */
 function findFieldElement(root, name) {
 	if (!root) return null;
 	const byId = root.querySelector(attributeSelector("id", name));
 	if (byId) return byId;
-	return root.querySelector(attributeSelector("data-field", name))?.querySelector(FOCUSABLE) ?? null;
+	const fieldRoot = root.querySelector(attributeSelector("data-field", name));
+	if (!fieldRoot) return null;
+	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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"
@@ -30,8 +30,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/react-form": "1.33.5",
-    "@tanstack/react-form-nextjs": "1.33.5"
+    "@tanstack/react-form": "1.33.5"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -61,6 +60,9 @@
     },
     "@tanstack/react-form-devtools": {
       "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   },
   "publishConfig": {

package/src/fields/checkbox-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
   Field,
@@ -35,8 +35,9 @@ function CheckboxField({
   ...props
 }: CheckboxFieldProps) {
   const field = useFieldContext<boolean>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -56,7 +57,7 @@ function CheckboxField({
         )}
         aria-invalid={isInvalid || undefined}
         checked={field.state.value ?? false}
-        id={field.name}
+        id={id}
         name={field.name}
         onBlur={field.handleBlur}
         onCheckedChange={(value) => field.handleChange(value === true)}
@@ -64,7 +65,7 @@ function CheckboxField({
       />
       <FieldContent>
         {label && (
-          <FieldLabel className="font-normal" htmlFor={field.name}>
+          <FieldLabel className="font-normal" htmlFor={id}>
             {label}
             {isRequired && <RequiredIndicator />}
           </FieldLabel>

package/src/fields/checkbox-group-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
   Field,
@@ -64,8 +64,9 @@ function CheckboxGroupField<V = string>({
   required,
 }: CheckboxGroupFieldProps<V>) {
   const field = useFieldContext<V[] | null | undefined>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -116,7 +117,7 @@ function CheckboxGroupField<V = string>({
         data-slot="checkbox-group"
       >
         {options.map((option, index) => {
-          const id = `${field.name}-${index}`
+          const optionId = `${id}-${index}`
           return (
             <Field
               data-invalid={isInvalid}
@@ -127,7 +128,7 @@ function CheckboxGroupField<V = string>({
                 aria-invalid={isInvalid || undefined}
                 checked={checked.includes(option.value)}
                 disabled={disabled || option.disabled}
-                id={id}
+                id={optionId}
                 name={field.name}
                 onBlur={field.handleBlur}
                 onCheckedChange={(on) => toggle(option.value, on === true)}
@@ -135,13 +136,13 @@ function CheckboxGroupField<V = string>({
               />
               {option.description ? (
                 <FieldContent>
-                  <FieldLabel className="font-normal" htmlFor={id}>
+                  <FieldLabel className="font-normal" htmlFor={optionId}>
                     {option.label}
                   </FieldLabel>
                   <FieldDescription>{option.description}</FieldDescription>
                 </FieldContent>
               ) : (
-                <FieldLabel className="w-auto font-normal" htmlFor={id}>
+                <FieldLabel className="w-auto font-normal" htmlFor={optionId}>
                   {option.label}
                 </FieldLabel>
               )}

package/src/fields/combobox-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import {
   Combobox,
   ComboboxContent,
@@ -95,8 +95,9 @@ function ComboboxField<T = string>({
   showClear = true,
 }: ComboboxFieldProps<T>) {
   const field = useFieldContext()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -113,7 +114,7 @@ function ComboboxField<T = string>({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -139,7 +140,7 @@ function ComboboxField<T = string>({
           )}
           aria-invalid={isInvalid || undefined}
           className={className}
-          id={field.name}
+          id={id}
           name={field.name}
           onBlur={field.handleBlur}
           placeholder={placeholder}

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

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import { buttonVariants } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import {
@@ -60,8 +60,9 @@ function DatePickerField({
   triggerClassName,
 }: DatePickerFieldProps) {
   const field = useFieldContext<Date | undefined>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -74,7 +75,7 @@ function DatePickerField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -92,7 +93,7 @@ function DatePickerField({
             triggerClassName
           )}
           data-empty={empty || undefined}
-          id={field.name}
+          id={id}
           // Base UI's Popover handles open state — we still need blur on the
           // form's reactive store. Passing onBlur here mirrors how `<select>`
           // commits on close.

package/src/fields/input-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import { Children, type ComponentProps, type ReactNode } from "react"
+import { Children, type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -40,8 +40,9 @@ function InputField({
   ...props
 }: InputFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -55,7 +56,7 @@ function InputField({
       [showError, errorId]
     ),
     "aria-invalid": isInvalid || undefined,
-    id: field.name,
+    id,
     name: field.name,
     onBlur: field.handleBlur,
     onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
@@ -67,7 +68,7 @@ function InputField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>

package/src/fields/multi-select-field.tsx

@@ -8,7 +8,7 @@ import {
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { XIcon } from "lucide-react"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Combobox,
@@ -96,8 +96,9 @@ function MultiSelectField<T = string>({
 }: MultiSelectFieldProps<T>) {
   const field = useFieldContext<MultiSelectValue<T>[] | null | undefined>()
   const anchor = useComboboxAnchor()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -114,7 +115,7 @@ function MultiSelectField<T = string>({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -143,7 +144,7 @@ function MultiSelectField<T = string>({
                     [showError, errorId]
                   )}
                   aria-invalid={isInvalid || undefined}
-                  id={field.name}
+                  id={id}
                   name={field.name}
                   onBlur={field.handleBlur}
                   placeholder={chips.length === 0 ? placeholder : undefined}

package/src/fields/otp-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -57,8 +57,9 @@ function OtpField({
   required,
 }: OtpFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -68,7 +69,7 @@ function OtpField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -83,7 +84,7 @@ function OtpField({
         className={className}
         containerClassName={containerClassName}
         disabled={disabled}
-        id={field.name}
+        id={id}
         maxLength={maxLength}
         name={field.name}
         onBlur={field.handleBlur}

package/src/fields/radio-group-field.tsx

@@ -36,8 +36,9 @@ function RadioGroupField({
   ...props
 }: RadioGroupFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors

package/src/fields/select-field.tsx

@@ -8,7 +8,7 @@ import {
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import type { ComponentProps, ReactNode } from "react"
-import { Children, isValidElement, useMemo } from "react"
+import { Children, isValidElement, useId, useMemo } from "react"
 import {
   Field,
   FieldDescription,
@@ -48,8 +48,9 @@ function SelectField({
   ...props
 }: SelectFieldProps) {
   const field = useFieldContext()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -72,7 +73,7 @@ function SelectField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -91,7 +92,7 @@ function SelectField({
           )}
           aria-invalid={isInvalid || undefined}
           className={triggerClassName}
-          id={field.name}
+          id={id}
           onBlur={field.handleBlur}
           size={triggerSize}
         >

package/src/fields/slider-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldContent,
@@ -43,8 +43,9 @@ function SliderField({
   ...props
 }: SliderFieldProps) {
   const field = useFieldContext<SliderValue>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -61,7 +62,7 @@ function SliderField({
       {(label || hasReadout) && (
         <FieldContent className="flex-row items-center justify-between">
           {label && (
-            <FieldLabel htmlFor={field.name}>
+            <FieldLabel htmlFor={id}>
               {label}
               {isRequired && <RequiredIndicator />}
             </FieldLabel>
@@ -79,7 +80,7 @@ function SliderField({
           [showError, errorId]
         )}
         aria-invalid={isInvalid || undefined}
-        id={field.name}
+        id={id}
         name={field.name}
         onBlur={field.handleBlur}
         onValueChange={(next) => {

package/src/fields/switch-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldContent,
@@ -35,8 +35,9 @@ function SwitchField({
   ...props
 }: SwitchFieldProps) {
   const field = useFieldContext<boolean>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -51,7 +52,7 @@ function SwitchField({
     >
       <FieldContent>
         {label && (
-          <FieldLabel htmlFor={field.name}>
+          <FieldLabel htmlFor={id}>
             {label}
             {isRequired && <RequiredIndicator />}
           </FieldLabel>
@@ -70,7 +71,7 @@ function SwitchField({
         )}
         aria-invalid={isInvalid || undefined}
         checked={field.state.value ?? false}
-        id={field.name}
+        id={id}
         name={field.name}
         onBlur={field.handleBlur}
         onCheckedChange={(value) => field.handleChange(value)}

package/src/fields/textarea-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import { Children, type ComponentProps, type ReactNode } from "react"
+import { Children, type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -37,8 +37,9 @@ function TextAreaField({
   ...props
 }: TextAreaFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -52,7 +53,7 @@ function TextAreaField({
       [showError, errorId]
     ),
     "aria-invalid": isInvalid || undefined,
-    id: field.name,
+    id,
     name: field.name,
     onBlur: field.handleBlur,
     onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
@@ -64,7 +65,7 @@ function TextAreaField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>

package/src/index.ts

@@ -1,5 +1,6 @@
 /* biome-ignore-all lint/performance/noBarrelFile: single npm entry for the headless form API. */
 
+export { useSelector } from "@tanstack/react-form"
 export { createZenoForm } from "./create-zeno-form"
 export { Form, FormProvider } from "./form-element"
 export {

package/src/lib/schema-required.test.ts

@@ -38,6 +38,26 @@ describe("getRequiredPaths", () => {
     expect(required.has("role")).toBe(false)
   })
 
+  test("a string that accepts the empty value it starts at is not required", () => {
+    const schema = z.object({
+      email: z.email(),
+      members: z.array(z.object({ name: z.string().min(1), note: z.string() })),
+      name: z.string().trim().min(1),
+      notes: z.string(),
+      profile: z.object({ bio: z.string(), title: z.string().min(1) }),
+      subtitle: z.string().nullable(),
+    })
+    const required = getRequiredPaths(schema)
+    expect(required.has("notes")).toBe(false)
+    expect(required.has("subtitle")).toBe(false)
+    expect(required.has("profile.bio")).toBe(false)
+    expect(required.has("members[0].note")).toBe(false)
+    expect(required.has("email")).toBe(true)
+    expect(required.has("name")).toBe(true)
+    expect(required.has("profile.title")).toBe(true)
+    expect(required.has("members[0].name")).toBe(true)
+  })
+
   test("nested z.object reports the parent and its required children", () => {
     const schema = z.object({
       profile: z.object({
@@ -79,7 +99,7 @@ describe("getRequiredPaths", () => {
   test("nested arrays descend through every level", () => {
     const schema = z.object({
       groups: z.array(
-        z.object({ members: z.array(z.object({ name: z.string() })) })
+        z.object({ members: z.array(z.object({ name: z.string().min(1) })) })
       ),
     })
     const required = getRequiredPaths(schema)

package/src/lib/schema-required.ts

@@ -13,6 +13,11 @@
 // index `0` and recorded index-agnostically, so `members[0].name` in the set
 // matches every row's `members[3].name` via `toRequiredPathKey`.
 //
+// A missing string is probed again as `""`, the value the form starts it at
+// (`extractZodDefaults`). A field that accepts `""` (a bare `z.string()`)
+// can't fail while untouched, so it leaves the set; one that rejects it
+// (`.min(1)`, `z.email()`) stays.
+//
 // Paths use TanStack Form's field-name syntax: dots for object keys, brackets
 // for array indices (`members[0].name`, not `members.0.name`).
 //
@@ -86,15 +91,20 @@ function toRequiredPathKey(name: string): string {
   return name.replace(INDEX_IN_NAME, "[0]")
 }
 
-function probeContainer(expected: unknown): unknown {
+function probeValue(expected: unknown): unknown {
   if (typeof expected !== "string") {
     return
   }
-  const kind = expected.toLowerCase()
-  if (kind === "object") {
-    return {}
+  switch (expected.toLowerCase()) {
+    case "object":
+      return {}
+    case "array":
+      return [{}]
+    case "string":
+      return ""
+    default:
+      return
   }
-  return kind === "array" ? [{}] : undefined
 }
 
 // Write `value` at `keys` inside `root`, only where nothing is set yet.
@@ -135,26 +145,62 @@ function validateSync(
   return "issues" in result && result.issues ? result.issues : []
 }
 
+type ProbePass = {
+  readonly descended: boolean
+  readonly failing: ReadonlySet<string>
+  readonly filledStrings: readonly string[]
+}
+
+// Record one pass's failing paths, and fill the probe at each of them for the
+// next pass.
+function recordPass(
+  issues: readonly StandardIssue[],
+  probe: Record<PropertyKey, unknown>,
+  required: Set<string>
+): ProbePass {
+  const failing = new Set<string>()
+  const filledStrings: string[] = []
+  let descended = false
+  for (const issue of issues) {
+    const keys = issue.path?.map(pathKey) ?? []
+    if (keys.length === 0) {
+      continue
+    }
+    const path = joinPath(keys)
+    failing.add(path)
+    required.add(path)
+    const value = probeValue(issue.expected)
+    if (value !== undefined && fillAt(probe, keys, value)) {
+      descended = true
+      if (value === "") {
+        filledStrings.push(path)
+      }
+    }
+  }
+  return { descended, failing, filledStrings }
+}
+
 function getRequiredPaths(schema: StandardSchemaLike): Set<string> {
   const required = new Set<string>()
   const probe: Record<PropertyKey, unknown> = {}
+  // Paths the previous pass filled with `""`: they stay only if they still fail.
+  let filledStrings: readonly string[] = []
   for (let depth = 0; depth < MAX_PROBE_DEPTH; depth += 1) {
     const issues = validateSync(schema, probe)
     if (!issues) {
       return required
     }
-    let descended = false
-    for (const issue of issues) {
-      const keys = issue.path?.map(pathKey) ?? []
-      if (keys.length === 0) {
-        continue
-      }
-      required.add(joinPath(keys))
-      const container = probeContainer(issue.expected)
-      if (container !== undefined && fillAt(probe, keys, container)) {
-        descended = true
+    const {
+      descended,
+      failing,
+      filledStrings: filled,
+    } = recordPass(issues, probe, required)
+    for (const path of filledStrings) {
+      if (!failing.has(path)) {
+        required.delete(path)
       }
     }
+    filledStrings = filled
     if (!descended) {
       break
     }

package/src/lib/use-form-dialog.ts

@@ -156,8 +156,9 @@ function attributeSelector(attribute: string, value: string): string {
 
 /**
  * Find the element to focus for field `name` inside `root`: the control with
- * `id={name}` (what the shipped fields render), else the first focusable
- * element inside the field root marked `data-field={name}`.
+ * `id={name}` (fields that use the name as their id), else, inside the field
+ * root marked `data-field={name}`, the control its label points at (the shipped
+ * fields' ids come from `useId`), else that root's first focusable element.
  */
 function findFieldElement(
   root: ParentNode | null | undefined,
@@ -171,7 +172,14 @@ function findFieldElement(
     return byId
   }
   const fieldRoot = root.querySelector(attributeSelector("data-field", name))
-  return fieldRoot?.querySelector<HTMLElement>(FOCUSABLE) ?? null
+  if (!fieldRoot) {
+    return null
+  }
+  const labelFor = fieldRoot.querySelector("label[for]")?.getAttribute("for")
+  const labelled = labelFor
+    ? fieldRoot.querySelector<HTMLElement>(attributeSelector("id", labelFor))
+    : null
+  return labelled ?? fieldRoot.querySelector<HTMLElement>(FOCUSABLE)
 }
 
 export type {

package/src/use-app-fields.test.tsx

@@ -30,7 +30,6 @@ describe("EmailField / PasswordField", () => {
     }
     render(<H />)
     const input = screen.getByLabelText(CONTACT_EMAIL_LABEL) as HTMLInputElement
-    expect(input.id).toBe("contactEmail")
     expect(input.name).toBe("contactEmail")
     await user.type(input, "u@example.com")
     expect(input.value).toBe("u@example.com")
@@ -54,7 +53,6 @@ describe("EmailField / PasswordField", () => {
     }
     render(<H />)
     const input = screen.getByLabelText(PASSWORD_LABEL) as HTMLInputElement
-    expect(input.id).toBe("password")
     expect(input.name).toBe("password")
     expect(input.type).toBe("password")
   })
@@ -137,3 +135,32 @@ describe("CheckboxField — boolean state wrapper", () => {
     expect(checkbox.getAttribute("aria-checked")).toBe("true")
   })
 })
+
+describe("field ids", () => {
+  test("two forms with the same field name label their own controls", () => {
+    const schema = z.object({ description: z.string().min(1) })
+    function H({ label }: { label: string }) {
+      const form = useForm({ onSubmit: vi.fn(), schema })
+      const { InputField } = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <InputField description="Hint" label={label} name="description" />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(
+      <>
+        <H label="Page description" />
+        <H label="Dialog description" />
+      </>
+    )
+    const page = screen.getByRole("textbox", { name: "Page description" })
+    const dialog = screen.getByRole("textbox", { name: "Dialog description" })
+    expect(dialog).not.toBe(page)
+    const hints = screen.getAllByText("Hint")
+    expect(page.getAttribute("aria-describedby")).toBe(hints[0]?.id)
+    expect(dialog.getAttribute("aria-describedby")).toBe(hints[1]?.id)
+  })
+})