Field + form con validación

"use client";

import { Button } from "@moodinary/ui/components/button";
import {
	Field,
	FieldError,
	FieldHint,
	FieldLabel,
} from "@moodinary/ui/components/field";
import { Input } from "@moodinary/ui/components/input";
import { useCallback, useState } from "react";

const DIGITS = /^\d+$/;

export default function FieldDefault() {
	const [value, setValue] = useState("");
	const [error, setError] = useState<string | null>(null);
	const [saved, setSaved] = useState(false);
	const change = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
		setValue(event.target.value);
		setError(null);
		setSaved(false);
	}, []);
	const submit = useCallback(
		(event: React.FormEvent<HTMLFormElement>) => {
			event.preventDefault();
			if (
				value &&
				(!DIGITS.test(value) || Number(value) < 1 || Number(value) > 1_000_000)
			) {
				setError("Ingresá un entero entre 1 y 1.000.000.");
				(
					event.currentTarget.elements.namedItem("target") as HTMLInputElement
				).focus();
				return;
			}
			setSaved(true);
		},
		[value]
	);
	return (
		<form className="w-full max-w-[520px]" noValidate onSubmit={submit}>
			<section className="space-y-5 rounded-[10px] border border-line bg-card p-4 text-ink text-sm shadow-card">
				<div>
					<h3 className="font-medium text-foreground text-sm">Meta semanal</h3>
					<p className="mt-0.5 text-muted-foreground text-xs">
						Cuántos pulsos esperás por semana. Inicio la usa para mostrar el
						avance; dejala vacía para no tener meta.
					</p>
				</div>
				<Field>
					<FieldLabel htmlFor="weekly-target-field">
						Pulsos por semana
					</FieldLabel>
					<Input
						aria-describedby={
							error ? "target-hint target-error" : "target-hint"
						}
						aria-invalid={error ? true : undefined}
						autoComplete="off"
						id="weekly-target-field"
						inputMode="numeric"
						name="target"
						onChange={change}
						placeholder="Sin meta"
						value={value}
					/>
					<FieldHint id="target-hint">Entero entre 1 y 1.000.000.</FieldHint>
					<FieldError id="target-error">{error}</FieldError>
				</Field>
				{saved ? (
					<p aria-live="polite" className="text-m5 text-xs">
						Validación local correcta. No se guardaron cambios.
					</p>
				) : null}
				<div className="flex flex-wrap justify-end gap-2">
					<Button type="submit">Guardar meta</Button>
				</div>
			</section>
		</form>
	);
}