@asnewyla/form 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# @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, anywhere in your app:
+
+```ts
+import '@asnewyla/input/styles.css';
+```
+
+`@asnewyla/form` ships no CSS of its own — every field's appearance comes
+from `@asnewyla/input`.
+
+## 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

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { InputProps } from '@asnewyla/input';
+
+type FormProps = {
+    children: React.ReactNode;
+    onSubmit: (values: Record<string, string>) => void;
+};
+declare function Form({ children, onSubmit }: FormProps): react.JSX.Element;
+
+type FormFieldInputProps = Omit<InputProps, 'name'> & {
+    name: string;
+    validate?: (value: string) => string | undefined;
+};
+declare const FormFieldInput: react.ForwardRefExoticComponent<Omit<InputProps, "name"> & {
+    name: string;
+    validate?: (value: string) => string | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+export { Form, FormFieldInput, type FormFieldInputProps, type FormProps };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { InputProps } from '@asnewyla/input';
+
+type FormProps = {
+    children: React.ReactNode;
+    onSubmit: (values: Record<string, string>) => void;
+};
+declare function Form({ children, onSubmit }: FormProps): react.JSX.Element;
+
+type FormFieldInputProps = Omit<InputProps, 'name'> & {
+    name: string;
+    validate?: (value: string) => string | undefined;
+};
+declare const FormFieldInput: react.ForwardRefExoticComponent<Omit<InputProps, "name"> & {
+    name: string;
+    validate?: (value: string) => string | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+export { Form, FormFieldInput, type FormFieldInputProps, type FormProps };

package/dist/index.js

@@ -0,0 +1,232 @@
+'use strict';
+
+var input = require('@asnewyla/input');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Form.tsx
+
+// src/components/validation.ts
+function validateValue(value, rules) {
+  if (!rules) return void 0;
+  if (rules.required && value.trim() === "") {
+    return typeof rules.required === "string" ? rules.required : "This field is required";
+  }
+  if (rules.pattern && value !== "" && !new RegExp(rules.pattern).test(value)) {
+    return "Invalid format";
+  }
+  if (rules.minLength !== void 0 && value.length < rules.minLength) {
+    return `Must be at least ${rules.minLength} characters`;
+  }
+  if (rules.maxLength !== void 0 && value.length > rules.maxLength) {
+    return `Must be at most ${rules.maxLength} characters`;
+  }
+  if (rules.min !== void 0 && value !== "" && Number(value) < Number(rules.min)) {
+    return `Must be at least ${rules.min}`;
+  }
+  if (rules.max !== void 0 && value !== "" && Number(value) > Number(rules.max)) {
+    return `Must be at most ${rules.max}`;
+  }
+  if (rules.validate) {
+    return rules.validate(value);
+  }
+  return void 0;
+}
+
+// src/components/useFieldRegistry.ts
+function useFieldRegistry(formRef) {
+  const fieldsRef = react.useRef(/* @__PURE__ */ new Map());
+  const [errors, setErrors] = react.useState({});
+  const registerField = react.useCallback(
+    (name, registration) => {
+      fieldsRef.current.set(name, registration);
+    },
+    []
+  );
+  const unregisterField = react.useCallback((name) => {
+    fieldsRef.current.delete(name);
+    setErrors((prev) => {
+      if (!(name in prev)) return prev;
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+  const getFieldValue = react.useCallback(
+    (name) => {
+      if (!formRef.current) return "";
+      return String(new FormData(formRef.current).get(name) ?? "");
+    },
+    [formRef]
+  );
+  const validateField = react.useCallback(
+    (name) => {
+      const field = fieldsRef.current.get(name);
+      const error = validateValue(getFieldValue(name), field?.rules);
+      setErrors((prev) => ({ ...prev, [name]: error }));
+      return error;
+    },
+    [getFieldValue]
+  );
+  const fieldNames = react.useCallback(
+    () => Array.from(fieldsRef.current.keys()),
+    []
+  );
+  const invalidFields = react.useCallback(() => {
+    const result = [];
+    for (const [name, message] of Object.entries(errors)) {
+      if (!message) continue;
+      const id = fieldsRef.current.get(name)?.ref.current?.id;
+      if (!id) continue;
+      result.push({ name, id, message });
+    }
+    return result;
+  }, [errors]);
+  return {
+    errors,
+    registerField,
+    unregisterField,
+    validateField,
+    fieldNames,
+    invalidFields
+  };
+}
+function Form({ children, onSubmit }) {
+  const formRef = react.useRef(null);
+  const summaryRef = react.useRef(null);
+  const {
+    errors,
+    registerField,
+    unregisterField,
+    validateField,
+    fieldNames,
+    invalidFields
+  } = useFieldRegistry(formRef);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = react.useState(false);
+  function handleSubmit(event) {
+    event.preventDefault();
+    let hasError = false;
+    reactDom.flushSync(() => {
+      for (const name of fieldNames()) {
+        if (validateField(name)) hasError = true;
+      }
+      setHasAttemptedSubmit(true);
+    });
+    if (hasError) {
+      summaryRef.current?.focus();
+      return;
+    }
+    const values = {};
+    for (const [key, value] of new FormData(event.currentTarget).entries()) {
+      values[key] = String(value);
+    }
+    onSubmit(values);
+  }
+  const invalid = hasAttemptedSubmit ? invalidFields() : [];
+  const contextValue = react.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(ErrorSummary, { ref: summaryRef, invalidFields: invalid }),
+    /* @__PURE__ */ jsxRuntime.jsx(input.FormFieldProvider, { value: contextValue, children })
+  ] });
+}
+var ErrorSummary = react.forwardRef(
+  function ErrorSummary2({ 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(
+            "a",
+            {
+              href: `#${id}`,
+              onClick: (event) => {
+                event.preventDefault();
+                document.getElementById(id)?.focus();
+              },
+              children: message
+            }
+          ) }, name)) })
+        ]
+      }
+    );
+  }
+);
+function FormFieldInputInner({
+  name,
+  required,
+  pattern,
+  minLength,
+  maxLength,
+  min,
+  max,
+  validate,
+  error,
+  onBlur,
+  ...rest
+}, ref) {
+  const formField = input.useFormFieldContext();
+  const inputRef = react.useRef(null);
+  const rules = {
+    required,
+    pattern,
+    minLength,
+    maxLength,
+    min,
+    max,
+    validate
+  };
+  react.useEffect(() => {
+    if (!formField) return;
+    formField.registerField(name, { ref: inputRef, rules });
+    return () => formField.unregisterField(name);
+  }, [formField?.registerField, formField?.unregisterField, name]);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  function handleBlur(event) {
+    if (formField) {
+      formField.validateField(name);
+    }
+    onBlur?.(event);
+  }
+  const formContextError = formField ? formField.errors[name] : void 0;
+  const formFieldError = error ?? formContextError;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      name,
+      required,
+      pattern,
+      minLength,
+      maxLength,
+      min,
+      max,
+      ...rest,
+      error: formFieldError,
+      onBlur: handleBlur,
+      ref: setRefs
+    }
+  );
+}
+var FormFieldInput = react.forwardRef(
+  FormFieldInputInner
+);
+
+exports.Form = Form;
+exports.FormFieldInput = FormFieldInput;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/index.mjs

