Correct validation/error display on both field and form components

export function FormErrors({
  meta,
}: {
  meta: FieldMeta<any, any ...>
  >;
}) {
  return (
    meta.isDirty &&
    meta.errors.length > 0 && (
      <em className="text-destructive text-sm">
        {meta.errors.map((err) => err.message).join(", ")}
      </em>
    )
  );
}

export function SubmitButton({
  label,
  isLoading,
}: {
  label: string;
  isLoading?: boolean;
}) {
  const form = useFormContext();

  return (
    <form.Subscribe selector={(state) => [state.isSubmitting, state.isValid]}>
      {([isSubmitting, isValid]) => (
        <Button
          type="submit"
          className="w-full bg-indigo-600 py-2 px-4 text-white rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors"
          disabled={!isValid || isSubmitting}
        >
          {isLoading ? <Loader2 className="animate-spin" /> : label}
        </Button>
      )}
    </form.Subscribe>
  );
}