@asnewyla/form 0.2.2 → 0.3.0

package/README.md

@@ -1,94 +1,137 @@
-# @asnewyla/form
-
-Form wrapper with real client-side validation, an accessible error summary,
-and native `<form>` submission semantics.
-
-## Install
-
-```bash
-npm install @asnewyla/form @asnewyla/input
-```
-
-`FormFieldInput` renders `@asnewyla/input`'s `Input` under the hood, so its
-stylesheet also needs importing once, alongside `@asnewyla/form`'s own
-(which styles the error summary):
-
-```ts
-import '@asnewyla/form/styles.css';
-import '@asnewyla/input/styles.css';
-```
-
-## Usage
-
-```tsx
-import { Form, FormFieldInput } from '@asnewyla/form';
-
-<Form onSubmit={(values) => console.log(values)}>
-  <FormFieldInput label="Email" name="email" required pattern="^\S+@\S+$" />
-  <FormFieldInput label="Password" name="password" required minLength={8} />
-  <button type="submit">Submit</button>
-</Form>
-```
-
-`Form` validates on blur and on submit, blocks `onSubmit` while any field is
-invalid, and reads submitted values via native `FormData` — there's no
-duplicated value state to keep in sync.
-
-### `FormFieldInput`
-
-Use `FormFieldInput`, not a plain `Input`, for any field you want `Form` to
-register, validate, and collect. It accepts every `Input` prop plus a
-required `name` and a small validation-rule vocabulary:
-
-| Prop | Type | Notes |
-|---|---|---|
-| `name` | `string` (**required**) | Native `name`, also the key in `onSubmit`'s payload |
-| `required` | `boolean \| string` | A string overrides the default error message |
-| `pattern` | `string` | Regex source text, matching the native `<input pattern>` attribute |
-| `minLength` / `maxLength` | `number` | |
-| `min` / `max` | `string \| number` | Matching the native `<input min>`/`<input max>` attributes |
-| `validate` | `(value: string) => string \| undefined` | Custom sync validator, runs after every other rule passes |
-
-Rules run in that order — `required` → `pattern` → `minLength` → `maxLength`
-→ `min` → `max` → `validate` — and the first one that fails wins; only one
-error message shows per field.
-
-Used outside a `Form`, `FormFieldInput` still renders correctly — it's a
-normal `Input` with no ancestor to register with, and the native attributes
-(`required`, `pattern`, etc.) still reach the underlying `<input>`.
-
-A plain `Input` (not `FormFieldInput`) placed inside a `Form` is never
-registered or validated, but its value is still collected into `onSubmit`'s
-payload if it has a `name` — `Form` reads values via native `FormData`,
-which picks up any named form control regardless of registration. This is
-intentional, native `<form>` behavior, not a gap `FormFieldInput` needs to
-close.
-
-### Error display
-
-Both an inline message and a summary show for an invalid field, not either:
-
-- Each `FormFieldInput` shows its own inline error, linked via
-  `aria-describedby` — the same as a plain `Input`.
-- `Form` additionally renders an error summary once a submit attempt has
-  failed: `role="alert"`, one link per invalid field pointing at that
-  field's real `id`, and focus moved to the summary on every failed submit.
-  Clicking a link moves focus to the corresponding field. The summary stays
-  in sync with corrections made afterward (including via blur) and
-  disappears once no errors remain — it doesn't require resubmitting to
-  update or go away.
-
-The summary only appears after a submit has actually been attempted — a
-field that's invalid purely from blur-driven validation (nobody has tried
-to submit yet) shows its own inline error only.
-
-### Props
-
-| Prop | Type |
-|---|---|
-| `children` | `React.ReactNode` (**required**) |
-| `onSubmit` | `(values: Record<string, string>) => void` (**required**) |
-
-## License
-
-MIT
+# @asnewyla/form
+
+Form wrapper with real client-side validation, an accessible error summary,
+and native `<form>` submission semantics.
+
+## Install
+
+```bash
+npm install @asnewyla/form @asnewyla/input
+```
+
+`FormFieldInput` renders `@asnewyla/input`'s `Input` under the hood, so its
+stylesheet also needs importing once, alongside `@asnewyla/form`'s own
+(which styles the error summary):
+
+```ts
+import '@asnewyla/form/styles.css';
+import '@asnewyla/input/styles.css';
+```
+
+## Usage
+
+```tsx
+import { Form, FormFieldInput } from '@asnewyla/form';
+
+<Form onSubmit={(values) => console.log(values)}>
+  <FormFieldInput label="Email" name="email" required pattern="^\S+@\S+$" />
+  <FormFieldInput label="Password" name="password" required minLength={8} />
+  <button type="submit">Submit</button>
+</Form>
+```
+
+`Form` validates on blur and on submit, blocks `onSubmit` while any field is
+invalid, and reads submitted values via native `FormData` — there's no
+duplicated value state to keep in sync.
+
+### `FormFieldInput`
+
+Use `FormFieldInput`, not a plain `Input`, for any field you want `Form` to
+register, validate, and collect. It accepts every `Input` prop plus a
+required `name` and a small validation-rule vocabulary:
+
+| Prop | Type | Notes |
+|---|---|---|
+| `name` | `string` (**required**) | Native `name`, also the key in `onSubmit`'s payload |
+| `required` | `boolean \| string` | A string overrides the default error message |
+| `pattern` | `string` | Regex source text, matching the native `<input pattern>` attribute |
+| `minLength` / `maxLength` | `number` | |
+| `min` / `max` | `string \| number` | Matching the native `<input min>`/`<input max>` attributes |
+| `validate` | `(value: string) => string \| undefined` | Custom sync validator, runs after every other rule passes |
+
+Rules run in that order — `required` → `pattern` → `minLength` → `maxLength`
+→ `min` → `max` → `validate` — and the first one that fails wins; only one
+error message shows per field.
+
+Used outside a `Form`, `FormFieldInput` still renders correctly — it's a
+normal `Input` with no ancestor to register with, and the native attributes
+(`required`, `pattern`, etc.) still reach the underlying `<input>`.
+
+A plain `Input` (not `FormFieldInput`) placed inside a `Form` is never
+registered or validated, but its value is still collected into `onSubmit`'s
+payload if it has a `name` — `Form` reads values via native `FormData`,
+which picks up any named form control regardless of registration. This is
+intentional, native `<form>` behavior, not a gap `FormFieldInput` needs to
+close.
+
+### Error display
+
+Both an inline message and a summary show for an invalid field, not either:
+
+- Each `FormFieldInput` shows its own inline error, linked via
+  `aria-describedby` — the same as a plain `Input`.
+- `Form` additionally renders an error summary once a submit attempt has
+  failed: `role="alert"`, one link per invalid field pointing at that
+  field's real `id`, and focus moved to the summary on every failed submit.
+  Clicking a link moves focus to the corresponding field. The summary stays
+  in sync with corrections made afterward (including via blur) and
+  disappears once no errors remain — it doesn't require resubmitting to
+  update or go away.
+
+The summary only appears after a submit has actually been attempted — a
+field that's invalid purely from blur-driven validation (nobody has tried
+to submit yet) shows its own inline error only.
+
+### Form actions and no-JS forms
+
+`Form` passes every native `<form>` prop through (`action`, `method`,
+`encType`, `aria-*`, `id`, `className`, ...) and forwards `ref` to the
+`<form>` element. Validation runs first on every submit, and an invalid
+submit is always blocked. A valid submit goes ahead natively unless you
+handle it on the client:
+
+| Props | Valid submit |
+|---|---|
+| `onSubmit` only | Prevented; `onSubmit(values)` is called (client-only form) |
+| `action` (with or without `onSubmit`) | Not prevented: the browser posts, or React 19 runs the action. `onSubmit(values)` is still called if given |
+| neither | Not prevented: a plain form posting to its URL |
+
+With a React 19 server action:
+
+```tsx
+// actions.ts
+'use server';
+export async function signIn(formData: FormData) { /* ... */ }
+```
+
+```tsx
+// page.tsx: a server component, no wrapper needed
+import { Button } from '@asnewyla/button';
+import { Form, FormFieldInput } from '@asnewyla/form';
+import { signIn } from './actions';
+
+<Form action={signIn} aria-label="Sign in">
+  <FormFieldInput label="Email" name="email" type="email" required />
+  <Button type="submit">Sign in</Button>
+</Form>
+```
+
+Before JavaScript loads, the browser's own submit is used, so keep
+server-side validation. `noValidate` defaults to `true` so `Form`'s
+validation and error summary can run. Pass `noValidate={false}` to
+turn the browser's native validation UI back on.
+
+### Props
+
+Every native `<form>` prop, plus:
+
+| Prop | Type |
+|---|---|
+| `children` | `React.ReactNode` (**required**) |
+| `onSubmit` | `(values: Record<string, string>) => void` (optional) |
+| `noValidate` | `boolean` (default `true`) |
+| `ref` | `Ref<HTMLFormElement>` |
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -1,11 +1,15 @@
 import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { InputProps } from '@asnewyla/input';
 