@@ -0,0 +1,229 @@
+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';
+
+// src/components/Form.tsx
+
+// src/components/validation.ts
+function validateValue(value, rules) {
+  if (!rules) return void 0;
+  if (rules.required && value.trim() === "") {
+    return typeof rules.required === "string" ? rules.required : "This field is required";
+  }
+  if (rules.pattern && value !== "" && !new RegExp(rules.pattern).test(value)) {
+    return "Invalid format";
+  }
+  if (rules.minLength !== void 0 && value.length < rules.minLength) {
+    return `Must be at least ${rules.minLength} characters`;
+  }
+  if (rules.maxLength !== void 0 && value.length > rules.maxLength) {
+    return `Must be at most ${rules.maxLength} characters`;
+  }
+  if (rules.min !== void 0 && value !== "" && Number(value) < Number(rules.min)) {
+    return `Must be at least ${rules.min}`;
+  }
+  if (rules.max !== void 0 && value !== "" && Number(value) > Number(rules.max)) {
+    return `Must be at most ${rules.max}`;
+  }
+  if (rules.validate) {
+    return rules.validate(value);
+  }
+  return void 0;
+}
+
+// src/components/useFieldRegistry.ts
+function useFieldRegistry(formRef) {
+  const fieldsRef = useRef(/* @__PURE__ */ new Map());
+  const [errors, setErrors] = useState({});
+  const registerField = useCallback(
+    (name, registration) => {
+      fieldsRef.current.set(name, registration);
+    },
+    []
+  );
+  const unregisterField = useCallback((name) => {
+    fieldsRef.current.delete(name);
+    setErrors((prev) => {
+      if (!(name in prev)) return prev;
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+  const getFieldValue = useCallback(
+    (name) => {
+      if (!formRef.current) return "";
+      return String(new FormData(formRef.current).get(name) ?? "");
+    },
+    [formRef]
+  );
+  const validateField = useCallback(
+    (name) => {
+      const field = fieldsRef.current.get(name);
+      const error = validateValue(getFieldValue(name), field?.rules);
+      setErrors((prev) => ({ ...prev, [name]: error }));
+      return error;
+    },
+    [getFieldValue]
+  );
+  const fieldNames = useCallback(
+    () => Array.from(fieldsRef.current.keys()),
+    []
+  );
+  const invalidFields = useCallback(() => {
+    const result = [];
+    for (const [name, message] of Object.entries(errors)) {
+      if (!message) continue;
+      const id = fieldsRef.current.get(name)?.ref.current?.id;
+      if (!id) continue;
+      result.push({ name, id, message });
+    }
+    return result;
+  }, [errors]);
+  return {
+    errors,
+    registerField,
+    unregisterField,
+    validateField,
+    fieldNames,
+    invalidFields
+  };
+}
+function Form({ children, onSubmit }) {
+  const formRef = useRef(null);
+  const summaryRef = useRef(null);
+  const {
+    errors,
+    registerField,
+    unregisterField,
+    validateField,
+    fieldNames,
+    invalidFields
+  } = useFieldRegistry(formRef);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);
+  function handleSubmit(event) {
+    event.preventDefault();
+    let hasError = false;
+    flushSync(() => {
+      for (const name of fieldNames()) {
+        if (validateField(name)) hasError = true;
+      }
+      setHasAttemptedSubmit(true);
+    });
+    if (hasError) {
+      summaryRef.current?.focus();
+      return;
+    }
+    const values = {};
+    for (const [key, value] of new FormData(event.currentTarget).entries()) {
+      values[key] = String(value);
+    }
+    onSubmit(values);
+  }
+  const invalid = hasAttemptedSubmit ? invalidFields() : [];
+  const contextValue = useMemo(
+    () => ({ registerField, unregisterField, validateField, errors }),
+    [registerField, unregisterField, validateField, errors]
+  );
+  return /* @__PURE__ */ jsxs("form", { ref: formRef, onSubmit: handleSubmit, noValidate: true, children: [
+    invalid.length > 0 && /* @__PURE__ */ jsx(ErrorSummary, { ref: summaryRef, invalidFields: invalid }),
+    /* @__PURE__ */ jsx(FormFieldProvider, { value: contextValue, children })
+  ] });
+}
+var ErrorSummary = forwardRef(
+  function ErrorSummary2({ 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" }),
+          /* @__PURE__ */ jsx("ul", { children: invalidFields.map(({ name, id, message }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `#${id}`,
+              onClick: (event) => {
+                event.preventDefault();
+                document.getElementById(id)?.focus();
+              },
+              children: message
+            }
+          ) }, name)) })
+        ]
+      }
+    );
+  }
+);
+function FormFieldInputInner({
+  name,
+  required,
+  pattern,
+  minLength,
+  maxLength,
+  min,
+  max,
+  validate,
+  error,
+  onBlur,
+  ...rest
+}, ref) {
+  const formField = useFormFieldContext();
+  const inputRef = useRef(null);
+  const rules = {
+    required,
+    pattern,
+    minLength,
+    maxLength,
+    min,
+    max,
+    validate
+  };
+  useEffect(() => {
+    if (!formField) return;
+    formField.registerField(name, { ref: inputRef, rules });
+    return () => formField.unregisterField(name);
+  }, [formField?.registerField, formField?.unregisterField, name]);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  function handleBlur(event) {
+    if (formField) {
+      formField.validateField(name);
+    }
+    onBlur?.(event);
+  }
+  const formContextError = formField ? formField.errors[name] : void 0;
+  const formFieldError = error ?? formContextError;
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      name,
+      required,
+      pattern,
+      minLength,
+      maxLength,
+      min,
+      max,
+      ...rest,
+      error: formFieldError,
+      onBlur: handleBlur,
+      ref: setRefs
+    }
+  );
+}
+var FormFieldInput = forwardRef(
+  FormFieldInputInner
+);
+
+export { Form, FormFieldInput };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/validation.ts","../src/components/useFieldRegistry.ts","../src/components/Form.tsx","../src/components/FormFieldInput.tsx"],"names":["useRef","useState","ErrorSummary","jsx","forwardRef"],"mappings":";;;;;;;;AAEO,SAAS,aAAA,CACd,OACA,KAAA,EACoB;AACpB,EAAA,IAAI,CAAC,OAAO,OAAO,MAAA;AAEnB,EAAA,IAAI,KAAA,CAAM,QAAA,IAAY,KAAA,CAAM,IAAA,OAAW,EAAA,EAAI;AACzC,IAAA,OAAO,OAAO,KAAA,CAAM,QAAA,KAAa,QAAA,GAC7B,MAAM,QAAA,GACN,wBAAA;AAAA,EACN;AACA,EAAA,IAAI,KAAA,CAAM,OAAA,IAAW,KAAA,KAAU,EAAA,IAAM,CAAC,IAAI,MAAA,CAAO,KAAA,CAAM,OAAO,CAAA,CAAE,IAAA,CAAK,KAAK,CAAA,EAAG;AAC3E,IAAA,OAAO,gBAAA;AAAA,EACT;AACA,EAAA,IAAI,MAAM,SAAA,KAAc,MAAA,IAAa,KAAA,CAAM,MAAA,GAAS,MAAM,SAAA,EAAW;AACnE,IAAA,OAAO,CAAA,iBAAA,EAAoB,MAAM,SAAS,CAAA,WAAA,CAAA;AAAA,EAC5C;AACA,EAAA,IAAI,MAAM,SAAA,KAAc,MAAA,IAAa,KAAA,CAAM,MAAA,GAAS,MAAM,SAAA,EAAW;AACnE,IAAA,OAAO,CAAA,gBAAA,EAAmB,MAAM,SAAS,CAAA,WAAA,CAAA;AAAA,EAC3C;AACA,EAAA,IACE,KAAA,CAAM,GAAA,KAAQ,MAAA,IACd,KAAA,KAAU,EAAA,IACV,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA,CAAO,KAAA,CAAM,GAAG,CAAA,EAChC;AACA,IAAA,OAAO,CAAA,iBAAA,EAAoB,MAAM,GAAG,CAAA,CAAA;AAAA,EACtC;AACA,EAAA,IACE,KAAA,CAAM,GAAA,KAAQ,MAAA,IACd,KAAA,KAAU,EAAA,IACV,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA,CAAO,KAAA,CAAM,GAAG,CAAA,EAChC;AACA,IAAA,OAAO,CAAA,gBAAA,EAAmB,MAAM,GAAG,CAAA,CAAA;AAAA,EACrC;AACA,EAAA,IAAI,MAAM,QAAA,EAAU;AAClB,IAAA,OAAO,KAAA,CAAM,SAAS,KAAK,CAAA;AAAA,EAC7B;AACA,EAAA,OAAO,MAAA;AACT;;;ACrBO,SAAS,iBACd,OAAA,EACe;AACf,EAAA,MAAM,SAAA,GAAY,MAAA,iBAAuC,IAAI,GAAA,EAAK,CAAA;AAClE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAA,CAA6C,EAAE,CAAA;AAE3E,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,MAAc,YAAA,KAAoC;AACjD,MAAA,SAAA,CAAU,OAAA,CAAQ,GAAA,CAAI,IAAA,EAAM,YAAY,CAAA;AAAA,IAC1C,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,CAAC,IAAA,KAAiB;AACpD,IAAA,SAAA,CAAU,OAAA,CAAQ,OAAO,IAAI,CAAA;AAC7B,IAAA,SAAA,CAAU,CAAC,IAAA,KAAS;AAClB,MAAA,IAAI,EAAE,IAAA,IAAQ,IAAA,CAAA,EAAO,OAAO,IAAA;AAC5B,MAAA,MAAM,IAAA,GAAO,EAAE,GAAG,IAAA,EAAK;AACvB,MAAA,OAAO,KAAK,IAAI,CAAA;AAChB,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,IAAA,KAAyB;AACxB,MAAA,IAAI,CAAC,OAAA,CAAQ,OAAA,EAAS,OAAO,EAAA;AAC7B,MAAA,OAAO,MAAA,CAAO,IAAI,QAAA,CAAS,OAAA,CAAQ,OAAO,CAAA,CAAE,GAAA,CAAI,IAAI,CAAA,IAAK,EAAE,CAAA;AAAA,IAC7D,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,IAAA,KAAiB;AAChB,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,OAAA,CAAQ,GAAA,CAAI,IAAI,CAAA;AACxC,MAAA,MAAM,QAAQ,aAAA,CAAc,aAAA,CAAc,IAAI,CAAA,EAAG,OAAO,KAAK,CAAA;AAC7D,MAAA,SAAA,CAAU,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,KAAA,EAAM,CAAE,CAAA;AAChD,MAAA,OAAO,KAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,MAAM,KAAA,CAAM,IAAA,CAAK,SAAA,CAAU,OAAA,CAAQ,MAAM,CAAA;AAAA,IACzC;AAAC,GACH;AAEA,EAAA,MAAM,aAAA,GAAgB,YAAY,MAAsB;AACtD,IAAA,MAAM,SAAyB,EAAC;AAChC,IAAA,KAAA,MAAW,CAAC,IAAA,EAAM,OAAO,KAAK,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA,EAAG;AACpD,MAAA,IAAI,CAAC,OAAA,EAAS;AACd,MAAA,MAAM,KAAK,SAAA,CAAU,OAAA,CAAQ,IAAI,IAAI,CAAA,EAAG,IAAI,OAAA,EAAS,EAAA;AACrD,MAAA,IAAI,CAAC,EAAA,EAAI;AACT,MAAA,MAAA,CAAO,IAAA,CAAK,EAAE,IAAA,EAAM,EAAA,EAAI,SAAS,CAAA;AAAA,IACnC;AACA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AACF;AC1EO,SAAS,IAAA,CAAK,EAAE,QAAA,EAAU,QAAA,EAAS,EAAc;AACtD,EAAA,MAAM,OAAA,GAAUA,OAAwB,IAAI,CAAA;AAC5C,EAAA,MAAM,UAAA,GAAaA,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAiB,OAAO,CAAA;AAE5B,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAIC,SAAS,KAAK,CAAA;AAElE,EAAA,SAAS,aAAa,KAAA,EAAyC;AAC7D,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,QAAA,GAAW,KAAA;AAGf,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,KAAA,MAAW,IAAA,IAAQ,YAAW,EAAG;AAC/B,QAAA,IAAI,aAAA,CAAc,IAAI,CAAA,EAAG,QAAA,GAAW,IAAA;AAAA,MACtC;AACA,MAAA,qBAAA,CAAsB,IAAI,CAAA;AAAA,IAC5B,CAAC,CAAA;AACD,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,UAAA,CAAW,SAAS,KAAA,EAAM;AAC1B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,SAAiC,EAAC;AACxC,IAAA,KAAA,MAAW,CAAC,GAAA,EAAK,KAAK,CAAA,IAAK,IAAI,SAAS,KAAA,CAAM,aAAa,CAAA,CAAE,OAAA,EAAQ,EAAG;AACtE,MAAA,MAAA,CAAO,GAAG,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA;AAAA,IAC5B;AACA,IAAA,QAAA,CAAS,MAAM,CAAA;AAAA,EACjB;AAEA,EAAA,MAAM,OAAA,GAA0B,kBAAA,GAAqB,aAAA,EAAc,GAAI,EAAC;AAExE,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO,EAAE,aAAA,EAAe,eAAA,EAAiB,eAAe,MAAA,EAAO,CAAA;AAAA,IAC/D,CAAC,aAAA,EAAe,eAAA,EAAiB,aAAA,EAAe,MAAM;AAAA,GACxD;AAEA,EAAA,4BACG,MAAA,EAAA,EAAK,GAAA,EAAK,SAAS,QAAA,EAAU,YAAA,EAAc,YAAU,IAAA,EACnD,QAAA,EAAA;AAAA,IAAA,OAAA,CAAQ,SAAS,CAAA,oBAChB,GAAA,CAAC,gBAAa,GAAA,EAAK,UAAA,EAAY,eAAe,OAAA,EAAS,CAAA;AAAA,oBAEzD,GAAA,CAAC,iBAAA,EAAA,EAAkB,KAAA,EAAO,YAAA,EAAe,QAAA,EAAS;AAAA,GAAA,EACpD,CAAA;AAEJ;AAMA,IAAM,YAAA,GAAe,UAAA;AAAA,EACnB,SAASC,aAAAA,CAAa,EAAE,aAAA,IAAiB,GAAA,EAAK;AAC5C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,uBAAA;AAAA,QACV,IAAA,EAAK,OAAA;AAAA,QACL,QAAA,EAAU,EAAA;AAAA,QACV,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+BAAA,EAAgC,QAAA,EAAA,oBAAA,EAAkB,CAAA;AAAA,0BAC/D,GAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA,aAAA,CAAc,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,EAAA,EAAI,OAAA,EAAQ,qBACtC,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,IAAI,EAAE,CAAA,CAAA;AAAA,cACZ,OAAA,EAAS,CAAC,KAAA,KAAU;AAClB,gBAAA,KAAA,CAAM,cAAA,EAAe;AACrB,gBAAA,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA,EAAG,KAAA,EAAM;AAAA,cACrC,CAAA;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH,EAAA,EATO,IAUT,CACD,CAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;ACpFA,SAAS,mBAAA,CACP;AAAA,EACE,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AAIA,EAAA,MAAM,YAAY,mBAAA,EAAoB;AAItC,EAAA,MAAM,QAAA,GAAWF,OAAgC,IAAI,CAAA;AAErD,EAAA,MAAM,KAAA,GAAyB;AAAA,IAC7B,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAA;AAAA,IACA;AAAA,GACF;AAiBA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,SAAA,CAAU,cAAc,IAAA,EAAM,EAAE,GAAA,EAAK,QAAA,EAAU,OAAO,CAAA;AACtD,IAAA,OAAO,MAAM,SAAA,CAAU,eAAA,CAAgB,IAAI,CAAA;AAAA,EAC7C,GAAG,CAAC,SAAA,EAAW,eAAe,SAAA,EAAW,eAAA,EAAiB,IAAI,CAAC,CAAA;AAK/D,EAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAkC;AACjD,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,IAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,MAAA,GAAA,CAAI,IAAI,CAAA;AAAA,IACV,WAAW,GAAA,EAAK;AACd,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB;AAAA,EACF,CAAA;AAEA,EAAA,SAAS,WAAW,KAAA,EAA2C;AAC7D,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,SAAA,CAAU,cAAc,IAAI,CAAA;AAAA,IAC9B;AACA,IAAA,MAAA,GAAS,KAAK,CAAA;AAAA,EAChB;AAEA,EAAA,MAAM,gBAAA,GAAmB,SAAA,GAAY,SAAA,CAAU,MAAA,CAAO,IAAI,CAAA,GAAI,MAAA;AAC9D,EAAA,MAAM,iBAAiB,KAAA,IAAS,gBAAA;AAEhC,EAAA,uBACEG,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,cAAA;AAAA,MACP,MAAA,EAAQ,UAAA;AAAA,MACR,GAAA,EAAK;AAAA;AAAA,GACP;AAEJ;AAEO,IAAM,cAAA,GAAiBC,UAAAA;AAAA,EAC5B;AACF","file":"index.mjs","sourcesContent":["import type { ValidationRules } from '@asnewyla/input';\r\n\r\nexport function validateValue(\r\n  value: string,\r\n  rules?: ValidationRules,\r\n): string | undefined {\r\n  if (!rules) return undefined;\r\n\r\n  if (rules.required && value.trim() === '') {\r\n    return typeof rules.required === 'string'\r\n      ? rules.required\r\n      : 'This field is required';\r\n  }\r\n  if (rules.pattern && value !== '' && !new RegExp(rules.pattern).test(value)) {\r\n    return 'Invalid format';\r\n  }\r\n  if (rules.minLength !== undefined && value.length < rules.minLength) {\r\n    return `Must be at least ${rules.minLength} characters`;\r\n  }\r\n  if (rules.maxLength !== undefined && value.length > rules.maxLength) {\r\n    return `Must be at most ${rules.maxLength} characters`;\r\n  }\r\n  if (\r\n    rules.min !== undefined &&\r\n    value !== '' &&\r\n    Number(value) < Number(rules.min)\r\n  ) {\r\n    return `Must be at least ${rules.min}`;\r\n  }\r\n  if (\r\n    rules.max !== undefined &&\r\n    value !== '' &&\r\n    Number(value) > Number(rules.max)\r\n  ) {\r\n    return `Must be at most ${rules.max}`;\r\n  }\r\n  if (rules.validate) {\r\n    return rules.validate(value);\r\n  }\r\n  return undefined;\r\n}\r\n","import type { FieldRegistration } from '@asnewyla/input';\r\nimport { type RefObject, useCallback, useRef, useState } from 'react';\r\nimport { validateValue } from './validation';\r\n\r\nexport interface InvalidField {\r\n  name: string;\r\n  id: string;\r\n  message: string;\r\n}\r\n\r\nexport interface FieldRegistry {\r\n  errors: Record<string, string | undefined>;\r\n  registerField: (name: string, registration: FieldRegistration) => void;\r\n  unregisterField: (name: string) => void;\r\n  validateField: (name: string) => string | undefined;\r\n  fieldNames: () => string[];\r\n  invalidFields: () => InvalidField[];\r\n}\r\n\r\nexport function useFieldRegistry(\r\n  formRef: RefObject<HTMLFormElement>,\r\n): FieldRegistry {\r\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\r\n  const [errors, setErrors] = useState<Record<string, string | undefined>>({});\r\n\r\n  const registerField = useCallback(\r\n    (name: string, registration: FieldRegistration) => {\r\n      fieldsRef.current.set(name, registration);\r\n    },\r\n    [],\r\n  );\r\n\r\n  const unregisterField = useCallback((name: string) => {\r\n    fieldsRef.current.delete(name);\r\n    setErrors((prev) => {\r\n      if (!(name in prev)) return prev;\r\n      const next = { ...prev };\r\n      delete next[name];\r\n      return next;\r\n    });\r\n  }, []);\r\n\r\n  const getFieldValue = useCallback(\r\n    (name: string): string => {\r\n      if (!formRef.current) return '';\r\n      return String(new FormData(formRef.current).get(name) ?? '');\r\n    },\r\n    [formRef],\r\n  );\r\n\r\n  const validateField = useCallback(\r\n    (name: string) => {\r\n      const field = fieldsRef.current.get(name);\r\n      const error = validateValue(getFieldValue(name), field?.rules);\r\n      setErrors((prev) => ({ ...prev, [name]: error }));\r\n      return error;\r\n    },\r\n    [getFieldValue],\r\n  );\r\n\r\n  const fieldNames = useCallback(\r\n    () => Array.from(fieldsRef.current.keys()),\r\n    [],\r\n  );\r\n\r\n  const invalidFields = useCallback((): InvalidField[] => {\r\n    const result: InvalidField[] = [];\r\n    for (const [name, message] of Object.entries(errors)) {\r\n      if (!message) continue;\r\n      const id = fieldsRef.current.get(name)?.ref.current?.id;\r\n      if (!id) continue;\r\n      result.push({ name, id, message });\r\n    }\r\n    return result;\r\n  }, [errors]);\r\n\r\n  return {\r\n    errors,\r\n    registerField,\r\n    unregisterField,\r\n    validateField,\r\n    fieldNames,\r\n    invalidFields,\r\n  };\r\n}\r\n","import { FormFieldProvider } from '@asnewyla/input';\r\nimport { forwardRef, useMemo, useRef, useState } from 'react';\r\nimport { flushSync } from 'react-dom';\r\nimport { type InvalidField, useFieldRegistry } from './useFieldRegistry';\r\n\r\nexport type FormProps = {\r\n  children: React.ReactNode;\r\n  onSubmit: (values: Record<string, string>) => void;\r\n};\r\n\r\nexport function Form({ children, onSubmit }: FormProps) {\r\n  const formRef = useRef<HTMLFormElement>(null);\r\n  const summaryRef = useRef<HTMLDivElement>(null);\r\n  const {\r\n    errors,\r\n    registerField,\r\n    unregisterField,\r\n    validateField,\r\n    fieldNames,\r\n    invalidFields,\r\n  } = useFieldRegistry(formRef);\r\n\r\n  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);\r\n\r\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\r\n    event.preventDefault();\r\n\r\n    let hasError = false;\r\n    // flushSync commits the validation state synchronously, so the\r\n    // summary is already in the DOM by the time we call .focus() below.\r\n    flushSync(() => {\r\n      for (const name of fieldNames()) {\r\n        if (validateField(name)) hasError = true;\r\n      }\r\n      setHasAttemptedSubmit(true);\r\n    });\r\n    if (hasError) {\r\n      summaryRef.current?.focus();\r\n      return;\r\n    }\r\n\r\n    const values: Record<string, string> = {};\r\n    for (const [key, value] of new FormData(event.currentTarget).entries()) {\r\n      values[key] = String(value);\r\n    }\r\n    onSubmit(values);\r\n  }\r\n\r\n  const invalid: InvalidField[] = hasAttemptedSubmit ? invalidFields() : [];\r\n\r\n  const contextValue = useMemo(\r\n    () => ({ registerField, unregisterField, validateField, errors }),\r\n    [registerField, unregisterField, validateField, errors],\r\n  );\r\n\r\n  return (\r\n    <form ref={formRef} onSubmit={handleSubmit} noValidate>\r\n      {invalid.length > 0 && (\r\n        <ErrorSummary ref={summaryRef} invalidFields={invalid} />\r\n      )}\r\n      <FormFieldProvider value={contextValue}>{children}</FormFieldProvider>\r\n    </form>\r\n  );\r\n}\r\n\r\ntype ErrorSummaryProps = {\r\n  invalidFields: InvalidField[];\r\n};\r\n\r\nconst ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\r\n  function ErrorSummary({ invalidFields }, ref) {\r\n    return (\r\n      <div\r\n        className=\"xd-form-error-summary\"\r\n        role=\"alert\"\r\n        tabIndex={-1}\r\n        ref={ref}\r\n      >\r\n        <p className=\"xd-form-error-summary-heading\">There is a problem</p>\r\n        <ul>\r\n          {invalidFields.map(({ name, id, message }) => (\r\n            <li key={name}>\r\n              <a\r\n                href={`#${id}`}\r\n                onClick={(event) => {\r\n                  event.preventDefault();\r\n                  document.getElementById(id)?.focus();\r\n                }}\r\n              >\r\n                {message}\r\n              </a>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n","import {\r\n  Input,\r\n  type InputProps,\r\n  type ValidationRules,\r\n  useFormFieldContext,\r\n} from '@asnewyla/input';\r\nimport { type ForwardedRef, forwardRef, useEffect, useRef } from 'react';\r\n\r\nexport type FormFieldInputProps = Omit<InputProps, 'name'> & {\r\n  name: string;\r\n  validate?: (value: string) => string | undefined;\r\n};\r\n\r\nfunction FormFieldInputInner(\r\n  {\r\n    name,\r\n    required,\r\n    pattern,\r\n    minLength,\r\n    maxLength,\r\n    min,\r\n    max,\r\n    validate,\r\n    error,\r\n    onBlur,\r\n    ...rest\r\n  }: FormFieldInputProps,\r\n  ref: ForwardedRef<HTMLInputElement>,\r\n) {\r\n  // useFormFieldContext() returns null when there's no ancestor\r\n  // FormFieldProvider — that's what makes FormFieldInput a no-op outside a\r\n  // Form (still a perfectly usable Input, just without registration).\r\n  const formField = useFormFieldContext();\r\n\r\n  // A stable ref we always own, so registerField always gets a real node —\r\n  // separate from `ref`, which is whatever (or nothing) the consumer passed.\r\n  const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n  const rules: ValidationRules = {\r\n    required,\r\n    pattern,\r\n    minLength,\r\n    maxLength,\r\n    min,\r\n    max,\r\n    validate,\r\n  };\r\n\r\n  // Deliberately depends on formField?.registerField/unregisterField, not\r\n  // on `formField` itself — Form's context value changes identity whenever\r\n  // its `errors` state updates (that's correct: this component needs to\r\n  // re-render to read the new error). But if this effect depended on the\r\n  // whole object, every validation would also re-trigger registration:\r\n  // cleanup would call the *previous* render's unregisterField, deleting\r\n  // the field and wiping the error validateField just set, in the same\r\n  // tick it was written. Depending on the two functions directly (stable\r\n  // via Form's useCallback) keeps registration decoupled from errors\r\n  // changing.\r\n  // Also deliberately not depending on `rules` — it's a fresh object every\r\n  // render, so registration happens once per mount (or when formField/name\r\n  // change), not on every rule-prop tweak. Rule props are effectively fixed\r\n  // at mount for v0.x; no test or use case yet needs them reactive.\r\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally narrowed deps — see comment above\r\n  useEffect(() => {\r\n    if (!formField) return;\r\n    formField.registerField(name, { ref: inputRef, rules });\r\n    return () => formField.unregisterField(name);\r\n  }, [formField?.registerField, formField?.unregisterField, name]);\r\n\r\n  // Merges `inputRef` (ours, for registration) with `ref` (the consumer's\r\n  // forwarded one, if any) so both end up pointing at the same DOM node —\r\n  // neither one silently loses the element to the other.\r\n  const setRefs = (node: HTMLInputElement | null) => {\r\n    inputRef.current = node;\r\n    if (typeof ref === 'function') {\r\n      ref(node);\r\n    } else if (ref) {\r\n      ref.current = node;\r\n    }\r\n  };\r\n\r\n  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\r\n    if (formField) {\r\n      formField.validateField(name);\r\n    }\r\n    onBlur?.(event);\r\n  }\r\n\r\n  const formContextError = formField ? formField.errors[name] : undefined;\r\n  const formFieldError = error ?? formContextError;\r\n\r\n  return (\r\n    <Input\r\n      name={name}\r\n      required={required}\r\n      pattern={pattern}\r\n      minLength={minLength}\r\n      maxLength={maxLength}\r\n      min={min}\r\n      max={max}\r\n      {...rest}\r\n      error={formFieldError}\r\n      onBlur={handleBlur}\r\n      ref={setRefs}\r\n    />\r\n  );\r\n}\r\n\r\nexport const FormFieldInput = forwardRef<HTMLInputElement, FormFieldInputProps>(\r\n  FormFieldInputInner,\r\n);\r\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@asnewyla/form",
+  "version": "0.2.0",
+  "description": "Form wrapper with real validation and an accessible error summary",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/form"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "form",
+    "validation",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@asnewyla/input": "0.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.0",
+    "vitest": "^2.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}