-type FormProps = {
+type FormProps = Omit<ComponentPropsWithoutRef<'form'>, 'onSubmit'> & {
     children: React.ReactNode;
-    onSubmit: (values: Record<string, string>) => void;
+    onSubmit?: (values: Record<string, string>) => void;
 };
-declare function Form({ children, onSubmit }: FormProps): react.JSX.Element;
+declare const Form: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onSubmit"> & {
+    children: React.ReactNode;
+    onSubmit?: (values: Record<string, string>) => void;
+} & react.RefAttributes<HTMLFormElement>>;
 
 type FormFieldInputProps = Omit<InputProps, 'name'> & {
     name: string;

package/dist/index.d.ts

@@ -1,11 +1,15 @@
 import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { InputProps } from '@asnewyla/input';
 
-type FormProps = {
+type FormProps = Omit<ComponentPropsWithoutRef<'form'>, 'onSubmit'> & {
     children: React.ReactNode;
-    onSubmit: (values: Record<string, string>) => void;
+    onSubmit?: (values: Record<string, string>) => void;
 };
-declare function Form({ children, onSubmit }: FormProps): react.JSX.Element;
+declare const Form: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onSubmit"> & {
+    children: React.ReactNode;
+    onSubmit?: (values: Record<string, string>) => void;
+} & react.RefAttributes<HTMLFormElement>>;
 
 type FormFieldInputProps = Omit<InputProps, 'name'> & {
     name: string;

package/dist/index.js

@@ -1,15 +1,43 @@
-'use strict';
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var input = require('@asnewyla/input');
-var react = require('react');
-var reactDom = require('react-dom');
-var jsxRuntime = require('react/jsx-runtime');
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Form: () => Form,
+  FormFieldInput: () => FormFieldInput
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/components/Form.tsx
-var FormErrorSummary = react.forwardRef(function FormErrorSummary2({ invalidFields }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xd-form-error-summary", role: "alert", tabIndex: -1, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "xd-form-error-summary-heading", children: "There is a problem" }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { children: invalidFields.map(({ name, id, message }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+var import_input = require("@asnewyla/input");
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/FormErrorSummary.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormErrorSummary = (0, import_react.forwardRef)(function FormErrorSummary2({ invalidFields }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "xd-form-error-summary", role: "alert", tabIndex: -1, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "xd-form-error-summary-heading", children: "There is a problem" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: invalidFields.map(({ name, id, message }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "a",
       {
         href: `#${id}`,
@@ -23,6 +51,9 @@ var FormErrorSummary = react.forwardRef(function FormErrorSummary2({ invalidFiel
   ] });
 });
 
+// src/components/useFieldRegistry.ts
+var import_react2 = require("react");
+
 // src/components/validation.ts
 function validateValue(value, rules) {
   if (!rules) return void 0;
@@ -52,15 +83,15 @@ function validateValue(value, rules) {
 
 // src/components/useFieldRegistry.ts
 function useFieldRegistry(formRef) {
-  const fieldsRef = react.useRef(/* @__PURE__ */ new Map());
-  const [errors, setErrors] = react.useState({});
-  const registerField = react.useCallback(
+  const fieldsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const [errors, setErrors] = (0, import_react2.useState)({});
+  const registerField = (0, import_react2.useCallback)(
     (name, registration) => {
       fieldsRef.current.set(name, registration);
     },
     []
   );
-  const unregisterField = react.useCallback((name) => {
+  const unregisterField = (0, import_react2.useCallback)((name) => {
     fieldsRef.current.delete(name);
     setErrors((prev) => {
       if (!(name in prev)) return prev;
@@ -69,14 +100,14 @@ function useFieldRegistry(formRef) {
       return next;
     });
   }, []);
-  const getFieldValue = react.useCallback(
+  const getFieldValue = (0, import_react2.useCallback)(
     (name) => {
       if (!formRef.current) return "";
       return String(new FormData(formRef.current).get(name) ?? "");
     },
     [formRef]
   );
-  const validateField = react.useCallback(
+  const validateField = (0, import_react2.useCallback)(
     (name) => {
       const field = fieldsRef.current.get(name);
       const error = validateValue(getFieldValue(name), field?.rules);
@@ -85,11 +116,11 @@ function useFieldRegistry(formRef) {
     },
     [getFieldValue]
   );
-  const fieldNames = react.useCallback(
+  const fieldNames = (0, import_react2.useCallback)(
     () => Array.from(fieldsRef.current.keys()),
     []
   );
-  const invalidFields = react.useCallback(() => {
+  const invalidFields = (0, import_react2.useCallback)(() => {
     const result = [];
     for (const [name, message] of Object.entries(errors)) {
       if (!message) continue;
@@ -108,9 +139,13 @@ function useFieldRegistry(formRef) {
     invalidFields
   };
 }
-function Form({ children, onSubmit }) {
-  const formRef = react.useRef(null);
-  const summaryRef = react.useRef(null);
+
+// src/components/Form.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FormInner({ children, onSubmit, noValidate = true, ...restProps }, ref) {
+  const formRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useImperativeHandle)(ref, () => formRef.current);
+  const summaryRef = (0, import_react3.useRef)(null);
   const {
     errors,
     registerField,
@@ -119,20 +154,22 @@ function Form({ children, onSubmit }) {
     fieldNames,
     invalidFields
   } = useFieldRegistry(formRef);
-  const [hasAttemptedSubmit, setHasAttemptedSubmit] = react.useState(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = (0, import_react3.useState)(false);
   function handleSubmit(event) {
-    event.preventDefault();
     let hasError = false;
-    reactDom.flushSync(() => {
+    (0, import_react_dom.flushSync)(() => {
       for (const name of fieldNames()) {
         if (validateField(name)) hasError = true;
       }
       setHasAttemptedSubmit(true);
     });
     if (hasError) {
+      event.preventDefault();
       summaryRef.current?.focus();
       return;
     }
+    if (!onSubmit) return;
+    if (restProps.action === void 0) event.preventDefault();
     const values = {};
     for (const [key, value] of new FormData(event.currentTarget).entries()) {
       values[key] = String(value);
@@ -140,15 +177,30 @@ function Form({ children, onSubmit }) {
     onSubmit(values);
   }
   const invalid = hasAttemptedSubmit ? invalidFields() : [];
-  const contextValue = react.useMemo(
+  const contextValue = (0, import_react3.useMemo)(
     () => ({ registerField, unregisterField, validateField, errors }),
     [registerField, unregisterField, validateField, errors]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("form", { ref: formRef, onSubmit: handleSubmit, noValidate: true, children: [
-    invalid.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormErrorSummary, { ref: summaryRef, invalidFields: invalid }),
-    /* @__PURE__ */ jsxRuntime.jsx(input.FormFieldProvider, { value: contextValue, children })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "form",
+    {
+      ...restProps,
+      ref: formRef,
+      onSubmit: handleSubmit,
+      noValidate,
+      children: [
+        invalid.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormErrorSummary, { ref: summaryRef, invalidFields: invalid }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_input.FormFieldProvider, { value: contextValue, children })
+      ]
+    }
+  );
 }
+var Form = (0, import_react3.forwardRef)(FormInner);
+
+// src/components/FormFieldInput.tsx
+var import_input2 = require("@asnewyla/input");
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function FormFieldInputInner({
   name,
   required,
@@ -162,8 +214,8 @@ function FormFieldInputInner({
   onBlur,
   ...rest
 }, ref) {
-  const formField = input.useFormFieldContext();
-  const inputRef = react.useRef(null);
+  const formField = (0, import_input2.useFormFieldContext)();
+  const inputRef = (0, import_react4.useRef)(null);
   const rules = {
     required,
     pattern,
@@ -173,7 +225,7 @@ function FormFieldInputInner({
     max,
     validate
   };
-  react.useEffect(() => {
+  (0, import_react4.useEffect)(() => {
     if (!formField) return;
     formField.registerField(name, { ref: inputRef, rules });
     return () => formField.unregisterField(name);
@@ -194,8 +246,8 @@ function FormFieldInputInner({
   }
   const formContextError = formField ? formField.errors[name] : void 0;
   const formFieldError = error ?? formContextError;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    input.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_input2.Input,
     {
       name,
       required,
@@ -211,11 +263,12 @@ function FormFieldInputInner({
     }
   );
 }
-var FormFieldInput = react.forwardRef(
+var FormFieldInput = (0, import_react4.forwardRef)(
   FormFieldInputInner
 );
-
-exports.Form = Form;
-exports.FormFieldInput = FormFieldInput;
-//# sourceMappingURL=index.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormFieldInput
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FormErrorSummary.tsx","../src/components/validation.ts","../src/components/useFieldRegistry.ts","../src/components/Form.tsx","../src/components/FormFieldInput.tsx"],"names":["forwardRef","FormErrorSummary","jsxs","jsx","useRef","useState","useCallback","flushSync","useMemo","FormFieldProvider","useFormFieldContext","useEffect","Input"],"mappings":"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","file":"index.js","sourcesContent":["import { forwardRef } from 'react';\nimport type { InvalidField } from './useFieldRegistry';\nimport './FormErrorSummary.css';\n\nexport type FormErrorSummaryProps = {\n  invalidFields: InvalidField[];\n};\n\nexport const FormErrorSummary = forwardRef<\n  HTMLDivElement,\n  FormErrorSummaryProps\n>(function FormErrorSummary({ invalidFields }, ref) {\n  return (\n    <div className=\"xd-form-error-summary\" role=\"alert\" tabIndex={-1} ref={ref}>\n      <p className=\"xd-form-error-summary-heading\">There is a problem</p>\n      <ul>\n        {invalidFields.map(({ name, id, message }) => (\n          <li key={name}>\n            <a\n              href={`#${id}`}\n              onClick={(event) => {\n                event.preventDefault();\n                document.getElementById(id)?.focus();\n              }}\n            >\n              {message}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n});\n","import type { ValidationRules } from '@asnewyla/input';\n\nexport function validateValue(\n  value: string,\n  rules?: ValidationRules,\n): string | undefined {\n  if (!rules) return undefined;\n\n  if (rules.required && value.trim() === '') {\n    return typeof rules.required === 'string'\n      ? rules.required\n      : 'This field is required';\n  }\n  if (rules.pattern && value !== '' && !new RegExp(rules.pattern).test(value)) {\n    return 'Invalid format';\n  }\n  if (rules.minLength !== undefined && value.length < rules.minLength) {\n    return `Must be at least ${rules.minLength} characters`;\n  }\n  if (rules.maxLength !== undefined && value.length > rules.maxLength) {\n    return `Must be at most ${rules.maxLength} characters`;\n  }\n  if (\n    rules.min !== undefined &&\n    value !== '' &&\n    Number(value) < Number(rules.min)\n  ) {\n    return `Must be at least ${rules.min}`;\n  }\n  if (\n    rules.max !== undefined &&\n    value !== '' &&\n    Number(value) > Number(rules.max)\n  ) {\n    return `Must be at most ${rules.max}`;\n  }\n  if (rules.validate) {\n    return rules.validate(value);\n  }\n  return undefined;\n}\n","import type { FieldRegistration } from '@asnewyla/input';\nimport { type RefObject, useCallback, useRef, useState } from 'react';\nimport { validateValue } from './validation';\n\nexport interface InvalidField {\n  name: string;\n  id: string;\n  message: string;\n}\n\nexport interface FieldRegistry {\n  errors: Record<string, string | undefined>;\n  registerField: (name: string, registration: FieldRegistration) => void;\n  unregisterField: (name: string) => void;\n  validateField: (name: string) => string | undefined;\n  fieldNames: () => string[];\n  invalidFields: () => InvalidField[];\n}\n\nexport function useFieldRegistry(\n  formRef: RefObject<HTMLFormElement>,\n): FieldRegistry {\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\n  const [errors, setErrors] = useState<Record<string, string | undefined>>({});\n\n  const registerField = useCallback(\n    (name: string, registration: FieldRegistration) => {\n      fieldsRef.current.set(name, registration);\n    },\n    [],\n  );\n\n  const unregisterField = useCallback((name: string) => {\n    fieldsRef.current.delete(name);\n    setErrors((prev) => {\n      if (!(name in prev)) return prev;\n      const next = { ...prev };\n      delete next[name];\n      return next;\n    });\n  }, []);\n\n  const getFieldValue = useCallback(\n    (name: string): string => {\n      if (!formRef.current) return '';\n      return String(new FormData(formRef.current).get(name) ?? '');\n    },\n    [formRef],\n  );\n\n  const validateField = useCallback(\n    (name: string) => {\n      const field = fieldsRef.current.get(name);\n      const error = validateValue(getFieldValue(name), field?.rules);\n      setErrors((prev) => ({ ...prev, [name]: error }));\n      return error;\n    },\n    [getFieldValue],\n  );\n\n  const fieldNames = useCallback(\n    () => Array.from(fieldsRef.current.keys()),\n    [],\n  );\n\n  const invalidFields = useCallback((): InvalidField[] => {\n    const result: InvalidField[] = [];\n    for (const [name, message] of Object.entries(errors)) {\n      if (!message) continue;\n      const id = fieldsRef.current.get(name)?.ref.current?.id;\n      if (!id) continue;\n      result.push({ name, id, message });\n    }\n    return result;\n  }, [errors]);\n\n  return {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  };\n}\n","import { FormFieldProvider } from '@asnewyla/input';\nimport { useMemo, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { FormErrorSummary } from './FormErrorSummary';\nimport { type InvalidField, useFieldRegistry } from './useFieldRegistry';\n\nexport type FormProps = {\n  children: React.ReactNode;\n  onSubmit: (values: Record<string, string>) => void;\n};\n\nexport function Form({ children, onSubmit }: FormProps) {\n  const formRef = useRef<HTMLFormElement>(null);\n  const summaryRef = useRef<HTMLDivElement>(null);\n  const {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  } = useFieldRegistry(formRef);\n\n  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n\n    let hasError = false;\n    // flushSync commits the validation state synchronously, so the\n    // summary is already in the DOM by the time we call .focus() below.\n    flushSync(() => {\n      for (const name of fieldNames()) {\n        if (validateField(name)) hasError = true;\n      }\n      setHasAttemptedSubmit(true);\n    });\n    if (hasError) {\n      summaryRef.current?.focus();\n      return;\n    }\n\n    const values: Record<string, string> = {};\n    for (const [key, value] of new FormData(event.currentTarget).entries()) {\n      values[key] = String(value);\n    }\n    onSubmit(values);\n  }\n\n  const invalid: InvalidField[] = hasAttemptedSubmit ? invalidFields() : [];\n\n  const contextValue = useMemo(\n    () => ({ registerField, unregisterField, validateField, errors }),\n    [registerField, unregisterField, validateField, errors],\n  );\n\n  return (\n    <form ref={formRef} onSubmit={handleSubmit} noValidate>\n      {invalid.length > 0 && (\n        <FormErrorSummary ref={summaryRef} invalidFields={invalid} />\n      )}\n      <FormFieldProvider value={contextValue}>{children}</FormFieldProvider>\n    </form>\n  );\n}\n","import {\n  Input,\n  type InputProps,\n  type ValidationRules,\n  useFormFieldContext,\n} from '@asnewyla/input';\nimport { type ForwardedRef, forwardRef, useEffect, useRef } from 'react';\n\nexport type FormFieldInputProps = Omit<InputProps, 'name'> & {\n  name: string;\n  validate?: (value: string) => string | undefined;\n};\n\nfunction FormFieldInputInner(\n  {\n    name,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n    error,\n    onBlur,\n    ...rest\n  }: FormFieldInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  // useFormFieldContext() returns null when there's no ancestor\n  // FormFieldProvider — that's what makes FormFieldInput a no-op outside a\n  // Form (still a perfectly usable Input, just without registration).\n  const formField = useFormFieldContext();\n\n  // A stable ref we always own, so registerField always gets a real node —\n  // separate from `ref`, which is whatever (or nothing) the consumer passed.\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const rules: ValidationRules = {\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n  };\n\n  // Deliberately depends on formField?.registerField/unregisterField, not\n  // on `formField` itself — Form's context value changes identity whenever\n  // its `errors` state updates (that's correct: this component needs to\n  // re-render to read the new error). But if this effect depended on the\n  // whole object, every validation would also re-trigger registration:\n  // cleanup would call the *previous* render's unregisterField, deleting\n  // the field and wiping the error validateField just set, in the same\n  // tick it was written. Depending on the two functions directly (stable\n  // via Form's useCallback) keeps registration decoupled from errors\n  // changing.\n  // Also deliberately not depending on `rules` — it's a fresh object every\n  // render, so registration happens once per mount (or when formField/name\n  // change), not on every rule-prop tweak. Rule props are effectively fixed\n  // at mount for v0.x; no test or use case yet needs them reactive.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally narrowed deps — see comment above\n  useEffect(() => {\n    if (!formField) return;\n    formField.registerField(name, { ref: inputRef, rules });\n    return () => formField.unregisterField(name);\n  }, [formField?.registerField, formField?.unregisterField, name]);\n\n  // Merges `inputRef` (ours, for registration) with `ref` (the consumer's\n  // forwarded one, if any) so both end up pointing at the same DOM node —\n  // neither one silently loses the element to the other.\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n    if (formField) {\n      formField.validateField(name);\n    }\n    onBlur?.(event);\n  }\n\n  const formContextError = formField ? formField.errors[name] : undefined;\n  const formFieldError = error ?? formContextError;\n\n  return (\n    <Input\n      name={name}\n      required={required}\n      pattern={pattern}\n      minLength={minLength}\n      maxLength={maxLength}\n      min={min}\n      max={max}\n      {...rest}\n      error={formFieldError}\n      onBlur={handleBlur}\n      ref={setRefs}\n    />\n  );\n}\n\nexport const FormFieldInput = forwardRef<HTMLInputElement, FormFieldInputProps>(\n  FormFieldInputInner,\n);\n"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Form.tsx","../src/components/FormErrorSummary.tsx","../src/components/useFieldRegistry.ts","../src/components/validation.ts","../src/components/FormFieldInput.tsx"],"sourcesContent":["export { type FormProps, Form } from './components';\nexport { type FormFieldInputProps, FormFieldInput } from './components';\n","import { FormFieldProvider } from '@asnewyla/input';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { flushSync } from 'react-dom';\nimport { FormErrorSummary } from './FormErrorSummary';\nimport { type InvalidField, useFieldRegistry } from './useFieldRegistry';\n\nexport type FormProps = Omit<ComponentPropsWithoutRef<'form'>, 'onSubmit'> & {\n  children: React.ReactNode;\n  onSubmit?: (values: Record<string, string>) => void;\n};\n\nfunction FormInner(\n  { children, onSubmit, noValidate = true, ...restProps }: FormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  const formRef = useRef<HTMLFormElement>(null);\n  useImperativeHandle(ref, () => formRef.current as HTMLFormElement);\n  const summaryRef = useRef<HTMLDivElement>(null);\n  const {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  } = useFieldRegistry(formRef);\n\n  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    let hasError = false;\n    // flushSync commits the validation state synchronously, so the\n    // summary is already in the DOM by the time we call .focus() below.\n    flushSync(() => {\n      for (const name of fieldNames()) {\n        if (validateField(name)) hasError = true;\n      }\n      setHasAttemptedSubmit(true);\n    });\n    if (hasError) {\n      event.preventDefault();\n      summaryRef.current?.focus();\n      return;\n    }\n\n    if (!onSubmit) return;\n    // With an action, the native submit (or a React 19 form action) goes ahead.\n    if (restProps.action === undefined) event.preventDefault();\n\n    const values: Record<string, string> = {};\n    for (const [key, value] of new FormData(event.currentTarget).entries()) {\n      values[key] = String(value);\n    }\n    onSubmit(values);\n  }\n\n  const invalid: InvalidField[] = hasAttemptedSubmit ? invalidFields() : [];\n\n  const contextValue = useMemo(\n    () => ({ registerField, unregisterField, validateField, errors }),\n    [registerField, unregisterField, validateField, errors],\n  );\n\n  return (\n    <form\n      {...restProps}\n      ref={formRef}\n      onSubmit={handleSubmit}\n      noValidate={noValidate}\n    >\n      {invalid.length > 0 && (\n        <FormErrorSummary ref={summaryRef} invalidFields={invalid} />\n      )}\n      <FormFieldProvider value={contextValue}>{children}</FormFieldProvider>\n    </form>\n  );\n}\n\nexport const Form = forwardRef(FormInner);\n","import { forwardRef } from 'react';\nimport type { InvalidField } from './useFieldRegistry';\nimport './FormErrorSummary.css';\n\nexport type FormErrorSummaryProps = {\n  invalidFields: InvalidField[];\n};\n\nexport const FormErrorSummary = forwardRef<\n  HTMLDivElement,\n  FormErrorSummaryProps\n>(function FormErrorSummary({ invalidFields }, ref) {\n  return (\n    <div className=\"xd-form-error-summary\" role=\"alert\" tabIndex={-1} ref={ref}>\n      <p className=\"xd-form-error-summary-heading\">There is a problem</p>\n      <ul>\n        {invalidFields.map(({ name, id, message }) => (\n          <li key={name}>\n            <a\n              href={`#${id}`}\n              onClick={(event) => {\n                event.preventDefault();\n                document.getElementById(id)?.focus();\n              }}\n            >\n              {message}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n});\n","import type { FieldRegistration } from '@asnewyla/input';\nimport { type RefObject, useCallback, useRef, useState } from 'react';\nimport { validateValue } from './validation';\n\nexport interface InvalidField {\n  name: string;\n  id: string;\n  message: string;\n}\n\nexport interface FieldRegistry {\n  errors: Record<string, string | undefined>;\n  registerField: (name: string, registration: FieldRegistration) => void;\n  unregisterField: (name: string) => void;\n  validateField: (name: string) => string | undefined;\n  fieldNames: () => string[];\n  invalidFields: () => InvalidField[];\n}\n\nexport function useFieldRegistry(\n  formRef: RefObject<HTMLFormElement>,\n): FieldRegistry {\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\n  const [errors, setErrors] = useState<Record<string, string | undefined>>({});\n\n  const registerField = useCallback(\n    (name: string, registration: FieldRegistration) => {\n      fieldsRef.current.set(name, registration);\n    },\n    [],\n  );\n\n  const unregisterField = useCallback((name: string) => {\n    fieldsRef.current.delete(name);\n    setErrors((prev) => {\n      if (!(name in prev)) return prev;\n      const next = { ...prev };\n      delete next[name];\n      return next;\n    });\n  }, []);\n\n  const getFieldValue = useCallback(\n    (name: string): string => {\n      if (!formRef.current) return '';\n      return String(new FormData(formRef.current).get(name) ?? '');\n    },\n    [formRef],\n  );\n\n  const validateField = useCallback(\n    (name: string) => {\n      const field = fieldsRef.current.get(name);\n      const error = validateValue(getFieldValue(name), field?.rules);\n      setErrors((prev) => ({ ...prev, [name]: error }));\n      return error;\n    },\n    [getFieldValue],\n  );\n\n  const fieldNames = useCallback(\n    () => Array.from(fieldsRef.current.keys()),\n    [],\n  );\n\n  const invalidFields = useCallback((): InvalidField[] => {\n    const result: InvalidField[] = [];\n    for (const [name, message] of Object.entries(errors)) {\n      if (!message) continue;\n      const id = fieldsRef.current.get(name)?.ref.current?.id;\n      if (!id) continue;\n      result.push({ name, id, message });\n    }\n    return result;\n  }, [errors]);\n\n  return {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  };\n}\n","import type { ValidationRules } from '@asnewyla/input';\n\nexport function validateValue(\n  value: string,\n  rules?: ValidationRules,\n): string | undefined {\n  if (!rules) return undefined;\n\n  if (rules.required && value.trim() === '') {\n    return typeof rules.required === 'string'\n      ? rules.required\n      : 'This field is required';\n  }\n  if (rules.pattern && value !== '' && !new RegExp(rules.pattern).test(value)) {\n    return 'Invalid format';\n  }\n  if (rules.minLength !== undefined && value.length < rules.minLength) {\n    return `Must be at least ${rules.minLength} characters`;\n  }\n  if (rules.maxLength !== undefined && value.length > rules.maxLength) {\n    return `Must be at most ${rules.maxLength} characters`;\n  }\n  if (\n    rules.min !== undefined &&\n    value !== '' &&\n    Number(value) < Number(rules.min)\n  ) {\n    return `Must be at least ${rules.min}`;\n  }\n  if (\n    rules.max !== undefined &&\n    value !== '' &&\n    Number(value) > Number(rules.max)\n  ) {\n    return `Must be at most ${rules.max}`;\n  }\n  if (rules.validate) {\n    return rules.validate(value);\n  }\n  return undefined;\n}\n","import {\n  Input,\n  type InputProps,\n  type ValidationRules,\n  useFormFieldContext,\n} from '@asnewyla/input';\nimport { type ForwardedRef, forwardRef, useEffect, useRef } from 'react';\n\nexport type FormFieldInputProps = Omit<InputProps, 'name'> & {\n  name: string;\n  validate?: (value: string) => string | undefined;\n};\n\nfunction FormFieldInputInner(\n  {\n    name,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n    error,\n    onBlur,\n    ...rest\n  }: FormFieldInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  // useFormFieldContext() returns null when there's no ancestor\n  // FormFieldProvider — that's what makes FormFieldInput a no-op outside a\n  // Form (still a perfectly usable Input, just without registration).\n  const formField = useFormFieldContext();\n\n  // A stable ref we always own, so registerField always gets a real node —\n  // separate from `ref`, which is whatever (or nothing) the consumer passed.\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const rules: ValidationRules = {\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n  };\n\n  // Deliberately depends on formField?.registerField/unregisterField, not\n  // on `formField` itself — Form's context value changes identity whenever\n  // its `errors` state updates (that's correct: this component needs to\n  // re-render to read the new error). But if this effect depended on the\n  // whole object, every validation would also re-trigger registration:\n  // cleanup would call the *previous* render's unregisterField, deleting\n  // the field and wiping the error validateField just set, in the same\n  // tick it was written. Depending on the two functions directly (stable\n  // via Form's useCallback) keeps registration decoupled from errors\n  // changing.\n  // Also deliberately not depending on `rules` — it's a fresh object every\n  // render, so registration happens once per mount (or when formField/name\n  // change), not on every rule-prop tweak. Rule props are effectively fixed\n  // at mount for v0.x; no test or use case yet needs them reactive.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally narrowed deps — see comment above\n  useEffect(() => {\n    if (!formField) return;\n    formField.registerField(name, { ref: inputRef, rules });\n    return () => formField.unregisterField(name);\n  }, [formField?.registerField, formField?.unregisterField, name]);\n\n  // Merges `inputRef` (ours, for registration) with `ref` (the consumer's\n  // forwarded one, if any) so both end up pointing at the same DOM node —\n  // neither one silently loses the element to the other.\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n    if (formField) {\n      formField.validateField(name);\n    }\n    onBlur?.(event);\n  }\n\n  const formContextError = formField ? formField.errors[name] : undefined;\n  const formFieldError = error ?? formContextError;\n\n  return (\n    <Input\n      name={name}\n      required={required}\n      pattern={pattern}\n      minLength={minLength}\n      maxLength={maxLength}\n      min={min}\n      max={max}\n      {...rest}\n      error={formFieldError}\n      onBlur={handleBlur}\n      ref={setRefs}\n    />\n  );\n}\n\nexport const FormFieldInput = forwardRef<HTMLInputElement, FormFieldInputProps>(\n  FormFieldInputInner,\n);\n"],"mappings":"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","names":["import_react","FormErrorSummary","import_react","import_jsx_runtime","import_input","import_react","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,9 +1,19 @@
-import { useFormFieldContext, Input, FormFieldProvider } from '@asnewyla/input';
-import { forwardRef, useRef, useEffect, useState, useMemo, useCallback } from 'react';
-import { flushSync } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use client';
 
 // src/components/Form.tsx
+import { FormFieldProvider } from "@asnewyla/input";
+import {
+  forwardRef as forwardRef2,
+  useImperativeHandle,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { flushSync } from "react-dom";
+
+// src/components/FormErrorSummary.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var FormErrorSummary = forwardRef(function FormErrorSummary2({ invalidFields }, ref) {
   return /* @__PURE__ */ jsxs("div", { className: "xd-form-error-summary", role: "alert", tabIndex: -1, ref, children: [
     /* @__PURE__ */ jsx("p", { className: "xd-form-error-summary-heading", children: "There is a problem" }),
@@ -21,6 +31,9 @@ var FormErrorSummary = forwardRef(function FormErrorSummary2({ invalidFields },
   ] });
 });
 
+// src/components/useFieldRegistry.ts
+import { useCallback, useRef, useState } from "react";
+
 // src/components/validation.ts
 function validateValue(value, rules) {
   if (!rules) return void 0;
@@ -106,9 +119,13 @@ function useFieldRegistry(formRef) {
     invalidFields
   };
 }
-function Form({ children, onSubmit }) {
-  const formRef = useRef(null);
-  const summaryRef = useRef(null);
+
+// src/components/Form.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FormInner({ children, onSubmit, noValidate = true, ...restProps }, ref) {
+  const formRef = useRef2(null);
+  useImperativeHandle(ref, () => formRef.current);
+  const summaryRef = useRef2(null);
   const {
     errors,
     registerField,
@@ -117,9 +134,8 @@ function Form({ children, onSubmit }) {
     fieldNames,
     invalidFields
   } = useFieldRegistry(formRef);
-  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState2(false);
   function handleSubmit(event) {
-    event.preventDefault();
     let hasError = false;
     flushSync(() => {
       for (const name of fieldNames()) {
@@ -128,9 +144,12 @@ function Form({ children, onSubmit }) {
       setHasAttemptedSubmit(true);
     });
     if (hasError) {
+      event.preventDefault();
       summaryRef.current?.focus();
       return;
     }
+    if (!onSubmit) return;
+    if (restProps.action === void 0) event.preventDefault();
     const values = {};
     for (const [key, value] of new FormData(event.currentTarget).entries()) {
       values[key] = String(value);
@@ -142,11 +161,29 @@ function Form({ children, onSubmit }) {
     () => ({ registerField, unregisterField, validateField, errors }),
     [registerField, unregisterField, validateField, errors]
   );
-  return /* @__PURE__ */ jsxs("form", { ref: formRef, onSubmit: handleSubmit, noValidate: true, children: [
-    invalid.length > 0 && /* @__PURE__ */ jsx(FormErrorSummary, { ref: summaryRef, invalidFields: invalid }),
-    /* @__PURE__ */ jsx(FormFieldProvider, { value: contextValue, children })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      ...restProps,
+      ref: formRef,
+      onSubmit: handleSubmit,
+      noValidate,
+      children: [
+        invalid.length > 0 && /* @__PURE__ */ jsx2(FormErrorSummary, { ref: summaryRef, invalidFields: invalid }),
+        /* @__PURE__ */ jsx2(FormFieldProvider, { value: contextValue, children })
+      ]
+    }
+  );
 }
+var Form = forwardRef2(FormInner);
+
+// src/components/FormFieldInput.tsx
+import {
+  Input,
+  useFormFieldContext
+} from "@asnewyla/input";
+import { forwardRef as forwardRef3, useEffect, useRef as useRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function FormFieldInputInner({
   name,
   required,
@@ -161,7 +198,7 @@ function FormFieldInputInner({
   ...rest
 }, ref) {
   const formField = useFormFieldContext();
-  const inputRef = useRef(null);
+  const inputRef = useRef3(null);
   const rules = {
     required,
     pattern,
@@ -192,7 +229,7 @@ function FormFieldInputInner({
   }
   const formContextError = formField ? formField.errors[name] : void 0;
   const formFieldError = error ?? formContextError;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     Input,
     {
       name,
@@ -209,10 +246,11 @@ function FormFieldInputInner({
     }
   );
 }
-var FormFieldInput = forwardRef(
+var FormFieldInput = forwardRef3(
   FormFieldInputInner
 );
-
-export { Form, FormFieldInput };
-//# sourceMappingURL=index.mjs.map
+export {
+  Form,
+  FormFieldInput
+};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FormErrorSummary.tsx","../src/components/validation.ts","../src/components/useFieldRegistry.ts","../src/components/Form.tsx","../src/components/FormFieldInput.tsx"],"names":["FormErrorSummary","useRef","useState","jsxs","jsx","forwardRef"],"mappings":"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","file":"index.mjs","sourcesContent":["import { forwardRef } from 'react';\nimport type { InvalidField } from './useFieldRegistry';\nimport './FormErrorSummary.css';\n\nexport type FormErrorSummaryProps = {\n  invalidFields: InvalidField[];\n};\n\nexport const FormErrorSummary = forwardRef<\n  HTMLDivElement,\n  FormErrorSummaryProps\n>(function FormErrorSummary({ invalidFields }, ref) {\n  return (\n    <div className=\"xd-form-error-summary\" role=\"alert\" tabIndex={-1} ref={ref}>\n      <p className=\"xd-form-error-summary-heading\">There is a problem</p>\n      <ul>\n        {invalidFields.map(({ name, id, message }) => (\n          <li key={name}>\n            <a\n              href={`#${id}`}\n              onClick={(event) => {\n                event.preventDefault();\n                document.getElementById(id)?.focus();\n              }}\n            >\n              {message}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n});\n","import type { ValidationRules } from '@asnewyla/input';\n\nexport function validateValue(\n  value: string,\n  rules?: ValidationRules,\n): string | undefined {\n  if (!rules) return undefined;\n\n  if (rules.required && value.trim() === '') {\n    return typeof rules.required === 'string'\n      ? rules.required\n      : 'This field is required';\n  }\n  if (rules.pattern && value !== '' && !new RegExp(rules.pattern).test(value)) {\n    return 'Invalid format';\n  }\n  if (rules.minLength !== undefined && value.length < rules.minLength) {\n    return `Must be at least ${rules.minLength} characters`;\n  }\n  if (rules.maxLength !== undefined && value.length > rules.maxLength) {\n    return `Must be at most ${rules.maxLength} characters`;\n  }\n  if (\n    rules.min !== undefined &&\n    value !== '' &&\n    Number(value) < Number(rules.min)\n  ) {\n    return `Must be at least ${rules.min}`;\n  }\n  if (\n    rules.max !== undefined &&\n    value !== '' &&\n    Number(value) > Number(rules.max)\n  ) {\n    return `Must be at most ${rules.max}`;\n  }\n  if (rules.validate) {\n    return rules.validate(value);\n  }\n  return undefined;\n}\n","import type { FieldRegistration } from '@asnewyla/input';\nimport { type RefObject, useCallback, useRef, useState } from 'react';\nimport { validateValue } from './validation';\n\nexport interface InvalidField {\n  name: string;\n  id: string;\n  message: string;\n}\n\nexport interface FieldRegistry {\n  errors: Record<string, string | undefined>;\n  registerField: (name: string, registration: FieldRegistration) => void;\n  unregisterField: (name: string) => void;\n  validateField: (name: string) => string | undefined;\n  fieldNames: () => string[];\n  invalidFields: () => InvalidField[];\n}\n\nexport function useFieldRegistry(\n  formRef: RefObject<HTMLFormElement>,\n): FieldRegistry {\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\n  const [errors, setErrors] = useState<Record<string, string | undefined>>({});\n\n  const registerField = useCallback(\n    (name: string, registration: FieldRegistration) => {\n      fieldsRef.current.set(name, registration);\n    },\n    [],\n  );\n\n  const unregisterField = useCallback((name: string) => {\n    fieldsRef.current.delete(name);\n    setErrors((prev) => {\n      if (!(name in prev)) return prev;\n      const next = { ...prev };\n      delete next[name];\n      return next;\n    });\n  }, []);\n\n  const getFieldValue = useCallback(\n    (name: string): string => {\n      if (!formRef.current) return '';\n      return String(new FormData(formRef.current).get(name) ?? '');\n    },\n    [formRef],\n  );\n\n  const validateField = useCallback(\n    (name: string) => {\n      const field = fieldsRef.current.get(name);\n      const error = validateValue(getFieldValue(name), field?.rules);\n      setErrors((prev) => ({ ...prev, [name]: error }));\n      return error;\n    },\n    [getFieldValue],\n  );\n\n  const fieldNames = useCallback(\n    () => Array.from(fieldsRef.current.keys()),\n    [],\n  );\n\n  const invalidFields = useCallback((): InvalidField[] => {\n    const result: InvalidField[] = [];\n    for (const [name, message] of Object.entries(errors)) {\n      if (!message) continue;\n      const id = fieldsRef.current.get(name)?.ref.current?.id;\n      if (!id) continue;\n      result.push({ name, id, message });\n    }\n    return result;\n  }, [errors]);\n\n  return {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  };\n}\n","import { FormFieldProvider } from '@asnewyla/input';\nimport { useMemo, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { FormErrorSummary } from './FormErrorSummary';\nimport { type InvalidField, useFieldRegistry } from './useFieldRegistry';\n\nexport type FormProps = {\n  children: React.ReactNode;\n  onSubmit: (values: Record<string, string>) => void;\n};\n\nexport function Form({ children, onSubmit }: FormProps) {\n  const formRef = useRef<HTMLFormElement>(null);\n  const summaryRef = useRef<HTMLDivElement>(null);\n  const {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  } = useFieldRegistry(formRef);\n\n  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n\n    let hasError = false;\n    // flushSync commits the validation state synchronously, so the\n    // summary is already in the DOM by the time we call .focus() below.\n    flushSync(() => {\n      for (const name of fieldNames()) {\n        if (validateField(name)) hasError = true;\n      }\n      setHasAttemptedSubmit(true);\n    });\n    if (hasError) {\n      summaryRef.current?.focus();\n      return;\n    }\n\n    const values: Record<string, string> = {};\n    for (const [key, value] of new FormData(event.currentTarget).entries()) {\n      values[key] = String(value);\n    }\n    onSubmit(values);\n  }\n\n  const invalid: InvalidField[] = hasAttemptedSubmit ? invalidFields() : [];\n\n  const contextValue = useMemo(\n    () => ({ registerField, unregisterField, validateField, errors }),\n    [registerField, unregisterField, validateField, errors],\n  );\n\n  return (\n    <form ref={formRef} onSubmit={handleSubmit} noValidate>\n      {invalid.length > 0 && (\n        <FormErrorSummary ref={summaryRef} invalidFields={invalid} />\n      )}\n      <FormFieldProvider value={contextValue}>{children}</FormFieldProvider>\n    </form>\n  );\n}\n","import {\n  Input,\n  type InputProps,\n  type ValidationRules,\n  useFormFieldContext,\n} from '@asnewyla/input';\nimport { type ForwardedRef, forwardRef, useEffect, useRef } from 'react';\n\nexport type FormFieldInputProps = Omit<InputProps, 'name'> & {\n  name: string;\n  validate?: (value: string) => string | undefined;\n};\n\nfunction FormFieldInputInner(\n  {\n    name,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n    error,\n    onBlur,\n    ...rest\n  }: FormFieldInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  // useFormFieldContext() returns null when there's no ancestor\n  // FormFieldProvider — that's what makes FormFieldInput a no-op outside a\n  // Form (still a perfectly usable Input, just without registration).\n  const formField = useFormFieldContext();\n\n  // A stable ref we always own, so registerField always gets a real node —\n  // separate from `ref`, which is whatever (or nothing) the consumer passed.\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const rules: ValidationRules = {\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n  };\n\n  // Deliberately depends on formField?.registerField/unregisterField, not\n  // on `formField` itself — Form's context value changes identity whenever\n  // its `errors` state updates (that's correct: this component needs to\n  // re-render to read the new error). But if this effect depended on the\n  // whole object, every validation would also re-trigger registration:\n  // cleanup would call the *previous* render's unregisterField, deleting\n  // the field and wiping the error validateField just set, in the same\n  // tick it was written. Depending on the two functions directly (stable\n  // via Form's useCallback) keeps registration decoupled from errors\n  // changing.\n  // Also deliberately not depending on `rules` — it's a fresh object every\n  // render, so registration happens once per mount (or when formField/name\n  // change), not on every rule-prop tweak. Rule props are effectively fixed\n  // at mount for v0.x; no test or use case yet needs them reactive.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally narrowed deps — see comment above\n  useEffect(() => {\n    if (!formField) return;\n    formField.registerField(name, { ref: inputRef, rules });\n    return () => formField.unregisterField(name);\n  }, [formField?.registerField, formField?.unregisterField, name]);\n\n  // Merges `inputRef` (ours, for registration) with `ref` (the consumer's\n  // forwarded one, if any) so both end up pointing at the same DOM node —\n  // neither one silently loses the element to the other.\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n    if (formField) {\n      formField.validateField(name);\n    }\n    onBlur?.(event);\n  }\n\n  const formContextError = formField ? formField.errors[name] : undefined;\n  const formFieldError = error ?? formContextError;\n\n  return (\n    <Input\n      name={name}\n      required={required}\n      pattern={pattern}\n      minLength={minLength}\n      maxLength={maxLength}\n      min={min}\n      max={max}\n      {...rest}\n      error={formFieldError}\n      onBlur={handleBlur}\n      ref={setRefs}\n    />\n  );\n}\n\nexport const FormFieldInput = forwardRef<HTMLInputElement, FormFieldInputProps>(\n  FormFieldInputInner,\n);\n"]}
+{"version":3,"sources":["../src/components/Form.tsx","../src/components/FormErrorSummary.tsx","../src/components/useFieldRegistry.ts","../src/components/validation.ts","../src/components/FormFieldInput.tsx"],"sourcesContent":["import { FormFieldProvider } from '@asnewyla/input';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { flushSync } from 'react-dom';\nimport { FormErrorSummary } from './FormErrorSummary';\nimport { type InvalidField, useFieldRegistry } from './useFieldRegistry';\n\nexport type FormProps = Omit<ComponentPropsWithoutRef<'form'>, 'onSubmit'> & {\n  children: React.ReactNode;\n  onSubmit?: (values: Record<string, string>) => void;\n};\n\nfunction FormInner(\n  { children, onSubmit, noValidate = true, ...restProps }: FormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  const formRef = useRef<HTMLFormElement>(null);\n  useImperativeHandle(ref, () => formRef.current as HTMLFormElement);\n  const summaryRef = useRef<HTMLDivElement>(null);\n  const {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  } = useFieldRegistry(formRef);\n\n  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    let hasError = false;\n    // flushSync commits the validation state synchronously, so the\n    // summary is already in the DOM by the time we call .focus() below.\n    flushSync(() => {\n      for (const name of fieldNames()) {\n        if (validateField(name)) hasError = true;\n      }\n      setHasAttemptedSubmit(true);\n    });\n    if (hasError) {\n      event.preventDefault();\n      summaryRef.current?.focus();\n      return;\n    }\n\n    if (!onSubmit) return;\n    // With an action, the native submit (or a React 19 form action) goes ahead.\n    if (restProps.action === undefined) event.preventDefault();\n\n    const values: Record<string, string> = {};\n    for (const [key, value] of new FormData(event.currentTarget).entries()) {\n      values[key] = String(value);\n    }\n    onSubmit(values);\n  }\n\n  const invalid: InvalidField[] = hasAttemptedSubmit ? invalidFields() : [];\n\n  const contextValue = useMemo(\n    () => ({ registerField, unregisterField, validateField, errors }),\n    [registerField, unregisterField, validateField, errors],\n  );\n\n  return (\n    <form\n      {...restProps}\n      ref={formRef}\n      onSubmit={handleSubmit}\n      noValidate={noValidate}\n    >\n      {invalid.length > 0 && (\n        <FormErrorSummary ref={summaryRef} invalidFields={invalid} />\n      )}\n      <FormFieldProvider value={contextValue}>{children}</FormFieldProvider>\n    </form>\n  );\n}\n\nexport const Form = forwardRef(FormInner);\n","import { forwardRef } from 'react';\nimport type { InvalidField } from './useFieldRegistry';\nimport './FormErrorSummary.css';\n\nexport type FormErrorSummaryProps = {\n  invalidFields: InvalidField[];\n};\n\nexport const FormErrorSummary = forwardRef<\n  HTMLDivElement,\n  FormErrorSummaryProps\n>(function FormErrorSummary({ invalidFields }, ref) {\n  return (\n    <div className=\"xd-form-error-summary\" role=\"alert\" tabIndex={-1} ref={ref}>\n      <p className=\"xd-form-error-summary-heading\">There is a problem</p>\n      <ul>\n        {invalidFields.map(({ name, id, message }) => (\n          <li key={name}>\n            <a\n              href={`#${id}`}\n              onClick={(event) => {\n                event.preventDefault();\n                document.getElementById(id)?.focus();\n              }}\n            >\n              {message}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n});\n","import type { FieldRegistration } from '@asnewyla/input';\nimport { type RefObject, useCallback, useRef, useState } from 'react';\nimport { validateValue } from './validation';\n\nexport interface InvalidField {\n  name: string;\n  id: string;\n  message: string;\n}\n\nexport interface FieldRegistry {\n  errors: Record<string, string | undefined>;\n  registerField: (name: string, registration: FieldRegistration) => void;\n  unregisterField: (name: string) => void;\n  validateField: (name: string) => string | undefined;\n  fieldNames: () => string[];\n  invalidFields: () => InvalidField[];\n}\n\nexport function useFieldRegistry(\n  formRef: RefObject<HTMLFormElement>,\n): FieldRegistry {\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\n  const [errors, setErrors] = useState<Record<string, string | undefined>>({});\n\n  const registerField = useCallback(\n    (name: string, registration: FieldRegistration) => {\n      fieldsRef.current.set(name, registration);\n    },\n    [],\n  );\n\n  const unregisterField = useCallback((name: string) => {\n    fieldsRef.current.delete(name);\n    setErrors((prev) => {\n      if (!(name in prev)) return prev;\n      const next = { ...prev };\n      delete next[name];\n      return next;\n    });\n  }, []);\n\n  const getFieldValue = useCallback(\n    (name: string): string => {\n      if (!formRef.current) return '';\n      return String(new FormData(formRef.current).get(name) ?? '');\n    },\n    [formRef],\n  );\n\n  const validateField = useCallback(\n    (name: string) => {\n      const field = fieldsRef.current.get(name);\n      const error = validateValue(getFieldValue(name), field?.rules);\n      setErrors((prev) => ({ ...prev, [name]: error }));\n      return error;\n    },\n    [getFieldValue],\n  );\n\n  const fieldNames = useCallback(\n    () => Array.from(fieldsRef.current.keys()),\n    [],\n  );\n\n  const invalidFields = useCallback((): InvalidField[] => {\n    const result: InvalidField[] = [];\n    for (const [name, message] of Object.entries(errors)) {\n      if (!message) continue;\n      const id = fieldsRef.current.get(name)?.ref.current?.id;\n      if (!id) continue;\n      result.push({ name, id, message });\n    }\n    return result;\n  }, [errors]);\n\n  return {\n    errors,\n    registerField,\n    unregisterField,\n    validateField,\n    fieldNames,\n    invalidFields,\n  };\n}\n","import type { ValidationRules } from '@asnewyla/input';\n\nexport function validateValue(\n  value: string,\n  rules?: ValidationRules,\n): string | undefined {\n  if (!rules) return undefined;\n\n  if (rules.required && value.trim() === '') {\n    return typeof rules.required === 'string'\n      ? rules.required\n      : 'This field is required';\n  }\n  if (rules.pattern && value !== '' && !new RegExp(rules.pattern).test(value)) {\n    return 'Invalid format';\n  }\n  if (rules.minLength !== undefined && value.length < rules.minLength) {\n    return `Must be at least ${rules.minLength} characters`;\n  }\n  if (rules.maxLength !== undefined && value.length > rules.maxLength) {\n    return `Must be at most ${rules.maxLength} characters`;\n  }\n  if (\n    rules.min !== undefined &&\n    value !== '' &&\n    Number(value) < Number(rules.min)\n  ) {\n    return `Must be at least ${rules.min}`;\n  }\n  if (\n    rules.max !== undefined &&\n    value !== '' &&\n    Number(value) > Number(rules.max)\n  ) {\n    return `Must be at most ${rules.max}`;\n  }\n  if (rules.validate) {\n    return rules.validate(value);\n  }\n  return undefined;\n}\n","import {\n  Input,\n  type InputProps,\n  type ValidationRules,\n  useFormFieldContext,\n} from '@asnewyla/input';\nimport { type ForwardedRef, forwardRef, useEffect, useRef } from 'react';\n\nexport type FormFieldInputProps = Omit<InputProps, 'name'> & {\n  name: string;\n  validate?: (value: string) => string | undefined;\n};\n\nfunction FormFieldInputInner(\n  {\n    name,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n    error,\n    onBlur,\n    ...rest\n  }: FormFieldInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  // useFormFieldContext() returns null when there's no ancestor\n  // FormFieldProvider — that's what makes FormFieldInput a no-op outside a\n  // Form (still a perfectly usable Input, just without registration).\n  const formField = useFormFieldContext();\n\n  // A stable ref we always own, so registerField always gets a real node —\n  // separate from `ref`, which is whatever (or nothing) the consumer passed.\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const rules: ValidationRules = {\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    min,\n    max,\n    validate,\n  };\n\n  // Deliberately depends on formField?.registerField/unregisterField, not\n  // on `formField` itself — Form's context value changes identity whenever\n  // its `errors` state updates (that's correct: this component needs to\n  // re-render to read the new error). But if this effect depended on the\n  // whole object, every validation would also re-trigger registration:\n  // cleanup would call the *previous* render's unregisterField, deleting\n  // the field and wiping the error validateField just set, in the same\n  // tick it was written. Depending on the two functions directly (stable\n  // via Form's useCallback) keeps registration decoupled from errors\n  // changing.\n  // Also deliberately not depending on `rules` — it's a fresh object every\n  // render, so registration happens once per mount (or when formField/name\n  // change), not on every rule-prop tweak. Rule props are effectively fixed\n  // at mount for v0.x; no test or use case yet needs them reactive.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally narrowed deps — see comment above\n  useEffect(() => {\n    if (!formField) return;\n    formField.registerField(name, { ref: inputRef, rules });\n    return () => formField.unregisterField(name);\n  }, [formField?.registerField, formField?.unregisterField, name]);\n\n  // Merges `inputRef` (ours, for registration) with `ref` (the consumer's\n  // forwarded one, if any) so both end up pointing at the same DOM node —\n  // neither one silently loses the element to the other.\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n    if (formField) {\n      formField.validateField(name);\n    }\n    onBlur?.(event);\n  }\n\n  const formContextError = formField ? formField.errors[name] : undefined;\n  const formFieldError = error ?? formContextError;\n\n  return (\n    <Input\n      name={name}\n      required={required}\n      pattern={pattern}\n      minLength={minLength}\n      maxLength={maxLength}\n      min={min}\n      max={max}\n      {...rest}\n      error={formFieldError}\n      onBlur={handleBlur}\n      ref={setRefs}\n    />\n  );\n}\n\nexport const FormFieldInput = forwardRef<HTMLInputElement, FormFieldInputProps>(\n  FormFieldInputInner,\n);\n"],"mappings":"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","names":["forwardRef","useRef","useState","FormErrorSummary","jsx","jsxs","useRef","useState","forwardRef","forwardRef","useRef","jsx"]}

package/dist/test-utils.js

@@ -1,28 +1,55 @@
-'use strict';
-
-var react = require('@testing-library/react');
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/test-utils.ts
+var test_utils_exports = {};
+__export(test_utils_exports, {
+  getErrorSummary: () => getErrorSummary,
+  getFieldInput: () => getFieldInput,
+  getSubmitButton: () => getSubmitButton,
+  queryErrorSummary: () => queryErrorSummary,
+  submitForm: () => submitForm
+});
+module.exports = __toCommonJS(test_utils_exports);
+var import_react = require("@testing-library/react");
 function getFieldInput(name, role = "textbox") {
-  return react.screen.getByRole(role, { name });
+  return import_react.screen.getByRole(role, { name });
 }
 function getSubmitButton(name = "Save") {
-  return react.screen.getByRole("button", { name });
+  return import_react.screen.getByRole("button", { name });
 }
 function submitForm(user, name = "Save") {
   return user.click(getSubmitButton(name));
 }
 function getErrorSummary() {
-  return react.screen.getByRole("alert");
+  return import_react.screen.getByRole("alert");
 }
 function queryErrorSummary() {
-  return react.screen.queryByRole("alert");
+  return import_react.screen.queryByRole("alert");
 }
-
-exports.getErrorSummary = getErrorSummary;
-exports.getFieldInput = getFieldInput;
-exports.getSubmitButton = getSubmitButton;
-exports.queryErrorSummary = queryErrorSummary;
-exports.submitForm = submitForm;
-//# sourceMappingURL=test-utils.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getErrorSummary,
+  getFieldInput,
+  getSubmitButton,
+  queryErrorSummary,
+  submitForm
+});
 //# sourceMappingURL=test-utils.js.map

package/dist/test-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/test-utils.ts"],"names":["screen"],"mappings":";;;;;AAKO,SAAS,aAAA,CACd,IAAA,EACA,IAAA,GAAkB,SAAA,EACL;AACb,EAAA,OAAOA,YAAA,CAAO,SAAA,CAAU,IAAA,EAAM,EAAE,MAAM,CAAA;AACxC;AAEO,SAAS,eAAA,CAAgB,OAAwB,MAAA,EAAqB;AAC3E,EAAA,OAAOA,YAAA,CAAO,SAAA,CAAU,QAAA,EAAU,EAAE,MAAM,CAAA;AAC5C;AAEO,SAAS,UAAA,CACd,IAAA,EACA,IAAA,GAAwB,MAAA,EACT;AACf,EAAA,OAAO,IAAA,CAAK,KAAA,CAAM,eAAA,CAAgB,IAAI,CAAC,CAAA;AACzC;AAEO,SAAS,eAAA,GAA+B;AAC7C,EAAA,OAAOA,YAAA,CAAO,UAAU,OAAO,CAAA;AACjC;AAEO,SAAS,iBAAA,GAAwC;AACtD,EAAA,OAAOA,YAAA,CAAO,YAAY,OAAO,CAAA;AACnC","file":"test-utils.js","sourcesContent":["import { screen } from '@testing-library/react';\nimport type { UserEvent } from '@testing-library/user-event';\n\ntype FieldRole = 'textbox' | 'spinbutton';\n\nexport function getFieldInput(\n  name: string | RegExp,\n  role: FieldRole = 'textbox',\n): HTMLElement {\n  return screen.getByRole(role, { name });\n}\n\nexport function getSubmitButton(name: string | RegExp = 'Save'): HTMLElement {\n  return screen.getByRole('button', { name });\n}\n\nexport function submitForm(\n  user: UserEvent,\n  name: string | RegExp = 'Save',\n): Promise<void> {\n  return user.click(getSubmitButton(name));\n}\n\nexport function getErrorSummary(): HTMLElement {\n  return screen.getByRole('alert');\n}\n\nexport function queryErrorSummary(): HTMLElement | null {\n  return screen.queryByRole('alert');\n}\n"]}
+{"version":3,"sources":["../src/test-utils.ts"],"sourcesContent":["import { screen } from '@testing-library/react';\nimport type { UserEvent } from '@testing-library/user-event';\n\ntype FieldRole = 'textbox' | 'spinbutton';\n\nexport function getFieldInput(\n  name: string | RegExp,\n  role: FieldRole = 'textbox',\n): HTMLElement {\n  return screen.getByRole(role, { name });\n}\n\nexport function getSubmitButton(name: string | RegExp = 'Save'): HTMLElement {\n  return screen.getByRole('button', { name });\n}\n\nexport function submitForm(\n  user: UserEvent,\n  name: string | RegExp = 'Save',\n): Promise<void> {\n  return user.click(getSubmitButton(name));\n}\n\nexport function getErrorSummary(): HTMLElement {\n  return screen.getByRole('alert');\n}\n\nexport function queryErrorSummary(): HTMLElement | null {\n  return screen.queryByRole('alert');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAKhB,SAAS,cACd,MACA,OAAkB,WACL;AACb,SAAO,oBAAO,UAAU,MAAM,EAAE,KAAK,CAAC;AACxC;AAEO,SAAS,gBAAgB,OAAwB,QAAqB;AAC3E,SAAO,oBAAO,UAAU,UAAU,EAAE,KAAK,CAAC;AAC5C;AAEO,SAAS,WACd,MACA,OAAwB,QACT;AACf,SAAO,KAAK,MAAM,gBAAgB,IAAI,CAAC;AACzC;AAEO,SAAS,kBAA+B;AAC7C,SAAO,oBAAO,UAAU,OAAO;AACjC;AAEO,SAAS,oBAAwC;AACtD,SAAO,oBAAO,YAAY,OAAO;AACnC;","names":[]}

package/dist/test-utils.mjs

@@ -1,6 +1,7 @@
-import { screen } from '@testing-library/react';
+'use client';
 
 // src/test-utils.ts
+import { screen } from "@testing-library/react";
 function getFieldInput(name, role = "textbox") {
   return screen.getByRole(role, { name });
 }
@@ -16,7 +17,11 @@ function getErrorSummary() {
 function queryErrorSummary() {
   return screen.queryByRole("alert");
 }
-
-export { getErrorSummary, getFieldInput, getSubmitButton, queryErrorSummary, submitForm };
-//# sourceMappingURL=test-utils.mjs.map
+export {
+  getErrorSummary,
+  getFieldInput,
+  getSubmitButton,
+  queryErrorSummary,
+  submitForm
+};
 //# sourceMappingURL=test-utils.mjs.map

package/dist/test-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/test-utils.ts"],"names":[],"mappings":";;;AAKO,SAAS,aAAA,CACd,IAAA,EACA,IAAA,GAAkB,SAAA,EACL;AACb,EAAA,OAAO,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM,EAAE,MAAM,CAAA;AACxC;AAEO,SAAS,eAAA,CAAgB,OAAwB,MAAA,EAAqB;AAC3E,EAAA,OAAO,MAAA,CAAO,SAAA,CAAU,QAAA,EAAU,EAAE,MAAM,CAAA;AAC5C;AAEO,SAAS,UAAA,CACd,IAAA,EACA,IAAA,GAAwB,MAAA,EACT;AACf,EAAA,OAAO,IAAA,CAAK,KAAA,CAAM,eAAA,CAAgB,IAAI,CAAC,CAAA;AACzC;AAEO,SAAS,eAAA,GAA+B;AAC7C,EAAA,OAAO,MAAA,CAAO,UAAU,OAAO,CAAA;AACjC;AAEO,SAAS,iBAAA,GAAwC;AACtD,EAAA,OAAO,MAAA,CAAO,YAAY,OAAO,CAAA;AACnC","file":"test-utils.mjs","sourcesContent":["import { screen } from '@testing-library/react';\nimport type { UserEvent } from '@testing-library/user-event';\n\ntype FieldRole = 'textbox' | 'spinbutton';\n\nexport function getFieldInput(\n  name: string | RegExp,\n  role: FieldRole = 'textbox',\n): HTMLElement {\n  return screen.getByRole(role, { name });\n}\n\nexport function getSubmitButton(name: string | RegExp = 'Save'): HTMLElement {\n  return screen.getByRole('button', { name });\n}\n\nexport function submitForm(\n  user: UserEvent,\n  name: string | RegExp = 'Save',\n): Promise<void> {\n  return user.click(getSubmitButton(name));\n}\n\nexport function getErrorSummary(): HTMLElement {\n  return screen.getByRole('alert');\n}\n\nexport function queryErrorSummary(): HTMLElement | null {\n  return screen.queryByRole('alert');\n}\n"]}
+{"version":3,"sources":["../src/test-utils.ts"],"sourcesContent":["import { screen } from '@testing-library/react';\nimport type { UserEvent } from '@testing-library/user-event';\n\ntype FieldRole = 'textbox' | 'spinbutton';\n\nexport function getFieldInput(\n  name: string | RegExp,\n  role: FieldRole = 'textbox',\n): HTMLElement {\n  return screen.getByRole(role, { name });\n}\n\nexport function getSubmitButton(name: string | RegExp = 'Save'): HTMLElement {\n  return screen.getByRole('button', { name });\n}\n\nexport function submitForm(\n  user: UserEvent,\n  name: string | RegExp = 'Save',\n): Promise<void> {\n  return user.click(getSubmitButton(name));\n}\n\nexport function getErrorSummary(): HTMLElement {\n  return screen.getByRole('alert');\n}\n\nexport function queryErrorSummary(): HTMLElement | null {\n  return screen.queryByRole('alert');\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AAKhB,SAAS,cACd,MACA,OAAkB,WACL;AACb,SAAO,OAAO,UAAU,MAAM,EAAE,KAAK,CAAC;AACxC;AAEO,SAAS,gBAAgB,OAAwB,QAAqB;AAC3E,SAAO,OAAO,UAAU,UAAU,EAAE,KAAK,CAAC;AAC5C;AAEO,SAAS,WACd,MACA,OAAwB,QACT;AACf,SAAO,KAAK,MAAM,gBAAgB,IAAI,CAAC;AACzC;AAEO,SAAS,kBAA+B;AAC7C,SAAO,OAAO,UAAU,OAAO;AACjC;AAEO,SAAS,oBAAwC;AACtD,SAAO,OAAO,YAAY,OAAO;AACnC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asnewyla/form",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Form wrapper with real validation and an accessible error summary",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@asnewyla/input": "0.2.1"
+    "@asnewyla/input": "0.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.0",